/* global React */ const { useState } = React; // ---------- i18n strings ---------- const STRINGS = { 'pt-BR': { code: 'PT-BR', eyebrow: 'Resposta imediata', h1A: 'Site personalizado', h1B: 'e de alta performance', h1From: 'a partir de', price: 'R$867', sub: 'Somos especialistas em sites com alto nível de performance e qualidade, focados em', subAccent: 'resultados', stats: [ { k: '2.400+', v: 'projetos realizados' }, { k: '12%', v: 'taxa média de conversão' }, { k: '1.9s', v: 'tempo médio de carregamento' }, ], statsMobile: [ { k: '2.400+', v: 'projetos\nrealizados' }, { k: '12%', v: 'conversão\nmédia' }, { k: '1.9s', v: 'tempo de\ncarregamento' }, ], step1Title: ['Por onde a gente ', 'começa', '?'], step2Title: ['Como a gente ', 'te chama', '?'], goalA: 'Preciso de um site para o meu negócio.', goalB: 'Já tenho um site e quero apenas melhorar ele.', fNome: 'Nome', fNomePh: 'João da Silva', fEmail: 'E-mail', fEmailPh: 'voce@empresa.com', fFone: 'WhatsApp', fFonePh: '(11) 90000-0000', errNome: 'preencha seu nome', errEmail: 'e-mail inválido', errFone: 'número incompleto', errGoal: 'selecione uma opção acima', cta: 'Falar no WhatsApp', ctaSent: 'Abrindo conversa…', ctaHelper: 'Ao enviar, abrimos uma conversa direto no WhatsApp.', back: 'voltar', rights: 'Todos os direitos reservados.', waMsg: (g, name, email, phone) => `Olá! Sou ${name}.\nObjetivo: ${g === 'novo' ? 'Site novo' : 'Melhorar site existente'}\nE-mail: ${email}\nTelefone: ${phone}`, }, 'pt-PT': { code: 'PT-PT', eyebrow: 'Resposta imediata', h1A: 'Site personalizado', h1B: 'e de alta performance', h1From: 'a partir de', price: '€300', sub: 'Somos especialistas em sites com elevado desempenho e qualidade, focados em', subAccent: 'resultados', stats: [ { k: '2.400+', v: 'projetos realizados' }, { k: '12%', v: 'taxa média de conversão' }, { k: '1.9s', v: 'tempo médio de carregamento' }, ], statsMobile: [ { k: '2.400+', v: 'projetos\nrealizados' }, { k: '12%', v: 'conversão\nmédia' }, { k: '1.9s', v: 'tempo de\ncarregamento' }, ], step1Title: ['Por onde ', 'começamos', '?'], step2Title: ['Como te ', 'tratamos', '?'], goalA: 'Preciso de um site para o meu negócio.', goalB: 'Já tenho um site e quero apenas melhorá-lo.', fNome: 'Nome', fNomePh: 'João Silva', fEmail: 'E-mail', fEmailPh: 'tu@empresa.com', fFone: 'WhatsApp', fFonePh: '+351 900 000 000', errNome: 'preenche o teu nome', errEmail: 'e-mail inválido', errFone: 'número incompleto', errGoal: 'seleciona uma opção acima', cta: 'Falar no WhatsApp', ctaSent: 'A abrir conversa…', ctaHelper: 'Ao enviar, abrimos uma conversa diretamente no WhatsApp.', back: 'voltar', rights: 'Todos os direitos reservados.', waMsg: (g, name, email, phone) => `Olá! Sou o ${name}.\nObjetivo: ${g === 'novo' ? 'Site novo' : 'Melhorar site existente'}\nE-mail: ${email}\nTelemóvel: ${phone}`, }, }; // ---------- GTM ---------- function gtmPush(event, params) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event, ...params }); } // ---------- Detecção automática de idioma ---------- function detectLang() { if (typeof window === 'undefined') return 'pt-BR'; // 1. Hash na URL (link compartilhado) const h = (window.location.hash || '').toUpperCase(); if (h.includes('PT-PT')) return 'pt-PT'; if (h.includes('PT-BR')) return 'pt-BR'; // 2. Preferência salva pelo usuário try { const saved = localStorage.getItem('gd-lang'); if (saved === 'pt-PT' || saved === 'pt-BR') return saved; } catch (_) {} // 3. Idioma do browser const nav = (navigator.language || '').toLowerCase(); if (nav === 'pt-pt' || nav.startsWith('pt-pt')) return 'pt-PT'; // 4. Fuso horário try { const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; if (['Europe/Lisbon', 'Atlantic/Azores', 'Atlantic/Madeira'].includes(tz)) return 'pt-PT'; } catch (_) {} return 'pt-BR'; } function saveLang(l) { try { localStorage.setItem('gd-lang', l); } catch (_) {} } // ---------- Logo ---------- const Logo = ({ height = 22, opacity = 1 }) => ( Growth Design ); // ---------- WhatsApp icon ---------- const WhatsIcon = ({ size = 18 }) => ( ); // ---------- Lang switcher ---------- function LangSwitcher({ lang, setLang, compact = false }) { return (
{['pt-BR', 'pt-PT'].map((l) => { const active = lang === l; return ( ); })}
); } // ---------- WhatsApp CTA — green animated gradient + glow ---------- function WhatsCTA({ onClick, disabled, label, sent, isMobile }) { return (
{/* Outer glow halo */}
); } // helper: don't use, kept only so JSX parses; sent label passed in as `label` const STRINGS_FALLBACK_SENT = (l) => l; // ---------- Form sub-components (module-level — stable references, sem perda de foco) ---------- function StepHeader({ title, onBack, isMobile, backLabel }) { return (
{onBack && ( )}

