95 lines
4.6 KiB
TypeScript
95 lines
4.6 KiB
TypeScript
|
|
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;
|