bast1qn 98552163a8 Initial ScaleSite Next.js implementation

Complete frontend implementation with:
- Next.js 16 with App Router and TypeScript
- Tailwind CSS v4 with custom violet theme
- shadcn/ui components with Lucide React icons
- Landing page with hero, services, pricing, testimonials, FAQ
- Service selection page with toggle
- Login/Register pages with social auth UI
- Multi-step checkout flow
- Client dashboard with stats, projects, support tickets
- Billing page with subscription, payment methods, invoices
- All mock data and TypeScript types

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-02-01 21:42:48 +01:00

5.9 KiB

Raw Permalink Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

ScaleSite is a Next.js 16 frontend-only application for a digital agency service platform. It provides web design and AI automation services with a complete client portal. The application uses mock data only—no backend or database.

Tech Stack:

Next.js 16.1.6 with App Router and Turbopack
React 19.2.3
TypeScript 5
Tailwind CSS v4 (CSS-based theme configuration)
shadcn/ui components (Radix UI primitives)
Lucide React icons
React Hook Form + Zod validation

Development Commands

# Start development server (runs on port 3000 by default)
npm run dev

# Production build
npm run build

# Start production server
npm start

# Lint
npm run lint

Architecture

Page Structure

Public Pages (Marketing Layout)

/ - Landing page with hero, services, pricing, testimonials, FAQ
/services - Service selection with toggle between Web Design and AI Automation
/login and /register - Authentication pages

Protected Pages (Dashboard Layout)

/dashboard - Client dashboard with stats, projects, tickets
/billing - Subscription management, payment methods, invoice history

Checkout Flow

/checkout - Multi-step checkout (Account → Billing → Payment)

Layouts

Pages use one of two layout wrappers:

MarketingLayout (components/layouts/marketing-layout.tsx)

Used by: /, /services
Includes: SiteHeader, SiteFooter
Sticky header with glass morphism effect

Dashboard Layout (sidebar layout)

Used by: /dashboard, /billing
Note: Dashboard pages currently render inline without a wrapper component
Components reference: DashboardSidebar in components/layouts/dashboard-sidebar.tsx
Navigation items: Dashboard, Projects, AI Automations, Support, Billing, Settings

Auth Layout (components/auth/auth-layout.tsx)

Used by: /login, /register
Split screen: hero image (left) + form (right)
No header/footer

Minimal Layout

Used by: /checkout
Logo header only, no navigation

Data & Types

TypeScript Types (lib/types/index.ts)

User, ServiceType, PricingTier, PricingPlan
Project, ProjectStatus, ProjectStage
SupportTicket, TicketStatus
Invoice, InvoiceStatus, PaymentMethod, Subscription
CheckoutSession, CheckoutStep, Address
Testimonial, FAQ, DashboardStats

Mock Data (lib/mock-data/)

All data is mocked—no API calls
Exports: mockProjects, mockSupportTickets, mockInvoices, mockTestimonials, mockPricingPlans, etc.
Helper functions: getPricingPlanById(), getPricingPlansByServiceType(), getAllFAQs()

Component Organization

components/
├── auth/           # Auth-related components (social login, password input)
├── billing/        # Subscription, payment methods, invoice table
├── checkout/       # Checkout steps, summary, payment forms
├── dashboard/      # Stats cards, project cards, tickets
├── layouts/        # Marketing layout, header, footer, sidebar
├── marketing/      # Hero, service cards, pricing, testimonials, FAQ
├── mobile/         # Mobile-specific components (if implementing separate views)
└── ui/             # shadcn/ui base components (button, card, input, etc.)

Icon System

Lucide React Only

All icons use Lucide React (lucide-react package)
Icons passed as components: icon={Rocket} not icon="rocket"
Do NOT use Material Symbols (previously caused display issues)
Import pattern: import { Rocket, Bot, ArrowRight } from 'lucide-react'

Component Props Pattern For components that accept icons:

import { LucideIcon } from 'lucide-react'

interface Props {
  icon: LucideIcon  // Pass component, not string
}

export function Component({ icon: Icon }: Props) {
  return <Icon className="w-6 h-6" />
}

Styling & Theme

Tailwind CSS v4 Configuration (app/globals.css)

Theme defined inline with @theme directive
Custom colors:
- primary: #8B5CF6 (Electric Violet)
- background: #0B0B0B (Deep Obsidian)
- surface: #1E1E1E (Slate Gray)
Dark mode by default: <html lang="en" className="dark"> in root layout

Utility Classes

.glow-button - Primary button with purple glow effect
.glass-card - Glass morphism card background
.glass-nav - Glass navigation header

Special Patterns

Checkout Suspense Boundary Checkout page uses useSearchParams which requires a Suspense boundary:

// app/checkout/page.tsx
import { Suspense } from 'react'
import { CheckoutContent } from './checkout-content'

export default function CheckoutPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <CheckoutContent />
    </Suspense>
  )
}

The actual client component with useSearchParams is in checkout-content.tsx.

Status Color Mapping Several components use Record types for status-based styling:

const statusColors: Record<Project['status'], string> = {
  discovery: 'bg-blue-500/10 text-blue-400',
  design: 'bg-purple-500/10 text-purple-400',
  // ...
}

Common Tasks

Adding a New Page

Create app/route-name/page.tsx
For marketing pages: wrap with MarketingLayout
For dashboard pages: render content inline (layout wrapper not yet implemented)

Adding Mock Data

Create file in lib/mock-data/
Export data and any helper functions
Re-export in lib/mock-data/index.ts

Updating Icons

Always use Lucide React components
Search available icons: https://lucide.dev/icons/
Import and pass as component props

Known Limitations

No backend—all data is mocked
Dashboard layout wrapper not implemented (pages render sidebar content inline)
No authentication flow (login/register pages are UI only)
No form validation connected (React Hook Form + Zod installed but not implemented)

5.9 KiB Raw Permalink Blame History