@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.