AZ
Back to constellation
Tools / LabsPublished

Fivestick

A single-page marketing site for an AI-automation consultancy — static content, no backend, one interactive island, full SEO via static Next metadata (a standard server build, not a static export).

Next.js 16TypeScriptTailwind v4 (CSS-first)@base-ui/reactlucide-react
Read the write-up

Overview

What it is

Fivestick is the marketing/landing site for an AI-automation consultancy that "audits a business's workflows and builds bespoke AI agents." It's a single-page Next.js 16 site whose primary CTA drives visitors to WhatsApp or a free 30-minute audit call — one page.tsx composing Navbar → Hero, Problem, Process, WhatWeBuild, WhyBespoke, CtaRepeat, Founder → Footer, where the only render-time computation is the footer copyright year.

Static content — but not a static export (the honest distinction)

The site is fully static in contentno backend at all: no src/app/api, no use server server actions, no database, no auth, and no external fetch in src/. But next.config.ts carries zero custom options:

import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  /* config options here */
};
export default nextConfig;

Crucially it does not set output: 'export' — so the build is a standard Next.js server bundle in .next, not an exported /out static site; deploy assumes a Node runtime (or Vercel). The case study says "static content / no backend," not "static export."

There is exactly one client component: workflow-animation.tsx, a dependency-free SVG <animateMotion> + CSS-keyframe animation. Everything else is a React Server Component rendered at build. Conversions are offloaded entirely to a third party (a wa.me link), so there's no form handler and no lead store to secure — removing an entire category of runtime failure by not having a runtime to fail.

SEO and styling

Full crawler discoverability is achieved purely with static Next metadata conventions — sitemap.ts, robots.ts (an explicit AI-crawler allow-list), Open Graph / Twitter / apple-icon image routes, manifest.ts, and ProfessionalService JSON-LD in the layout. Styling is Tailwind v4, CSS-first: no tailwind.config.* at all; globals.css uses @import "tailwindcss" plus an @theme inline block of brand tokens and tw-animate-css. An honest finding — shadcn was scaffolded (there's a components.json with style: "base-nova", base UI via @base-ui/react, not Radix) but no src/components/ui/ directory exists and cn/Radix are never imported: the page uses hand-written Tailwind components. There is no test script and no test runner, which for a static brochure is a defensible scope, not an omission, and there are no .env* files — nothing to leak.

Why it's here

It's the "right amount of engineering" counterpoint in the constellation: a landing page's job is narrow — load fast, read clearly, convert — and reaching for a CMS or a heavy app shell would be over-building. The interesting decision is knowing where to stop.

Related write-ups