148 lines
2.8 KiB
Markdown
148 lines
2.8 KiB
Markdown
@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.
|