GlowLab

<div className="min-h-screen flex flex-col"> <SiteHeader /> {/* Hero */} <section className="relative overflow-hidden"> <div className="absolute top-1/2 right-0 -translate-y-1/2 w-[700px] h-[700px] -z-10 pointer-events-none opacity-50"> <div className="absolute inset-0 rounded-full animate-glow-breathe" style={{ background: `conic-gradient(from 0deg, var(--blush), var(--rose), var(--accent), var(--blush))`, filter: 'blur(80px)', }} /> </div> <div className="mx-auto max-w-7xl px-6 pt-16 pb-20 lg:pt-24 lg:pb-28 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center"> <div className="relative z-10"> <motion.div initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ ...heroTransition, delay: 0.05 }} className="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 backdrop-blur px-3 py-1 text-xs font-medium text-muted-foreground mb-6 relative overflow-hidden" > <span className="absolute inset-0 animate-shimmer bg-[linear-gradient(110deg,transparent_25%,rgba(255,255,255,0.4)_50%,transparent_75%)]" /> <Sparkles className="h-3.5 w-3.5 text-rose relative z-10" /> <span className="relative z-10">The K-beauty edit, refined.</span> </motion.div> <motion.h1 initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ ...heroTransition, delay: 0.15 }} className="font-display text-5xl md:text-6xl lg:text-7xl font-semibold leading-[1.02] tracking-tight" > Glow you'll <em className="italic text-rose">feel</em>, not just see. </motion.h1> <motion.p initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ ...heroTransition, delay: 0.25 }} className="mt-6 text-lg text-muted-foreground max-w-md leading-relaxed" > GlowLab curates the viral Korean skincare worth the hype — tested, edited, and shipped fast. From Medicube collagen sticks to no-cast glow sunscreens. </motion.p> <motion.div initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ ...heroTransition, delay: 0.4 }} className="mt-8 flex flex-wrap gap-3" > <Button size="lg" asChild className="relative overflow-hidden group shadow-[0_0_24px_-6px_oklch(0.62_0.25_5/0.5)] transition-shadow duration-500 hover:shadow-[0_0_40px_-4px_oklch(0.62_0.25_5/0.7)]"> <a href="#shop"> <span className="relative z-10 flex items-center">Shop the edit <ArrowRight className="ml-2 h-4 w-4" /></span> </a> </Button> <Button size="lg" variant="outline" asChild> <a href="#ritual">Our ritual</a> </Button> </motion.div> <motion.div initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ ...heroTransition, delay: 0.55 }} className="mt-10 flex flex-wrap gap-6 text-xs text-muted-foreground" > <span className="flex items-center gap-1.5"><Truck className="h-3.5 w-3.5" /> Free shipping over $50</span> <span className="flex items-center gap-1.5"><ShieldCheck className="h-3.5 w-3.5" /> Authentic K-beauty</span> <span className="flex items-center gap-1.5"><Leaf className="h-3.5 w-3.5" /> Cruelty-free</span> </motion.div> </div> <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ ...imgTransition, delay: 0.2 }} className="relative" > <div className="absolute -inset-10 bg-blush/30 rounded-[3rem] blur-3xl -z-10 animate-glow-breathe" /> <img src={heroImg} alt="Curated Korean skincare flatlay with peonies" width={1600} height={1280} className="w-full aspect-[5/4] object-cover rounded-3xl shadow-soft" /> </motion.div> </div> </section> {/* Shop */} <section id="shop" className="mx-auto max-w-7xl px-6 py-20"> <motion.div initial={{ opacity: 0, y: 28 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.7, ease: "easeOut" }} className="flex items-end justify-between mb-12" > <div> <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground mb-2">The edit</p> <h2 className="font-display text-4xl md:text-5xl font-semibold tracking-tight">Viral, and worth it.</h2> </div> <p className="hidden md:block text-sm text-muted-foreground max-w-xs text-right"> Hand-picked best-sellers from Korea's most-loved labs. </p> </motion.div> {isLoading ? ( <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12"> {Array.from({ length: 4 }).map((_, i) => ( <div key={i} className="space-y-4"> <div className="aspect-[4/5] rounded-2xl bg-secondary/60 animate-pulse" /> <div className="h-4 bg-secondary/60 rounded animate-pulse w-3/4" /> <div className="h-4 bg-secondary/60 rounded animate-pulse w-1/4" /> </div> ))} </div> ) : products.length === 0 ? ( <div className="rounded-2xl border border-dashed border-border bg-secondary/30 p-12 text-center"> <p className="text-muted-foreground">No products found.</p> </div> ) : ( <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12"> {products.map((p, i) => ( <motion.div key={p.node.id} initial={{ opacity: 0, y: 28 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-40px" }} transition={{ duration: 0.6, ease: "easeOut", delay: i * 0.08 }} > <ProductCard product={p} /> </motion.div> ))} </div> )} </section> {/* Ritual */} <section id="ritual" className="bg-secondary/40 mt-8"> <div className="mx-auto max-w-7xl px-6 py-24 grid md:grid-cols-3 gap-10"> {[ { n: "01", t: "Prep", d: "Cleanse and tone with viral pore-refining essentials that respect your barrier." }, { n: "02", t: "Treat", d: "Collagen-rich serums and balms target fine lines, firmness and a real plumped glow." }, { n: "03", t: "Protect", d: "Lightweight SPF that disappears into skin — no white cast, no compromise." }, ].map((s, i) => ( <motion.div key={s.n} initial={{ opacity: 0, y: 28 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.7, ease: "easeOut", delay: i * 0.12 }} className="space-y-3" > <span className="font-display text-rose text-sm font-semibold tracking-widest">{s.n}</span> <h3 className="font-display text-2xl font-semibold">{s.t}</h3> <p className="text-muted-foreground leading-relaxed">{s.d}</p> </motion.div> ))} </div> </section> {/* About */} <section id="about" className="mx-auto max-w-3xl px-6 py-28 text-center"> <motion.div initial={{ opacity: 0, y: 28 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.8, ease: "easeOut" }} > <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground mb-4">About GlowLab</p> <h2 className="font-display text-4xl md:text-5xl font-semibold tracking-tight leading-tight"> We try everything, so you only buy what works. </h2> <p className="mt-6 text-lg text-muted-foreground leading-relaxed"> GlowLab is a small studio obsessed with Korean skincare. We translate the TikTok hype into honest edits — and only stock formulas we'd put on our own faces tomorrow morning. </p> </motion.div> </section> <SiteFooter /> </div> ); }