Schol-Bud

A complete product, not a template — from visual identity to security headers and GDPR consents. Thirteen static pages in three layers of the purchase decision: brand, product, decision.

The scope was closed so that nothing was left “to add later”: the site works, measures, indexes and accepts enquiries from day one.

1. 01Visual identity and design system — palette, typography, components
2. 0213 static pages in three layers: brand → product → decision
3. 03Six product cards with full specifications (Uw, RC class, acoustics, warranty)
4. 04Three conversion paths — phone, quote form, contact form
5. 05A catalogue of eight manufacturers with a category filter and PDF catalogue links
6. 06Technical and local SEO — JSON-LD, sitemap, robots, OG
7. 07Cookie consents, GA4 with Consent Mode v2 and a privacy policy
8. 08Production audit: Lighthouse mobile and desktop, WCAG contrast, cross-browser

The whole site is static HTML generated at build time. No database, no CMS, no plugins — content lives in seven TypeScript files, every change is a commit and an automatic redeploy. Twenty-one routes are generated statically; only two form endpoints and the Open Graph image are dynamic.

Next.js 15 with the App Router, React 19, TypeScript in strict mode, Tailwind without a component library. One motion system for the whole site: 200 ms for colours, 300 ms ease-out for link underlines and card lift. The hero entrance is animated by GSAP through gsap.matchMedia, so with prefers-reduced-motion the animation never starts.

The window model in the hero is a DRACO-compressed glTF — 7 kB of geometry rendered by React Three Fiber. The render loop stops when the section leaves the screen, so the tab doesn't burn frames in the background for the lifetime of the page.

Seventy tests in nine suites (Jest + Testing Library) cover what can realistically break: quote form validation, the manufacturer filter, the GA4 pre-consent block, navigation and content data consistency. Finally a production audit with a re-measurement after every fix.

Static Next.js instead of WordPress: zero plugins to update, no admin panel as an attack vector, hosting with no server or database, TTFB from a CDN. The code belongs to the client and can be moved anywhere.

The Fraunces serif with an optical-size axis instead of a corporate sans — large headings are sharper, small ones more readable. The 3D scene renders only from 1024 px up: on a phone it cost ~530 ms of TBT, and conditional rendering means the three.js chunk never downloads at all.

Technical parameters on every product card — Uw, burglary-resistance class, acoustics, warranty — are exactly the numbers the client pastes into a comparison sheet. The quote form has three fields, because every extra one lowers conversion and dimensions have to be measured on site anyway. A separate page for each of the six categories: phrases like “aluminium windows Żnin” face much weaker competition than “windows” alone.

Underneath, the layer you don't see: a honeypot and request limits on the forms, server-side validation, Content-Security-Policy with an explicit source list, HSTS with preload. GA4 downloads no script before consent — alongside it runs Vercel's cookieless analytics as a baseline.