feat: restructure website with new IA and navigation

- Add Brand and Product pages with section navigation
- Update footer to reflect new IA (Foundations, Brand, Product, Connect)
- Enhance homepage hero with meaningful Brand/Product links
- Add translation support for all new content
- Implement elegant section navigation with auto-scroll
- Add placeholder components for empty sections
- Restore product principles from original design
- Update section titles and navigation structure
- Remove outdated components and links

Author: mmaxence

next.config.ts

@@ -1,10 +1,6 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: 'export',
-  trailingSlash: true,
-  basePath: '/design',
-  assetPrefix: '/design',
   images: {
     unoptimized: true,
   },

src/app/design/brand/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import SectionNavigation from '@/components/SectionNavigation';
+import SectionPlaceholder from '@/components/SectionPlaceholder';
+import { Award, FileText, Download } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function BrandPage() {
+  const { t } = useLanguage();
+  
+  const sections = [
+    { id: 'principles', label: t('brand.sections.principles') },
+    { id: 'guidelines', label: t('brand.sections.guidelines') },
+    { id: 'resources', label: t('brand.sections.resources') }
+  ];
+
+  return (
+    <main className="min-h-screen">
+      <Header />
+      
+      <SectionNavigation sections={sections} />
+      
+      <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <SectionPlaceholder
+          title={t('brand.principles.title')}
+          description={t('brand.principles.description')}
+          icon={Award}
+        />
+      </div>
+      
+      <div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <SectionPlaceholder
+          title={t('brand.guidelines.title')}
+          description={t('brand.guidelines.description')}
+          icon={FileText}
+        />
+      </div>
+      
+      <div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <SectionPlaceholder
+          title={t('brand.resources.title')}
+          description={t('brand.resources.description')}
+          icon={Download}
+        />
+      </div>
+      <Footer />
+    </main>
+  );
+}

src/app/design/product/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import SectionNavigation from '@/components/SectionNavigation';
+import ProductPrinciples from '@/components/ProductPrinciples';
+import SectionPlaceholder from '@/components/SectionPlaceholder';
+import { FileText, Download } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export default function ProductPage() {
+  const { t } = useLanguage();
+  
+  const sections = [
+    { id: 'principles', label: t('product.sections.principles') },
+    { id: 'guidelines', label: t('product.sections.guidelines') },
+    { id: 'resources', label: t('product.sections.resources') }
+  ];
+
+  return (
+    <main className="min-h-screen">
+      <Header />
+      
+      <SectionNavigation sections={sections} />
+      <div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <ProductPrinciples />
+      </div>
+      
+      <div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <SectionPlaceholder
+          title={t('product.guidelines.title')}
+          description={t('product.guidelines.description')}
+          icon={FileText}
+        />
+      </div>
+      
+      <div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
+        <SectionPlaceholder
+          title={t('product.resources.title')}
+          description={t('product.resources.description')}
+          icon={Download}
+        />
+      </div>
+      <Footer />
+    </main>
+  );
+}