// Atelier Vitrine — landing page React component // Parametrized by `accent` ({hex, name, ink}). Two instances live side-by-side // on the design canvas (bleu profond vs terracotta). // ─── CONFIG ENVOI DE FORMULAIRE (Formspree) ──────────────────── // Endpoint connecté au compte d'Allan (destinataire : allan.faquin@gmail.com). // Accusé de réception au prospect : à activer via "Autoresponse" dans les // réglages du formulaire sur le dashboard Formspree. const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mzdqzlez'; const PALETTES = { bleu: { name: 'Bleu profond', accent: '#1E3A5F', // deep navy-blue accentDeep: '#16263F', accentSoft: '#E8EDF3', onAccent: '#F8F5F0' }, terracotta: { name: 'Terracotta', accent: '#B5552E', // sober terracotta accentDeep: '#8C3F1E', accentSoft: '#F1E5DC', onAccent: '#F8F5F0' } }; const CREAM = '#F8F5F0'; const CREAM_DEEP = '#EFE9DF'; const INK = '#1F2937'; const INK_SOFT = '#4B5563'; const HAIR = '#D9D2C5'; // ── Tiny SVG icon set (line, hand-drawn-ish) ─────────────────── const Icon = { Phone: (p) => , Arrow: (p) => , Check: (p) => , Pin: (p) => , Tag: (p) => , Clock: (p) => , Chat: (p) => , Hammer: (p) => , Tools: (p) => , Send: (p) => , Close: (p) => }; // ── Hand-drawn rule (top of every section) ───────────────────── function Rule({ accent }) { return (
); } // ── Photo placeholder — labeled, sober ───────────────────────── function Photo({ label, h = '100%', tone = 'warm', children, style }) { // soft warm gradients to evoke 'chantier / atelier' lighting without faking it const grads = { warm: 'linear-gradient(135deg,#C9B89A 0%,#8A7657 60%,#5C4A33 100%)', cool: 'linear-gradient(135deg,#A8B0B8 0%,#6F7884 60%,#3F4753 100%)', wood: 'linear-gradient(135deg,#B7926A 0%,#7E5A38 60%,#4A331C 100%)', stone: 'linear-gradient(135deg,#BDB8AE 0%,#857F73 60%,#4F4A40 100%)' }; return (
{/* film grain */}
{label}
{children}
); } // ── Mini browser mockup (used in portfolio cards) ────────────── function BrowserMock({ accent, accentSoft, metier, tone = 'warm' }) { return (
{metier.toLowerCase().replace(/[^a-z]/g, '')}.fr
{metier.split('—')[0].trim()}
AccueilRéalisationsContact
Du travail soigné,
fait pour durer.
Devis gratuit
); } // ── Mini phone mockup (sits next to browser) ─────────────────── function PhoneMock({ accent, metier, tone = 'warm' }) { return (
Travail
soigné.
Devis
); } // ── Process step number (engraved-feel) ──────────────────────── function StepNumber({ n, accent }) { return (
{n}
); } // ── PORTFOLIO DATA ───────────────────────────────────────────── const PROJECTS = [ { metier: 'Charpentier — Limoux', result: '+12 demandes de devis le premier mois.', tone: 'wood' }, { metier: 'Maçon — Carcassonne', result: '3 chantiers signés en 6 semaines.', tone: 'stone' }, { metier: 'Menuisier — Quillan', result: 'Plus visible que ses 2 concurrents locaux.', tone: 'wood' }, { metier: 'Électricien — Castelnaudary', result: '+8 appels par semaine, en moyenne.', tone: 'cool' }, { metier: 'Couvreur — Limoux', result: 'Un site clair, aussi pro que son travail.', tone: 'warm' }, { metier: 'Paysagiste — Trèbes', result: 'Devis signés dès la 2e semaine en ligne.', tone: 'warm' }]; // ─── HEADER ──────────────────────────────────────────────────── function Header({ accent, onCta }) { return (
Atelier Vitrine
); } // ─── HERO ────────────────────────────────────────────────────── function Hero({ palette, onCta, onPortfolio, tweaks }) { const M = MOODS[tweaks.mood], V = VOICES[tweaks.voice], L = LAYOUTS[tweaks.layout]; const overlay = M.overlay.replace('%ACCENT%', palette.accentDeep); return (
{/* Background photo */} {/* Tint overlay for legibility */}
{V.eyebrow}

{V.h1a} {V.h1b}

{V.sub}

{/* Trust strip */}
Aude · Livré en moins de 10 jours · Tarif fixe, annoncé d'avance
); } // ─── PORTFOLIO ───────────────────────────────────────────────── function Portfolio({ palette, onOpen, tweaks }) { const V = VOICES[tweaks.voice], L = LAYOUTS[tweaks.layout], M = MOODS[tweaks.mood]; const portfolioTones = M.portfolio.split('-'); const projects = PROJECTS.map((p, i) => ({ ...p, tone: portfolioTones[i % portfolioTones.length] || p.tone })); return (

{V.portfolioH} {V.portfolioHi}

{V.portfolioP}

