/* global React */ // ========================================================= // PARTITION MAGIQUE — Site components // ========================================================= const { useState, useEffect, useRef } = React; // ---------- Attribution (tracking UTM) ---------- // Capture les UTM présents dans l'URL au PREMIER chargement de la session et les // garde en sessionStorage : ils survivent ainsi au scroll et aux clics internes // (ancres #telecharger) jusqu'au submit. Fallback : document.referrer pour les // visiteurs sans UTM (direct, SEO, partage). Renvoie toujours le même objet. function getAttribution() { const KEY = 'pm_attribution'; try { const cached = sessionStorage.getItem(KEY); if (cached) return JSON.parse(cached); } catch (_) { /* sessionStorage indisponible (mode privé strict) → on continue */ } const params = new URLSearchParams(window.location.search); const attribution = { utm_source: params.get('utm_source') || '', utm_medium: params.get('utm_medium') || '', utm_campaign: params.get('utm_campaign') || '', referrer: document.referrer || '', }; try { sessionStorage.setItem(KEY, JSON.stringify(attribution)); } catch (_) { /* idem : on renvoie quand même l'objet calculé */ } return attribution; } // ---------- Logo ---------- function SiteLogo({ size = 1, mono = false }) { const sq = 22 * size; const gap = 3 * size; const colors = mono ? ['var(--ink)','var(--ink)','var(--ink)','var(--ink)','var(--ink)'] : ['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4']; return (
{colors.map((c, i) => ( ))}
Partition Magique
); } // ---------- Nav ---------- function Nav({ ctaLabel, onCta }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const closeMenu = () => setMenuOpen(false); return ( ); } // ---------- Hero ---------- function Hero({ title, subtitle, ctaLabel, onCta }) { return (
{/* floating decorative squares */}
Pour les 4-8 ans Sans solfège À imprimer

{subtitle}

21 pages PDF
10 chansons connues
Étiquettes incluses

); } // ---------- Hero video ---------- function HeroVideo() { return (
2 min pour voir la méthode en action
); } function CheckIcon() { return ( ); } // ---------- PDF Preview stack (visual mock of 3 pages) ---------- function PdfPreviewStack() { return (
{/* Back page — keyboard with stickers */}
{/* Middle page — song */}
{/* Front page — cover */}
); } function MockPageCover() { return (
{['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i)=>( ))}
Partition
Magique
la méthode
Joue tes premières chansons
{['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i)=>(
{i+1}
))}
); } function MockPageKeyboard() { // mini keyboard with colored stickers return (
Trouve les 3 noires
{[0,1,2,3,4,5,6].map(i=>(
{i>=1 && i<=5 && (
)}
))} {/* black keys */}
colle ici →
); } function MockPageSong() { return (
CHANSON 03
Au clair de la lune
{[1,1,1,2,3,3,2,1,3,2,2,1].map((n,i)=>( {n} ))}
Au clair de la lune,
mon ami Pierrot...
); } // ---------- Section CTA (small button at the end of a section) ---------- function SectionCta({ label = 'Recevoir la méthode gratuite', variant = 'primary' }) { return ( ); } // ---------- Audience cards ---------- function AudienceSection() { const items = [ { color:'var(--c1)', soft:'var(--c1-soft)', icon:'4-8', title:'Les enfants curieux', body:"Dès 4 ans, ton enfant peut suivre la méthode tout seul ou avec toi. Pas de notes à apprendre, juste des couleurs à reconnaître." }, { color:'var(--c4)', soft:'var(--c4-soft)', icon:'0', title:"Les parents non-musiciens", body:"Aucune connaissance musicale requise de ta part. Tu poses les étiquettes, l'enfant joue. Tu apprends en même temps." }, { color:'var(--c5)', soft:'var(--c5-soft)', icon:'15', title:"Les écoles & ateliers", body:"Idéal pour les enseignants en maternelle/primaire ou les ateliers d'éveil musical. Imprimable autant de fois que tu veux." }, ]; return (
À qui ça s'adresse

Conçue pour les premiers pas

Un système de couleurs qui remplace le solfège. L'enfant joue de vraies chansons dès la première séance — sans frustration, sans pression.

