@adlas/create-app 1.0.48 → 1.0.49

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -4,6 +4,74 @@
 
 This document provides comprehensive guidelines for converting Figma designs to code in this project. **You MUST strictly follow the project structure, component patterns, and coding standards defined below.**
 
+---
+
+## 🔌 Figma MCP Server Integration
+
+### Prerequisites
+
+Before implementing UI from Figma designs, ensure the following:
+
+1. **Claude Desktop App** - You must be using Claude Desktop (not web interface)
+2. **Figma MCP Server** - Installed and configured in Claude Desktop settings
+3. **Figma Access Token** - Valid token with read access to the design file
+4. **File Access** - Permissions to view the specific Figma file
+
+### Setup Verification
+
+Before starting, verify MCP server is working:
+
+```bash
+# Check if Figma server is connected in Claude Desktop
+# You should see "figma" in available MCP servers
+```
+
+### Figma URL Format
+
+Supported Figma URL formats:
+- File URL: `https://www.figma.com/file/{file-key}/{file-name}`
+- Design URL: `https://www.figma.com/design/{file-key}/{file-name}`
+- Specific page: Add `?node-id={page-node-id}` to URL
+
+### Working with Figma Designs
+
+When you receive a Figma URL:
+
+1. **Fetch the design** using Figma MCP server
+2. **Analyze the structure** - Understand pages, frames, components
+3. **Identify patterns** - Find repeated components and design tokens
+4. **Plan implementation** - Map Figma components to HeroUI components
+5. **Extract assets** - Export icons (SVG) and images (SVG/PNG/WebP)
+6. **Implement step by step** - Start with layout, then components, then styling
+
+### Critical Workflow
+
+```
+1. Get Figma URL from user
+   ↓
+2. Use Figma MCP to fetch design structure
+   ↓
+3. Identify all pages and components
+   ↓
+4. Export icons as SVG → src/assets/icons/
+   ↓
+5. Run pnpm generate-icons
+   ↓
+6. Export logos/images → public/images/
+   ↓
+7. Create centralized image constants (src/config/images.ts)
+   ↓
+8. Map Figma components to HeroUI components
+   ↓
+9. Implement pages with proper i18n and navigation
+   ↓
+10. Test responsive behavior across breakpoints
+```
+
+**Important**: Always use Figma MCP server to fetch design details. Never ask user to manually describe the design.
+
+---
+
 ## 🎯 Core Principles
 
 1. **Use HeroUI components first** - Always prefer HeroUI components. Only use Tailwind CSS for custom styling when HeroUI doesn't provide the component
@@ -11,7 +79,7 @@ This document provides comprehensive guidelines for converting Figma designs to
 3. **i18n for ALL text** - ALL labels, placeholders, titles, error messages MUST use translation keys
 4. **Navigation from config** - NEVER hardcode URLs. Always use `NAVIGATION_URLS` from config
 5. **Icons workflow** - Export SVG from Figma → Place in `src/assets/icons/` → Run `pnpm generate-icons` → Use generated TSX components
-6. **Logos workflow** - Export SVG/PNG from Figma → Place in `public/` → Reference via path (prefer SVG over PNG)
+6. **Logos workflow** - Export SVG/PNG from Figma → Place in `public/images/` → Create centralized constants → Reference via `IMAGES.CATEGORY.NAME`
 7. **Use Tailwind standard classes** - Use closest Tailwind class instead of custom values (e.g., `h-10` not `h-[41px]`)
 8. **Follow project structure** - Place files in correct locations as defined below
 9. **Match coding patterns** - Use the same patterns found in existing code
@@ -34,37 +102,72 @@ This document provides comprehensive guidelines for converting Figma designs to
 <button onClick={handler}>Click</button>
 ```
 
-**✅ CORRECT - Configure in component wrapper or use variants**:
+**✅ CORRECT - Configure in component wrapper with defaultVariants**:
 ```tsx
-// Option 1: If this is a reusable button style, extend Button component
 // File: src/components/ui/Button.tsx
 import { extendVariants, Button as HeroUIButton } from '@heroui/react';
 
 export const Button = extendVariants(HeroUIButton, {
   variants: {
     color: {
-      primary: 'bg-[#19ffa3] text-black hover:bg-[#00e68a]',
+      primary: 'bg-primary-600 text-black hover:bg-primary-500',
+      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
     },
     size: {
+      sm: 'h-8 px-3 text-xs',
       md: 'h-10 px-4 text-sm',
+      lg: 'h-12 px-6 text-base',
     },
   },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+    radius: 'full',
+  },
 });
 
-// Usage in code:
-<Button color="primary" size="md" radius="full">
-  Click Me
-</Button>
-
-// Option 2: For one-off usage, use HeroUI Button with minimal custom classes
-import { Button } from '@/components/ui';
-<Button color="primary" radius="full">Click Me</Button>
+// Usage in code - Clean and declarative:
+<Button>Click Me</Button>  // Uses defaultVariants
+<Button color="secondary" size="lg">Large Button</Button>
 ```
 
 **When to configure vs use inline**:
-- ✅ Configure: Repeated styles, component variants, brand colors
+- ✅ Configure with defaultVariants: Repeated styles, component variants, brand colors, default radius
 - ✅ Inline: Layout utilities only (`mt-4`, `hidden`, `lg:block`)
-- ❌ Never inline: Component-specific styles (heights, colors, padding, text sizes)
+- ❌ Never inline: Component-specific styles (heights, colors, padding, text sizes, border radius)
+
+### extendVariants Pattern
+
+Use `extendVariants` from HeroUI to create configured component wrappers:
+
+```tsx
+import { extendVariants, Input as HeroUIInput } from '@heroui/react';
+
+export const Input = extendVariants(HeroUIInput, {
+  variants: {
+    variant: {
+      flat: 'bg-gray-100 border-none',
+      bordered: 'border-2 border-gray-300',
+    },
+    size: {
+      sm: 'h-8 text-xs',
+      md: 'h-10 text-sm',
+      lg: 'h-12 text-base',
+    },
+  },
+  defaultVariants: {
+    variant: 'flat',
+    size: 'md',
+    radius: 'lg',
+  },
+});
+```
+
+**Benefits**:
+- Clean component usage without repetitive className
+- Consistent styling across the application
+- Easy to maintain and update
+- Type-safe variants
 
 ### Data Must Be Mapped from Constants
 
@@ -81,13 +184,16 @@ import { Button } from '@/components/ui';
 ```tsx
 // File: src/config/menuOptions.ts
 export const productMenuItems = [
-  { key: 'analytics', labelKey: 'product.analytics', href: '/analytics' },
-  { key: 'insights', labelKey: 'product.insights', href: '/insights' },
-  { key: 'reports', labelKey: 'product.reports', href: '/reports' },
-];
+  { key: 'analytics', labelKey: 'product.analytics', href: NAVIGATION_URLS.PRODUCTS.ANALYTICS },
+  { key: 'insights', labelKey: 'product.insights', href: NAVIGATION_URLS.PRODUCTS.INSIGHTS },
+  { key: 'reports', labelKey: 'product.reports', href: NAVIGATION_URLS.PRODUCTS.REPORTS },
+] as const;
 
 // Usage:
 import { productMenuItems } from '@/config/menuOptions';
