Such Software Website

Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.

Lighthouse Scores (Production Build)

Page	Performance	Accessibility	SEO	Best Practices
Home	99%	100%	100%	77%*
Services	98%	100%	100%	100%
About	99%	100%	100%	100%

*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies for bot protection.

Tech Stack

Core Framework

• Next.js 15 - React framework with App Router
• React 18 - UI library
• TypeScript 5 - Type safety

Styling & Animation

• Tailwind CSS 3 - Utility-first CSS
• Framer Motion 11 - Animations and transitions
• tailwind-merge - Conditional class merging
• class-variance-authority - Component variants

UI Components

• Radix UI - Accessible primitives
• Lucide React - Icon library
• react-icons - Additional icons (FontAwesome, etc.)

Theming

• next-themes 0.4 - Dark/light mode with system preference detection

Forms & Validation

• Zod - Schema validation
• Cloudflare Turnstile - Bot protection via @marsidev/react-turnstile

Build & Dev Tools

• Turborepo - Monorepo build system
• pnpm 9 - Package manager
• ESLint - Linting
• Prettier - Code formatting

Project Structure

such-software-site/
├── apps/
│   └── web/                    # Next.js website
│       ├── src/
│       │   ├── app/            # App Router pages
│       │   │   ├── page.tsx    # Homepage
│       │   │   ├── services/   # Services page
│       │   │   ├── about/      # About page
│       │   │   └── layout.tsx  # Root layout
│       │   ├── components/
│       │   │   ├── about/      # About page components
│       │   │   ├── contact/    # Contact form
│       │   │   ├── landing/    # Homepage components
│       │   │   ├── layout/     # Header, Footer, etc.
│       │   │   └── portfolio/  # Portfolio grid
│       │   ├── actions/        # Server actions
│       │   └── lib/            # Utilities
│       └── public/             # Static assets
├── packages/
│   ├── ui/                     # Shared UI components
│   │   └── src/
│   │       ├── components/     # Button, Card, etc.
│   │       ├── procedural/     # Canvas animations (NebulaField, DataGrid)
│   │       └── lib/            # Utilities (cn)
│   └── config/                 # Shared TypeScript/ESLint config
├── turbo.json                  # Turborepo config
├── pnpm-workspace.yaml         # pnpm workspace config
└── package.json                # Root package.json

Development

Prerequisites

• Node.js >= 20.0.0
• pnpm >= 9.0.0

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

The dev server runs at http://localhost:3000.

Accessibility & Quality

WCAG 2.2 AA Compliance

This site achieves 100% Lighthouse Accessibility on all pages through:

• Skip-to-main-content link
• Semantic HTML5 structure (<main>, <nav>, <header>, <footer>, <address>)
• Proper heading hierarchy (h1 → h2 → h3 → h4)
• ARIA labels on interactive elements
• Form fields with proper labels and error handling
• Color contrast ratios meeting 4.5:1 minimum
• Keyboard navigation support
• Dark/light mode with system preference
• Reduced motion support in theme transitions

See TODO_ACCESS.md for detailed audit results.

Testing

# Run Lighthouse audit (requires production build)
pnpm build && pnpm start

# In another terminal:
npx lighthouse http://localhost:3000 --view

Environment Variables

Create .env.local in apps/web/:

# Cloudflare Turnstile (for contact form)
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key

# Contact form email (optional)
CONTACT_EMAIL=your@email.com

See .env.example for a template.

Deployment

Built for deployment on Vercel or any Node.js hosting platform.

pnpm build
pnpm start

License

Proprietary - Such Software LLC