{items.map((it, i) => (
{it.icon}

{it.title}

{it.body}

))}
); } // ---------- Contents (what's inside) ---------- function ContentsSection() { const items = [ { n:'01', title:'Le manuel pédagogique', body:'Position, mains, posture. 4 pages illustrées pour bien démarrer, même sans connaître la musique.' }, { n:'02', title:'Les étiquettes magiques', body:'4 jeux de 5 étiquettes à découper et coller sur le clavier. Repositionnables à l\'infini.' }, { n:'03', title:'10 chansons connues', body:'Frère Jacques, Au clair de la lune, Joyeux anniversaire... Toutes notées en couleurs, avec paroles.' }, { n:'04', title:'QR codes intégrés', body:'Chaque chanson a un QR code qui lance un audio. L\'enfant peut écouter le morceau avant de le jouer.' }, { n:'05', title:'Fiche conseils parents', body:'Comment accompagner sans pression, durée des séances, signes que ça marche.' }, { n:'06', title:'Jeu de cartes bonus', body:'Un jeu de mémo pour réviser les couleurs en s\'amusant, à imprimer en plus.' }, ]; return (
Ce que tu reçois

21 pages, pensées jusqu'au détail

{items.map((it, i) => (
{it.n}

{it.title}

{it.body}

))}
); } // ---------- How it works (3 steps) ---------- function HowItWorks() { const steps = [ { n:1, color:'var(--c1)', soft:'var(--c1-soft)', title:'Imprime & découpe', body:'Tu télécharges le PDF, tu l\'imprimes en A4. Tu découpes les 5 étiquettes colorées.' }, { n:2, color:'var(--c3)', soft:'var(--c3-soft)', title:'Colle sur le piano', body:'Tu places les étiquettes 1 à 5 sur les bonnes touches (le PDF te montre comment).' }, { n:3, color:'var(--c4)', soft:'var(--c4-soft)', title:'Joue dès aujourd\'hui', body:'L\'enfant lit les couleurs, appuie sur les touches correspondantes. C\'est tout.' }, ]; return (
Comment ça marche

3 étapes, 10 minutes

{steps.map((s, i) => (
{s.n}

{s.title}

{s.body}

))}
); } // ---------- Pages preview gallery ---------- function GallerySection() { // 8 mini pages return (
Aperçu du PDF

Quelques pages à feuilleter

); } function GalleryItem({ n, type, songName, colors }) { return (
{type === 'cover' && } {type === 'hello' && } {type === 'hands' && } {type === 'labels' && } {type === 'keyboard' && } {type === 'song' && } PAGE {n}
); } function MockPageHello() { return (
bienvenue !
Coucou,
petit·e pianiste
Tu vas apprendre à jouer du piano sans solfège, juste avec des couleurs...
); } function MockPageHands() { return (
ÉTAPE 02
Tes doigts comme des pattes d'araignée
✓
✗
); } function MockPageLabels() { return (
À DÉCOUPER
Tes étiquettes magiques
{[0,1,2,3].map(set => (
{['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c, i) => ( {i+1} ))}
))}
); } function MockPageSongDetail({ name, colors }) { return (
CHANSON
{name}
{colors.map((n, i) => ( {n} ))}
♪ chante avec moi
); } // ---------- Testimonials ---------- function Testimonials() { const items = [ { quote:"Mon fils de 5 ans joue Frère Jacques depuis hier soir. Il était scotché 20 minutes au piano, sans qu'on lui demande.", name:'Camille', meta:'Maman de Léo, 5 ans' }, { quote:"J'ai testé en classe de moyenne section. Les enfants ont compris le système en 10 minutes. Bluffant.", name:'Marie L.', meta:'Enseignante maternelle' }, { quote:"Je n'ai jamais fait de musique. Avec ce PDF, ma fille a son rituel du soir : 2 chansons avant le coucher.", name:'Thomas', meta:'Papa de Lina, 6 ans' }, ]; return (
Ce qu'en pensent les parents

Des familles, des sourires

{items.map((t, i) => (
{[0,1,2,3,4].map(s => ( ★ ))}
"{t.quote}"
{t.name[0]}
{t.name}
{t.meta}
))}
); } // ---------- FAQ ---------- function FAQ() { const [open, setOpen] = useState(0); const items = [ { q:"À partir de quel âge ?", a:"À partir de 4 ans, dès que l'enfant reconnaît les couleurs et les chiffres de 1 à 5. Aucune limite haute — la méthode marche aussi bien avec les adultes débutants." }, { q:"Faut-il un vrai piano ?", a:"Non. La méthode fonctionne sur n'importe quel clavier : piano acoustique, piano numérique, clavier d'éveil, voire clavier d'application sur tablette. Il faut juste 8 touches blanches d'affilée." }, { q:"Combien de temps pour la première chanson ?", a:"En général, 10 à 15 minutes : le temps de coller les étiquettes et de lire les couleurs. La majorité des enfants jouent leur première chanson le jour même." }, { q:"Les étiquettes abîment-elles le piano ?", a:"Non — on les colle avec du scotch repositionnable (type Patafix ou scotch de masquage). Elles s'enlèvent sans laisser de trace. Tu peux aussi imprimer sur du papier autocollant repositionnable." }, { q:"Combien de fois je peux imprimer ?", a:"Autant de fois que tu veux. Le PDF t'appartient, tu peux le réimprimer à chaque fois qu'une étiquette est perdue ou qu'une page est tachée par les feutres." }, { q:"Et si mon enfant veut aller plus loin ?", a:"La méthode est une porte d'entrée. Une fois les 10 chansons maîtrisées, l'enfant peut basculer naturellement vers le solfège classique avec un prof — il aura déjà les bons réflexes de doigts et l'oreille musicale." }, ]; return (
Questions fréquentes

