// Shared building blocks for the offer pages — three times map, measure block, pricing, timeline, FAQ const SectionHeader = ({ eyebrow, title, lede, dark = false, maxWidth = 980, mb = 56 }) => ( {eyebrow}

{title}

{lede && (

{lede}

)} ); const PageHero = ({ pill, title, lede, ctas = [], meta = [] }) => { const isMobile = useIsMobile(); return (
{pill}

{title}

{lede}

{ctas.length > 0 && (
{ctas.map((c, i) => ( ))}
)} {meta.length > 0 && (
{meta.map(([n, l]) => (
{n}
{l}
))}
)}
); }; // ---- The offer map: three times (Amorcer, Co-construire, Industrialiser) + transverse e-commerce const OFFER_TIMES = [ { n: "01", name: "Amorcer", tagline: "Comprendre, prioriser, former.", offers: [ { id: "acculturation", name: "Acculturation", icon: "mic", body: "Démystifier l'IA, du Comex au terrain.", price: "Dès 4 000 € HT", unit: "la demi-journée", href: "offres.html#acculturation" }, { id: "diagnostic", name: "Diagnostic IA", icon: "scan-search", body: "Le bon cas d'usage, chiffré, avant d'investir.", price: "Dès 13 000 € HT", unit: "30 % déduits ensuite", href: "offres.html#diagnostic" }, { id: "formations", name: "Formations", icon: "graduation-cap", body: "Une formation par métier et par profil.", price: "Dès 4 000 € HT", unit: "par jour", href: "formations.html" }, ], }, { n: "02", name: "Co-construire", tagline: "Déployer, faire adopter, mesurer.", offers: [ { id: "ahead-impact", name: "Ahead Impact", icon: "rocket", body: "Vos solutions IA en production, adoptées, mesurées : votre plateforme poussée au maximum, ou un processus automatisé sur mesure.", price: "Sur devis", unit: "chiffré au Diagnostic", href: "ahead-impact.html", featured: true, span: 2 }, { id: "ahead-desk", name: "Ahead Desk", icon: "headset", body: "Un consultant IA en temps partagé. PME et ETI.", price: "Dès 2 000 € HT", unit: "par mois", href: "offres.html#ahead-desk" }, ], }, { n: "03", name: "Industrialiser", tagline: "Internaliser, jusqu'à l'autonomie.", offers: [ { id: "ai-factory", name: "AI Factory", icon: "factory", body: "Construire avec vos équipes, sur votre infrastructure, jusqu'à ce qu'elles lancent leurs cas d'usage sans nous. ETI et grands groupes.", price: "Dimensionnée avec vous", unit: "sur mesure", href: "ai-factory.html", dark: true, span: 3 }, ], }, ]; const OfferCard = ({ o }) => { const dark = o.dark; return (
{o.featured && ( Offre phare )}

{o.name}

{o.body}

