memories

# DEVDAH PROJECT - COMPLETE ARCHITECTURE & PATTERNS

```
██████╗ ███████╗██╗   ██╗██████╗  █████╗ ██╗  ██╗
██╔══██╗██╔════╝██║   ██║██╔══██╗██╔══██╗██║  ██║
██║  ██║█████╗  ██║   ██║██║  ██║███████║███████║
██║  ██║██╔══╝  ╚██╗ ██╔╝██║  ██║██╔══██║██╔══██║
██████╔╝███████╗ ╚████╔╝ ██████╔╝██║  ██║██║  ██║
╚═════╝ ╚══════╝  ╚═══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝
```
**Developer Dashboard** - A Modern Next.js 14 Application with TypeScript, Tailwind, and Framer Motion

**Created by:** Nour Yahyaoui
**GitHub:** nour-yahyaoui
**Phone:** 25739896
**Version:** 1.0.1

---

## 📋 PROJECT OVERVIEW

This is a **multi-functional developer dashboard** built with Next.js 14, TypeScript, TailwindCSS, and Framer Motion. The core concept is a **left sidebar navigation** that houses different sections/tools for developers, with each link leading to a specialized page component.

**Core Philosophy:** Consistency over creativity. Every page follows the exact same patterns, uses the exact same colors, and provides the exact same user experience. Breaking these patterns creates technical debt and a fragmented user experience.

---

## 🎨 COLOR PALETTE - CRITICAL - NO EXCEPTIONS

**ALWAYS USE THESE HEX CODES - DO NOT DEVIATE. EVER.**

| Color Name | Hex Code | Usage | Sidebar Assignment |
|------------|----------|-------|-------------------|
| Slate 600 | `#475569` | Dark text, secondary buttons, constraints, error states | Reserved |
| Slate 500 | `#64748b` | Secondary text, icons, borders, placeholders | Reserved |
| Slate 400 | `#94a3b8` | Disabled states, "All" category, subtle text | Reserved |
| Pink | `#ffb7c5` | Buttons, animated category, Button Gallery | Button Gallery |
| Light Blue | `#c5e6ff` | Dashboard link, basic category, UI category | Dashboard |
| Light Purple | `#d2b7ff` | Themes link, glass category, arrows category | CSS Themes |
| Light Green | `#b7ffca` | 3D category, success states, communication category | Icons Gallery |

**CRITICAL RULE:** These 7 colors are the **ONLY** colors used in the entire application. No exceptions. No custom hex codes. No `#000000` (use `#0a0a0a` for near-black), no `#ffffff` (use `#fafafa` for near-white). This ensures visual consistency across all pages.

**Color Assignment Rules for Sidebar:**
- Dashboard: `#c5e6ff` (Light Blue)
- CSS Themes: `#d2b7ff` (Light Purple)  
- Button Gallery: `#ffb7c5` (Pink)
- Icons Gallery: `#b7ffca` (Light Green)
- Next Section: `#475569` (Slate 600)
- Next: `#64748b` (Slate 500)
- Next: `#94a3b8` (Slate 400)

---

## 📁 PROJECT STRUCTURE - DO NOT CHANGE - MANDATORY

