<?php
include "admin/db.php";
?>

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
content="Maria Curtains offers quality curtains, sheers, curtain rods, mats and home décor in Thika, Kenya. Affordable prices, custom fitting and professional installation.">
  <meta property="og:title" content="Maria Curtains">
  <meta property="og:description"
content="Premium curtains and interior accessories in Kenya.">
  <meta property="og:image"
content="https://mariacurtains.co.ke/images/cover.jpg">
  <meta property="og:url"
content="https://mariacurtains.co.ke">
  <meta property="og:type"
content="website">

<meta name="twitter:card"
content="summary_large_image">

<meta name="twitter:title"
content="Maria Curtains">

<meta name="twitter:description"
content="Premium Curtains in Kenya">

<meta name="twitter:image"
content="https://mariacurtains.co.ke/img/cover.jpg">

  <title>Maria Curtains | Quality Curtains, Sheers, Curtain Rods & Home Decor in Thika, Kenya</title>

  <link rel="canonical"
href="https://mariacurtains.co.ke/">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>

  
  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">

  
  <link rel="stylesheet" href="index.css">

  <script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"HomeAndConstructionBusiness",
  "name":"Maria Curtains",
  "url":"https://mariacurtains.co.ke",
  "telephone":"+254724361914",
  "address":{
    "@type":"PostalAddress",
    "addressLocality":"Thika",
    "addressCountry":"KE"
  },
  "image":"https://mariacurtains.co.ke/img/logo.png"
}
</script>
</head>

<body>

  

 <header class="navbar">

  <div class="logo">
    <a href="index.php">Maria Curtains</a>
  </div>

  
   <div class="hamburger" onclick="toggleMenu()">
    <i class="fa-solid fa-bars"></i>
  </div>


  <nav id="navMenu" class="nav">

    <ul class="nav-menu">

      <li><a href="index.php">Home</a></li>

      <li><a href="categories.php">Categories</a></li>

      <li><a href="offers.php">Offers</a></li>

      <li><a href="contact.php">Contact</a></li>

      <li class="quote-item">
        <a href="index.php#quote" class="quote-nav">Request Quote</a>
      </li>

    </ul>

  </nav>

</header>

  

  <section class="hero">

    <div class="hero-content">

      <!-- <span class="mini-title">
        Premium Curtains & Interior Accessories
      </span> -->

      <h1>
        Elegant Curtains <br>
        Designed For Modern Living
      </h1>

      <p>
        Explore custom curtains, sheers, rods and accessories crafted
        to elevate your interior space with timeless elegance.
      </p>

      <div class="hero-buttons">

        <a href="#categories" class="btn primary-btn">
          Explore Collection
        </a>

        <a href="#quote" class="btn secondary-btn">
          Request Quote
        </a>

      </div>

    </div>

  </section>

  

  <section id="categories" class="section">

    <div class="section-header">

      <span class="section-subtitle">
        OUR COLLECTIONS
      </span>

      <h2>
        Curated Interior Essentials
      </h2>

      <p>
        Carefully selected fabrics and accessories designed to complement modern interiors.
      </p>

    </div>

    <div class="grid">

      

      <div class="card">

        <img src="images/cur.jpg" alt="Curtains">

        <div class="card-info">

          <h3>Curtains</h3>

          <p>
            Velvet • Blackout • Silk
          </p>

        </div>

      </div>

      

      <div class="card">

        <img src="images/cur1.jpg" alt="Sheers">

        <div class="card-info">

          <h3>Sheers</h3>

          <p>
            Light • Airy • Elegant
          </p>

        </div>

      </div>

      

      <div class="card">

        <img src="images/rods.jpg" alt="Curtain Rods">

        <div class="card-info">

          <h3>Rods</h3>

          <p>
            Modern premium finishes
          </p>

        </div>

      </div>

      

      <div class="card">

        <img src="images/mat2.jpg" alt="Mats">

        <div class="card-info">

          <h3>Mats</h3>

          <p>
            Stylish & comfortable
          </p>

        </div>

      </div>

      <div class="card">

        <img src="images/hook.jpg" alt="Mats">

        <div class="card-info">

          <h3>Accessories</h3>

          <p>
            Tiebacks • Hooks • Finials
          </p>

        </div>

    </div>

    <div class="card">

        <img src="images/pillows.jpg" alt="Mats">

        <div class="card-info">

          <h3>Pillows</h3>

          <p>
            Decorative cushions for every room
          </p>

        </div>
        </div>  

</div>

  </section>



