Initial commit files

CLAUDE.md

@@ -1 +1,147 @@
 @AGENTS.md
+# CLAUDE.md
+
+## Project Overview
+
+This project is a high-fidelity recreation of the Aiero Home 9 landing page using Next.js App Router, TypeScript, Tailwind CSS, and Framer Motion.
+
+The goal is NOT to redesign the page.
+
+The goal is to accurately reproduce the visual hierarchy, layout structure, spacing system, card architecture, typography scale, and responsive behavior of the reference implementation.
+
+## Core Rules
+
+1. Preserve visual fidelity.
+2. Avoid unnecessary redesigns.
+3. Prefer refinement over replacement.
+4. Maintain existing component architecture.
+5. Never replace working sections with completely new layouts.
+
+## Design System Rules
+
+Common design decisions must come from shared sources, not repeated one-off values.
+
+Centralize:
+
+* Colors
+* Typography
+* Border radius
+* Shadows
+* Container widths
+* Section spacing
+* Button styles
+* Animation presets
+* Image styles
+
+Use reusable components for repeated patterns such as cards, buttons, badges, section headers, CTA blocks, and statistic counters.
+
+All major sections should use the shared container and spacing system. Avoid random spacing values such as 72px, 94px, 113px, or 147px unless the reference requires a deliberate exception.
+
+When the same pattern appears in multiple sections, update the shared token, component, or preset so the change propagates everywhere.
+
+## Design Philosophy
+
+The homepage is:
+
+* Editorial
+* Card-driven
+* Visual-first
+* Premium AI agency
+* Image-heavy
+* Modern but minimal
+
+Avoid:
+
+* Generic SaaS layouts
+* Dashboard-first designs
+* Startup template aesthetics
+* Excessive gradients
+* Excessive glassmorphism
+
+## Hero Section Requirements
+
+Hero is the most important section.
+
+Must maintain:
+
+* Large background artwork
+* Left aligned content
+* Vertical Scroll Down element
+* Large heading
+* Compact CTA
+
+Hero artwork should dominate visual composition.
+
+Target ratio:
+
+70% visual
+30% content
+
+## Card Layout Rules
+
+Cards should:
+
+* Use large border radii
+* Have consistent spacing
+* Maintain editorial proportions
+* Feel like magazine blocks
+
+Do not:
+
+* Make all cards equal height
+* Convert cards into dashboard widgets
+* Add unnecessary statistics
+
+## Typography Rules
+
+Headings:
+
+* Strong
+* Bold
+* Editorial
+
+Body text:
+
+* Simple
+* Readable
+* Secondary
+
+Avoid oversized line lengths.
+
+## Animations
+
+Use subtle animations only.
+
+Allowed:
+
+* Fade up
+* Hover lift
+* Opacity transitions
+* Small parallax
+
+Avoid:
+
+* Excessive motion
+* Heavy GSAP timelines
+* Distracting effects
+
+## Responsive Rules
+
+Desktop design is source of truth.
+
+Then adapt:
+
+Desktop → Tablet → Mobile
+
+Never design mobile first and then stretch to desktop.
+
+## Development Rules
+
+Before modifying a section:
+
+1. Inspect existing implementation.
+2. Compare with reference.
+3. Make minimal changes.
+4. Preserve working behavior.
+
+Always prefer small iterative improvements.