first commit

components/DirectoryHero.tsx

@@ -0,0 +1,94 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { User as UserIcon, Award, Briefcase, MapPin, ArrowRight } from 'lucide-react';
+import { Business } from '../types';
+
+const DirectoryHero = ({ featuredBusiness }: { featuredBusiness: Business }) => {
+  if (!featuredBusiness) return null;
+
+  return (
+    <div className="bg-gray-50 relative overflow-hidden pb-12 pt-6">
+      {/* Geometric Background Pattern */}
+      <div className="absolute inset-0 z-0 opacity-10">
+        <svg className="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+          <path d="M0 100 C 20 0 50 0 100 100 Z" fill="#ea580c" />
+          <path d="M0 0 C 50 100 80 100 100 0 Z" fill="#ea580c" />
+        </svg>
+      </div>
+
+      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Main Card */}
+        <div className="bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-100">
+          
+          {/* Left: Imagery (Founder + Logo) */}
+          <div className="md:w-2/5 relative h-64 md:h-auto bg-gray-900 group">
+            {featuredBusiness.founderImageUrl ? (
+               <img 
+               src={featuredBusiness.founderImageUrl} 
+               alt={featuredBusiness.founderName} 
+               className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-500"
+             />
+            ) : (
+               <div className="w-full h-full bg-gradient-to-br from-gray-800 to-black flex items-center justify-center">
+                 <UserIcon className="w-20 h-20 text-gray-600" />
+               </div>
+            )}
+            
+            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
+            
+            {/* Overlaid Logo */}
+            <div className="absolute bottom-6 left-6 flex items-center space-x-3">
+               <div className="w-16 h-16 bg-white rounded-xl p-1 shadow-lg rotate-3 transform transition-transform group-hover:rotate-0">
+                 <img src={featuredBusiness.logoUrl} alt="Logo" className="w-full h-full object-cover rounded-lg" />
+               </div>
+            </div>
+          </div>
+
+          {/* Right: Content */}
+          <div className="md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
+            <div className="flex items-center space-x-2 mb-4">
+               <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800 uppercase tracking-wider">
+                 <Award className="w-3 h-3 mr-1" /> Entrepreneur du mois
+               </span>
+            </div>
+            
+            <h2 className="text-3xl md:text-4xl font-bold font-serif text-gray-900 mb-2">
+              {featuredBusiness.name}
+            </h2>
+            <p className="text-lg text-gray-600 mb-4 font-medium">
+              Dirigé par <span className="text-brand-600">{featuredBusiness.founderName}</span>
+            </p>
+            
+            <div className="flex flex-wrap gap-4 text-sm text-gray-500 mb-6">
+              <div className="flex items-center"><Briefcase className="w-4 h-4 mr-1"/> {featuredBusiness.category}</div>
+              <div className="flex items-center"><MapPin className="w-4 h-4 mr-1"/> {featuredBusiness.location}</div>
+            </div>
+
+            {/* Shocking Figure */}
+            {featuredBusiness.keyMetric && (
+              <div className="mb-8 p-4 bg-brand-50 border-l-4 border-brand-500 rounded-r-lg">
+                <p className="text-2xl font-bold text-brand-900">{featuredBusiness.keyMetric}</p>
+                <p className="text-xs text-brand-700 uppercase font-semibold">Performance validée</p>
+              </div>
+            )}
+
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Link 
+                to={`/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
+              </Link>
+              <button className="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 text-base font-medium rounded-md text-gray-600 bg-transparent hover:border-brand-300 hover:text-brand-600 transition-colors">
+                Devenir l'entrepreneur du mois <ArrowRight className="w-4 h-4 ml-2"/>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DirectoryHero;