import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Droplets, Sun, Leaf, Star, ChevronDown, Heart, Shield, Flower2, ArrowRight } from 'lucide-react'; const products = [ { id: 'cleanser', name: 'Cleanser', tagline: 'Silk Cloud Cleanser', description: 'A weightless, whipped gel that melts away impurities while respecting your skin’s natural moisture barrier. Infused with rose water and gentle amino acids, it leaves skin soft, calm, and perfectly prepped.', price: '$38', size: '150ml', image: 'C', gradient: 'from-rose-100 to-orange-50', ingredients: [ { name: 'Rose Water', icon: Flower2, detail: 'Soothes redness and balances pH levels while providing a delicate, natural fragrance that calms the senses.' }, { name: 'Amino Acid Complex', icon: Droplets, detail: 'A blend of glycine and proline that gently cleanses without stripping, maintaining the skin’s essential moisture barrier.' }, { name: 'Green Tea Extract', icon: Leaf, detail: 'Antioxidant-rich polyphenols protect against environmental stressors and help reduce inflammation.' } ] }, { id: 'serum', name: 'Serum', tagline: 'Lumière Radiance Serum', description: 'A silky, fast-absorbing concentrate that floods skin with hydration and visibly brightens dullness. Vitamin C and hyaluronic acid work in harmony to reveal a lit-from-within glow.', price: '$58', size: '30ml', image: 'S', gradient: 'from-rose-200 to-pink-100', ingredients: [ { name: 'Vitamin C', icon: Sparkles, detail: 'A stabilized form of ascorbic acid that brightens skin tone, fades dark spots, and boosts collagen production for firmer skin.' }, { name: 'Hyaluronic Acid', icon: Droplets, detail: 'Holds up to 1,000 times its weight in water, delivering deep, lasting hydration that plumps fine lines and smooths texture.' }, { name: 'Niacinamide', icon: Sun, detail: 'Vitamin B3 that strengthens the skin barrier, reduces redness, and minimizes the appearance of enlarged pores.' } ] }, { id: 'moisturizer', name: 'Moisturizer', tagline: 'Velvet Veil Moisturizer', description: 'A cloud-like cream that seals in hydration and leaves a soft-focus finish. Ceramides and squalane reinforce the skin’s protective barrier while shea butter offers lasting comfort.', price: '$46', size: '50ml', image: 'M', gradient: 'from-rose-100 to-pink-50', ingredients: [ { name: 'Ceramides', icon: Shield, detail: 'Essential lipids that restore the skin’s natural barrier, preventing moisture loss and protecting against irritants.' }, { name: 'Squalane', icon: Droplets, detail: 'A lightweight, plant-derived emollient that mimics the skin’s own lipids, offering deep hydration without greasiness.' }, { name: 'Shea Butter', icon: Leaf, detail: 'Rich in vitamins A and E, this nourishing butter softens and conditions while providing a soothing, protective layer.' } ] } ]; const reviews = [ { name: 'Amelia R.', rating: 5, text: 'The serum transformed my skin in just two weeks. I wake up with a glow I haven’t seen in years. Absorbs instantly with no sticky residue.', product: 'Serum' }, { name: 'Sophie L.', rating: 5, text: 'Absolutely in love with the cleanser. It’s so gentle yet effective — my sensitive skin has never felt calmer. The rose scent is heavenly.', product: 'Cleanser' }, { name: 'Isabella M.', rating: 4, text: 'The moisturizer is a dream. Rich without being heavy, and my makeup sits beautifully on top. Only wish it came in a larger size!', product: 'Moisturizer' }, { name: 'Charlotte B.', rating: 5, text: 'I’ve tried countless luxury skincare lines, and Lumière is now my holy grail. The entire routine feels like a spa ritual every morning.', product: 'Serum' } ]; function StarRating({ rating }: { rating: number }) { return (

{[1, 2, 3, 4, 5].map((star) => ( ))}

); } export default function App() { const [activeProduct, setActiveProduct] = useState(products[0]); const [expandedIngredient, setExpandedIngredient] = useState(null); return (

{/* Hero Section */}

{/* Decorative blobs */}

Radiance, Redefined

Lumière Skincare & Cosmetics

A curated ritual of pure, botanical actives that reveal your skin's natural luminosity. Clean, conscious, and crafted with intention.

{/* Product Tab Selector */}

{products.map((product) => ( ))}

{/* Product Display */}

{/* Product Image */}

{activeProduct.image}

{activeProduct.size} {activeProduct.price}

{/* Product Info */}

{activeProduct.tagline}

{activeProduct.name}

{activeProduct.description}

{/* Ingredient Accordion */}

Key Ingredients

{activeProduct.ingredients.map((ingredient) => (

{expandedIngredient === ingredient.name && (

{ingredient.detail}

)}

))}

{/* Routine Section */}

The Ritual

Three Steps to Radiance

{[ { step: '01', title: 'Cleanse', description: 'Begin with the Silk Cloud Cleanser to gently dissolve impurities and prep your canvas.', icon: Droplets }, { step: '02', title: 'Treat', description: 'Apply the Radiance Serum to flood skin with hydration and brightening actives.', icon: Sparkles }, { step: '03', title: 'Seal', description: 'Finish with the Velvet Veil Moisturizer to lock in benefits and fortify your barrier.', icon: Heart } ].map((item, index) => (

{item.step}

{item.title}

{item.description}

))}

{/* Reviews Section */}

Love Notes

What Our Community Says

{reviews.map((review, index) => (

{review.product}

“{review.text}”

{review.name}

))}

{/* Footer CTA */}

Begin Your Glow Journey

Join thousands of women who have discovered their most radiant skin with Lumière.

); }

スキンケア・コスメブランド