Marketing Site
A hyper-optimised marketing website for a full-spectrum business advisory firm, engineered with a strict Frost Glassmorphism design system to project institutional credibility and precision.
01 · Stack
| Layer | Technologies | Key libraries |
|---|---|---|
| Frontend Framework |
|
|
| UI & Styling |
|
|
| Motion & Animation |
| · |
| Backend / Runtime |
|
|
| Integrations & APIs |
|
|
| Hosting & Infrastructure |
| · |
A disciplined "Quiet Luxury" aesthetic restricted to three hues · porcelain white (#FFFFFF), navy (#081B42), and gold (#C89B48). The stock Tailwind palette was cleared with --color-*: initial so an off-brand colour cannot be typed by accident. Typography pairs Fraunces for commanding headings with Inter for body.
A strict card-based atomic system: exactly nine card variants (C1–C9) cover every content need on the site. Content is fully decoupled from presentation · all copy lives in src/content/, so the site updates through data objects without a React component being touched.
The signature frost effect is specified rather than eyeballed: backdrop blurs from 16px to 32px, backdrop saturation between 150% and 180%, and 1px refractive inner borders. Cards float at defined elevations (elev-1 through elev-4) above static large-radius radial blooms and floating orbs that simulate physical refraction.
Built to WCAG 2.1 AA. Motion is used sparingly, as a whisper · fades and soft lifts only. useReducedMotion() collapses every animation, and a <noscript> fallback forces scroll-reveals to render visibly when JavaScript is unavailable, so the content is never hidden behind an animation that will not run.
Static site generation with serverless mutations. Every route is pre-rendered to static HTML at build time; only form submission touches a server.
No database. A content-as-data pattern keeps services, insights, and leadership profiles as strongly typed TypeScript arrays in src/content/, which gives build-time type safety over the content itself and eliminates runtime query latency entirely.
Contact and application forms run through Server Actions, with client and server sharing one zod schema. A silent off-screen honeypot traps bots without adding friction for high-value prospects who should never see a challenge.
Form mutations dispatch stylised notification emails to the advisory team through Resend. In development without API keys the Server Actions fall back to structured console logging, so the whole UX flow is testable end to end without consuming third-party quota.
04 · Features
A routing engine that provisions an entire service sub-page from a single entry appended to the services.ts content array · instantly updating the homepage grid, the navigation mega-panel, and the footer with no further edits.
Third-party map embeds were rejected because a Google Maps iframe would break the navy-and-gold palette on contact. A bespoke hand-drawn monochrome SVG map replaced it, and every system icon is drawn on a 24px grid at 1.5px stroke weight for absolute consistency.
05 · Standout engineering
Every project has two problems that determined whether it worked. These were theirs.
A Tailwind v4 CSS-first architecture in which the design tokens · radii, shadow elevations, frost recipes · are the absolute source of truth rather than a description of it. The 1px gold hairline rules and deep glass shading read as tactile and expensive precisely because nothing can deviate from the token set.
React components never author copy. Swapping a case study, an article, or a leadership bio is strictly a data edit, which removes the entire class of UI regressions that normally accompanies routine content marketing updates.
06 · Engineering practice
├── public/ # Static assets and fonts ├── src/ │ ├── app/ # App Router, layouts, Server Actions │ │ └── globals.css # The design system: tokens, glass recipes │ ├── components/ │ │ ├── cards/ # Card variants C1-C9 │ │ ├── layout/ # Nav, footer, page shell │ │ └── primitives/ # Buttons, FrostedFrames │ ├── content/ # The content database (typed arrays) │ └── lib/ # Utilities, zod schemas, motion configs ├── .env.example └── next.config.ts
Strictly typed via tsc --noEmit, with ESLint 9 configured to enforce zero unused imports and strict hooks compliance.
Every editable field is catalogued against its exact file and location, so handoff is a verification pass rather than a hunt through the tree for anything still unset.
07 · Impact
The full six-page architecture is pre-rendered to static HTML, making time to first byte and largest contentful paint close to instantaneous · which is what carries the short judgement window a high-net-worth prospect gives an unfamiliar advisory firm.
The headless content structure lets the firm scale its Insights and Industries thought-leadership pillar indefinitely for SEO without a developer building new layouts, and the static output absorbs traffic spikes with no database bottleneck or scaling cost.
08 · Interface
Contact
The best fit is a business that needs a system to hold up under real use · not a template with your logo on it.
