Skip to main content
Back to the shipping log
Shipping Log7 min read

Anatomy of a 14-day marketing site build

How we shipped hayaiti.com in 14 calendar days, while preparing the productized SKU catalogue. The schedule, the tools, what broke.

HTThe Hayaiti team
#nextjs#shipping#process

Built on tools you trust

Vercel
Stripe
Cloudflare
GitHub
Linear
Slack
Resend
Sentry
Postgres
PostHog
Loom
Notion

← swipe · 12 tools →

What we shipped

Hayaiti's marketing site (the one you're on) was built in 14 calendar days, by 2 people, while preparing the productized SKU catalogue.

This post is the breakdown.

Day 1-2: Spec and design system

  • Defined SKUs and pricing in a single skus.ts data file
  • Designed brand: orange accent, slate neutrals, Outfit display font, Geist body
  • Wrote the IA: home, services, work, about, blog, resources, audit, pricing, contact
  • Set up Next.js 16, Tailwind v4, Framer Motion, TypeScript strict

Day 3-5: Home and pricing

  • Home: hero, services grid, social proof, testimonials, CTA
  • Pricing: full SKU table, FAQ, comparison vs traditional agencies
  • Built the Section and Button primitives once, reused everywhere
  • Lighthouse 95+ on first pass

Day 6-9: Service pages and audit

  • 4 service pages (web, software, iOS, security) with consistent structure: hero, what's included, SKUs, methodology, testimonials
  • Audit page with the form for the free report
  • Set up the audit form to email us a kickoff brief

Day 10-12: About, work, content surfaces

  • About: mission, principles, founders (placeholders), how-we-work
  • Work: case studies (we have 3 from prior client work — clearly attributed)
  • Blog and resources scaffolding (this post is part of that)

Day 13-14: Polish, perf, ship

  • Mobile audit on every page
  • Open Graph images for every route
  • 404 and error pages
  • Analytics with consent gating
  • Final accessibility pass: keyboard nav, focus rings, alt text
  • Push to production

What broke

  • Framer Motion variants typing tripped us up twice on Variants types
  • Tailwind v4 @theme directive changed our color naming convention
  • One Lighthouse regression from a misplaced <Image priority>

What we'd do differently

  • Build the design tokens in CSS first, not Tailwind config — Tailwind v4 makes this cleaner
  • Set up Storybook on day 1 — would have saved 3 hours of one-off visual debugging on day 11
  • Write the shipping log post *while* shipping, not after

Why post this

Because shipping is a skill, and the only honest evidence we can give that we have it is the work itself. This site was the first piece. The second is the iOS apps and software platforms we'll publish as case studies as soon as the clients clear them.

If you want a marketing site like this, the SKU is here. Same approach. Calendar days. Fixed price. Source code in your repo on day one.

HT

The Hayaiti team

Hayaiti

Hayaiti is a productized engineering studio. We ship web, software, iOS, and cybersecurity work on fixed prices and calendar-day timelines. The team takes turns on the shipping log.

More from the shipping log

Want help shipping this?

We turn posts like this into production code. Fixed price. Calendar-day timelines. Source code in your repo on day one.