@adlas/create-app 1.0.49 → 1.0.50

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -4,86 +4,53 @@
 
 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:
+## 🔗 Working with Figma MCP Server
 
-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
+### CRITICAL: Use Figma Link, NOT Screenshots
 
-### Setup Verification
+**❌ NEVER use screenshots** - Screenshots lose design data, measurements, and context
 
-Before starting, verify MCP server is working:
+**✅ ALWAYS use Figma MCP server with node links**:
 
-```bash
-# Check if Figma server is connected in Claude Desktop
-# You should see "figma" in available MCP servers
+```typescript
+// Use get_design_context tool with node-id from Figma URL
+// Example URL: https://figma.com/design/:fileKey/:fileName?node-id=8486-1580
+// Extract node-id: 8486-1580 → use as: "8486:1580"
+
+mcp__figma -
+  dev -
+  mode -
+  mcp -
+  server__get_design_context({
+    nodeId: "8486:1580",
+    clientLanguages: "typescript",
+    clientFrameworks: "react,nextjs",
+  });
 ```
 
-### 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
+**Benefits of using Figma MCP**:
 
-### 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
-```
+- ✅ Get exact measurements, colors, and spacing
+- ✅ Access design tokens and styles
+- ✅ See component structure and hierarchy
+- ✅ Get accurate typography settings
+- ✅ Extract assets and icons properly
 
-**Important**: Always use Figma MCP server to fetch design details. Never ask user to manually describe the design.
-
----
+**Do NOT call `get_screenshot`** - The design context provides all needed information
 
 ## 🎯 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. **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
+1. **Use Figma MCP Server** - ALWAYS use `get_design_context` with Figma node links, NEVER screenshots
+2. **Use HeroUI components first** - Always prefer HeroUI components. Only use Tailwind CSS for custom styling when HeroUI doesn't provide the component
+3. **Use ONLY existing components** - Never create custom implementations when project components exist
+4. **i18n for ALL text** - ALL labels, placeholders, titles, error messages MUST use translation keys
+5. **Navigation from config** - NEVER hardcode URLs. Always use `NAVIGATION_URLS` from config
+6. **Icons workflow** - Export SVG from Figma → Place in `src/assets/icons/` → Run `pnpm generate-icons` → Use generated TSX components
+7. **Logos workflow** - Export SVG/PNG from Figma → Place in `public/` → Reference via path (prefer SVG over PNG)
+8. **Use Tailwind standard classes** - Use closest Tailwind class instead of custom values (e.g., `h-10` not `h-[41px]`)
+9. **Follow project structure** - Place files in correct locations as defined below
+10. **Match coding patterns** - Use the same patterns found in existing code
+11. **Type safety first** - Use TypeScript strictly, no `any` types
 
 ---
 
@@ -91,27 +58,35 @@ When you receive a Figma URL:
 
 ### CRITICAL: Component Styles Must Be Configured, Not Inline
 
-**❌ WRONG - Inline custom styles**:
+**❌ WRONG - Inline component styles**:
+
 ```tsx
-// Don't apply component-specific styles inline
+// DON'T: Apply component-specific styles inline via className
 <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
+// DON'T: Mix props and className for same property
+<Button size="md" className="h-10 px-4">  {/* redundant */}
+  Click Me
+</Button>
+
+// DON'T: Use HTML elements when HeroUI component exists
 <button onClick={handler}>Click</button>
 ```
 
