// Dalflow — all 5 pages const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React; const TOOL_ICONS = { 'Anthropic': 'anthropic', 'Gemini': 'googlegemini', 'Make': 'make', 'n8n': 'n8n', 'Zapier': 'zapier', 'App Script': 'googleappsscript', 'Odoo': 'odoo', 'Shopify': 'shopify', 'Supabase': 'supabase', 'Airtable': 'airtable', 'Notion': 'notion', 'Google Sheets': 'googlesheets', 'WhatsApp API': 'whatsapp', 'Meta API': 'meta', 'Typeform': 'typeform', 'Calendly': 'calendly' }; // Inline SVGs for tools whose icons are not on the simpleicons CDN const TOOL_ICONS_INLINE = { 'OpenAI': , 'Microsoft Outlook': , 'Google Workspace': }; // ===== Thematic service illustrations ===== function AutoArt() { return ( EMAIL / LEAD AI AGENT AUTO-REPLY EMAIL ✓ CRM ASSIGNAT ✓ NOTIF. FOLLOW-UP ); } function IntegArt() { const spokes = [ { angle: -90, label: 'ERP' }, { angle: -30, label: 'CRM' }, { angle: 30, label: 'EMAIL' }, { angle: 90, label: 'SHEETS' }, { angle: 150, label: 'SHOP' }, { angle: 210, label: 'MKTPL' }]; const cx = 160,cy = 200,r = 110,nodeR = 34; return ( {spokes.map((s, i) => { const rad = s.angle * Math.PI / 180; const x = cx + r * Math.cos(rad); const y = cy + r * Math.sin(rad); return ( {s.label} ); })} SYNC REAL-TIME ); } function DashArt() { const bars = [62, 85, 48, 94, 70, 55, 88]; const bw = 22,gap = 8,startX = 42,baseY = 290,maxH = 120; return ( HORES / MES 40h+ ERRORS −90% ROI TARGET 71% {bars.map((pct, i) => { const h = pct / 100 * maxH; const x = startX + i * (bw + gap); return ( ); })} REPORT GENERAT AUTOMÀTICAMENT cada dilluns · 08:00 ); } function PortalArt() { return ( {/* top bar */} app.dalflow.io {/* sidebar */} {/* main: header */} / NOVA PROFORMA {/* form */} CLIENT Restaurant Cafè Marina S.L. CONCEPTE Implementació Odoo + integració IMPORT 4.800€ {/* generate button */} GENERAR PDF {/* history */} ÚLTIMES PROFORMES PRF-0143 · Eurast ✓ PRF-0142 · Airea Travel ✓ ); } // ============ LIVE FLOW DEMO ============ function LiveFlowDemo({ t }) { const scenarios = t.home.liveDemo.scenarios; const [idx, setIdx] = useStateP(0); useEffectP(() => { const id = setInterval(() => setIdx((i) => (i + 1) % scenarios.length), 6500); return () => clearInterval(id); }, [scenarios.length]); const s = scenarios[idx]; return ( <>
{t.home.liveDemo.label}
{s.input.tag}
{s.input.title}
{s.input.detail}
AI · AGENT
{s.outputs.map((o, i) =>
{o.tag}
{o.detail}
)}
); } // ============ HOME ============ function HomePage({ t, tweaks }) { const isSerif = tweaks.heroVariant === 'serif'; const SerifSpan = ({ children }) => isSerif ? {children} : {children}; return ( <> {/* HERO */}
{t.home.eyebrow}

{t.home.heroA}
{t.home.heroB}

{t.home.heroSub}

{t.home.ctaPrimary} → {t.home.ctaSecondary}
{/* LIVE ACTIVITY FEED */}
{/* PITCH */}

{t.home.pitchA} {t.home.pitchB} {t.home.pitchC} {t.home.pitchD} {t.home.pitchE} {t.home.pitchF}{t.home.pitchG}

{/* Stats row */}
{t.home.statsIntroLabel}

{t.home.statsIntroA}
{t.home.statsIntroB}

{t.home.stats.map((s, i) =>
{s.value}
{s.label}
)}
{/* WHY DALFLOW */}
/02 — Why Dalflow

{t.home.whyTitle}

{t.home.whySub}

{t.home.why.map((w, i) => { const glyphs = ['founder', 'speed', 'simple', 'roi']; return (
{w.t}
{w.d}
); })}
{/* TOOLS COMPATIBILITY */}
{t.home.toolsSectionLabel}

{t.home.toolsTitle}

{t.home.toolsSub}

{t.about.stack.map((s, i) => { const inline = TOOL_ICONS_INLINE[s]; const slug = TOOL_ICONS[s]; return ( {inline ? inline : slug && {e.target.style.display = 'none';}} /> } {s} ); })}
{/* SERVICES OVERVIEW */}
/04 — Services

{t.home.servicesTitle}

{t.home.servicesIntro}

{t.home.seeAll} →
{t.services.items.map((s, i) => { const kinds = ['auto', 'integ', 'dash', 'portal']; return (
{s.tag}
{s.title}
{s.desc}
    {s.bullets.slice(0, 3).map((b, j) =>
  • {b}
    • )}
); })}
{/* PROCESS */}
/05 — Process

{t.home.processTitle}

{t.home.processSub}

{t.home.process.map((p, i) =>
{p.n}
{p.t}
{p.d}
)}
{/* FAQ */}
/06 — FAQ

{t.home.faqTitle}

