streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save avant prochaine modif

Browse Source
This commit is contained in:
streaper2
2026-04-08 14:46:10 +02:00
parent bb10407e66
commit d88ba7c53c
1747 changed files with 194075 additions and 2433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/BusinessCard.tsx
View File

@@ -1,6 +1,8 @@
"use client";
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { CheckCircle, MapPin, Star, Phone, Share2, Facebook, Linkedin, Instagram, Twitter } from 'lucide-react';
import { Business } from '../types';
@@ -98,13 +100,13 @@ const BusinessCard: React.FC<{ business: Business }> = ({ business }) => {
<img src={business.logoUrl} alt={business.name} className="w-full h-full object-cover rounded-md bg-gray-50" />
</div>
<Link to={`/directory/${business.id}`} className="absolute inset-0 z-0" aria-label={`Voir ${business.name}`} />
<Link href={`/directory/${business.id}`} className="absolute inset-0 z-0" aria-label={`Voir ${business.name}`} />
</div>
{/* Body */}
<div className="pt-8 px-4 pb-4 flex-1 flex flex-col">
<div className="flex justify-between items-start">
<Link to={`/directory/${business.id}`} className="font-bold text-lg text-gray-900 truncate hover:text-brand-600 transition-colors">
<Link href={`/directory/${business.id}`} className="font-bold text-lg text-gray-900 truncate hover:text-brand-600 transition-colors">
{business.name}
</Link>
{business.verified && <CheckCircle className="w-5 h-5 text-blue-500 flex-shrink-0 ml-1" />}
@@ -122,7 +124,7 @@ const BusinessCard: React.FC<{ business: Business }> = ({ business }) => {
<span className="text-sm font-bold ml-1 text-gray-700">{business.rating}</span>
<span className="text-xs text-gray-400 ml-1">({business.viewCount} vues)</span>
</div>
<Link to={`/directory/${business.id}`} className="text-brand-600 text-sm font-medium hover:underline">Voir la fiche</Link>
<Link href={`/directory/${business.id}`} className="text-brand-600 text-sm font-medium hover:underline">Voir la fiche</Link>
</div>
</div>
</div>

4
components/DirectoryHero.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Link from 'next/link';
import { User as UserIcon, Award, Briefcase, MapPin, ArrowRight } from 'lucide-react';
import { Business } from '../types';
@@ -75,7 +75,7 @@ const DirectoryHero = ({ featuredBusiness }: { featuredBusiness: Business }) =>
<div className="flex flex-col sm:flex-row gap-4">
<Link
to={`/directory/${featuredBusiness.id}`}
href={`/directory/${featuredBusiness.id}`}
className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 shadow-lg hover:shadow-xl transition-all"
>
Voir la fiche complète

17
components/Footer.tsx
View File

@@ -1,10 +1,13 @@
"use client";
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
const Footer = () => {
const location = useLocation();
if (location.pathname.startsWith('/dashboard')) return null;
const pathname = usePathname() || '';
if (pathname.startsWith('/dashboard')) return null;
return (
<footer className="bg-dark-900 text-white">
@@ -13,16 +16,16 @@ const Footer = () => {
<div>
<h3 className="text-2xl font-serif font-bold text-brand-500 mb-4">Afropreunariat</h3>
<p className="text-gray-400 text-sm">
La plateforme de référence pour l'entrepreneuriat africain.
La plateforme de référence pour l'entrepreneuriat africain.
Visibilité, connexion et croissance pour les TPE/PME.
</p>
</div>
<div>
<h4 className="font-bold text-lg mb-4">Liens Rapides</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li><Link to="/directory" className="hover:text-brand-500">Rechercher une entreprise</Link></li>
<li><Link to="/login" className="hover:text-brand-500">Inscrire mon entreprise</Link></li>
<li><Link to="/blog" className="hover:text-brand-500">Actualités & Conseils</Link></li>
<li><Link href="/directory" className="hover:text-brand-500">Rechercher une entreprise</Link></li>
<li><Link href="/login" className="hover:text-brand-500">Inscrire mon entreprise</Link></li>
<li><Link href="/blog" className="hover:text-brand-500">Actualités & Conseils</Link></li>
</ul>
</div>
<div>

44
components/Navbar.tsx
View File

@@ -1,41 +1,39 @@
"use client";
import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu, X, LayoutDashboard, User as UserIcon } from 'lucide-react';
import { User } from '../types';
import { useUser } from '../components/UserProvider';
interface NavbarProps {
user: User | null;
onLogout: () => void;
}
const Navbar: React.FC<NavbarProps> = ({ user, onLogout }) => {
const Navbar = () => {
const { user } = useUser();
const [isOpen, setIsOpen] = useState(false);
const location = useLocation();
const pathname = usePathname() || '';
// Hide Navbar on Dashboard to prevent double navigation, show only on public pages
if (location.pathname.startsWith('/dashboard')) return null;
if (pathname.startsWith('/dashboard')) return null;
return (
<nav className="bg-white shadow-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex items-center">
<Link to="/" className="flex-shrink-0 flex items-center gap-2">
<Link href="/" className="flex-shrink-0 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-xl text-gray-900">Afropreunariat</span>
</Link>
<div className="hidden sm:ml-8 sm:flex sm:space-x-8">
<Link to="/" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname === '/' ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<Link href="/" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname === '/' ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
Accueil
</Link>
<Link to="/directory" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/directory') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<Link href="/directory" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/directory') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
Annuaire
</Link>
<Link to="/afrolife" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/afrolife') ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<Link href="/afrolife" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/afrolife') ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
Afro Life
</Link>
<Link to="/blog" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${location.pathname.startsWith('/blog') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
<Link href="/blog" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/blog') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
Blog
</Link>
</div>
@@ -43,13 +41,13 @@ const Navbar: React.FC<NavbarProps> = ({ user, onLogout }) => {
<div className="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
{user ? (
<>
<Link to="/dashboard" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none">
<Link href="/dashboard" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none">
<LayoutDashboard className="w-4 h-4 mr-2" />
Mon Espace
</Link>
</>
) : (
<Link to="/login" className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
<Link href="/login" className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
<UserIcon className="w-4 h-4 mr-2" />
Connexion / Inscription
</Link>
@@ -67,14 +65,14 @@ const Navbar: React.FC<NavbarProps> = ({ user, onLogout }) => {
{isOpen && (
<div className="sm:hidden bg-white border-t">
<div className="pt-2 pb-3 space-y-1">
<Link to="/" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Accueil</Link>
<Link to="/directory" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Annuaire</Link>
<Link to="/afrolife" className="block pl-3 pr-4 py-2 border-l-4 border-brand-500 text-base font-medium text-brand-700 bg-brand-50" onClick={() => setIsOpen(false)}>Afro Life</Link>
<Link to="/blog" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Blog</Link>
<Link href="/" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Accueil</Link>
<Link href="/directory" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Annuaire</Link>
<Link href="/afrolife" className="block pl-3 pr-4 py-2 border-l-4 border-brand-500 text-base font-medium text-brand-700 bg-brand-50" onClick={() => setIsOpen(false)}>Afro Life</Link>
<Link href="/blog" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Blog</Link>
{user ? (
<Link to="/dashboard" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Mon Espace</Link>
<Link href="/dashboard" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Mon Espace</Link>
) : (
<Link to="/login" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Connexion</Link>
<Link href="/login" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Connexion</Link>
)}
</div>
</div>

2
components/PricingSection.tsx
View File

@@ -1,3 +1,5 @@
"use client";
import React, { useState } from 'react';
import { Check, X, Smartphone, CreditCard, Loader, ShieldCheck } from 'lucide-react';

39
components/UserProvider.tsx Normal file
View File

@@ -0,0 +1,39 @@
"use client";
import React, { createContext, useContext, useState, ReactNode } from 'react';
import { User } from '../types';
import { MOCK_USER } from '../lib/mockData';
interface UserContextType {
user: User | null;
login: () => void;
logout: () => void;
}
const UserContext = createContext<UserContextType | undefined>(undefined);
export function UserProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const login = () => {
setUser(MOCK_USER);
};
const logout = () => {
setUser(null);
};
return (
<UserContext.Provider value={{ user, login, logout }}>
{children}
</UserContext.Provider>
);
}
export function useUser() {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('useUser must be used within a UserProvider');
}
return context;
}

4
components/dashboard/DashboardOffers.tsx
View File

@@ -1,8 +1,10 @@
"use client";
import React, { useState } from 'react';
import { PlusCircle, Edit3, Trash2, ShoppingBag, Image as ImageIcon } from 'lucide-react';
import { Offer, OfferType } from '../../types';
import { MOCK_OFFERS } from '../../services/mockData';
import { MOCK_OFFERS } from '../../lib/mockData';
const DashboardOffers = () => {
const [offers, setOffers] = useState<Offer[]>(MOCK_OFFERS);

48
components/dashboard/DashboardProfile.tsx
View File

@@ -1,8 +1,10 @@
"use client";
import React, { useState } from 'react';
import { Image as ImageIcon, Sparkles, Youtube, X, Globe, Facebook, Linkedin, Instagram } from 'lucide-react';
import { Business, CATEGORIES } from '../../types';
import { generateBusinessDescription } from '../../services/geminiService';
import { generateBusinessDescription } from '../../lib/geminiService';
// Helper to extract youtube ID
const getYouTubeId = (url: string) => {
@@ -49,7 +51,7 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
return (
<div className="space-y-8">
<div className="flex justify-between items-center">
<div className="flex justify-between items-center">
<h2 className="text-2xl font-bold font-serif text-gray-900">Éditer mon profil</h2>
<button onClick={handleSave} className="bg-brand-600 text-white px-4 py-2 rounded-md hover:bg-brand-700 font-medium text-sm shadow-sm">
Enregistrer
@@ -58,7 +60,7 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
{/* A. Bloc Identité Visuelle */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><ImageIcon className="w-5 h-5 mr-2 text-brand-600"/> Identité Visuelle</h3>
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><ImageIcon className="w-5 h-5 mr-2 text-brand-600" /> Identité Visuelle</h3>
<div className="flex items-center space-x-6">
<div className="shrink-0">
<img className="h-24 w-24 object-cover rounded-full border-2 border-gray-200" src={formData.logoUrl} alt="Logo actuel" />
@@ -69,7 +71,7 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
</div>
</div>
<div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 mt-6">
<div className="sm:col-span-3">
<div className="sm:col-span-3">
<label className="block text-sm font-medium text-gray-700">Nom de l'entreprise</label>
<input type="text" name="name" value={formData.name} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
</div>
@@ -83,7 +85,7 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
<div className="flex justify-between mb-1">
<label className="block text-sm font-medium text-gray-700">Description</label>
<button type="button" onClick={handleAiGenerate} disabled={isGenerating} className="text-xs flex items-center text-brand-600 hover:text-brand-800">
{isGenerating ? '...' : <><Sparkles className="w-3 h-3 mr-1"/> Générer avec IA</>}
{isGenerating ? '...' : <><Sparkles className="w-3 h-3 mr-1" /> Générer avec IA</>}
</button>
</div>
<textarea name="description" rows={3} value={formData.description} onChange={handleInputChange} className="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
@@ -93,32 +95,32 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
{/* B. Bloc Présentation Vidéo */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Youtube className="w-5 h-5 mr-2 text-red-600"/> Présentation Vidéo</h3>
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Youtube className="w-5 h-5 mr-2 text-red-600" /> Présentation Vidéo</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700">Lien de votre vidéo (Youtube)</label>
<div className="mt-1 flex rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
https://
</span>
<input
type="text"
value={videoInput.replace('https://', '')}
<input
type="text"
value={videoInput.replace('https://', '')}
onChange={handleVideoChange}
className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300"
className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300"
placeholder="www.youtube.com/watch?v=..."
/>
</div>
<p className="mt-2 text-sm text-gray-500">Copiez l'URL de votre vidéo de présentation pour l'afficher sur votre profil.</p>
</div>
{videoPreviewId ? (
<div className="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gray-100 mt-4 border border-gray-200">
<iframe
src={`https://www.youtube.com/embed/${videoPreviewId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
<iframe
src={`https://www.youtube.com/embed/${videoPreviewId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
className="w-full h-64 sm:h-80 rounded-lg"
></iframe>
@@ -143,8 +145,8 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
{/* C. Bloc Coordonnées & Réseaux */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Globe className="w-5 h-5 mr-2 text-blue-500"/> Coordonnées & Réseaux</h3>
<div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Globe className="w-5 h-5 mr-2 text-blue-500" /> Coordonnées & Réseaux</h3>
<div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label className="block text-sm font-medium text-gray-700">Email Contact</label>
<input type="email" name="contactEmail" value={formData.contactEmail} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
@@ -158,25 +160,25 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
<div className="space-y-3">
<div className="flex rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
<Facebook className="w-4 h-4"/>
<Facebook className="w-4 h-4" />
</span>
<input type="text" placeholder="Lien Facebook" value={formData.socialLinks?.facebook || ''} onChange={(e) => handleSocialChange('facebook', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
</div>
<div className="flex rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
<Linkedin className="w-4 h-4"/>
<Linkedin className="w-4 h-4" />
</span>
<input type="text" placeholder="Lien LinkedIn" value={formData.socialLinks?.linkedin || ''} onChange={(e) => handleSocialChange('linkedin', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
</div>
<div className="flex rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
<Instagram className="w-4 h-4"/>
<Instagram className="w-4 h-4" />
</span>
<input type="text" placeholder="Lien Instagram" value={formData.socialLinks?.instagram || ''} onChange={(e) => handleSocialChange('instagram', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);