<section class="why-section">

  <div class="section-header">

    <span class="section-subtitle">
      WHY CHOOSE US
    </span>

    <h2>
      Designed Around Quality & Elegance
    </h2>

  </div>

  <div class="why-grid">

    

    <div class="why-card">

      <div class="why-icon">
        <i class="fa-solid fa-couch"></i>
      </div>

      <h3>
        Premium Materials
      </h3>

      <p>
        Carefully selected fabrics and accessories crafted for modern interiors.
      </p>

    </div>

    

    <div class="why-card">

      <div class="why-icon">
        <i class="fa-solid fa-ruler-combined"></i>
      </div>

      <h3>
        Custom Measurements
      </h3>

      <p>
        Personalized sizing and fitting solutions tailored to your space.
      </p>

    </div>

    

    <div class="why-card">

      <div class="why-icon">
        <i class="fa-brands fa-whatsapp"></i>
      </div>

      <h3>
        Fast Consultation
      </h3>

      <p>
        Quick responses and quotation assistance directly through WhatsApp.
      </p>

    </div>

  </div>

</section>

  

 

<section id="quote" class="quote-section">

  <div class="quote-container">

    

    <div class="quote-info">

      <span class="section-subtitle">
        CONTACT OUR TEAM
      </span>

      <h2>
        Make A Quotation Or Enquiry
      </h2>

      <p>
        Share your preferred curtain type, colors, measurements or any interior questions and our team will respond directly via WhatsApp.
      </p>

      

      <a href="tel:+254724361914" class="call-btn">

        Call Us Now

      </a>

      <div class="owner-number">

        +254 724 361 914

      </div>

    </div>

    

    

<div class="quote-box">

  
<div class="form-tabs">

  <button class="tab-btn active" onclick="showForm('quotation')">
    Quotation
  </button>

  <button class="tab-btn" onclick="showForm('enquiry')">
    Enquiry
  </button>

