// about-contact.jsx — About + Contact (typeform-style) const { useState: uState, useEffect: uEffect, useRef: uRef } = React; /* ============================================================ About ============================================================ */ function About({ t, lang, navigate }) { const ref = uRef(null); uEffect(() => { if (!ref.current) return; gsap.fromTo(ref.current.querySelectorAll("[data-fade]"), { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: "expo.out", stagger: 0.06, delay: 0.1 } ); }, [lang]); return (
{/* Header */}
{t.about.kicker}

{t.about.title} —

{/* Hero: portrait + bio */}

{t.about.bio}

{t.about.bio2}

Fabrício Parra
\")", mixBlendMode: "multiply", opacity: 0.25, pointerEvents: "none", }}/>
FLORENÇA, IT · 2025
F. PARRA
{/* Experience */}

{t.about.experienceTitle}.

{String(t.about.experience.length).padStart(2,"0")} {lang === "pt" ? "posições" : "positions"}
{t.about.experience.map((exp, i) => (
{exp.period}

{exp.role}

{exp.company}

{exp.desc}

))}
{/* Education */}

{t.about.educationTitle}.

{t.about.education.map((edu, i) => (
{edu.period}

{edu.course}

{edu.school}
))}
{/* Languages · Certifications · Tools */}
{t.about.languagesTitle}
{t.about.languages.map((l, i) => (
{l.name} {l.level}
))}
{t.about.certificationsTitle}
{t.about.certifications.map((c, i) => (
{c}
))}
{t.about.toolsTitle}
{t.about.toolsList.map((s, i) => ( {s} ))}
{/* Now / availability */}
{t.about.now}

{t.about.nowText}

{lang === "pt" ? "Aceitando projetos" : "Accepting projects"}
); } function CTAStrip({ t, navigate, lang }) { return (
(↓)

{lang === "pt" ? <>Vamos criar algo
memorável. : <>Let's build something
memorable.}

); } /* ============================================================ Contact — Typeform-style ============================================================ */ function Contact({ t, lang }) { const [step, setStep] = uState(0); const [data, setData] = uState({ name: "", whatsapp: "", email: "", budget: "", message: "" }); const [done, setDone] = uState(false); const [sending, setSending] = uState(false); const [error, setError] = uState(null); const inputRef = uRef(null); const sectionRef = uRef(null); const fields = [ { key: "name", q: t.contact.q1, kind: "text", type: "text" }, { key: "whatsapp", q: t.contact.q2, kind: "text", type: "tel" }, { key: "email", q: t.contact.q3, kind: "text", type: "email" }, { key: "budget", q: t.contact.q4, kind: "options" }, { key: "message", q: t.contact.q5, kind: "textarea" }, ]; uEffect(() => { if (inputRef.current) inputRef.current.focus(); // animate question in const cur = sectionRef.current?.querySelector("[data-step-active]"); if (cur) gsap.fromTo(cur, { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, ease: "expo.out" }); }, [step, done]); const validate = () => { const f = fields[step]; const v = data[f.key]; if (!v || !v.trim()) return false; if (f.key === "email") return /\S+@\S+\.\S+/.test(v); return true; }; const submitForm = async () => { setSending(true); setError(null); try { const payload = { access_key: "b0148534-8e75-4638-a33a-c63917911c03", subject: `Novo contato pelo portfólio — ${data.name}`, from_name: "Portfólio Fabrício Parra", replyto: data.email, name: data.name, whatsapp: data.whatsapp, email: data.email, budget: data.budget, message: data.message, }; const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(payload), }); const json = await res.json(); if (json && json.success) { setDone(true); } else { setError(json && json.message ? json.message : "submit_failed"); } } catch (e) { setError(String(e && e.message || e)); } finally { setSending(false); } }; const onNext = () => { if (!validate() || sending) return; if (step < fields.length - 1) setStep(step + 1); else submitForm(); }; const onBack = () => { if (step > 0 && !sending) setStep(step - 1); }; const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey && fields[step].kind !== "textarea") { e.preventDefault(); onNext(); } else if (e.key === "Enter" && e.metaKey) { e.preventDefault(); onNext(); } }; const progress = ((step + (done ? 1 : 0)) / fields.length) * 100; const f = fields[step]; if (done) { return (
✓

{t.contact.done.title.split(" ")[0]} {t.contact.done.title.split(" ").slice(1).join(" ")}

{t.contact.done.body}

); } return (
{/* Header */}
{t.contact.step} {String(step + 1).padStart(2, "0")} {t.contact.of} {String(fields.length).padStart(2, "0")}

{t.contact.title.split(" ")[0]} {t.contact.title.split(" ").slice(1).join(" ")}

{Math.round(progress)}%
{/* Question */}
{f.q.label}

{f.q.title}

{f.kind === "text" && ( setData({ ...data, [f.key]: e.target.value })} onKeyDown={onKey} placeholder={f.q.placeholder} style={{ width: "100%", background: "transparent", border: "none", outline: "none", borderBottom: "1px solid var(--hairline-strong)", padding: "16px 0", fontSize: "clamp(22px, 2.6vw, 36px)", fontFamily: "inherit", color: "var(--ink)", letterSpacing: "-0.01em", }} /> )} {f.kind === "textarea" && (