-**✅ CORRECT - Configure in component wrapper with defaultVariants**:
+**✅ CORRECT - Use props and configured variants**:
+
 ```tsx
+// Step 1: Configure variants in component wrapper
 // 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',
+      // ✅ Use theme colors from hero.ts, NOT custom colors
+      primary: 'bg-primary text-black',
     },
     size: {
       sm: 'h-8 px-3 text-xs',
@@ -120,58 +95,112 @@ export const Button = extendVariants(HeroUIButton, {
     },
   },
   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>
+// Step 2: Use ONLY props in components (NO className for component styles)
+import { Button } from '@/components/ui';
+
+<Button color="primary">  {/* size="md" not needed - it's the default */}
+  Click Me
+</Button>
+
+// ✅ className ONLY for layout utilities
+<Button
+  color="primary"  {/* Only specify non-default variants */}
+  className="mt-4 hidden lg:block"  // Layout utilities only
+>
+  Click Me
+</Button>
+
+// ✅ Override default when needed
+<Button color="primary" size="lg">  {/* Explicitly override default size */}
+  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)
+**Component Style Rules**:
 
-### extendVariants Pattern
+- ✅ **Configure in wrapper**: All component-specific styles (height, padding, colors, text size)
+- ✅ **Set defaultVariants**: Define defaults in wrapper so you don't repeat them in usage
+- ✅ **Use theme colors**: `bg-primary`, `bg-secondary`, `bg-success`, `bg-danger`, `bg-warning` from hero.ts
+- ✅ **Use props**: Only specify props that differ from defaults (e.g., `color="primary"`, `size="lg"`)
+- ✅ **Use HeroUI props for styling**: HeroUI components have built-in props like `radius`, `isRounded`, etc.
+- ✅ **className for layout ONLY**: `mt-4`, `hidden`, `lg:block`, `justify-start`, `text-white`
+- ❌ **NEVER use custom colors**: `bg-[#19ffa3]`, `text-[#ff0000]` - Use theme colors instead
+- ❌ **NEVER use hover states in config**: `hover:bg-[#00e68a]` - HeroUI handles hover states
+- ❌ **NEVER className for**: `h-10`, `px-4`, `text-sm`, `bg-[color]`, `rounded-full`
+- ❌ **NEVER repeat defaultVariants**: Don't specify `size="md"` if `md` is already the default
 
-Use `extendVariants` from HeroUI to create configured component wrappers:
+**Color Usage Rules**:
 
 ```tsx
-import { extendVariants, Input as HeroUIInput } from '@heroui/react';
+// ✅ CORRECT - Use theme colors from hero.ts or globals.css
+color: {
+  primary: 'bg-primary text-black',
+  secondary: 'bg-secondary text-white',
+  success: 'bg-success text-white',
+}
+
+// ❌ WRONG - Custom color values or hover states
+color: {
+  primary: 'bg-[#19ffa3] text-black hover:bg-[#00e68a]',  // Don't use hex or hover
+  custom: 'bg-[rgb(25,255,163)]',  // Don't use rgb
+}
 
-export const Input = extendVariants(HeroUIInput, {
+// Available theme colors (from hero.ts):
+primary-50, primary-100, ..., primary-500, ..., primary-900
+// And HeroUI defaults:
+secondary, success, danger, warning, default, foreground, background
+```
+
+**What goes where**:
+
+```tsx
+// In Button.tsx configuration:
+const Button = extendVariants(HerouiButton, {
   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',
+      sm: 'h-8 px-3 text-xs',
+      md: 'h-10 px-4 text-sm',      // Height, padding, text size
+      lg: 'h-12 px-6 text-base',
+    },
+    color: {
+      primary: 'bg-primary text-black',  // Theme colors ONLY, NO hover states
     },
   },
   defaultVariants: {
-    variant: 'flat',
-    size: 'md',
-    radius: 'lg',
+    size: 'md',  // Default size - no need to specify in usage
   },
 });
-```
 
-**Benefits**:
-- Clean component usage without repetitive className
-- Consistent styling across the application
-- Easy to maintain and update
-- Type-safe variants
+// In component usage:
+<Button
+  color="primary"              // ✅ Specify only when different from default
+  radius="full"                // ✅ HeroUI built-in prop (don't configure in wrapper)
+  className="mt-4 hidden lg:block"  // ✅ Layout utilities only
+>
+  {t('navbar.bookDemo')}      // ✅ i18n text
+</Button>
+// Note: size="md" NOT needed because it's the defaultVariant
+
+// Using size prop when you need different size:
+<Button color="primary" size="lg">  // ✅ Override default size
+  Large Button
+</Button>
+
+// Using Icon component:
+import { Icon } from '@/components/ui';
+
+<Icon name="ChevronDownIcon" className="size-4" />  // ✅ CORRECT - PascalCase name
+<ChevronDownIcon className="size-4" />              // ❌ WRONG - Don't import individual icons
+```
 
 ### Data Must Be Mapped from Constants
 
 **❌ WRONG - Hardcoded data**:
+
 ```tsx
 <DropdownMenu>
   <DropdownItem key="option1">Option 1</DropdownItem>
@@ -181,19 +210,17 @@ export const Input = extendVariants(HeroUIInput, {
 ```
 
 **✅ CORRECT - Map from constants**:
+
 ```tsx
 // 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;
+  { key: "analytics", labelKey: "product.analytics", href: "/analytics" },
+  { key: "insights", labelKey: "product.insights", href: "/insights" },
+  { key: "reports", labelKey: "product.reports", href: "/reports" },
+];
 
 // Usage:
-import { productMenuItems } from '@/config/menuOptions';
-import { useTranslations } from 'next-intl';
-
-const t = useTranslations();
+import { productMenuItems } from "@/config/menuOptions";
 
 <DropdownMenu>
   {productMenuItems.map((item) => (
@@ -201,254 +228,336 @@ const t = useTranslations();
       {t(item.labelKey)}
     </DropdownItem>
   ))}
-</DropdownMenu>
+</DropdownMenu>;
 ```
 
 ---
 
-## 🎨 Color Palette & Theme
+## 🎨 Component Priority & Usage Strategy
 
-### Primary Colors (from hero.ts)
+### 1. Check HeroUI First
 
-The project uses a custom primary color palette defined in `src/styles/hero.ts`:
+Before creating ANY component, check if HeroUI provides it:
 
-```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
-}
-```
+- **HeroUI Documentation**: https://heroui.com/docs/components
+- **HeroUI Figma Kit**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-
 
-### Using Primary Colors in Code
+### 2. Component Selection Flow
 
-```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 */}
 ```
+1. Does HeroUI have this component?
+   → YES: Use HeroUI component (via @/components/ui wrapper if exists)
+   → NO: Go to step 2
 
-### 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.
-
----
+2. Does project have wrapper in src/components/ui/?
+   → YES: Use the wrapper
+   → NO: Go to step 3
 
-## 🧭 Navigation Components
-
-### Navbar Component with HeroUI
+3. Build with Tailwind CSS utilities
+   → Use HeroUI theme colors and patterns
+   → Follow mobile-first responsive design
+```
 
