Initial commit files

AGENTS.md

@@ -3,3 +3,287 @@
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
 <!-- END:nextjs-agent-rules -->
+
+# Code Maintainability Rules
+
+This project must remain understandable by:
+
+- Freshers
+- Frontend developers
+- Backend developers
+- New team members
+
+Rules:
+
+1. No component may exceed 400 lines.
+2. No page file may exceed 300 lines.
+3. No CSS file may exceed 500 lines.
+4. Prefer Tailwind utilities over custom CSS.
+5. Avoid duplicated styles.
+6. Create reusable UI components.
+7. Use meaningful file names.
+8. Keep folder depth shallow.
+9. Avoid massive utility/helper files.
+10. Every component should have a single responsibility.
+
+If a file becomes too large, split it into smaller components immediately.
+
+Code readability is more important than clever implementations.
+
+# Design System Rules
+
+## Single Source of Truth
+
+Common design values must be centralized.
+
+Do NOT hardcode the same values across multiple sections.
+
+Create shared design tokens for:
+
+* Colors
+* Typography
+* Border Radius
+* Shadows
+* Container Widths
+* Section Spacing
+* Button Styles
+* Animation Presets
+
+## Color System
+
+All colors must come from a shared theme file.
+
+Examples:
+
+* Primary
+* Secondary
+* Accent
+* Background
+* Surface
+* Border
+
+Do not repeat hex values throughout the project.
+
+Changing a color in one place should update the entire site.
+
+## Typography System
+
+Create shared typography styles.
+
+Examples:
+
+* Hero Title
+* Section Title
+* Card Title
+* Body Text
+* Small Text
+
+Do not redefine font sizes in every section.
+
+Changing typography tokens should update all matching sections.
+
+## Shared Components
+
+If multiple sections use the same UI pattern:
+
+* Card
+* Button
+* Badge
+* Section Header
+* CTA Block
+* Statistic Counter
+
+Create one reusable component.
+
+Do not duplicate markup.
+
+A change in one component should update every instance.
+
+## Shared Section Layout
+
+Create common section spacing tokens.
+
+Examples:
+
+* sectionPaddingY
+* sectionPaddingX
+* containerWidth
+
+All sections must use the same spacing system.
+
+Avoid custom padding per section unless intentionally required by the reference.
+
+## Consistent Container System
+
+All major sections must use the same container.
+
+Examples:
+
+* Container
+* PageContainer
+* SectionContainer
+
+Do not create unique widths for every section.
+
+## Shared Animation System
+
+Create reusable animation presets.
+
+Examples:
+
+* fadeUp
+* staggerChildren
+* scaleIn
+* slideIn
+
+Do not redefine animations in every component.
+
+## Shared Image System
+
+Common image styles should be reusable.
+
+Examples:
+
+* cardImage
+* heroImage
+* avatarImage
+
+Avoid repeating image styling logic.
+
+## Global Change Rule
+
+If the same pattern exists in multiple sections, do not update only one section.
+
+Examples:
+
+* Hero Title
+* About Title
+* Feature Title
+
+Update the shared source.
+
+The change must automatically propagate everywhere the pattern is used.
+
+## Spacing Consistency Rule
+
+Top, Bottom, Left, and Right spacing must follow the same design system.
+
+Avoid random values such as:
+
+* 72px
+* 94px
+* 113px
+* 147px
+
+Use predefined spacing tokens only.
+
+The entire site should feel visually consistent.
+
+# AGENTS.md
+
+## Mission
+
+Recreate the Aiero Home 9 experience with maximum visual fidelity while keeping the codebase maintainable and production-ready.
+
+## Agent Behavior
+
+Before making changes:
+
+* Analyze existing component
+* Compare against reference
+* Identify exact mismatch
+* Apply minimal fix
+
+Do not perform large rewrites unless explicitly requested.
+
+## Priority Order
+
+1. Layout Accuracy
+2. Spacing Accuracy
+3. Typography Accuracy
+4. Image Placement
+5. Responsiveness
+6. Animation
+7. Refactoring
+
+## Hero Analysis Checklist
+
+Verify:
+
+* Hero height
+* Hero width
+* Artwork scale
+* Artwork position
+* Heading width
+* Heading line breaks
+* CTA placement
+* Scroll indicator position
+* Navbar alignment
+
+## Card Analysis Checklist
+
+Verify:
+
+* Border radius
+* Padding
+* Image crop
+* Text spacing
+* Card proportions
+* Responsive behavior
+
+## Forbidden Actions
+
+Do NOT:
+
+* Replace sections without approval
+* Change color system globally
+* Introduce new layouts
+* Remove existing functionality
+* Rewrite working components
+
+## Preferred Workflow
+
+Step 1:
+Identify mismatch.
+
+Step 2:
+Describe mismatch.
+
+Step 3:
+Implement targeted fix.
+
+Step 4:
+Verify visually.
+
+Step 5:
+Move to next issue.
+
+## Visual Fidelity Standard
+
+Target:
+
+95%+ match to reference.
+
+Every change should improve:
+
+* Layout
+* Alignment
+* Proportions
+* Visual balance
+
+Avoid subjective redesign decisions.
+
+Reference fidelity is more important than personal preference.
+
+## Code Quality Rules
+
+* TypeScript strict
+* Reusable components
+* Clean props
+* No duplicated code
+* No inline magic values
+* Use Tailwind consistently
+
+## Final Goal
+
+Build a production-quality Next.js implementation that visually matches Aiero Home 9 as closely as possible while maintaining clean architecture and long-term maintainability.