@adlas/create-app 1.0.47 → 1.0.49

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -4,55 +4,340 @@
 
 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
 2. **Use ONLY existing components** - Never create custom implementations when project components exist
 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. **HeroUI icons only** - Use icons from HeroUI Figma Kit: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
-6. **Follow project structure** - Place files in correct locations as defined below
-7. **Match coding patterns** - Use the same patterns found in existing code
-8. **Type safety first** - Use TypeScript strictly, no `any` types
+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/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
+10. **Type safety first** - Use TypeScript strictly, no `any` types
 
 ---
 
-## 🎨 Component Priority & Usage Strategy
+## 🎨 Component Configuration & Customization
+
+### CRITICAL: Component Styles Must Be Configured, Not Inline
+
+**❌ WRONG - Inline custom styles**:
+```tsx
+// Don't apply component-specific styles inline
+<Button className="h-10 rounded-full bg-[#19ffa3] px-4 text-sm text-black">
+  Click Me
+</Button>
+
+// Don't use HTML elements when HeroUI component exists
+<button onClick={handler}>Click</button>
+```
+
+**✅ CORRECT - Configure in component wrapper with defaultVariants**:
+```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',
+      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 - Clean and declarative:
+<Button>Click Me</Button>  // Uses defaultVariants
+<Button color="secondary" size="lg">Large Button</Button>
+```
+
+**When to configure vs use inline**:
+- ✅ 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, border radius)
 
-### 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-
+### extendVariants Pattern
 
-### 2. Component Selection Flow
+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',
+  },
+});
 ```
-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
+**Benefits**:
+- Clean component usage without repetitive className
+- Consistent styling across the application
+- Easy to maintain and update
+- Type-safe variants
 
-3. Build with Tailwind CSS utilities
-   → Use HeroUI theme colors and patterns
-   → Follow mobile-first responsive design
+### Data Must Be Mapped from Constants
+
+**❌ WRONG - Hardcoded data**:
+```tsx
+<DropdownMenu>
+  <DropdownItem key="option1">Option 1</DropdownItem>
+  <DropdownItem key="option2">Option 2</DropdownItem>
+  <DropdownItem key="option3">Option 3</DropdownItem>
+</DropdownMenu>
 ```
 
-### 3. Example Decision Tree
+**✅ CORRECT - Map from constants**:
 ```tsx
-// Need a Button?
-import { Button } from '@/components/ui';  // ✅ Use HeroUI Button wrapper
+// File: src/config/menuOptions.ts
+export const productMenuItems = [
+  { 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) => (
+    <DropdownItem key={item.key} href={item.href}>
+      {t(item.labelKey)}
+    </DropdownItem>
+  ))}
+</DropdownMenu>
+```
 
-// Need an Input?
-import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
+---
+
+## 🎨 Color Palette & Theme
+
+### Primary Colors (from hero.ts)
+
+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
+}
+```
 
-// 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
+### Using Primary Colors in Code
+
+```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 */}
 ```
 
+### 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
+'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';
+
+// 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();
+
+  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
@@ -64,177 +349,380 @@ 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
+
+**Modern Approach**: Use a centralized `Icon` component that dynamically renders icons:
 
-#### Input Fields
 ```tsx
-import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
-
-// Text Input
-<Input
-  label="Email"
-  placeholder="Enter your email"
-  type="email"
-  isRequired
-/>
+// File: src/components/icons/Icon.tsx
+import dynamic from 'next/dynamic';
+import type { SVGProps } from 'react';
 
-// Password Input (with show/hide toggle)
-<PasswordInput
-  label="Password"
-  placeholder="Enter password"
-  isRequired
-/>
+interface IconProps extends SVGProps<SVGSVGElement> {
+  name: string;  // Icon name without "Icon" suffix
+}
 
-// Number Input (with increment/decrement)
-<NumberInput
-  label="Quantity"
-  min={1}
-  max={100}
-  defaultValue={1}
-/>
+export function Icon({ name, ...props }: IconProps) {
+  const IconComponent = dynamic(() =>
+    import(`./index`).then((mod) => mod[`${name}Icon`])
+  );
 
-// Textarea
-<Textarea
-  label="Description"
-  placeholder="Enter description"
-  rows={4}
-/>
+  return <IconComponent {...props} />;
+}
+
+// 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" />
 ```
 
