Forstrak — Modern Corporate Business Next.js Template

Forstrak is a free, production-ready Next.js 14 corporate business template for strategy firms, boutique consultancies, engineering studios, B2B service brands, and operating partnerships. Cool fog-white surface (#F4F5F7) with an electric cobalt primary (#1B4DFF) and a warm clay accent (#F26B3A), an annual-report "index spread" hero layout, and a clean three-font system — Bricolage Grotesque (display) + Inter Tight (body) + JetBrains Mono (eyebrows). App Router, TypeScript, Tailwind CSS, fully static-exportable. No CMS, no auth, no API dependencies.

What makes Forstrak different

Most corporate templates open with a centered hero, a gradient photograph, and three feature cards. Forstrak opens with an asymmetric index spread — left column is a giant numbered service index (01 Strategy / 02 Engineering / 03 Operations / 04 Talent) in display type that hovers black-on-paper, right column is a sticky portrait card with the studio address and a single CTA. It reads more like the cover of an annual report than a SaaS landing page — deliberately, for senior-buyer audiences who don't need to be sold.

Pages included (5)

• Home — index-spread hero · capability ribbon · client trust strip · three rooms pillar · dark stats slab · case spotlight · manifesto · 4-step process · testimonial · CTA banner
• Services — 4 alternating room rows with photo + deliverables, two-tier pricing block
• Work — bento grid: one wide hero file + 5 portrait file cards
• About — asymmetric hero · timeline · 4-partner team grid
• Contact — 6-field brief form + 4 office cards

Tech

• Next.js 14 App Router + Static Export (output: 'export')
• TypeScript (strict)
• Tailwind CSS 3.4 with a custom @layer components layer for tokens
• next/image with images.unoptimized for static hosting
• Google Fonts: Bricolage Grotesque, Inter Tight, JetBrains Mono
• Real Unsplash photography linked directly — replace with your own assets before launch
• Reduced-motion friendly, keyboard accessible, semantic landmarks, skip-link
• Responsive at 375 / 768 / 1024 / 1440

Run locally

npm install
npm run dev          # http://localhost:3210
npm run build        # static export to ./out

Design system

All tokens live in tailwind.config.ts (theme.extend.colors + display font sizes) and app/globals.css (CSS custom properties + component classes like .btn, .eyebrow, .tile, .dot-grid). Recolor the whole template by editing the color tokens and matching :root variables.

License

Free for personal and commercial projects. Attribution appreciated but not required. Photography is linked from Unsplash; replace before production deployment.