UI07 Ember — Marketing Empire UI Kit (Next.js)

A premium marketing-platform UI kit — email, automation and attribution in one console. Build audiences, A/B every send, track deliverability and prove the revenue, all in a beautifully unified, dark-first workspace.

What's Inside

• React Three Fiber FogSphere hero — a coral-tinted volumetric orb driven by @react-three/fiber + @react-three/drei. Brand colour is read from the live DOM at runtime (useBrandColors()), so a re-hue follows globals.css with no shader edit. Reduced-motion aware.
• 39 page files — 38 pre-rendered static routes plus one dynamic blog/[slug] template. Covers the landing page, the full marketing site (features, solutions, pricing, enterprise, docs, security, case studies, careers, about, contact, status, changelog, blog), authentication (login, register, forgot-password), a 15-page marketing dashboard, and the UK / EU / US legal scaffold.
• Marketing dashboard — overview plus campaigns, analytics, audiences, automations, A/B testing, content calendar, deliverability, email builder, integrations, reports, SEO, social media, settings, and an empty-state pattern.
• 3-tier OKLCH colour token architecture (hue 22° coral/red), Cabinet Grotesk (display, self-hosted) + Geist (body).
• Animation system — GSAP + Lenis for scroll, Motion (motion/react) for page transitions and interactive UI, Recharts for dashboard data viz.
• Accessibility — skip link, focus-visible rings, ARIA labels, generous touch targets, prefers-reduced-motion respected throughout.
• Static export — output: 'export', unoptimised images, trailingSlash: true. Deploy the out/ directory to any static host.

Quick Start

# Bootstrap pnpm (the kit pins `packageManager` so Corepack picks the right version)
corepack enable

pnpm install
pnpm dev

Open http://localhost:3000.

See INSTALLATION.md for full setup instructions, including the manual npm i -g pnpm fallback if Corepack isn't available.

Network note: pnpm build downloads the Geist body font from Google Fonts (fonts.googleapis.com, fonts.gstatic.com) at build time via next/font/google. The Cabinet Grotesk display font is self-hosted (next/font/local, src/app/fonts/) and needs no network access. Restricted/air-gapped CI environments should allow outbound HTTPS to the Google Fonts hosts, or switch Geist to a self-hosted file — see INSTALLATION.md § Build for Production.

Customisation

See CUSTOMIZATION.md for the rebranding checklist and the 3-tier token architecture guide.

Demo Content

WARNING: Files carrying a DEMO_CONTENT marker contain placeholder text, fabricated metrics, fictional testimonials, or demo-only behaviour (for example consent-gated analytics). The marker appears in several comment forms (/* DEMO_CONTENT */, // DEMO_CONTENT, JSX {/* … DEMO_CONTENT */}) and not every file with demo data carries one, so treat DEMO_CONTENT.md as the authoritative inventory of what to replace before publishing.

Documentation

Tech Stack

Project Structure

src/
├── app/                    # Next.js App Router pages (39 page files)
│   ├── page.tsx            # Landing page
│   ├── about/              # Marketing pages
│   ├── features/           # …features, solutions, pricing, enterprise,
│   ├── solutions/          #   docs, security, case-studies, careers,
│   ├── pricing/            #   contact, status, changelog
│   ├── blog/               # Blog listing + [slug] dynamic template
│   ├── login/              # Auth (login, register, forgot-password)
│   ├── dashboard/          # 15-page marketing dashboard
│   ├── privacy/            # Legal scaffold (privacy, terms,
│   ├── cookie-policy/      #   cookie-policy, accessibility,
│   ├── dmca/               #   dmca, do-not-sell)
│   └── fonts/              # Self-hosted Cabinet Grotesk woff2
├── components/
│   ├── analytics/          # Consent-gated GA loader
│   ├── dashboard/          # Dashboard sidebar, topbar, widgets
│   ├── layout/             # Site header, footer
│   ├── sections/           # Landing-page sections (hero, features, …)
│   └── ui/                 # Base UI components (shadcn/ui + cookie consent)
├── config/                 # site.ts — single source of truth for brand
└── lib/                    # GSAP/Lenis setup, animation presets, tokens, utilities

Build

pnpm build        # static export → out/
pnpm typecheck    # TypeScript strict check
pnpm lint         # ESLint

Deployment

The out/ directory is a fully static site (output: 'export'). Deploy by uploading it to any static host — Vercel, Netlify, Cloudflare Pages, S3 + CloudFront, GitHub Pages.

Vercel (recommended): push the repo and import it, or run vercel --prod. Add the security headers from INSTALLATION.md § Security Headers in your project settings (or a vercel.json).

Licence

Commercial licence — see LICENCE.md. One licence per production project.

Template Empire