// rbd-main.jsx — All page sections + App root const { useState, useEffect, useRef } = React; // ── Helpers ─────────────────────────────────────────────────────────────────── function Label({ children, light = false }) { return ( {children}); } function Btn({ children, onClick, variant = 'outlineLight', style = {} }) { const [hov, setHov] = useState(false); const variants = { outlineLight: { bg: hov ? '#fff' : 'transparent', color: hov ? '#000' : '#fff', border: '1px solid rgba(255,255,255,0.55)' }, solidLight: { bg: hov ? 'transparent' : '#fff', color: hov ? '#fff' : '#000', border: '1px solid #fff' }, outlineDark: { bg: hov ? '#000' : 'transparent', color: hov ? '#fff' : '#000', border: '1px solid rgba(0,0,0,0.7)' }, solidDark: { bg: hov ? 'transparent' : '#000', color: hov ? '#000' : '#fff', border: '1px solid #000' }, whatsapp: { bg: hov ? '#1da851' : '#25D366', color: '#fff', border: 'none' } }; const v = variants[variant] || variants.outlineLight; return ( ); } // ── HERO ────────────────────────────────────────────────────────────────────── function HeroSection({ navigate }) { return (
{/* ── Foto de fundo — dessaturada e discreta ── */}
{/* Overlay escuro para focar no CTA */}
{/* ── CTA centralizado ── */}
{/* Tagline */}

RBD Arquitetura & Interiores

A boa ARQUITETURA vai muito além da planta.

Integramos arquitetura, construção e interiores para que você viva todo o processo com mais segurança, organização e tranquilidade.

{/* WhatsApp CTA */}
{ e.currentTarget.style.background = '#1da851'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.background = '#25D366'; e.currentTarget.style.transform = 'translateY(0)'; }}> Falar com a RBD

(42) 98870-8525

{/* Email + Telefone */}
{/* Email */} {/* Telefone */}
{/* Atendimento 24h */}

Atendimento 24 horas

{/* ── Texto inferior esquerdo — discreto ── */}

RBD Arquitetura & Interiores

Ponta Grossa — Paraná

{/* ── Links inferior direito — mínimos ── */}
{[['portfolio','Portfólio'], ['contato','Contato']].map(([id, label]) => ( ))}
{/* ── Scroll cue — centro base ── */}
); } // ── ABOUT ───────────────────────────────────────────────────────────────────── function AboutSection() { const diffs = [ { n: '01', title: 'Excelência Técnica', desc: 'Mais de 25 anos de experiência e centenas de projetos entregues com qualidade superior.' }, { n: '02', title: 'Visão Integrada', desc: 'Do conceito à execução, acompanhamos cada etapa com atenção irrestrita ao detalhe.' }, { n: '03', title: 'Materiais Premium', desc: 'Parceiros selecionados e materiais de primeira linha para resultados extraordinários.' }, { n: '04', title: 'Entrega Pontual', desc: 'Compromisso total com prazos e transparência em todas as fases do projeto.' }]; return (
{/* Main grid */}

Uma boa arquitetura
começa muito antes do projeto.

Antes de pensar em formas, materiais ou acabamentos, buscamos compreender as pessoas, os objetivos e a forma como cada espaço será ocupado. É essa leitura que orienta todas as decisões ao longo da jornada.

Mais do que desenvolver projetos, conduzimos arquitetura, construção e interiores de forma integrada, trazendo clareza, organização e segurança em cada etapa.

Porque acreditamos que uma boa arquitetura não é apenas aquela que impressiona quando fica pronta. É aquela que continua fazendo sentido ao longo do tempo.

