RegGen - B2B Agency & SaaS Growth

Phase 1 — Design System (Day 1)

Before touching a single section, I established the\
complete design system:

* Color variables: brand purple, neutrals, semantic colors — all as Framer variables (zero hardcoded hex)

* Typography scale: Syne for display, Inter for body — 8 text styles from Display XL to Caption

* Spacing grid: strict 8px base — every padding and gap is a multiple of 8

* Base components: Button (3 variants + hover states), Tag/Badge, Feature card, Section eyebrow, Email input

This foundation meant every subsequent section was\
built with consistent, reusable components rather than\
one-off designs.

Homepage sections built in order:
→ Navbar: sticky, scroll-triggered background, 
   responsive hamburger menu
→ Hero: dark background, staggered appear animations, 
   dashboard mockup, logo trust bar
→ Services: bento grid layout with 4 service cards, 
   icon variants, real B2B copy
→ Stats bar: 4 metrics with count-up scroll animations
→ Case studies: 3 cards connected to CMS collection
→ Testimonials: 3 cards with aggregate rating bar
→ Pricing: 3-tier table with monthly/annual toggle 
   built using component variants
→ Bottom CTA + Footer: dark bookend sections, 
   4-column footer with social icons

Built a Case Study CMS collection with 15+ fields:
Title, Client, Industry, Tag, Cover image, Result 
numbers, Challenge, Approach, Quote, Stats, Results

Each field connected to both:
- Card component on the homepage grid
- Detail page template (auto-generates one page 
  per CMS item)

Created 3 complete case studies (ScaleIQ, Fintab, 
Orbio) with real copy, metrics, and photography.
The CMS template means buyers can add unlimited 
case studies without touching the design.

4-section about page:
→ Dark hero matching the homepage
→ Mission section with 2-column layout and stat accents
→ Values grid: 6 principles in a 3×2 card layout
→ Team grid: 4 members with avatar initials system

All using shared navbar and footer components — 
one change propagates across all pages automatically.

Systematic audit at 4 breakpoints:
1440px (desktop) → 1024px (tablet) → 
768px (tablet-S) → 375px (mobile)

Key mobile decisions:
- Bento grid → single column stack
- Hero headline: 64px → 32px
- Stats bar: horizontal row → 2×2 grid
- Pricing cards: side by side → stacked, 
  featured card first
- Footer: 4 columns → 2×2 grid
- Animations disabled on mobile breakpoint

Added appear animations across all sections:
fade + move, 0.5s duration, 0.1s stagger between 
elements, ease-out easing.

Pages:        3 (Home, About, Case Study template)
Sections:     12 homepage sections
Components:   8 reusable components
CMS fields:   15+ per case study item
Breakpoints:  4 (desktop, tablet, tablet-S, mobile)
Timeline:     7 days
Status:       Live on Framer Marketplace — $49

Dark hero + light body sections
→ Creates strong visual contrast and a premium feel 
  that matches top SaaS brands like Linear and Vercel

Component variants over boolean properties
→ Cleaner for pricing toggle — Monthly/Annual as 
  variants is more reliable than page variables 
  on Framer's free plan

Manual bento grid over Collection Frame
→ Collection Frames force uniform card sizes. 
  Manual placement with per-instance CMS connections 
  gives visual variety while keeping content editable

Hardcoded service cards over CMS
→ Service cards are fixed content buyers will 
  replace manually anyway. Reserving CMS for 
  case studies (genuinely dynamic content) keeps 
  the architecture clean and purposeful