{projects.map((p, i) => )}
); } // ─── PROCESS ─────────────────────────────────────────────────── const STEPS = [ { t: 'On discute', d: '30 minutes, gratuit, sans engagement. Vous me racontez votre métier.', icon: Icon.Chat }, { t: 'Je construis', d: '4 à 7 jours. Vous voyez l\'avancée chaque jour, par lien privé.', icon: Icon.Hammer }, { t: 'On ajuste ensemble', d: 'Autant d\'allers-retours qu\'il faut. Le site doit vous ressembler.', icon: Icon.Tools }, { t: 'Mise en ligne', d: 'Site en ligne, et je reste joignable pour les retouches après.', icon: Icon.Send }]; function Process({ palette, tweaks }) { const V = VOICES[tweaks.voice], L = LAYOUTS[tweaks.layout]; return (

{V.processH} {V.processHi}

{V.processP}

{STEPS.map((s, i) => { const I = s.icon; return (
{s.t}
{s.d}
); })}
); } // ─── POURQUOI MOI ────────────────────────────────────────────── const REASONS = [ { kicker: 'Local', title: 'Basé dans l\'Aude.', body: 'On peut se voir autour d\'un café à Carcassonne ou Limoux. Pas un prestataire à 800 km.', icon: Icon.Pin }, { kicker: 'Tarif', title: 'Pas de mauvaise surprise.', body: 'Le prix est fixé avant qu\'on commence, et il ne bouge pas. Devis clair, sur une page.', icon: Icon.Tag }, { kicker: 'Délai', title: 'Site livré en 10 jours.', body: 'Une fois nos échanges faits, vous avez votre site en ligne en moins de deux semaines.', icon: Icon.Clock }]; function Pourquoi({ palette, tweaks }) { const V = VOICES[tweaks.voice], L = LAYOUTS[tweaks.layout]; return (

{V.pourquoiH} {V.pourquoiHi}

{REASONS.map((r, i) => { const I = r.icon; return (
{r.kicker}
{r.title}
{r.body}
); })}
); } // ─── CTA FINAL + FORMULAIRE ──────────────────────────────────── function CtaForm({ palette, formRef, status, onSubmit, form, setForm, tweaks }) { const V = VOICES[tweaks.voice], L = LAYOUTS[tweaks.layout]; const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value }); const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim()); const isValid = form.nom.trim() && form.tel.trim() && form.metier.trim() && emailOk; const sending = status === 'sending'; const sent = status === 'ok'; return (
{/* Subtle texture */}
Devis gratuit · Réponse sous 24h

{V.finalH} {V.finalHi}

{V.finalP}

Comment ça marche
Remplissez le formulaire ci-contre : je reviens vers vous dans la journée avec un devis clair. C'est gratuit et sans engagement.
{/* Form card */}
{!sent ?
Demander un devis
{status === 'error' &&
L'envoi a échoué. Réessayez dans un instant, ou renvoyez le formulaire.
}
Vos infos restent entre nous. Pas de newsletter, pas de revente.
:
Message bien reçu, {form.nom.split(' ')[0] || 'à vous'}.
Je reviens vers vous dans la journée à l'adresse {form.email}. Un accusé de réception vient d'y être envoyé.
}
); } function Field({ label, value, onChange, accent, placeholder, type = 'text', textarea }) { const [focus, setFocus] = React.useState(false); const Tag = textarea ? 'textarea' : 'input'; return ( ); } // ─── FOOTER ──────────────────────────────────────────────────── function Footer({ palette }) { return ( ); } const fLink = { display: 'block', color: 'rgba(248,245,240,.8)', textDecoration: 'none', fontFamily: 'var(--av-sans)', fontSize: 13, marginBottom: 8, lineHeight: 1.5 }; function FootCol({ title, children }) { return (
{title}
{children}
); } // ─── PROJECT MODAL ───────────────────────────────────────────── function ProjectModal({ project, palette, onClose }) { if (!project) return null; return (
e.stopPropagation()} style={{ background: CREAM, maxWidth: 880, width: '100%', maxHeight: '90vh', overflow: 'auto', position: 'relative' }}>
Réalisation

{project.metier}