Equipe RBD Arch
{/* Differentials */}
{diffs.map(({ n, title, desc }, i) =>

{n}

{title}

{desc}

)}
); } // ── LIGHTBOX ───────────────────────────────────────────────────────────────── const makeSlides = (proj) => { const { name, cat, images, captions } = proj; if (images && images.length) { return images.map((src, i) => ({ src, label: `${name.toUpperCase()}\n${(captions && captions[i]) || ''}`.trim() })); } const base = cat.split(' · ')[0]; const map = { Residencial: ['FACHADA', 'SALA DE ESTAR', 'COZINHA GOURMET', 'SUÍTE MASTER', 'ÁREA EXTERNA'], Comercial: ['VISTA GERAL', 'RECEPÇÃO', 'ÁREA PRINCIPAL', 'DETALHE', 'TERRAÇO'], Interiores: ['COMPOSIÇÃO GERAL', 'PALETA DE MATERIAIS', 'ILUMINAÇÃO', 'DETALHE CONSTRUTIVO', 'ACABAMENTOS'] }; return (map[base] || map.Residencial).map((l) => ({ src: null, label: `${name.toUpperCase()}\n${l}` })); }; function Lightbox({ project, onClose }) { const [idx, setIdx] = useState(0); const [fading, setFading] = useState(false); const [zoom, setZoom] = useState(1); const [pan, setPan] = useState({ x: 50, y: 50 }); const [editingCap, setEditingCap] = useState(false); const [capOverrides, setCapOverrides] = useState(() => { try { return JSON.parse(localStorage.getItem('rbd-captions') || '{}'); } catch (e) { return {}; } }); const touchX = useRef(null); const total = project.slides.length; // Reset zoom whenever the slide changes useEffect(() => { setZoom(1); setPan({ x: 50, y: 50 }); setEditingCap(false); }, [idx]); // Preload neighboring slides (and all slides once idle) so navigation feels instant useEffect(() => { const preload = (i) => { const src = project.slides[(i + total) % total].src; if (src) { const img = new Image(); img.src = src; } }; preload(idx + 1); preload(idx - 1); }, [idx, total]); useEffect(() => { const id = setTimeout(() => { project.slides.forEach((s) => { if (s.src) { const img = new Image(); img.src = s.src; } }); }, 300); return () => clearTimeout(id); }, []); const hasImg = !!project.slides[idx].src; const toggleZoom = (e) => { if (!hasImg) return; if (e) e.stopPropagation(); setZoom((z) => z === 1 ? 2 : 1); }; const onImgMove = (e) => { if (zoom === 1) return; const r = e.currentTarget.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width) * 100; const y = ((e.clientY - r.top) / r.height) * 100; setPan({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }); }; useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); if (editingCap) return; if (e.key === 'ArrowRight' && !fading) go(1); if (e.key === 'ArrowLeft' && !fading) go(-1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [idx, fading, editingCap]); useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => {document.body.style.overflow = prev || '';}; }, []); const go = (dir) => { if (fading) return; setFading(true); setTimeout(() => {setIdx((i) => (i + dir + total) % total);setFading(false);}, 220); }; const jumpTo = (i) => { if (i === idx || fading) return; setFading(true); setTimeout(() => {setIdx(i);setFading(false);}, 220); }; const onTouchStart = (e) => {touchX.current = e.touches[0].clientX;}; const onTouchEnd = (e) => { if (touchX.current === null) return; const diff = touchX.current - e.changedTouches[0].clientX; if (Math.abs(diff) > 50) go(diff > 0 ? 1 : -1); touchX.current = null; }; const arrowBase = { position: 'absolute', top: '50%', transform: 'translateY(-50%)', zIndex: 10, border: '1px solid rgba(255,255,255,0.14)', color: '#fff', cursor: 'pointer', width: '56px', height: '56px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,0.05)', transition: 'background 0.2s ease, border-color 0.2s ease' }; return (
{/* ── Top bar ── */}
e.stopPropagation()} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 32px', borderBottom: '1px solid rgba(255,255,255,0.06)', flexShrink: 0, position: 'relative' }}> RBDARCH {/* Counter — centrado */} {idx + 1} / {total} {/* Right controls: zoom + close */}
{hasImg &&
{[1, 2].map((z) => )}
} {/* Close */}
{/* ── Image area ── */}
e.stopPropagation()} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}> {/* Left arrow */} {/* Slide */}
{project.slides[idx].src ? {project.slides[idx].label.replace(/\n/g, :
}
{/* Right arrow */} {/* Per-image caption — editável */} {(() => { const parts = (project.slides[idx].label || '').split('\n'); const derived = parts.length > 1 ? parts.slice(1).join(' ').trim() : ''; const key = `rbd-cap:${project.name}:${idx}`; const cap = (capOverrides[key] !== undefined ? capOverrides[key] : derived); return (
{ e.stopPropagation(); if (!editingCap) { setEditingCap(true); setTimeout(() => { const el = e.target; el.focus(); const r = document.createRange(); r.selectNodeContents(el); const s = getSelection(); s.removeAllRanges(); s.addRange(r); }, 0); } }} onBlur={(e) => { const v = e.currentTarget.textContent.trim(); setCapOverrides((o) => { const n = { ...o, [key]: v }; try { localStorage.setItem('rbd-captions', JSON.stringify(n)); } catch (err) {} return n; }); setEditingCap(false); }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } if (e.key === 'Escape') { e.currentTarget.textContent = cap; e.currentTarget.blur(); } }} title={editingCap ? '' : 'Clique para editar a descrição'} style={{ display: 'inline-block', background: editingCap ? 'rgba(0,0,0,0.82)' : 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', padding: '9px 22px', border: editingCap ? '1px solid var(--accent,rgba(255,255,255,0.55))' : '1px solid rgba(255,255,255,0.1)', fontFamily: 'Montserrat,sans-serif', fontWeight: 500, fontSize: '12px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.92)', outline: 'none', cursor: editingCap ? 'text' : 'pointer', minWidth: '40px', opacity: fading ? 0 : 1, transition: 'opacity 0.22s ease, background 0.2s ease, border-color 0.2s ease' }}>{cap} {!editingCap && Clique para editar }
); })()} {/* Dot indicators */}
{project.slides.map((_, i) =>
{/* ── Footer info ── */}
e.stopPropagation()} style={{ padding: '24px 40px 28px', borderTop: '1px solid rgba(255,255,255,0.06)', flexShrink: 0 }}>

{project.cat}

{project.name}

{project.desc}

); } // ── PORTFOLIO ───────────────────────────────────────────────────────────────── function PortfolioSection({ navigate }) { const [tab, setTab] = useState('Residencial'); const [lightbox, setLightbox] = useState(null); const tabs = ['Residencial', 'Comercial', 'Interiores']; const projects = { Residencial: [ { name: 'Casa KBR', cat: 'Residencial · Ponta Grossa-PR', desc: 'Residência térrea com cobertura inclinada em metal e forro de madeira, fachada em tijolo aparente, ripado vertical e iluminação linear embutida — carport integrado, área externa com deck, piscina e jardim tropical.', images: ['projects/casa-kbr/01-fachada-noite.jpg', 'projects/casa-kbr/02-fachada-lateral.jpg', 'projects/casa-kbr/03-area-externa.jpg', 'projects/casa-kbr/04-piscina-deck.jpg', 'projects/casa-kbr/05-fachada-real.jpg'], captions: ['FACHADA NOTURNA', 'FACHADA LATERAL', 'ÁREA EXTERNA & JARDIM', 'PISCINA & DECK', 'FACHADA PRINCIPAL'] }, { name: 'Casa FB', cat: 'Residencial · Ponta Grossa-PR', desc: 'Residência contemporânea com fachada em pedra natural, ripado de madeira e jardins suspensos — volumes horizontais precisos, cobogós metálicos e iluminação cênica que valorizam a materialidade e a relação entre arquitetura e paisagismo.', images: ['projects/casa-fb/01-fachada-dia.jpg', 'projects/casa-fb/02-detalhe-jardim.jpg', 'projects/casa-fb/03-detalhe-pedra.jpg', 'projects/casa-fb/04-fachada-noite.jpg', 'projects/casa-fb/05-fachada-esquina.jpg'], captions: ['FACHADA PRINCIPAL', 'DETALHE — JARDIM SUSPENSO', 'DETALHE — PEDRA NATURAL', 'FACHADA NOTURNA', 'VISTA DA ESQUINA'] }, { name: 'Casa L&F', cat: 'Residencial · Ponta Grossa-PR', desc: 'Residência contemporânea com cobertura inclinada em madeira, fachada em pedra natural e iluminação linear embutida — carport integrado à volumetria, jardim tropical e área externa com piscina e parede em pedra.', images: ['projects/casa-lf/01-fachada-render.jpg', 'projects/casa-lf/02-fachada-render2.jpg', 'projects/casa-lf/03-detalhe-entrada.jpg', 'projects/casa-lf/04-area-externa.jpg', 'projects/casa-lf/05-fachada-real.jpg'], captions: ['FACHADA PRINCIPAL', 'VISTA LATERAL', 'DETALHE — ENTRADA', 'ÁREA EXTERNA & PISCINA', 'FOTO REAL — FACHADA'] }, { name: 'Casa TSS', cat: 'Residencial · Ponta Grossa-PR', desc: 'Sobrado contemporâneo de dois pavimentos com fachada em concreto aparente, ripado de madeira e jardim suspenso — iluminação linear embutida, piscina com deck e área gourmet integrada ao living.', images: ['projects/casa-tss/01-piscina-jardim.jpg', 'projects/casa-tss/02-fachada-lateral.jpg', 'projects/casa-tss/03-fachada-noite.jpg', 'projects/casa-tss/04-area-externa.jpg', 'projects/casa-tss/05-fachada-principal.jpg'], captions: ['PISCINA & JARDIM NOTURNO', 'FACHADA LATERAL', 'FACHADA NOTURNA', 'ÁREA EXTERNA & PISCINA', 'FACHADA PRINCIPAL'] }, { name: 'Casa RNT', cat: 'Residencial · Ponta Grossa-PR', desc: 'Residência térrea de linguagem tropical contemporânea — cobertura em telha natural, pergolado em madeira maciça, piscina com deck e jardim com palmeiras imperiais. Integração total entre o living e as áreas externas.', images: ['projects/casa-rnt/01-fachada.jpg', 'projects/casa-rnt/02-piscina.jpg', 'projects/casa-rnt/03-jardim-fogueira.jpg', 'projects/casa-rnt/04-fachada-real.jpg', 'projects/casa-rnt/05-pergolado.jpg'], captions: ['FACHADA PRINCIPAL', 'PISCINA & DECK', 'JARDIM & FOGUEIRA', 'FACHADA — VISTA EXTERNA', 'PERGOLADO & VARANDA'] }, ], Comercial: [ { name: 'Loja Comercial PK2', cat: 'Comercial · Automotivo', desc: 'Showroom multimarcas Perfect K2 Imports com torre-totem em concreto e identidade visual integrada à arquitetura — fachadas em vidro, ACM grafite e tijolo aparente, iluminação cênica que transforma a vitrine de carros em cartão-postal urbano ao entardecer.', images: ['projects/pk2/01-torre-k2.jpg', 'projects/pk2/02-esquina.jpg', 'projects/pk2/03-fachada-rua.jpg'], captions: ['FACHADA SECUNDÁRIA', 'VISTA DA ESQUINA', 'FACHADA & SHOWROOM'] }, { name: 'Estúdio de Fotografia', cat: 'Comercial · Curitiba', desc: 'Edifício comercial de três pavimentos com fachada em ripado de madeira natural, jardins verticais e esquadrias metálicas escuras — linguagem contemporânea que une leveza e sofisticação.', images: ['projects/estudio-foto/01-fachada.jpg', 'projects/estudio-foto/02-estacionamento.jpg', 'projects/estudio-foto/03-cobertura.jpg'], captions: ['FACHADA PRINCIPAL', 'ÁREA DE ESTACIONAMENTO', 'DETALHE DE COBERTURA'] }, { name: 'Espaço Mall', cat: 'Comercial · Varejo', desc: 'Centro comercial com sete lojas de alto padrão — fachada em ACM grafite, ripado de madeira, tijolo aparente e piso de paralelepípedo. Identidade visual integrada à arquitetura com iluminação cênica ao entardecer.', images: ['projects/espaco-mall/01-fachada-noite.jpg', 'projects/espaco-mall/02-fachada-dia.jpg', 'projects/espaco-mall/03-estacionamento.jpg'], captions: ['FACHADA NOTURNA', 'VISTA GERAL', 'CORREDOR DE ACESSO'] }, { name: 'Escritório de Advocacia', cat: 'Comercial · Jurídico', desc: 'Sede de escritório jurídico com fachada em mármore Calacatta, ripado de madeira e volumetria escultórica — linguagem sóbria e imponente que traduz autoridade e sofisticação.', images: ['projects/advocacia/01-entrada.jpg', 'projects/advocacia/02-fachada-noite.jpg', 'projects/advocacia/03-fachada-dia.jpg'], captions: ['DETALHE DA ENTRADA', 'FACHADA NOTURNA', 'FACHADA DIURNA'] }, { name: 'Supermercado Vitor', cat: 'Comercial · Varejo', desc: 'Supermercado de grande porte com fachada esculpida em volumes curvos e revestimento cerâmico claro — ACM grafite, painéis amadeirados e iluminação linear contínua que valoriza a marca dia e noite.', images: ['projects/vitor/01-fachada.jpg', 'projects/vitor/02-volume-curvo.jpg', 'projects/vitor/03-entrada.jpg'], captions: ['FACHADA PRINCIPAL', 'VOLUME CURVO', 'ACESSO PRINCIPAL'] }, ], Interiores: [ { name: 'Espaço Gourmet · CL', cat: 'Interiores · Residencial', desc: 'Espaço gourmet integrado de cobertura com vista panorâmica da cidade — ilha em mármore com cooktop, bancada de madeira maciça em corte natural, marcenaria amadeirada, iluminação linear embutida e varanda com cortina de vidro que funde estar, jantar e cozinha ao horizonte ao entardecer.', images: ['projects/gourmet-cl/01-cozinha-ilha.jpg', 'projects/gourmet-cl/06-gourmet-entardecer.jpg', 'projects/gourmet-cl/05-varanda-jantar.jpg', 'projects/gourmet-cl/02-jantar-varanda.jpg', 'projects/gourmet-cl/03-living-vista.jpg', 'projects/gourmet-cl/04-home-tv.jpg'], captions: ['Espaço integrado — Cozinha/Living/Varanda', 'Espaço integrado — Varanda gourmet', 'VARANDA GOURMET', 'Espaço integrado — Varanda gourmet', 'Espaço integrado — Living', 'Espaço integrado — Living/Escritório'] }, { name: 'Cond. Avant Garden', cat: 'Interiores · Áreas Comuns', desc: 'Áreas comuns de condomínio de alto padrão — salão de festas, cozinha gourmet em mármore Saint Laurent, academia equipada, sala de jogos com mural artístico, brinquedoteca lúdica e lounge com jardim vertical, unidos por uma linguagem de iluminação linear quente e madeira ripada.', images: ['projects/avant/01-salao.jpg', 'projects/avant/06-lounge.jpg', 'projects/avant/02-cozinha.jpg', 'projects/avant/03-academia.jpg', 'projects/avant/04-jogos.jpg', 'projects/avant/05-brinquedoteca.jpg', 'projects/avant/07-extra.jpg'], captions: ['Brinquedoteca', 'Estar — Salão de festas principal', 'Salão de festas principal', 'Churrasqueira — Salão de festas principal', 'Academia', 'Sala de jogos', 'Espaço Gourmet'] }, { name: 'Cobertura · GN', cat: 'Interiores · Residencial', desc: 'Cobertura com spa coberto por pergolado de vidro e vista panorâmica da cidade — deck em madeira nobre, jardim vertical, painéis ripados, parede escultórica iluminada e estar integrado que dissolve o limite entre lazer e contemplação.', images: ['projects/cobertura-gn/01-spa-vista.jpg', 'projects/cobertura-gn/02-living-jardim.jpg', 'projects/cobertura-gn/03-img.jpg', 'projects/cobertura-gn/04-img.jpg', 'projects/cobertura-gn/05-img.jpg'], captions: ['SPA & VISTA PANORÂMICA', 'SPA', 'SPA & LIVING', 'SPA', 'LIVING INTEGRADO'] }, { name: 'Suíte · GN', cat: 'Interiores · Residencial', desc: 'Suíte master integrada à banheira freestanding por um ripado de madeira vazado — mármore Calacatta na cabeceira, iluminação linear quente, poltrona bouclé e marcenaria sob medida que unem descanso e spa em um só ambiente.', images: ['projects/suite-gn/01-banheira-suite.jpg', 'projects/suite-gn/02-corredor.jpg', 'projects/suite-gn/03-poltrona.jpg', 'projects/suite-gn/04-cabeceira.jpg', 'projects/suite-gn/05-tv-frigobar.jpg'], captions: ['SUÍTE', 'BANHEIRA E SUÍTE', 'BANHEIRA & SUÍTE', 'SUÍTE', 'SUÍTE'] }, { name: 'Espaço Integrado · GN', cat: 'Interiores · Residencial', desc: 'Integração total entre living, sala de jantar e cozinha gourmet — mármore Calacatta, ripado de madeira nobre, escada escultural e iluminação linear embutida que costura todos os ambientes em uma só atmosfera.', images: ['projects/gn/01-integrado.jpg', 'projects/gn/02-living.jpg', 'projects/gn/03-escada.jpg', 'projects/gn/04-cozinha.jpg', 'projects/gn/05-jantar.jpg'], captions: ['ESPAÇO INTEGRADO', 'LIVING & ESCADA', 'ESCADA ESCULTURAL', 'COZINHA', 'SALA DE JANTAR'] }, ] }; return (

