import React, { useState, useEffect, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Menu, X, Instagram, MessageCircle, MapPin, Clock, Smartphone, Sparkles, ChevronRight, Map, ExternalLink } from 'lucide-react'; // --- Global CSS & Utilities --- const styleTag = document.createElement('style'); styleTag.innerHTML = ` html { scroll-behavior: smooth; } body { overflow-x: hidden; background-color: #020617; /* slate-950 */ color: #f0f9ff; /* cyan-50 */ font-family: 'Noto Sans JP', sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .text-justify-jp { text-align: justify; text-justify: inter-character; } `; document.head.appendChild(styleTag); // --- Google Fonts --- const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Noto+Sans+JP:wght@300;400&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); const INSTAGRAM_URL = "https://www.instagram.com/loved_ooo/"; const LINE_URL = "https://line.me/R/ti/p/@YOUR_LINE_ID"; const ADDRESS_TEXT = "東京都豊島区東池袋1-12-11 OGSビル LOVED"; // --- Utility Functions --- const handleScrollTo = (e, href, callback) => { e.preventDefault(); const targetId = href.replace('#', ''); const element = document.getElementById(targetId); if (element) { const offset = 80; const bodyRect = document.body.getBoundingClientRect().top; const elementRect = element.getBoundingClientRect().top; const elementPosition = elementRect - bodyRect; const offsetPosition = elementPosition - offset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } if (callback) callback(); }; // --- Sub-Components --- const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); useEffect(() => { document.body.style.overflow = isOpen ? 'hidden' : 'unset'; }, [isOpen]); const navLinks = [ { name: 'CONCEPT', href: '#concept' }, { name: 'MENU', href: '#menu' }, { name: 'INSTAGRAM', href: '#gallery' }, { name: 'ACCESS', href: '#access' }, ]; return ( <> ); }; const Hero = () => { const bubbles = useMemo(() => [...Array(15)].map(() => ({ x: Math.random() * 100, delay: Math.random() * 5, duration: 15 + Math.random() * 15 })), []); return (
{bubbles.map((b, i) => )}
LOVED EXTENSIONS SALON
); }; const Concept = () => (

CONCEPT

理想を、超えていく。

ただ長さを出すだけでなく
質感、馴染み、シルエット
そのすべてに妥協しない

最高級の毛質と
磨き抜かれた技術で
地毛のような指通りを

鏡を見るのが、もっと楽しくなる

あなただけの
特別な美しさを
ここから

); const MenuSection = () => { const menus = [ { title: "シールエクステンション", price: "40枚 16,000 \n 80枚 30,000", desc: "最高級レミーヘア100％。地毛に自然になじみ、軽やかで上品な仕上がりを実現します。" }, { title: "ヘアセット", price: "2,000〜", desc: "全体のバランスを見ながら理想のスタイルに整えます。\n※女性限定" }, { title: "トリートメントスプレー", price: "1,000〜", desc: "エクステの指通りを美しく保ち、サロン帰りの質感を長く楽しめるアイテムです。" } ]; return ( ); }; const InfoSection = ({ onAddressClick }) => { return (

ACCESS

Address

Hours

詳細はお問い合わせください

Contact

); }; // --- App Root --- const App = () => { const handleAddressClick = () => { const encodedAddress = encodeURIComponent(ADDRESS_TEXT); const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`; window.open(googleMapsUrl, '_blank', 'noopener,noreferrer'); }; return (
); }; export default App;