chore: update devbook.md to mark completion of layout, UI components, and homepage; update dev.db

src/components/ui/Badge.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+type BadgeVariant =
+  | 'default'
+  | 'primary'
+  | 'strength'
+  | 'weakness'
+  | 'opportunity'
+  | 'threat'
+  | 'success'
+  | 'warning'
+  | 'destructive';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-card-hover text-foreground border-border',
+  primary: 'bg-primary/10 text-primary border-primary/20',
+  strength: 'bg-strength-bg text-strength border-strength-border',
+  weakness: 'bg-weakness-bg text-weakness border-weakness-border',
+  opportunity: 'bg-opportunity-bg text-opportunity border-opportunity-border',
+  threat: 'bg-threat-bg text-threat border-threat-border',
+  success: 'bg-success/10 text-success border-success/20',
+  warning: 'bg-warning/10 text-warning border-warning/20',
+  destructive: 'bg-destructive/10 text-destructive border-destructive/20',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className = '', variant = 'default', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center rounded-full border px-2.5 py-0.5
+          text-xs font-medium
+          ${variantStyles[variant]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+

src/components/ui/Button.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    'bg-primary text-primary-foreground hover:bg-primary-hover border-transparent',
+  secondary:
+    'bg-card text-foreground hover:bg-card-hover border-border',
+  outline:
+    'bg-transparent text-foreground hover:bg-card-hover border-border',
+  ghost:
+    'bg-transparent text-foreground hover:bg-card-hover border-transparent',
+  destructive:
+    'bg-destructive text-white hover:bg-destructive/90 border-transparent',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3 text-sm gap-1.5',
+  md: 'h-10 px-4 text-sm gap-2',
+  lg: 'h-12 px-6 text-base gap-2',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={`
+          inline-flex items-center justify-center rounded-lg border font-medium
+          transition-colors focus-visible:outline-none focus-visible:ring-2
+          focus-visible:ring-ring focus-visible:ring-offset-2
+          disabled:pointer-events-none disabled:opacity-50
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${className}
+        `}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="h-4 w-4 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+

src/components/ui/Card.tsx

@@ -0,0 +1,66 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hover?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', hover = false, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          rounded-xl border border-border bg-card
+          ${hover ? 'transition-colors hover:bg-card-hover cursor-pointer' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pb-4 ${className}`} {...props} />
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className = '', ...props }, ref) => (
+    <h3 ref={ref} className={`text-lg font-semibold text-foreground ${className}`} {...props} />
+  )
+);
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className = '', ...props }, ref) => (
+    <p ref={ref} className={`mt-1 text-sm text-muted ${className}`} {...props} />
+  )
+);
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`flex items-center p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardFooter.displayName = 'CardFooter';
+

src/components/ui/Input.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className = '', label, error, id, ...props }, ref) => {
+    const inputId = id || props.name;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="mb-2 block text-sm font-medium text-foreground"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={`
+            w-full rounded-lg border bg-input px-4 py-2.5 text-foreground
+            placeholder:text-muted-foreground
+            focus:outline-none focus:ring-2 focus:ring-primary/20
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+            ${className}
+          `}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1.5 text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+

src/components/ui/Modal.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { Fragment, ReactNode, useEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeStyles = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+};
+
+function subscribe() {
+  return () => {};
+}
+
+function useIsMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isMounted || !isOpen) return null;
+
+  return createPortal(
+    <Fragment>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className={`
+            w-full ${sizeStyles[size]} rounded-xl border border-border
+            bg-card shadow-xl
+            animate-in fade-in-0 zoom-in-95
+          `}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? 'modal-title' : undefined}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          {title && (
+            <div className="flex items-center justify-between border-b border-border px-6 py-4">
+              <h2 id="modal-title" className="text-lg font-semibold text-foreground">
+                {title}
+              </h2>
+              <button
+                onClick={onClose}
+                className="rounded-lg p-1 text-muted hover:bg-card-hover hover:text-foreground transition-colors"
+                aria-label="Fermer"
+              >
+                <svg
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="p-6">{children}</div>
+        </div>
+      </div>
+    </Fragment>,
+    document.body
+  );
+}
+
+interface ModalFooterProps {
+  children: ReactNode;
+}
+
+export function ModalFooter({ children }: ModalFooterProps) {
+  return (
+    <div className="flex items-center justify-end gap-3 border-t border-border -mx-6 -mb-6 mt-6 px-6 py-4 bg-card-hover/50 rounded-b-xl">
+      {children}
+    </div>
+  );
+}

src/components/ui/Textarea.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className = '', label, error, id, ...props }, ref) => {
+    const textareaId = id || props.name;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="mb-2 block text-sm font-medium text-foreground"
+          >
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          className={`
+            w-full rounded-lg border bg-input px-4 py-2.5 text-foreground
+            placeholder:text-muted-foreground
+            focus:outline-none focus:ring-2 focus:ring-primary/20
+            disabled:cursor-not-allowed disabled:opacity-50
+            resize-none
+            ${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
+            ${className}
+          `}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1.5 text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+

src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export { Button } from './Button';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Badge } from './Badge';
+export { Modal, ModalFooter } from './Modal';
+