From e373c2b46c26db551792bec00794333bb3b8da64 Mon Sep 17 00:00:00 2001 From: Vadym Samoilenko Date: Sat, 21 Feb 2026 22:43:53 +0000 Subject: [PATCH] feat: project setup & repository (Feature 1) - Next.js 16.1.6 with App Router, TypeScript strict, Tailwind CSS v4 - ESLint 9, Prettier with Tailwind class sorting plugin - Husky + lint-staged pre-commit hooks - Multi-stage Dockerfile (dev/build/production) with pnpm + Node 20 - docker-compose.yml with hot reload + PostgreSQL 17 - src/ directory structure (components, lib, hooks, types, payload) - .env.example template with all required variables - standalone output mode for production Docker builds Co-Authored-By: Claude Opus 4.6 --- .claude/commands/design-guidelines.md | 160 + .claude/commands/tailwind-design-system.md | 99 + .claude/settings.json | 6 + .claude/settings.local.json | 23 + .dockerignore | 10 + .env.example | 21 + .gitignore | 43 + .husky/pre-commit | 1 + .lintstagedrc | 4 + .prettierignore | 4 + .prettierrc | 8 + Concept.md | 620 +++ Dockerfile | 46 + Logo/6fe4e3dc-3f0f-4529-88cd-153c947bbe1f.jpg | Bin 0 -> 65950 bytes Logo/Axil Accounants (1).jpg | Bin 0 -> 49625 bytes Logo/Axil Accounants (2).jpg | Bin 0 -> 46797 bytes Logo/Axil Accounting.png | Bin 0 -> 57924 bytes Logo/Axil Accounting[94].png | Bin 0 -> 57924 bytes Logo/dc10ea74-a0e1-445c-858a-8cde260a35b0.jpg | Bin 0 -> 62175 bytes README.md | 36 + docker-compose.yml | 41 + docs/guides/01-nextjs-docker-setup.md | 199 + eslint.config.mjs | 18 + implementation_plan.md | 898 ++++ next.config.ts | 7 + package.json | 32 + pnpm-lock.yaml | 4375 +++++++++++++++++ pnpm-workspace.yaml | 3 + postcss.config.mjs | 7 + public/file.svg | 1 + public/globe.svg | 1 + public/next.svg | 1 + public/vercel.svg | 1 + public/window.svg | 1 + src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 26 + src/app/layout.tsx | 30 + src/app/page.tsx | 65 + src/components/cms/.gitkeep | 0 src/components/layout/.gitkeep | 0 src/components/sections/.gitkeep | 0 src/components/three/.gitkeep | 0 src/components/ui/.gitkeep | 0 src/hooks/.gitkeep | 0 src/lib/.gitkeep | 0 src/payload/.gitkeep | 0 src/types/.gitkeep | 0 tsconfig.json | 34 + 48 files changed, 6821 insertions(+) create mode 100644 .claude/commands/design-guidelines.md create mode 100644 .claude/commands/tailwind-design-system.md create mode 100644 .claude/settings.json create mode 100644 .claude/settings.local.json create mode 100644 .dockerignore create mode 100644 .env.example create mode 100644 .gitignore create mode 100755 .husky/pre-commit create mode 100644 .lintstagedrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 Concept.md create mode 100644 Dockerfile create mode 100644 Logo/6fe4e3dc-3f0f-4529-88cd-153c947bbe1f.jpg create mode 100644 Logo/Axil Accounants (1).jpg create mode 100644 Logo/Axil Accounants (2).jpg create mode 100644 Logo/Axil Accounting.png create mode 100644 Logo/Axil Accounting[94].png create mode 100644 Logo/dc10ea74-a0e1-445c-858a-8cde260a35b0.jpg create mode 100644 README.md create mode 100644 docker-compose.yml create mode 100644 docs/guides/01-nextjs-docker-setup.md create mode 100644 eslint.config.mjs create mode 100644 implementation_plan.md create mode 100644 next.config.ts create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml create mode 100644 postcss.config.mjs create mode 100644 public/file.svg create mode 100644 public/globe.svg create mode 100644 public/next.svg create mode 100644 public/vercel.svg create mode 100644 public/window.svg create mode 100644 src/app/favicon.ico create mode 100644 src/app/globals.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/page.tsx create mode 100644 src/components/cms/.gitkeep create mode 100644 src/components/layout/.gitkeep create mode 100644 src/components/sections/.gitkeep create mode 100644 src/components/three/.gitkeep create mode 100644 src/components/ui/.gitkeep create mode 100644 src/hooks/.gitkeep create mode 100644 src/lib/.gitkeep create mode 100644 src/payload/.gitkeep create mode 100644 src/types/.gitkeep create mode 100644 tsconfig.json diff --git a/.claude/commands/design-guidelines.md b/.claude/commands/design-guidelines.md new file mode 100644 index 0000000..cd93e04 --- /dev/null +++ b/.claude/commands/design-guidelines.md @@ -0,0 +1,160 @@ +--- +name: design-guidelines +description: Generate, update, or audit frontend design guidelines for Axil Accountants. Use this skill to create/maintain the design system documentation, review component consistency, or produce a design guidelines document. +--- + +You are a senior frontend design systems engineer working on **Axil Accountants** — a premium British accounting firm website. + +## Your Role + +When invoked, you produce or update the **Frontend Design Guidelines** document for the project. This document is the single source of truth for all visual and interaction decisions on the site. + +## Project Context (Always Apply) + +**Stack:** Next.js 15 · TypeScript · Tailwind CSS v4 · Framer Motion · GSAP · Three.js / R3F + +**Design Philosophy:** + +- Premium, airy, light — predominantly white/near-white backgrounds +- Sage green as an **accent**, not the dominant colour +- Generous whitespace — every element has room to breathe +- Glassmorphism cards for interactive surfaces +- Soft shadows only — no harsh drop shadows +- Every animation has a purpose — no decoration for its own sake +- British English throughout all copy + +--- + +## Design Guidelines Structure + +When asked to generate or update design guidelines, produce a document covering: + +### 1. Colour System + +- Full palette with hex values and usage rules +- Which colours are safe on dark backgrounds vs light +- Colour combinations to **avoid** (contrast failures) +- Overlay and tint values for interactive states (hover, focus, pressed) +- Green tints: `#6BAF7D`, `#A8C5A0`, `#F4FAF5`, `#2E7D52`, `#1A2E1F` + +### 2. Typography Rules + +- Font families and when to use each (Satoshi for display, Inter for body, DM Mono for numbers) +- Type scale: specific sizes for H1–H6, body, small, caption +- Line height and letter spacing rules per scale +- Forbidden: Arial, Roboto, system-ui as display fonts +- Max line length: 70 characters for body text + +### 3. Spacing & Layout + +- 8px base grid — all spacing multiples of 4px or 8px +- Section padding rules (desktop vs mobile) +- Container max-width (1440px) and gutter rules +- Card internal padding standards + +### 4. Component Patterns + +For each component, specify: + +- Default state +- Hover / focus state +- Active / pressed state +- Disabled state +- Dark background variant +- Mobile variant + +**Components to document:** + +- Button (primary, secondary, ghost) +- Card (glass, solid, feature) +- Navigation (desktop, mobile, dropdown) +- Form fields (input, select, checkbox, textarea) +- Badge / Tag +- Testimonial card +- Blog card +- Service card +- Modal / Overlay +- Accordion / FAQ + +### 5. Animation Principles + +- **Timing functions:** ease-out for entrances, ease-in for exits, ease-in-out for loops +- **Duration rules:** + - Micro-interactions (button hover): 150–200ms + - Element reveals (fade in): 300–500ms + - Page transitions: 400–600ms + - 3D loop animations: 8–20s +- **Stagger:** 80–120ms between sibling elements +- **ScrollTrigger start:** `top 80%` (element enters when 80% down viewport) +- **`prefers-reduced-motion`:** all animations must be wrapped in a media query check — skip or reduce motion for users who request it +- GSAP for scroll-driven + complex sequences +- Framer Motion for page transitions + React state-driven animations +- CSS transitions for simple hover states + +### 6. Iconography + +- Style: line icons, 1.5px stroke, rounded caps +- Size: 16px (small), 20px (default), 24px (large), 32px (feature) +- Colour: inherits text colour or explicit sage green +- Never use filled icons mixed with line icons in the same context +- Custom SVG components — no icon font libraries + +### 7. Imagery Guidelines + +- Photography: real people, authentic UK business settings, natural light +- Never use: stock photo clichés, handshake photos, generic office scenes +- All images: `next/image` with correct `alt` text +- Cover images: 16:9 ratio for blog, 4:3 for cards +- Hero images: full-width, overlaid with dark tint if text is on top +- Alt text: descriptive, contextual, British English + +### 8. Accessibility Standards + +- All text: WCAG AA (4.5:1 body, 3:1 large text) minimum +- Focus styles: `ring-2 ring-sage ring-offset-2` — never `outline: none` without replacement +- Interactive elements: minimum 44×44px touch target +- Form fields: always have a visible `