{project.result}

); } function Stat({ label, value }) { return (
{label}
{value}
); } // ─── MAIN PAGE ───────────────────────────────────────────────── function LandingPage({ paletteKey, tweaks = { mood: 'atelier', voice: 'chaleureux', layout: 'classique' } }) { const palette = PALETTES[paletteKey]; const formRef = React.useRef(null); const portfolioRef = React.useRef(null); const [project, setProject] = React.useState(null); const [status, setStatus] = React.useState('idle'); // idle | sending | ok | error const [form, setForm] = React.useState({ nom: '', email: '', tel: '', metier: '', msg: '' }); const scrollToForm = () => formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); const scrollToPortfolio = () => { document.getElementById('realisations')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const onSubmit = async (e) => { e.preventDefault(); if (status === 'sending') return; setStatus('sending'); try { const res = await fetch(FORMSPREE_ENDPOINT, { method: 'POST', headers: { 'Accept': 'application/json' }, body: JSON.stringify({ nom: form.nom, email: form.email, telephone: form.tel, metier: form.metier, message: form.msg, _replyto: form.email, _subject: `Demande de devis \u2014 ${form.nom} (${form.metier})` }) }); if (res.ok) setStatus('ok'); else setStatus('error'); } catch (err) { setStatus('error'); } }; return (
); } window.LandingPage = LandingPage; window.PALETTES = PALETTES; // ── TWEAKS LAYER ─────────────────────────────────────────────── // Three expressive controls. Each one shifts MULTIPLE properties at once // to actually reshape the feel — not single-property pixel pushing. // // mood : atelier | chantier | charpente (photo tones, hero overlay, accent) // voice : chaleureux | direct | sobre (rewrites copy throughout) // layout : classique | editorial | compact (type scale, density, rhythm) const MOODS = { atelier: { tone:'wood', overlay:'linear-gradient(180deg, rgba(20,15,10,.55) 0%, rgba(20,15,10,.35) 50%, %ACCENT%E6 100%)', accentMul:1, portfolio:'wood-stone-warm' }, chantier: { tone:'stone', overlay:'linear-gradient(180deg, rgba(30,40,50,.55) 0%, rgba(30,40,50,.4) 50%, %ACCENT%F0 100%)', accentMul:1.05, portfolio:'stone-cool-stone' }, charpente: { tone:'wood', overlay:'linear-gradient(180deg, rgba(15,12,8,.78) 0%, rgba(15,12,8,.65) 60%, rgba(10,8,5,.92) 100%)', accentMul:1.1, portfolio:'wood-wood-warm' }, }; const VOICES = { chaleureux: { eyebrow: 'Sites vitrines pour artisans · BTP', h1a: 'Le site internet qui vous ramène', h1b: 'des chantiers.', sub: "Sites vitrines pour artisans et pros du BTP. Basé dans l'Aude, j'interviens partout en France. Livré en moins de 10 jours, tarif clair.", cta: 'Demander un devis gratuit', secondary: 'Voir des réalisations', portfolioH: 'Des sites pensés', portfolioHi: 'pour le terrain.', portfolioP: 'Chaque site est conçu pour une chose : faire sonner votre téléphone. Voici ce que ça donne, en vrai, chez des artisans du coin.', processH: 'Comment ça', processHi: 'se passe.', processP: 'Quatre étapes, deux semaines maximum. Pas de jargon, pas de prestataire qui disparaît.', pourquoiH: 'Pourquoi travailler', pourquoiHi: 'avec moi.', finalH: 'On en', finalHi: 'parle ?', finalP: 'Dites-moi qui vous êtes et ce que vous faites. Je reviens vers vous dans la journée avec un devis clair.', }, direct: { eyebrow: 'Sites pour artisans · pas de blabla', h1a: 'Un vrai site.', h1b: 'Pas une carte de visite en ligne.', sub: "Vous bossez. Moi aussi. Je fais des sites qui ramènent des chantiers, livrés en moins de 10 jours, à prix fixe. Pas de jargon, pas de surprises.", cta: 'Devis gratuit', secondary: 'Voir le travail', portfolioH: 'Des sites', portfolioHi: 'qui bossent.', portfolioP: "Pas de design qui en jette pour rien. Chaque page sert à une seule chose : faire sonner votre téléphone.", processH: 'On fait', processHi: 'comme ça.', processP: "Quatre étapes. Deux semaines max. Pas de réunions inutiles, pas de relances pour vous tirer les vers du nez.", pourquoiH: 'Trois raisons,', pourquoiHi: 'c\'est tout.', finalH: 'On', finalHi: 'y va ?', finalP: "Dites-moi qui vous êtes et ce que vous faites. Je vous rappelle dans la journée. Pas de mail à rallonge.", }, sobre: { eyebrow: 'Atelier Vitrine · Aude', h1a: 'Sites vitrines', h1b: 'pour artisans et BTP.', sub: "Conception de sites internet professionnels. Délai annoncé : moins de 10 jours. Tarif fixe, communiqué avant signature.", cta: 'Demander un devis', secondary: 'Réalisations', portfolioH: 'Réalisations', portfolioHi: 'récentes.', portfolioP: "Une sélection de sites livrés à des artisans du département de l'Aude.", processH: 'Méthode', processHi: 'en quatre étapes.', processP: "Du premier échange à la mise en ligne, comptez deux semaines.", pourquoiH: 'Trois', pourquoiHi: 'engagements.', finalH: 'Prendre', finalHi: 'contact.', finalP: "Renseignez ce formulaire pour recevoir un devis détaillé sous 24h.", }, }; const LAYOUTS = { classique: { heroSize:72, sectionSize:54, sectionPad:120, gridGap:32, processCols:4, leadSize:19, sublead:15 }, editorial: { heroSize:104, sectionSize:78, sectionPad:160, gridGap:48, processCols:4, leadSize:22, sublead:17 }, compact: { heroSize:54, sectionSize:38, sectionPad:80, gridGap:24, processCols:4, leadSize:16, sublead:14 }, }; window.MOODS = MOODS; window.VOICES = VOICES; window.LAYOUTS = LAYOUTS;