feat: add all homepage sections

index.html

@@ -9,8 +9,17 @@
       content="KHY provides professional services and solutions for your business needs."
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+      /* Utility to color PNG star via CSS mask while using Tailwind color tokens */
+      .mask-star {
+        -webkit-mask: url("assets/icons/star.png") no-repeat center / contain;
+        mask: url("assets/icons/star.png") no-repeat center / contain;
+        background-color: currentColor;
+        display: inline-block;
+      }
+    </style>
     <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -24,7 +33,7 @@
           <!-- Logo Section -->
           <div class="flex items-center">
             <img
-              src="assets/images/KHY logo.png"
+              src="assets/images/khy_logo.png"
               alt="KHY Logo"
               class="h-16 w-auto drop-shadow-sm"
             />
@@ -253,7 +262,7 @@
                   <svg
                     class="w-6 h-6"
                     fill="none"
-                    stroke="#B88E2F"
+                    stroke="currentColor"
                     viewBox="0 0 24 24"
                   >
                     <path
@@ -312,12 +321,521 @@
           </div>
         </div>
       </section>
+
+      <!-- Our Products Section -->
+      <section class="relative bg-white pt-12 pb-20">
+        <div class="max-w-7xl mx-auto px-5">
+          <!-- Section Header -->
+          <div class="text-center mb-16">
+            <h2
+              class="font-playfair font-bold text-3xl md:text-3xl lg:text-4xl leading-tight text-black mb-8"
+            >
+              Our Products
+            </h2>
+            <p
+              class="font-playfair font-normal text-lg md:text-xl lg:text-xl leading-tight tracking-wider text-black"
+            >
+              Browse our collections - designed to optimize space while
+              balancing quality, aesthetics, and value
+            </p>
+          </div>
+
+          <!-- Product Grid -->
+          <div
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"
+          >
+            <!-- Product Card 1: Lounge Chairs -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/lounge_chair.jpg"
+                  alt="Lounge Chairs"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Lounge Chairs
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Stylish cafe chair
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 2: Office Chairs -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/office_chair.jpg"
+                  alt="Office Chairs"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Office Chairs
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Luxury big sofa
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 3: Conference Room -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/conference_rooms.jpg"
+                  alt="Conference Room"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Conference Room
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Tables
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 4: Storage -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/storage.jpg"
+                  alt="Storage"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Storage
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Outdoor bar table and stool
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 5: Kitchen -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/kitchen.jpg"
+                  alt="Kitchen"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Kitchen
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Night lamp
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 6: Chairs -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/chairs.jpg"
+                  alt="Chairs"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Chairs
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Small mug
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 7: Pods -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/pods.jpg"
+                  alt="Pods"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Pods
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Cute bed set
+                </p>
+              </div>
+            </div>
+
+            <!-- Product Card 8: Potty -->
+            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
+              <div class="h-[301px] bg-gray-200">
+                <img
+                  src="assets/images/potty.jpg"
+                  alt="Potty"
+                  class="w-full h-full object-cover"
+                />
+              </div>
+              <div class="p-4 h-[145px] flex flex-col justify-center">
+                <h3
+                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                >
+                  Potty
+                </h3>
+                <p class="font-poppins font-medium text-sm text-gray-500">
+                  Minimalist flower pot
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Call to Action Button -->
+          <div class="text-center">
+            <button
+              class="bg-white border border-uc-gold text-uc-gold font-playfair font-semibold text-base px-8 py-3 rounded-lg hover:bg-uc-gold hover:text-white transition-all"
+            >
+              Browse product catalog
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- Customer Satisfaction Section -->
+      <section class="relative bg-floral-white py-12 -mt-8">
+        <div class="max-w-7xl mx-auto px-5">
+          <div class="text-center">
+            <!-- Section Title -->
+            <h2
+              class="font-playfair font-bold text-3xl md:text-4xl lg:text-4xl leading-tight text-gray-800 mb-8"
+            >
+              Customer satisfaction
+            </h2>
+
+            <!-- Star Rating -->
+            <div class="flex justify-center items-center gap-2 mb-8">
+              <span
+                class="mask-star text-uc-gold w-8 h-8"
+                aria-hidden="true"
+              ></span>
+              <span
+                class="mask-star text-uc-gold w-8 h-8"
+                aria-hidden="true"
+              ></span>
+              <span
+                class="mask-star text-uc-gold w-8 h-8"
+                aria-hidden="true"
+              ></span>
+              <span
+                class="mask-star text-uc-gold w-8 h-8"
+                aria-hidden="true"
+              ></span>
+              <span
+                class="mask-star text-uc-gold w-8 h-8"
+                aria-hidden="true"
+              ></span>
+            </div>
+
+            <!-- Testimonial -->
+            <div class="max-w-4xl mx-auto">
+              <blockquote
+                class="font-playfair font-medium text-xl md:text-2xl lg:text-3xl leading-relaxed text-black mb-4"
+              >
+                "Exceptional Craftsmanship and detail. <br />
+                Our office feels alive."
+              </blockquote>
+              <cite
+                class="font-playfair font-light text-xl md:text-2xl lg:text-2xl text-black"
+              >
+                Google Ghana, Accra
+              </cite>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Our Partners Section -->
+      <section class="relative bg-white py-20">
+        <div class="max-w-7xl mx-auto px-5">
+          <div class="text-center">
+            <!-- Section Title -->
+            <h2
+              class="font-playfair font-bold text-3xl md:text-4xl lg:text-4xl leading-tight text-black mb-0"
+            >
+              Our Partners
+            </h2>
+
+            <!-- Partner Logos -->
+            <div
+              class="flex flex-wrap justify-center items-center gap-8 md:gap-12 lg:gap-12"
+            >
+              <!-- Bene -->
+              <div class="w-48 md:w-52 lg:w-56 -mt-2">
+                <img
+                  src="assets/images/bene.png"
+                  alt="Bene"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- Cecil Nurse -->
+              <div class="w-56 md:w-60 lg:w-64">
+                <img
+                  src="assets/images/cecil_nurse.png"
+                  alt="Cecil Nurse."
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- Andreu World -->
+              <div class="w-80 md:w-84 lg:w-88">
+                <img
+                  src="assets/images/andreu_world.png"
+                  alt="Andreu World"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- Forma 5 -->
+              <div class="w-56 md:w-60 lg:w-64">
+                <img
+                  src="assets/images/forma_5.png"
+                  alt="Forma 5"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Trusted by Leading Brands Section -->
+      <section class="relative bg-floral-white py-12">
+        <div class="max-w-7xl mx-auto px-5">
+          <div class="text-center">
+            <!-- Section Title -->
+            <h2
+              class="font-playfair font-bold text-2xl md:text-3xl lg:text-4xl leading-tight text-black mb-16 tracking-wider"
+            >
+              Trusted by Leading Brands
+            </h2>
+
+            <!-- Company Logos -->
+            <div
+              class="flex flex-nowrap justify-center items-center gap-8 md:gap-12 lg:gap-16 overflow-x-auto"
+            >
+              <!-- Norfund -->
+              <div class="w-40 md:w-44 lg:w-48 flex-shrink-0">
+                <img
+                  src="assets/images/norfund.png"
+                  alt="Norfund"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- Glico -->
+              <div class="w-56 md:w-60 lg:w-64 flex-shrink-0">
+                <img
+                  src="assets/images/glico.png"
+                  alt="Glico"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- Standard Bank -->
+              <div class="w-28 md:w-32 lg:w-36 flex-shrink-0">
+                <img
+                  src="assets/images/stanbic.png"
+                  alt="Stanbic Bank"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- GROW ENGINEERING -->
+              <div class="w-36 md:w-40 lg:w-44 flex-shrink-0">
+                <img
+                  src="assets/images/grow.png"
+                  alt="GROW ENGINEERING"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+
+              <!-- DBG -->
+              <div class="w-36 md:w-40 lg:w-44 flex-shrink-0">
+                <img
+                  src="assets/images/dbg.png"
+                  alt="DBG"
+                  class="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <!-- Footer -->
-    <footer class="bg-gray-800 text-white text-center py-8">
-      <div class="max-w-6xl mx-auto px-5">
-        <p>&copy; 2024 KHY. All rights reserved.</p>
+    <footer class="bg-white border-t border-black border-opacity-20">
+      <!-- Main Footer Content -->
+      <div class="max-w-7xl mx-auto px-5 py-16">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <!-- Company Information -->
+          <div class="space-y-2">
+            <!-- Logo -->
+            <div class="w-16 h-20">
+              <img
+                src="assets/images/khy_logo.png"
+                alt="khy"
+                class="w-full h-full object-contain"
+              />
+            </div>
+
+            <!-- Address -->
+            <p
+              class="font-playfair font-normal text-base leading-relaxed text-gray-600"
+            >
+              5 Labone Crescent, Greater Accra, Ghana
+            </p>
+
+            <!-- Contact Info -->
+            <div class="space-y-1">
+              <!-- Phone -->
+              <div class="flex items-center space-x-3">
+                <img
+                  src="assets/images/phone.png"
+                  alt="Phone"
+                  class="w-4 h-4"
+                />
+                <span class="font-playfair font-normal text-base text-gray-800">
+                  +233 (555) 76677
+                </span>
+              </div>
+
+              <!-- Email -->
+              <div class="flex items-center space-x-3">
+                <img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
+                <span class="font-playfair font-normal text-base text-gray-800">
+                  design@khyltd.com
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Links -->
+          <div class="space-y-6">
+            <h3
+              class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
+            >
+              Quick Links
+            </h3>
+            <div class="space-y-4">
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                Home
+              </a>
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                Products
+              </a>
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                About
+              </a>
+            </div>
+          </div>
+
+          <!-- Help -->
+          <div class="space-y-6">
+            <h3
+              class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
+            >
+              Help
+            </h3>
+            <div class="space-y-4">
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                Contact Us
+              </a>
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                Privacy Policies
+              </a>
+              <a
+                href="#"
+                class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
+              >
+                Terms and Conditions
+              </a>
+            </div>
+          </div>
+
+          <!-- Newsletter -->
+          <div class="space-y-6">
+            <h3
+              class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
+            >
+              Newsletter
+            </h3>
+            <div class="space-y-4">
+              <div class="flex items-center space-x-4">
+                <input
+                  type="email"
+                  placeholder="Enter Your Email Address"
+                  class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
+                />
+                <button
+                  class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
+                >
+                  Subscribe
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Copyright Section -->
+      <div class="border-t border-light-silver">
+        <div class="max-w-7xl mx-auto px-5 py-4">
+          <p
+            class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
+          >
+            © 2025 khy. All rights reserved.
+          </p>
+        </div>
       </div>
     </footer>
 

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
       fontFamily: {
         montserrat: ["Montserrat", "sans-serif"],
         playfair: ["Playfair Display", "serif"],
+        poppins: ["Poppins", "sans-serif"],
       },
       colors: {
         white: "#FFFFFF",
@@ -22,6 +23,7 @@ module.exports = {
         "light-silver": "#D7D7D7",
         "quick-silver": "#A0A0A0",
         linen: "#FAF0E6",
+        "light-bg": "#F4F5F7",
       },
       spacing: {
         396: "396px",