149 lines
2.8 KiB
Markdown
149 lines
2.8 KiB
Markdown
@AGENTS.md
|
|
|
|
# CLAUDE.md
|
|
|
|
## Project Overview
|
|
|
|
This project is a high-fidelity recreation of the tenext 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.
|