// sections.jsx — page sections for the 2build site. // Hero, marquee strip, services, process, products, contact, footer. // ── Stickers (floating SVG decor in hero) ────────────────────────── const STICKERS = [ { x: '6%', y: '12%', rot: -8, size: 56, kind: 'plus', color: 'var(--accent)' }, { x: '88%', y: '8%', rot: 14, size: 80, kind: 'asterisk', color: 'var(--accent-2)' }, { x: '4%', y: '78%', rot: -22, size: 70, kind: 'cube', color: 'var(--accent-3)' }, { x: '92%', y: '70%', rot: 8, size: 64, kind: 'arrow', color: 'var(--accent)' }, { x: '15%', y: '52%', rot: -12, size: 28, kind: 'dot', color: 'var(--accent-2)' }, { x: '78%', y: '40%', rot: 18, size: 42, kind: 'bracket', color: 'var(--ink)' }]; function StickerShape({ kind, size, color }) { switch (kind) { case 'plus': return ( ); case 'asterisk': return ( ); case 'cube': return ( ); case 'arrow': return ( ); case 'dot': return ( ); case 'bracket': return ( ); } return null; } function Stickers() { return ( <> {STICKERS.map((s, i) => )} ); } // ── Headline rotator (cycles through verbs) ───────────────────────── function HeadlineRotator({ words = ['ship', 'design', 'build', 'launch'], interval = 2200 }) { const [idx, setIdx] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setIdx((i) => (i + 1) % words.length), interval); return () => clearInterval(t); }, [words, interval]); // To loop smoothly we render the list twice and snap back at the end. return ( {words.map((w, i) => {w})} ); } // ── Nav bar ──────────────────────────────────────────────────────── function Nav({ logoVariant }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 40); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); return ( ); } // ── Hero ─────────────────────────────────────────────────────────── function Hero({ logoVariant, layout, headline }) { const heroRef = React.useRef(null); const glowRef = React.useRef(null); // Mouse-tracking glow blob. React.useEffect(() => { const el = heroRef.current; const g = glowRef.current; if (!el || !g) return; const on = (e) => { const r = el.getBoundingClientRect(); g.style.left = `${e.clientX - r.left}px`; g.style.top = `${e.clientY - r.top}px`; }; el.addEventListener('mousemove', on); return () => el.removeEventListener('mousemove', on); }, []); // The default headline is composed of pieces so we can italicize / rotate parts. // If the user retypes it via a Tweak we render it as plain text. const isCustom = headline && headline.trim().length > 0; return (
Software design & development studio

{isCustom ? headline : <> We
software that
earns its weight. }

2build is a product studio crafting mobile apps, web platforms and on-chain products. We design, engineer and ship — end to end, with taste.

Start a project → See what we do
{layout === 'split' && }
); } // Decorative ornament for split layout — an oversized "2" that hints at the logo. function HeroOrnament({ logoVariant }) { return (
2 {/* construction marks */} {/* annotated dimension */} 2BUILD · MARK · 01
); } // ── Marquee strip ────────────────────────────────────────────────── function Marquee() { const items = [ 'Design', 'Build', 'Ship', 'Repeat']; const row =
{items.map((it, i) => {it} )}
; return ( ); } // ── Services ─────────────────────────────────────────────────────── const SERVICES = [ { num: '01', name: 'UX & Product Design', desc: 'Research, flows, wireframes, hi-fi mocks and design systems. We start with the problem and design until the solution is obvious.', tags: ['Research', 'Systems', 'Prototyping', 'Brand'], span: 8, viz: 'design' }, { num: '02', name: 'React Native', desc: 'Native-feeling iOS and Android apps from one codebase — Expo, custom modules, App Store delivery.', tags: ['Expo', 'iOS', 'Android'], span: 4, viz: 'rn' }, { num: '03', name: 'Flutter', desc: 'When the design demands its own physics — Flutter\'s canvas gives us a clean slate.', tags: ['Dart', 'Skia', 'Custom UI'], span: 4, viz: 'flutter' }, { num: '04', name: 'Next.js', desc: 'Production-grade web — App Router, server components, edge runtimes, the whole stack. Built to be fast and stay fast.', tags: ['App Router', 'RSC', 'Edge', 'Vercel'], span: 8, viz: 'next' }, { num: '05', name: 'Web3', desc: 'Smart contracts, wallet flows, and frontends that don\'t feel like crypto. We make on-chain feel like product.', tags: ['EVM', 'Solidity', 'Wagmi', 'Viem'], span: 12, viz: 'web3' }]; function ServiceViz({ kind }) { switch (kind) { case 'design': return ( ); case 'rn': return ( ); case 'flutter': return ( ); case 'next': return ( ); case 'web3': return ( ); } return null; } function Services() { return (
What we do · 02

Generalists, with
conviction.

We're a small, opinionated team that handles design and engineering under one roof — so the brief, the pixels and the production code never drift apart.

{SERVICES.map((s, i) =>
— {s.num}

{s.name}

{s.desc}

)}
); } // ── Process ──────────────────────────────────────────────────────── const PROCESS = [ { num: '01', name: 'Frame', desc: 'We start by getting embarrassingly specific about who you\'re for, what success looks like, and what we\'re not going to build.' }, { num: '02', name: 'Sketch', desc: 'Cheap, ugly, fast. We move through ten directions before getting precious about any one of them.' }, { num: '03', name: 'Design', desc: 'High-fidelity flows in a shared file. You poke at it daily; we iterate until it feels right.' }, { num: '04', name: 'Build', desc: 'Production code on the same rails as the design. No throwaway prototypes, no hand-off cliff.' }, { num: '05', name: 'Ship', desc: 'Launch, measure, sharpen. We stick around past the ribbon-cutting.' }]; function Process() { return (
How we work · 03

Five steps,
no surprises.

Every engagement runs the same shape. We tell you where we are, what's next, and what we'd cut if we had to cut something today.

{PROCESS.map((p, i) =>
{p.num}
{p.name}
{p.desc}
)}
); } // ── Products ─────────────────────────────────────────────────────── // TopSet brand: "Top" + "Set" (accent) + small "+" (accent), JetBrains Mono 800. function TopSetWordmark({ size = 56 }) { return ( TopSet + ); } function Products() { return (
From our shelf · 04

Products we
stand behind.

Alongside client work, we build and run our own. They keep us honest — every problem you'd find in a client codebase, we feel it first.

Earn the right to add weight.

The strength training journal we wanted to use. Plan your sets, track every rep, watch your numbers climb. Native iOS, Android and Apple Watch.

iOS · Android · watchOS · Wear OS
Visit topset.2build.me ↗