Untitled

import { motion } from "framer-motion"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Droplets, Sun, Wind } from "lucide-react";

export default function SummerSands() { return ( <div className="min-h-screen bg-gradient-to-b from-[#f7efe5] via-[#f2e8dc] to-[#e8dccb] text-[#3b2f2a]"> {/* Hero */} <section className="relative overflow-hidden"> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.6),transparent_60%)]" /> <div className="max-w-7xl mx-auto px-6 py-28 grid md:grid-cols-2 gap-10 items-center"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}> <h1 className="text-5xl md:text-6xl font-semibold tracking-tight">Summer Sands</h1> <p className="mt-6 text-lg max-w-xl">Sun‑kissed notes. Coastal calm. A modern luxury perfume inspired by warm beaches, drifting winds, and golden hours.</p> <div className="mt-8 flex gap-4"> <Button className="rounded-2xl px-8">Shop Now</Button> <Button variant="outline" className="rounded-2xl px-8">Discover</Button> </div> </motion.div> <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.6, delay: 0.1 }}> <div className="aspect-square rounded-[2rem] bg-gradient-to-br from-[#e6d2b8] to-[#cbb39a] shadow-xl" /> </motion.div> </div> </section>

{/* Notes */}
  <section className="max-w-7xl mx-auto px-6 py-20">
      <div className="grid md:grid-cols-3 gap-6">
            {[{ icon: Sun, title: "Top Notes", text: "Bergamot, sea salt, citrus peel" },{ icon: Wind, title: "Heart Notes", text: "White florals, coconut breeze" },{ icon: Droplets, title: "Base Notes", text: "Amber, musk, warm woods" }].map((n, i) => (
                        <Card key={i} className="rounded-2xl shadow-sm bg-white/60 backdrop-blur">
                                  <CardContent className="p-8">
                                              <n.icon className="h-8 w-8" />
                                                          <h3 className="mt-4 text-xl font-medium">{n.title}</h3>
                                                                      <p className="mt-2 text-sm">{n.text}</p>
                                                                                </CardContent>
                                                                                        </Card>
            ))}
                </div>
                  </section>

                    {/* Story */}
                      <section className="bg-[#3b2f2a] text-[#f7efe5]">
                          <div className="max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12">
                                <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 0.6 }}>
                                        <h2 className="text-4xl font-semibold">Our Story</h2>
                                                <p className="mt-6">Born from the memory of endless summers, Summer Sands captures the feeling of warm skin, salty air, and slow sunsets. Crafted for those who live lightly, yet leave a lasting impression.</p>
                                                      </motion.div>
                                                            <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 0.6 }}>
                                                                    <div className="aspect-video rounded-2xl bg-gradient-to-br from-[#6b554a] to-[#2b201c] shadow-xl" />
                                                                          </motion.div>
                                                                              </div>
                                                                                </section>

                                                                                  {/* CTA */}
                                                                                    <section className="max-w-7xl mx-auto px-6 py-24 text-center">
                                                                                        <h2 className="text-4xl font-semibold">Feel the Summer, Anywhere</h2>
                                                                                            <p className="mt-4 max-w-2xl mx-auto">A signature scent that moves with you—from sunlit mornings to moonlit nights.</p>
                                                                                                <div className="mt-8">
                                                                                                      <Button className="rounded-2xl px-10 py-6 text-lg">Buy Summer Sands</Button>
                                                                                                          </div>
                                                                                                            </section>

                                                                                                              {/* Footer */}
                                                                                                                <footer className="border-t border-black/10">
                                                                                                                    <div className="max-w-7xl mx-auto px-6 py-10 flex flex-col md:flex-row items-center justify-between gap-4">
                                                                                                                          <p className="text-sm">© {new Date().getFullYear()} Summer Sands</p>
                                                                                                                                <div className="flex gap-6 text-sm">
                                                                                                                                        <a href="#">Instagram</a>
                                                                                                                                                <a href="#">Privacy</a>
                                                                                                                                                        <a href="#">Contact</a>
                                                                                                                                                              </div>
                                                                                                                                                                  </div>
                                                                                                                                                                    </footer>
                                                                                                                                                                    </div>

); }


            ))})}