Skip to content

ARCHITECTURE.md

Latest commit

 

History

History
151 lines (128 loc) · 7.45 KB

ARCHITECTURE.md

File metadata and controls

151 lines (128 loc) · 7.45 KB

Axan — Codebase Map

One-page index of the whole app. Read this first. It tells you the exact file to edit for any change so you never have to grep the whole codebase. Marketing site for Axan: a productized agency selling 3 direct-channel products (Dine / Stay / Realty) to Indian SMBs.

Stack: Next.js 14 (App Router) · TypeScript · Tailwind · Framer Motion · Neon Postgres + Drizzle · Resend (email) · Sanity (optional, runs on fallback data).

Run: npm run dev (3000) · npm run build · npm run lint

⚡ WHERE DO I CHANGE…? (start here)

I want to change… Edit this file
The 3 products (name, slug, promise, WhatsApp text) — single source of truth lib/sectors.ts
WhatsApp number / wa.me link / support email lib/contact.ts
₹ price formatting lib/format.ts
Homepage section order app/page.tsx
Homepage hero (headline, stats, particle bg) components/sections/Hero.tsx
"What we do" plain-English explainer components/sections/WhatWeDo.tsx
Homepage product picker / "your leak" components/sections/DivisionsGrid.tsx
Homepage 3-step process components/sections/HowItWorks.tsx
Homepage trust marquee stats components/sections/TrustBar.tsx
Homepage final CTA / lead form block components/sections/BottomCTA.tsx
Restaurant page copy & sections app/(sectors)/restaurants/RestaurantsContent.tsx
Hotel page copy & sections app/(sectors)/hotels/HotelsContent.tsx
Realty page copy & sections app/(sectors)/real-estate/RealEstateContent.tsx
Pricing tiers shown on a sector page that sector's *Content.tsx → <PremiumPricing> props
Sector pricing card layout components/sectors/PremiumPricing.tsx
Sector FAQ accordion behaviour components/sectors/FAQ.tsx
The interactive WhatsApp demos app/(sectors)/<sector>/demo/page.tsx
Restaurant demo menu / data app/(sectors)/restaurants/demo/_components/data.ts
Lead capture form (steps, fields) app/book/BookForm.tsx
What happens when a lead submits app/api/book/route.ts + app/api/leads/route.ts
Lead notification / auto-reply emails lib/resend.ts
DB tables (bookings, leads, clients) lib/schema.ts
Nav links / dropdown components/layout/Navbar.tsx
Footer links components/layout/Footer.tsx
Sticky WhatsApp button components/layout/WhatsAppPill.tsx
Global page wrapper (nav+footer, route guards) components/layout/SiteShell.tsx
Site-wide <head>, fonts, metadata app/layout.tsx
Colors / fonts / design tokens tailwind.config.ts + app/globals.css
SEO: sitemap / robots / JSON-LD app/sitemap.ts · app/robots.ts · components/seo/JsonLd.tsx
"Benefits by sector" page data sanity/lib/fallback-data.ts
Admin panel (clients, reports, creatives) app/admin/**
Ad-campaign generator (admin tool) lib/adTemplates.ts
404 page app/not-found.tsx
Demo-bot link target (Dine "See demo") env NEXT_PUBLIC_DINE_DEMO_URL (used in RestaurantsContent.tsx)

Directory map

app/
  layout.tsx              Root: fonts, <head>, SiteShell, analytics
  page.tsx                HOMEPAGE — composes components/sections/* in order
  globals.css             Tailwind base + design tokens + keyframes
  not-found.tsx           Branded 404
  sitemap.ts robots.ts    SEO
  (sectors)/              The 3 product pages (route group, no URL segment)
    restaurants/  hotels/  real-estate/
      page.tsx            Thin: <metadata> + JSON-LD + imports *Content
      *Content.tsx        ALL the page copy/sections live here
      demo/page.tsx       Interactive split-screen WhatsApp/booking demo
  book/                   Lead form  (BookForm.tsx = client, page.tsx = wrapper)
  benefits/               "How AI helps your sector" (reads sanity fallback)
  privacy/ terms/         Legal
  admin/                  Internal panel (clients, reports, creatives, login)
  api/
    book/ leads/          Public lead intake → DB + email
    admin/                Admin CRUD (clients, creatives, reports, login)

components/
  sections/   Homepage-only blocks (Hero, WhatWeDo, DivisionsGrid, TheGap,
              GrowthVision, TrustBar, HowItWorks, BottomCTA)
  sectors/    Reusable blocks for the 3 product pages (CinematicHero,
              CommissionMath, ScreenCycle, AgencyVs, PremiumPricing, CaseStudy,
              RiskReversal, FAQ, DemoBanner, SectorCTA, TheGap)
  layout/     Navbar, Footer, SiteShell, WhatsAppPill
  ui/         Primitives: Button, SectionHeader, GoldGlow, Loader, PageTransition
  seo/        JsonLd  ·  analytics/  MetaPixel, Hotjar

lib/
  sectors.ts      ★ 3-product source of truth (drives nav, footer, forms, CTAs)
  contact.ts      ★ WhatsApp number + waLink() + support email
  format.ts       ₹ formatting helpers
  db.ts           Neon + Drizzle client
  schema.ts       DB tables
  resend.ts       Transactional email (lead notify + auto-reply)
  adTemplates.ts  Meta-ads campaign generator (admin)

sanity/
  lib/fallback-data.ts   Sector "benefits" content (CMS-free fallback — the
                         site renders from THIS, not a live CMS, by default)
  lib/fetch.ts types.ts  Read helpers + types
  schemas/               Sanity schema defs (only used if CMS is wired)

Single sources of truth (don't hardcode — import these)

  • Products → lib/sectors.ts SECTORS[] + SECTOR_BY_SLUG. Navbar, Footer, BookForm sector dropdown, and homepage CTAs all read from it. Add/rename a product here, nowhere else.
  • Contact → lib/contact.ts: WA_NUMBER, waLink(msg), SUPPORT_EMAIL.
  • Money → lib/format.ts formatINR().

Lead data flow

visitor → /book (BookForm.tsx)  ── POST ─→ /api/book  ─→ lib/db (bookings)
homepage/sector CTA ───────────────────────────────────→ lib/resend (notify + auto-reply)
inline forms ──────────────────── POST ─→ /api/leads ─→ lib/db (leads) + lib/resend

Page → route table

Route Entry file
/ app/page.tsx
/restaurants /hotels /real-estate app/(sectors)/<s>/page.tsx → *Content.tsx
/<s>/demo app/(sectors)/<s>/demo/page.tsx
/book /benefits /privacy /terms app/<name>/page.tsx
/admin/** app/admin/**
/api/** app/api/**/route.ts

Conventions

  • Sector page.tsx = metadata + JSON-LD only. All visible copy → *Content.tsx.
  • Design tokens via Tailwind classes: bg-black / bg-deep, text-gold, text-text / text-muted, border-border; fonts font-display (headings), font-body, font-mono (eyebrows). Defined in tailwind.config.ts.
  • Client components need "use client" (anything with motion/hooks).
  • Apostrophes in JSX text must be escaped (&apos;) — ESLint enforces it.

Gotchas

  • Two TheGap.tsx: components/sections/TheGap.tsx (homepage) vs components/sectors/TheGap.tsx (sector pages). Different files — check the path.
  • Sanity is fallback-driven: benefits content comes from sanity/lib/fallback-data.ts, not a live CMS, unless env is configured.
  • The WhatsApp demo bot (axon-demo-bot) is a separate repo/app, not in this tree. Dine links to it via NEXT_PUBLIC_DINE_DEMO_URL.
  • Env vars: DATABASE_URL, RESEND_API_KEY, NEXT_PUBLIC_DINE_DEMO_URL, plus analytics keys for MetaPixel/Hotjar.