@adlas/create-app 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adlas/create-app",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Adlas project initializer with Figma and Swagger integration",
   "type": "module",
   "main": "./dist/cli.js",

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -11,25 +11,19 @@ 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
@@ -51,6 +45,7 @@ mcp__figma -
 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
+12. **❌ NEVER run build** - Do NOT run `pnpm build` or `pnpm lint` commands. The user will run these manually
 
 ---
 
@@ -59,7 +54,6 @@ mcp__figma -
 ### 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">
@@ -76,7 +70,6 @@ mcp__figma -
 ```
 
 **✅ CORRECT - Use props and configured variants**:
-
 ```tsx
 // Step 1: Configure variants in component wrapper
 // File: src/components/ui/Button.tsx
@@ -86,13 +79,16 @@ export const Button = extendVariants(HeroUIButton, {
   variants: {
     color: {
       // ✅ Use theme colors from hero.ts, NOT custom colors
-      primary: 'bg-primary text-black',
+      primary: 'bg-primary-500 text-black',
     },
     size: {
-      sm: 'h-8 px-3 text-xs',
+      sm: 'h-10 px-4 text-sm',
       md: 'h-10 px-4 text-sm',
       lg: 'h-12 px-6 text-base',
     },
+    radius: {
+      full: 'rounded-full',
+    },
   },
   defaultVariants: {
     size: 'md',
@@ -121,7 +117,6 @@ 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
@@ -134,7 +129,6 @@ 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: {
@@ -156,7 +150,6 @@ secondary, success, danger, warning, default, foreground, background
 ```
 
 **What goes where**:
-
 ```tsx
 // In Button.tsx configuration:
 const Button = extendVariants(HerouiButton, {
@@ -177,16 +170,17 @@ const Button = extendVariants(HerouiButton, {
 
 // In component usage:
 <Button
-  color="primary"              // ✅ Specify only when different from default
-  radius="full"                // ✅ HeroUI built-in prop (don't configure in wrapper)
+  color="primary"              // ✅ Configured variant
+  size="sm"                    // ✅ Configured variant (can omit if md is default)
+  radius="full"                // ✅ Configured radius variant
   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
+// Note: Omit props that match defaultVariants to keep code clean
 
 // Using size prop when you need different size:
-<Button color="primary" size="lg">  // ✅ Override default size
+<Button color="primary" size="lg" radius="full">  // ✅ Override default size
   Large Button
 </Button>
 
@@ -200,7 +194,6 @@ import { Icon } from '@/components/ui';
 ### Data Must Be Mapped from Constants
 
 **❌ WRONG - Hardcoded data**:
-
 ```tsx
 <DropdownMenu>
   <DropdownItem key="option1">Option 1</DropdownItem>
@@ -210,17 +203,16 @@ 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) => (
@@ -228,7 +220,7 @@ import { productMenuItems } from "@/config/menuOptions";
       {t(item.labelKey)}
     </DropdownItem>
   ))}
-</DropdownMenu>;
+</DropdownMenu>
 ```
 
 ---
@@ -236,14 +228,11 @@ 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)
@@ -259,7 +248,6 @@ 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
@@ -278,12 +266,10 @@ 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)
@@ -293,7 +279,6 @@ src/components/
 ```
 
 ### Styling
-
 - **Global styles**: `src/styles/globals.css`
 - **Theme config**: `src/styles/hero.ts`
 - **Approach**: Tailwind CSS utility classes ONLY
@@ -306,7 +291,6 @@ src/components/
 ### Navigation Components
 
 #### Navbar (HeroUI)
-
 **CRITICAL**: Always use HeroUI Navbar component for navigation bars:
 
 ```tsx
@@ -318,8 +302,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 */}
@@ -330,16 +314,14 @@ 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>
 
@@ -349,28 +331,103 @@ 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
 - ✅ className ONLY for layout (`hidden`, `lg:flex`, `bg-black`)
 - ❌ DON'T use custom `<header>` or `<nav>` tags
 
-### Form Components
+#### Dropdown Menus in Navbar
+**CRITICAL**: Always use HeroUI Dropdown components for dropdown menus:
 
+```tsx
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} 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}>
+          {t(subItem.labelKey)}
+        </DropdownItem>
+      ))}
+    </DropdownMenu>
+  </Dropdown>
+) : (
+  <Button variant="light">
+    {t(item.labelKey)}
+  </Button>
+)}
+```
+
+**Example Menu Configuration** (`src/config/menuItems.ts`):
+```tsx
+export type MenuItem = {
+  key: string;
+  labelKey: 'product' | 'useCases' | 'resources' | 'company' | 'pricing';
+  href?: string;
+  hasDropdown?: boolean;
+  items?: Array<{
+    key: string;
+    labelKey: string;
+    href: string;
+  }>;
+};
+
+export const navbarMenuItems: MenuItem[] = [
+  {
+    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: '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
+- ✅ Add `aria-label` to DropdownMenu for accessibility
+- ✅ Map menu items from config constants, never hardcode
+- ✅ Use union types for `labelKey` to ensure type safety
+- ❌ 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';
 
@@ -406,7 +463,6 @@ import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
 ```
 
 #### Selection Components
-
 ```tsx
 import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
 
@@ -439,18 +495,16 @@ 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';
 
@@ -468,7 +522,6 @@ import { Button } from '@/components/ui';
 ```
 
 #### Other Components
-
 ```tsx
 import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 
@@ -508,32 +561,34 @@ 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`)
 - Auto-format and lint the generated code
 - 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
+
 #### Step 4: Use in Code
 
 **CORRECT USAGE**: Use the `Icon` component with `name` prop (PascalCase):
@@ -548,7 +603,6 @@ 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';
@@ -557,7 +611,6 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 ```
 
 **Available Icons** (auto-generated):
-
 - ChevronDownIcon, ChevronRightIcon
 - CloseIcon, MenuIcon
 - EyeIcon, EyeSlashIcon
@@ -567,13 +620,11 @@ 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
@@ -582,7 +633,6 @@ 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
@@ -595,7 +645,6 @@ 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
@@ -607,19 +656,16 @@ 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/
@@ -645,36 +691,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 = {
@@ -688,18 +734,28 @@ export const IMAGES = {
 
 #### Step 5: Reference in Code
 
+**CRITICAL: ALWAYS import and use IMAGES constant - NEVER hardcode paths**
+
 ```tsx
-// Import from centralized constants
+// ✅ CORRECT - Import from centralized constants
 import { IMAGES } from '@/config/images';
 import Image from 'next/image';
 
 // Using Next.js Image component (recommended)
 <Image
-  src={IMAGES.LOGOS.FULL}
-  alt="Company Logo"
-  width={120}
-  height={40}
-  priority
+  src={IMAGES.LOGOS.BINA}  // ✅ Use constant
+  alt="BINA"
+  width={54}
+  height={41}
+  className="h-10 w-auto"
+/>
+
+// ❌ WRONG - Hardcoded path
+<Image
+  src="/images/logos/bina.png"  // ❌ Don't hardcode
+  alt="BINA"
+  width={54}
+  height={41}
 />
 
 // Using standard img tag (for SVGs with CSS control)
@@ -718,22 +774,20 @@ 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
 - Forget to optimize images before adding
-- Hardcode image paths directly in components (use centralized constants)
+- **CRITICAL**: Hardcode image paths directly in components - MUST use `IMAGES` constant from `@/config/images`
+- 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)
@@ -750,30 +804,27 @@ 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
@@ -789,7 +840,6 @@ bg-background   text-background   border-background
 ### Color Usage Examples
 
 **✅ CORRECT - Use theme colors**:
-
 ```tsx
 // In component configuration (NO hover states)
 color: {
@@ -803,7 +853,6 @@ 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: {
@@ -823,13 +872,11 @@ 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({
@@ -838,9 +885,9 @@ export default heroui({
       colors: {
         // Add new color palette
         accent: {
-          50: "#...",
-          500: "#...",
-          900: "#...",
+          50: '#...',
+          500: '#...',
+          900: '#...',
         },
       },
     },
@@ -848,7 +895,7 @@ export default heroui({
 });
 
 // 2. Use in components
-className = "bg-accent text-accent-900";
+className="bg-accent text-accent-900"
 ```
 
 ---
@@ -860,23 +907,21 @@ 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
@@ -900,13 +945,11 @@ 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">
@@ -916,7 +959,6 @@ auto, full, screen, fit, min, max
 ```
 
 ### Responsive Breakpoints (Mobile-First)
-
 ```css
 /* Mobile */
 4xs: 320px   /* iPhone SE */
@@ -937,7 +979,6 @@ 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 */}
@@ -945,9 +986,7 @@ 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
@@ -958,7 +997,6 @@ 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">
@@ -982,20 +1020,19 @@ 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>;
@@ -1022,7 +1059,7 @@ export default function LoginForm() {
       <Input
         label="Email"
         type="email"
-        {...register("email")}
+        {...register('email')}
         errorMessage={errors.email?.message}
         isInvalid={!!errors.email}
       />
@@ -1030,7 +1067,7 @@ export default function LoginForm() {
       <Input
         label="Password"
         type="password"
-        {...register("password")}
+        {...register('password')}
         errorMessage={errors.password?.message}
         isInvalid={!!errors.password}
       />
@@ -1052,20 +1089,18 @@ 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';
@@ -1082,11 +1117,10 @@ 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();
@@ -1102,29 +1136,64 @@ export function MyComponent() {
 
 ### Translations for ALL text
 
+**CRITICAL: Specify namespace to avoid TypeScript errors**
+
 ```tsx
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 function MyComponent() {
-  const t = useTranslations();
+  // ✅ CORRECT - Specify namespace for type safety
+  const t = useTranslations('namespace');
 
   return (
     <div>
-      {/* ✅ CORRECT - Using translation key */}
-      <h1>{t("welcome")}</h1>
-      <p>{t("description")}</p>
+      {/* Now you can use keys directly without type errors */}
+      <h1>{t('welcome')}</h1>
+      <p>{t('description')}</p>
+    </div>
+  );
+}
 
-      {/* ❌ WRONG - Hardcoded text */}
-      <h1>Welcome</h1>
+// ❌ WRONG - No namespace causes TypeScript errors with dynamic keys
+function BadComponent() {
+  const t = useTranslations(); // Missing namespace
+
+  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>)}
     </div>
   );
 }
 ```
 
-### Form labels, placeholders, errors - ALL must use i18n
+**Type-Safe Translation Pattern:**
+```tsx
+// 1. Define translation key types in config
+export type MenuItem = {
+  key: string;
+  labelKey: 'product' | 'useCases' | 'resources'; // Union type of valid keys
+  href?: string;
+};
+
+// 2. Use with namespace
+const t = useTranslations('navbar');
+
+// 3. Access keys directly (type-safe)
+{menuItems.map(item => (
+  <Button key={item.key}>
+    {t(item.labelKey)} {/* No TypeScript error */}
+  </Button>
+))}
+```
 
+### Form labels, placeholders, errors - ALL must use i18n
 ```tsx
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 function LoginForm() {
   const t = useTranslations();
@@ -1133,11 +1202,9 @@ 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 */}
@@ -1152,7 +1219,6 @@ function LoginForm() {
 ```
 
 ### Navigation URLs Reference
-
 ```tsx
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
@@ -1177,20 +1243,19 @@ 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;
     },
   });
@@ -1213,12 +1278,11 @@ 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 (
@@ -1231,14 +1295,11 @@ 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';
 
@@ -1247,29 +1308,32 @@ import { Navbar } from '@/components/layout';
 <main>{children}</main>
 ```
 
-**Implementation details** (see `src/components/layout/Navbar.tsx`):
-
-- ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`
+**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
+- ✅ Menu items mapped from `src/config/menuItems.ts` with typed `labelKey`
+- ✅ Dropdown menus with HeroUI `Dropdown`, `DropdownTrigger`, `DropdownMenu`
 - ✅ All styles via props, NO className for component styles
 - ✅ className ONLY for layout utilities
+- ✅ NO `any` types - uses union types for translation keys
 
 ---
 
 ## ⚠️ 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" />`
 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 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`)
+6. ❌ **Images**: Put logos/images in `src/` folder - MUST go in `public/`
+7. ❌ **Images**: Import images as modules unless necessary
+8. ❌ **Images**: **CRITICAL** - Hardcode image/video paths (e.g., `src="/images/logos/bina.png"`) - MUST use `IMAGES` constant
+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
@@ -1283,24 +1347,28 @@ import { Navbar } from '@/components/layout';
 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
-25. ❌ **Design**: Ignore responsive design (always implement mobile-first)
-26. ❌ **Forms**: Skip form validation (always use Zod schemas)
+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
 
 ### ✅ 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`
 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
+5. ✅ **Images**: Check `public/images/index.ts` BEFORE exporting from Figma
+6. ✅ **Images**: Check `public/images/logos/` directory for existing assets
+7. ✅ **Images**: Export SVG/PNG from Figma ONLY if not existing → Place in `public/images/` with organized folders
+8. ✅ **Images**: **CRITICAL** - Create/update `src/config/images.ts` with ALL image paths
+9. ✅ **Images**: **ALWAYS** import from `@/config/images` and use `IMAGES.LOGOS.BINA` (NEVER hardcode)
+10. ✅ **Images**: Add new images to centralized config immediately
+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
@@ -1316,11 +1384,15 @@ import { Navbar } from '@/components/layout';
 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
+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
 
 ---
 
@@ -1329,7 +1401,6 @@ 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
@@ -1344,7 +1415,6 @@ 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)
@@ -1355,7 +1425,6 @@ 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')`
@@ -1364,21 +1433,18 @@ 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
@@ -1391,14 +1457,12 @@ 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
@@ -1408,20 +1472,17 @@ 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
 
@@ -1430,7 +1491,6 @@ 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`
@@ -1442,7 +1502,6 @@ When in doubt, check these example files:
 ## 🚀 Quick Reference Guide
 
 ### Icons Workflow
-
 ```bash
 # 1. Export SVG from Figma
 # 2. Place in folder
@@ -1457,7 +1516,6 @@ import { IconIcon } from '@/components/icons';
 ```
 
 ### Logos/Images Workflow
-
 ```bash
 # 1. Export SVG/PNG from Figma
 # 2. Place in public with organized folders
@@ -1479,15 +1537,17 @@ export const IMAGES = {
   WEBSITE,
 } as const;
 
-# 4. Use in code
+# 4. Use in code - ALWAYS use IMAGES constant
 import { IMAGES } from '@/config/images';
-<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
-# OR
-<Image src={IMAGES.LOGOS.PRIMARY} alt="Logo" width={120} height={40} />
+
+# ✅ CORRECT
+<Image src={IMAGES.LOGOS.BINA} alt="Logo" width={54} height={41} />
+
+# ❌ WRONG - Hardcoded path
+<Image src="/images/logos/bina.png" alt="Logo" width={54} height={41} />
 ```
 
 ### Tailwind Standard Classes
-
 ```tsx
 // Heights/Widths
 h-10 = 40px    w-14 = 56px    size-5 = 20px
@@ -1507,15 +1567,19 @@ text-lg = 18px    text-3xl = 30px
 ```
 
 ### Common Patterns
-
 ```tsx
 // Icons (auto-generated)
 import { MenuIcon, CloseIcon } from '@/components/icons';
 <MenuIcon className="size-6 text-white" />
 
-// Logos (centralized constants)
+// Images & Logos (ALWAYS use IMAGES constant - NEVER hardcode)
 import { IMAGES } from '@/config/images';
-<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
+
+// ✅ CORRECT
+<Image src={IMAGES.LOGOS.BINA} alt="Logo" width={54} height={41} />
+
+// ❌ WRONG
+<Image src="/images/logos/bina.png" alt="Logo" />
 
 // Navigation (Next.js Link + constants)
 import Link from 'next/link';