feat: initialize Prisma schema and scaffold core application modules including auth, blogs, events, and business directories

2026-04-22 22:59:12 +02:00
parent b01b2f6476
commit 2e7cb65a29
32 changed files with 1392 additions and 310 deletions
--- a/app/afrolife/[id]/page.tsx
+++ b/app/afrolife/[id]/page.tsx
@@ -1,25 +1,73 @@
 import React from 'react';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import { ArrowLeft, Share2, Play, Calendar, User, Building2 } from 'lucide-react';
+import { ArrowLeft, Share2, Play, Calendar, User, Building2, MapPin, ArrowRight } from 'lucide-react';
 import { prisma } from '../../../lib/prisma';
 import { InterviewType } from '@prisma/client';

+import { Metadata } from 'next';
+
 interface Props {
  params: Promise<{ id: string }>;
 }

-export default async function InterviewDetailPage({ params }: Props) {
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { id } = await params;
    
-    const interview = await prisma.interview.findUnique({
-        where: { id }
+    const interview = await prisma.interview.findFirst({
+        where: {
+            OR: [{ id }, { slug: id }]
+        }
    });

-    if (!interview) {
+    const event = !interview ? await prisma.event.findFirst({
+        where: {
+            OR: [{ id }, { slug: id }]
+        }
+    }) : null;
+
+    const item = interview || event;
+    if (!item) return { title: 'Contenu non trouvé' };
+
+    const title = (item as any).metaTitle || item.title;
+    const description = (item as any).metaDescription || (item as any).excerpt || (item as any).description;
+
+    return {
+        title,
+        description,
+        keywords: (item as any).tags || [],
+        openGraph: {
+            title,
+            description,
+            images: [(item as any).thumbnailUrl],
+        }
+    };
+}
+
+export default async function AfroLifeDetailPage({ params }: Props) {
+    const { id } = await params;
+    
+    // 1. Try to find an interview
+    const interview = await prisma.interview.findFirst({
+        where: {
+            OR: [{ id }, { slug: id }]
+        }
+    });
+
+    // 2. If not found, try to find an event
+    const event = !interview ? await prisma.event.findFirst({
+        where: {
+            OR: [{ id }, { slug: id }]
+        }
+    }) : null;
+
+    if (!interview && !event) {
        notFound();
    }

+    const item = interview || event;
+    const isEvent = !!event;
+
    // Helper to get YouTube embed URL
    const getEmbedUrl = (url: string) => {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
@@ -27,7 +75,7 @@ export default async function InterviewDetailPage({ params }: Props) {
        return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
    };

-    const isVideo = interview.type === InterviewType.VIDEO;
+    const isVideo = !isEvent && (interview as any).type === InterviewType.VIDEO;

    return (
        <div className="bg-white min-h-screen">
@@ -39,26 +87,46 @@ export default async function InterviewDetailPage({ params }: Props) {
                {/* Header Info */}
                <div className="text-center mb-10">
                    <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
-                        {isVideo ? 'Interview Vidéo' : 'Grand Entretien'}
+                        {isEvent ? 'Événement' : (isVideo ? 'Interview Vidéo' : 'Grand Entretien')}
                    </div>
                    <h1 className="text-3xl md:text-5xl font-serif font-bold text-gray-900 mb-6 leading-tight">
-                        {interview.title}
+                        {item!.title}
                    </h1>

+                    {/* Tags */}
+                    {item && (item as any).tags && (item as any).tags.length > 0 && (
+                        <div className="flex flex-wrap justify-center gap-2 mb-8">
+                            {(item as any).tags.map((tag: string) => (
+                                <span key={tag} className="px-3 py-1 bg-brand-50 text-brand-700 rounded-full text-xs font-semibold">
+                                    #{tag}
+                                </span>
+                            ))}
+                        </div>
+                    )}
+
                    <div className="flex flex-wrap justify-center gap-6 text-sm text-gray-500">
-                        <div className="flex items-center">
-                            <User className="w-4 h-4 mr-2 text-brand-500" />
-                            <span className="font-medium text-gray-900">{interview.guestName}</span>
-                            <span className="mx-1 text-gray-400">|</span>
-                            <span>{interview.role}</span>
-                        </div>
-                        <div className="flex items-center">
-                            <Building2 className="w-4 h-4 mr-2 text-brand-500" />
-                            {interview.companyName}
-                        </div>
+                        {!isEvent ? (
+                            <>
+                                <div className="flex items-center">
+                                    <User className="w-4 h-4 mr-2 text-brand-500" />
+                                    <span className="font-medium text-gray-900">{(interview as any).guestName}</span>
+                                    <span className="mx-1 text-gray-400">|</span>
+                                    <span>{(interview as any).role}</span>
+                                </div>
+                                <div className="flex items-center">
+                                    <Building2 className="w-4 h-4 mr-2 text-brand-500" />
+                                    {(interview as any).companyName}
+                                </div>
+                            </>
+                        ) : (
+                            <div className="flex items-center">
+                                <MapPin className="w-4 h-4 mr-2 text-brand-500" />
+                                <span className="font-medium text-gray-900">{(event as any).location}</span>
+                            </div>
+                        )}
                        <div className="flex items-center">
                            <Calendar className="w-4 h-4 mr-2 text-brand-500" />
-                            {new Date(interview.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
+                            {new Date(item!.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                        </div>
                    </div>
                </div>
@@ -66,10 +134,10 @@ export default async function InterviewDetailPage({ params }: Props) {
                {/* Main Content Area */}
                {isVideo ? (
                    <div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
-                        {interview.videoUrl ? (
+                        {(interview as any).videoUrl ? (
                            <iframe
-                                src={getEmbedUrl(interview.videoUrl) || ''}
-                                title={interview.title}
+                                src={getEmbedUrl((interview as any).videoUrl) || ''}
+                                title={item!.title}
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                                className="w-full h-full"
@@ -82,27 +150,44 @@ export default async function InterviewDetailPage({ params }: Props) {
                    </div>
                ) : (
                    <div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
-                        <img src={interview.thumbnailUrl} alt={interview.title} className="w-full h-full object-cover" />
+                        <img src={item!.thumbnailUrl} alt={item!.title} className="w-full h-full object-cover" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                )}

-                {/* Description / Article Content */}
+                {/* Description / Article Content / Event Content */}
                <div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600 break-words overflow-hidden">
-                    {!isVideo && interview.content ? (
-                        <div dangerouslySetInnerHTML={{ __html: interview.content }} />
+                    {isEvent ? (
+                        <div dangerouslySetInnerHTML={{ __html: (event as any).description }} />
                    ) : (
-                        <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
-                            {interview.excerpt}
-                        </p>
+                        !isVideo && (interview as any).content ? (
+                            <div dangerouslySetInnerHTML={{ __html: (interview as any).content }} />
+                        ) : (
+                            <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
+                                {(interview as any).excerpt}
+                            </p>
+                        )
                    )}
                </div>

+                {/* Event Link Action */}
+                {isEvent && (event as any).link && (
+                    <div className="mt-10 text-center">
+                        <Link 
+                            href={(event as any).link} 
+                            target="_blank" 
+                            className="inline-flex items-center px-8 py-4 bg-brand-600 text-white rounded-full font-bold shadow-lg hover:bg-brand-700 hover:shadow-xl transition-all"
+                        >
+                            Participer à l'événement <ArrowRight className="w-5 h-5 ml-2" />
+                        </Link>
+                    </div>
+                )}
+
                {/* Footer Actions */}
                <div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
                    <button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
                        <Share2 className="w-5 h-5 mr-2" />
-                        Partager cette interview
+                        Partager {isEvent ? "cet événement" : "cette interview"}
                    </button>
                </div>
            </div>
--- a/app/afrolife/page.tsx
+++ b/app/afrolife/page.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
-import { Play, FileText, Clock, Mic } from 'lucide-react';
+import { Play, FileText, Clock, Mic, Calendar } from 'lucide-react';
 import { prisma } from '../../lib/prisma';
 import { InterviewType } from '@prisma/client';
+import EventTimeline from '../../components/EventTimeline';

 export const revalidate = 3600;

@@ -12,23 +13,56 @@ interface Props {

 export default async function AfroLifePage({ searchParams }: Props) {
  const params = await searchParams;
-  const filter = params.type as InterviewType | 'ALL' || 'ALL';
+  const filter = params.type as string || 'ALL';

-  const where: any = {};
-  if (filter !== 'ALL') {
-    where.type = filter;
-  }
-
-  let interviews: any[] = [];
+  let items: any[] = [];
  
  try {
-    interviews = await prisma.interview.findMany({
-      where,
-      orderBy: { createdAt: 'desc' }
-    });
+    if (filter === 'EVENT') {
+        const events = await prisma.event.findMany({
+            orderBy: { date: 'desc' }
+        });
+        items = events.map(e => ({
+            ...e,
+            guestName: 'Événement',
+            companyName: e.location,
+            excerpt: e.description,
+            type: 'EVENT',
+            duration: new Date(e.date).toLocaleDateString('fr-FR')
+        }));
+    } else {
+        const where: any = {};
+        if (filter !== 'ALL') {
+            where.type = filter as InterviewType;
+        }
+        const interviews = await prisma.interview.findMany({
+            where,
+            orderBy: { createdAt: 'desc' }
+        });
+        items = interviews.map(i => ({ ...i }));
+        
+        // If 'ALL', we might want to also fetch events and mix them
+        if (filter === 'ALL') {
+            const events = await prisma.event.findMany({
+                orderBy: { date: 'desc' },
+                take: 10
+            });
+            const mappedEvents = events.map(e => ({
+                ...e,
+                guestName: 'Événement',
+                companyName: e.location,
+                excerpt: e.description,
+                type: 'EVENT',
+                duration: new Date(e.date).toLocaleDateString('fr-FR')
+            }));
+            items = [...items, ...mappedEvents].sort((a, b) => 
+                new Date(b.createdAt || b.date).getTime() - new Date(a.createdAt || a.date).getTime()
+            );
+        }
+    }
  } catch (error) {
-    console.error("Database connection failed on Afro Life page.");
-    interviews = [];
+    console.error("Database connection failed on Afro Life page:", error);
+    items = [];
  }

  return (
@@ -68,35 +102,48 @@ export default async function AfroLifePage({ searchParams }: Props) {
            >
                <FileText className="w-4 h-4 mr-2" /> Articles
            </Link>
+            <Link 
+                href="/afrolife?type=EVENT"
+                className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'EVENT' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+                <Calendar className="w-4 h-4 mr-2" /> Événements
+            </Link>
        </div>

-        {/* Grid */}
-        {interviews.length === 0 ? (
+        {/* Grid or Timeline */}
+        {items.length === 0 ? (
          <div className="text-center py-20 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
-            <p className="text-gray-500">Aucune interview trouvée dans cette catégorie.</p>
+            <p className="text-gray-500">Aucun contenu trouvé dans cette catégorie.</p>
          </div>
+        ) : filter === 'EVENT' ? (
+          <EventTimeline events={items} />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {interviews.map(interview => (
-                  <Link href={`/afrolife/${interview.id}`} key={interview.id} className="group block h-full">
+              {items.map(item => (
+                  <Link href={`/afrolife/${(item as any).slug || item.id}`} key={item.id} className="group block h-full">
                      <div className="relative h-64 rounded-xl overflow-hidden shadow-sm group-hover:shadow-xl transition-all duration-300">
                          <img 
-                              src={interview.thumbnailUrl} 
-                              alt={interview.title} 
+                              src={item.thumbnailUrl} 
+                              alt={item.title} 
                              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                          />
                          <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
                          
                          {/* Type Badge */}
                          <div className="absolute top-4 left-4">
-                              <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${interview.type === InterviewType.VIDEO ? 'bg-red-600/90' : 'bg-blue-600/90'}`}>
-                                  {interview.type === InterviewType.VIDEO ? <Play className="w-3 h-3 mr-1 fill-current" /> : <Mic className="w-3 h-3 mr-1" />}
-                                  {interview.type === InterviewType.VIDEO ? 'Vidéo' : 'Interview'}
+                              <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${
+                                item.type === 'VIDEO' ? 'bg-red-600/90' : 
+                                item.type === 'EVENT' ? 'bg-amber-600/90' : 'bg-blue-600/90'
+                              }`}>
+                                  {item.type === 'VIDEO' ? <Play className="w-3 h-3 mr-1 fill-current" /> : 
+                                   item.type === 'EVENT' ? <Calendar className="w-3 h-3 mr-1" /> : <Mic className="w-3 h-3 mr-1" />}
+                                  {item.type === 'VIDEO' ? 'Vidéo' : 
+                                   item.type === 'EVENT' ? 'Événement' : 'Interview'}
                              </span>
                          </div>
  
                          {/* Play Icon Overlay for Videos */}
-                          {interview.type === InterviewType.VIDEO && (
+                          {item.type === 'VIDEO' && (
                              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                  <div className="w-16 h-16 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                      <Play className="w-8 h-8 text-white fill-current ml-1" />
@@ -107,18 +154,16 @@ export default async function AfroLifePage({ searchParams }: Props) {
  
                      <div className="pt-6 px-2">
                          <div className="flex items-center text-xs text-gray-500 mb-3 space-x-3">
-                              <span className="font-semibold text-brand-600 uppercase">{interview.guestName}</span>
+                              <span className="font-semibold text-brand-600 uppercase">{item.guestName}</span>
                              <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
-                              <span>{interview.companyName}</span>
+                              <span className="truncate max-w-[100px]">{item.companyName}</span>
                              <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
-                              <span className="flex items-center"><Clock className="w-3 h-3 mr-1"/> {interview.duration || 'N/A'}</span>
+                              <span className="flex items-center flex-nowrap"><Clock className="w-3 h-3 mr-1 shrink-0"/> {item.duration || 'N/A'}</span>
                          </div>
                          <h3 className="text-xl font-serif font-bold text-gray-900 mb-2 group-hover:text-brand-600 transition-colors leading-tight line-clamp-2">
-                              {interview.title}
+                              {item.title}
                          </h3>
-                          <p className="text-gray-600 text-sm line-clamp-2">
-                              {interview.excerpt}
-                          </p>
+                          <div className="text-gray-600 text-sm line-clamp-2 prose-sm" dangerouslySetInnerHTML={{ __html: item.excerpt }} />
                      </div>
                  </Link>
              ))}
--- a/app/annuaire/page.tsx
+++ b/app/annuaire/page.tsx
@@ -34,13 +34,12 @@ const AnnuairePageContent = () => {
    useEffect(() => {
        const fetchHeadliner = async () => {
            try {
-                const res = await fetch('/api/businesses?featured=true');
+                // Disable caching to ensure we get fresh data and more variety
+                const res = await fetch('/api/businesses?featured=true', { cache: 'no-store' });
                const data = await res.json();
                if (Array.isArray(data) && data.length > 0) {
-                    // Stable random based on the current date (YYYYMMDD)
-                    const today = new Date().toISOString().slice(0, 10).replace(/-/g, '');
-                    const seed = parseInt(today);
-                    const randomIndex = seed % data.length;
+                    // Truly random selection from the pool of featured businesses
+                    const randomIndex = Math.floor(Math.random() * data.length);
                    setFeaturedBusiness(data[randomIndex]);
                }
            } catch (error) {
--- a/app/api/settings/route.ts
+++ b/app/api/settings/route.ts
@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+import { getSiteSettings } from '../../../lib/settings';
+
+export async function GET() {
+    try {
+        const settings = await getSiteSettings();
+        return NextResponse.json(settings);
+    } catch (error) {
+        return NextResponse.json({ error: 'Failed to fetch settings' }, { status: 500 });
+    }
+}
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -4,15 +4,49 @@ import { notFound } from 'next/navigation';
 import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
 import { prisma } from '../../../lib/prisma';

+import { Metadata } from 'next';
+
 interface Props {
  params: Promise<{ id: string }>;
 }

+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  
+  const post = await prisma.blogPost.findFirst({
+    where: {
+      OR: [
+        { id: id },
+        { slug: id }
+      ]
+    }
+  });
+
+  if (!post) return { title: 'Article non trouvé' };
+
+  return {
+    title: post.metaTitle || post.title,
+    description: post.metaDescription || post.excerpt,
+    keywords: post.tags,
+    openGraph: {
+      title: post.metaTitle || post.title,
+      description: post.metaDescription || post.excerpt,
+      images: [post.imageUrl],
+      type: 'article',
+    }
+  };
+}
+
 export default async function BlogPostPage({ params }: Props) {
  const { id } = await params;
  
-  const post = await prisma.blogPost.findUnique({
-    where: { id }
+  const post = await prisma.blogPost.findFirst({
+    where: {
+      OR: [
+        { id: id },
+        { slug: id }
+      ]
+    }
  });

  if (!post) {
@@ -49,9 +83,17 @@ export default async function BlogPostPage({ params }: Props) {
                <Calendar className="w-4 h-4 mr-1 text-brand-500" />
                {new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
              </span>
-              <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
-                Conseils
-              </span>
+              {post.tags.length > 0 ? (
+                post.tags.map(tag => (
+                  <span key={tag} className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
+                    {tag}
+                  </span>
+                ))
+              ) : (
+                <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
+                  Article
+                </span>
+              )}
            </div>
            <h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
              {post.title}
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -34,7 +34,7 @@ export default async function BlogPage() {
      ) : (
        <div className="grid gap-8 lg:grid-cols-3">
          {posts.map(post => (
-            <Link key={post.id} href={`/blog/${post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
+            <Link key={post.id} href={`/blog/${post.slug || post.id}`} className="group flex flex-col rounded-lg shadow-lg overflow-hidden bg-white hover:shadow-xl transition-shadow duration-300">
              <div className="flex-shrink-0 relative overflow-hidden h-48">
                <img className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" src={post.imageUrl} alt={post.title} />
                <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
--- a/app/cgu/page.tsx
+++ b/app/cgu/page.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { getLegalDocument } from '@/lib/legal';

-export const metadata = {
-  title: 'Conditions Générales d\'Utilisation - Afrohub',
-  description: 'Consultez les conditions générales d\'utilisation de la plateforme Afrohub.',
-};
+import { getSiteSettings } from '@/lib/settings';
+import { Metadata } from 'next';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const settings = await getSiteSettings();
+  return {
+    title: `Conditions Générales d'Utilisation - ${settings.siteName}`,
+    description: `Consultez les conditions générales d'utilisation de la plateforme ${settings.siteName}.`,
+  };
+}

 export default async function CGUPage() {
  const doc = await getLegalDocument('CGU');
--- a/app/cgv/page.tsx
+++ b/app/cgv/page.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { getLegalDocument } from '@/lib/legal';

-export const metadata = {
-  title: 'Conditions Générales de Vente - Afrohub',
-  description: 'Consultez les conditions générales de vente des services Afrohub.',
-};
+import { getSiteSettings } from '@/lib/settings';
+import { Metadata } from 'next';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const settings = await getSiteSettings();
+  return {
+    title: `Conditions Générales de Vente - ${settings.siteName}`,
+    description: `Consultez les conditions générales de vente des services ${settings.siteName}.`,
+  };
+}

 export default async function CGVPage() {
  const doc = await getLegalDocument('CGV');
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -15,7 +15,8 @@ import PricingSection from '../../components/PricingSection';
 import { useUser } from '../../components/UserProvider';

 const DashboardContent = () => {
-    const { user, logout } = useUser();
+    const { user, settings, logout } = useUser();
+    const siteName = settings?.siteName || "Afrohub";
    const router = useRouter();
    const searchParams = useSearchParams();
    const chatId = searchParams.get('chatId') || searchParams.get('chat');
@@ -112,11 +113,11 @@ const DashboardContent = () => {
    // Update document title with unread count
    useEffect(() => {
        if (unreadCount > 0) {
-            document.title = `(${unreadCount}) Messages - Afrohub`;
+            document.title = `(${unreadCount}) Messages - ${siteName}`;
        } else {
-            document.title = 'Tableau de Bord - Afrohub';
+            document.title = `Tableau de Bord - ${siteName}`;
        }
-    }, [unreadCount]);
+    }, [unreadCount, siteName]);

    useEffect(() => {
        if (!user && isMounted) {
@@ -168,8 +169,10 @@ const DashboardContent = () => {
            <div className="hidden md:flex md:flex-col md:w-64 md:fixed md:inset-y-0 bg-white border-r border-gray-200">
                <div className="flex items-center h-16 flex-shrink-0 px-4 border-b border-gray-200">
                    <Link href="/" className="flex items-center gap-2">
-                        <div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold font-serif">A</div>
-                        <span className="font-serif font-bold text-lg text-gray-900">Afrohub</span>
+                        <div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold font-serif">
+                            {siteName.charAt(0)}
+                        </div>
+                        <span className="font-serif font-bold text-lg text-gray-900">{siteName}</span>
                    </Link>
                </div>
                <div className="flex-1 flex flex-col overflow-y-auto pt-5 pb-4">
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,10 +12,13 @@ import './globals.css';

 export const dynamic = 'force-dynamic';

-export const metadata: Metadata = {
-  title: 'Afrohub - L\'Annuaire 2.0',
-  description: 'Annuaire Afrohub',
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const settings = await getSiteSettings();
+  return {
+    title: `${settings.siteName} - L'Annuaire 2.0`,
+    description: settings.siteSlogan,
+  };
+}

 export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const settings = await getSiteSettings();
@@ -30,7 +33,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
        <UserProvider>
          <Toaster position="top-right" />
          <AnalyticsTracker />
-          <Navbar />
+          <Navbar settings={settings} />
          <main className="flex-grow">
            {children}
          </main>
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -7,7 +7,8 @@ import Link from 'next/link';
 import { useUser } from '../../components/UserProvider';

 const LoginPage = () => {
-    const { login } = useUser();
+    const { settings, login } = useUser();
+    const siteName = settings?.siteName || "Afrohub";
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
@@ -46,7 +47,9 @@ const LoginPage = () => {
        <div className="min-h-[80vh] flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full space-y-8">
                <div className="text-center">
-                    <div className="mx-auto h-12 w-12 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-2xl">A</div>
+                    <div className="mx-auto h-12 w-12 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-2xl">
+                        {siteName.charAt(0)}
+                    </div>
                    <h2 className="mt-6 text-3xl font-extrabold text-gray-900 font-serif">Connexion à votre espace</h2>
                    <p className="mt-2 text-sm text-gray-600">
                        Ou <Link href="/register" className="font-medium text-brand-600 hover:text-brand-500">créez votre compte entreprise pour 1€</Link>
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -6,7 +6,9 @@ import Link from 'next/link';
 import { User, Mail, Lock, ArrowRight, CheckCircle, AlertCircle } from 'lucide-react';

 const RegisterPage = () => {
+    const { settings } = useUser();
    const router = useRouter();
+    const siteName = settings?.siteName || "Afrohub";
    const [formData, setFormData] = useState({
        name: '',
        email: '',
@@ -67,7 +69,7 @@ const RegisterPage = () => {
            <div className="max-w-md w-full">
                <div className="text-center mb-10">
                    <Link href="/" className="inline-flex items-center justify-center h-16 w-16 bg-brand-600 rounded-2xl shadow-lg shadow-brand-200 text-white font-bold text-3xl mb-6 hover:scale-105 transition-transform">
-                        A
+                        {siteName.charAt(0)}
                    </Link>
                    <h2 className="text-4xl font-extrabold text-dark-900 font-serif mb-2">Rejoignez l'aventure</h2>
                    <p className="text-gray-600">Créez votre compte pour propulser votre entreprise</p>
@@ -193,7 +195,7 @@ const RegisterPage = () => {
                </div>
                
                <p className="mt-8 text-center text-xs text-gray-400 uppercase tracking-widest font-semibold">
-                    Afrohub &copy; 2026
+                    {siteName} &copy; 2026
                </p>
            </div>
        </div>