first commit

pages/AfroLifePage.tsx

@@ -0,0 +1,108 @@
+
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Play, FileText, Clock, Mic } from 'lucide-react';
+import { MOCK_INTERVIEWS } from '../services/mockData';
+import { InterviewType } from '../types';
+
+const AfroLifePage = () => {
+  const [filter, setFilter] = useState<'ALL' | 'VIDEO' | 'ARTICLE'>('ALL');
+
+  const filteredInterviews = MOCK_INTERVIEWS.filter(interview => {
+    if (filter === 'ALL') return true;
+    return interview.type === filter;
+  });
+
+  return (
+    <div className="bg-white min-h-screen">
+      {/* Hero Header */}
+      <div className="bg-dark-900 text-white py-20 relative overflow-hidden">
+        <div className="absolute inset-0 opacity-30 bg-[url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80')] bg-cover bg-center"></div>
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+           <span className="inline-block py-1 px-3 rounded-full bg-brand-600/20 border border-brand-500 text-brand-400 text-xs font-bold tracking-wider uppercase mb-4">
+              Lifestyle & Inspiration
+           </span>
+           <h1 className="text-4xl md:text-6xl font-serif font-bold mb-6">Afro Life</h1>
+           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+             Plongez dans l'intimité des bâtisseurs. Entretiens exclusifs, parcours de vie et leçons de leadership.
+           </p>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        {/* Filters */}
+        <div className="flex justify-center mb-12 space-x-4">
+            <button 
+                onClick={() => setFilter('ALL')}
+                className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ALL' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+                Tout voir
+            </button>
+            <button 
+                onClick={() => setFilter('VIDEO')}
+                className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'VIDEO' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+                <Play className="w-4 h-4 mr-2" /> Vidéos
+            </button>
+            <button 
+                onClick={() => setFilter('ARTICLE')}
+                className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ARTICLE' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+                <FileText className="w-4 h-4 mr-2" /> Articles
+            </button>
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {filteredInterviews.map(interview => (
+                <Link to={`/afrolife/${interview.id}`} key={interview.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} 
+                            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>
+                        </div>
+
+                        {/* Play Icon Overlay for Videos */}
+                        {interview.type === InterviewType.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" />
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    <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="w-1 h-1 bg-gray-300 rounded-full"></span>
+                            <span>{interview.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}</span>
+                        </div>
+                        <h3 className="text-xl font-serif font-bold text-gray-900 mb-2 group-hover:text-brand-600 transition-colors leading-tight">
+                            {interview.title}
+                        </h3>
+                        <p className="text-gray-600 text-sm line-clamp-2">
+                            {interview.excerpt}
+                        </p>
+                    </div>
+                </Link>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AfroLifePage;

pages/BlogPage.tsx

@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+import { MOCK_BLOG_POSTS } from '../services/mockData';
+
+const BlogPage = () => (
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div className="text-center mb-12">
+        <h1 className="text-3xl font-bold font-serif text-gray-900 sm:text-4xl">Le Blog de l'Entrepreneur</h1>
+        <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+            Conseils, actualités et success stories de l'écosystème africain.
+        </p>
+    </div>
+    <div className="grid gap-8 lg:grid-cols-3">
+        {MOCK_BLOG_POSTS.map(post => (
+            <Link key={post.id} to={`/blog/${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>
+                </div>
+                <div className="flex-1 bg-white p-6 flex flex-col justify-between">
+                    <div className="flex-1">
+                        <p className="text-sm font-medium text-brand-600">Conseils</p>
+                        <div className="block mt-2">
+                            <p className="text-xl font-semibold text-gray-900 group-hover:text-brand-700 transition-colors">{post.title}</p>
+                            <p className="mt-3 text-base text-gray-500 line-clamp-3">{post.excerpt}</p>
+                        </div>
+                    </div>
+                    <div className="mt-6 flex items-center justify-between">
+                        <div className="flex items-center">
+                            <div className="flex-shrink-0">
+                                <span className="sr-only">{post.author}</span>
+                                <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold border border-gray-300">
+                                    {post.author.charAt(0)}
+                                </div>
+                            </div>
+                            <div className="ml-3">
+                                <p className="text-sm font-medium text-gray-900">{post.author}</p>
+                                <div className="flex space-x-1 text-sm text-gray-500">
+                                    <time>{post.date}</time>
+                                </div>
+                            </div>
+                        </div>
+                        <span className="text-brand-600 opacity-0 group-hover:opacity-100 transition-opacity">
+                           <ArrowRight className="w-5 h-5" />
+                        </span>
+                    </div>
+                </div>
+            </Link>
+        ))}
+    </div>
+  </div>
+);
+
+export default BlogPage;

pages/BlogPostPage.tsx

@@ -0,0 +1,97 @@
+
+import React, { useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, User, Calendar, Share2 } from 'lucide-react';
+import { MOCK_BLOG_POSTS } from '../services/mockData';
+
+const BlogPostPage = () => {
+  const { id } = useParams();
+  const post = MOCK_BLOG_POSTS.find(p => p.id === id);
+
+  // Scroll to top when loading a new post
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (!post) {
+    return (
+      <div className="min-h-[60vh] flex flex-col items-center justify-center">
+        <h2 className="text-3xl font-serif font-bold text-gray-900 mb-4">Article introuvable</h2>
+        <p className="text-gray-600 mb-8">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
+        <Link to="/blog" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
+          <ArrowLeft className="w-4 h-4 mr-2" /> Retour au blog
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <article className="bg-white min-h-screen">
+      {/* Hero Image */}
+      <div className="w-full h-64 md:h-96 relative">
+        <img 
+          src={post.imageUrl} 
+          alt={post.title} 
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+        <div className="absolute bottom-0 left-0 w-full p-4 sm:p-8 max-w-4xl mx-auto">
+             <Link to="/blog" className="inline-flex items-center text-white/80 hover:text-white mb-4 text-sm font-medium transition-colors">
+                <ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
+             </Link>
+        </div>
+      </div>
+
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12 -mt-20 relative z-10">
+        <div className="bg-white rounded-xl shadow-xl p-6 md:p-10 border border-gray-100">
+            {/* Header */}
+            <header className="mb-8 border-b border-gray-100 pb-8">
+                <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
+                    <span className="flex items-center">
+                        <User className="w-4 h-4 mr-1 text-brand-500" />
+                        {post.author}
+                    </span>
+                    <span className="flex items-center">
+                        <Calendar className="w-4 h-4 mr-1 text-brand-500" />
+                        {post.date}
+                    </span>
+                    <span className="px-2 py-1 bg-brand-50 text-brand-700 rounded text-xs font-semibold uppercase tracking-wide">
+                        Conseils
+                    </span>
+                </div>
+                <h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-900 leading-tight">
+                    {post.title}
+                </h1>
+            </header>
+
+            {/* Content */}
+            <div className="prose prose-lg prose-orange max-w-none text-gray-600">
+                <p className="lead text-xl text-gray-500 font-serif italic mb-6">
+                    {post.excerpt}
+                </p>
+                {/* Rendering paragraphs manually for the mock data */}
+                {post.content.split('\n').map((paragraph, index) => (
+                    paragraph.trim() !== '' && (
+                        <p key={index} className="mb-4 leading-relaxed">
+                            {paragraph}
+                        </p>
+                    )
+                ))}
+            </div>
+
+            {/* Footer / Share */}
+            <div className="mt-12 pt-8 border-t border-gray-100 flex justify-between items-center">
+                <p className="text-sm text-gray-500 font-medium">Vous avez aimé cet article ?</p>
+                <div className="flex space-x-2">
+                    <button className="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-brand-100 hover:text-brand-600 transition-colors">
+                        <Share2 className="w-5 h-5" />
+                    </button>
+                </div>
+            </div>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default BlogPostPage;

pages/BusinessDetailPage.tsx

@@ -0,0 +1,353 @@
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, MapPin, Globe, Mail, Phone, CheckCircle, Star, Facebook, Linkedin, Instagram, Play, Share2, Send, Award, Quote } from 'lucide-react';
+import { MOCK_BUSINESSES, MOCK_OFFERS } from '../services/mockData';
+import { OfferType } from '../types';
+
+const BusinessDetailPage = () => {
+  const { id } = useParams();
+  const business = MOCK_BUSINESSES.find(b => b.id === id);
+  
+  const [contactForm, setContactForm] = useState({
+      name: '',
+      email: '',
+      message: ''
+  });
+  const [formStatus, setFormStatus] = useState<'idle' | 'sending' | 'success'>('idle');
+  
+  const businessOffers = useMemo(() => {
+    return MOCK_OFFERS.filter(o => o.businessId === id && o.active);
+  }, [id]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (!business) {
+    return (
+      <div className="min-h-[60vh] flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Entreprise introuvable</h2>
+        <Link to="/directory" className="text-brand-600 hover:text-brand-700 font-medium flex items-center">
+          <ArrowLeft className="w-4 h-4 mr-2" /> Retour à l'annuaire
+        </Link>
+      </div>
+    );
+  }
+
+  // Helper to get YouTube embed URL
+  const getEmbedUrl = (url: string) => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+    return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
+  };
+  
+  const videoEmbedUrl = business.videoUrl ? getEmbedUrl(business.videoUrl) : null;
+
+  const handleContactSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      setFormStatus('sending');
+      
+      // Simulate API call
+      setTimeout(() => {
+          setFormStatus('success');
+          setContactForm({ name: '', email: '', message: '' });
+          
+          // Reset status after 3 seconds
+          setTimeout(() => setFormStatus('idle'), 3000);
+      }, 1500);
+  };
+
+  return (
+    <div className="bg-gray-50 min-h-screen pb-12">
+      {/* Header Banner */}
+      <div className="h-48 md:h-64 bg-gradient-to-r from-gray-900 to-gray-800 relative overflow-hidden">
+        <div className="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex flex-col justify-between py-6">
+           <Link to="/directory" className="inline-flex items-center text-white/80 hover:text-white transition-colors w-fit">
+              <ArrowLeft className="w-4 h-4 mr-2" /> Retour
+           </Link>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 relative z-10">
+        <div className="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
+            <div className="p-6 md:p-8">
+                {/* Profile Header */}
+                <div className="flex flex-col md:flex-row gap-6 items-start">
+                    <div className="w-32 h-32 md:w-40 md:h-40 rounded-xl bg-white p-1 shadow-md -mt-16 md:-mt-24 border border-gray-100 flex-shrink-0 relative">
+                        <img src={business.logoUrl} alt={business.name} className="w-full h-full object-cover rounded-lg bg-gray-50" />
+                        {business.isFeatured && (
+                            <div className="absolute -top-3 -right-3 bg-yellow-400 text-yellow-900 rounded-full p-2 shadow-md" title="Entrepreneur du Mois">
+                                <Award className="w-6 h-6" />
+                            </div>
+                        )}
+                    </div>
+                    
+                    <div className="flex-1 w-full">
+                        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                            <div>
+                                <div className="flex items-center gap-2">
+                                    <h1 className="text-3xl font-serif font-bold text-gray-900 flex items-center gap-2">
+                                        {business.name}
+                                    </h1>
+                                    {business.verified && <CheckCircle className="w-6 h-6 text-blue-500" title="Entreprise Vérifiée" />}
+                                </div>
+                                <div className="text-brand-600 font-medium mt-1 uppercase tracking-wide text-sm">{business.category}</div>
+                                {business.isFeatured && (
+                                    <div className="inline-flex items-center px-2 py-1 rounded bg-yellow-100 text-yellow-800 text-xs font-bold mt-2">
+                                        <Award className="w-3 h-3 mr-1" /> ENTREPRENEUR DU MOIS
+                                    </div>
+                                )}
+                            </div>
+                            <div className="flex gap-3">
+                                <button className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                    <Share2 className="w-4 h-4 mr-2" /> Partager
+                                </button>
+                                <a href="#contact-form" className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700">
+                                    Contacter
+                                </a>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-wrap gap-4 mt-6 text-sm text-gray-500 border-t border-gray-100 pt-4">
+                            <div className="flex items-center">
+                                <MapPin className="w-4 h-4 mr-1 text-gray-400" />
+                                {business.location}
+                            </div>
+                            <div className="flex items-center">
+                                <Star className="w-4 h-4 mr-1 text-yellow-400 fill-current" />
+                                <span className="font-bold text-gray-700 mr-1">{business.rating}</span> 
+                                ({business.viewCount} vues)
+                            </div>
+                            {business.tags.map(tag => (
+                                <span key={tag} className="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs">#{tag}</span>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+            {/* Left Column: Main Content */}
+            <div className="lg:col-span-2 space-y-8">
+                
+                {/* Presentation */}
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8">
+                    <h2 className="text-xl font-bold font-serif text-gray-900 mb-4">À propos</h2>
+                    <p className="text-gray-600 leading-relaxed whitespace-pre-line">
+                        {business.description}
+                    </p>
+                </div>
+
+                {/* Founder Section (Specifically for Featured or if data exists) */}
+                {(business.founderName || business.founderImageUrl) && (
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8 overflow-hidden relative">
+                         <div className="absolute top-0 right-0 p-4 opacity-10">
+                            <Quote className="w-24 h-24 text-brand-500" />
+                         </div>
+                         <h2 className="text-xl font-bold font-serif text-gray-900 mb-6 relative z-10">Le Fondateur</h2>
+                         <div className="flex flex-col sm:flex-row gap-6 items-center sm:items-start relative z-10">
+                            {business.founderImageUrl && (
+                                <img 
+                                    src={business.founderImageUrl} 
+                                    alt={business.founderName} 
+                                    className="w-32 h-32 rounded-full object-cover border-4 border-gray-50 shadow-md"
+                                />
+                            )}
+                            <div>
+                                <h3 className="text-lg font-bold text-gray-900">{business.founderName}</h3>
+                                <p className="text-brand-600 text-sm font-medium mb-3">CEO & Fondateur</p>
+                                <p className="text-gray-600 italic">
+                                    "Notre mission est d'apporter des solutions concrètes et adaptées aux réalités locales, tout en visant l'excellence internationale."
+                                </p>
+                                {business.keyMetric && (
+                                    <div className="mt-4 inline-block bg-brand-50 text-brand-700 px-3 py-1 rounded-full text-xs font-bold">
+                                        🚀 {business.keyMetric}
+                                    </div>
+                                )}
+                            </div>
+                         </div>
+                    </div>
+                )}
+
+                {/* Video */}
+                {videoEmbedUrl && (
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8">
+                        <h2 className="text-xl font-bold font-serif text-gray-900 mb-4 flex items-center">
+                            <Play className="w-5 h-5 mr-2 text-brand-600" /> Présentation Vidéo
+                        </h2>
+                        <div className="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
+                            <iframe 
+                                src={videoEmbedUrl} 
+                                title={`Présentation de ${business.name}`}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                allowFullScreen
+                                className="w-full h-64 md:h-96 rounded-lg"
+                            ></iframe>
+                        </div>
+                    </div>
+                )}
+
+                {/* Offers */}
+                {businessOffers.length > 0 && (
+                    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8">
+                        <h2 className="text-xl font-bold font-serif text-gray-900 mb-6">Produits & Services</h2>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                            {businessOffers.map(offer => (
+                                <div key={offer.id} className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
+                                    <div className="h-40 bg-gray-100 relative">
+                                        <img src={offer.imageUrl} alt={offer.title} className="w-full h-full object-cover" />
+                                        <span className={`absolute top-2 right-2 px-2 py-1 text-xs font-bold rounded uppercase ${offer.type === OfferType.PRODUCT ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}>
+                                            {offer.type === OfferType.PRODUCT ? 'Produit' : 'Service'}
+                                        </span>
+                                    </div>
+                                    <div className="p-4">
+                                        <h3 className="font-bold text-gray-900 line-clamp-1">{offer.title}</h3>
+                                        <p className="text-brand-600 font-bold mt-1">
+                                            {new Intl.NumberFormat('fr-FR').format(offer.price)} {offer.currency}
+                                        </p>
+                                        <button className="mt-3 w-full block text-center bg-gray-50 text-gray-700 py-2 rounded text-sm font-medium hover:bg-gray-100 transition-colors">
+                                            Commander
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Right Column: Sidebar */}
+            <div className="space-y-8">
+                {/* Contact Card */}
+                <div id="contact-form" className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-24">
+                    <h3 className="text-lg font-bold text-gray-900 mb-4">Contact</h3>
+                    
+                    {/* Direct Info */}
+                    <div className="space-y-4 mb-6">
+                        <a href={`mailto:${business.contactEmail}`} className="flex items-center text-gray-600 hover:text-brand-600 transition-colors">
+                            <div className="w-8 h-8 rounded-full bg-brand-50 flex items-center justify-center mr-3 text-brand-600 flex-shrink-0">
+                                <Mail className="w-4 h-4" />
+                            </div>
+                            <span className="text-sm truncate">{business.contactEmail}</span>
+                        </a>
+                        {business.contactPhone && (
+                            <a href={`tel:${business.contactPhone}`} className="flex items-center text-gray-600 hover:text-brand-600 transition-colors">
+                                <div className="w-8 h-8 rounded-full bg-brand-50 flex items-center justify-center mr-3 text-brand-600 flex-shrink-0">
+                                    <Phone className="w-4 h-4" />
+                                </div>
+                                <span className="text-sm">{business.contactPhone}</span>
+                            </a>
+                        )}
+                        {business.socialLinks?.website && (
+                             <a href={business.socialLinks.website} target="_blank" rel="noopener noreferrer" className="flex items-center text-gray-600 hover:text-brand-600 transition-colors">
+                                <div className="w-8 h-8 rounded-full bg-brand-50 flex items-center justify-center mr-3 text-brand-600 flex-shrink-0">
+                                    <Globe className="w-4 h-4" />
+                                </div>
+                                <span className="text-sm truncate">Site Web</span>
+                            </a>
+                        )}
+                    </div>
+
+                     {/* Contact Form */}
+                    <div className="border-t border-gray-100 pt-6">
+                        <h4 className="text-sm font-semibold text-gray-900 mb-3">Envoyer un message</h4>
+                        {formStatus === 'success' ? (
+                            <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">
+                                Message envoyé avec succès !
+                            </div>
+                        ) : (
+                            <form onSubmit={handleContactSubmit} className="space-y-3">
+                                <div>
+                                    <input 
+                                        type="text" 
+                                        placeholder="Votre nom" 
+                                        required
+                                        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-brand-500"
+                                        value={contactForm.name}
+                                        onChange={(e) => setContactForm({...contactForm, name: e.target.value})}
+                                    />
+                                </div>
+                                <div>
+                                    <input 
+                                        type="email" 
+                                        placeholder="Votre email" 
+                                        required
+                                        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-brand-500"
+                                        value={contactForm.email}
+                                        onChange={(e) => setContactForm({...contactForm, email: e.target.value})}
+                                    />
+                                </div>
+                                <div>
+                                    <textarea 
+                                        placeholder="Votre message..." 
+                                        required
+                                        rows={3}
+                                        className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-brand-500 resize-none"
+                                        value={contactForm.message}
+                                        onChange={(e) => setContactForm({...contactForm, message: e.target.value})}
+                                    />
+                                </div>
+                                <button 
+                                    type="submit" 
+                                    disabled={formStatus === 'sending'}
+                                    className="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none transition-colors disabled:opacity-70"
+                                >
+                                    {formStatus === 'sending' ? 'Envoi...' : <><Send className="w-3 h-3 mr-2" /> Envoyer</>}
+                                </button>
+                            </form>
+                        )}
+                    </div>
+
+                    <div className="mt-6 pt-6 border-t border-gray-100">
+                        <div className="flex justify-center space-x-6">
+                            {business.socialLinks?.facebook && (
+                                <a href={business.socialLinks.facebook} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-[#1877F2] transition-colors">
+                                    <Facebook className="w-5 h-5" />
+                                </a>
+                            )}
+                            {business.socialLinks?.linkedin && (
+                                <a href={business.socialLinks.linkedin} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-[#0A66C2] transition-colors">
+                                    <Linkedin className="w-5 h-5" />
+                                </a>
+                            )}
+                            {business.socialLinks?.instagram && (
+                                <a href={business.socialLinks.instagram} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-[#E4405F] transition-colors">
+                                    <Instagram className="w-5 h-5" />
+                                </a>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Similar Businesses (Mock) */}
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h3 className="text-lg font-bold text-gray-900 mb-4">Dans la même catégorie</h3>
+                    <div className="space-y-4">
+                        {MOCK_BUSINESSES
+                            .filter(b => b.category === business.category && b.id !== business.id)
+                            .slice(0, 3)
+                            .map(similar => (
+                                <Link key={similar.id} to={`/directory/${similar.id}`} className="flex items-center group">
+                                    <div className="w-12 h-12 rounded bg-gray-100 overflow-hidden flex-shrink-0">
+                                        <img src={similar.logoUrl} alt={similar.name} className="w-full h-full object-cover" />
+                                    </div>
+                                    <div className="ml-3 overflow-hidden">
+                                        <p className="text-sm font-medium text-gray-900 truncate group-hover:text-brand-600 transition-colors">{similar.name}</p>
+                                        <p className="text-xs text-gray-500 truncate">{similar.location}</p>
+                                    </div>
+                                </Link>
+                            ))
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BusinessDetailPage;

pages/DashboardPage.tsx

@@ -0,0 +1,113 @@
+
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { LayoutDashboard, Edit3, ShoppingBag, CreditCard, LogOut, Eye } from 'lucide-react';
+import { User } from '../types';
+import { MOCK_BUSINESSES } from '../services/mockData';
+import DashboardOverview from '../components/dashboard/DashboardOverview';
+import DashboardProfile from '../components/dashboard/DashboardProfile';
+import DashboardOffers from '../components/dashboard/DashboardOffers';
+import PricingSection from '../components/PricingSection';
+
+const DashboardPage = ({ user, onLogout }: { user: User, onLogout: () => void }) => {
+    const [currentView, setCurrentView] = useState<'overview' | 'profile' | 'offers' | 'subscription'>('overview');
+    const [business, setBusiness] = useState(MOCK_BUSINESSES[0]); // In real app, fetch by user.id
+
+    return (
+        <div className="min-h-screen bg-gray-100 flex">
+            {/* 1. Sidebar */}
+            <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 to="/" 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">Afropreunariat</span>
+                    </Link>
+                </div>
+                <div className="flex-1 flex flex-col overflow-y-auto pt-5 pb-4">
+                    <div className="px-4 mb-6">
+                         <div className="flex items-center">
+                            <div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 font-bold shrink-0">
+                                {user.name.charAt(0)}
+                            </div>
+                            <div className="ml-3">
+                                <p className="text-sm font-medium text-gray-700 truncate">{user.name}</p>
+                                <div className="flex items-center mt-1">
+                                    <span className="h-2 w-2 rounded-full bg-green-400 mr-1"></span>
+                                    <span className="text-xs text-gray-500">Actif</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <nav className="mt-2 flex-1 px-2 space-y-1">
+                        <button onClick={() => setCurrentView('overview')} className={`${currentView === 'overview' ? 'bg-brand-50 text-brand-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full`}>
+                            <LayoutDashboard className={`${currentView === 'overview' ? 'text-brand-500' : 'text-gray-400 group-hover:text-gray-500'} mr-3 flex-shrink-0 h-5 w-5`} />
+                            Tableau de Bord
+                        </button>
+                        <button onClick={() => setCurrentView('profile')} className={`${currentView === 'profile' ? 'bg-brand-50 text-brand-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full`}>
+                            <Edit3 className={`${currentView === 'profile' ? 'text-brand-500' : 'text-gray-400 group-hover:text-gray-500'} mr-3 flex-shrink-0 h-5 w-5`} />
+                            Éditer mon profil
+                        </button>
+                        <button onClick={() => setCurrentView('offers')} className={`${currentView === 'offers' ? 'bg-brand-50 text-brand-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full`}>
+                            <ShoppingBag className={`${currentView === 'offers' ? 'text-brand-500' : 'text-gray-400 group-hover:text-gray-500'} mr-3 flex-shrink-0 h-5 w-5`} />
+                            Mes Offres
+                        </button>
+                        <button onClick={() => setCurrentView('subscription')} className={`${currentView === 'subscription' ? 'bg-brand-50 text-brand-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full`}>
+                            <CreditCard className={`${currentView === 'subscription' ? 'text-brand-500' : 'text-gray-400 group-hover:text-gray-500'} mr-3 flex-shrink-0 h-5 w-5`} />
+                            Abonnement
+                        </button>
+                    </nav>
+                </div>
+                <div className="flex-shrink-0 flex border-t border-gray-200 p-4">
+                    <button onClick={onLogout} className="flex-shrink-0 w-full group block text-gray-600 hover:text-red-600 transition-colors">
+                        <div className="flex items-center">
+                            <LogOut className="inline-block h-5 w-5 mr-2" />
+                            <span className="text-sm font-medium">Déconnexion</span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+
+            {/* 2. Main Content */}
+            <div className="flex-1 flex flex-col md:pl-64 overflow-hidden">
+                <header className="bg-white shadow-sm z-10 flex justify-between items-center px-6 py-4 sticky top-0">
+                     <h1 className="text-2xl font-bold text-gray-900 sm:truncate">
+                        {currentView === 'overview' && 'Vue d\'ensemble'}
+                        {currentView === 'profile' && 'Mon Profil'}
+                        {currentView === 'offers' && 'Gestion des Offres'}
+                        {currentView === 'subscription' && 'Mon Abonnement'}
+                     </h1>
+                     <div className="flex items-center space-x-4">
+                        <a href={`/directory`} target="_blank" rel="noopener noreferrer" className="hidden sm:inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
+                            <Eye className="-ml-1 mr-2 h-4 w-4 text-gray-500" />
+                            Voir ma fiche
+                        </a>
+                     </div>
+                </header>
+
+                <main className="flex-1 overflow-y-auto p-6">
+                    <div className="max-w-7xl mx-auto">
+                        {currentView === 'overview' && <DashboardOverview business={business} />}
+                        {currentView === 'profile' && <DashboardProfile business={business} setBusiness={setBusiness} />}
+                        {currentView === 'offers' && <DashboardOffers />}
+                        {currentView === 'subscription' && (
+                            <div className="space-y-6">
+                                <div className="bg-white shadow rounded-lg p-6 flex justify-between items-center">
+                                    <div>
+                                        <h3 className="text-lg font-medium text-gray-900">Abonnement Actuel : <span className="text-brand-600 font-bold">Starter (Gratuit)</span></h3>
+                                        <p className="text-sm text-gray-500">Passez au niveau supérieur pour débloquer plus de fonctionnalités.</p>
+                                    </div>
+                                    <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                                        Actif
+                                    </span>
+                                </div>
+                                <PricingSection />
+                            </div>
+                        )}
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+}
+
+export default DashboardPage;

pages/DirectoryPage.tsx

@@ -0,0 +1,122 @@
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Search } from 'lucide-react';
+import { MOCK_BUSINESSES } from '../services/mockData';
+import { CATEGORIES } from '../types';
+import BusinessCard from '../components/BusinessCard';
+import DirectoryHero from '../components/DirectoryHero';
+
+const DirectoryPage = () => {
+  const [filterCategory, setFilterCategory] = useState('All');
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  const useQuery = () => {
+    return new URLSearchParams(useLocation().search);
+  }
+  const query = useQuery();
+  
+  useEffect(() => {
+    const q = query.get('q');
+    if (q) setSearchQuery(q);
+  }, [query]);
+
+  const featuredBusiness = useMemo(() => {
+    return MOCK_BUSINESSES.find(b => b.isFeatured);
+  }, []);
+
+  const filteredBusinesses = useMemo(() => {
+    return MOCK_BUSINESSES.filter(b => {
+      const matchesCategory = filterCategory === 'All' || b.category === filterCategory;
+      const matchesSearch = b.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                            b.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                            b.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()));
+      return matchesCategory && matchesSearch;
+    });
+  }, [filterCategory, searchQuery]);
+
+  return (
+    <div>
+      {/* New Hero Section */}
+      {featuredBusiness && <DirectoryHero featuredBusiness={featuredBusiness} />}
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col md:flex-row gap-8">
+              {/* Filters Sidebar */}
+              <div className="w-full md:w-64 flex-shrink-0">
+                  <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 sticky top-24">
+                      <h3 className="font-bold text-lg mb-4 flex items-center"><Search className="w-4 h-4 mr-2"/> Filtres</h3>
+                      
+                      <div className="mb-6">
+                          <label className="block text-sm font-medium text-gray-700 mb-2">Recherche</label>
+                          <input 
+                              type="text" 
+                              value={searchQuery}
+                              onChange={(e) => setSearchQuery(e.target.value)}
+                              className="w-full border-gray-300 rounded-md shadow-sm focus:ring-brand-500 focus:border-brand-500 sm:text-sm p-2 border"
+                              placeholder="Nom, mot-clé..."
+                          />
+                      </div>
+
+                      <div className="mb-6">
+                          <label className="block text-sm font-medium text-gray-700 mb-2">Catégorie</label>
+                          <div className="space-y-2">
+                              <div className="flex items-center">
+                                  <input 
+                                      id="cat-all" 
+                                      name="category" 
+                                      type="radio" 
+                                      checked={filterCategory === 'All'} 
+                                      onChange={() => setFilterCategory('All')}
+                                      className="focus:ring-brand-500 h-4 w-4 text-brand-600 border-gray-300"
+                                  />
+                                  <label htmlFor="cat-all" className="ml-3 text-sm text-gray-600">Toutes</label>
+                              </div>
+                              {CATEGORIES.map(cat => (
+                                  <div key={cat} className="flex items-center">
+                                      <input 
+                                          id={`cat-${cat}`} 
+                                          name="category" 
+                                          type="radio" 
+                                          checked={filterCategory === cat}
+                                          onChange={() => setFilterCategory(cat)}
+                                          className="focus:ring-brand-500 h-4 w-4 text-brand-600 border-gray-300"
+                                      />
+                                      <label htmlFor={`cat-${cat}`} className="ml-3 text-sm text-gray-600 truncate" title={cat}>{cat}</label>
+                                  </div>
+                              ))}
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+              {/* Results Grid */}
+              <div className="flex-1">
+                  <div className="mb-4 flex justify-between items-center">
+                      <h1 className="text-2xl font-bold font-serif text-gray-900">Annuaire des entreprises</h1>
+                      <span className="text-sm text-gray-500">{filteredBusinesses.length} résultats</span>
+                  </div>
+
+                  {filteredBusinesses.length > 0 ? (
+                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                          {filteredBusinesses.map(biz => (
+                              <BusinessCard key={biz.id} business={biz} />
+                          ))}
+                      </div>
+                  ) : (
+                      <div className="text-center py-20 bg-white rounded-xl border border-gray-100 border-dashed">
+                          <div className="mx-auto h-12 w-12 text-gray-400">
+                              <Search className="h-12 w-12" />
+                          </div>
+                          <h3 className="mt-2 text-sm font-medium text-gray-900">Aucun résultat</h3>
+                          <p className="mt-1 text-sm text-gray-500">Essayez d'ajuster vos filtres de recherche.</p>
+                      </div>
+                  )}
+              </div>
+          </div>
+      </div>
+    </div>
+  );
+};
+
+export default DirectoryPage;

pages/HomePage.tsx

@@ -0,0 +1,95 @@
+
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Search, MapPin, Briefcase, TrendingUp } from 'lucide-react';
+import { CATEGORIES } from '../types';
+import { MOCK_BUSINESSES } from '../services/mockData';
+import BusinessCard from '../components/BusinessCard';
+
+const HomePage = () => {
+  const navigate = useNavigate();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    navigate(`/directory?q=${searchTerm}`);
+  };
+
+  return (
+    <div>
+      {/* Hero Section */}
+      <div className="relative bg-dark-900 overflow-hidden">
+        <div className="absolute inset-0 opacity-40">
+            {/* UPDATED IMAGE: Group of diverse/African professionals */}
+            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80" className="w-full h-full object-cover" alt="African entrepreneurs team" />
+        </div>
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
+          <h1 className="text-4xl md:text-6xl font-serif font-bold text-white mb-6 tracking-tight">
+            Boostez votre visibilité dans <br/>
+            <span className="text-brand-500">l'écosystème africain</span>
+          </h1>
+          <p className="text-xl text-gray-300 mb-8 max-w-2xl">
+            L'annuaire 2.0 qui connecte les talents, les entrepreneurs et les entreprises de la diaspora et du continent.
+          </p>
+          
+          <form onSubmit={handleSearch} className="max-w-3xl bg-white p-2 rounded-lg shadow-xl flex flex-col md:flex-row gap-2">
+            <div className="flex-1 relative">
+                <Search className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
+                <input 
+                    type="text" 
+                    placeholder="Que recherchez-vous ? (ex: Développeur, Traiteur...)" 
+                    className="w-full pl-10 pr-4 py-3 rounded-md focus:outline-none text-gray-900"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                />
+            </div>
+            <div className="md:w-1/3 relative border-t md:border-t-0 md:border-l border-gray-200">
+                <MapPin className="absolute left-3 top-3 text-gray-400 w-5 h-5" />
+                 <input type="text" placeholder="Localisation (ex: Abidjan)" className="w-full pl-10 pr-4 py-3 rounded-md focus:outline-none text-gray-900" />
+            </div>
+            <button type="submit" className="bg-brand-600 text-white px-8 py-3 rounded-md font-semibold hover:bg-brand-700 transition-colors">
+                Rechercher
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* Featured Categories */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <h2 className="text-3xl font-bold text-gray-900 mb-8 font-serif">Secteurs en vedette</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {CATEGORIES.slice(0, 4).map((cat, idx) => (
+                <div key={idx} className="group cursor-pointer bg-white p-6 rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-brand-200 transition-all text-center">
+                    <div className="w-12 h-12 bg-brand-50 text-brand-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-brand-600 group-hover:text-white transition-colors">
+                        <Briefcase className="w-6 h-6" />
+                    </div>
+                    <h3 className="font-semibold text-gray-900">{cat}</h3>
+                </div>
+            ))}
+        </div>
+      </div>
+
+      {/* Featured Businesses */}
+      <div className="bg-gray-50 py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-end mb-8">
+                <div>
+                    <h2 className="text-3xl font-bold text-gray-900 font-serif">Entreprises à la une</h2>
+                    <p className="text-gray-500 mt-2">Découvrez les pépites de notre communauté.</p>
+                </div>
+                <Link to="/directory" className="text-brand-600 font-medium hover:text-brand-700 flex items-center">
+                    Voir tout l'annuaire <TrendingUp className="w-4 h-4 ml-1" />
+                </Link>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                {MOCK_BUSINESSES.map(biz => (
+                    <BusinessCard key={biz.id} business={biz} />
+                ))}
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;

pages/InterviewDetailPage.tsx

@@ -0,0 +1,110 @@
+
+import React, { useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Share2, Play, Calendar, User, Building2 } from 'lucide-react';
+import { MOCK_INTERVIEWS } from '../services/mockData';
+import { InterviewType } from '../types';
+
+const InterviewDetailPage = () => {
+  const { id } = useParams();
+  const interview = MOCK_INTERVIEWS.find(i => i.id === id);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (!interview) return null;
+
+  // Helper to get YouTube embed URL
+  const getEmbedUrl = (url: string) => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+    return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
+  };
+
+  const isVideo = interview.type === InterviewType.VIDEO;
+
+  return (
+    <div className="bg-white min-h-screen">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <Link to="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 mb-8 transition-colors">
+                <ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
+            </Link>
+
+            {/* 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'}
+                </div>
+                <h1 className="text-3xl md:text-5xl font-serif font-bold text-gray-900 mb-6 leading-tight">
+                    {interview.title}
+                </h1>
+                
+                <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>
+                    <div className="flex items-center">
+                        <Calendar className="w-4 h-4 mr-2 text-brand-500" />
+                        {interview.date}
+                    </div>
+                </div>
+            </div>
+
+            {/* Main Content Area */}
+            {isVideo ? (
+                <div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
+                    {interview.videoUrl ? (
+                        <iframe 
+                            src={getEmbedUrl(interview.videoUrl) || ''} 
+                            title={interview.title}
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                            allowFullScreen
+                            className="w-full h-full"
+                        ></iframe>
+                    ) : (
+                        <div className="w-full h-full flex items-center justify-center bg-gray-900">
+                             <p className="text-white">Vidéo non disponible</p>
+                        </div>
+                    )}
+                </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" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+                </div>
+            )}
+
+            {/* Description / Article Content */}
+            <div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
+                {!isVideo && interview.content ? (
+                     interview.content.split('\n').map((paragraph, idx) => (
+                        <p key={idx}>{paragraph}</p>
+                     ))
+                ) : (
+                    <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
+                        {interview.excerpt}
+                    </p>
+                )}
+            </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
+                </button>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default InterviewDetailPage;

pages/LoginPage.tsx

@@ -0,0 +1,64 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const LoginPage = ({ onLogin }: { onLogin: () => void }) => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const navigate = useNavigate();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        // Mock login
+        onLogin();
+        navigate('/dashboard');
+    };
+
+    return (
+        <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>
+                    <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 <a href="#" className="font-medium text-brand-600 hover:text-brand-500">créez votre compte entreprise pour 1€</a>
+                    </p>
+                </div>
+                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+                    <div className="rounded-md shadow-sm -space-y-px">
+                        <div>
+                            <input 
+                                type="email" 
+                                required 
+                                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-brand-500 focus:border-brand-500 focus:z-10 sm:text-sm" 
+                                placeholder="Adresse email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                            />
+                        </div>
+                        <div>
+                            <input 
+                                type="password" 
+                                required 
+                                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-brand-500 focus:border-brand-500 focus:z-10 sm:text-sm" 
+                                placeholder="Mot de passe" 
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <button type="submit" className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
+                            Se connecter
+                        </button>
+                    </div>
+                    <div className="text-sm text-center text-gray-500">
+                        (Compte démo : n'importe quel email/mdp fonctionne)
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default LoginPage;

pages/SubscriptionPage.tsx

@@ -0,0 +1,36 @@
+
+import React from 'react';
+import PricingSection from '../components/PricingSection';
+
+const SubscriptionPage = () => {
+    return (
+        <div className="bg-white min-h-screen">
+             <div className="bg-dark-900 pt-20 pb-10 text-center">
+                 <h1 className="text-3xl font-bold text-white font-serif">Nos Offres</h1>
+                 <p className="text-gray-400 mt-2">Rejoignez la plus grande communauté d'entrepreneurs.</p>
+             </div>
+             <PricingSection />
+             
+             {/* FAQ Section */}
+             <div className="max-w-4xl mx-auto px-4 py-16">
+                 <h2 className="text-2xl font-bold text-gray-900 text-center mb-10">Questions Fréquentes</h2>
+                 <div className="space-y-6">
+                     <div className="bg-gray-50 p-6 rounded-lg">
+                         <h3 className="font-bold text-gray-900 mb-2">Puis-je changer d'abonnement plus tard ?</h3>
+                         <p className="text-gray-600">Oui, vous pouvez passer d'un plan à l'autre à tout moment depuis votre tableau de bord. La différence sera calculée au prorata.</p>
+                     </div>
+                     <div className="bg-gray-50 p-6 rounded-lg">
+                         <h3 className="font-bold text-gray-900 mb-2">Quels moyens de paiement acceptez-vous ?</h3>
+                         <p className="text-gray-600">Nous acceptons les cartes bancaires (Visa, Mastercard) ainsi que tous les principaux Mobile Money (Orange Money, MTN, Wave, Moov) disponibles en Afrique de l'Ouest et Centrale.</p>
+                     </div>
+                     <div className="bg-gray-50 p-6 rounded-lg">
+                         <h3 className="font-bold text-gray-900 mb-2">Comment fonctionne le badge "Vérifié" ?</h3>
+                         <p className="text-gray-600">Une fois abonné au plan Booster ou Empire, notre équipe effectuera une vérification rapide de votre entreprise (identité légale) sous 48h pour activer votre badge.</p>
+                     </div>
+                 </div>
+             </div>
+        </div>
+    );
+};
+
+export default SubscriptionPage;