// Main page sections — layout from the Figma "lp-ac" frame, copy from // shoptimize_website_copywriting_v2.md (via components/copy.jsx). const Eyebrow = ({ children, onDark }) => (
{children}
); // Section header: title on the left (2 lines, accent on the second), lead on the right. const SectionHead = ({ eyebrow, title, titleEm, sub, br = true, onDark }) => ( <> {eyebrow && {eyebrow}}

{title}{br ?
: " "}{titleEm}

{sub &&

{sub}

}
); const Btn = ({ href = "#contact", variant = "primary", arrow = variant === "primary", children, style }) => ( {children}{arrow && } ); // Bottom-left relief for dark blocks: orange glow + dotted grid fading toward // the centre, plus a hairline corner frame. `scale` shrinks it for short bands. const Relief = ({ scale = 1 }) => ( <>
); // HERO — warehouse photo washed to white on the left, left-aligned copy, // inline stats with orange markers, then the dark "built for" band. const Hero = ({ t }) => ( <>
{t.hero.euTag}

{t.hero.title1}
{t.hero.titleEm}

{t.hero.sub}

{t.hero.stats.map(s => (
{s.kpi} {s.label}
))}
{t.hero.cta1} {t.hero.cta2}
{/* Dark band */}
{/* White sheen: soft light from the bottom-left corner + a faint horizontal streak */}
{t.hero.runStrip}
{t.hero.brands.map((b, i) => ( {i === 0 ? : ◆}{b} ))}
); // SERVICES — three bordered cards, orange icon square, tag top-right const Services = ({ t }) => (
{t.services.list.map((s, i) => { const Ic = [IconBox, IconTruck, IconReturn][i]; return (
{s.tag}

{s.title}

{s.body &&

{s.body}

} {s.bullets.length > 0 && (
    {s.bullets.map(b => (
  • {b}
    • ))}
)}
); })}
); // WHY US — dark block, heading left, 2-column list of numbered reasons right const WhyUs = ({ t }) => (
{t.why.eyebrow}

{t.why.title}
{t.why.titleEm}

{t.why.sub}

{t.why.points.map(p => (
{p.n}

{p.title}

{p.body}

))}
); // COMPARE — China dropshipping vs Shoptimize, one table with a highlighted // Shoptimize column, numbered source refs and the links listed underneath. const Compare = ({ t }) => { const c = t.compare; const th = { textAlign: "left", padding: "16px 20px", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Geist Mono, monospace", fontWeight: 500, color: "var(--muted)", borderBottom: "1px solid var(--line)", verticalAlign: "bottom" }; const td = { padding: "16px 20px", fontSize: 14, lineHeight: 1.5, verticalAlign: "top", borderBottom: "1px solid var(--line)" }; const usCol = { background: "var(--accent-soft)" }; const Ref = ({ n }) => n ? {n} : null; return (
◆{c.scope}
{c.rows.map(r => ( ))} {c.totals.china.map(([cat, price], i) => ( {i === 0 && ( )} ))}
{c.cols[0]} {c.cols[1]}
{r.eu && }{r.label} {r.sub &&
{r.sub}
} 		{r.china} {r.good && ◆} {r.us}
{c.totals.label} · {cat} {price}
{c.totals.us}
{c.totals.usNote &&
{c.totals.usNote}
}
{c.notes.map(n =>
{n}
)}
{c.sourcesTitle}
{c.sources.map(src => (
{src.n} {src.links.map(([label, href], i) => ( {i > 0 && " · "} {label} ))}
))}
); }; // PROCESS — three joined step cards with photos and chevron notches const PROCESS_IMAGES = [ "assets/img-businessmen-meeting.jpg", "assets/hero-warehouse.jpg", "assets/img-packing-worker.jpg", ]; const Process = ({ t }) => (
{t.process.steps.map((s, i) => (
{s.n}

{s.title}

{s.body}

))}
); // PLATFORM — Tempo mock on the left, copy + 7 bullets + 2 CTAs on the right const Platform = ({ t }) => (
{t.dashboard.eyebrow}
Tempo {t.dashboard.brandTag}

{t.dashboard.title}
{t.dashboard.titleEm}

{t.dashboard.sub}

    {t.dashboard.bullets.map(b => (
  • {b}
    • ))}

{t.dashboard.more}

{t.dashboard.cta1} {window.SHOW_PRICING && {t.dashboard.cta2}}
); // PRICING — public rate card (standalone #/tarifs page) const Pricing = ({ t }) => (
{t.pricing.eyebrow}

{t.pricing.title}

{t.pricing.sub}

{t.pricing.groups.map(g => (

{g.title}

{g.note &&
{g.note}
}
    {g.rows.map(([label, price], i) => (
  • {label} {price}
    • ))}
))}

{t.pricing.includedTitle}

{t.pricing.included.map(item => ( ◆{item} ))}

{t.pricing.profilesTitle}

{t.pricing.profilesNote}
{t.pricing.profiles.map(p => (
{p.name}
{p.price} {t.pricing.perMonth}
{p.desc}
{p.note}
))}

{t.pricing.ctaTitle}

{t.pricing.ctaText}

{t.pricing.cta1} {t.pricing.cta2}
{t.pricing.footnote}
); // CONTACT — cream background, white form card + dark card with orange glow const CONTACT_ICONS = { mail: IconMail, phone: IconPhone, clock: IconClock }; const Contact = ({ t }) => { const [sent, setSent] = React.useState(false); const f = t.contact.fields; const Field = ({ k, span = 1, textarea }) => (