@adlas/create-app 1.0.52 → 1.0.53

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -11,19 +11,25 @@ This document provides comprehensive guidelines for converting Figma designs to
 **❌ NEVER use screenshots** - Screenshots lose design data, measurements, and context
 
 **✅ ALWAYS use Figma MCP server with node links**:
+
 ```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"
-})
+mcp__figma -
+  dev -
+  mode -
+  mcp -
+  server__get_design_context({
+    nodeId: "8486:1580",
+    clientLanguages: "typescript",
+    clientFrameworks: "react,nextjs",
+  });
 ```
 
 **Benefits of using Figma MCP**:
+
 - ✅ Get exact measurements, colors, and spacing
 - ✅ Access design tokens and styles
 - ✅ See component structure and hierarchy
@@ -54,6 +60,7 @@ mcp__figma-dev-mode-mcp-server__get_design_context({
 ### CRITICAL: Component Styles Must Be Configured, Not Inline
 
 **❌ WRONG - Inline component styles**:
+
 ```tsx
 // DON'T: Apply component-specific styles inline via className
 <Button className="h-10 rounded-full bg-[#19ffa3] px-4 text-sm text-black">
@@ -70,6 +77,7 @@ mcp__figma-dev-mode-mcp-server__get_design_context({
 ```
 
 **✅ CORRECT - Use props and configured variants**:
+
 ```tsx
 // Step 1: Configure variants in component wrapper
 // File: src/components/ui/Button.tsx
@@ -117,6 +125,7 @@ import { Button } from '@/components/ui';
 ```
 
 **Component Style Rules**:
+
 - ✅ **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
@@ -129,6 +138,7 @@ import { Button } from '@/components/ui';
 - ❌ **NEVER repeat defaultVariants**: Don't specify `size="md"` if `md` is already the default
 
 **Color Usage Rules**:
+
 ```tsx
 // ✅ CORRECT - Use theme colors from hero.ts or globals.css
 color: {
@@ -150,6 +160,7 @@ secondary, success, danger, warning, default, foreground, background
 ```
 
 **What goes where**:
+
 ```tsx
 // In Button.tsx configuration:
 const Button = extendVariants(HerouiButton, {
@@ -194,6 +205,7 @@ import { Icon } from '@/components/ui';
 ### Data Must Be Mapped from Constants
 
 **❌ WRONG - Hardcoded data**:
+
 ```tsx
 <DropdownMenu>
   <DropdownItem key="option1">Option 1</DropdownItem>
@@ -203,16 +215,17 @@ import { Icon } from '@/components/ui';
 ```
 
 **✅ CORRECT - Map from constants**:
+
 ```tsx
 // File: src/config/menuOptions.ts
 export const productMenuItems = [
-  { key: 'analytics', labelKey: 'product.analytics', href: '/analytics' },
-  { key: 'insights', labelKey: 'product.insights', href: '/insights' },
-  { key: 'reports', labelKey: 'product.reports', href: '/reports' },
+  { key: "analytics", labelKey: "product.analytics", href: "/analytics" },
+  { key: "insights", labelKey: "product.insights", href: "/insights" },
+  { key: "reports", labelKey: "product.reports", href: "/reports" },
 ];
 
 // Usage:
-import { productMenuItems } from '@/config/menuOptions';
+import { productMenuItems } from "@/config/menuOptions";
 
 <DropdownMenu>
   {productMenuItems.map((item) => (
@@ -220,7 +233,7 @@ import { productMenuItems } from '@/config/menuOptions';
       {t(item.labelKey)}
     </DropdownItem>
   ))}
-</DropdownMenu>
+</DropdownMenu>;
 ```
 
 ---
@@ -228,11 +241,14 @@ import { productMenuItems } from '@/config/menuOptions';
 ## 🎨 Component Priority & Usage Strategy
 
 ### 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-
 
 ### 2. Component Selection Flow
+
 ```
 1. Does HeroUI have this component?
    → YES: Use HeroUI component (via @/components/ui wrapper if exists)
@@ -248,6 +264,7 @@ Before creating ANY component, check if HeroUI provides it:
 ```
 
 ### 3. Example Decision Tree
+
 ```tsx
 // Need a Button?
 import { Button } from '@/components/ui';  // ✅ Use HeroUI Button wrapper
@@ -266,10 +283,12 @@ import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
 ## 📁 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)
@@ -279,6 +298,7 @@ src/components/
 ```
 
 ### Styling
+
 - **Global styles**: `src/styles/globals.css`
 - **Theme config**: `src/styles/hero.ts`
 - **Approach**: Tailwind CSS utility classes ONLY
@@ -291,6 +311,7 @@ src/components/
 ### Navigation Components
 
 #### Navbar (HeroUI)
+
 **CRITICAL**: Always use HeroUI Navbar component for navigation bars:
 
 ```tsx
@@ -302,8 +323,8 @@ import {
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
-} from '@heroui/react';
-import { Button } from '@/components/ui';
+} from "@heroui/react";
+import { Button } from "@/components/ui";
 
 <Navbar maxWidth="full" className="bg-black border-b-2">
   {/* Logo */}
@@ -314,14 +335,16 @@ import { Button } from '@/components/ui';
   {/* Desktop Menu */}
   <NavbarContent className="hidden lg:flex" justify="center">
     <NavbarItem>
-      <Button variant="light">Menu Item</Button>  {/* size="md" omitted - it's default */}
+      <Button variant="light">Menu Item</Button>{" "}
+      {/* size="md" omitted - it's default */}
     </NavbarItem>
   </NavbarContent>
 
   {/* CTA */}
   <NavbarContent className="hidden lg:flex" justify="end">
     <NavbarItem>
-      <Button color="primary">CTA</Button>  {/* size="md" omitted - it's default */}
+      <Button color="primary">CTA</Button>{" "}
+      {/* size="md" omitted - it's default */}
     </NavbarItem>
   </NavbarContent>
 
@@ -331,13 +354,16 @@ import { Button } from '@/components/ui';
   {/* Mobile Menu */}
   <NavbarMenu>
     <NavbarMenuItem>
-      <Button variant="light" fullWidth>Menu Item</Button>
+      <Button variant="light" fullWidth>
+        Menu Item
+      </Button>
     </NavbarMenuItem>
   </NavbarMenu>
-</Navbar>
+</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
@@ -345,48 +371,128 @@ import { Button } from '@/components/ui';
 - ❌ DON'T use custom `<header>` or `<nav>` tags
 
 #### Dropdown Menus in Navbar
+
 **CRITICAL**: Always use HeroUI Dropdown components for dropdown menus:
 
+⚠️ **IMPORTANT - Dropdown Styling Must Match Figma Design Exactly**:
+
+HeroUI Dropdown components have default styles that often DON'T match Figma designs. You MUST:
+
+1. ✅ Get design context from Figma using `get_design_context` tool
+2. ✅ Check exact colors, spacing, layout, borders from the design
+3. ✅ Use `classNames` prop to override default styles
+4. ✅ Pay attention to: background color, text color, borders, spacing, grid layout
+5. ❌ Don't assume default HeroUI styles will match the design
+
+**Common Dropdown Styling Issues**:
+
+- Default dropdown has light background, design might use dark background
+- Default text color might be wrong (e.g., white text on white background)
+- Default spacing (gaps, padding) rarely matches Figma exactly
+- Grid layout for multi-column dropdowns needs explicit configuration
+- Section headings need specific color/size overrides
+
 ```tsx
 import {
   Dropdown,
   DropdownTrigger,
   DropdownMenu,
   DropdownItem,
+  DropdownSection, // For grouped items
 } from '@heroui/react';
 import { Button, Icon } from '@/components/ui';
 
-// Dropdown with menu items from config
-{item.hasDropdown && item.items && item.items.length > 0 ? (
-  <Dropdown>
-    <DropdownTrigger>
-      <Button
-        variant="light"
-        endContent={<Icon name="ChevronDownIcon" className="size-5" />}
-      >
-        {t(item.labelKey)}
-      </Button>
-    </DropdownTrigger>
-    <DropdownMenu aria-label={t(item.labelKey)}>
-      {item.items.map(subItem => (
-        <DropdownItem key={subItem.key} href={subItem.href}>
+// ❌ WRONG - Using defaults without checking Figma design
+<Dropdown>
+  <DropdownTrigger>
+    <Button variant="light" endContent={<Icon name="ChevronDownIcon" />}>
+      {t(item.labelKey)}
+    </Button>
+  </DropdownTrigger>
+  <DropdownMenu>
+    {item.items.map(subItem => (
+      <DropdownItem key={subItem.key} href={subItem.href}>
+        {t(subItem.labelKey)}
+      </DropdownItem>
+    ))}
+  </DropdownMenu>
+</Dropdown>
+
+// ✅ CORRECT - Matching exact Figma design with classNames
+<Dropdown
+  classNames={{
+    // Match Figma background, border, border-radius, padding
+    content: 'bg-[#0A0A0A] border border-[#1F1F1F] rounded-2xl p-8 min-w-[650px]',
+  }}
+>
+  <DropdownTrigger>
+    <Button
+      variant="light"
+      endContent={<Icon name="ChevronDownIcon" className="size-4 text-white" />}
+      className="gap-1 text-base font-normal text-white"
+    >
+      {t(item.labelKey)}
+    </Button>
+  </DropdownTrigger>
+  <DropdownMenu
+    aria-label={t(item.labelKey)}
+    className="grid grid-cols-2 gap-8 p-0" // Two-column layout with exact spacing
+    itemClasses={{
+      base: 'rounded-none p-0 data-[hover=true]:bg-transparent',
+      title: 'text-lg font-semibold text-white', // Match Figma text color
+      description: 'text-sm text-[#999999] leading-relaxed',
+    }}
+  >
+    <DropdownSection
+      title="Core Features"
+      showDivider={false}
+      classNames={{
+        heading: 'text-xs font-medium text-[#666666] uppercase tracking-wider mb-6 px-0',
+        group: 'flex flex-col gap-8', // Match exact gap from Figma
+      }}
+    >
+      {coreItems.map(subItem => (
+        <DropdownItem
+          key={subItem.key}
+          description={t(subItem.descriptionKey)}
+          href={subItem.href}
+          classNames={{
+            base: 'flex gap-4 p-0 rounded-none data-[hover=true]:bg-transparent',
+            wrapper: 'flex flex-col gap-1',
+          }}
+          startContent={
+            subItem.iconName ? (
+              <div className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-primary/40 bg-[#0D1F18] p-3">
+                <Icon name={subItem.iconName} className="size-6 text-primary" />
+              </div>
+            ) : null
+          }
+        >
           {t(subItem.labelKey)}
         </DropdownItem>
       ))}
-    </DropdownMenu>
-  </Dropdown>
-) : (
-  <Button variant="light">
-    {t(item.labelKey)}
-  </Button>
-)}
+    </DropdownSection>
+  </DropdownMenu>
+</Dropdown>
 ```
 
+**Dropdown Styling Checklist**:
+
+- [ ] Check Figma design context for exact colors (background, text, borders)
+- [ ] Verify spacing values (gap between items, padding, margins)
+- [ ] Confirm layout structure (single column, two columns, grid)
+- [ ] Match border radius, border width, and border colors
+- [ ] Override default hover states if needed (`data-[hover=true]:bg-transparent`)
+- [ ] Check section heading styles (color, size, spacing)
+- [ ] Verify icon sizes and colors match design
+- [ ] Test with actual content to ensure layout matches Figma
+
 **Example Menu Configuration** (`src/config/menuItems.ts`):
+
 ```tsx
 export type MenuItem = {
   key: string;
-  labelKey: 'product' | 'useCases' | 'resources' | 'company' | 'pricing';
+  labelKey: "product" | "useCases" | "resources" | "company" | "pricing";
   href?: string;
   hasDropdown?: boolean;
   items?: Array<{
@@ -398,24 +504,37 @@ export type MenuItem = {
 
 export const navbarMenuItems: MenuItem[] = [
   {
-    key: 'product',
-    labelKey: 'product',
+    key: "product",
+    labelKey: "product",
     hasDropdown: true,
     items: [
-      { key: 'analytics', labelKey: 'navbar.analytics', href: NAVIGATION_URLS.ROOT },
-      { key: 'dashboard', labelKey: 'navbar.dashboard', href: NAVIGATION_URLS.ROOT },
-      { key: 'reports', labelKey: 'navbar.reports', href: NAVIGATION_URLS.ROOT },
+      {
+        key: "analytics",
+        labelKey: "navbar.analytics",
+        href: NAVIGATION_URLS.ROOT,
+      },
+      {
+        key: "dashboard",
+        labelKey: "navbar.dashboard",
+        href: NAVIGATION_URLS.ROOT,
+      },
+      {
+        key: "reports",
+        labelKey: "navbar.reports",
+        href: NAVIGATION_URLS.ROOT,
+      },
     ],
   },
   {
-    key: 'pricing',
-    labelKey: 'pricing',
+    key: "pricing",
+    labelKey: "pricing",
     href: NAVIGATION_URLS.ROOT,
   },
 ];
 ```
 
 **Key Points**:
+
 - ✅ Always check `items && items.length > 0` before rendering dropdown
 - ✅ Use `Icon` component with proper name (e.g., `ChevronDownIcon`)
 - ✅ Use `endContent` prop for icons in buttons
@@ -425,9 +544,11 @@ export const navbarMenuItems: MenuItem[] = [
 - ❌ DON'T render dropdown without checking array exists
 
 ### Form Components
+
 All located in `src/components/ui/`:
 
 #### Input Fields
+
 ```tsx
 import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
 
@@ -463,6 +584,7 @@ import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
 ```
 
 #### Selection Components
+
 ```tsx
 import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
 
@@ -495,16 +617,18 @@ import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
 ```
 
 #### Date & Time
+
 ```tsx
-import { DatePicker } from '@/components/ui';
+import { DatePicker } from "@/components/ui";
 
 <DatePicker
   label="Select Date"
   placeholderValue={new CalendarDate(2024, 1, 1)}
-/>
+/>;
 ```
 
 #### Buttons
+
 ```tsx
 import { Button } from '@/components/ui';
 
@@ -522,6 +646,7 @@ import { Button } from '@/components/ui';
 ```
 
 #### Other Components
+
 ```tsx
 import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 
@@ -561,23 +686,27 @@ import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 **CRITICAL WORKFLOW**: Icons must follow this exact process:
 
 #### Step 1: Export SVG from Figma
+
 1. Select the icon in Figma design
 2. Export as SVG (not PNG/JPG)
 3. Download the SVG file
 
 #### Step 2: Place in Icons Folder
+
 ```bash
 # Place SVG file in src/assets/icons/
 mv downloaded-icon.svg src/assets/icons/icon-name.svg
 ```
 
 #### Step 3: Generate React Components
+
 ```bash
 # Run the icon generation script
 pnpm generate-icons
 ```
 
 This command will:
+
 - Convert all SVG files in `src/assets/icons/` to React components
 - Place them in `src/components/icons/`
 - **Automatically add "Icon" suffix** to all component names (configured in `svgr.config.mjs`)
@@ -585,9 +714,35 @@ This command will:
 - Update `src/components/icons/index.ts` with exports
 
 **Icon Naming Convention**:
-- SVG filename: `chevron-down.svg` or `chevron-down-icon.svg`
-- Generated component: `ChevronDownIcon.tsx` (Icon suffix added automatically)
-- The svgr config ensures ALL icons end with "Icon" suffix regardless of SVG filename
+
+⚠️ **IMPORTANT - Icon Naming Inconsistency**:
+The `pnpm generate-icons` script has inconsistent behavior regarding the "Icon" suffix:
+
+- Some generated files have "Icon" suffix: `ChevronDownIcon.tsx`, `CloseIcon.tsx`, `EyeIcon.tsx`
+- Some generated files do NOT have "Icon" suffix: `Code.tsx`, `Bag.tsx`, `Magnifier.tsx`, `Stars.tsx`, `WidgetAdd.tsx`
+
+**However, the exports in `src/components/icons/index.ts` ALWAYS add "Icon" suffix**:
+
+```typescript
+// Even if the file is Code.tsx, the export is:
+export { default as CodeIcon } from "./Code";
+export { default as BagIcon } from "./Bag";
+export { default as MagnifierIcon } from "./Magnifier";
+```
+
+**What This Means For You**:
+
+1. ✅ **ALWAYS use the exported name WITH "Icon" suffix** when using the Icon component
+2. ✅ Check `src/components/icons/index.ts` to see the actual exported names
+3. ✅ The Icon component requires the exported name (e.g., `"CodeIcon"`, `"BagIcon"`)
+4. ❌ The filename doesn't matter - only the export name matters
+
+**Example**:
+
+- SVG filename: `code.svg` or `bag.svg`
+- Generated component file: `Code.tsx` or `Bag.tsx` (may or may not have Icon suffix)
+- Exported name: `CodeIcon` or `BagIcon` (ALWAYS has Icon suffix)
+- Usage: `<Icon name="CodeIcon" />` or `<Icon name="BagIcon" />`
 
 #### Step 4: Use in Code
 
@@ -603,6 +758,7 @@ import { Icon } from '@/components/ui';
 ```
 
 **❌ WRONG USAGE - DO NOT import individual icon components**:
+
 ```tsx
 // ❌ WRONG - Don't import and use individual icon components
 import { ChevronDownIcon, CloseIcon } from '@/components/icons';
@@ -611,6 +767,7 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 ```
 
 **Available Icons** (auto-generated):
+
 - ChevronDownIcon, ChevronRightIcon
 - CloseIcon, MenuIcon
 - EyeIcon, EyeSlashIcon
@@ -620,11 +777,13 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 - 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
@@ -633,6 +792,7 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 - Hardcode SVG paths directly in components
 
 **✅ DO**:
+
 - Always use `<Icon name="IconName" />` pattern with PascalCase
 - Always export from Figma as SVG
 - Use `pnpm generate-icons` to create components
@@ -645,6 +805,7 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 #### Step 1: Check Existing Images First
 
 **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
@@ -656,16 +817,19 @@ 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 3: Place in Public Folder
+
 ```bash
 # Place logo/image files in public/
 public/
@@ -691,36 +855,36 @@ public/
  */
 
 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 = {
@@ -774,12 +938,14 @@ import Image from 'next/image';
 ```
 
 **Preference Order**:
+
 1. ✅ **SVG** - Best for logos, icons, and vector graphics (scalable, small file size)
 2. ✅ **WebP** - Modern format for photos (smaller than PNG/JPG)
 3. ✅ **PNG** - For images requiring transparency
 4. ✅ **JPG** - For photos without transparency
 
 **❌ DO NOT**:
+
 - Put images in `src/` folder
 - Import images as modules unless necessary
 - Use base64 encoded images inline
@@ -788,6 +954,7 @@ import Image from 'next/image';
 - Use hardcoded strings like `src="/images/logos/bina.png"` - Use `src={IMAGES.LOGOS.BINA}` instead
 
 **✅ DO**:
+
 - Always place in `public/` directory
 - Create centralized image constants file (src/config/images.ts)
 - Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES)
@@ -804,27 +971,30 @@ import Image from 'next/image';
 ### 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)
+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
@@ -840,6 +1010,7 @@ bg-background   text-background   border-background
 ### Color Usage Examples
 
 **✅ CORRECT - Use theme colors**:
+
 ```tsx
 // In component configuration (NO hover states)
 color: {
@@ -853,6 +1024,7 @@ 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: {
@@ -872,11 +1044,13 @@ color: {
 ### 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({
@@ -885,9 +1059,9 @@ export default heroui({
       colors: {
         // Add new color palette
         accent: {
-          50: '#...',
-          500: '#...',
-          900: '#...',
+          50: "#...",
+          500: "#...",
+          900: "#...",
         },
       },
     },
@@ -895,7 +1069,7 @@ export default heroui({
 });
 
 // 2. Use in components
-className="bg-accent text-accent-900"
+className = "bg-accent text-accent-900";
 ```
 
 ---
@@ -907,21 +1081,23 @@ className="bg-accent text-accent-900"
 **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
@@ -945,11 +1121,13 @@ 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">
@@ -959,6 +1137,7 @@ auto, full, screen, fit, min, max
 ```
 
 ### Responsive Breakpoints (Mobile-First)
+
 ```css
 /* Mobile */
 4xs: 320px   /* iPhone SE */
@@ -979,6 +1158,7 @@ xl:  1280px  /* MacBook Air */
 ```
 
 ### 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 */}
@@ -986,7 +1166,9 @@ xl:  1280px  /* MacBook Air */
 ```
 
 ### 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
@@ -997,6 +1179,7 @@ Use these semantic colors from HeroUI theme:
 - `bg-danger` - Error/danger states
 
 ### Common Patterns
+
 ```tsx
 // Card
 <div className="rounded-lg bg-white p-6 shadow-md">
@@ -1020,19 +1203,20 @@ Use these semantic colors from HeroUI theme:
 ## 📝 Form Implementation with Zod
 
 ### Pattern to Follow
+
 ```tsx
-'use client';
+"use client";
 
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
-import { Button, Input } from '@/components/ui';
+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'),
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
 });
 
 type FormData = z.infer<typeof schema>;
