feat: add hero section

index.html

@@ -95,61 +95,39 @@
 
     <main>
       <!-- Hero Section -->
-      <section
-        class="bg-gradient-to-br from-blue-600 to-purple-700 text-white text-center py-16 min-h-[60vh] flex items-center"
-      >
-        <div class="max-w-6xl mx-auto px-5">
-          <h1 class="text-5xl font-light mb-4">Welcome to KHY</h1>
-          <p class="text-xl mb-8 opacity-90">
-            Professional services and innovative solutions for your business
-          </p>
-          <button
-            class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 text-lg rounded-lg transition-colors font-medium"
-          >
-            Get Started
-          </button>
+      <section class="relative h-screen mt-28">
+        <!-- Background Image -->
+        <div class="absolute inset-0 w-full h-full">
+          <img
+            src="assets/images/first_homepage.jpg"
+            alt="Modern interior design space"
+            class="w-full h-full object-cover object-top"
+          />
         </div>
-      </section>
 
-      <!-- Services Section -->
-      <section class="py-16 bg-white">
-        <div class="max-w-6xl mx-auto px-5">
-          <h2 class="text-4xl font-light text-center text-gray-800 mb-8">
-            Our Services
-          </h2>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
+        <!-- Overlay Content -->
+        <div
+          class="absolute z-10 inset-0 flex items-start justify-center pt-32 md:pt-40 lg:pt-48 -pr-2 md:pr-0 lg:pr-2 text-center text-dark-charcoal"
+        >
+          <h1
+            class="font-playfair font-light text-3xl md:text-4xl lg:text-5xl leading-tight tracking-wider"
+          >
+            Redefining the Artistry of<br />
+            <span class="font-normal">Furniture</span>
+          </h1>
+        </div>
+        <!-- Crafting Spaces Text -->
+        <div
+          class="absolute z-10 left-1/2 transform -translate-x-1/2 top-80 md:top-[24rem] lg:top-[29rem]"
+        >
+          <div
+            class="inline-block bg-black bg-opacity-70 text-white px-6 py-2 rounded-xl text-center"
+          >
+            <p
+              class="font-playfair font-light text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider"
             >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Professional Consulting
-              </h3>
-              <p class="text-gray-600">
-                Expert guidance and strategic solutions for your business
-                challenges.
-              </p>
-            </div>
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
-            >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Project Management
-              </h3>
-              <p class="text-gray-600">
-                Comprehensive project management services to ensure successful
-                delivery.
-              </p>
-            </div>
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
-            >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Client Support
-              </h3>
-              <p class="text-gray-600">
-                Dedicated support and maintenance for all your business needs.
-              </p>
-            </div>
+              crafting spaces that feel like home
+            </p>
           </div>
         </div>
       </section>