```
app/
├── components/
│   ├── data/                      # STATIC DATA LAYER - MUST export interface + data
│   │   ├── themes.ts              # Color themes data with categories
│   │   └── buttons.ts            # Button gallery data with tailwind/html
│   │
│   ├── layout/                   # LAYOUT COMPONENTS - NEVER modify structure
│   │   ├── Sidebar.tsx           # Main sidebar with navigation - 7 colors only
│   │   ├── DashboardLayout.tsx   # Wrapper with sidebar + content + header + footer
│   │   ├── Header.tsx           # Page header with title and back button
│   │   └── Footer.tsx           # Footer with developer info and date
│   │
│   ├── ui/                       # REUSABLE UI COMPONENTS
│   │   └── RedirectToDashboard.tsx # Auto-redirect from root to /dashboard
│   │
│   └── dashboard/                # PAGE-SPECIFIC COMPONENTS - MUST follow patterns
│       ├── ThemeCard.tsx         # Theme display card with copy functionality
│       ├── ThemeCardSkeleton.tsx # Loading skeleton for themes - MATCH EXACT LAYOUT
│       ├── ButtonCard.tsx        # Button display with HTML/Tailwind toggle
│       ├── ButtonCardSkeleton.tsx # Loading skeleton for buttons
│       ├── CategoryFilter.tsx    # Filter buttons with active state animation
│       ├── CodeTypeToggle.tsx    # HTML/Tailwind toggle for buttons
│       └── Pagination.tsx        # Pagination with ellipsis - ALWAYS 6 per page
│
├── dashboard/                    # DASHBOARD PAGES - ALL must use DashboardLayout
│   ├── page.tsx                 # Main dashboard - PROJECT DOCUMENTATION HUB
│   ├── themes/                  # CSS THEMES SECTION - Color palette gallery
│   │   └── page.tsx            # Theme gallery with filters and copy
│   ├── buttons/                 # BUTTON GALLERY SECTION - HTML/Tailwind buttons
│   │   └── page.tsx            # Button gallery with code toggle and copy
│   └── icons/                  # ICONS GALLERY SECTION - Feather icons collection
│       └── page.tsx            # Icons gallery with search and copy
│
├── globals.css                  # Global styles - Tailwind imports only
└── layout.tsx                  # Root layout with Inter font
```

---

## 🧱 CRITICAL PATTERNS - MUST FOLLOW - NON-NEGOTIABLE

### 1. ALL PAGES MUST USE RELATIVE IMPORTS (NO @)

```tsx
// ✅ CORRECT - ALWAYS USE THIS
import DashboardLayout from '../../../components/layout/DashboardLayout';
import ButtonCard from '../../../components/dashboard/ButtonCard';
import { buttonData } from '../../../components/data/buttons';

// ❌ INCORRECT - NEVER USE - WILL CAUSE BUILD FAILURES
import DashboardLayout from '@/components/layout/DashboardLayout';
import ButtonCard from '@components/dashboard/ButtonCard';
```

### 2. ALL PAGES MUST START WITH 'use client'

```tsx
'use client';  // ALWAYS first line - MANDATORY

import { useState, useEffect } from 'react';
// ... rest of imports
```

### 3. ALL PAGES MUST USE DashboardLayout WITH pageTitle

```tsx
export default function YourPage() {
  return (
    <DashboardLayout pageTitle="Your Page Title" showBackButton={true}>
      <div className="space-y-8">
        {/* Your content */}
      </div>
    </DashboardLayout>
  );
}
```

### 4. PAGINATION IS ALWAYS 6 ITEMS PER PAGE

```tsx
const ITEMS_PER_PAGE = 6; // DO NOT CHANGE - CONSISTENCY IS KEY
```

### 5. LOADING SKELETONS ARE REQUIRED FOR ALL GALLERIES

```tsx
<AnimatePresence mode="wait">
  {isLoading ? (
    <YourSkeletonComponent />
  ) : (
    <motion.div key={currentPage}>
      {displayedItems.map(item => <YourCard key={item.id} item={item} />)}
    </motion.div>
  )}
</AnimatePresence>
```

### 6. SCROLL TO TOP ON PAGE CHANGE - MANDATORY

```tsx
const scrollToTop = useCallback(() => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
  document.documentElement.scrollTop = 0; // FALLBACK
  document.body.scrollTop = 0; // FALLBACK
}, []);

const handlePageChange = async (page: number) => {
  setIsLoading(true);
  requestAnimationFrame(() => {
    scrollToTop(); // MUST HAPPEN BEFORE STATE UPDATE
  });
  setCurrentPage(page);
  await new Promise(resolve => setTimeout(resolve, 400));
  setIsLoading(false);
};
```

### 7. COPY TO CLIPBOARD WITH FEEDBACK - STANDARD PATTERN

```tsx
const [copiedId, setCopiedId] = useState<string | null>(null);

const copyToClipboard = (text: string, id: string) => {
  if (!text) return; // GUARD CLAUSE - CRITICAL
  navigator.clipboard.writeText(text);
  setCopiedId(id);
  setTimeout(() => setCopiedId(null), 2000);
};

// In JSX
<button onClick={() => copyToClipboard(color, theme.id)}>
  {copiedId === theme.id ? <FiCheck /> : <FiCopy />}
  {copiedId === theme.id ? 'Copied!' : 'Copy'}
</button>
```

