khy_website/blog.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog - KHY</title>
    <meta
      name="description"
      content="Read our latest blog posts about furniture design and interior styling."
    />
    <link rel="stylesheet" href="styles/main.css" />
    <style>
      /* Smooth scrolling for the entire page */
      html {
        scroll-behavior: smooth;
      }

      /* Active navigation link styling */
      .nav-link.active {
        color: #b8873f !important;
        font-weight: 500;
      }
    </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&family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="bg-white font-sans text-gray-800">
    <!-- Header -->
    <header
      class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
    >
      <nav class="h-full">
        <div
          class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
        >
          <!-- Logo Section -->
          <div class="flex items-center">
            <img
              src="assets/images/khy_logo.png"
              alt="KHY Logo"
              class="h-16 w-auto drop-shadow-sm"
            />
          </div>

          <!-- Navigation -->
          <ul class="flex space-x-10">
            <li>
              <a
                href="index.html"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Home</a
              >
            </li>
            <li>
              <a
                href="index.html#products"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Products</a
              >
            </li>
            <li>
              <a
                href="index.html#projects-button"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Projects</a
              >
            </li>
            <li>
              <a
                href="index.html#clients"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Clients</a
              >
            </li>
            <li>
              <a
                href="index.html#about"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >About</a
              >
            </li>
            <li>
              <a
                href="contact.html"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Contact</a
              >
            </li>
            <li>
              <a
                href="blog.html"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Blog</a
              >
            </li>
            <li>
              <a
                href="quote.html"
                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                >Quote</a
              >
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main>
      <!-- Hero Section -->
      <section class="relative h-80 mt-28">
        <!-- Background Image -->
        <div class="absolute inset-0 w-full h-full">
          <img
            src="assets/images/first_homepage.jpg"
            alt="Modern office interior"
            class="w-full h-full object-cover object-center"
            style="filter: blur(3px)"
          />
        </div>

        <!-- White Overlay -->
        <div class="absolute inset-0 bg-white bg-opacity-60"></div>

        <!-- Overlay Content -->
        <div
          class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
        >
          <h1
            class="font-playfair font-medium text-4xl md:text-5xl lg:text-6xl leading-tight"
          >
            Blog
          </h1>
        </div>
      </section>

      <!-- Blog Content Section -->
      <section class="relative bg-white py-20">
        <div class="max-w-7xl mx-auto px-5">
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
            <!-- Main Blog Content -->
            <div class="lg:col-span-2">
              <div id="main-blog-content">
                <!-- Blog posts will be dynamically loaded here -->
              </div>

              <!-- Pagination -->
              <div
                id="blog-pagination"
                class="flex items-center justify-center space-x-4 mt-10"
              >
                <button
                  type="button"
                  data-page="1"
                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-uc-gold text-white font-playfair font-normal text-xl rounded-full shadow-sm"
                >
                  1
                </button>
                <button
                  type="button"
                  data-page="2"
                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                >
                  2
                </button>
                <button
                  type="button"
                  data-page="3"
                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                >
                  3
                </button>
                <button
                  type="button"
                  id="blog-next-btn"
                  class="inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                >
                  Next
                </button>
              </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1">
              <!-- Search -->
              <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
                <div class="relative">
                  <input
                    id="blog-search-input"
                    type="text"
                    placeholder="Search..."
                    class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold pr-12"
                  />
                  <img
                    src="assets/icons/search.png"
                    alt="Search"
                    class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6"
                  />
                </div>
              </div>

              <!-- Categories -->
              <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
                <h3 class="font-playfair font-medium text-2xl text-black mb-6">
                  Categories
                </h3>
                <div id="blog-categories" class="space-y-4">
                  <!-- Categories will be dynamically loaded here -->
                </div>
              </div>

              <!-- Recent Posts -->
              <div class="bg-white p-6 rounded-lg shadow-sm">
                <h3 class="font-playfair font-medium text-2xl text-black mb-6">
                  Recent Posts
                </h3>
                <div id="recent-posts" class="space-y-6">
                  <!-- Recent posts will be dynamically loaded here -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <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-1">
            <!-- Logo -->
            <div class="w-16 h-20 -mt-6">
              <a
                href="index.html"
                aria-label="Go to KHY home"
                title="KHY Home"
                class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
              >
                <img
                  src="assets/images/khy_logo.png"
                  alt="KHY logo"
                  loading="lazy"
                  class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
                />
              </a>
            </div>

            <!-- Address -->
            <p
              class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
            >
              5 Labone Crescent, Greater Accra, Ghana
            </p>

            <!-- Contact Info -->
            <div class="space-y-1 -mt-2">
              <!-- Phone -->
              <div class="flex items-center space-x-3 -mt-1">
                <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 -mt-1">
                <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>

    <script src="scripts/main.js?v=4.2"></script>
  </body>
</html>