first commit

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;