-#### Selection Components
-```tsx
-import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
+**Benefits**:
+- No need to import individual icons
+- Cleaner component code
+- Easy to swap icons by changing name prop
+- Consistent icon rendering
 
-// Select Dropdown
-<Select
-  label="Country"
-  placeholder="Select country"
-  items={countries}
-/>
+### Icon Generation Workflow
 
-// Radio Group
-<RadioGroup
-  label="Size"
-  options={[
-    { value: 's', label: 'Small' },
-    { value: 'm', label: 'Medium' },
-    { value: 'l', label: 'Large' },
-  ]}
-/>
+1. **Export SVG from Figma**
+   - Select icon in Figma
+   - Export as SVG (not PNG/JPG)
+   - Download the SVG file
 
-// Checkbox
-<Checkbox>I agree to terms</Checkbox>
+2. **Place in Icons Folder**
+   ```bash
+   mv downloaded-icon.svg src/assets/icons/icon-name.svg
+   ```
 
-// Autocomplete (with search)
-<Autocomplete
-  label="Search"
-  items={suggestions}
-  placeholder="Type to search..."
-/>
-```
+3. **Generate React Components**
+   ```bash
+   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
+
+4. **Use with Icon Component**
+   ```tsx
+   import { Icon } from '@/components/icons/Icon';
+
+   <Icon name="ChevronDown" className="size-5 text-white" />
+   ```
+
+### Alternative: Direct Import (When Needed)
+
+If you need direct imports for tree-shaking or specific use cases:
 
-#### Date & Time
 ```tsx
-import { DatePicker } from '@/components/ui';
+import { ChevronDownIcon, MenuIcon } from '@/components/icons';
 
-<DatePicker
-  label="Select Date"
-  placeholderValue={new CalendarDate(2024, 1, 1)}
-/>
+<ChevronDownIcon className="size-5 text-white" />
+<MenuIcon className="size-6" />
 ```
 
-#### Buttons
-```tsx
-import { Button } from '@/components/ui';
+**Available Icons** (auto-generated):
+- ChevronDownIcon, ChevronRightIcon
+- CloseIcon, MenuIcon
+- EyeIcon, EyeSlashIcon
+- AddIcon, AddCircleIcon
+- ArrowUpIcon, ArrowCircleDownIcon
+- DotsVerticalIcon, FrameIcon
+- And more...
+
+**❌ DO NOT**:
+- Use Lucide, Font Awesome, or other icon libraries
+- 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
+- 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
 
-<Button color="primary" size="md">
-  Submit
-</Button>
+---
 
-<Button color="secondary" variant="bordered">
-  Cancel
-</Button>
+## 🖼️ Logos & Images
+
+### CRITICAL WORKFLOW: Centralized Image Constants
+
+**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: Organize in Public Folder**
+
+```bash
+public/
+└── images/
+    ├── 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
+```
 
-<Button isLoading>
-  Processing...
-</Button>
+**Step 3: Create Centralized Image Constants**
+
+**CRITICAL**: Always create and maintain `src/config/images.ts`:
+
+```typescript
+// src/config/images.ts
+
+/**
+ * Centralized image path constants
+ *
+ * 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 = {
+  PRIMARY_CIRCLE: '/images/logos/logo-circle-primary.svg',
+  SECONDARY_CIRCLE: '/images/logos/logo-circle-secondary.svg',
+  FULL: '/images/logos/logo-full.svg',
+  FULL_BLACK: '/images/logos/logo-full-black.svg',
+  FULL_WHITE: '/images/logos/logo-full-white.svg',
+  ICON: '/images/logos/logo-icon.svg',
+} as const;
+
+const AUTH = {
+  LOGIN_BG: '/images/auth/login-background.jpg',
+  SIGNUP_BG: '/images/auth/signup-background.jpg',
+  RESET_PASSWORD: '/images/auth/reset-password.jpg',
+} as const;
+
+const WEBSITE = {
+  HOME_HERO: '/images/website/home-hero.webp',
+  HOME_NEWSLETTER: '/images/website/home-newsletter.webp',
+  ABOUT_HEADER: '/images/website/about-header.jpg',
+  CONTACT_MAP: '/images/website/contact-map.png',
+} as const;
+
+const SERVICES = {
+  HEADER: '/images/services/services-header.webp',
+  FEATURE_1: '/images/services/feature-1.jpg',
+  FEATURE_2: '/images/services/feature-2.jpg',
+} as const;
+
+const PRODUCTS = {
+  THUMBNAIL_DEFAULT: '/images/products/thumbnail-default.png',
+  HERO: '/images/products/hero-banner.jpg',
+} as const;
+
+export const IMAGES = {
+  LOGOS,
+  AUTH,
+  WEBSITE,
+  SERVICES,
+  PRODUCTS,
+} as const;
 ```
 
