// Pain points, Services, Process, About const PAIN_ICONS = { slow: ( // Ordi lent — écran avec points de chargement ), security: ( // Données — bouclier avec point d'exclamation ), support: ( // Pas de support — combiné téléphone ), response: ( // Prestataire lent — horloge ), web: ( // Site vieux — navigateur avec avertissement ), cost: ( // Facture incomprise — reçu avec point d'interrogation ), }; function PainPoints({ t }) { return (
[01] — {t.pain.eyebrow}

{t.pain.title}

{t.pain.sub}

{t.pain.items.map((item, i) => (
{PAIN_ICONS[item.icon]}

{item.t}

))}
{t.pain.cta} →
); } const SVC_ICONS = { "01": ( // Surveillance permanente — oeil ), "02": ( // Équipement & mise en place — écran ), "03": ( // Dépannage & assistance — casque support ), "04": ( // Réseau & connexion — wifi ), "05": ( // Protection de vos données — cadenas ), "06": ( // Votre site internet — navigateur ), "07": ( // Votre application mobile — téléphone ), "08": ( // Bilan & conseil — presse-papier ), }; function Services({ t }) { const [filter, setFilter] = React.useState("all"); const items = t.services.items.filter((i) => filter === "all" || i.side === filter); const count = t.services.items.length.toString().padStart(2, "0"); return (
[02] — {t.services.eyebrow}

{t.services.title}

{t.services.sub &&

{t.services.sub}

}
{items.map((it, i) => (
{SVC_ICONS[it.tag]}
{it.side === "net" ? t.services.net : t.services.dev}

{it.title}

{it.body}

    {it.bullets.map((b, j) =>
  • {b}
    • )}
))}
); } function Process({ t }) { return (
[03] — {t.process.eyebrow}

{t.process.title}

{t.process.sub}

{t.process.steps.map((s, i) => (
{s.n} / 05

{s.t}

{s.d}

))}
); } function About({ t }) { return (
[04] — {t.about.eyebrow}

{t.about.title}

{t.about.p1}

{t.about.p2}

{t.about.values.map((v, i) => (
0{i + 1}
{v.t}

{v.d}

))}
); } Object.assign(window, { PainPoints, Services, Process, About });