</div>

  
  <div class="form-wrapper">

    
    <form id="quotation-form" class="active-form">

  <input type="text" id="q-name" placeholder="Full Name">

  <input type="tel" id="q-phone" placeholder="Phone Number">

  

  

  <select id="q-category" onchange="filterItems()">

  <option value="">
    Select Category
  </option>

  <?php

  $categories = $conn->query("
    SELECT DISTINCT category
    FROM products
    ORDER BY category ASC
  ");

  while($row = $categories->fetch_assoc()):
  ?>

    <option value="<?= htmlspecialchars($row['category']) ?>">

      <?= htmlspecialchars($row['category']) ?>

    </option>

  <?php endwhile; ?>

</select>

<select id="q-item" onchange="filterColors()">

  <option value="">
    Select Item
  </option>

  <?php

  $products = $conn->query("
    SELECT id, name, category
    FROM products
    ORDER BY name ASC
  ");

  while($row = $products->fetch_assoc()):
  ?>

    <option
      value="<?= $row['id'] ?>"
      data-category="<?= htmlspecialchars($row['category']) ?>">

      <?= htmlspecialchars($row['name']) ?>

    </option>

  <?php endwhile; ?>

</select>



<select id="q-color">

  <option value="">
    Select Color
  </option>

  <?php

  $colors = $conn->query("
    SELECT product_colors.color,
           product_colors.product_id
    FROM product_colors
    ORDER BY color ASC
  ");

  while($row = $colors->fetch_assoc()):
  ?>

    <option
      value="<?= htmlspecialchars($row['color']) ?>"
      data-product="<?= $row['product_id'] ?>">

      <?= htmlspecialchars(ucfirst($row['color'])) ?>

    </option>

  <?php endwhile; ?>

</select>

  

  <div class="dimension-fields">

  
  <div class="dimension-group">

    <label>Width</label>

    <input type="number" id="q-width" placeholder="Enter width">

    <select id="q-width-unit">

      <option value="m">meters (m)</option>
      <option value="cm">centimeters (cm)</option>
      <option value="in">inches (in)</option>

    </select>

  </div>

  
  <div class="dimension-group">

    <label>Height</label>

    <input type="number" id="q-height" placeholder="Enter height">

    <select id="q-height-unit">

      <option value="m">meters (m)</option>
      <option value="cm">centimeters (cm)</option>
      <option value="in">inches (in)</option>

    </select>

  </div>

</div>

  

  <textarea
  id="q-details"
  placeholder="Tell us your window type, room, or installation needs...">
  </textarea>

  <button type="button" onclick="sendQuotation()">

    Get Quotation via WhatsApp

  </button>

</form>

    
    <form id="enquiry-form">

      <input type="text" id="e-name" placeholder="Full Name">

      <input type="tel" id="e-phone" placeholder="Phone Number">

      <textarea id="e-message" placeholder="Type your enquiry..."></textarea>

      <button type="button" onclick="sendEnquiry()">
        Send Enquiry
      </button>

    </form>

  </div>

</div>

  </div>

</section>



<section class="testimonials-section">

  <div class="section-header">

    <span class="section-subtitle">
      CLIENT FEEDBACK
    </span>

    <h2>
      What Our Customers Say
    </h2>

  </div>

  <div class="testimonials-grid">

    

    <div class="testimonial-card">

      <div class="stars">

        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>

      </div>

      <p>

        The curtains completely transformed my living room. The quality and finishing were exceptional.

      </p>

      <h4>
        — Grace Wanjiku
      </h4>

    </div>

    

    <div class="testimonial-card">

      <div class="stars">

        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>

      </div>

      <p>

        Professional service, elegant sheers and very helpful consultation process.

      </p>

      <h4>
        — Brian Kimani
      </h4>

    </div>

    

    <div class="testimonial-card">

      <div class="stars">

        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>

      </div>

      <p>

        Beautiful mats and curtain accessories. Everything matched my space perfectly.

      </p>

      <h4>
        — Sharon Mwende
      </h4>

    </div>

  </div>

</section>

  

  <footer class="site-footer">

  <div class="footer-container">

    
    <div class="footer-brand">

      <div class="footer-logo">
  <a href="index.php" class="logo-link">
    Maria Curtains
  </a>
</div>

      <p>
        Premium curtains, sheers, rods, mats and interior solutions crafted to elevate your space.
      </p>

    </div>

    
    <div class="footer-section">

      <h3>Contact</h3>

      <a href="tel:+254724361914">
        <i class="fa-solid fa-phone"></i>
        <span>0724361914</span>
      </a>

      <a href="https://wa.me/254724361914" target="_blank">
        <i class="fa-brands fa-whatsapp"></i>
        <span>Chat on WhatsApp</span>
      </a>

    </div>

    
    <div class="footer-section">

      <h3>Location</h3>

      <a class="location-card"
         href="https://www.google.com/maps/place/Maria+Curtains+%26+Textile+Thika/@-1.0358071,37.0701991,17z/data=!3m1!4b1!4m15!1m8!3m7!1s0x182f4e5b27c66117:0xb6f8a7e126152c26!2sThika!3b1!8m2!3d-1.0387569!4d37.0833753!16zL20vMDh3eTIz!3m5!1s0x182f4f004d46d3f1:0xe1de14448b11459b!8m2!3d-1.0358125!4d37.0748125!16s%2Fg%2F11zb2bs4d8?entry=ttu&g_ep=EgoyMDI2MDUxMy4wIKXMDSoASAFQAw%3D%3D"
         target="_blank">

        <div class="location-title">
          <i class="fa-solid fa-location-dot"></i>
          Thika, Kenya
        </div>

        <div class="location-action">
          Get Directions →
        </div>

      </a>

    </div>

    
    <div class="footer-section">

      <h3>Follow Us</h3>

      <a href="https://www.facebook.com/share/18Uq2Kkryq/" target="_blank">
        <i class="fa-brands fa-facebook"></i>
        <span>Facebook</span>
      </a>

      <a href=https://www.instagram.com/maria_wa_curtains?igsh=MXgydDVwZ3VneXVxZg== target="_blank">
        <i class="fa-brands fa-instagram"></i>
        <span>Instagram</span>
      </a>

      <a href=https://www.tiktok.com/@mariacurtains?_r=1&_t=ZS-96VlNUcKXcS target="_blank">
        <i class="fa-brands fa-tiktok"></i>
        <span>TikTok</span>
      </a>

    </div>

  </div>

  <div class="footer-bottom">

    © 2026 Maria Curtains. All Rights Reserved.

  </div>

</footer>

  <a
href="https://wa.me/254724361914?text=Hello%20Maria%20Curtains!%20I%20have%20a%20question%20about%20your%20products."
class="whatsapp-float"
target="_blank"
>

  <div class="whatsapp-text">
    Contact Us
  </div>

  <div class="whatsapp-icon">
    <i class="fa-brands fa-whatsapp"></i>
  </div>

</a>

  <script src="script.js"></script>
  

<script>
function toggleMenu() {
  document.getElementById("navMenu").classList.toggle("open");
}

function filterItems() {

    const selectedCategory =
        document.getElementById("q-category").value;

    const itemSelect =
        document.getElementById("q-item");

    const itemOptions =
        itemSelect.querySelectorAll("option");

    itemSelect.value = "";

    document.getElementById("q-color").value = "";

    itemOptions.forEach(option => {

        const category =
            option.getAttribute("data-category");

        if (
            !category ||
            category === selectedCategory
        ) {

            option.style.display = "block";

        } else {

            option.style.display = "none";

        }

    });

}

function filterColors() {

    const selectedProduct =
        document.getElementById("q-item").value;

    const colorSelect =
        document.getElementById("q-color");

    const colorOptions =
        colorSelect.querySelectorAll("option");

    colorSelect.value = "";

    colorOptions.forEach(option => {

        const productId =
            option.getAttribute("data-product");

        if (
            !productId ||
            productId === selectedProduct
        ) {

            option.style.display = "block";

        } else {

            option.style.display = "none";

        }

    });

}


</script>

</body>
</html>