-When implementing navigation from Figma, use HeroUI Navbar component:
+### 3. Example Decision Tree
 
 ```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';
+// Need a Button?
+import { Button } from '@/components/ui';  // ✅ Use HeroUI Button 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;
+// Need an Input?
+import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
 
-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>
-  );
-}
+// 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
 ```
 
-**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
 
 ### Pages Location
+
 - **With i18n**: `src/app/[locale]/(route-group)/page.tsx`
 - **Without i18n**: `src/app/(route-group)/page.tsx`
 
 ### Components Location
+
 ```
 src/components/
-├── ui/              # Reusable UI components (HeroUI wrappers with extendVariants)
-├── icons/           # Auto-generated icon components (DO NOT manually edit)
+├── ui/              # Reusable UI components (HeroUI wrappers)
+├── icons/           # Icon components
 ├── 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` (Primary colors defined here)
+- **Theme config**: `src/styles/hero.ts`
 - **Approach**: Tailwind CSS utility classes ONLY
 - **NO CSS modules, NO styled-components, NO inline styles**
 
 ---
 
-## 🖼️ Icons
+## 🎨 Available UI Components
+
+### Navigation Components
 
-### CRITICAL WORKFLOW: Icon Component Pattern
+#### Navbar (HeroUI)
 
-**Modern Approach**: Use a centralized `Icon` component that dynamically renders icons:
+**CRITICAL**: Always use HeroUI Navbar component for navigation bars:
 
 ```tsx
-// File: src/components/icons/Icon.tsx
-import dynamic from 'next/dynamic';
-import type { SVGProps } from 'react';
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenu,
+  NavbarMenuItem,
+  NavbarMenuToggle,
+} from "@heroui/react";
+import { Button } from "@/components/ui";
+
+<Navbar maxWidth="full" className="bg-black border-b-2">
+  {/* Logo */}
+  <NavbarBrand as={Link} href="/">
+    <img src="/logo.svg" alt="Logo" />
+  </NavbarBrand>
 
-interface IconProps extends SVGProps<SVGSVGElement> {
-  name: string;  // Icon name without "Icon" suffix
-}
+  {/* Desktop Menu */}
+  <NavbarContent className="hidden lg:flex" justify="center">
+    <NavbarItem>
+      <Button variant="light">Menu Item</Button>{" "}
+      {/* size="md" omitted - it's default */}
+    </NavbarItem>
+  </NavbarContent>
 
-export function Icon({ name, ...props }: IconProps) {
-  const IconComponent = dynamic(() =>
-    import(`./index`).then((mod) => mod[`${name}Icon`])
-  );
+  {/* CTA */}
+  <NavbarContent className="hidden lg:flex" justify="end">
+    <NavbarItem>
+      <Button color="primary">CTA</Button>{" "}
+      {/* size="md" omitted - it's default */}
+    </NavbarItem>
+  </NavbarContent>
 
-  return <IconComponent {...props} />;
-}
+  {/* Mobile Toggle */}
+  <NavbarMenuToggle className="lg:hidden" />
+
+  {/* Mobile Menu */}
+  <NavbarMenu>
+    <NavbarMenuItem>
+      <Button variant="light" fullWidth>
+        Menu Item
+      </Button>
+    </NavbarMenuItem>
+  </NavbarMenu>
+</Navbar>;
+```
+
+**Key Points**:
+
+- ✅ Use `Navbar` from `@heroui/react`
+- ✅ Use `Button` from `@/components/ui` for menu items
+- ✅ Use props (`color`, `size`, `variant`) NOT className for styles
+- ✅ className ONLY for layout (`hidden`, `lg:flex`, `bg-black`)
+- ❌ DON'T use custom `<header>` or `<nav>` tags
+
+### Form Components
+
+All located in `src/components/ui/`:
+
+#### 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}
+/>
+
+// 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' },
+  ]}
+/>
+
+// Checkbox
+<Checkbox>I agree to terms</Checkbox>
+
+// Autocomplete (with search)
+<Autocomplete
+  label="Search"
+  items={suggestions}
+  placeholder="Type to search..."
+/>
+```
+
+#### Date & Time
+
+```tsx
+import { DatePicker } from "@/components/ui";
+
+<DatePicker
+  label="Select Date"
+  placeholderValue={new CalendarDate(2024, 1, 1)}
+/>;
+```
+
+#### Buttons
+
+```tsx
+import { Button } from '@/components/ui';
+
+<Button color="primary">  {/* size="md" omitted - it's default */}
+  Submit
+</Button>
 
