save avant prochaine modif
This commit is contained in:
113
app/afrolife/[id]/page.tsx
Normal file
113
app/afrolife/[id]/page.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { ArrowLeft, Share2, Play, Calendar, User, Building2 } from 'lucide-react';
|
||||
import { MOCK_INTERVIEWS } from '../../../lib/mockData';
|
||||
import { InterviewType } from '../../../types';
|
||||
|
||||
const InterviewDetailPage = () => {
|
||||
const { id } = useParams();
|
||||
const interview = MOCK_INTERVIEWS.find(i => i.id === id);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [id]);
|
||||
|
||||
if (!interview) return null;
|
||||
|
||||
// Helper to get YouTube embed URL
|
||||
const getEmbedUrl = (url: string) => {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
|
||||
};
|
||||
|
||||
const isVideo = interview.type === InterviewType.VIDEO;
|
||||
|
||||
return (
|
||||
<div className="bg-white min-h-screen">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 mb-8 transition-colors">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
|
||||
</Link>
|
||||
|
||||
{/* Header Info */}
|
||||
<div className="text-center mb-10">
|
||||
<div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
|
||||
{isVideo ? 'Interview Vidéo' : 'Grand Entretien'}
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-5xl font-serif font-bold text-gray-900 mb-6 leading-tight">
|
||||
{interview.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center">
|
||||
<User className="w-4 h-4 mr-2 text-brand-500" />
|
||||
<span className="font-medium text-gray-900">{interview.guestName}</span>
|
||||
<span className="mx-1 text-gray-400">|</span>
|
||||
<span>{interview.role}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Building2 className="w-4 h-4 mr-2 text-brand-500" />
|
||||
{interview.companyName}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-2 text-brand-500" />
|
||||
{interview.date}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
{isVideo ? (
|
||||
<div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
|
||||
{interview.videoUrl ? (
|
||||
<iframe
|
||||
src={getEmbedUrl(interview.videoUrl) || ''}
|
||||
title={interview.title}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full h-full"
|
||||
></iframe>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gray-900">
|
||||
<p className="text-white">Vidéo non disponible</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
|
||||
<img src={interview.thumbnailUrl} alt={interview.title} className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description / Article Content */}
|
||||
<div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
|
||||
{!isVideo && interview.content ? (
|
||||
interview.content.split('\n').map((paragraph, idx) => (
|
||||
<p key={idx}>{paragraph}</p>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
|
||||
{interview.excerpt}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
|
||||
<button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
|
||||
<Share2 className="w-5 h-5 mr-2" />
|
||||
Partager cette interview
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InterviewDetailPage;
|
||||
110
app/afrolife/page.tsx
Normal file
110
app/afrolife/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Play, FileText, Clock, Mic } from 'lucide-react';
|
||||
import { MOCK_INTERVIEWS } from '../../lib/mockData';
|
||||
import { InterviewType } from '../../types';
|
||||
|
||||
const AfroLifePage = () => {
|
||||
const [filter, setFilter] = useState<'ALL' | 'VIDEO' | 'ARTICLE'>('ALL');
|
||||
|
||||
const filteredInterviews = MOCK_INTERVIEWS.filter(interview => {
|
||||
if (filter === 'ALL') return true;
|
||||
return interview.type === filter;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="bg-white min-h-screen">
|
||||
{/* Hero Header */}
|
||||
<div className="bg-dark-900 text-white py-20 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30 bg-[url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80')] bg-cover bg-center"></div>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<span className="inline-block py-1 px-3 rounded-full bg-brand-600/20 border border-brand-500 text-brand-400 text-xs font-bold tracking-wider uppercase mb-4">
|
||||
Lifestyle & Inspiration
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-serif font-bold mb-6">Afro Life</h1>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
Plongez dans l'intimité des bâtisseurs. Entretiens exclusifs, parcours de vie et leçons de leadership.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Filters */}
|
||||
<div className="flex justify-center mb-12 space-x-4">
|
||||
<button
|
||||
onClick={() => setFilter('ALL')}
|
||||
className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ALL' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
|
||||
>
|
||||
Tout voir
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('VIDEO')}
|
||||
className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'VIDEO' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" /> Vidéos
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('ARTICLE')}
|
||||
className={`flex items-center px-6 py-2 rounded-full text-sm font-medium transition-all ${filter === 'ARTICLE' ? 'bg-brand-600 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-2" /> Articles
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredInterviews.map(interview => (
|
||||
<Link href={`/afrolife/${interview.id}`} key={interview.id} className="group block h-full">
|
||||
<div className="relative h-64 rounded-xl overflow-hidden shadow-sm group-hover:shadow-xl transition-all duration-300">
|
||||
<img
|
||||
src={interview.thumbnailUrl}
|
||||
alt={interview.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
|
||||
|
||||
{/* Type Badge */}
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide text-white backdrop-blur-md ${interview.type === InterviewType.VIDEO ? 'bg-red-600/90' : 'bg-blue-600/90'}`}>
|
||||
{interview.type === InterviewType.VIDEO ? <Play className="w-3 h-3 mr-1 fill-current" /> : <Mic className="w-3 h-3 mr-1" />}
|
||||
{interview.type === InterviewType.VIDEO ? 'Vidéo' : 'Interview'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Play Icon Overlay for Videos */}
|
||||
{interview.type === InterviewType.VIDEO && (
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div className="w-16 h-16 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
|
||||
<Play className="w-8 h-8 text-white fill-current ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-6 px-2">
|
||||
<div className="flex items-center text-xs text-gray-500 mb-3 space-x-3">
|
||||
<span className="font-semibold text-brand-600 uppercase">{interview.guestName}</span>
|
||||
<span className="w-1 h-1 bg-gray-300 rounded-full"></span>
|
||||
<span>{interview.companyName}</span>
|
||||
<span className="w-1 h-1 bg-gray-300 rounded-full"></span>
|
||||
<span className="flex items-center"><Clock className="w-3 h-3 mr-1"/> {interview.duration}</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-serif font-bold text-gray-900 mb-2 group-hover:text-brand-600 transition-colors leading-tight">
|
||||
{interview.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm line-clamp-2">
|
||||
{interview.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AfroLifePage;
|
||||
Reference in New Issue
Block a user