// Mika · 主頁全段落。承接 A 版方向(室友的下午 / 奶茶色 / 水彩貓)。 // // 插畫槽位 ─ 每個 內部會依 window.MIKA_ILLUSTRATION_MODE // 決定顯示 SVG 版本(現況)或 PNG 去背版(使用者之後畫)。這讓版面和插畫解耦, // 未來換成水彩 PNG 不需要動任何段落排版。 // // 文案集中在 window.MIKA_COPY,直接改字串就可以更新,不用碰版面。 const C = window.MIKA_COLORS; // from hero-variants.jsx const HS = window.heroStyles; // ditto // ───────────────────────────────────────────────────────────── // 插畫槽位:三種姿勢,svg 版會用 nogold 版本,png 版會從 uploads/ 讀 // ───────────────────────────────────────────────────────────── window.IllustrationSlot = function IllustrationSlot({ pose, size = 320, style }) { const mode = (window.MIKA_ILLUSTRATION_MODE || 'svg'); // PNG 之後丟進 uploads/ 後再把這張 map 補上。 const pngPaths = { sleeping: 'uploads/mika-sleeping.png', peeking: 'uploads/mika-peeking.png', sitting: 'uploads/mika-sitting.png', }; if (mode === 'png' && pngPaths[pose]) { return {`Mika; } const Svg = pose === 'sleeping' ? window.MikaSleepingNoGold : pose === 'peeking' ? window.MikaPeekingNoGold : pose === 'sitting' ? window.MikaSittingNoGold : null; return Svg ? : null; }; // ─── 共用:SectionLabel ─── // 左側奶油色豎線 + 手寫 eyebrow + 小數字章節號。保持節奏統一。 const SectionLabel = ({ num, eyebrow }) => (
{num} {eyebrow}
); // ─── 共用:PageWidth(主頁每段落都靠這個置中)─── const PageWidth = ({ children, style }) => (
{children}
); // ═══════════════════════════════════════════════════════════════ // Section 2 · 她是誰 ─ 一段溫柔的自我介紹 // 版面:左窄右寬。左邊是大段 serif 手記;右邊放 peeking 貓 + 小簽名。 // ═══════════════════════════════════════════════════════════════ window.SectionWhoIsMika = function SectionWhoIsMika() { const K = window.MIKA_COPY.who; return (

{K.title}

{K.body.map((p, i) => (

{p}

))}
{/* 小簽名 ─ 手寫風 */}
{K.signature}
{/* 小手寫 caption */}
{K.caption}
); }; // ═══════════════════════════════════════════════════════════════ // Section 3 · 她幫你做什麼 ─ 三個日常場景 // 版面:3 欄並排。每欄一個小圖 + 文字。各欄之間有豎線分隔。 // ═══════════════════════════════════════════════════════════════ window.SectionWhatMikaDoes = function SectionWhatMikaDoes() { const K = window.MIKA_COPY.does; return (

{K.title}

{K.items.map((item, i) => (
0 ? `1px solid ${C.linen}` : 'none', position: 'relative', }}> {/* 小章節號 */}
― {String(i + 1).padStart(2, '0')} ―
{/* 圖示槽位 ─ 用小 SVG 道具當配圖 */}

{item.title}

{item.body}

{/* 手寫備註 */}
— {item.aside}
))}
); }; // 小道具 SVG ─ 三種對應 item const ServiceGlyph = ({ kind }) => { if (kind === 'folder') { // 疊起來的幾張紙 ─ 代表檔案整理 return ( ); } if (kind === 'note') { // 翻開的筆記本 return ( ); } if (kind === 'cup') { // 茶杯(延續 A 版風格) return ( ); } return null; }; // ═══════════════════════════════════════════════════════════════ // Section 4 · 她怎麼工作 ─ 一天的時間軸 // 版面:水平時間軸。左 morning / 中 afternoon / 右 evening 三段。 // 中間放一隻睡覺的 Mika ─ 她一直在那,外面光在變。 // ═══════════════════════════════════════════════════════════════ window.SectionADayWith = function SectionADayWith() { const K = window.MIKA_COPY.day; return (
{/* 背景:一整片由左到右的光線漸層,象徵一天 */}

{K.title}

{K.intro}

{/* 時間軸本體 */}
{/* 橫線 */}
{K.moments.map((m, i) => (
{/* 時間標 */}
{m.time}
{/* 小圓點在線上 */}
{/* 手寫章節 */}
{m.label}

{m.title}

{m.body}

))}
{/* 右下角:睡貓縮圖 ─ 她一直在 */}
); }; // ═══════════════════════════════════════════════════════════════ // Section 5 · 安靜的承諾 ─ 隱私 / 不吵你 / 不催你 // 版面:置中,一段大段 serif 敘事。像書裡抽出來的一頁。 // ═══════════════════════════════════════════════════════════════ window.SectionQuietPromise = function SectionQuietPromise() { const K = window.MIKA_COPY.promise; return (

{K.title}

{/* 三條小承諾,用橫線分隔 */}
{K.items.map((it, i) => (
{it.word}

{it.title}

{it.body}

))}
); }; // ═══════════════════════════════════════════════════════════════ // Section 6 · 輕量版 ─ 免費試試(次要 CTA) // 版面:大片留白,置中。一個坐姿的 Mika + 一個短 CTA。 // ═══════════════════════════════════════════════════════════════ window.SectionLightVersion = function SectionLightVersion() { const K = window.MIKA_COPY.light; return (
{/* 窗光 */}

{K.title}

{K.body}

{K.fineprint}

{K.ctaPrimary} {K.ctaSecondary} →
); }; // ═══════════════════════════════════════════════════════════════ // Section 7 · Footer ─ 簽名式 // 版面:一大段置中的手寫 tagline 再出現一次,然後下面是極簡 links + 版權。 // ═══════════════════════════════════════════════════════════════ window.SectionFooter = function SectionFooter() { const K = window.MIKA_COPY.footer; return ( ); };