Tout ce que tu te demandes

{items.map((it, i) => (
{it.a}
))}
); } // ---------- Final CTA ---------- function FinalCTA({ ctaLabel, onCta }) { const [firstName, setFirstName] = useState(''); const [email, setEmail] = useState(''); const [website, setWebsite] = useState(''); // honeypot, jamais affiché const [status, setStatus] = useState('idle'); // idle | sending | ok | error const [errMsg, setErrMsg] = useState(''); const submit = async (e) => { e.preventDefault(); if (status === 'sending' || status === 'ok') return; if (firstName.trim().length < 2) { setStatus('error'); setErrMsg('Indique ton prénom'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setStatus('error'); setErrMsg('Email invalide'); return; } setStatus('sending'); setErrMsg(''); try { const resp = await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ firstName: firstName.trim(), email, website, ...getAttribution() }), }); const data = await resp.json().catch(() => ({})); if (!resp.ok) { setStatus('error'); setErrMsg(data.error || 'Une erreur est survenue.'); return; } setStatus('ok'); if (onCta) onCta(); } catch { setStatus('error'); setErrMsg('Connexion impossible, réessaye.'); } }; return (
{['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i) => )}
{['#7B9CD4','#7DB87B','#F0CB47','#F4A24A','#E86A5C'].map((c,i) => )}
Téléchargement gratuit

Reçois la méthode maintenant

Laisse-nous ton prénom et ton email, on t'envoie le PDF en moins de 2 minutes. Pas de spam, juste de la musique.

{status === 'ok' ? (
✓ Merci ! Vérifie ta boîte mail dans 2 minutes (et les spams au cas où).
) : (
{/* Honeypot anti-bot — caché aux humains */} setWebsite(e.target.value)} style={{position:'absolute', left:'-9999px', width:1, height:1, opacity:0}} aria-hidden="true" /> setFirstName(e.target.value)} disabled={status === 'sending'} autoComplete="given-name" required /> setEmail(e.target.value)} disabled={status === 'sending'} autoComplete="email" required />

En téléchargeant, tu acceptes que Origads conserve ton prénom et ton email pour t'envoyer la méthode. Désinscription en 1 clic dans chaque mail.{' '} Politique de confidentialité .

)} {status === 'error' && (
{errMsg}
)}
✓ PDF prêt à imprimer ✓ Aucune carte bancaire ✓ Désinscription en 1 clic
); } // ---------- Footer ---------- function Footer() { return ( ); } // Make available globally Object.assign(window, { SiteLogo, Nav, Hero, HeroVideo, SectionCta, AudienceSection, ContentsSection, HowItWorks, GallerySection, Testimonials, FAQ, FinalCTA, Footer, });