---

## 📊 DATA LAYER PATTERN - MUST FOLLOW EXACTLY

### Data File Template - `components/data/yourSection.ts`

```ts
// 1. EXPORT INTERFACE FIRST
export interface YourItem {
  id: number;           // ALWAYS number
  title: string;        // ALWAYS string
  category?: string;    // Optional - use if you need filtering
  // ... other properties
}

// 2. EXPORT DATA ARRAY WITH TYPE
export const yourData: YourItem[] = [
  {
    id: 1,
    title: "Item 1",
    category: "category-name",
    // ... other properties
  },
  // ... more items
];

// 3. OPTIONAL - Categories for filtering
export const yourCategories = [
  { id: 'all', name: 'All Items', color: '#94a3b8' },
  { id: 'category1', name: 'Category 1', color: '#ffb7c5' },
  { id: 'category2', name: 'Category 2', color: '#d2b7ff' },
  // ... etc - USE ONLY PALETTE COLORS
];
```

**CRITICAL:** You MUST export both the interface AND the data. Import the interface for typing, import the data for mapping.

---

## 🧩 COMPONENT PATTERNS - COPY EXACTLY

### Card Component Template - `components/dashboard/YourCard.tsx`

```tsx
'use client';

import { motion } from 'framer-motion';
import { FiCopy, FiCheck } from 'react-icons/fi';
import { useState } from 'react';
import { YourItem } from '../data/yourSection'; // IMPORT INTERFACE

interface YourCardProps {
  item: YourItem;      // USE INTERFACE FOR TYPING
  index: number;
}

export default function YourCard({ item, index }: YourCardProps) {
  const [copiedId, setCopiedId] = useState<number | null>(null);
  
  const copyToClipboard = (text: string, id: number) => {
    if (!text) return; // GUARD CLAUSE - PREVENT UNDEFINED ERRORS
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };
  
  // Helper function for category colors - ALWAYS USE PALETTE
  const getCategoryColor = (category: string) => {
    switch(category) {
      case 'modern': return '#ffb7c5';
      case 'vintage': return '#d2b7ff';
      case 'minimal': return '#c5e6ff';
      case 'dark': return '#475569';
      case 'nature': return '#b7ffca';
      case 'pastel': return '#ffb7c5';
      case 'gradient': return '#ffb7c5';
      case 'glass': return '#d2b7ff';
      case '3d': return '#b7ffca';
      case 'animated': return '#ffb7c5';
      case 'basic': return '#c5e6ff';
      case 'ui': return '#c5e6ff';
      case 'media': return '#ffb7c5';
      case 'arrows': return '#d2b7ff';
      case 'communication': return '#b7ffca';
      case 'weather': return '#ffb7c5';
      case 'tools': return '#c5e6ff';
      default: return '#94a3b8';
    }
  };
  
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05 }}
      whileHover={{ y: -4 }}
      className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-all"
    >
      <div className="p-6">
        {/* Header with category badge */}
        <div className="flex items-start justify-between mb-4">
          <h3 className="font-semibold text-gray-900">{item.title}</h3>
          {item.category && (
            <span 
              className="px-2 py-0.5 rounded-full text-xs font-medium"
              style={{ 
                backgroundColor: `${getCategoryColor(item.category)}20`, // 20 = 12% opacity
                color: getCategoryColor(item.category)
              }}
            >
              {item.category}
            </span>
          )}
        </div>
        
        {/* Preview area - varies by page */}
        
        {/* Copy button - STANDARD PATTERN */}
        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={() => copyToClipboard(someText, item.id)}
          className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm"
          style={{ backgroundColor: '#f1f5f9' }}
        >
          {copiedId === item.id ? <FiCheck /> : <FiCopy />}
          {copiedId === item.id ? 'Copied!' : 'Copy'}
        </motion.button>
      </div>
    </motion.div>
  );
}
```

### Skeleton Component Template - MUST MATCH CARD LAYOUT EXACTLY

