<div className="mt-8 flex gap-4">
      <a href="#drops" className="inline-block bg-black text-white px-6 py-3 rounded-2xl font-semibold shadow">Shop New Drops</a>
      <a href="#about" className="inline-block border px-6 py-3 rounded-2xl font-semibold">Learn More</a>
    </div>

    <div className="mt-8 flex gap-6 items-center">
      <div className="text-sm">
        <div className="font-semibold">Free shipping</div>
        <div className="text-gray-500">On orders over R800</div>
      </div>
      <div className="text-sm">
        <div className="font-semibold">Sustainable fabric</div>
        <div className="text-gray-500">Breathable & recycled blends</div>
      </div>
    </div>
  </div>

  <div className="flex items-center justify-center">
    {/* Product mockup / logo badge */}
    <div className="w-72 h-72 bg-black rounded-3xl flex items-center justify-center shadow-xl">
      <svg width="140" height="140" viewBox="0 0 100 100" className="text-white" fill="none">
        <rect width="100" height="100" rx="18" fill="currentColor" />
        <g transform="translate(18,18) scale(0.64)" fill="#fff">
          <path d="M18.5 4c-1.2 0-2.2.9-2.4 2.1L14 20H8.5a2 2 0 000 4H14l-1.3 13.9c-.2 1.2.6 2.2 1.8 2.4.1 0 .2 0 .4 0 1.1 0 2.1-.8 2.4-1.9L26 28h6.5a2 2 0 000-4H26l1.3-13.9C27.6 4.9 26.8 4 25.6 4h-7.1z" />
        </g>
      </svg>
    </div>
  </div>
</section>

{/* Collections / Product Grid */}
<section id="drops" className="mt-16">
  <h2 className="text-2xl font-bold">Featured</h2>
  <p className="text-gray-600 mt-2">Hand-picked essentials from the latest drop.</p>

  <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    {products.map((p) => (
      <div key={p.id} className="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition">
        <div className="h-44 bg-gray-100 rounded-md flex items-center justify-center">
          {/* placeholder image */}
          <div className="text-gray-400">Image</div>
        </div>
        <div className="mt-4 flex items-center justify-between">
          <div>
            <div className="font-semibold">{p.name}</div>
            <div className="text-sm text-gray-500">{p.price}</div>
          </div>
          <button className="px-3 py-2 rounded-md border font-semibold">Add</button>
        </div>
      </div>
    ))}
  </div>
</section>

{/* About / Story */}
<section id="about" className="mt-16 grid md:grid-cols-2 gap-8 items-center">
  <div>
    <h3 className="text-2xl font-bold">Our Mission</h3>
    <p className="mt-3 text-gray-600">FluxFit was created to blur the lines between performance and style. We craft comfortable, durable pieces for people who move — whether that's in the gym, on stage, or around the city.</p>

    <ul className="mt-4 space-y-2 text-gray-600">
      <li>• Thoughtful materials — recycled & breathable</li>
      <li>• Graphic-led designs with minimal silhouettes</li>
      <li>• Limited drops so every piece feels special</li>
    </ul>
  </div>
  <div>
    <div className="bg-black text-white p-8 rounded-xl">
      <div className="text-lg font-bold">Collaborate with us</div>
      <div className="mt-2 text-gray-200">We partner with musicians, creators and athletes for capsule drops. Hit us up to collab.</div>
      <a href="#contact" className="inline-block mt-4 border rounded px-4 py-2 font-semibold">Get in touch</a>
    </div>
  </div>
</section>

{/* Newsletter */}
<section className="mt-16 bg-gradient-to-r from-white to-gray-50 border rounded-xl p-8">
  <div className="max-w-3xl mx-auto text-center">
    <h4 className="text-xl font-bold">Join the Flux</h4>
    <p className="mt-2 text-gray-600">Sign up to get exclusive early access to drops and collabs.</p>

    <form className="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
      <input aria-label="email" placeholder="Your email" className="px-4 py-3 rounded-md border w-full sm:w-auto" />
      <button className="px-6 py-3 rounded-md bg-black text-white font-semibold">Subscribe</button>
    </form>
  </div>
</section>

{/* Footer / Contact */}
<footer id="contact" className="mt-16 py-10 border-t">
  <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
    <div className="flex items-center gap-4">
      <Brand small />
      <div className="text-sm text-gray-600">© {new Date().getFullYear()} FluxFit — All rights reserved</div>
    </div>

    <div className="text-sm text-gray-600">Email: hello@fluxfit.co · Instagram: @fluxfit</div>
  </div>
</footer>