-// 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" />
+<Button color="secondary" variant="bordered">
+  Cancel
+</Button>
+
+<Button isLoading>
+  Processing...
+</Button>
 ```
 
-**Benefits**:
-- No need to import individual icons
-- Cleaner component code
-- Easy to swap icons by changing name prop
-- Consistent icon rendering
+#### Other Components
 
-### Icon Generation Workflow
+```tsx
+import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 
-1. **Export SVG from Figma**
-   - Select icon in Figma
-   - Export as SVG (not PNG/JPG)
-   - Download the SVG file
+// 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' },
+  ]}
+/>
 
-2. **Place in Icons Folder**
-   ```bash
-   mv downloaded-icon.svg src/assets/icons/icon-name.svg
-   ```
+// Tabs
+<Tabs
+  items={[
+    { key: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+    { key: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+  ]}
+/>
+```
+
+### Icons
 
-3. **Generate React Components**
-   ```bash
-   pnpm generate-icons
-   ```
+**CRITICAL WORKFLOW**: Icons must follow this exact process:
 
-   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 1: Export SVG from Figma
 
-4. **Use with Icon Component**
-   ```tsx
-   import { Icon } from '@/components/icons/Icon';
+1. Select the icon in Figma design
+2. Export as SVG (not PNG/JPG)
+3. Download the SVG file
 
-   <Icon name="ChevronDown" className="size-5 text-white" />
-   ```
+#### Step 2: Place in Icons Folder
 
-### Alternative: Direct Import (When Needed)
+```bash
+# Place SVG file in src/assets/icons/
+mv downloaded-icon.svg src/assets/icons/icon-name.svg
+```
 
-If you need direct imports for tree-shaking or specific use cases:
+#### 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
+
+**CORRECT USAGE**: Use the `Icon` component with `name` prop (PascalCase):
 
 ```tsx
-import { ChevronDownIcon, MenuIcon } from '@/components/icons';
+import { Icon } from '@/components/ui';
 
-<ChevronDownIcon className="size-5 text-white" />
-<MenuIcon className="size-6" />
+// ✅ CORRECT - Using Icon component with PascalCase name
+<Icon name="ChevronDownIcon" className="size-5 text-white" />
+<Icon name="CloseIcon" className="size-4" />
+<Icon name="EyeIcon" className="size-6" />
+```
+
+**❌ WRONG USAGE - DO NOT import individual icon components**:
+
+```tsx
+// ❌ WRONG - Don't import and use individual icon components
+import { ChevronDownIcon, CloseIcon } from '@/components/icons';
+<ChevronDownIcon className="size-5" />
+<CloseIcon className="size-4" />
 ```
 
 **Available Icons** (auto-generated):
+
 - ChevronDownIcon, ChevronRightIcon
 - CloseIcon, MenuIcon
 - EyeIcon, EyeSlashIcon
@@ -457,115 +566,115 @@ import { ChevronDownIcon, MenuIcon } from '@/components/icons';
 - DotsVerticalIcon, FrameIcon
 - And more...
 
+**Icon Names**:
+
+- Icon names are PascalCase with "Icon" suffix (e.g., `ChevronDownIcon`)
+- Generated from SVG filename: `chevron-down.svg` → component `ChevronDownIcon`
+- The Icon component uses the exact component name from `@/components/icons`
+
 **❌ DO NOT**:
+
+- Import individual icon components directly
+- Use kebab-case names (use `ChevronDownIcon` not `chevron-down`)
 - 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 use `<Icon name="IconName" />` pattern with PascalCase
 - 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
 
----
+### Logos & Images
 
-## 🖼️ Logos & Images
+**CRITICAL WORKFLOW**: Logos and images must be placed in `public/` directory:
 
-### CRITICAL WORKFLOW: Centralized Image Constants
+#### Step 1: Check Existing Images First
 
-**Step 1: Export from Figma**
+**BEFORE implementing or exporting from Figma**:
+
+1. Check `public/images/index.ts` to see if the image/logo already exists
+2. Check `public/images/logos/` directory for available logo files
+3. Only export from Figma if the asset doesn't exist
+
+```bash
+# Check what images are available
+cat public/images/index.ts
+ls public/images/logos/
+```
+
+**Why this matters**:
+
+- Avoid duplicate assets
+- User may have already exported the assets
+- Maintain consistency with existing naming conventions
+
+#### Step 2: Export from Figma (if needed)
 
 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**
+#### Step 3: Place 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/
-    ├── 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
+    ├── hero-bg.jpg
+    └── product-1.png
 ```
 
-**Step 3: Create Centralized Image Constants**
+#### Step 4: Create Centralized Image Constants
 
-**CRITICAL**: Always create and maintain `src/config/images.ts`:
+**CRITICAL**: Create a centralized constants file for all image paths:
 
 ```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" />
+ * Organize by category: LOGOS, AUTH, WEBSITE, SERVICES, etc.
  */
 
 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',
+  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',
+  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',
+  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',
+  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',
+  THUMBNAIL_DEFAULT: "/images/products/thumbnail-default.png",
+  HERO: "/images/products/hero-banner.jpg",
 } as const;
 
 export const IMAGES = {
@@ -577,13 +686,14 @@ export const IMAGES = {
 } as const;
 ```
 
-**Step 4: Reference in Components**
+#### Step 5: Reference in Code
 
 ```tsx
+// Import from centralized constants
 import { IMAGES } from '@/config/images';
 import Image from 'next/image';
 
-// ✅ Using Next.js Image component (recommended for optimization)
+// Using Next.js Image component (recommended)
 <Image
   src={IMAGES.LOGOS.FULL}
   alt="Company Logo"
@@ -592,88 +702,157 @@ 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-cover bg-center"
-  style={{ backgroundImage: `url(${IMAGES.WEBSITE.HOME_HERO})` }}
->
+// Background images via Tailwind
+<div className={`bg-[url('${IMAGES.WEBSITE.HOME_HERO}')] bg-cover bg-center`}>
 
-// ✅ 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"
-/>
 ```
 
-### Image Format Preference Order
+**Preference Order**:
 
 1. ✅ **SVG** - Best for logos, icons, and vector graphics (scalable, small file size)
-2. ✅ **WebP** - Modern format for photos (better compression than PNG/JPG)
+2. ✅ **WebP** - Modern format for photos (smaller 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** (CRITICAL ERROR)
-- Export images that already exist in the project
+- Hardcode image paths directly in components (use centralized constants)
 
 **✅ 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)
+
+- Always place in `public/` directory
+- Create centralized image constants file (src/config/images.ts)
+- Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES)
 - Use `as const` for type safety
-- Import from `@/config/images` in ALL components
-- Check if image exists before exporting from Figma
+- Import from `@/config/images` in components
 - Prefer SVG for logos and icons
 - Optimize images before adding (use tools like ImageOptim, Squoosh)
 - Use Next.js `<Image>` component for automatic optimization
 
 ---
 
+## 🎨 Color Palette & Theme
+
+### CRITICAL: Use Theme Colors, NOT Custom Values
+
+**Colors are defined in two places**:
+
+1. **`src/styles/hero.ts`** - HeroUI theme colors (primary, secondary, etc.)
+2. **`src/styles/globals.css`** - Additional custom theme colors
+
+### Available Theme Colors
+
+#### From hero.ts (Primary Color Palette):
+
+```typescript
+// Primary green shades (defined in hero.ts)
+primary - 50; // #E6FFF0  (lightest)
+primary - 100; // #CBFFE0
+primary - 200; // #AEFFD1
+primary - 300; // #8EFFC2
+primary - 400; // #66FFB2
+primary - 500; // #19FFA3  (default primary)
+primary - 600; // #25C780
+primary - 700; // #26915F
+primary - 800; // #215F40
+primary - 900; // #173123  (darkest)
+```
+
+#### HeroUI Default Colors:
+
+```tsx
+// Semantic colors (built into HeroUI)
+bg-primary      text-primary      border-primary
+bg-secondary    text-secondary    border-secondary
+bg-success      text-success      border-success
+bg-danger       text-danger       border-danger
+bg-warning      text-warning      border-warning
+bg-default      text-default      border-default
+bg-foreground   text-foreground   border-foreground
+bg-background   text-background   border-background
+```
+
+### Color Usage Examples
+
+**✅ CORRECT - Use theme colors**:
+
+```tsx
+// In component configuration (NO hover states)
+color: {
+  primary: 'bg-primary text-black',
+  success: 'bg-success text-white',
+}
+
+// In className (for text colors, borders, etc.)
+className="text-primary border-primary-500"
+className="bg-primary-50 text-primary-900"
+```
+
+**❌ WRONG - Custom color values or hover states**:
+
+```tsx
+// DON'T use hex values or hover states in config
+color: {
+  primary: 'bg-[#19ffa3] text-black hover:bg-[#00e68a]',
+}
+
+// DON'T use rgb/hsl
+className="bg-[rgb(25,255,163)]"
+className="text-[hsl(155,100%,56%)]"
+
+// DON'T use hover states in component config
+color: {
+  primary: 'bg-primary text-black hover:bg-primary-600',  // HeroUI handles hover
+}
+```
+
+### When to Add Custom Colors
+
+**Only add custom colors to hero.ts if**:
+
+1. Color is NOT in the existing palette
+2. Color is used in multiple places (reusable)
+3. Color is part of the design system
+
+**Steps to add custom color**:
+
+```typescript
+// 1. Add to hero.ts theme
+export default heroui({
+  themes: {
+    extend: {
+      colors: {
+        // Add new color palette
+        accent: {
+          50: "#...",
+          500: "#...",
+          900: "#...",
+        },
+      },
+    },
+  },
+});
+
+// 2. Use in components
+className = "bg-accent text-accent-900";
+```
+
+---
+
 ## 🎨 Tailwind CSS Guidelines
 
 ### Using Standard Tailwind Classes
@@ -681,21 +860,23 @@ This prevents:
 **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]"