```tsx
'use client';

import { motion } from 'framer-motion';

export default function YourCardSkeleton() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="bg-white rounded-xl border border-gray-200 overflow-hidden"
    >
      <div className="p-6">
        {/* Header - match dimensions of real card */}
        <div className="flex items-start justify-between mb-4">
          <div className="w-32 h-5 bg-gray-200 rounded animate-pulse" />
          <div className="w-16 h-5 bg-gray-200 rounded-full animate-pulse" />
        </div>
        
        {/* Preview area - match dimensions */}
        <div className="mb-4 h-20 bg-gray-100 rounded-lg animate-pulse" />
        
        {/* Copy button - match dimensions */}
        <div className="w-20 h-8 bg-gray-200 rounded-lg animate-pulse" />
      </div>
    </motion.div>
  );
}
```

---

## 🔗 SIDEBAR NAVIGATION - HOW TO ADD NEW LINK

Edit `components/layout/Sidebar.tsx`:

```tsx
// 1. IMPORT THE ICON - ONLY FROM react-icons/fi
import { 
  FiHome, 
  FiDroplet, 
  FiSmartphone,
  FiGrid,        // Icons Gallery
  FiBox,         // Alternative
  FiLayers,      // Alternative
  FiFeather,     // Alternative
  FiCode,
  FiUser,
  FiChevronRight,
  FiChevronLeft
} from 'react-icons/fi';

// 2. ADD TO navItems ARRAY - FOLLOW COLOR ASSIGNMENT RULES
const navItems: NavItem[] = [
  {
    name: 'Dashboard',
    path: '/dashboard',
    icon: <FiHome size={20} />,
    color: '#c5e6ff' // Light blue - FIXED
  },
  {
    name: 'CSS Themes',
    path: '/dashboard/themes',
    icon: <FiDroplet size={20} />,
    color: '#d2b7ff' // Light purple - FIXED
  },
  {
    name: 'Button Gallery',
    path: '/dashboard/buttons',
    icon: <FiSmartphone size={20} />,
    color: '#ffb7c5' // Pink - FIXED
  },
  {
    name: 'Icons Gallery',
    path: '/dashboard/icons',
    icon: <FiGrid size={20} />, // DO NOT USE FiPalette - DOESN'T EXIST
    color: '#b7ffca' // Light green - FIXED
  },
  // NEXT SECTION - Use remaining palette colors in order
  {
    name: 'Your New Section',
    path: '/dashboard/your-section',
    icon: <FiBox size={20} />, // Choose appropriate icon
    color: '#475569' // Slate 600 - next in rotation
  }
];
```

**VALID ICONS ONLY - Common ones that exist:**
- ✅ `FiHome`, `FiUser`, `FiSettings`, `FiMail`, `FiLock`
- ✅ `FiBell`, `FiCalendar`, `FiClock`, `FiHeart`, `FiStar`
- ✅ `FiTrash2`, `FiEdit`, `FiCopy`, `FiSave`, `FiUpload`, `FiDownload`
- ✅ `FiCamera`, `FiVideo`, `FiMusic`, `FiImage`, `FiFile`, `FiFolder`
- ✅ `FiCode`, `FiTerminal`, `FiBox`, `FiGrid`, `FiLayers`, `FiLayout`
- ✅ `FiMenu`, `FiX`, `FiCheck`, `FiAlertCircle`, `FiSearch`
- ✅ `FiArrowUp`, `FiArrowDown`, `FiArrowLeft`, `FiArrowRight`
- ✅ `FiChevronUp`, `FiChevronDown`, `FiChevronLeft`, `FiChevronRight`
- ✅ `FiDroplet`, `FiSun`, `FiMoon`, `FiZap`, `FiWind`
- ✅ `FiTool`, `FiWrench`, `FiEye`, `FiEyeOff`, `FiShield`

**🚨 ICONS THAT DO NOT EXIST - NEVER USE:**
- ❌ `FiPalette` - DOES NOT EXIST - Use `FiGrid` or `FiLayers` instead
- ❌ `FiBug` - DOES NOT EXIST - Use `FiAlertCircle` instead
- ❌ `FiCube` - DOES NOT EXIST - Use `FiBox` instead
- ❌ `FiLightbulb` - DOES NOT EXIST - Use `FiZap` instead
- ❌ `FiTag` - For categories, use `FiBookmark` instead