+import { useTranslations } from 'next-intl';
+
+const t = useTranslations();
 
 <DropdownMenu>
   {productMenuItems.map((item) => (
@@ -100,42 +206,138 @@ import { productMenuItems } from '@/config/menuOptions';
 
 ---
 
-## 🎨 Component Priority & Usage Strategy
+## 🎨 Color Palette & Theme
 
-### 1. Check HeroUI First
-Before creating ANY component, check if HeroUI provides it:
-- **HeroUI Documentation**: https://heroui.com/docs/components
-- **HeroUI Figma Kit**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-
+### Primary Colors (from hero.ts)
 
-### 2. Component Selection Flow
+The project uses a custom primary color palette defined in `src/styles/hero.ts`:
+
+```typescript
+primary: {
+  DEFAULT: '#25C780',  // Main primary color
+  50: '#E6FFF0',       // Lightest
+  100: '#CBFFE0',
+  200: '#AEFFD1',
+  300: '#8EFFC2',
+  400: '#66FFB2',
+  500: '#19FFA3',
+  600: '#25C780',      // DEFAULT
+  700: '#26915F',
+  800: '#215F40',
+  900: '#173123',      // Darkest
+}
 ```
-1. Does HeroUI have this component?
-   → YES: Use HeroUI component (via @/components/ui wrapper if exists)
-   → NO: Go to step 2
 
-2. Does project have wrapper in src/components/ui/?
-   → YES: Use the wrapper
-   → NO: Go to step 3
+### Using Primary Colors in Code
 
-3. Build with Tailwind CSS utilities
-   → Use HeroUI theme colors and patterns
-   → Follow mobile-first responsive design
+```tsx
+// Background colors
+<div className="bg-primary">         {/* Uses DEFAULT (#25C780) */}
+<div className="bg-primary-50">      {/* Lightest shade */}
+<div className="bg-primary-600">     {/* Same as DEFAULT */}
+<div className="bg-primary-900">     {/* Darkest shade */}
+
+// Text colors
+<p className="text-primary">         {/* Uses DEFAULT */}
+<p className="text-primary-700">
+
+// Border colors
+<div className="border border-primary">
+<div className="border-2 border-primary-500">
+
+// HeroUI component colors
+<Button color="primary">Click</Button>  {/* Uses primary palette */}
 ```
 
-### 3. Example Decision Tree
+### When to Use Which Shade
+
+- **50-200**: Very light backgrounds, subtle highlights
+- **300-400**: Hover states, light accents
+- **500-600**: Primary actions, main brand color (DEFAULT is 600)
+- **700-800**: Active states, darker accents
+- **900**: Very dark accents, strong contrast
+
+**Important**: Always use these theme colors instead of hardcoded hex values. This ensures consistency and makes theme updates easier.
+
+---
+
+## 🧭 Navigation Components
+
+### Navbar Component with HeroUI
+
+When implementing navigation from Figma, use HeroUI Navbar component:
+
 ```tsx
-// Need a Button?
-import { Button } from '@/components/ui';  // ✅ Use HeroUI Button wrapper
+'use client';
+
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem } from '@heroui/react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
+import { IMAGES } from '@/config/images';
 
-// Need an Input?
-import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
+// Define menu items in constants file
+// File: src/config/navigationItems.ts
+export const mainNavigationItems = [
+  { key: 'home', labelKey: 'nav.home', href: NAVIGATION_URLS.ROOT },
+  { key: 'about', labelKey: 'nav.about', href: NAVIGATION_URLS.ABOUT },
+  { key: 'services', labelKey: 'nav.services', href: NAVIGATION_URLS.SERVICES },
+  { key: 'contact', labelKey: 'nav.contact', href: NAVIGATION_URLS.CONTACT },
+] as const;
+
+export default function NavbarComponent() {
+  const t = useTranslations();
 
-// Need a Card?
-// HeroUI has Card, but check if wrapper exists in project
-// If not, use Tailwind utilities with HeroUI colors:
-<div className="rounded-lg bg-white p-6 shadow-md">  // ✅ Custom with Tailwind
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <Link href={NAVIGATION_URLS.ROOT}>
+          <img src={IMAGES.LOGOS.PRIMARY} alt={t('nav.logoAlt')} className="h-10 w-auto" />
+        </Link>
+      </NavbarBrand>
+
+      <NavbarContent className="hidden gap-4 sm:flex" justify="center">
+        {mainNavigationItems.map((item) => (
+          <NavbarItem key={item.key}>
+            <Link href={item.href} className="text-foreground">
+              {t(item.labelKey)}
+            </Link>
+          </NavbarItem>
+        ))}
+      </NavbarContent>
+
+      <NavbarContent justify="end">
+        <NavbarItem>
+          <Button as={Link} href={NAVIGATION_URLS.AUTH.LOGIN} color="primary">
+            {t('nav.login')}
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarMenuToggle className="sm:hidden" />
+
+      <NavbarMenu>
+        {mainNavigationItems.map((item) => (
+          <NavbarMenuItem key={item.key}>
+            <Link href={item.href} className="w-full">
+              {t(item.labelKey)}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+}
 ```
 
+**Key points**:
+- Use HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, etc. components
+- Define navigation items in separate constants file
+- Use i18n for all text (`t('nav.home')`)
+- Use `NAVIGATION_URLS` for all links (never hardcode)
+- Use centralized image constants for logo (`IMAGES.LOGOS.PRIMARY`)
+- Implement responsive menu with `NavbarMenuToggle` and `NavbarMenu`
+
 ---
 
 ## 📁 Project Structure
@@ -147,187 +349,103 @@ import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
 ### Components Location
 ```
 src/components/
-├── ui/              # Reusable UI components (HeroUI wrappers)
-├── icons/           # Icon components
+├── ui/              # Reusable UI components (HeroUI wrappers with extendVariants)
+├── icons/           # Auto-generated icon components (DO NOT manually edit)
 ├── layout/          # Layout components (Navbar, Footer)
 └── [feature]/       # Feature-specific components
 ```
 
+### Configuration Files
+```
+src/config/
+├── navigationUrls.ts    # All navigation URLs
+├── navigationItems.ts   # Navigation menu items
+├── menuOptions.ts       # Dropdown/select options
+└── images.ts           # Centralized image paths (CRITICAL)
+```
+
 ### Styling
 - **Global styles**: `src/styles/globals.css`
-- **Theme config**: `src/styles/hero.ts`
+- **Theme config**: `src/styles/hero.ts` (Primary colors defined here)
 - **Approach**: Tailwind CSS utility classes ONLY
 - **NO CSS modules, NO styled-components, NO inline styles**
 
 ---
 
-## 🎨 Available UI Components
+## 🖼️ Icons
 
-### Form Components
-All located in `src/components/ui/`:
+### CRITICAL WORKFLOW: Icon Component Pattern
 
-#### Input Fields
-```tsx
-import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
-
-// Text Input
-<Input
-  label="Email"
-  placeholder="Enter your email"
-  type="email"
-  isRequired
-/>
-
-// Password Input (with show/hide toggle)
-<PasswordInput
-  label="Password"
-  placeholder="Enter password"
-  isRequired
-/>
-
-// Number Input (with increment/decrement)
-<NumberInput
-  label="Quantity"
-  min={1}
-  max={100}
-  defaultValue={1}
-/>
+**Modern Approach**: Use a centralized `Icon` component that dynamically renders icons:
 
-// Textarea
-<Textarea
-  label="Description"
-  placeholder="Enter description"
-  rows={4}
-/>
-```
-
-#### Selection Components
 ```tsx
-import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
-
-// Select Dropdown
-<Select
-  label="Country"
-  placeholder="Select country"
-  items={countries}
-/>
-
-// Radio Group
-<RadioGroup
-  label="Size"
-  options={[
-    { value: 's', label: 'Small' },
-    { value: 'm', label: 'Medium' },
-    { value: 'l', label: 'Large' },
-  ]}
-/>
+// File: src/components/icons/Icon.tsx
+import dynamic from 'next/dynamic';
+import type { SVGProps } from 'react';
 
-// Checkbox
-<Checkbox>I agree to terms</Checkbox>
+interface IconProps extends SVGProps<SVGSVGElement> {
+  name: string;  // Icon name without "Icon" suffix
+}
 
-// Autocomplete (with search)
-<Autocomplete
-  label="Search"
-  items={suggestions}
-  placeholder="Type to search..."
-/>
-```
+export function Icon({ name, ...props }: IconProps) {
+  const IconComponent = dynamic(() =>
+    import(`./index`).then((mod) => mod[`${name}Icon`])
+  );
 
-#### Date & Time
-```tsx
-import { DatePicker } from '@/components/ui';
+  return <IconComponent {...props} />;
+}
 
-<DatePicker
-  label="Select Date"
-  placeholderValue={new CalendarDate(2024, 1, 1)}
-/>
+// Usage in any component:
+<Icon name="ChevronDown" className="size-5 text-white" />
+<Icon name="Menu" className="size-6" />
+<Icon name="Close" className="size-4 text-red-500" />
 ```
 
-#### Buttons
-```tsx
-import { Button } from '@/components/ui';
+**Benefits**:
+- No need to import individual icons
+- Cleaner component code
+- Easy to swap icons by changing name prop
+- Consistent icon rendering
 
-<Button color="primary" size="md">
-  Submit
-</Button>
+### Icon Generation Workflow
 
-<Button color="secondary" variant="bordered">
-  Cancel
-</Button>
+1. **Export SVG from Figma**
+   - Select icon in Figma
+   - Export as SVG (not PNG/JPG)
+   - Download the SVG file
 
-<Button isLoading>
-  Processing...
-</Button>
-```
+2. **Place in Icons Folder**
+   ```bash
+   mv downloaded-icon.svg src/assets/icons/icon-name.svg
+   ```
 
-#### Other Components
-```tsx
-import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
+3. **Generate React Components**
+   ```bash
+   pnpm generate-icons
+   ```
 
-// Modal
-<Modal
-  isOpen={isOpen}
-  onClose={onClose}
-  title="Modal Title"
->
-  Modal content
-</Modal>
-
-// Chip (badges/tags)
-<Chip color="success" variant="flat">
-  Active
-</Chip>
-
-// Breadcrumbs
-<Breadcrumbs
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Products', href: '/products' },
-  ]}
-/>
+   This command will:
+   - Convert all SVG files in `src/assets/icons/` to React components
+   - Place them in `src/components/icons/`
+   - Auto-format and lint the generated code
+   - Update `src/components/icons/index.ts` with exports
 
-// Tabs
-<Tabs
-  items={[
-    { key: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
-    { key: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
-  ]}
-/>
-```
+4. **Use with Icon Component**
+   ```tsx
+   import { Icon } from '@/components/icons/Icon';
 
-### Icons
+   <Icon name="ChevronDown" className="size-5 text-white" />
+   ```
 
-**CRITICAL WORKFLOW**: Icons must follow this exact process:
+### Alternative: Direct Import (When Needed)
 
-#### Step 1: Export SVG from Figma
-1. Select the icon in Figma design
-2. Export as SVG (not PNG/JPG)
-3. Download the SVG file
+If you need direct imports for tree-shaking or specific use cases:
 
-#### Step 2: Place in Icons Folder
-```bash
-# Place SVG file in src/assets/icons/
-mv downloaded-icon.svg src/assets/icons/icon-name.svg
-```
-
-#### Step 3: Generate React Components
-```bash
-# Run the icon generation script
-pnpm generate-icons
-```
-
-This command will:
-- Convert all SVG files in `src/assets/icons/` to React components
-- Place them in `src/components/icons/`
-- Auto-format and lint the generated code
-- Update `src/components/icons/index.ts` with exports
-
-#### Step 4: Use in Code
 ```tsx
-import { IconNameIcon, ChevronDownIcon } from '@/components/icons';
+import { ChevronDownIcon, MenuIcon } from '@/components/icons';
 
 <ChevronDownIcon className="size-5 text-white" />
-<IconNameIcon className="size-4" />
+<MenuIcon className="size-6" />
 ```
 
 **Available Icons** (auto-generated):
@@ -344,45 +462,77 @@ import { IconNameIcon, ChevronDownIcon } from '@/components/icons';
 - Create manual icon components
 - Use `<img>` tags for icons
 - Hardcode SVG paths directly in components
+- Edit files in `src/components/icons/` manually (they are auto-generated)
 
 **✅ DO**:
 - Always export from Figma as SVG
 - Use `pnpm generate-icons` to create components
-- Import from `@/components/icons`
+- Use `<Icon name="IconName" />` pattern for cleaner code
 - Use Tailwind classes for sizing (`size-4`, `size-5`, `size-6`)
+- Organize icons in `src/assets/icons/` with descriptive names
+
+---
 
-### Logos & Images
+## 🖼️ Logos & Images
 
-**CRITICAL WORKFLOW**: Logos and images must be placed in `public/` directory:
+### CRITICAL WORKFLOW: Centralized Image Constants
+
+**Step 1: Export from Figma**
 
-#### Step 1: Export from Figma
 1. **For logos**: Export as SVG (preferred) or PNG if source is raster
 2. **For images**: Export as PNG, JPG, or WebP based on image type
 3. Use appropriate resolution (2x or 3x for retina displays)
 
-#### Step 2: Place in Public Folder
+**Step 2: Organize in Public Folder**
+
 ```bash
-# Place logo/image files in public/
 public/
-├── logo.svg           # Main logo (SVG preferred)
-├── logo-dark.svg      # Dark mode logo
-├── logo.png           # Fallback PNG
-├── favicon.ico
 └── images/
-    ├── hero-bg.jpg
-    └── product-1.png
+    ├── logos/
+    │   ├── logo-circle-primary.svg
+    │   ├── logo-circle-secondary.svg
+    │   ├── logo-full.svg
+    │   ├── logo-full-black.svg
+    │   ├── logo-full-white.svg
+    │   └── logo-icon.svg
+    ├── auth/
+    │   ├── login-background.jpg
+    │   ├── signup-background.jpg
+    │   └── reset-password.jpg
+    ├── website/
+    │   ├── home-hero.webp
+    │   ├── home-newsletter.webp
+    │   ├── about-header.jpg
+    │   └── contact-map.png
+    ├── services/
+    │   ├── services-header.webp
+    │   ├── feature-1.jpg
+    │   └── feature-2.jpg
+    └── products/
+        ├── thumbnail-default.png
+        └── hero-banner.jpg
 ```
 
-#### Step 3: Create Centralized Image Constants
+**Step 3: Create Centralized Image Constants**
 
-**CRITICAL**: Create a centralized constants file for all image paths:
+**CRITICAL**: Always create and maintain `src/config/images.ts`:
 
 ```typescript
 // src/config/images.ts
 
 /**
  * Centralized image path constants
- * Organize by category: LOGOS, AUTH, WEBSITE, SERVICES, etc.
+ *
+ * CRITICAL RULES:
+ * 1. ALL image paths MUST be defined here
+ * 2. Organize by category (LOGOS, AUTH, WEBSITE, SERVICES, etc.)
+ * 3. Use descriptive UPPER_SNAKE_CASE names
+ * 4. Add `as const` for type safety
+ * 5. NEVER hardcode image paths in components
+ *
+ * Usage:
+ * import { IMAGES } from '@/config/images';
+ * <img src={IMAGES.LOGOS.PRIMARY_CIRCLE} alt="Logo" />
  */
 
 const LOGOS = {
@@ -427,14 +577,13 @@ export const IMAGES = {
 } as const;
 ```
 
-#### Step 4: Reference in Code
+**Step 4: Reference in Components**
 
 ```tsx
-// Import from centralized constants
 import { IMAGES } from '@/config/images';
 import Image from 'next/image';
 
-// Using Next.js Image component (recommended)
+// ✅ Using Next.js Image component (recommended for optimization)
 <Image
   src={IMAGES.LOGOS.FULL}
   alt="Company Logo"
@@ -443,40 +592,82 @@ import Image from 'next/image';
   priority
 />
 
-// Using standard img tag (for SVGs with CSS control)
+// ✅ Using standard img tag (for SVGs with CSS control)
 <img src={IMAGES.LOGOS.PRIMARY_CIRCLE} alt="Logo" className="h-10 w-auto" />
 
-// Background images via Tailwind
-<div className={`bg-[url('${IMAGES.WEBSITE.HOME_HERO}')] bg-cover bg-center`}>
+// ✅ Background images via Tailwind
+<div
+  className="bg-cover bg-center"
+  style={{ backgroundImage: `url(${IMAGES.WEBSITE.HOME_HERO})` }}
+>
 
-// In authentication pages
+// ✅ In authentication pages
 <Image
   src={IMAGES.AUTH.LOGIN_BG}
   alt="Login background"
   fill
   className="object-cover"
 />
+
+// ✅ In service pages
+<Image
+  src={IMAGES.SERVICES.HEADER}
+  alt="Services"
+  width={1920}
+  height={600}
+  className="w-full"
+/>
 ```
 
-**Preference Order**:
+### Image Format Preference Order
+
 1. ✅ **SVG** - Best for logos, icons, and vector graphics (scalable, small file size)
-2. ✅ **WebP** - Modern format for photos (smaller than PNG/JPG)
+2. ✅ **WebP** - Modern format for photos (better compression than PNG/JPG)
 3. ✅ **PNG** - For images requiring transparency
 4. ✅ **JPG** - For photos without transparency
 
+### CRITICAL: Check Before Export Workflow
+
+Before exporting any logo or image from Figma:
+
+1. **Check if it already exists** in `public/images/`
+2. **Check if it's already defined** in `src/config/images.ts`
+3. **Use existing constant** if available
+4. **Only export and add new** if it doesn't exist
+
+This prevents:
+- Duplicate images in the project
+- Inconsistent image usage
+- Bloated public folder
+- Broken image references
+
+**Example**:
+```tsx
+// ❌ WRONG - Exporting logo that already exists
+// User asks: "Add company logo to header"
+// You: Export logo from Figma, add to public/, create new constant
+
+// ✅ CORRECT - Check first, then use existing
+// 1. Check src/config/images.ts
+// 2. See IMAGES.LOGOS.FULL already exists
+// 3. Use it: <img src={IMAGES.LOGOS.FULL} alt="Logo" />
+```
+
 **❌ DO NOT**:
 - Put images in `src/` folder
 - Import images as modules unless necessary
 - Use base64 encoded images inline
 - Forget to optimize images before adding
-- Hardcode image paths directly in components (use centralized constants)
+- **Hardcode image paths directly in components** (CRITICAL ERROR)
+- Export images that already exist in the project
 
 **✅ DO**:
-- Always place in `public/` directory
-- Create centralized image constants file (src/config/images.ts)
-- Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES)
+- Always place images in `public/images/` with organized folders
+- **Create and maintain `src/config/images.ts`** (CRITICAL)
+- Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES, PRODUCTS)
 - Use `as const` for type safety
-- Import from `@/config/images` in components
+- Import from `@/config/images` in ALL components
+- Check if image exists before exporting from Figma
 - Prefer SVG for logos and icons
 - Optimize images before adding (use tools like ImageOptim, Squoosh)
 - Use Next.js `<Image>` component for automatic optimization
@@ -532,18 +723,6 @@ auto, full, screen, fit, min, max
 - No standard Tailwind class is close enough
 - Using design tokens/CSS variables: `bg-[var(--custom-color)]`
 
-**Examples**:
-```tsx
-// ✅ Good - Using standard classes
-<div className="h-10 w-full p-6 text-sm">
-
-// ✅ Acceptable - Design tokens
-<div className="bg-[var(--colors/primary)] text-[#19ffa3]">
-
-// ❌ Bad - Should use standard classes
-<div className="h-[40px] w-[100%] p-[24px] text-[14px]">
-```
-
 ### Responsive Breakpoints (Mobile-First)
 ```css
 /* Mobile */
@@ -564,108 +743,19 @@ xl:  1280px  /* MacBook Air */
 4xl: 1728px  /* MacBook Pro 16" */
 ```
 
-### Usage Example
-```tsx
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-  {/* Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns */}
-</div>
-```
-
 ### HeroUI Color System
+
 Use these semantic colors from HeroUI theme:
 - `bg-background` - Main background
 - `bg-foreground` - Text color background
 - `bg-default` / `bg-default-50` to `bg-default-900` - Gray scale
-- `bg-primary` / `text-primary` - Primary brand color
+- `bg-primary` / `text-primary` - Primary brand color (#25C780)
+- `bg-primary-50` to `bg-primary-900` - Primary color shades
 - `bg-secondary` - Secondary color
 - `bg-success` - Success states
 - `bg-warning` - Warning states
 - `bg-danger` - Error/danger states
 
-### Common Patterns
-```tsx
-// Card
-<div className="rounded-lg bg-white p-6 shadow-md">
-
-// Container
-<div className="container mx-auto px-4">
-
-// Flexbox centering
-<div className="flex items-center justify-center">
-
-// Grid layout
-<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-
-// Spacing
-<div className="space-y-4">  {/* Vertical spacing */}
-<div className="space-x-4">  {/* Horizontal spacing */}
-```
-
----
-
-## 📝 Form Implementation with Zod
-
-### Pattern to Follow
-```tsx
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { Button, Input } from '@/components/ui';
-
-// 1. Define schema
-const schema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Password must be at least 8 characters'),
-});
-
-type FormData = z.infer<typeof schema>;
-
-export default function LoginForm() {
-  // 2. Setup form
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<FormData>({
-    resolver: zodResolver(schema),
-  });
-
-  // 3. Submit handler
-  const onSubmit = async (data: FormData) => {
-    // Handle form submission
-    console.log(data);
-  };
-
-  // 4. Render form
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <Input
-        label="Email"
-        type="email"
-        {...register('email')}
-        errorMessage={errors.email?.message}
-        isInvalid={!!errors.email}
-      />
-
-      <Input
-        label="Password"
-        type="password"
-        {...register('password')}
-        errorMessage={errors.password?.message}
-        isInvalid={!!errors.password}
-      />
-
-      <Button type="submit" isLoading={isSubmitting} className="w-full">
-        Submit
-      </Button>
-    </form>
-  );
-}
-```
-
 ---
 
 ## 🌐 Internationalization (i18n)
@@ -702,24 +792,6 @@ import { Link } from '@heroui/react';
 <Link href={NAVIGATION_URLS.ABOUT}>About</Link>
 ```
 
-**Using Navigation Hooks**:
-```tsx
-'use client';
-
-import { usePathname, useRouter } from 'next/navigation';
-
-export function MyComponent() {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  const handleNavigation = () => {
-    router.push(NAVIGATION_URLS.DASHBOARD.INDEX);
-  };
-
-  return <button onClick={handleNavigation}>Go to Dashboard</button>;
-}
-```
-
 ### Translations for ALL text
 ```tsx
 import { useTranslations } from 'next-intl';
@@ -740,173 +812,77 @@ function MyComponent() {
 }
 ```
 
-### Form labels, placeholders, errors - ALL must use i18n
-```tsx
-import { useTranslations } from 'next-intl';
-
-function LoginForm() {
-  const t = useTranslations();
-
-  return (
-    <form>
-      {/* ✅ CORRECT */}
-      <Input
-        label={t('email')}
-        placeholder={t('enterEmail')}
-        errorMessage={errors.email?.message ? t(errors.email.message) : undefined}
-      />
-
-      {/* ❌ WRONG - Hardcoded text */}
-      <Input
-        label="Email"
-        placeholder="Enter your email"
-        errorMessage="Invalid email"
-      />
-    </form>
-  );
-}
-```
-
-### Navigation URLs Reference
-```tsx
-import { NAVIGATION_URLS } from '@/config/navigationUrls';
-
-// Available URLs (based on project type):
-NAVIGATION_URLS.ROOT                    // '/'
-NAVIGATION_URLS.ABOUT                   // '/about'
-NAVIGATION_URLS.CONTACT                 // '/contact'
-NAVIGATION_URLS.PRODUCTS.INDEX          // '/products'
-NAVIGATION_URLS.PRODUCTS.DETAIL('123')  // '/products/123'
-NAVIGATION_URLS.AUTH.LOGIN              // '/auth/login'
-NAVIGATION_URLS.DASHBOARD.INDEX         // '/dashboard'
-
-// ✅ ALWAYS use NAVIGATION_URLS
-<Link href={NAVIGATION_URLS.PRODUCTS.INDEX}>Products</Link>
-
-// ❌ NEVER hardcode URLs
-<Link href="/products">Products</Link>
-```
-
----
-
-## 🎯 Data Fetching
-
-### Using React Query
-```tsx
-'use client';
-
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-
-import { QUERY_KEYS } from '@/libs/react-query';
-
-export default function ProductList() {
-  const { data, isLoading, error } = useQuery({
-    queryKey: QUERY_KEYS.PRODUCTS.LIST,
-    queryFn: async () => {
-      const response = await axios.get('/api/products');
-      return response.data;
-    },
-  });
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading products</div>;
-
-  return (
-    <div>
-      {data.map((product) => (
-        <div key={product.id}>{product.name}</div>
-      ))}
-    </div>
-  );
-}
-```
-
----
-
-## 📐 Layout Components
-
-### Using Existing Layouts
-```tsx
-// Auth pages use auth layout automatically
-// Location: src/app/[locale]/(auth)/login/page.tsx
-
-'use client';
-
-export default function LoginPage() {
-  return (
-    <div className="w-full max-w-md space-y-6 rounded-lg bg-white p-8 shadow-md">
-      <h1 className="text-center text-2xl font-bold">Login</h1>
-      {/* Your form here */}
-    </div>
-  );
-}
-```
-
-### Navbar & Footer
-Already implemented in `src/components/layout/`:
-- `Navbar.tsx` - Main navigation
-- `Footer.tsx` - Footer component
-
-Use in root layout:
-```tsx
-import { Footer, Navbar } from '@/components/layout';
-
-<Navbar />
-<main>{children}</main>
-<Footer />
-```
-
 ---
 
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
-1. ❌ **Icons**: Create manual icon components - MUST use `pnpm generate-icons` workflow
-2. ❌ **Icons**: Use non-project icons (Lucide, Font Awesome, etc.)
-3. ❌ **Logos**: Put logos/images in `src/` folder - MUST go in `public/`
-4. ❌ **Logos**: Import images as modules unless necessary
-5. ❌ **Logos**: Hardcode image paths in components - MUST use centralized constants from `@/config/images`
-6. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
-7. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
-8. ❌ **Text**: Hardcode ANY text - ALL text MUST use i18n translation keys
-9. ❌ **URLs**: Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
-10. ❌ **Data**: Hardcode menu items, dropdown options - MUST map from constants
-11. ❌ **Components**: Create custom components when HeroUI provides them
-12. ❌ **Components**: Use HTML elements when HeroUI component exists (e.g., `<button>` → use HeroUI `<Button>`)
-13. ❌ **Styling**: Apply component styles inline - MUST configure in component wrapper or theme
-14. ❌ **Styling**: Use CSS modules or styled-components - ONLY Tailwind CSS
-15. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers)
-16. ❌ **Navigation**: Use HeroUI `Link` for internal navigation (use Next.js `Link` from `next/link`)
-17. ❌ **Navigation**: Import `usePathname`, `useRouter` from wrong source (MUST use `next/navigation`)
-18. ❌ **TypeScript**: Use `any` type
-19. ❌ **Design**: Ignore responsive design (always implement mobile-first)
-20. ❌ **Forms**: Skip form validation (always use Zod schemas)
+
+1. ❌ **Figma MCP**: Manually implement design without fetching from Figma MCP server
+2. ❌ **Figma MCP**: Ask user to describe design - always use Figma MCP to fetch
+3. ❌ **Icons**: Create manual icon components - MUST use `pnpm generate-icons` workflow
+4. ❌ **Icons**: Use non-project icons (Lucide, Font Awesome, etc.)
+5. ❌ **Icons**: Edit auto-generated files in `src/components/icons/` manually
+6. ❌ **Logos**: Put logos/images in `src/` folder - MUST go in `public/images/`
+7. ❌ **Logos**: Import images as modules unless necessary
+8. ❌ **Logos**: Hardcode image paths in components - MUST use `@/config/images` constants
+9. ❌ **Logos**: Export images that already exist - check `src/config/images.ts` first
+10. ❌ **Logos**: Skip creating centralized image constants file
+11. ❌ **Colors**: Hardcode hex values when theme colors exist (use `bg-primary`, not `bg-[#25C780]`)
+12. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
+13. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
+14. ❌ **Text**: Hardcode ANY text - ALL text MUST use i18n translation keys
+15. ❌ **URLs**: Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
+16. ❌ **Data**: Hardcode menu items, dropdown options - MUST map from constants
+17. ❌ **Components**: Create custom components when HeroUI provides them
+18. ❌ **Components**: Use HTML elements when HeroUI component exists (e.g., `<button>` → use `<Button>`)
+19. ❌ **Styling**: Apply component styles inline - MUST configure with `extendVariants` and `defaultVariants`
+20. ❌ **Styling**: Use CSS modules or styled-components - ONLY Tailwind CSS
+21. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers)
+22. ❌ **Navigation**: Use HeroUI `Link` for internal navigation (use Next.js `Link` from `next/link`)
+23. ❌ **Navigation**: Import `usePathname`, `useRouter` from wrong source (MUST use `next/navigation`)
+24. ❌ **TypeScript**: Use `any` type
+25. ❌ **Design**: Ignore responsive design (always implement mobile-first)
+26. ❌ **Forms**: Skip form validation (always use Zod schemas)
 
 ### ✅ DO
-1. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
-2. ✅ **Icons**: Import from `@/components/icons` (auto-generated components)
-3. ✅ **Logos**: Export SVG/PNG from Figma → Place in `public/images/` with organized folders
-4. ✅ **Logos**: Create centralized constants file `src/config/images.ts` with LOGOS, AUTH, WEBSITE, etc.
-5. ✅ **Logos**: Import from `@/config/images` and use `IMAGES.LOGOS.PRIMARY`
-6. ✅ **Logos**: Prefer SVG over PNG when source is vector
-7. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
-8. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
-9. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
-10. ✅ **Navigation**: Import `usePathname`, `useRouter` from `next/navigation`
-11. ✅ **Text**: Use i18n translation keys for ALL text (`t('key')`)
-12. ✅ **URLs**: Use `NAVIGATION_URLS` for ALL navigation links
-13. ✅ **Data**: Map menu items, dropdown options from constants (never hardcode)
-14. ✅ **Components**: Use HeroUI components first (check library before custom)
-15. ✅ **Components**: Use existing wrappers from `src/components/ui/` (e.g., `<Button>` not `<button>`)
-16. ✅ **Components**: Configure styles in component wrappers, not inline
-17. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
-18. ✅ **TypeScript**: Implement strict typing with proper types
-19. ✅ **React**: Use `'use client'` directive for interactive components
-20. ✅ **Design**: Follow mobile-first responsive design
-21. ✅ **Colors**: Use semantic color classes from HeroUI theme
-22. ✅ **States**: Implement proper loading and error states
-23. ✅ **Patterns**: Follow existing code patterns and naming conventions
+
+1. ✅ **Figma MCP**: Always use Figma MCP server to fetch design details
+2. ✅ **Figma MCP**: Analyze Figma structure before implementation (pages, frames, components)
+3. ✅ **Figma MCP**: Extract design tokens (colors, spacing, typography) from Figma
+4. ✅ **Figma MCP**: Map Figma components to HeroUI components before coding
+5. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
+6. ✅ **Icons**: Use `<Icon name="IconName" />` pattern for cleaner code
+7. ✅ **Icons**: Import from `@/components/icons` (auto-generated components)
+8. ✅ **Logos**: Export SVG/PNG from Figma → Place in `public/images/` with organized folders
+9. ✅ **Logos**: Create/update centralized constants file `src/config/images.ts`
+10. ✅ **Logos**: Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES, PRODUCTS)
+11. ✅ **Logos**: Import from `@/config/images` and use `IMAGES.CATEGORY.NAME`
+12. ✅ **Logos**: Check if image exists in `src/config/images.ts` before exporting from Figma
+13. ✅ **Logos**: Prefer SVG over PNG when source is vector
+14. ✅ **Colors**: Use theme colors (`bg-primary`, `bg-primary-600`, `text-primary`)
+15. ✅ **Colors**: Reference primary color shades (50-900) for consistent branding
+16. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
+17. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
+18. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
+19. ✅ **Navigation**: Import `usePathname`, `useRouter` from `next/navigation`
+20. ✅ **Navigation**: Use HeroUI Navbar component for main navigation
+21. ✅ **Text**: Use i18n translation keys for ALL text (`t('key')`)
+22. ✅ **URLs**: Use `NAVIGATION_URLS` for ALL navigation links
+23. ✅ **Data**: Map menu items, dropdown options from constants (never hardcode)
+24. ✅ **Data**: Define navigation items in `src/config/navigationItems.ts`
+25. ✅ **Components**: Use HeroUI components first (check library before custom)
+26. ✅ **Components**: Use existing wrappers from `src/components/ui/` (e.g., `<Button>` not `<button>`)
+27. ✅ **Components**: Configure styles with `extendVariants` and `defaultVariants`, not inline
+28. ✅ **Components**: Keep component usage clean (let defaultVariants handle defaults)
+29. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
+30. ✅ **TypeScript**: Implement strict typing with proper types
+31. ✅ **React**: Use `'use client'` directive for interactive components
+32. ✅ **Design**: Follow mobile-first responsive design
+33. ✅ **Design**: Implement responsive menu with HeroUI NavbarMenuToggle
+34. ✅ **States**: Implement proper loading and error states
+35. ✅ **Patterns**: Follow existing code patterns and naming conventions
+36. ✅ **Patterns**: Use `as const` for type safety in constants
 
 ---
 
@@ -914,41 +890,65 @@ import { Footer, Navbar } from '@/components/layout';
 
 When converting Figma to code, ensure:
 
+### Figma Integration
+- [ ] Used Figma MCP server to fetch design
+- [ ] Analyzed all pages and components in Figma file
+- [ ] Identified design tokens (colors, spacing, typography)
+- [ ] Mapped Figma components to HeroUI components
+- [ ] Extracted all necessary assets (icons, images)
+
 ### Icons & Assets
 - [ ] Exported icons as SVG from Figma
 - [ ] Placed SVG files in `src/assets/icons/`
 - [ ] Ran `pnpm generate-icons` to create React components
-- [ ] Imported icons from `@/components/icons`
-- [ ] Exported logos/images as SVG (preferred) or PNG
+- [ ] Used `<Icon name="IconName" />` pattern in code
+- [ ] Checked if logos/images already exist before export
+- [ ] Exported new logos/images as SVG (preferred) or PNG
 - [ ] Placed logos/images in `public/images/` with organized folders (logos/, auth/, website/, services/)
-- [ ] Created centralized constants file `src/config/images.ts`
+- [ ] Created/updated centralized constants file `src/config/images.ts`
 - [ ] Organized image paths by category (LOGOS, AUTH, WEBSITE, SERVICES, PRODUCTS)
 - [ ] Used `as const` for type safety
-- [ ] Referenced via `IMAGES.LOGOS.PRIMARY` (not hardcoded paths)
+- [ ] Referenced via `IMAGES.CATEGORY.NAME` (not hardcoded paths)
+
+### Colors & Theme
+- [ ] Used primary colors from theme (`bg-primary`, `bg-primary-600`)
+- [ ] Applied correct color shades for states (hover, active, disabled)
+- [ ] Followed HeroUI semantic colors (background, foreground, success, danger)
+- [ ] No hardcoded hex values when theme colors available
 
 ### Component & Styling
 - [ ] Checked HeroUI library first for component availability
-- [ ] Used HeroUI components via `src/components/ui/` wrappers (e.g., `<Button>` not `<button>`)
-- [ ] Configured component styles in wrapper/theme (not inline)
+- [ ] Used HeroUI components via `src/components/ui/` wrappers
+- [ ] Used `extendVariants` pattern with `defaultVariants` for component configuration
+- [ ] Kept component usage clean (no repetitive className props)
 - [ ] Used only layout utilities inline (`mt-4`, `hidden`, `lg:block`)
 - [ ] Applied Tailwind CSS classes only (no custom CSS, no CSS modules)
-- [ ] Used standard Tailwind classes instead of arbitrary values (e.g., `h-10` not `h-[40px]`)
+- [ ] Used standard Tailwind classes instead of arbitrary values
 - [ ] Followed HeroUI theme colors (bg-background, bg-primary, etc.)
 - [ ] Mapped all data from constants (no hardcoded menu items/dropdowns)
+- [ ] Created constants files for navigation items and menu options
 
-### Content & Navigation
+### Navigation
+- [ ] Used Next.js `Link` from `next/link` for internal navigation
+- [ ] Used `NAVIGATION_URLS` for ALL links (no hardcoded URLs)
+- [ ] Imported `usePathname`, `useRouter` from `next/navigation`
+- [ ] Implemented responsive navigation with HeroUI Navbar components
+- [ ] Created navigation items constants in `src/config/navigationItems.ts`
+
+### Content & i18n
 - [ ] ALL text uses i18n translation keys (no hardcoded text)
 - [ ] ALL labels use `t('labelKey')`
 - [ ] ALL placeholders use `t('placeholderKey')`
 - [ ] ALL error messages use `t('errorKey')`
 - [ ] ALL titles and headings use `t('titleKey')`
-- [ ] ALL URLs use `NAVIGATION_URLS` from config (no hardcoded URLs)
+- [ ] ALL button text use `t('buttonKey')`
 
 ### Structure & Types
 - [ ] Page created in correct location (`src/app/[locale]/...`)
 - [ ] Added TypeScript types for all data structures
 - [ ] Used `'use client'` for interactive components
 - [ ] No `any` types used
+- [ ] Used `as const` for constants type safety
 
 ### Forms & Validation
 - [ ] Implemented forms with Zod validation schemas
@@ -961,6 +961,7 @@ When converting Figma to code, ensure:
 - [ ] Added proper loading states
 - [ ] Added proper error states
 - [ ] Tested on multiple breakpoints (mobile, tablet, desktop)
+- [ ] Implemented responsive navigation menu
 
 ---
 
@@ -968,51 +969,72 @@ When converting Figma to code, ensure:
 
 Before finalizing code, verify:
 
+### Figma Integration
+1. **Figma MCP used** - Design fetched via Figma MCP server (not manual)
+2. **Design tokens extracted** - Colors, spacing, typography identified
+3. **Component mapping** - Figma components mapped to HeroUI
+
 ### Icons & Assets
 1. **Icons workflow** - All icons created via `pnpm generate-icons` (not manual)
-2. **Icons source** - SVG files exist in `src/assets/icons/`
-3. **Logos location** - All logos/images in `public/` directory (not `src/`)
-4. **Image format** - SVG used for logos when possible (not PNG)
+2. **Icon usage** - Using `<Icon name="IconName" />` pattern
+3. **Icons source** - SVG files exist in `src/assets/icons/`
+4. **Logos checked first** - Existing images verified before export
+5. **Logos location** - All logos/images in `public/images/` (not `src/`)
+6. **Image constants** - Centralized `src/config/images.ts` exists and is used
+7. **Image organization** - Images categorized (LOGOS, AUTH, WEBSITE, SERVICES)
+8. **No hardcoded paths** - All images referenced via `IMAGES.CATEGORY.NAME`
+9. **Image format** - SVG used for logos when possible (not PNG)
+
+### Colors & Theme
+1. **Theme colors used** - `bg-primary`, `text-primary` instead of hex values
+2. **Primary shades** - Correct use of primary-50 to primary-900
+3. **Semantic colors** - Using HeroUI semantic colors (success, danger, warning)
 
 ### Components & Styling
-1. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
+1. **HeroUI components first** - Verify HeroUI library was checked before custom
 2. **No direct HeroUI imports** - Only through `@/components/ui`
-3. **Component reuse** - Don't duplicate existing components
-4. **Use HeroUI components** - No HTML elements when HeroUI component exists (e.g., use `<Button>` not `<button>`)
-5. **Configure, don't inline** - Component styles in wrapper/theme, not inline classNames
-6. **Standard Tailwind classes** - No arbitrary values when standard class exists (e.g., `h-10` not `h-[40px]`)
-7. **Map from constants** - All menu items, dropdown options mapped from config files
-
-### i18n & Navigation
-5. **Zero hardcoded text** - ALL text uses `t('key')`
-6. **Zero hardcoded URLs** - ALL links use `NAVIGATION_URLS`
-7. **Form fields i18n** - Labels, placeholders, errors all use translation keys
-
-### Styling & Layout
-8. **Tailwind only** - No CSS modules, no styled-components
-9. **HeroUI theme colors** - Use semantic colors, not arbitrary values
-10. **Consistent spacing** - Use `space-y-*` and `space-x-*` utilities
-11. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
-
-### TypeScript & Validation
-12. **Proper TypeScript** - No `any`, all props typed
-13. **Form validation** - Zod schemas for all forms
+3. **Component configuration** - Using `extendVariants` with `defaultVariants`
+4. **Clean component usage** - No repetitive className props
+5. **Use HeroUI components** - No HTML elements when HeroUI component exists
+6. **Standard Tailwind classes** - No arbitrary values when standard class exists
+7. **Map from constants** - All menu items, dropdown options mapped from config
+
+### Navigation
+1. **Next.js Link** - Using `Link` from `next/link` (not HeroUI Link)
+2. **Navigation hooks** - Using `usePathname`, `useRouter` from `next/navigation`
+3. **HeroUI Navbar** - Using HeroUI Navbar components for main navigation
+4. **Navigation constants** - Items defined in `src/config/navigationItems.ts`
+5. **Responsive menu** - NavbarMenuToggle and NavbarMenu implemented
+
+### i18n & Content
+1. **Zero hardcoded text** - ALL text uses `t('key')`
+2. **Zero hardcoded URLs** - ALL links use `NAVIGATION_URLS`
+3. **Form fields i18n** - Labels, placeholders, errors all use translation keys
 
----
-
-## 📚 Reference Files
+### Structure & Types
+1. **Proper TypeScript** - No `any`, all props typed
+2. **Type safety** - `as const` used for constants
+3. **Client components** - `'use client'` where needed
 
-When in doubt, check these example files:
-- **Form example**: `src/components/ui/form/Form.tsx`
-- **Page example**: `src/app/[locale]/(auth)/login/page.tsx`
-- **Component example**: `src/components/ui/Input.tsx`
-- **Styles reference**: `src/styles/globals.css`
-- **Theme config**: `src/styles/hero.ts`
+### Responsive & UX
+1. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
+2. **Loading states** - Proper loading indicators
+3. **Error states** - Proper error handling and display
 
 ---
 
 ## 🚀 Quick Reference Guide
 
+### Figma MCP Workflow
+```
+1. Receive Figma URL from user
+2. Use Figma MCP server to fetch design
+3. Analyze pages, frames, components
+4. Extract design tokens and assets
+5. Map components to HeroUI
+6. Implement with proper patterns
+```
+
 ### Icons Workflow
 ```bash
 # 1. Export SVG from Figma
@@ -1022,19 +1044,30 @@ mv icon.svg src/assets/icons/
 # 3. Generate components
 pnpm generate-icons
 
-# 4. Use in code
-import { IconIcon } from '@/components/icons';
-<IconIcon className="size-5" />
+# 4. Use Icon component
+import { Icon } from '@/components/icons/Icon';
+<Icon name="Menu" className="size-6" />
+
+# OR use direct import
+import { MenuIcon } from '@/components/icons';
+<MenuIcon className="size-6" />
 ```
 
 ### Logos/Images Workflow
 ```bash
-# 1. Export SVG/PNG from Figma
-# 2. Place in public with organized folders
+# 1. Check if exists first
+# Check src/config/images.ts
+
+# 2. If doesn't exist, export from Figma
+# Export as SVG (preferred) or PNG
+
+# 3. Place in public with organized folders
 mv logo.svg public/images/logos/
+mv hero-bg.webp public/images/website/
+
+# 4. Update centralized constants file
+# Edit src/config/images.ts
 
-# 3. Create centralized constants file
-# src/config/images.ts
 const LOGOS = {
   PRIMARY: '/images/logos/logo-primary.svg',
   ICON: '/images/logos/logo-icon.svg',
@@ -1049,11 +1082,60 @@ export const IMAGES = {
   WEBSITE,
 } as const;
 
-# 4. Use in code
+# 5. Use in code
 import { IMAGES } from '@/config/images';
 <img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
-# OR
-<Image src={IMAGES.LOGOS.PRIMARY} alt="Logo" width={120} height={40} />
+```
+
+### Component Configuration Pattern
+```tsx
+// File: src/components/ui/Button.tsx
+import { extendVariants, Button as HeroUIButton } from '@heroui/react';
+
+export const Button = extendVariants(HeroUIButton, {
+  variants: {
+    color: {
+      primary: 'bg-primary-600 text-black hover:bg-primary-500',
+    },
+    size: {
+      md: 'h-10 px-4 text-sm',
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+    radius: 'full',
+  },
+});
+
+// Usage - Clean and simple:
+<Button>Click Me</Button>
+<Button color="secondary" size="lg">Large</Button>
+```
+
+### Navigation with HeroUI Navbar
+```tsx
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@heroui/react';
+import Link from 'next/link';
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
+import { IMAGES } from '@/config/images';
+import { mainNavigationItems } from '@/config/navigationItems';
+
+<Navbar>
+  <NavbarBrand>
+    <Link href={NAVIGATION_URLS.ROOT}>
+      <img src={IMAGES.LOGOS.PRIMARY} alt={t('logoAlt')} className="h-10" />
+    </Link>
+  </NavbarBrand>
+
+  <NavbarContent>
+    {mainNavigationItems.map((item) => (
+      <NavbarItem key={item.key}>
+        <Link href={item.href}>{t(item.labelKey)}</Link>
+      </NavbarItem>
+    ))}
+  </NavbarContent>
+</Navbar>
 ```
 
 ### Tailwind Standard Classes
@@ -1072,48 +1154,32 @@ text-base = 16px  text-2xl = 24px
 text-lg = 18px    text-3xl = 30px
 
 // Use standard class if within 2-4px of target
-// Only use arbitrary [value] for design tokens
 ```
 
-### Common Patterns
+### Primary Colors Usage
 ```tsx
-// Icons (auto-generated)
-import { MenuIcon, CloseIcon } from '@/components/icons';
-<MenuIcon className="size-6 text-white" />
-
-// Logos (centralized constants)
-import { IMAGES } from '@/config/images';
-<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
-
-// Navigation (Next.js Link + constants)
-import Link from 'next/link';
-import { NAVIGATION_URLS } from '@/config/navigationUrls';
-<Link href={NAVIGATION_URLS.ABOUT}>{t('about')}</Link>
-
-// Navigation hooks (from next/navigation)
-import { usePathname, useRouter } from 'next/navigation';
-const pathname = usePathname();
-const router = useRouter();
-
-// Translation (all text)
-const t = useTranslations('namespace');
-<h1>{t('title')}</h1>
-
-// Components (use HeroUI, not HTML)
-import { Button } from '@/components/ui';
-<Button color="primary">Click</Button>  // ✅
-<button>Click</button>                  // ❌
-
-// Data mapping (from constants)
-const menuItems = [
-  { key: 'home', labelKey: 'home', href: NAVIGATION_URLS.ROOT },
-];
-{menuItems.map(item => <Item key={item.key}>{t(item.labelKey)}</Item>)}
-
-// Responsive (mobile-first)
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+// Use theme primary colors (from hero.ts)
+<Button color="primary">         {/* Uses primary-600 (#25C780) */}
+<div className="bg-primary">     {/* DEFAULT = #25C780 */}
+<div className="bg-primary-50">  {/* Lightest shade */}
+<div className="bg-primary-600"> {/* Same as DEFAULT */}
+<div className="bg-primary-900"> {/* Darkest shade */}
+
+// Text colors
+<p className="text-primary">
+<p className="text-primary-700">
 ```
 
 ---
 
-**Remember**: This project has a well-defined structure and component library. Your job is to use them correctly, not to reinvent them. Stay within the boundaries of the existing architecture.
+**Remember**: This project has a well-defined structure, component library, and strict patterns. Your job is to use them correctly by:
+1. **Always using Figma MCP** to fetch design details
+2. **Following the Icon component pattern** for cleaner code
+3. **Creating and maintaining centralized image constants**
+4. **Checking existing images before exporting** from Figma
+5. **Using extendVariants with defaultVariants** for component configuration
+6. **Using theme colors** (primary-600, primary-50, etc.) instead of hardcoded values
+7. **Implementing HeroUI Navbar** for navigation components
+8. **Mapping all data from constants** - never hardcode
+
+Stay within the boundaries of the existing architecture.