Aimpress_site/CLAUDE.md
Vadym Samoilenko 67c7ab3289 Initial commit: Aimpress website
React 19 + TypeScript SPA with Vite, mobile responsive fixes,
GitHub Actions CI/CD pipeline for automated deployment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-08 13:47:37 +00:00

1.6 KiB
Raw Blame History

Aimpress Site

Commands

npm run dev        # Start Vite dev server
npm run build      # Type-check (tsc -b) then Vite build
npm run lint       # ESLint
npm run preview    # Preview production build

Architecture

React 19 + TypeScript single-page application built with Vite.

Entry point: src/main.tsxsrc/App.tsx

Page structure (top to bottom in App.tsx):

  • InteractiveBackground — canvas/animated background layer
  • Header
  • Hero, Benefits, Banner1, RealResults, Timeline, Banner2, ComparisonTable, BlogSection, ResourcesSection, ContactSection
  • Footer

Firebase: src/firebase.ts — handles form submissions (Firestore/Firebase backend).

Key Patterns

Component styling: Every component has a paired CSS file (ComponentName.tsx + ComponentName.css). Import the CSS directly in the component file.

Design tokens (defined in src/index.css :root):

  • --light-grey-100: #D3DDDE
  • --dark-grey-100: #233038 (page background)
  • --dark-teal-100: #075056
  • --orange-100: #FF5B04 (primary accent)
  • --yellow-100: #FCA82E
  • --font-primary: 'Inter', sans-serif

Animations: Framer Motion for scroll-triggered and interactive animations. react-intersection-observer used alongside Framer Motion for viewport-based triggers.

Font: Self-hosted Inter (weights 300900) loaded via @font-face in src/index.css, served from public/font/Inter/.

Base styles: CSS reset in src/index.css. Dark background (--dark-grey-100), light text (--light-grey-100).