+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)
+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
@@ -719,11 +900,23 @@ auto, full, screen, fit, min, max
 ```
 
 **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)]`
 
+**Examples**:
+
+```tsx
+// ✅ Good - Using standard classes
+<div className="h-10 w-full p-6 text-sm">
+
+// ❌ Bad - Should use standard classes
+<div className="h-[40px] w-[100%] p-[24px] text-[14px]">
+```
+
 ### Responsive Breakpoints (Mobile-First)
+
 ```css
 /* Mobile */
 4xs: 320px   /* iPhone SE */
@@ -743,19 +936,113 @@ 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 (#25C780)
-- `bg-primary-50` to `bg-primary-900` - Primary color shades
+- `bg-primary` / `text-primary` - Primary brand color
 - `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)
@@ -765,18 +1052,20 @@ Use these semantic colors from HeroUI theme:
 ### Navigation with i18n
 
 **Import Guidelines**:
+
 ```tsx
 // For Link component - use Next.js Link
-import Link from 'next/link';
+import Link from "next/link";
 
 // For navigation hooks - use next/navigation
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter } from "next/navigation";
 
 // For navigation URLs - use centralized constants
-import { NAVIGATION_URLS } from '@/config/navigationUrls';
+import { NAVIGATION_URLS } from "@/config/navigationUrls";
 ```
 
 **Navigation Example**:
+
 ```tsx
 import Link from 'next/link';
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
@@ -792,9 +1081,29 @@ 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';
+import { useTranslations } from "next-intl";
 
 function MyComponent() {
   const t = useTranslations();
@@ -802,8 +1111,8 @@ function MyComponent() {
   return (
     <div>
       {/* ✅ CORRECT - Using translation key */}
-      <h1>{t('welcome')}</h1>
-      <p>{t('description')}</p>
+      <h1>{t("welcome")}</h1>
+      <p>{t("description")}</p>
 
       {/* ❌ WRONG - Hardcoded text */}
       <h1>Welcome</h1>
@@ -812,33 +1121,166 @@ 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 using HeroUI Navbar
+- `Footer.tsx` - Footer component
+
+**CRITICAL**: Navbar uses HeroUI Navbar component:
+
+```tsx
+import { Navbar } from '@/components/layout';
+
+// In layout:
+<Navbar />
+<main>{children}</main>
+```
+
+**Implementation details** (see `src/components/layout/Navbar.tsx`):
+
+- ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`
+- ✅ Uses `Button` from `@/components/ui` with props (`color`, `size`, `variant`)
+- ✅ All styles via props, NO className for component styles
+- ✅ className ONLY for layout utilities
+
 ---
 
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
 
-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/`
+1. ❌ **Figma**: Use screenshots to implement design - MUST use Figma MCP server with `get_design_context`
+2. ❌ **Figma**: Call `get_screenshot` tool - Design context provides all needed information
+3. ❌ **Icons**: Import individual icon components (e.g., `import { ChevronDownIcon }`) - MUST use `<Icon name="ChevronDownIcon" />`
+4. ❌ **Icons**: Create manual icon components - MUST use `pnpm generate-icons` workflow
+5. ❌ **Icons**: Use non-project icons (Lucide, Font Awesome, etc.)
+6. ❌ **Logos**: Put logos/images in `src/` folder - MUST go in `public/`
 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`