{t.home.faqs.map((f, i) =>
{f.q}
{f.a}
)}
{/* FINAL CTA */} {tweaks.showFinalCta &&

{t.home.finalCtaTitle.split(' ').slice(0, -1).join(' ')}{' '} {t.home.finalCtaTitle.split(' ').slice(-1)[0]}

{t.home.finalCtaSub}

{t.nav.cta} → armand.dalmau@gmail.com
} ); } // ============ SERVICES ============ function ServicesPage({ t, tweaks }) { const thematicArts = [AutoArt, IntegArt, DashArt, PortalArt]; return ( <>
/ Services

{t.services.title}

{t.services.lede}

{/* SERVICE ROWS */}
{t.services.items.map((s, i) => { const Art = thematicArts[i]; const reversed = i % 2 === 1; return (
{!reversed &&
}
{s.tag}

{s.title}

{s.desc}

{s.example}
    {s.bullets.map((b, j) =>
  • {b}
    • )}
{reversed &&
}
); })}
{/* DEPARTMENTS */}
/ Per departament

{t.services.deptTitle}

{t.services.deptSub}

{t.services.depts.map((d, i) =>
{d.dept}
    {d.examples.map((ex, j) =>
  • {ex}
    • )}
)}
{/* HOW WE WORK TOGETHER */}
/ Com col·laborem

{t.services.colabTitle}

{t.services.colabSub}

{t.services.colab.map((c, i) =>
{c.name}
{c.tag}
{c.desc}
    {c.features.map((f, j) =>
  • {f}
    • )}
{c.cta} →
)}
{tweaks.showFinalCta &&

{t.home.finalCtaTitle.split(' ').slice(0, -1).join(' ')}{' '} {t.home.finalCtaTitle.split(' ').slice(-1)[0]}

{t.home.finalCtaSub}

{t.nav.cta} →
} ); } // ============ CASES ============ function CasesPage({ t, tweaks }) { const arts = [LatticeArt, FlowArt, TapeArt, MeshArt]; const BRANDS = { eurast: { img: 'assets/eurast-logo.png', bg: '#141210' }, airea: { img: 'assets/airea-logo.png', bg: '#39443a' }, hrlovers: { img: 'assets/hrlovers-logo.png', bg: '#f2b707' } }; const renderArt = (c, i, Art) => { const b = c.logo ? BRANDS[c.logo] : null; if (b) { return (
{c.client}
); } return (
); }; const renderLhs = (c, i, Art) => { const quote = c.quote ?
{c.quote}
{c.quoteName} · {c.quoteRole}
: null; return (
{renderArt(c, i, Art)} {quote}
); }; return ( <>
/ Cases

{t.cases.title}

{t.cases.lede}

{t.cases.items.map((c, i) => { const Art = arts[i]; const reversed = i % 2 === 1; return (
{!reversed && renderLhs(c, i, Art)}
{c.sector &&
{c.sector}
}
{c.client}
{c.role}

{c.tagline}

{c.summary}

{c.metrics.map((m, j) =>
{m.v}
{m.k}
)}
{reversed && renderLhs(c, i, Art)}
); })}
{tweaks.showFinalCta &&

{t.home.finalCtaTitle.split(' ').slice(0, -1).join(' ')}{' '} {t.home.finalCtaTitle.split(' ').slice(-1)[0]}

{t.home.finalCtaSub}

{t.nav.cta} →
} ); } // ============ ABOUT ============ function AboutPage({ t, tweaks }) { return ( <>
/ About

{t.about.title}

{t.about.lede}

{/* Portrait */}
Armand Dalmau
armand.dalmau barcelona / 2026
{/* Body */}

{t.about.bodyA}

{t.about.bodyB}

{t.about.bodyC}

LinkedIn ↗ Email ↗ {t.nav.cta} →
/ Background

{t.about.careerTitle}

{t.about.career.map((c, i) =>
{c.years}
{c.role} {c.org}
{c.detail}
)}
/ Principles

{t.about.principlesTitle}

{t.about.principles.map((p, i) => { const [head, ...rest] = p.t.split(' '); return (
{head} {rest.join(' ')}
{p.d}
); })}
/ Stack

{t.about.stackTitle}

{t.about.stackSub}

{t.about.stack.map((s, i) => {s} )}
{tweaks.showFinalCta &&

{t.home.finalCtaTitle.split(' ').slice(0, -1).join(' ')}{' '} {t.home.finalCtaTitle.split(' ').slice(-1)[0]}

{t.home.finalCtaSub}

{t.nav.cta} →
} ); } // ============ CONTACT ============ function ContactPage({ t }) { const [sent, setSent] = useStateP(false); const [form, setForm] = useStateP({ name: '', company: '', email: '', message: '' }); const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => { window.location.href = `mailto:armand.dalmau@gmail.com?subject=Dalflow%20-%20${encodeURIComponent(form.name)}&body=${encodeURIComponent(`Empresa: ${form.company}\nEmail: ${form.email}\n\n${form.message}`)}`; }, 800); }; return ( <>
/ Contact

{t.contact.title.split('.')[0]} .

{t.contact.lede}

{/* Book a call card */}
/ Direct line

{t.contact.bookTitle.split(' ').slice(0, -1).join(' ')}{' '} {t.contact.bookTitle.split(' ').slice(-1)[0]}

{t.contact.bookSub}

{t.contact.bookCta} → {t.contact.orEmail}
{/* Decorative shape */}
{/* Form */}

{t.contact.orEmail}

setForm((f) => ({ ...f, name: e.target.value }))} required /> setForm((f) => ({ ...f, company: e.target.value }))} />
setForm((f) => ({ ...f, email: e.target.value }))} required />