Vadym/Aimpress-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Aimpress-site/CLAUDE.md
Vadym Samoilenko 6e932d76e4 Add multi-language support (EN/UK) across entire site 
Custom i18n system with typed translation dictionaries (~570 keys),
LanguageProvider context, and useTranslation hook. All 31 components
and pages wired with t() calls. Chatbot backend passes language hint
to Claude for Ukrainian responses. Language preference persists via
localStorage. SEO meta tags and html lang attribute update dynamically.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 13:32:04 +00:00

2 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.tsx → src/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 300–900) 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).

Active Technologies

  • TypeScript 5.x, React 19 + None added (custom i18n solution — no library needed for 2 languages + ~200 strings) (001-multi-language)
  • localStorage for language preference (001-multi-language)

Recent Changes

  • 001-multi-language: Added TypeScript 5.x, React 19 + None added (custom i18n solution — no library needed for 2 languages + ~200 strings)