/* global React */ const { useState, useEffect, useRef } = React; // ---------- Nav ---------- function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { label: 'Services', href: '#features' }, { label: 'Process', href: '#process' }, { label: 'Pricing', href: '#calculator-section' }, { label: 'Work', href: '#testimonials' }, { label: 'FAQ', href: '#faq' }, ]; return ( ); } // ---------- Hero ---------- function Hero() { return (
{/* Background grid + glow */}
{/* Eyebrow chip */}
New | Estimate any project in under 60 seconds
{/* Headline */}

Premium websites,
without the premium price.

{/* Sub */}

We design and build conversion-focused websites for ambitious founders, in weeks, not months — at a fraction of what agencies charge.

{/* CTAs */}
Calculate your project See recent work
{/* Stats */}
{[ { k: '120+', v: 'Websites shipped' }, { k: '14 days', v: 'Average delivery' }, { k: '4.9 / 5', v: 'Client satisfaction' }, { k: '$3.4M', v: 'Saved vs agencies' }, ].map((s, i) => (
{s.k}
{s.v}
))}
{/* Logo marquee */}
Trusted by founders & teams at
{[...Array(2)].map((_, dup) => (
{['◆ Northrift', 'Lumenly', '✦ Paperloop', 'KAYO', 'Modula', '◐ Quartzo', 'Bramble', 'Veld&Co'].map((name) => ( {name} ))}
))}
); } // ---------- Features ---------- function Features() { const items = [ { icon: ( ), title: 'Pixel-perfect design', copy: 'Hand-crafted layouts that look intentional, not templated. Every element placed with reason.', }, { icon: ( ), title: 'Lightning performance', copy: 'Sub-second loads, perfect Lighthouse scores, optimized for Core Web Vitals out of the gate.', }, { icon: ( ), title: 'Built to convert', copy: 'Every section maps to a funnel goal. We measure scroll depth, clicks, and form starts from day one.', }, { icon: ( ), title: 'SEO from day one', copy: 'Semantic markup, structured data, fast LCP, real keyword research — not SEO bolted on later.', }, { icon: ( ), title: 'CMS your team can run', copy: 'Update copy, swap images, ship blog posts without us. No dev tickets, no waiting on changes.', }, { icon: ( ), title: 'Weeks, not months', copy: 'Two-week sprints with daily Loom updates. Most projects ship in under 30 days.', }, ]; return (
/ What you get

Everything an agency promises.
Without the bloat.

We strip the deliverables list down to what actually moves the needle — and then obsess over those things.

{items.map((item, i) => (
{item.icon}
{String(i + 1).padStart(2, '0')}

{item.title}

{item.copy}

))}
); } // ---------- Process ---------- function Process() { const steps = [ { n: '01', title: 'Discovery call', copy: 'A 30-min call to understand your business, goals and current site. You leave with a clear plan and your fixed quote.', meta: 'Day 0', }, { n: '02', title: 'Design sprint', copy: 'We design every key screen in Figma. Two rounds of revisions. You sign off — no surprises later.', meta: 'Day 1–7', }, { n: '03', title: 'Build & iterate', copy: 'Pixel-perfect build in Webflow or Next.js. Daily Loom updates. Real content, not lorem ipsum.', meta: 'Day 7–21', }, { n: '04', title: 'Launch & support', copy: 'We push live, transfer ownership, train your team, and stick around for two weeks of free tuning.', meta: 'Day 21–30', }, ]; return (
/ How it works

From kickoff to live site, a calm 30-day rhythm.

{/* Connector line */}
{steps.map((s, i) => (
{/* dot */}
{s.n} {s.meta}

{s.title}

{s.copy}

))}
); } // ---------- Testimonials ---------- function Testimonials() { const items = [ { quote: "We'd been quoted $42k by two agencies for the same scope. Webfluin shipped it in 17 days for under five. The site outperforms our old one on every metric we track.", name: 'Mira Aldenhoven', role: 'Founder, Northrift Coffee', stat: '+38% conversion', }, { quote: "What sold me was the daily Looms. I always knew where we were. No 2am Slack panics, no surprises. They actually do what they say they will.", name: 'Daniel Park', role: 'Head of Growth, Lumenly', stat: 'Shipped in 21 days', }, { quote: "I'm a non-designer founder and they made me feel taken care of without dumbing anything down. The Figma file they handed back is genuinely gorgeous.", name: 'Sasha Kovač', role: 'CEO, Paperloop', stat: '99 Lighthouse', }, { quote: "We tried a freelancer twice before. Both times it dragged for months and looked fine but not great. Webfluin nailed the brand on the first design round.", name: 'Theo Renaud', role: 'Co-founder, KAYO', stat: '4.9 / 5 NPS', }, ]; return (
/ Social proof