---

## 🚨 COMMON MISTAKES & SOLUTIONS - READ CAREFULLY

### ERROR 1: "Module not found: Can't resolve '@vercel/turbopack-next/...'"

**SOLUTION:** Remove Geist Mono font, use only Inter:
```tsx
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
// DO NOT use Geist_Mono
```

### ERROR 2: "Export FiPalette/FiBug/FiCube doesn't exist"

**SOLUTION:** Use valid alternatives:
```tsx
// ❌ WRONG
import { FiPalette, FiBug, FiCube } from 'react-icons/fi';

// ✅ CORRECT
import { FiGrid, FiAlertCircle, FiBox } from 'react-icons/fi';
```

### ERROR 3: "Type '{ id: any; }' is missing properties from type 'ButtonData'"

**SOLUTION:** Your data file is not exporting correctly:
```tsx
// ✅ CORRECT - In buttons.ts
export interface ButtonData { ... }  // EXPORT interface
export const buttonData: ButtonData[] = [ ... ]; // EXPORT data

// ✅ CORRECT - In page.tsx
import { buttonData } from '../../../components/data/buttons'; // IMPORT data
import { ButtonData } from '../../../components/data/buttons'; // IMPORT type (if needed)
```

### ERROR 4: "Argument of type 'undefined' is not assignable to parameter of type 'string'"

**SOLUTION:** Add guard clause in copyToClipboard:
```tsx
const copyToClipboard = (text: string, id: string) => {
  if (!text) return; // ✅ ALWAYS ADD THIS GUARD
  navigator.clipboard.writeText(text);
  // ...
};
```

### ERROR 5: "Type '(el: HTMLElement | null) => HTMLElement | null' is not assignable to type 'Ref'"

**SOLUTION:** Use `id` instead of `ref` for sections:
```tsx
// ❌ WRONG
<section ref={el => sectionRefs.current.section = el}>

// ✅ CORRECT
<section id="section-name">  // Use ID
// And use document.getElementById() or querySelectorAll
```

### ERROR 6: "Property 'variant' does not exist on type 'Variants'"

**SOLUTION:** Use `as const` or proper typing:
```tsx
const sidebarVariants = {
  open: {
    width: '280px',
    transition: {
      type: 'spring' as const, // ✅ Add as const
      stiffness: 200,
      damping: 25
    }
  },
  // ...
};
```

---

## 📦 INSTALLED DEPENDENCIES - DO NOT ADD DUPLICATES

```json
{
  "dependencies": {
    "next": "14.x",
    "react": "18.x",
    "react-dom": "18.x",
    "typescript": "5.x",
    "tailwindcss": "3.x",
    "framer-motion": "10.x",      // ALL animations - MANDATORY
    "react-icons": "4.x"          // ALL icons - ONLY Fi prefix - MANDATORY
  }
}
```

**NEVER INSTALL:**
- ❌ `@heroicons/react` - Use `react-icons/fi` instead
- ❌ `font-awesome` - Use `react-icons/fi` instead
- ❌ `@vercel/analytics` - Not needed
- ❌ `@vercel/speed-insights` - Not needed
- ❌ `axios` - Use native `fetch` or SWR if needed
- ❌ `redux` - Not needed, use React hooks
- ❌ `material-ui` - We use Tailwind only
- ❌ `bootstrap` - We use Tailwind only
- ❌ `sass` - We use Tailwind CSS only
- ❌ `styled-components` - We use Tailwind only

---

## 🎯 HOW TO CREATE A NEW SECTION - STEP BY STEP - FOLLOW EXACTLY

### Step 1: Create Data File
Create `components/data/yourSection.ts`:
- [ ] Export interface `YourItem`
- [ ] Export const `yourData: YourItem[]`
- [ ] Export categories if needed
- [ ] Use only palette colors

### Step 2: Create Card Component
Create `components/dashboard/YourCard.tsx`:
- [ ] Start with `'use client'`
- [ ] Import `YourItem` interface
- [ ] Add `copyToClipboard` with guard clause
- [ ] Add `getCategoryColor` helper
- [ ] Use Framer Motion animations
- [ ] Use only palette colors