@@ -1059,7 +1243,7 @@ export default function LoginForm() {
       <Input
         label="Email"
         type="email"
-        {...register('email')}
+        {...register("email")}
         errorMessage={errors.email?.message}
         isInvalid={!!errors.email}
       />
@@ -1067,7 +1251,7 @@ export default function LoginForm() {
       <Input
         label="Password"
         type="password"
-        {...register('password')}
+        {...register("password")}
         errorMessage={errors.password?.message}
         isInvalid={!!errors.password}
       />
@@ -1089,18 +1273,20 @@ export default function LoginForm() {
 ### 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';
@@ -1117,10 +1303,11 @@ import { Link } from '@heroui/react';
 ```
 
 **Using Navigation Hooks**:
+
 ```tsx
-'use client';
+"use client";
 
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter } from "next/navigation";
 
 export function MyComponent() {
   const pathname = usePathname();
@@ -1139,17 +1326,17 @@ export function MyComponent() {
 **CRITICAL: Specify namespace to avoid TypeScript errors**
 
 ```tsx
-import { useTranslations } from 'next-intl';
+import { useTranslations } from "next-intl";
 
 function MyComponent() {
   // ✅ CORRECT - Specify namespace for type safety
-  const t = useTranslations('namespace');
+  const t = useTranslations("namespace");
 
   return (
     <div>
       {/* Now you can use keys directly without type errors */}
-      <h1>{t('welcome')}</h1>
-      <p>{t('description')}</p>
+      <h1>{t("welcome")}</h1>
+      <p>{t("description")}</p>
     </div>
   );
 }
@@ -1158,42 +1345,141 @@ function MyComponent() {
 function BadComponent() {
   const t = useTranslations(); // Missing namespace
 
-  const items = [
-    { key: 'product', labelKey: 'navbar.product' }
-  ];
+  const items = [{ key: "product", labelKey: "navbar.product" }];
 
   return (
     <div>
       {/* TypeScript error: Argument of type 'string' is not assignable */}
-      {items.map(item => <p key={item.key}>{t(item.labelKey)}</p>)}
+      {items.map((item) => (
+        <p key={item.key}>{t(item.labelKey)}</p>
+      ))}
     </div>
   );
 }
 ```
 
 **Type-Safe Translation Pattern:**
+
+⚠️ **COMMON ERROR - Dynamic Translation Keys with Wrong Namespace**:
+
+When you have configuration data with translation keys from different namespaces, you'll get TypeScript errors if you try to use a single `useTranslations()` hook:
+
+```tsx
+// ❌ WRONG - This causes TypeScript errors
+const menuItems = [
+  {
+    key: "product",
+    labelKey: "product",
+    items: [
+      {
+        key: "chat",
+        labelKey: "product.chat",
+        descriptionKey: "product.chatDescription",
+      },
+    ],
+  },
+];
+
+function Navbar() {
+  const tNavbar = useTranslations("navbar"); // Only accepts navbar.* keys
+  const item = menuItems[0];
+
+  return (
+    <div>
+      {/* ❌ ERROR: 'product.chat' is not assignable to navbar keys */}
+      {item.items.map((subItem) => (
+        <div key={subItem.key}>
+          <h3>{tNavbar(subItem.labelKey)}</h3>
+          <p>{tNavbar(subItem.descriptionKey)}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+**✅ SOLUTION - Use Separate Translation Hooks for Each Namespace**:
+
 ```tsx
-// 1. Define translation key types in config
+// File: src/locales/en.json
+{
+  "navbar": {
+    "product": "Product",
+    "useCases": "Use cases"
+  },
+  "product": {
+    "chat": "Chat",
+    "chatDescription": "Empower your team with Gen AI"
+  }
+}
+
+// File: src/config/menuItems.ts
+export type SubMenuItem = {
+  key: string;
+  labelKey: string; // String type because it's from different namespace
+  descriptionKey: string;
+  href: string;
+};
+
 export type MenuItem = {
   key: string;
-  labelKey: 'product' | 'useCases' | 'resources'; // Union type of valid keys
-  href?: string;
+  label: string; // Maps to navbar namespace keys
+  items?: SubMenuItem[];
 };
 
-// 2. Use with namespace
-const t = useTranslations('navbar');
+export const navbarMenuItems: MenuItem[] = [
+  {
+    key: 'product',
+    label: 'product', // navbar.product
+    items: [
+      {
+        key: 'chat',
+        labelKey: 'chat', // product.chat (different namespace!)
+        descriptionKey: 'chatDescription', // product.chatDescription
+        href: '/chat',
+      },
+    ],
+  },
+];
+
+// File: Component usage
+function Navbar() {
+  // ✅ CORRECT - Use separate hooks for each namespace
+  const tNavbar = useTranslations('navbar');
+  const tProduct = useTranslations('product');
 
-// 3. Access keys directly (type-safe)
-{menuItems.map(item => (
-  <Button key={item.key}>
-    {t(item.labelKey)} {/* No TypeScript error */}
-  </Button>
-))}
+  return (
+    <div>
+      {navbarMenuItems.map(item => (
+        <div key={item.key}>
+          {/* Use tNavbar for navbar.* keys */}
+          <button>{tNavbar(item.label)}</button>
+
+          {/* Use tProduct for product.* keys */}
+          {item.items?.map(subItem => (
+            <div key={subItem.key}>
+              <h3>{tProduct(subItem.labelKey)}</h3>
+              <p>{tProduct(subItem.descriptionKey)}</p>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
 ```
 
+**Key Points**:
+
+1. ✅ Separate translation hooks for each namespace (`tNavbar`, `tProduct`)
+2. ✅ Use the correct hook for each translation key based on its namespace
+3. ✅ Keep translation namespaces flat and separate (don't nest `product` inside `navbar`)
+4. ❌ Don't try to use one translation hook for keys from multiple namespaces
+
 ### Form labels, placeholders, errors - ALL must use i18n
+
 ```tsx
-import { useTranslations } from 'next-intl';
+import { useTranslations } from "next-intl";
 
 function LoginForm() {
   const t = useTranslations();
@@ -1202,9 +1488,11 @@ function LoginForm() {
     <form>
       {/* ✅ CORRECT */}
       <Input
-        label={t('email')}
-        placeholder={t('enterEmail')}
-        errorMessage={errors.email?.message ? t(errors.email.message) : undefined}
+        label={t("email")}
+        placeholder={t("enterEmail")}
+        errorMessage={
+          errors.email?.message ? t(errors.email.message) : undefined
+        }
       />
 
       {/* ❌ WRONG - Hardcoded text */}
@@ -1219,6 +1507,7 @@ function LoginForm() {
 ```
 
 ### Navigation URLs Reference
+
 ```tsx
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
@@ -1243,19 +1532,20 @@ NAVIGATION_URLS.DASHBOARD.INDEX         // '/dashboard'
 ## 🎯 Data Fetching
 
 ### Using React Query
+
 ```tsx
-'use client';
+"use client";
 
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
 
-import { QUERY_KEYS } from '@/libs/react-query';
+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');
+      const response = await axios.get("/api/products");
       return response.data;
     },
   });
@@ -1278,11 +1568,12 @@ export default function ProductList() {
 ## 📐 Layout Components
 
 ### Using Existing Layouts
+
 ```tsx
 // Auth pages use auth layout automatically
 // Location: src/app/[locale]/(auth)/login/page.tsx
 
-'use client';
+"use client";
 
 export default function LoginPage() {
   return (
@@ -1295,11 +1586,14 @@ export default function LoginPage() {
 ```
 
 ### 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';
 
@@ -1309,6 +1603,7 @@ import { Navbar } from '@/components/layout';
 ```
 
 **Implementation details** (see `src/components/layout/Navbar.tsx` and `docs/NAVBAR_IMPLEMENTATION.md`):
+
 - ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`, `Dropdown`
 - ✅ Uses `Button` from `@/components/ui` with props (`color`, `size`, `variant`)
 - ✅ Uses `useTranslations('navbar')` with namespace for type safety
@@ -1323,6 +1618,7 @@ import { Navbar } from '@/components/layout';
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
+
 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" />`
@@ -1334,28 +1630,29 @@ import { Navbar } from '@/components/layout';
 9. ❌ **Images**: Use direct path strings anywhere - ALL paths MUST come from `@/config/images`
 10. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
 11. ❌ **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 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 - Use union types and proper typing instead
-25. ❌ **i18n**: Use `useTranslations()` without namespace - MUST specify namespace for type safety
-26. ❌ **i18n**: Use dynamic translation keys without proper typing - Define union types for keys
-27. ❌ **Design**: Ignore responsive design (always implement mobile-first)
-28. ❌ **Forms**: Skip form validation (always use Zod schemas)
-29. ❌ **Dropdowns**: Render dropdown items without checking if items array exists/has length
-30. ❌ **Build**: Run `pnpm build` or `pnpm lint` commands - The user will run these manually
+12. ❌ **Colors**: Use custom color values (e.g., `bg-[#19ffa3]`, `text-[#ff0000]`) - MUST use theme colors from hero.ts
+13. ❌ **Colors**: Use hex, rgb, or hsl values inline - Use semantic color classes instead
+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 (e.g., use HeroUI `Navbar` not custom `<header>`)
+18. ❌ **Components**: Use HTML elements when HeroUI component exists (e.g., `<button>` → use HeroUI `<Button>`)
+19. ❌ **Styling**: Apply component styles via className - MUST use props (`color`, `size`, `variant`, `radius`)
+20. ❌ **Styling**: Use className for component styles (e.g., `className="h-10 px-4 bg-primary"`) - Configure in wrapper instead
+21. ❌ **Styling**: Use CSS modules or styled-components - ONLY Tailwind CSS
+22. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers when available)
+23. ❌ **Navigation**: Use HeroUI `Link` for internal navigation (use Next.js `Link` from `next/link`)
+24. ❌ **Navigation**: Import `usePathname`, `useRouter` from wrong source (MUST use `next/navigation`)
+25. ❌ **TypeScript**: Use `any` type - Use union types and proper typing instead
+26. ❌ **i18n**: Use `useTranslations()` without namespace - MUST specify namespace for type safety
+27. ❌ **i18n**: Use dynamic translation keys without proper typing - Define union types for keys
+28. ❌ **Design**: Ignore responsive design (always implement mobile-first)
+29. ❌ **Forms**: Skip form validation (always use Zod schemas)
+30. ❌ **Dropdowns**: Render dropdown items without checking if items array exists/has length
+31. ❌ **Build**: Run `pnpm build` or `pnpm lint` commands - The user will run these manually
 
 ### ✅ DO
+
 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`
@@ -1369,30 +1666,30 @@ import { Navbar } from '@/components/layout';
 11. ✅ **Images**: Prefer SVG over PNG when source is vector
 12. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
 13. ✅ **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 (NO `any`)
-29. ✅ **TypeScript**: Use union types for translation keys (e.g., `labelKey: 'product' | 'useCases'`)
-30. ✅ **i18n**: Specify namespace in `useTranslations('namespace')` for type safety
-31. ✅ **i18n**: Define typed keys in config to avoid dynamic string issues
-32. ✅ **Dropdowns**: Check array exists and has length before mapping (`items && items.length > 0`)
-33. ✅ **React**: Use `'use client'` directive for interactive components
-34. ✅ **Design**: Follow mobile-first responsive design
-35. ✅ **States**: Implement proper loading and error states
-36. ✅ **Patterns**: Follow existing code patterns and naming conventions
+14. ✅ **Colors**: Use theme colors from hero.ts (`bg-primary`, `text-primary-600`, `bg-success`)
+15. ✅ **Colors**: Check hero.ts and globals.css for available colors before using custom values
+16. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
+17. ✅ **Navigation**: Import `usePathname`, `useRouter` from `next/navigation`
+18. ✅ **Text**: Use i18n translation keys for ALL text (`t('key')`)
+19. ✅ **URLs**: Use `NAVIGATION_URLS` for ALL navigation links
+20. ✅ **Data**: Map menu items, dropdown options from constants (never hardcode)
+21. ✅ **Components**: Use HeroUI components first (e.g., use `Navbar` from `@heroui/react` for navigation)
+22. ✅ **Components**: Use existing wrappers from `src/components/ui/` when available (e.g., `Button`)
+23. ✅ **Components**: Configure component styles in wrappers using `extendVariants`
+24. ✅ **Components**: Set `defaultVariants` in wrapper configuration to avoid repetition
+25. ✅ **Styling**: Use component props for styles, but ONLY specify non-default values
+26. ✅ **Styling**: Omit props that match defaultVariants (e.g., don't write `size="md"` if `md` is default)
+27. ✅ **Styling**: Use className ONLY for layout utilities (`mt-4`, `hidden`, `lg:flex`)
+28. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
+29. ✅ **TypeScript**: Implement strict typing with proper types (NO `any`)
+30. ✅ **TypeScript**: Use union types for translation keys (e.g., `labelKey: 'product' | 'useCases'`)
+31. ✅ **i18n**: Specify namespace in `useTranslations('namespace')` for type safety
+32. ✅ **i18n**: Define typed keys in config to avoid dynamic string issues
+33. ✅ **Dropdowns**: Check array exists and has length before mapping (`items && items.length > 0`)
+34. ✅ **React**: Use `'use client'` directive for interactive components
+35. ✅ **Design**: Follow mobile-first responsive design
+36. ✅ **States**: Implement proper loading and error states
+37. ✅ **Patterns**: Follow existing code patterns and naming conventions
 
 ---
 
@@ -1401,6 +1698,7 @@ import { Navbar } from '@/components/layout';
 When converting Figma to code, ensure:
 
 ### Icons & Assets
+
 - [ ] Exported icons as SVG from Figma
 - [ ] Placed SVG files in `src/assets/icons/`
 - [ ] Ran `pnpm generate-icons` to create React components
@@ -1415,6 +1713,7 @@ When converting Figma to code, ensure:
 - [ ] 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 (e.g., `<Button>` not `<button>`)
 - [ ] Configured component styles in wrapper/theme (not inline)
@@ -1425,6 +1724,7 @@ When converting Figma to code, ensure:
 - [ ] Mapped all data from constants (no hardcoded menu items/dropdowns)
 
 ### Content & Navigation
+
 - [ ] ALL text uses i18n translation keys (no hardcoded text)
 - [ ] ALL labels use `t('labelKey')`
 - [ ] ALL placeholders use `t('placeholderKey')`
@@ -1433,18 +1733,21 @@ When converting Figma to code, ensure:
 - [ ] 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
 
 ### 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
@@ -1457,12 +1760,14 @@ When converting Figma to code, ensure:
 Before finalizing code, verify:
 
 ### Icons & Assets
+
 1. **Icons workflow** - All icons created via `pnpm generate-icons` (not manual)
 2. **Icons source** - SVG files exist in `src/assets/icons/`
 3. **Logos location** - All logos/images in `public/` directory (not `src/`)
 4. **Image format** - SVG used for logos when possible (not PNG)
 
 ### Components & Styling
+
 1. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
 2. **No direct HeroUI imports** - Only through `@/components/ui`
 3. **Component reuse** - Don't duplicate existing components
@@ -1472,17 +1777,20 @@ Before finalizing code, verify:
 7. **Map from constants** - All menu items, dropdown options mapped from config files
 
 ### i18n & Navigation
+
 5. **Zero hardcoded text** - ALL text uses `t('key')`
 6. **Zero hardcoded URLs** - ALL links use `NAVIGATION_URLS`
 7. **Form fields i18n** - Labels, placeholders, errors all use translation keys
 
 ### Styling & Layout
+
 8. **Tailwind only** - No CSS modules, no styled-components
 9. **HeroUI theme colors** - Use semantic colors, not arbitrary values
 10. **Consistent spacing** - Use `space-y-*` and `space-x-*` utilities
 11. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
 
 ### TypeScript & Validation
+
 12. **Proper TypeScript** - No `any`, all props typed
 13. **Form validation** - Zod schemas for all forms
 
@@ -1491,6 +1799,7 @@ Before finalizing code, verify:
 ## 📚 Reference Files
 
 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`
@@ -1502,6 +1811,7 @@ When in doubt, check these example files:
 ## 🚀 Quick Reference Guide
 
 ### Icons Workflow
+
 ```bash
 # 1. Export SVG from Figma
 # 2. Place in folder
@@ -1516,6 +1826,7 @@ import { IconIcon } from '@/components/icons';
 ```
 
 ### Logos/Images Workflow
+
 ```bash
 # 1. Export SVG/PNG from Figma
 # 2. Place in public with organized folders
@@ -1548,6 +1859,7 @@ import { IMAGES } from '@/config/images';
 ```
 
 ### Tailwind Standard Classes
+
 ```tsx
 // Heights/Widths
 h-10 = 40px    w-14 = 56px    size-5 = 20px
@@ -1567,6 +1879,7 @@ text-lg = 18px    text-3xl = 30px
 ```
 
 ### Common Patterns
+
 ```tsx
 // Icons (auto-generated)
 import { MenuIcon, CloseIcon } from '@/components/icons';