-#### Other Components
+**Step 4: Reference in Components**
+
 ```tsx
-import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
+import { IMAGES } from '@/config/images';
+import Image from 'next/image';
+
+// ✅ Using Next.js Image component (recommended for optimization)
+<Image
+  src={IMAGES.LOGOS.FULL}
+  alt="Company Logo"
+  width={120}
+  height={40}
+  priority
+/>
 
-// Modal
-<Modal
-  isOpen={isOpen}
-  onClose={onClose}
-  title="Modal Title"
+// ✅ 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-cover bg-center"
+  style={{ backgroundImage: `url(${IMAGES.WEBSITE.HOME_HERO})` }}
 >
-  Modal content
-</Modal>
-
-// Chip (badges/tags)
-<Chip color="success" variant="flat">
-  Active
-</Chip>
-
-// Breadcrumbs
-<Breadcrumbs
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Products', href: '/products' },
-  ]}
+
+// ✅ In authentication pages
+<Image
+  src={IMAGES.AUTH.LOGIN_BG}
+  alt="Login background"
+  fill
+  className="object-cover"
 />
 
-// Tabs
-<Tabs
-  items={[
-    { key: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
-    { key: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
-  ]}
+// ✅ In service pages
+<Image
+  src={IMAGES.SERVICES.HEADER}
+  alt="Services"
+  width={1920}
+  height={600}
+  className="w-full"
 />
 ```
 
-### Icons
+### Image Format Preference Order
 
-**IMPORTANT**: ALL icons MUST come from HeroUI Figma Kit
-- **Figma Source**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
-- **Available in project**: ChevronDown, ChevronRight, Close, Eye, EyeSlash
+1. ✅ **SVG** - Best for logos, icons, and vector graphics (scalable, small file size)
+2. ✅ **WebP** - Modern format for photos (better compression than PNG/JPG)
+3. ✅ **PNG** - For images requiring transparency
+4. ✅ **JPG** - For photos without transparency
 
-```tsx
-import { ChevronDownIcon, ChevronRightIcon, CloseIcon, EyeIcon, EyeSlashIcon } from '@/components/icons';
+### CRITICAL: Check Before Export Workflow
 
-<ChevronDownIcon className="h-4 w-4" />
-```
+Before exporting any logo or image from Figma:
 
-**For icons not yet in project**:
-1. Find the icon in HeroUI Figma Kit
-2. Create a new icon component in `src/components/icons/` following the existing pattern
-3. Export it from `src/components/icons/index.ts`
+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
 
-**DO NOT use Lucide, Font Awesome, or other icon libraries**
+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** (CRITICAL ERROR)
+- Export images that already exist in the project
+
+**✅ DO**:
+- 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 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
 
 ---
 
 ## 🎨 Tailwind CSS Guidelines
 
+### Using Standard Tailwind Classes
+
+**CRITICAL**: Always use closest standard Tailwind class instead of custom arbitrary values
+
+**Common Conversions**:
+```tsx
+// ❌ WRONG - Custom arbitrary values
+className="h-[41px] w-[54.6px]"
+className="p-[24px]"
+className="text-[14px]"
+className="gap-[11px]"
+
+// ✅ CORRECT - Standard Tailwind classes
+className="h-10 w-14"        // h-10 = 40px, w-14 = 56px (closest to 54.6px)
+className="p-6"              // p-6 = 24px
+className="text-sm"          // text-sm = 14px
+className="gap-3"            // gap-3 = 12px (closest to 11px)
+```
+
+**Tailwind Size Reference**:
+```css
+/* Spacing Scale (padding, margin, gap, etc.) */
+0.5 = 2px    4  = 16px    12 = 48px
+1   = 4px    5  = 20px    14 = 56px
+2   = 8px    6  = 24px    16 = 64px
+3   = 12px   8  = 32px    20 = 80px
+3.5 = 14px   10 = 40px    24 = 96px
+
+/* Font Sizes */
+xs   = 12px (0.75rem)
+sm   = 14px (0.875rem)
+base = 16px (1rem)
+lg   = 18px (1.125rem)
+xl   = 20px (1.25rem)
+2xl  = 24px (1.5rem)
+3xl  = 30px (1.875rem)
+
+/* Width/Height */
+auto, full, screen, fit, min, max
+4-96 (in increments of 4px)
+```
+
+**Only use arbitrary values when**:
+- Exact pixel value is required by design system
+- No standard Tailwind class is close enough
+- Using design tokens/CSS variables: `bg-[var(--custom-color)]`
+
 ### Responsive Breakpoints (Mobile-First)
 ```css
 /* Mobile */
@@ -255,124 +743,53 @@ 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
+## 🌐 Internationalization (i18n)
 
-### Pattern to Follow
-```tsx
-'use client';
+**CRITICAL**: ALL text content MUST use i18n translation keys
 
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+### Navigation with i18n
 
-import { Button, Input } from '@/components/ui';
+**Import Guidelines**:
+```tsx
+// For Link component - use Next.js Link
+import Link from 'next/link';
 
-// 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'),
-});
+// For navigation hooks - use next/navigation
+import { usePathname, useRouter } from 'next/navigation';
 
-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>
-  );
-}
+// For navigation URLs - use centralized constants
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
 ```
 
