BugRadar marketing site
Next.js 14 (App Router) + TypeScript + Tailwind CSS.
Structure
app/
layout.tsx shared nav + footer + fonts
page.tsx Home — hero, problem, how it works, live demo
services/page.tsx Services — what we monitor, alerts, dashboard preview,
comparison, secondary capabilities, technology
about/page.tsx About — team, industry fit, business impact
contact/page.tsx Contact — form + direct email
api/contact/route.ts form submission endpoint (see TODO below)
components/ shared UI: Nav, Footer, RadarScope, HowItWorksTimeline,
DemoConsole, VitalsRings, CompareTable, ContactForm,
SectionHeading
lib/content.ts all page copy and data in one place — edit here first
Run it
npm install
npm run dev
Then open http://localhost:3000.
Before this goes live — known placeholders
- Contact form doesn't send anywhere yet.
app/api/contact/route.ts only
logs submissions to the server console. Wire it to a real provider (Resend,
SendGrid, a CRM webhook) before relying on it, and add basic spam protection
if the form is public.
- Contact email is a placeholder (
[email protected] in lib/content.ts)
— swap it once the domain and inbox exist.
- Dashboard Preview numbers are illustrative, not real telemetry. Labeled
as a "sample view" in the copy — replace with real data once there's a
dashboard to pull from.
- Team section doesn't name a current employer on purpose, since this is
a side project. Add it explicitly if you want it named.
- No pricing page — the brief marks pricing as not finalized, so it's
left out rather than invented.
Design tokens
Colors, fonts and animation keyframes live in tailwind.config.ts. The
palette keeps the marketing pages light and reserves the dark "instrument
panel" look (panel, panel-2, panel-line colors) for the radar scope and
live-demo console specifically — it's meant to read as a product screenshot,
not the whole site's theme.
