// IMANIQ PRODUCTION-READY STORE // Recommended Stack: // - Next.js 14 // - Tailwind CSS // - Shopify Storefront API // - Stripe Payments // - Vercel Hosting // - Klaviyo Email Marketing // - Sanity CMS (optional) // // INSTALLATION: // 1. Create a Next.js app: // npx create-next-app@latest imaniq-store // // 2. Install Tailwind: // npm install -D tailwindcss postcss autoprefixer // npx tailwindcss init -p // // 3. Replace app/page.js with this file // // 4. Install dependencies: // npm install framer-motion lucide-react // // 5. Deploy to Vercel: // https://vercel.com // // 6. Connect domain: // www.imaniq.com // // PRODUCTION FEATURES TO ADD: // - Shopify product sync // - Product filtering // - Cart drawer // - Secure checkout // - Reviews // - Wishlist // - Instagram feed // - Klaviyo email capture // - SEO metadata // - Analytics // - Cookie banner // - Terms & privacy pages // - Shipping calculator // // RECOMMENDED WEBSITE STRUCTURE: // Home // Shop // Plush Toys // Wooden Toys // Babywear // Eid Collection // About // Journal // Contact // FAQ // Shipping & Returns // // BRAND EXPERIENCE NOTES: // - Keep animations subtle and calm // - Use lots of whitespace // - Keep earthy tones consistent // - Photography should feel warm and natural // - Avoid cluttered layouts // - Maintain luxury minimalism throughout // // IMAGE RECOMMENDATIONS: // Hero Images: 2400px wide // Product Images: 2000x2000px // Lifestyle Images: warm natural lighting // // COLOUR PALETTE: // Sage Green: #7A866B // Warm Sand: #D9C7A7 // Cream: #F6F1EA // Olive: #5D6B4D // Muted Gold: #C9A15B // // TYPOGRAPHY: // Headings: Cormorant Garamond // Body: Inter // // PERFORMANCE TARGETS: // Google Lighthouse 90+ // Mobile-first optimisation // Lazy-loaded images // Optimised SEO metadata // export default function ImaniqHomepage() { const collections = [ { title: 'Plush Toys', image: 'https://images.unsplash.com/photo-1545558014-8692077e9b5c?q=80&w=1200&auto=format&fit=crop', }, { title: 'Wooden Toys', image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?q=80&w=1200&auto=format&fit=crop', }, { title: 'Babywear', image: 'https://images.unsplash.com/photo-1519238263530-99bdd11df2ea?q=80&w=1200&auto=format&fit=crop', }, { title: 'Eid Collection', image: 'https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=1200&auto=format&fit=crop', }, ];

const bestSellers = [ { title: 'Muslim Friendly Sheep', price: '£24.00', image: 'https://images.unsplash.com/photo-1581497396202-5645e76a3a8e?q=80&w=1200&auto=format&fit=crop', }, { title: 'Masjid Wooden Blocks', price: '£42.00', image: 'https://images.unsplash.com/photo-1516627145497-ae6968895b74?q=80&w=1200&auto=format&fit=crop', }, { title: 'Olive Green Romper', price: '£22.00', image: 'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?q=80&w=1200&auto=format&fit=crop', }, { title: 'Wooden Stacking Rings', price: '£18.00', image: 'https://images.unsplash.com/photo-1596464716127-f2a82984de30?q=80&w=1200&auto=format&fit=crop', }, ];

