import React, { useEffect, useRef, useState } from 'react'; import { motion, AnimatePresence, useInView } from 'framer-motion'; import { Menu, X, ArrowRight, Sparkles, Quote, Mail, MapPin, Phone, Globe } from 'lucide-react'; const TAN = '#8A663F'; const CREAM = '#FFF7EE'; const GOLD = '#E8DEBD'; const images = { hero: 'https://images.unsplash.com/photo-1557296387-5358ad7997bb?w=1400&auto=format&fit=crop', why: 'https://images.unsplash.com/photo-1520529277867-dbf8c5e0b340?w=1200&auto=format&fit=crop', contact: 'https://images.unsplash.com/photo-1602033350291-a9ab8d800269?w=1400&auto=format&fit=crop', skincare: 'https://images.unsplash.com/photo-1600428853876-fb5a850b444f?w=700&auto=format&fit=crop', makeup: 'https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=700&auto=format&fit=crop', accessories: 'https://images.unsplash.com/photo-1561828995-aa79a2db86dd?w=700&auto=format&fit=crop', testimonials: [ 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&auto=format&fit=crop', 'https://images.unsplash.com/photo-1589729132389-8f0e0b55b91e?w=200&auto=format&fit=crop', 'https://images.unsplash.com/photo-1611451444023-7fe9d86fe1d0?w=200&auto=format&fit=crop', 'https://images.unsplash.com/photo-1607569708758-0270aa4651bd?w=200&auto=format&fit=crop', ], }; const content = { ko: { navLinks: ['제품', '브랜드', '후기', '문의'], shopNow: '지금 쇼핑하기', heroTitle: ['본연', '뷰티'], heroTag: '모두를 위한 건강과 아름다움', whyLabel: '본연 뷰티', whyTitle: '왜 본연인가?', whyBody: '본연 뷰티의 100% 유기농, 로컬 생산 바디케어와 코스메틱으로 당신만의 자연스러운 아름다움을 가꿔보세요.', whySub: '클렌징부터 모이스처라이징까지, 필요한 모든 것을 담았습니다.', categories: [ { label: '스킨케어 제품', body: '맑은 하루를 위해, 혹은 신나는 밤을 위해.' }, { label: '메이크업 제품', body: '뷰티 루틴을 가장 부드럽게.' }, { label: '액세서리', body: '디테일이 완성하는 스타일.' }, ], productsLabel: '우리의', productsTitle: '제품', brandLoveLabel: '브랜드', brandLoveTitle: '러브', testimonials: [ { name: '김서연', role: '모델', quote: '본연 뷰티를 쓰고 나서 피부 톤이 눈에 띄게 밝아졌어요. 이제는 다른 제품은 쓸 수가 없어요.' }, { name: '이하늘', role: '대표', quote: '바쁜 일상 속에서도 부담 없이 쓸 수 있는 루틴이에요. 성분도 믿음이 가고요.' }, { name: '박지우', role: '교사', quote: '향이 은은하고 자극이 없어서 민감성 피부인 저에게 딱 맞았습니다.' }, { name: '최다은', role: '학생', quote: '가격도 합리적이고 포장도 예뻐서 선물하기도 좋아요. 강력 추천합니다.' }, ], contactLabel: '문의', contactTitle: '정보', address: '서울특별시 강남구 어딘가로 122, 12345', addressLabel: '주소', emailLabel: '이메일 주소', phoneLabel: '전화번호', footerTerms: '이용약관', footerPrivacy: '개인정보처리방침', }, en: { navLinks: ['Products', 'Brand', 'Reviews', 'Contact'], shopNow: 'Shop Now', heroTitle: ['BONYEON', 'BEAUTY'], heroTag: 'Health and Beauty for Everybody', whyLabel: 'Bonyeon Beauty', whyTitle: 'Why Bonyeon?', whyBody: "Embrace your natural beauty with Bonyeon Beauty's 100% organic and locally-made body care and cosmetics.", whySub: 'Everything you need from cleansing to moisturising.', categories: [ { label: 'Skincare Products', body: 'Look fresh for a day in the sun or a fun night out.' }, { label: 'Makeup Products', body: 'Make your beauty routine as smooth as possible.' }, { label: 'Accessories', body: 'The details that finish your style.' }, ], productsLabel: 'Our', productsTitle: 'Products', brandLoveLabel: 'Brand', brandLoveTitle: 'Love', testimonials: [ { name: 'Seoyeon Kim', role: 'Model', quote: 'My skin tone visibly brightened after switching to Bonyeon. I can’t use anything else now.' }, { name: 'Haneul Lee', role: 'Entrepreneur', quote: 'A routine I can actually keep up with on busy days — and I trust the ingredients.' }, { name: 'Jiwoo Park', role: 'Teacher', quote: 'Gentle scent, zero irritation. Perfect for my sensitive skin.' }, { name: 'Daeun Choi', role: 'Student', quote: 'Affordable and beautifully packaged — great for gifting too. Highly recommend.' }, ], contactLabel: 'Contact', contactTitle: 'Info', address: '122 Anywhere Rd., Gangnam-gu, Seoul, 12345', addressLabel: 'Mailing Address', emailLabel: 'Email Address', phoneLabel: 'Phone Number', footerTerms: 'Terms & Support', footerPrivacy: 'Privacy Policy', }, }; const fadeUp = { hidden: { opacity: 0, y: 24 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.6, delay: i * 0.09, ease: [0.16, 1, 0.3, 1] }, }), }; function LangToggle({ lang, setLang, dark }) { return (

{['ko', 'en'].map((l) => ( ))}

); } function Navbar({ lang, setLang }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const t = content[lang]; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (

{lang === 'ko' ? '본연 뷰티' : 'BONYEON'}

{t.navLinks.map((l) => ( {l} ))}

{open && (

{t.navLinks.map((l) => ( {l} ))}

)}

); } function Hero({ lang }) { const t = content[lang]; return (

{lang === 'ko' ? '본연 뷰티' : 'Bonyeon Beauty'} {t.heroTitle[0]}
{t.heroTitle[1]} {t.heroTag} (e.currentTarget.style.color = '#1a1208')} onMouseLeave={(e) => (e.currentTarget.style.color = '#fff')} > {t.shopNow}

); } function WhySection({ lang }) { const t = content[lang]; return (

{t.whyLabel} {t.whyTitle} {t.whyBody} {t.whySub}

); } function CategoryCard({ img, label, body, index }) { return (

{label}

{body}

); } function ProductsSection({ lang }) { const t = content[lang]; const cats = [images.skincare, images.makeup, images.accessories]; return (

{t.productsLabel}
{t.productsTitle}

{t.categories.map((c, i) => ( ))}

); } function TestimonialCard({ item, img, index }) { return (

{item.quote}

{item.name}, {item.role}

); } function BrandLoveSection({ lang }) { const t = content[lang]; return (

{t.brandLoveLabel} {t.brandLoveTitle}

{t.testimonials.map((item, i) => ( ))}

); } function ContactSection({ lang }) { const t = content[lang]; const rows = [ { icon: MapPin, label: t.addressLabel, value: t.address }, { icon: Mail, label: t.emailLabel, value: 'hello@bonyeonbeauty.com' }, { icon: Phone, label: t.phoneLabel, value: '+82-10-1234-5678' }, ]; return (

{t.contactLabel}
{t.contactTitle}

{rows.map((r, i) => { const Icon = r.icon; return (

{r.label}

{r.value}

); })}

); } function Footer({ lang }) { const t = content[lang]; return ( ); } export default function App() { const [lang, setLang] = useState('ko'); return (

); }