update home page

PIXEL_PERFECT_WORKFLOW.md

@@ -0,0 +1,197 @@
+# PIXEL PERFECT WORKFLOW
+
+## PRIMARY OBJECTIVE
+
+Recreate the reference website section with pixel-perfect visual accuracy.
+
+The goal is NOT to recreate Elementor, WordPress, PHP, or original HTML structure.
+
+The goal IS to recreate the final visual output exactly as shown in the reference screenshot.
+
+---
+
+## SOURCE PRIORITY
+
+Always follow this order:
+
+1. Reference Screenshot (Highest Priority)
+2. Live Website Visual Output
+3. User Instructions
+4. HTML Inspect Data
+5. Existing Codebase
+
+If screenshot and HTML conflict, always follow the screenshot.
+
+---
+
+## CORE RULES
+
+### Rule 1
+
+Never redesign.
+
+Do not improve the design.
+
+Do not modernize the design.
+
+Do not optimize spacing because it looks better.
+
+Do not change typography because it feels cleaner.
+
+Match the reference exactly.
+
+---
+
+### Rule 2
+
+HTML is reference only.
+
+Inspect code exists only for:
+
+* Content identification
+* Asset extraction
+* Text extraction
+* Image extraction
+* Icon extraction
+* Section identification
+
+Do not recreate Elementor structure.
+
+Do not copy Elementor wrappers.
+
+Do not reproduce unnecessary nested divs.
+
+---
+
+### Rule 3
+
+Build clean Next.js components.
+
+Use:
+
+* Next.js App Router
+* TypeScript
+* Tailwind CSS
+
+Create reusable components only when visual accuracy is preserved.
+
+---
+
+### Rule 4
+
+Never modify unrelated sections.
+
+Only touch files required for the requested section.
+
+Do not refactor the page.
+
+Do not reorganize folders.
+
+Do not rename components unless required.
+
+---
+
+### Rule 5
+
+Before implementation, perform visual analysis.
+
+Return:
+
+* Container width
+* Padding
+* Margin
+* Gap values
+* Border radius
+* Typography sizes
+* Font weights
+* Icon sizes
+* Image dimensions
+* Layout behavior
+* Responsive behavior
+
+---
+
+### Rule 6
+
+For screenshot recreation tasks:
+
+1. Audit first
+2. Create implementation plan
+3. Wait for approval
+4. Implement
+
+Never skip the audit phase.
+
+---
+
+## SCREENSHOT COMPARISON WORKFLOW
+
+When a reference screenshot and implementation screenshot are provided:
+
+Step 1:
+Compare both screenshots.
+
+Step 2:
+List every mismatch.
+
+Step 3:
+Categorize mismatches:
+
+* Layout
+* Padding
+* Margin
+* Radius
+* Typography
+* Icon sizing
+* Image sizing
+* Alignment
+* Responsive issues
+
+Step 4:
+Create a fix plan.
+
+Step 5:
+Implement only the listed fixes.
+
+---
+
+## SUCCESS CRITERIA
+
+Implementation is complete only when:
+
+* Side-by-side comparison shows no obvious visual differences.
+* Layout matches reference.
+* Padding matches reference.
+* Typography matches reference.
+* Border radius matches reference.
+* Image positioning matches reference.
+* Mobile behavior matches reference.
+
+---
+
+## FAILURE CONDITIONS
+
+Task is considered failed if:
+
+* Design is improved instead of matched.
+* Layout is approximated.
+* Unrelated components are modified.
+* Existing sections are unnecessarily refactored.
+* HTML structure is copied without matching visual output.
+* Visible differences remain.
+
+---
+
+## REQUIRED RESPONSE FORMAT
+
+For every task:
+
+1. Audit First
+2. List Differences
+3. Create Implementation Plan
+4. Wait For Approval
+5. Implement
+6. Re-compare
+7. Verify Pixel Accuracy
+
+Never skip these steps.