Arquitetura feita para ser vivida.

Cada projeto nasce de uma história diferente. Por isso, mais do que criar espaços bonitos, buscamos desenvolver ambientes que façam sentido para quem vai viver ali. Conheça alguns dos projetos que tivemos o privilégio de conduzir.

{/* Tabs */}
{tabs.map((t, i) => )}
{/* Grid */}
{projects[tab].map((proj, i) => setLightbox({ ...proj, slides: makeSlides(proj) })} /> )}
navigate('contato')}>SOLICITAR ORÇAMENTO
{lightbox && setLightbox(null)} />}
); } function ProjectCard({ name, cat, idx, onOpen, cover, span = 2 }) { const [hov, setHov] = useState(false); const aspectRatio = span === 3 ? '16/9' : '4/3'; return (
setHov(true)} onMouseLeave={() => setHov(false)} onClick={onOpen} style={{ position: 'relative', aspectRatio, overflow: 'hidden', cursor: 'pointer', gridColumn: `span ${span}` }}> {/* Hover overlay */}

{cat}

{name}

VER PROJETO
); } // ── SERVICES ────────────────────────────────────────────────────────────────── const ServiceIcon = ({ type }) => { const icons = { residencial: , comercial: , interiores: , consultoria: }; return icons[type] || null; }; function ServicesSection({ navigate }) { const services = [ { type: 'residencial', title: 'Arquitetura', desc: 'Onde a jornada começa.' }, { type: 'comercial', title: 'Construção', desc: 'Onde o projeto ganha vida.' }, { type: 'interiores', title: 'Interiores', desc: 'Onde cada espaço ganha identidade.' }, { type: 'consultoria', title: 'Gestão Integrada', desc: 'Onde tudo se conecta.' }]; return (

