/* global React, SectionLabel, PrimaryButton, SecondaryButton, Ornament */ const { useState } = React; // ============================================================ // HERO // ============================================================ function HeroSection({ onReserve }) { return (
{/* film grain */}
")`, opacity: 0.5, mixBlendMode: 'overlay', }} /> {/* corner ornaments — small uppercase markers (placed lower so they don't read as header content) */}
est. 2026 — ikeda, osaka
eyelash · eyebrow salon
sonon
— ここから、あなたらしく。—

わたしに似合う、を
見つける場所。

a place to find the look that is, quietly, you.
document.getElementById('menu').scrollIntoView({ behavior: 'smooth', block: 'start' })}> メニューを見る
{/* scroll cue */}
scroll
); } // ============================================================ // CONCEPT — three-axis: Korean-modern × similarity × repeatability // ============================================================ function ConceptSection() { const axes = [ { n: '01', en: 'korean modern', jp: '韓国モダン', desc: '今のトレンドを深く研究し、旬のデザインを常にアップデート。韓国現地の質感と色ニュアンスを取り入れ、「今」を感じる仕上がりをお届けします。', }, { n: '02', en: 'made to suit', jp: '似合わせ', desc: '韓国風にとらわれず、骨格・目元・ヘアスタイルまで徹底的に分析。あなたにとって最適なデザインを、一人ひとり丁寧にご提案いたします。', }, { n: '03', en: 'reproducible', jp: '再現性', desc: '骨格や目の形に合ったデザインは、そのまま持ちの良さにつながります。メイク方法やご自宅でのケアも丁寧にレクチャーし、サロンの仕上がりをいつでも再現できるように。', }, ]; return (
{axes.map((a, i) => (
{a.n}
{a.en}

{a.jp}

{a.desc}

))}

派手さよりも、毎日のあなたに静かに寄り添う仕上がりを。
sononは、自分らしさを整える時間を大切にしています。

); } // ============================================================ // MENU // ============================================================ function MenuSection({ onReserve }) { const [tab, setTab] = useState('new'); // 'new' | 'repeat' const groups = { new: [ { cat: 'set', jpCat: 'セット（おすすめ）', featured: true, items: [ { tag: '垢抜けNo.1', name: '韓国風似合わせまつ毛パーマ×アイブロウワックスセット', price: 13000, time: 105 }, { tag: '迷ったらコレ！', name: '似合わせまつ毛パーマ×アイブロウワックスセット', price: 13000, time: 105 }, { tag: '満足度◎', name: '韓国まつ毛パーマ上下＋アイブロウワックス', price: 15500, time: 120 }, { tag: '満足度◎', name: 'まつ毛パーマ上下＋アイブロウワックス', price: 15500, time: 120 }, ], }, { cat: 'lash', jpCat: 'まつ毛パーマ', items: [ { tag: 'デザイン徹底分析', name: '似合わせ韓国風束感まつ毛パーマ＋ケア', price: 7000, time: 60 }, { tag: 'デザイン徹底分析', name: '似合わせまつ毛パーマ＋ケア', price: 7000, time: 60 }, { tag: '小顔効果◎', name: '目元デザイン分析付き 韓国風上下まつ毛パーマ＋ケア', price: 9500, time: 75 }, { tag: '小顔効果◎', name: '目元デザイン分析付き 上下まつ毛パーマ＋ケア', price: 9500, time: 75 }, ], }, { cat: 'brow', jpCat: 'アイブロウワックス', items: [ { tag: '骨格徹底分析', name: '韓国風デザイン×アイブロウワックス', price: 7000, time: 60 }, { tag: '骨格徹底分析', name: '似合わせデザイン×アイブロウワックス', price: 7000, time: 60 }, ], }, ], repeat: [ { cat: 'set', jpCat: 'セット（おすすめ）', featured: true, items: [ { tag: '垢抜けNo.1', name: '韓国風似合わせまつ毛パーマ×アイブロウワックスセット', price: 14000, time: 90 }, { tag: '迷ったらコレ！', name: '似合わせまつ毛パーマ×アイブロウワックスセット', price: 14000, time: 90 }, { tag: '満足度◎', name: '韓国まつ毛パーマ上下＋アイブロウワックス', price: 16500, time: 105 }, { tag: '満足度◎', name: 'まつ毛パーマ上下＋アイブロウワックス', price: 16500, time: 105 }, ], }, { cat: 'lash', jpCat: 'まつ毛パーマ', items: [ { tag: 'デザイン徹底分析', name: '似合わせ韓国風束感まつ毛パーマ＋ケア', price: 8000, time: 45 }, { tag: 'デザイン徹底分析', name: '似合わせまつ毛パーマ＋ケア', price: 8000, time: 45 }, { tag: '小顔効果◎', name: '目元デザイン分析付き 韓国風上下まつ毛パーマ＋ケア', price: 10500, time: 60 }, { tag: '小顔効果◎', name: '目元デザイン分析付き 上下まつ毛パーマ＋ケア', price: 10500, time: 60 }, ], }, { cat: 'brow', jpCat: 'アイブロウワックス', items: [ { tag: '骨格徹底分析', name: '韓国風デザイン×アイブロウワックス', price: 8000, time: 45 }, { tag: '骨格徹底分析', name: '似合わせデザイン×アイブロウワックス', price: 8000, time: 45 }, ], }, ], }; const promos = [ { kicker: 'OPEN記念', period: '6/30まで', label: '全メニュー', value: '¥1,000 OFF' }, { kicker: '初めてのセット体験', period: '全員対象', label: '眉＋まつ毛パーマ', value: '¥1,000 OFF' }, { kicker: '紹介クーポン', period: '全員対象', label: '紹介した方・された方', value: '¥1,000 OFF' }, ]; const standard = [ { name: 'まつ毛パーマ', price: 8000, time: 60 }, { name: 'まつ毛パーマ（上下）', price: 10500, time: 75 }, { name: 'アイブロウワックス', price: 8000, time: 60 }, { name: '眉＋まつ毛パーマセット', price: 14000, time: 90 }, { name: '眉＋まつ毛パーマセット（上下）', price: 16500, time: 105 }, ]; const fmt = (n) => n.toLocaleString(); return ( ); } // ============================================================ // FEATURES — three salon characteristics // ============================================================ function FeaturesSection() { const features = [ { n: 'i.', title: 'location', jp: '駅近・路面店で気軽に', desc: '阪急宝塚線「池田」駅より徒歩5分の1階路面店。近くには大型スーパーもあり、お買い物のついでに気軽にお立ち寄りいただけます。', }, { n: 'ii.', title: 'interior', jp: 'ゆったりと、あなたの時間を', desc: 'ベージュ×グレーを基調とした、上質で温かみのある内装。カーテン仕切りによる半個室と3席の少人数サロンで、ゆったりとお過ごしいただけます。', }, { n: 'iii.', title: 'counselling', jp: 'あなたのことを、聞かせてください。', desc: 'はじめての方も、何もわからなくても大丈夫。スタッフが丁寧にヒアリングし、あなたにぴったりのデザインをご提案いたします。', }, ]; return (
{/* Left: label + image card */}
{/* warm tone + readability scrim */}
— studio interior
a place to slow down.
{/* Right: features */}
{features.map((f, i) => (
{f.n}
{f.title}

{f.jp}

{f.desc}

))}
); } Object.assign(window, { HeroSection, ConceptSection, MenuSection, FeaturesSection, });