return ( <div className="bg-[#f6f1ea] text-[#4f5d42] min-h-screen font-sans"> {/* Announcement Bar */} <div className="bg-[#6f7d5d] text-white text-center py-2 text-sm tracking-wide"> FREE UK DELIVERY ON ORDERS OVER £60 </div>

{/* Header */}
  <header className="flex items-center justify-between px-8 lg:px-16 py-6 border-b border-[#ddd3c7] bg-[#faf7f2] sticky top-0 z-50">
    <nav className="hidden md:flex gap-8 text-sm uppercase tracking-wider">
      <a href="#" className="hover:opacity-70">Shop</a>
      <a href="#" className="hover:opacity-70">Collections</a>
      <a href="#" className="hover:opacity-70">About</a>
      <a href="#" className="hover:opacity-70">Journal</a>
    </nav>

    <div className="text-center">
      <h1 className="text-5xl font-light tracking-tight lowercase">
        imaniq
      </h1>
      <p className="text-xs tracking-[0.25em] mt-1 uppercase">
        Little Hearts. Big Faith.
      </p>
    </div>

    <div className="flex items-center gap-5 text-sm">
      <button>Search</button>
      <button>Account</button>
      <button>Cart(0)</button>
    </div>
  </header>

  {/* Hero Section */}
  <section className="grid lg:grid-cols-2 items-center px-8 lg:px-20 py-16 gap-16 bg-[#f7f2eb]">
    <div className="max-w-2xl">
      <p className="uppercase tracking-[0.35em] text-sm mb-6 text-[#8a9476] font-medium">
        Faith. Love. Everyday.
      </p>

      <h2 className="text-5xl lg:text-7xl leading-tight font-light mb-6 text-[#3f4737]">
        Thoughtfully designed<br/>for little hearts.
      </h2>

      <p className="text-lg leading-8 max-w-xl mb-8 text-[#676f5e]">
        Beautiful faith-inspired toys, babywear and keepsakes created to
        nurture comfort, connection and meaningful play.
      </p>

      <div className="flex flex-wrap gap-4">
        <button className="bg-[#6f7d5d] text-white px-8 py-4 rounded-full text-sm tracking-wide hover:opacity-90 transition">
          SHOP TOYS
        </button>
        <button className="border border-[#6f7d5d] px-8 py-4 rounded-full text-sm tracking-wide hover:bg-[#6f7d5d] hover:text-white transition">
          SHOP BABYWEAR
        </button>
      </div>
    </div>

    <div className="relative flex justify-center">
      <img
        src="https://images.unsplash.com/photo-1581497396202-5645e76a3a8e?q=80&w=1600&auto=format&fit=crop"
        alt="imaniq sheep toy"
        className="rounded-[42px] object-cover h-[720px] w-full max-w-[720px] shadow-[0_30px_80px_rgba(0,0,0,0.08)] border border-[#ece3d7]"
      />

      <div className="absolute bottom-10 left-10 bg-white/85 backdrop-blur-xl rounded-[28px] px-7 py-6 shadow-[0_15px_40px_rgba(0,0,0,0.08)] max-w-sm border border-[#eee5d8]">
        <p className="uppercase tracking-[0.2em] text-xs text-[#8a9476] mb-2">
          Featured Product
        </p>
        <h3 className="text-2xl mb-2">Muslim Friendly Sheep</h3>
        <p className="text-sm text-[#666] leading-6">
          Soft plush comfort toy designed without facial features in keeping
          with your brand values.
        </p>
      </div>
    </div>
  </section>

  {/* Features */}
  <section className="grid grid-cols-2 lg:grid-cols-5 gap-8 px-8 lg:px-20 py-12 border-y border-[#e6ddd0] text-center bg-[#fbf8f3]">
    {[
      'Faith-Inspired Design',
      'Sustainable Materials',
      'Made For Little Hearts',
      'Designed In The UK',
      'Beautifully Gifted',
    ].map((item) => (
      <div key={item}>
        <div className="w-12 h-12 rounded-full border border-[#b8b09f] mx-auto mb-3"></div>
        <p className="text-sm uppercase tracking-wider">{item}</p>
      </div>
    ))}
  </section>

  {/* Collections */}
  <section className="px-8 lg:px-20 py-24">
    <div className="text-center mb-14">
      <p className="uppercase tracking-[0.3em] text-sm text-[#8a9476] mb-3">
        Explore Our Collections
      </p>
      <h2 className="text-5xl font-light">Rooted in faith.</h2>
    </div>

    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      {collections.map((item) => (
        <div
          key={item.title}
          className="bg-white rounded-[34px] overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.04)] hover:-translate-y-2 transition duration-300 border border-[#efe6da]"
        >
          <img
            src={item.image}
            alt={item.title}
            className="h-[340px] w-full object-cover"
          />

          <div className="p-6 text-center">
            <h3 className="text-2xl mb-3">{item.title}</h3>
            <button className="uppercase tracking-[0.25em] text-sm text-[#7a846a]">
              Shop Now →
            </button>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Brand Story */}
  <section className="grid lg:grid-cols-2 gap-16 px-8 lg:px-20 py-24 items-center bg-[#efe7dc]">
    <div>
      <img
        src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?q=80&w=1200&auto=format&fit=crop"
        alt="imaniq lifestyle"
        className="rounded-[42px] shadow-[0_25px_70px_rgba(0,0,0,0.08)] object-cover h-[680px] w-full border border-[#eadfce]"
      />
    </div>

    <div>
      <p className="uppercase tracking-[0.3em] text-sm mb-5 text-[#8a9476]">
        Our Story
      </p>

      <h2 className="text-5xl leading-tight font-light mb-8 text-[#3f4737]">
        More than products. It's a way of life.
      </h2>

      <p className="text-lg leading-9 text-[#5f6658] mb-6">
        imaniq was created to bring together thoughtful design, meaningful
        simplicity and faith-led childhood moments.
      </p>

      <p className="text-lg leading-9 text-[#5f6658] mb-8">
        Every product is designed to feel calm, timeless and intentional —
        helping families create beautiful everyday memories.
      </p>

      <button className="bg-[#6f7d5d] text-white px-8 py-4 rounded-full text-sm tracking-wide hover:opacity-90 transition">
        LEARN MORE
      </button>
    </div>
  </section>

  {/* Best Sellers */}
  <section className="px-8 lg:px-20 py-24">
    <div className="flex items-end justify-between mb-12">
      <div>
        <p className="uppercase tracking-[0.3em] text-sm text-[#8a9476] mb-3">
          Best Sellers
        </p>
        <h2 className="text-5xl font-light">Loved by families.</h2>
      </div>

      <button className="hidden md:block border border-[#6f7d5d] px-6 py-3 rounded-full text-sm tracking-wide hover:bg-[#6f7d5d] hover:text-white transition">
        VIEW ALL
      </button>
    </div>

    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      {bestSellers.map((item) => (
        <div
          key={item.title}
          className="bg-white rounded-[30px] overflow-hidden shadow-sm"
        >
          <img
            src={item.image}
            alt={item.title}
            className="h-[340px] w-full object-cover"
          />

          <div className="p-6">
            <h3 className="text-2xl mb-2">{item.title}</h3>
            <p className="text-[#7a846a] mb-5">{item.price}</p>

            <button className="w-full bg-[#6f7d5d] text-white py-3 rounded-full text-sm tracking-wide hover:opacity-90 transition">
              ADD TO CART
            </button>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Newsletter */}
  <section className="px-8 lg:px-20 py-24 bg-[#6f7d5d] text-white text-center relative overflow-hidden">
    <p className="uppercase tracking-[0.3em] text-sm mb-4 opacity-80">
      Join The imaniq Family
    </p>

    <h2 className="text-5xl font-light mb-6">
      Gentle reminders. New arrivals. Special moments.
    </h2>

    <div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-4 mt-10">
      <input
        type="email"
        placeholder="Enter your email"
        className="flex-1 px-6 py-5 rounded-full text-black outline-none"
      />

      <button className="bg-[#f6f1ea] text-[#4f5d42] px-10 py-5 rounded-full tracking-wide hover:opacity-90 transition">
        SUBSCRIBE
      </button>
    </div>
  </section>

  {/* Footer */}
  <footer className="px-8 lg:px-20 py-14 bg-[#faf7f2] border-t border-[#ddd3c7]">
    <div className="grid lg:grid-cols-4 gap-10">
      <div>
        <h2 className="text-4xl lowercase mb-4">imaniq</h2>
        <p className="text-sm leading-7 text-[#666]">
          Little Hearts. Big Faith.
        </p>
      </div>

      <div>
        <h3 className="uppercase tracking-[0.25em] text-sm mb-4">
          Shop
        </h3>
        <ul className="space-y-3 text-[#666]">
          <li>Plush Toys</li>
          <li>Wooden Toys</li>
          <li>Babywear</li>
          <li>Eid Collection</li>
        </ul>
      </div>

      <div>
        <h3 className="uppercase tracking-[0.25em] text-sm mb-4">
          Company
        </h3>
        <ul className="space-y-3 text-[#666]">
          <li>About Us</li>
          <li>Journal</li>
          <li>Shipping</li>
          <li>Contact</li>
        </ul>
      </div>

      <div>
        <h3 className="uppercase tracking-[0.25em] text-sm mb-4">
          Follow
        </h3>
        <ul className="space-y-3 text-[#666]">
          <li>Instagram</li>
          <li>TikTok</li>
          <li>Pinterest</li>
        </ul>
      </div>
    </div>

    <div className="border-t border-[#ddd3c7] mt-12 pt-8 text-sm text-[#777] flex flex-col md:flex-row justify-between gap-4">
      <p>© 2026 imaniq. All rights reserved.</p>
      <p>Designed with intention.</p>
    </div>
  </footer>
</div>

); }