+8. ❌ **Logos**: Hardcode image paths in components - MUST use centralized constants from `@/config/images`
+9. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
+10. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
+11. ❌ **Colors**: Use custom color values (e.g., `bg-[#19ffa3]`, `text-[#ff0000]`) - MUST use theme colors from hero.ts
+12. ❌ **Colors**: Use hex, rgb, or hsl values inline - Use semantic color classes instead
+13. ❌ **Text**: Hardcode ANY text - ALL text MUST use i18n translation keys
+14. ❌ **URLs**: Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
+15. ❌ **Data**: Hardcode menu items, dropdown options - MUST map from constants
+16. ❌ **Components**: Create custom components when HeroUI provides them (e.g., use HeroUI `Navbar` not custom `<header>`)
+17. ❌ **Components**: Use HTML elements when HeroUI component exists (e.g., `<button>` → use HeroUI `<Button>`)
+18. ❌ **Styling**: Apply component styles via className - MUST use props (`color`, `size`, `variant`, `radius`)
+19. ❌ **Styling**: Use className for component styles (e.g., `className="h-10 px-4 bg-primary"`) - Configure in wrapper instead
 20. ❌ **Styling**: Use CSS modules or styled-components - ONLY Tailwind CSS
-21. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers)
+21. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers when available)
 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
