diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..c3c7680 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,150 @@ +/* MyMech Custom Styles */ +:root { + --navy-blue: #001f3f; + --navy-blue-darker: #001428; + --golden-yellow: #FFD700; + --golden-yellow-dark: #F0C400; + --off-white: #EFEFEF; + --card-bg: #002a54; +} + +body { + background-color: var(--navy-blue); + color: var(--off-white); + font-family: 'Poppins', sans-serif; +} + +.navbar-dark .navbar-brand { + font-weight: 700; + font-size: 1.5rem; +} + +.golden-text { + background: -webkit-linear-gradient(45deg, var(--golden-yellow), var(--golden-yellow-dark)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.navbar-brand .golden-text { + display: inline-block; +} + +.hero { + position: relative; + padding: 10rem 0; + background-size: cover; + background-position: center; + color: white; + text-align: center; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 20, 40, 0.7); +} + +.hero .container { + position: relative; + z-index: 2; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); +} + +.hero p { + font-size: 1.25rem; + margin-bottom: 2rem; +} + +.btn-golden { + background: linear-gradient(45deg, var(--golden-yellow), var(--golden-yellow-dark)); + border: none; + color: var(--navy-blue-darker); + font-weight: 600; + padding: 0.75rem 1.5rem; + border-radius: 8px; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease; +} + +.btn-golden:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); + color: black; +} + +.btn-outline-golden { + border: 2px solid var(--golden-yellow); + color: var(--golden-yellow); + font-weight: 600; + padding: 0.75rem 1.5rem; + border-radius: 8px; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.btn-outline-golden:hover { + background-color: var(--golden-yellow); + color: var(--navy-blue-darker); +} + +.join-us-section { + padding: 5rem 0; +} + +.join-us-section h2 { + font-weight: 700; + margin-bottom: 3rem; +} + +.role-card { + background-color: var(--card-bg); + border: 1px solid #003b73; + border-radius: 8px; + padding: 2rem; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.role-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.role-card img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 1.5rem; +} + +.role-card h3 { + color: var(--golden-yellow); + font-weight: 600; +} + +.footer { + background-color: var(--navy-blue-darker); + padding: 2rem 0; + color: #aaa; +} + +.footer a { + color: #ccc; + text-decoration: none; +} + +.footer a:hover { + color: var(--golden-yellow); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..bcf4642 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,5 @@ +// Custom JavaScript for MyMech +document.addEventListener('DOMContentLoaded', function () { + // Future interactivity can be added here. + console.log("MyMech JS loaded"); +}); diff --git a/index.php b/index.php index 6f7ffab..fda785e 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,115 @@ - - + - - - New Style - - - - + + + MyMech - Your Trusted Auto Care Partner + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Your Trusted Mechanic, Just a Click Away.

+

Find reliable mechanics and genuine spare parts instantly. Get back on the road faster.

+
+ Find a Mechanic + Find Spare Parts +
+
+
+ + +
+
+

Join the MyMech Community

+
+ +
+
+
+ A person using a smartphone to find directions. +

For Drivers

+

Get fast, reliable help from trusted mechanics near you. Search for specific services and parts to get exactly what you need.

+
+ Sign Up as a Driver +
+
+ +
+
+
+ A professional mechanic working on a car engine. +

For Mechanics

+

Grow your business by connecting with car owners in your area. List your services and showcase your expertise.

+
+ Register Your Garage +
+
+ +
+
+
+ A well-organized auto spare parts shop. +

For Part Shops

+

List your inventory and reach a larger audience. Help drivers find the genuine parts they need quickly and easily.

+
+ List Your Parts +
+
+
+
+
+ + + + + + + + - + \ No newline at end of file