Sayso Landing Page

A high-performance, SEO-first marketing website built with Next.js 14+ App Router, designed for programmatic landing page generation and content marketing.

🎯 What We're Building

An SSR/SSG marketing site that prioritizes:

• SEO Performance: Server-side rendering, optimized meta tags, structured data
• Dynamic Landing Pages: Programmatically generated pages via [slug] routes
• Content Marketing: MDX-powered blog and articles
• Brand Consistency: Centralized design system with Tailwind
• Developer Experience: TypeScript, component primitives, clear architecture

🛠 Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS with custom design tokens
• Content: MDX (planned for blog/articles)
• Fonts: next/font for Manrope, system stack for Helvetica
• Deployment: Vercel

📁 Folder Structure

sayso_landing_page/
├── app/
│   ├── (marketing)/          # Marketing route group (shared layout)
│   │   └── ...               # Static marketing pages (about, pricing, etc.)
│   ├── landing/
│   │   └── [slug]/           # Dynamic landing pages (/landing/*)
│   │       └── page.tsx      # [Future] Template for programmatic pages
│   ├── layout.tsx            # Root layout (fonts, metadata, analytics)
│   ├── page.tsx              # Homepage
│   └── globals.css           # Global styles, Tailwind directives
├── components/
│   ├── ui/                   # Primitive components (Button, Card, Badge)
│   ├── sections/             # Page sections (Hero, Features, CTA, Testimonials)
│   └── layout/               # Layout components (Header, Footer, Nav)
├── content/
│   └── blog/                 # MDX blog posts and articles
│       └── *.mdx             # [Future] SEO content
├── lib/
│   └── seo/                  # SEO utilities (metadata, structured data, OG)
├── docs/
│   └── brand/
│       └── sayso-design-system.md  # **Design system** (fonts, colors, comic/superhero UI)
├── styles/
│   └── ...                   # [Optional] Additional stylesheets if needed
├── public/                   # Static assets (images, icons, fonts)
├── tailwind.config.ts        # Tailwind configuration (design tokens)
├── postcss.config.js         # PostCSS configuration
├── tsconfig.json             # TypeScript configuration
├── next.config.js            # Next.js configuration
└── package.json              # Dependencies and scripts

Folder Purposes

• app/(marketing)/: Static marketing pages that share a common layout (e.g., /about, /pricing, /contact)
• app/landing/[slug]/: Dynamic landing pages for programmatic SEO (e.g., /landing/best-tools-for-x)
• components/ui/: Reusable primitive components (buttons, inputs, cards) - the building blocks
• components/sections/: Composed sections used across pages (hero blocks, feature grids, testimonials)
• components/layout/: Site-wide layout components (header, footer, navigation)
• content/blog/: MDX files for blog posts and SEO articles
• lib/seo/: SEO helper functions (generate metadata, structured data, sitemaps)
• docs/: Internal documentation (brand guidelines, development notes)

🎨 Brand Guidelines

The Sayso design system is the single source of truth for all UI/brand styling: docs/brand/sayso-design-system.md

Keep it in sync: any UI change made to the web app (a new color, font, utility class, component pattern, or motion) must be reflected in docs/brand/sayso-design-system.md in the same PR. Treat it as living documentation.

Quick Reference

Fonts:

• Hero: Manrope Bold (font-hero, 30px)
• Comic headers / badges: Bangers (font-comic)
• Headings / body / UI: Helvetica stack (font-sans, 18/16/12px)
• Handwriting accents (ad pages only): Caveat (font-handwriting)

Colors:

• Background: #F4F4F5
• Accent Background: #D7DEE1
• Primary (navy): #1D4871
• CTA (blue): #2367EE
• Accent (yellow): #FFDE59 (use sparingly!)

🚀 Development

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Getting Started

1. Install dependencies:

   npm install
   

2. Run development server:

   npm run dev
   

3. Open browser:

   http://localhost:3000
   

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript compiler check

📋 Development Phases

✅ Phase 1: Foundation & Structure (COMPLETE)

• Create brand guidelines documentation
• Set up folder structure
• Configure Tailwind with design tokens
• Document architecture and next steps

Phase 2: Component Primitives (NEXT)

• Create UI primitives in components/ui/
  • Button (primary, secondary, ghost variants)
  • Card (default, elevated)
  • Badge
  • Input components (if needed for forms)
• Create layout components in components/layout/
  • Header with navigation
  • Footer
• Configure fonts in root layout (app/layout.tsx)
• Test component variants against brand guidelines

Phase 3: Section Components

• Build reusable sections in components/sections/
  • Hero (multiple variants)
  • Feature grid
  • Testimonials
  • CTA blocks
  • Stats/metrics
• Ensure sections are composable and configurable

Phase 4: Landing Pages

• Build homepage (app/page.tsx)
• Create dynamic landing page template (app/landing/[slug]/page.tsx)
• Implement data fetching for programmatic pages
• Set up page-level SEO metadata

Phase 5: Content & SEO

• Configure MDX for blog posts
• Build SEO utilities (lib/seo/)
  • Metadata generation
  • Open Graph images
  • Structured data (JSON-LD)
  • Sitemap generation
• Create blog post templates
• Write initial SEO content

Phase 6: Production Ready

• Add analytics (Vercel Analytics, Google Analytics)
• Performance optimization (images, fonts, bundle size)
• Accessibility audit
• SEO audit
• Deploy to Vercel

📝 Contributing Guidelines

New to the repo? See Developer Guide for setup, Git workflow, branch naming, and PR process.

1. Follow brand guidelines: All UI must adhere to docs/brand/sayso-design-system.md
2. Use Tailwind tokens: No arbitrary values - use defined tokens
3. TypeScript strict mode: No any types
4. Component composition: Build small, reusable pieces
5. SEO first: Every page should have proper metadata

🔗 Useful Links

• Next.js App Router Docs
• Tailwind CSS Docs
• MDX Documentation
• Vercel Deployment Docs

---

Current Phase: Phase 1 (Foundation) ✅
Next Steps: Begin Phase 2 - Build component primitives

---

Last Updated: January 23, 2026