{o.price} {o.unit}
); }; const OfferMap = () => { const isMobile = useIsMobile(); const isTablet = useIsTablet(); return (
{OFFER_TIMES.map((t, i) => (
{t.n}
{t.name}
{t.tagline}
{t.offers.map(o => (
))}
))}
Transverse · AI & eCommerce Flowshopper et notre expertise e-commerce : contenu produit à l'échelle, SEO et GEO.

Chaque temps s'active indépendamment : vous entrez là où vous en êtes. Entre Co-construire et Industrialiser, un bilan de valeur mesure ce que l'IA a rapporté avant d'aller plus loin.

); }; // ---- Our commitment: we measure (replaces the former result guarantee) const MeasureBlock = ({ compact = false }) => { const isMobile = useIsMobile(); const commitments = [ { icon: "timer", title: "Un point de départ", body: "Au Diagnostic, nous décrivons vos processus et mesurons le temps qu'ils prennent. Sans mesure avant, il n'y a pas de bilan après." }, { icon: "gauge", title: "Un indicateur par déploiement", body: "Chaque Ahead Impact suit un indicateur unique, mesuré au départ puis après chaque vague : temps par unité de travail, délai, volume absorbé." }, { icon: "file-bar-chart", title: "Un bilan de valeur au Comex", body: "L'indicateur comparé au point de départ et converti en euros avec la méthode ROAI. C'est sur cette base que vous décidez de la suite." }, ]; const asks = [ "Un sponsor identifié, qui arbitre et porte le sujet", "Les accès aux données et aux outils, fournis à temps", "Un périmètre stable pendant le déploiement", ]; return (
Nous ne promettons pas un chiffre.
Nous nous engageons à le mesurer.} lede="95 % des pilotes d'IA générative n'ont produit aucun impact mesurable sur le compte de résultat (MIT NANDA, 2025). La cause n'est pas la technologie : c'est l'adoption, et l'absence de mesure. Nous traitons les deux." />
{commitments.map((p, i) => (
{p.title}

{p.body}

 ))}
{compact ? (
) : (
Ce que nous vous demandons

Un indicateur ne tient que si les deux parties jouent le jeu. Ces conditions sont écrites dans la proposition.

La méthode ROAI
    {asks.map(a => (
  • {a}
    • ))}
)}
); }; // ---- Pricing cards (tiers) const PricingGrid = ({ plans, note }) => { const isMobile = useIsMobile(); return (
{plans.map((p, i) => (
{p.featured && ( {p.badge || "Le plus choisi"} )}
{p.name}
{p.for &&
{p.for}
}
{p.price} {p.unit && {p.unit}} {p.sub &&
{p.sub}
}
    {p.items.map(it => (
  • {it}
    • ))}
))}
{note &&

{note}

}
); }; // ---- Standard journey — an ETI of 300 people over twelve months, in three times const PARCOURS = [ { n: "01", name: "Amorcer", from: 1, to: 2, color: "var(--ahead-secondary)", does: ["Séminaire de direction", "Diagnostic IA : cas d'usage, mesure de départ, gouvernance", "Formations par métier"], adoption: "Comex embarqué, cas priorisés, champions repérés", }, { n: "02", name: "Co-construire", from: 3, to: 9, color: "var(--ahead-comp-02)", does: ["Ahead Impact plateforme, déployé par vagues", "Deux processus automatisés, branchés au SI", "Ahead Desk en continu"], adoption: "Usage suivi, champions actifs, bilan de valeur", }, { n: "03", name: "Industrialiser", from: 10, to: 12, color: "var(--ahead-primary)", does: ["AI Factory : plateforme socle, centre d'excellence", "Gouvernance et mise à l'échelle", "Makers internes formés"], adoption: "Un premier cas lancé par vos équipes, sans nous", }, ]; const ParcoursTimeline = () => { const isMobile = useIsMobile(); const months = Array.from({ length: 12 }, (_, i) => i + 1); return (
Exemple : une ETI de 300 personnes, sur douze mois
Parcours indicatif, chaque temps se décide séparément
{!isMobile && (
{PARCOURS.map(p => (
))}
{months.map(m => (
M{m}
))}
)}
{PARCOURS.map(p => (
{p.n} · M{p.from}{p.to !== p.from ? `–M${p.to}` : ""}
{p.name}
    {p.does.map(d => (
  • {d}
    • ))}
Adoption visible {p.adoption}
))}
); }; // ---- Accordion FAQ const FAQList = ({ items }) => { const [open, setOpen] = React.useState(0); return (
{items.map((it, i) => (
{open === i && (

{it.a}

)}
))}
); }; const FAQSection = ({ items, title = "Tout ce que vous voulez savoir." }) => (
); // ---- Proof strip — deployment results from real missions const ProofStrip = ({ dark = false }) => { const isMobile = useIsMobile(); const proofs = [ ["+ 80 %", "d'adoption mesurée", "300 licences Copilot · RAJA", "etude-de-cas-raja-copilot.html"], ["7", "agents IA en production", "Amazon Quick Suite · PMU", "etude-de-cas-pmu.html"], ["1 000", "fiches produits en moins d'1 h", "Générateur sur-mesure · RAJA", "etude-de-cas-raja-deploiement.html"], ["~ 20", "filiales équipées", "Flowshopper · Groupe RAJA", "etude-de-cas-flowshopper.html"], ]; return (
{proofs.map(([n, l, sub, href], i) => (
{n}
{l}
{sub}
 ))}
); }; // ---- Continuous improvement loop: Diagnostic → Ahead Impact → Ahead Desk → next Diagnostic const OfferLoop = () => { const isMobile = useIsMobile(); const isTablet = useIsTablet(); const steps = [ { k: "A", name: "Diagnostic IA", icon: "scan-search", body: "Le bon cas d'usage, la mesure de départ, le chiffrage.", href: "offres.html#diagnostic" }, { k: "B", name: "Ahead Impact", icon: "rocket", body: "La solution déployée, adoptée et mesurée.", href: "ahead-impact.html" }, { k: "C", name: "Ahead Desk", icon: "headset", body: "Un consultant IA au quotidien, qui fait émerger le besoin suivant.", href: "offres.html#ahead-desk" }, ]; const stacked = isTablet; return (
{steps.map((s, i) => ( {i > 0 && (
)} {s.k} {s.name} {s.body} ))}
La boucle : toute demande Desk de plus de deux jours devient un nouveau Diagnostic, puis un nouvel Ahead Impact.
30 % du Diagnostic sont déduits de l'Ahead Impact s'il est signé dans les trois mois.
); }; // ---- Where to start — orientation by situation const ORIENTATION = [ ["Vous découvrez l'IA et voulez embarquer vos équipes", "Acculturation, Formations", "offres.html#acculturation"], ["Vous avez des idées, mais pas de priorités claires", "Diagnostic IA", "offres.html#diagnostic"], ["Vous avez des licences IA encore peu utilisées", "Diagnostic, puis Ahead Impact sur votre plateforme", "ahead-impact.html#chemins"], ["Vous avez un processus à automatiser", "Diagnostic, puis Ahead Impact sur mesure", "ahead-impact.html#chemins"], ["Vous avez un cas d'usage précis, mais doutez de sa faisabilité", "Ahead Impact, ouvert par un POC de faisabilité", "ahead-impact.html#poc"], ["Vous voulez un appui IA au quotidien (PME, ETI)", "Ahead Desk", "offres.html#ahead-desk"], ["Vous voulez internaliser (ETI, grands groupes)", "AI Factory", "ai-factory.html"], ["Vous vendez en ligne, avec un catalogue important", "AI & eCommerce (Flowshopper)", "offres.html#ecommerce"], ]; const OrientationTable = () => { const isMobile = useIsMobile(); return (
{!isMobile && (
Votre situationNotre réponse
)} {ORIENTATION.map(([situation, answer, href], i) => ( {situation} {answer} ))}
); }; // ---- Client names — text strip (no logos) const CLIENTS = ["RAJA", "PMU", "Almaviva Santé", "Plastivaloire", "La Parfumerie Europe", "Intermarché", "Lemaire", "Optae", "Rétif", "Mondoffice", "SMT", "Hansgrohe", "NU Skin"]; const ClientsStrip = ({ title = "Ils nous font confiance" }) => (
{title}
{CLIENTS.map(c => ( {c} ))}
); Object.assign(window, { SectionHeader, PageHero, OFFER_TIMES, OfferCard, OfferMap, MeasureBlock, PricingGrid, ParcoursTimeline, OfferLoop, OrientationTable, ClientsStrip, FAQList, FAQSection, ProofStrip, });