# This is NOT the Next.js you know 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. # 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 tenext 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 tenext Home 9 as closely as possible while maintaining clean architecture and long-term maintainability.