----
-
-## 🌐 Internationalization (i18n)
-
-**CRITICAL**: ALL text content MUST use i18n translation keys
-
-### Navigation with i18n
+**Navigation Example**:
 ```tsx
-import { Link } from '@/libs/I18nNavigation';
+import Link from 'next/link';
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
-// ✅ CORRECT - Using NAVIGATION_URLS
+// ✅ CORRECT - Using Next.js Link with NAVIGATION_URLS
 <Link href={NAVIGATION_URLS.ABOUT}>About</Link>
 
 // ❌ WRONG - Hardcoded URL
 <Link href="/about">About</Link>
+
+// ❌ WRONG - Using HeroUI Link for internal navigation
+import { Link } from '@heroui/react';
+<Link href={NAVIGATION_URLS.ABOUT}>About</Link>
 ```
 
 ### Translations for ALL text
@@ -395,152 +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. ❌ Use non-HeroUI icons (Lucide, Font Awesome, etc.) - ONLY use HeroUI Figma Kit icons
-2. ❌ Hardcode ANY text - ALL text MUST use i18n translation keys
-3. ❌ Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
-4. ❌ Create custom components when HeroUI provides them - check HeroUI first, then project components
-5. ❌ Use CSS modules or styled-components - ONLY Tailwind CSS
-6. ❌ Import from `@heroui/react` directly (use `@/components/ui` wrappers)
-7. ❌ Create duplicate utility functions (check `src/utils/helpers.ts` first)
-8. ❌ Use `any` type in TypeScript
-9. ❌ Ignore responsive design (always implement mobile-first)
-10. ❌ 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. ✅ Use HeroUI components first (check HeroUI library before creating custom components)
-2. ✅ Use icons ONLY from HeroUI Figma Kit
-3. ✅ Use i18n translation keys for ALL text (labels, placeholders, titles, errors, etc.)
-4. ✅ Use `NAVIGATION_URLS` for ALL navigation links
-5. ✅ Use existing UI components from `src/components/ui/`
-6. ✅ Use Tailwind CSS ONLY for styling (no CSS modules, no styled-components)
-7. ✅ Implement TypeScript strictly with proper types
-8. ✅ Use `'use client'` directive for interactive components
-9. ✅ Follow mobile-first responsive design
-10. ✅ Use semantic color classes from HeroUI theme
-11. ✅ Implement proper loading and error states
-12. ✅ 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
 
 ---
 
@@ -548,26 +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
+- [ ] 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/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.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
-- [ ] Used ONLY HeroUI Figma Kit icons (no Lucide, Font Awesome, etc.)
+- [ ] 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
 - [ ] 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
@@ -580,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
 
 ---
 
@@ -587,38 +969,217 @@ When converting Figma to code, ensure:
 
 Before finalizing code, verify:
 
-### Icons & Components
-1. **Icons from HeroUI only** - Check all icons come from HeroUI Figma Kit
-2. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
-3. **No direct HeroUI imports** - Only through `@/components/ui`
-4. **Component reuse** - Don't duplicate existing components
-
-### 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
+### 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. **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
+2. **No direct HeroUI imports** - Only through `@/components/ui`
+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
 
-### 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.
+### 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
 
-### TypeScript & Validation
-12. **Proper TypeScript** - No `any`, all props typed
-13. **Form validation** - Zod schemas for all forms
+### 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
 
 ---
 
-## 📚 Reference Files
+## 🚀 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
+# 2. Place in folder
+mv icon.svg src/assets/icons/
+
+# 3. Generate components
+pnpm generate-icons
 
-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`
+# 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. 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
+
+const LOGOS = {
+  PRIMARY: '/images/logos/logo-primary.svg',
+  ICON: '/images/logos/logo-icon.svg',
+} as const;
+
+const WEBSITE = {
+  HOME_HERO: '/images/website/home-hero.webp',
+} as const;
+
+export const IMAGES = {
+  LOGOS,
+  WEBSITE,
+} as const;
+
+# 5. Use in code
+import { IMAGES } from '@/config/images';
+<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
+```
+
+### 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
+```tsx
+// Heights/Widths
+h-10 = 40px    w-14 = 56px    size-5 = 20px
+h-12 = 48px    w-20 = 80px    size-6 = 24px
+
+// Spacing
+p-6 = 24px     gap-3 = 12px    m-4 = 16px
+p-8 = 32px     gap-4 = 16px    m-8 = 32px
+
+// Text
+text-sm = 14px    text-xl = 20px
+text-base = 16px  text-2xl = 24px
+text-lg = 18px    text-3xl = 30px
+
+// Use standard class if within 2-4px of target
+```
+
+### Primary Colors Usage
+```tsx
+// 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.