// x21 Studio — main React components // Depends on: window.X21_CONTENT, window.X21_BRANDS const { useState, useEffect, useRef, useMemo, useCallback } = React; // ------------------- Logo mark (animated gradient stripe) ------------------- function AccentLine({ className = "" }) { return ; } // ------------------- Navigation ------------------- function Nav({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ { id: "services", label: t.nav.services }, { id: "packages", label: t.nav.packages }, { id: "transformations", label: t.nav.transformations }, { id: "about", label: t.nav.about }, { id: "faq", label: t.nav.faq }, { id: "contact", label: t.nav.contact }, ]; const jump = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); setMobileOpen(false); }; return (
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}> x21 Studio
|
{mobileOpen && (
{links.map((l) => ( ))}
)}
); } // ------------------- Hero visual: animated gradient orb + brand grid ------------------- function HeroVisual() { return (
{/* A floating "brand preview" card showing the output concept */}
brand.pdf
Aa
Inter Tight
Display · 64 / 72
STUDIO NORDEN
est. 2026 · brand identity
); } // ------------------- Hero ------------------- function Hero({ t, jump }) { return (
{t.hero.eyebrow}

{t.hero.h1a} {t.hero.h1b}

“{t.hero.sub}”

{t.hero.body}

{t.hero.badge1}
{t.hero.badge2}
{t.hero.badge3}
); } // ------------------- What we do ------------------- function WhatWeDo({ t }) { const cards = [ { n: "01", title: t.what.c1t, desc: t.what.c1d, icon: ( ), }, { n: "02", title: t.what.c2t, desc: t.what.c2d, icon: ( ), }, { n: "03", title: t.what.c3t, desc: t.what.c3d, icon: ( ), }, ]; return (
{cards.map((c, i) => (
{c.icon}
{c.n}

{c.title}

{c.desc}

))}
); } // ------------------- Packages ------------------- function Packages({ t, jump, highlightPackage = "standard" }) { const pkgs = ["starter","standard","premium"].map((key) => ({ key, data: t.pkg[key], highlight: key === highlightPackage, cta: key === highlightPackage ? "gradient" : "ghost", })); return (
{pkgs.map((p) => (
{p.highlight &&
{t.pkg.popular}
}
{p.data.name}
{p.data.price} {p.data.priceSub}
{p.data.desc}
    {p.data.items.map((item, i) => (
  • {item}
    • ))}
{p.data.canDo && (
{p.data.canDoTitle}
    {p.data.canDo.map((it, i) => (
  • {it}
    • ))}
{p.data.nextTitle}
    {p.data.next.map((it, i) => (
  • {it}
    • ))}
{p.data.nextLink && ( { e.preventDefault(); jump("packages"); }} >{p.data.nextLink} )}
)}
))}

{t.pkg.note}

); } // ------------------- Before/After slider ------------------- function BeforeAfter({ before, after, beforeLabel, afterLabel, dragLabel }) { const [pos, setPos] = useState(50); const ref = useRef(null); const dragging = useRef(false); const move = useCallback((clientX) => { const r = ref.current?.getBoundingClientRect(); if (!r) return; let p = ((clientX - r.left) / r.width) * 100; p = Math.max(0, Math.min(100, p)); setPos(p); }, []); useEffect(() => { const onMove = (e) => { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; move(x); }; const onUp = () => { dragging.current = false; }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); window.addEventListener("touchmove", onMove, { passive: false }); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, [move]); const start = (e) => { dragging.current = true; const x = e.touches ? e.touches[0].clientX : e.clientX; move(x); }; return (
{beforeLabel}
{afterLabel}
); } // ------------------- Transformations ------------------- function Transformations({ t }) { const items = t.trans.items; const brands = window.X21_BRANDS; return (
{t.trans.disclaimer}
{items.map((it, i) => (
0{i + 1}
{it.name}
{it.sector}
“{it.caption}”
{t.trans.drag}
))}
); } // ------------------- About ------------------- function About({ t }) { return (

{t.about.p1}

{t.about.p2}

{t.about.p3}

); } function AboutGrid() { // Abstract brand system visual return (
Mark
Aa
Type
Palette
{[...Array(10)].map((_, i) => ( ))} {[...Array(10)].map((_, i) => ( ))}
System
); } // ------------------- FAQ ------------------- function FAQ({ t }) { const [open, setOpen] = useState(0); return (
{t.faq.items.map((item, i) => { const isOpen = open === i; return (
{item.a}
); })}
); } // ------------------- Contact ------------------- function Contact({ t }) { const [form, setForm] = useState({ name: "", email: "", company: "", message: "", gdpr: false }); const [errors, setErrors] = useState({}); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); const er = {}; if (!form.name.trim()) er.name = true; if (!form.email.trim() || !/@/.test(form.email)) er.email = true; if (!form.message.trim()) er.message = true; if (!form.gdpr) er.gdpr = true; setErrors(er); if (Object.keys(er).length === 0) { setSent(true); setTimeout(() => { setSent(false); setForm({ name: "", email: "", company: "", message: "", gdpr: false }); }, 3500); } }; const update = (k) => (e) => { setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }); setErrors({ ...errors, [k]: false }); }; return (
{t.contact.emailLabel}
hello@x21studio.com
{t.contact.locationLabel}
{t.contact.location}
{t.contact.responseLabel}
{t.contact.response}
{t.contact.socialLabel}