120+ founders have built
with us already.

{[...Array(5)].map((_, i) => ( ))}
4.9 / 5 · 84 verified reviews
{items.map((t, i) => (
"{t.quote}"
{t.name.split(' ').map(n => n[0]).join('').slice(0,2)}
{t.name}
{t.role}
{t.stat}
))}
); } // ---------- FAQ ---------- function FAQItem({ q, a, open, onClick }) { return (

{a}

); } function FAQ() { const items = [ { q: 'How long does a typical project take?', a: 'Most projects ship in 14 to 30 days from kickoff. A landing page usually takes two weeks; a full multi-page site is closer to four. We give you a fixed delivery date in your quote and stick to it.', }, { q: 'What if I need changes after we sign off on design?', a: 'You get two full revision rounds baked into every project. Small tweaks during build are always on the house. Bigger scope changes are quoted upfront — never billed by surprise.', }, { q: 'Do you build on Webflow, or custom code?', a: 'Both. Webflow for marketing sites that your team needs to run independently. Next.js when you need custom logic, dashboards, or deep integrations. We help you pick during the discovery call.', }, { q: 'Do you offer ongoing support after launch?', a: 'Yes — two weeks of free tuning are included with every project. After that, we offer optional monthly care plans starting at $290/mo for updates, performance monitoring and small changes.', }, { q: 'What about hosting and domains?', a: 'You own everything. We help you set up hosting on Webflow, Vercel or wherever you prefer, point your domain, and hand the keys over. No vendor lock-in, no hidden fees.', }, { q: 'Can you work with our existing brand and content?', a: 'Absolutely. If you have a brand book and ready copy, we move faster. If you don\'t, we can help shape both — or recommend a copywriter we trust.', }, { q: 'How do payments work?', a: '50% to kick off, 50% on launch. No hourly billing, no scope-creep invoices. Bank transfer, card or Stripe Invoice — whatever\'s easiest for you.', }, ]; const [openIdx, setOpenIdx] = useState(0); return (
/ FAQ

Questions, answered.

Can't find what you're looking for? Drop us a note — we usually reply within a few hours.

Talk to a human
{items.map((it, i) => ( setOpenIdx(openIdx === i ? -1 : i)} /> ))}
); } // ---------- Final CTA ---------- function FinalCTA() { return (
{/* glow */}
{/* grid */}
Booking projects for June 2026

Ready to ship the website
your company deserves?

Two free strategy spots open this month. Book in for 30 minutes — we'll leave you with a plan and a fixed quote, whether you hire us or not.

No commitment · 30-min call · Plan delivered same week
); } // ---------- Footer ---------- function Footer() { const cols = [ { title: 'Studio', links: [ { label: 'Services', href: '#features' }, { label: 'Process', href: '#process' }, { label: 'Pricing', href: '#calculator-section' }, { label: 'Case studies', href: '#testimonials' }, ], }, { title: 'Company', links: [ { label: 'About', href: '#' }, { label: 'Journal', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Contact', href: '#contact' }, ], }, { title: 'Resources', links: [ { label: 'Free brand audit', href: '#' }, { label: 'Webflow templates', href: '#' }, { label: 'Newsletter', href: '#' }, { label: 'Refer & earn', href: '#' }, ], }, { title: 'Legal', links: [ { label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'Cookies', href: '#' }, { label: 'DPA', href: '#' }, ], }, ]; return ( ); } // ---------- App ---------- function App() { // Scroll-reveal observer useEffect(() => { const els = document.querySelectorAll('.reveal'); if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { els.forEach(el => el.classList.add('is-visible')); return; } const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); io.unobserve(entry.target); } }); }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }); const { Calculator } = window; return ( <>