Soluções que acompanham cada momento da sua jornada.

{services.map(({ type, title, desc }, i) => )}
); } function ServiceCard({ type, title, desc, navigate }) { const [hov, setHov] = useState(false); return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ background: hov ? '#000' : '#fff', padding: '48px 36px', cursor: 'default', transition: 'background 0.38s cubic-bezier(0.22,1,0.36,1)' }}>

{title}

{desc}

); } // ── MUITO ALÉM DE UM PROJETO ──────────────────────────────────────────────── function IntegratedSection() { return (

Muito além de um projeto.

Contratar um arquiteto é importante. Mas conduzir todas as etapas com clareza faz toda a diferença.

Ao longo dessa jornada, existem dezenas de decisões, fornecedores, prazos e detalhes que precisam conversar entre si.

Nosso papel é integrar esse processo para que você tenha mais segurança para decidir, mais tranquilidade durante a execução e a certeza de que cada etapa está sendo conduzida com o mesmo cuidado do início ao fim.

); } // ── CONTACT ─────────────────────────────────────────────────────────────────── function ContactSection() { const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' }); const [errors, setErrors] = useState({}); const [sent, setSent] = useState(false); const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Campo obrigatório'; if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email)) e.email = 'E-mail inválido'; if (!form.message.trim()) e.message = 'Campo obrigatório'; return e; }; const handle = (e) => { e.preventDefault(); const errs = validate(); if (Object.keys(errs).length) {setErrors(errs);return;} setSent(true); }; const field = (key, placeholder, type = 'text', multiline = false) => { const hasErr = !!errors[key]; const baseStyle = { width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${hasErr ? '#e55' : 'rgba(255,255,255,0.2)'}`, color: '#fff', fontFamily: 'Montserrat,sans-serif', fontWeight: 300, fontSize: '14px', padding: '14px 0', outline: 'none', resize: 'none', transition: 'border-color 0.25s' }; return (
{multiline ?