### Step 3: Create Skeleton Component
Create `components/dashboard/YourCardSkeleton.tsx`:
- [ ] Match card layout EXACTLY
- [ ] Use `animate-pulse` class
- [ ] Match all dimensions

### Step 4: Create Page Component
Create `app/dashboard/your-section/page.tsx`:
- [ ] Start with `'use client'`
- [ ] Import `DashboardLayout`
- [ ] Import `yourData` (NOT the interface)
- [ ] Set `ITEMS_PER_PAGE = 6`
- [ ] Add loading state with `useEffect`
- [ ] Add `scrollToTop` function
- [ ] Add pagination logic
- [ ] Add category filter if needed
- [ ] Return `DashboardLayout` with `pageTitle`

### Step 5: Add to Sidebar
Update `components/layout/Sidebar.tsx`:
- [ ] Import icon from `react-icons/fi`
- [ ] Add to `navItems` array
- [ ] Assign color from palette in rotation order
- [ ] Use valid icon (no FiPalette, FiBug, FiCube, FiLightbulb)

### Step 6: Test Everything
- [ ] Loading skeleton shows on page load
- [ ] Copy function works with feedback
- [ ] Pagination works (6 per page)
- [ ] Scroll to top on page change
- [ ] All colors are from palette
- [ ] Responsive on mobile
- [ ] No TypeScript errors
- [ ] No build errors

---

## 🧪 TESTING CHECKLIST - RUN THIS BEFORE EVERY PUSH

```bash
# 1. Check for absolute imports
grep -r "from '@/components" app/ && echo "❌ FOUND ABSOLUTE IMPORTS" || echo "✅ No absolute imports"

# 2. Check for invalid icons
grep -r "FiPalette\|FiBug\|FiCube\|FiLightbulb" app/ && echo "❌ FOUND INVALID ICONS" || echo "✅ No invalid icons"

# 3. Check for custom hex codes
grep -r "#[0-9A-Fa-f]\{6\}" app/ --include="*.tsx" --include="*.ts" | grep -v "475569\|64748b\|94a3b8\|ffb7c5\|c5e6ff\|d2b7ff\|b7ffca" && echo "❌ FOUND CUSTOM COLORS" || echo "✅ Only palette colors"

# 4. Check for 'use client'
grep -L "use client" app/dashboard/**/page.tsx && echo "❌ PAGES MISSING 'use client'" || echo "✅ All pages have 'use client'"

# 5. Check ITEMS_PER_PAGE
grep -r "ITEMS_PER_PAGE =" app/ | grep -v "6" && echo "❌ NON-STANDARD PAGINATION" || echo "✅ Pagination is 6"
```

---

## 📝 FINAL NOTES - READ BEFORE STARTING ANY NEW SECTION

This document is your **SINGLE SOURCE OF TRUTH**. 

**Before creating a new section:**
1. **READ THIS ENTIRE DOCUMENT** - Every time, without exception
2. **LOOK AT EXISTING PAGES** - `themes/`, `buttons/`, `icons/` are your perfect examples
3. **FOLLOW THE TEMPLATES EXACTLY** - Do not improvise, do not "improve"
4. **USE THE COLOR PALETTE** - No exceptions, no custom colors
5. **TEST ALL INTERACTIONS** - Copy, pagination, scroll, loading states
6. **KEEP IT CONSISTENT** - Users should feel it's the same app

**The Golden Rules:**
- ✅ Relative imports only - NO @/*
- ✅ 'use client' on every page
- ✅ DashboardLayout wrapper on every page
- ✅ 6 items per page - ALWAYS
- ✅ Loading skeletons - ALWAYS
- ✅ Scroll to top on page change - ALWAYS
- ✅ Copy with feedback - ALWAYS
- ✅ Palette colors only - ALWAYS
- ✅ React Icons (Fi) only - ALWAYS
- ✅ Framer Motion animations - ALWAYS

**When in doubt, ask yourself: "What would the Themes page do?"**
Then do exactly that.

---

*This document was last updated to reflect the complete architecture of the DEVDAH project. Follow it religiously. No exceptions.*

**DEVDAH v1.0.0** - Built by Nour Yahyaoui - 25739896 - github.com/nour-yahyaoui