2.8 KiB
@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
- Preserve visual fidelity.
- Avoid unnecessary redesigns.
- Prefer refinement over replacement.
- Maintain existing component architecture.
- 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:
- Inspect existing implementation.
- Compare with reference.
- Make minimal changes.
- Preserve working behavior.
Always prefer small iterative improvements.