{title}

); } function Field({ label, error, children }) { return ( ); } // ---------- Form ---------- function StepForm({ variant = 'desktop', lang = 'pt-BR' }) { const t = STRINGS[lang]; const [step, setStep] = useState(1); const [goal, setGoal] = useState(null); const [form, setForm] = useState({ name: '', email: '', phone: '' }); const [sent, setSent] = useState(false); const [touched, setTouched] = useState({}); const [shake, setShake] = useState(false); const isMobile = variant === 'mobile'; const goalOptions = [ { id: 'novo', label: t.goalA }, { id: 'melhorar', label: t.goalB }, ]; const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email); const phoneValid = form.phone.replace(/\D/g, '').length >= 9; const nameValid = form.name.trim().length >= 2; const formatPhone = (v) => { if (lang === 'pt-PT') { // simple PT format return v.replace(/[^\d+\s]/g, '').slice(0, 20); } const d = v.replace(/\D/g, '').slice(0, 11); if (d.length <= 2) return d.length ? `(${d}` : ''; if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`; if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`; return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`; }; const handleCTA = () => { // Step 1 — must select a goal if (step === 1) { if (!goal) { setTouched((tt) => ({ ...tt, goal: true })); setShake(true); setTimeout(() => setShake(false), 400); return; } gtmPush('form_step2', { goal, variant }); setStep(2); return; } // Step 2 — submit setTouched({ name: true, email: true, phone: true }); if (!(nameValid && emailValid && phoneValid)) { setShake(true); setTimeout(() => setShake(false), 400); return; } setSent(true); gtmPush('form_submit', { goal, variant, lang }); fetch('https://script.google.com/macros/s/AKfycbx5-YqmGkzM7bC-rCQ4TUBaAaq_twFPrGhngSAH5F8FODeNVgmW87JC9vmzl3rYpq8H/exec', { method: 'POST', body: JSON.stringify({ name: form.name, email: form.email, phone: form.phone, goal, lang }), }).catch(() => {}); setTimeout(() => { gtmPush('generate_lead', { goal, variant, lang, currency: 'BRL' }); if (typeof fbq === 'function') fbq('track', 'Lead'); const msg = encodeURIComponent('Olá, Acabei de me cadastrar no site, gostaria de atendimento.'); window.open(`https://wa.me/5511941861778?text=${msg}`, '_blank'); }, 600); }; // ----- Step 1 ----- const Step1 = () => (
{t.step1Title[0]}{t.step1Title[1]}{t.step1Title[2]}} isMobile={isMobile} backLabel={t.back} />
{goalOptions.map((opt, i) => { const selected = goal === opt.id; return ( ); })}
{touched.goal && !goal && (

{t.errGoal}

)}
); // ----- Step 2 ----- const inputBase = { all: 'unset', boxSizing: 'border-box', width: '100%', padding: isMobile ? '12px 0' : '14px 0', fontFamily: 'DM Sans, sans-serif', fontSize: 16, color: '#F4F5F7', background: 'transparent', borderBottom: '1px solid #25262A', borderRadius: 0, transition: 'border-color .2s', }; const Step2 = () => (
{t.step2Title[0]}{t.step2Title[1]}{t.step2Title[2]}} onBack={() => setStep(1)} isMobile={isMobile} backLabel={t.back} />
setForm({ ...form, name: e.target.value })} onBlur={() => setTouched({ ...touched, name: true })} placeholder={t.fNomePh} style={{ ...inputBase, borderBottomColor: touched.name && !nameValid ? '#7A3838' : (form.name ? '#2159C7' : '#25262A'), }} /> setForm({ ...form, email: e.target.value })} onBlur={() => setTouched({ ...touched, email: true })} placeholder={t.fEmailPh} style={{ ...inputBase, borderBottomColor: touched.email && !emailValid ? '#7A3838' : (emailValid ? '#2159C7' : '#25262A'), }} /> setForm({ ...form, phone: formatPhone(e.target.value) })} onBlur={() => setTouched({ ...touched, phone: true })} placeholder={t.fFonePh} style={{ ...inputBase, borderBottomColor: touched.phone && !phoneValid ? '#7A3838' : (phoneValid ? '#2159C7' : '#25262A'), }} />
); const ctaLabel = sent ? t.ctaSent : t.cta; return (
{step === 1 ? Step1() : Step2()}
{/* Persistent CTA — visible on both steps */}

{t.ctaHelper}

); } // ---------- Animated Background ---------- function AnimatedBackground({ width, height, density = 1 }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(0); React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = width * dpr; canvas.height = height * dpr; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); const N = Math.round(28 * density); const particles = Array.from({ length: N }, () => ({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.08, vy: (Math.random() - 0.5) * 0.08, r: Math.random() * 1.1 + 0.3, a: Math.random() * 0.35 + 0.15, pulse: Math.random() * Math.PI * 2, })); let t0 = performance.now(); const tick = (now) => { const t = (now - t0) / 1000; ctx.clearRect(0, 0, width, height); ctx.fillStyle = '#0A0A0B'; ctx.fillRect(0, 0, width, height); const ambient = ctx.createRadialGradient( width * 0.25, -height * 0.1, 0, width * 0.25, -height * 0.1, Math.max(width, height) * 0.7 ); ambient.addColorStop(0, 'rgba(33, 89, 199, 0.18)'); ambient.addColorStop(0.5, 'rgba(33, 89, 199, 0.05)'); ambient.addColorStop(1, 'rgba(33, 89, 199, 0)'); ctx.fillStyle = ambient; ctx.fillRect(0, 0, width, height); const gridSize = 60; const offY = (t * 6) % gridSize; const offX = (t * 3) % gridSize; ctx.strokeStyle = 'rgba(255,255,255,0.022)'; ctx.lineWidth = 1; ctx.beginPath(); for (let x = -gridSize + offX; x < width + gridSize; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y = -gridSize + offY; y < height + gridSize; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); particles.forEach((p) => { p.x += p.vx; p.y += p.vy; p.pulse += 0.012; if (p.x < -10) p.x = width + 10; if (p.x > width + 10) p.x = -10; if (p.y < -10) p.y = height + 10; if (p.y > height + 10) p.y = -10; const tw = (Math.sin(p.pulse) + 1) / 2; const alpha = p.a * (0.4 + tw * 0.6); ctx.fillStyle = `rgba(220, 228, 240, ${alpha})`; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); }); const vg = ctx.createRadialGradient(width / 2, height * 0.4, 0, width / 2, height * 0.4, Math.max(width, height) * 0.75); vg.addColorStop(0, 'rgba(10,10,11,0)'); vg.addColorStop(1, 'rgba(8,8,10,0.6)'); ctx.fillStyle = vg; ctx.fillRect(0, 0, width, height); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [width, height, density]); return ( ); } const BackgroundFx = ({ width, height, density }) => ( ); // ---------- Footer ---------- const Footer = ({ isMobile, t }) => (
© {new Date().getFullYear()} Growth Design — {t.rights}
); // ---------- Headline (shared, fix price clipping) ---------- const Price = ({ size, value }) => ( {value} ); // =============== DESKTOP =============== function Desktop() { const [lang, setLang] = useState(detectLang); const handleSetLang = (l) => { saveLang(l); setLang(l); gtmPush('lang_switch', { lang: l }); }; React.useEffect(() => { try { const desired = `#/${lang}`; if ((window.location.hash || '').toUpperCase() !== desired.toUpperCase()) { window.history.replaceState({}, '', window.location.pathname + window.location.search + desired); } } catch (_) {} }, [lang]); const t = STRINGS[lang]; return (
{t.eyebrow}

{t.h1A}
{t.h1B}{' '} {t.h1From}{' '} .

{t.sub} {t.subAccent}.

{t.stats.map((s, i) => (
{s.k} {s.v}
))}
); } // =============== MOBILE =============== function Mobile() { const [lang, setLang] = useState(detectLang); const handleSetLang = (l) => { saveLang(l); setLang(l); gtmPush('lang_switch', { lang: l }); }; const t = STRINGS[lang]; return (
{t.eyebrow}

{t.h1A} {t.h1B}{' '} {t.h1From}{' '} .

{t.sub} {t.subAccent}.

{t.statsMobile.map((s, i) => (
{s.k} {s.v}
))}
); } window.GrowthDesktop = Desktop; window.GrowthMobile = Mobile;