@@ -847,42 +1289,38 @@ function MyComponent() {
 
 ### ✅ DO
 
-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
+1. ✅ **Figma**: Use Figma MCP server with `get_design_context` and node-id from Figma URL
+2. ✅ **Figma**: Extract node-id from URL (e.g., `node-id=8486-1580` → `"8486:1580"`)
+3. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
+4. ✅ **Icons**: Use `<Icon name="IconName" />` pattern with PascalCase - NEVER import individual icon components
+5. ✅ **Logos**: Check `public/images/index.ts` BEFORE exporting from Figma
+6. ✅ **Logos**: Check `public/images/logos/` directory for existing assets
+7. ✅ **Logos**: Export SVG/PNG from Figma ONLY if not existing → Place in `public/images/` with organized folders
+8. ✅ **Logos**: Create centralized constants file `src/config/images.ts` with LOGOS, AUTH, WEBSITE, etc.
+9. ✅ **Logos**: Import from `@/config/images` and use `IMAGES.LOGOS.PRIMARY`
+10. ✅ **Logos**: Prefer SVG over PNG when source is vector
+11. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
+12. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
+13. ✅ **Colors**: Use theme colors from hero.ts (`bg-primary`, `text-primary-600`, `bg-success`)
+14. ✅ **Colors**: Check hero.ts and globals.css for available colors before using custom values
+15. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
+16. ✅ **Navigation**: Import `usePathname`, `useRouter` from `next/navigation`
+17. ✅ **Text**: Use i18n translation keys for ALL text (`t('key')`)
+18. ✅ **URLs**: Use `NAVIGATION_URLS` for ALL navigation links
+19. ✅ **Data**: Map menu items, dropdown options from constants (never hardcode)
+20. ✅ **Components**: Use HeroUI components first (e.g., use `Navbar` from `@heroui/react` for navigation)
+21. ✅ **Components**: Use existing wrappers from `src/components/ui/` when available (e.g., `Button`)
+22. ✅ **Components**: Configure component styles in wrappers using `extendVariants`
+23. ✅ **Components**: Set `defaultVariants` in wrapper configuration to avoid repetition
+24. ✅ **Styling**: Use component props for styles, but ONLY specify non-default values
+25. ✅ **Styling**: Omit props that match defaultVariants (e.g., don't write `size="md"` if `md` is default)
+26. ✅ **Styling**: Use className ONLY for layout utilities (`mt-4`, `hidden`, `lg:flex`)
+27. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
+28. ✅ **TypeScript**: Implement strict typing with proper types
+29. ✅ **React**: Use `'use client'` directive for interactive components
+30. ✅ **Design**: Follow mobile-first responsive design
+31. ✅ **States**: Implement proper loading and error states
+32. ✅ **Patterns**: Follow existing code patterns and naming conventions
 
 ---
 
@@ -890,78 +1328,61 @@ function MyComponent() {
 
 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
+- [ ] Imported icons from `@/components/icons`
+- [ ] **BEFORE exporting**: Checked `public/images/index.ts` for existing images/logos
+- [ ] **BEFORE exporting**: Checked `public/images/logos/` directory
+- [ ] Exported logos/images as SVG (preferred) or PNG (only if not existing)
 - [ ] Placed logos/images in `public/images/` with organized folders (logos/, auth/, website/, services/)
-- [ ] Created/updated centralized constants file `src/config/images.ts`
+- [ ] Created 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
+- [ ] Referenced via `IMAGES.LOGOS.PRIMARY` (not hardcoded paths)
 
 ### Component & Styling
+
 - [ ] Checked HeroUI library first for component availability
-- [ ] 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 HeroUI components via `src/components/ui/` wrappers (e.g., `<Button>` not `<button>`)
+- [ ] Configured component styles in wrapper/theme (not inline)
 - [ ] 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
+- [ ] Used standard Tailwind classes instead of arbitrary values (e.g., `h-10` not `h-[40px]`)
 - [ ] 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
 
-### 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 & Navigation
 
-### 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 button text use `t('buttonKey')`
+- [ ] ALL URLs use `NAVIGATION_URLS` from config (no hardcoded URLs)
 
 ### 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
 - [ ] Form labels use i18n
 - [ ] Form placeholders use i18n
 - [ ] Form errors use i18n
 
 ### Responsive & States
+
 - [ ] Implemented responsive design (mobile-first)
 - [ ] Added proper loading states
 - [ ] Added proper error states
 - [ ] Tested on multiple breakpoints (mobile, tablet, desktop)
-- [ ] Implemented responsive navigation menu
 
 ---
 
@@ -969,73 +1390,59 @@ 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. **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)
+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)
 
 ### Components & Styling
-1. **HeroUI components first** - Verify HeroUI library was checked before custom
+
+1. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
 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
+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
 
-### 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
+### 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
 
-### 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
+### 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
 
 ---
 
-## 🚀 Quick Reference Guide
+## 📚 Reference Files
 
-### 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
-```
+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`
+
+---
+
+## 🚀 Quick Reference Guide
 
 ### Icons Workflow
+
 ```bash
 # 1. Export SVG from Figma
 # 2. Place in folder
@@ -1044,30 +1451,20 @@ mv icon.svg src/assets/icons/
 # 3. Generate components
 pnpm generate-icons
 
-# 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" />
+# 4. Use in code
+import { IconIcon } from '@/components/icons';
+<IconIcon className="size-5" />
 ```
 
 ### 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
+```bash
+# 1. Export SVG/PNG from Figma
+# 2. 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',
@@ -1082,63 +1479,15 @@ export const IMAGES = {
   WEBSITE,
 } as const;
 
-# 5. Use in code
+# 4. 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>
+# OR
+<Image src={IMAGES.LOGOS.PRIMARY} alt="Logo" width={120} height={40} />
 ```
 
 ### Tailwind Standard Classes
+
 ```tsx
 // Heights/Widths
 h-10 = 40px    w-14 = 56px    size-5 = 20px
@@ -1154,32 +1503,49 @@ 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
 ```
 
-### Primary Colors Usage
+### Common Patterns
+
 ```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">
+// 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">
 ```
 
 ---
 
-**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.
+**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.