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

feat: implement home page, business directory, and administrative management features with updated schema and API routes
Some checks failed
Build and Push App / build (push) Failing after 51s
Details

Browse Source
This commit is contained in:
streaper2
2026-04-23 14:40:50 +02:00
parent 88e4c13b9f
commit e6310f30de
23 changed files with 1124 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/EventTimeline.tsx
View File

@@ -32,15 +32,16 @@ const EventTimeline = ({ events }: EventTimelineProps) => {
{sortedEvents.map((event, index) => {
const eventDate = new Date(event.date);
const isEven = index % 2 === 0;
const isPast = eventDate < new Date();
return (
<div key={event.id} className={`relative flex flex-col md:flex-row items-center ${isEven ? 'md:flex-row-reverse' : ''}`}>
<div key={event.id} className={`relative flex flex-col md:flex-row items-center ${isEven ? 'md:flex-row-reverse' : ''} ${isPast ? 'opacity-60' : ''}`}>
{/* Marker */}
<div className="absolute left-4 md:left-1/2 w-4 h-4 bg-white border-4 border-brand-600 rounded-full transform md:-translate-x-1/2 z-10 shadow-[0_0_15px_rgba(234,88,12,0.5)]"></div>
<div className={`absolute left-4 md:left-1/2 w-4 h-4 bg-white border-4 rounded-full transform md:-translate-x-1/2 z-10 ${isPast ? 'border-gray-400 shadow-none' : 'border-brand-600 shadow-[0_0_15px_rgba(234,88,12,0.5)]'}`}></div>
{/* Content Card */}
<div className={`w-full md:w-[45%] ml-12 md:ml-0 group`}>
<div className="relative bg-white/80 backdrop-blur-xl p-6 rounded-3xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-500 group-hover:-translate-y-1">
<div className={`relative bg-white/80 backdrop-blur-xl p-6 rounded-3xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-500 group-hover:-translate-y-1 ${isPast ? 'grayscale-[0.8]' : ''}`}>
{/* Image with overlay gradient */}
<div className="relative h-48 mb-6 rounded-2xl overflow-hidden">
<img
@@ -50,7 +51,7 @@ const EventTimeline = ({ events }: EventTimelineProps) => {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div className="absolute bottom-4 left-4 right-4 flex justify-between items-end">
<span className="bg-brand-600/90 backdrop-blur-md text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider flex items-center">
<span className={`${isPast ? 'bg-gray-600/90' : 'bg-brand-600/90'} backdrop-blur-md text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider flex items-center`}>
<Calendar className="w-3 h-3 mr-1" />
{eventDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
</span>
@@ -59,11 +60,12 @@ const EventTimeline = ({ events }: EventTimelineProps) => {
{/* Event Details */}
<div className="space-y-3">
<div className="flex items-center text-brand-600 text-xs font-bold uppercase tracking-widest">
<div className={`flex items-center text-xs font-bold uppercase tracking-widest ${isPast ? 'text-gray-500' : 'text-brand-600'}`}>
<Clock className="w-3 h-3 mr-1" />
{eventDate.toLocaleDateString('fr-FR', { year: 'numeric' })}
{isPast && <span className="ml-2 px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-[10px]">PASSÉ</span>}
</div>
<h3 className="text-2xl font-serif font-bold text-gray-900 group-hover:text-brand-600 transition-colors leading-tight">
<h3 className={`text-2xl font-serif font-bold transition-colors leading-tight ${isPast ? 'text-gray-500' : 'text-gray-900 group-hover:text-brand-600'}`}>
{event.title}
</h3>
<div className="flex items-center text-sm text-gray-500">
@@ -78,7 +80,7 @@ const EventTimeline = ({ events }: EventTimelineProps) => {
<div className="pt-4 flex items-center justify-between">
<Link
href={`/afrolife/${event.slug || event.id}`}
className="inline-flex items-center text-brand-600 text-sm font-bold hover:underline group/link"
className={`inline-flex items-center text-sm font-bold hover:underline group/link ${isPast ? 'text-gray-400' : 'text-brand-600'}`}
>
Voir les détails
<ArrowRight className="w-4 h-4 ml-1 transform group-hover/link:translate-x-1 transition-transform" />
@@ -89,14 +91,16 @@ const EventTimeline = ({ events }: EventTimelineProps) => {
</div>
{/* Hover glow effect */}
<div className="absolute -inset-px bg-gradient-to-br from-brand-500/10 to-amber-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
{!isPast && (
<div className="absolute -inset-px bg-gradient-to-br from-brand-500/10 to-amber-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
)}
</div>
</div>
{/* Date Column (Desktop Only) */}
<div className="hidden md:flex w-[45%] justify-center items-center px-8">
<div className={`text-center ${isEven ? 'text-right' : 'text-left'}`}>
<span className="block text-4xl font-serif font-bold text-gray-200 group-hover:text-brand-500/20 transition-colors">
<span className={`block text-4xl font-serif font-bold transition-colors ${isPast ? 'text-gray-100' : 'text-gray-200 group-hover:text-brand-500/20'}`}>
{eventDate.toLocaleDateString('fr-FR', { month: 'long' })}
</span>
<span className="block text-xl font-bold text-gray-400">