import React, { useState, useEffect } from 'react';
import { cn } from './utils/cn';
// Types
interface FlightSearch {
origin: string;
destination: string;
departureDate: string;
returnDate: string;
passengers: number;
class: string;
}
interface HotelSearch {
destination: string;
checkIn: string;
checkOut: string;
guests: number;
rooms: number;
}
// Components
const Header: React.FC = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<header className={cn(
'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
isScrolled ? 'glass shadow-lg' : 'bg-white/95'
)}>
{/* Announcement Bar */}
<div className="bg-navy-gradient text-white py-2 px-4 text-center text-sm">
<div className="max-w-7xl mx-auto flex items-center justify-center gap-4 flex-wrap">
<span className="flex items-center gap-2">
<span className="animate-pulse-custom w-2 h-2 bg-[#febb02] rounded-full"></span>
<strong>Agence N°1 — Thiès, Sénégal</strong>
</span>
<span className="hidden sm:inline text-white/20">|</span>
<span className="hidden sm:inline">✈️ Devis Gratuit en 24h</span>
<span className="hidden sm:inline text-white/20">|</span>
<a href="tel:+221771437125" className="flex items-center gap-1 text-[#febb02] font-bold">
📞 77 143 71 25
</a>
</div>
</div>
{/* Navigation */}
<nav className="border-b-2 border-[#febb02]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<a href="#" className="flex items-center gap-3">
<img
src="https://srvoyages.com/wp-content/uploads/2026/03/LOGO-SR-VOYAGES-2.png"
alt="SR VOYAGES"
className="h-10 w-auto"
/>
<span className="hidden sm:inline-block bg-navy-gradient text-[#febb02] text-xs font-black px-2 py-1 rounded uppercase tracking-wider">
N°1 Thiès
</span>
</a>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-1">
{['Services', 'Réservations', 'Pourquoi Nous', 'Avis', 'FAQ', 'Contact'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase().replace(' ', '-')}`}
className="text-[#001A3A] font-semibold text-sm px-3 py-2 rounded-lg transition-colors hover:bg-[#001A3A]/6"
>
{item}
</a>
))}
<a
href="tel:+221771437125"
className="btn-gold text-sm px-4 py-2 ml-2"
>
📞 Appeler
</a>
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="lg:hidden p-2 rounded-lg hover:bg-gray-100"
aria-label="Menu"
>
<div className="space-y-1.5">
<span className={cn('block w-6 h-0.5 bg-[#001A3A] rounded transition-all', isMobileMenuOpen && 'rotate-45 translate-y-2')}></span>
<span className={cn('block w-6 h-0.5 bg-[#001A3A] rounded transition-all', isMobileMenuOpen && 'opacity-0')}></span>
<span className={cn('block w-6 h-0.5 bg-[#001A3A] rounded transition-all', isMobileMenuOpen && '-rotate-45 -translate-y-2')}></span>
</div>
</button>
</div>
</div>
{/* Mobile Menu */}
{isMobileMenuOpen && (
<div className="lg:hidden glass border-t border-gray-200">
<div className="px-4 py-4 space-y-2">
{['Services', 'Réservations', 'Pourquoi Nous', 'Avis', 'FAQ', 'Contact'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase().replace(' ', '-')}`}
onClick={() => setIsMobileMenuOpen(false)}
className="block text-[#001A3A] font-semibold px-4 py-3 rounded-lg hover:bg-[#FDF8EF]"
>
{item}
</a>
))}
<a
href="tel:+221771437125"
className="btn-gold block text-center"
>
📞 77 143 71 25
</a>
<a
href="https://wa.me/221771437125"
className="btn-green block text-center"
target="_blank"
rel="noopener noreferrer"
>
💬 WhatsApp
</a>
</div>
</div>
)}
</nav>
</header>
);
};
const Hero: React.FC = () => {
return (
<section className="relative min-h-screen flex items-center justify-center bg-navy-gradient pt-32 pb-20 px-4 overflow-hidden">
{/* Background Effects */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#febb02] rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#006ce4] rounded-full blur-3xl"></div>
</div>
<div className="relative z-10 max-w-5xl mx-auto text-center">
<div className="badge-gold mb-4 inline-block">
<span className="animate-pulse-custom w-2 h-2 bg-[#febb02] rounded-full"></span>
Agence N°1 — Thiès, Sénégal
</div>
<div className="badge-navy mb-8 inline-block">
🏆 <span className="text-[#febb02] font-black tracking-wider">N°1</span> Agence de Voyage dans la région de Thiès
</div>
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white mb-6 leading-tight">
Réservez Vos Voyages
<br />
<span className="text-[#febb02]">en Ligne</span>
</h1>
<p className="text-lg sm:text-xl text-white/80 max-w-3xl mx-auto mb-10 leading-relaxed">
SR VOYAGES — <strong>Agence N°1 à Thiès</strong> — vous propose maintenant la réservation en ligne de
<strong> billets d'avion</strong> et <strong>hôtels</strong> aux meilleurs tarifs.
Visas, Hajj & Omra disponibles.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#reservations" className="btn-gold text-lg px-8 py-4">
🚀 Réserver Maintenant
</a>
<a
href="https://wa.me/221771437125"
className="btn-outline text-lg px-8 py-4"
target="_blank"
rel="noopener noreferrer"
>
💬 WhatsApp
</a>
</div>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16 pt-8 border-t border-white/10">
{[
{ value: '500+', label: 'Clients Satisfaits' },
{ value: '10+', label: 'Ans d\'Expérience' },
{ value: '8', label: 'Compagnies' },
{ value: 'N°1', label: 'Région de Thiès' },
].map((stat, index) => (
<div key={index} className="text-center fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
<div className="text-3xl sm:text-4xl font-black text-[#febb02] mb-2">{stat.value}</div>
<div className="text-sm text-white/60">{stat.label}</div>
</div>
))}
</div>
</div>
</section>
);
};
const FlightBooking: React.FC = () => {
const [search, setSearch] = useState<FlightSearch>({
origin: '',
destination: '',
departureDate: '',
returnDate: '',
passengers: 1,
class: 'economy'
});
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
const cl = search.class === 'economy' ? 'e' : search.class === 'business' ? 'b' : search.class === 'premium' ? 'w' : 'f';
const googleFlightsUrl = `https://www.google.com/travel/flights?tfs=cbct%3A1-dt%3A${encodeURIComponent(search.departureDate || '')}-dd%3A${encodeURIComponent(search.destination || '')}-dp%3A${encodeURIComponent(search.origin || '')}-td%3A${encodeURIComponent(search.returnDate || '')}-tp%3A${search.passengers}-cl%3A${cl}`;
window.open(googleFlightsUrl, '_blank');
};
return (
<div className="card-modern relative overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-500"></div>
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-2xl">
✈️
</div>
<div>
<h3 className="text-xl font-bold text-[#001A3A]">Réserver un Vol</h3>
<p className="text-sm text-gray-500">Comparez les meilleurs prix via Google Travel</p>
</div>
</div>
<form onSubmit={handleSearch} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Départ</label>
<input
type="text"
value={search.origin}
onChange={(e) => setSearch({ ...search, origin: e.target.value })}
placeholder="Ex: Dakar (DSS)"
className="input-modern"
required
/>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Destination</label>
<input
type="text"
value={search.destination}
onChange={(e) => setSearch({ ...search, destination: e.target.value })}
placeholder="Ex: Paris (CDG)"
className="input-modern"
required
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Date de départ</label>
<input
type="date"
value={search.departureDate}
onChange={(e) => setSearch({ ...search, departureDate: e.target.value })}
className="input-modern"
required
/>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Date de retour (optionnel)</label>
<input
type="date"
value={search.returnDate}
onChange={(e) => setSearch({ ...search, returnDate: e.target.value })}
className="input-modern"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Passagers</label>
<select
value={search.passengers}
onChange={(e) => setSearch({ ...search, passengers: parseInt(e.target.value) })}
className="input-modern"
>
{[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
<option key={num} value={num}>{num} {num === 1 ? 'passager' : 'passagers'}</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Classe</label>
<select
value={search.class}
onChange={(e) => setSearch({ ...search, class: e.target.value })}
className="input-modern"
>
<option value="economy">Économique</option>
<option value="premium">Premium Économique</option>
<option value="business">Affaires</option>
<option value="first">Première</option>
</select>
</div>
</div>
<button type="submit" className="w-full btn-navy text-lg py-4 mt-6">
🔍 Rechercher les Vols
</button>
<p className="text-xs text-center text-gray-500 mt-2">
Vous serez redirigé vers Google Travel pour voir les résultats
</p>
</form>
</div>
);
};
const HotelBooking: React.FC = () => {
const [search, setSearch] = useState<HotelSearch>({
destination: '',
checkIn: '',
checkOut: '',
guests: 2,
rooms: 1
});
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
const googleHotelsUrl = `https://www.google.com/travel/hotels?gl=FR&hl=fr&destination=${encodeURIComponent(search.destination)}&dategridview=1&checkoutdate=${encodeURIComponent(search.checkOut)}&checkindate=${encodeURIComponent(search.checkIn)}&occupancy=${search.guests}&rooms=${search.rooms}`;
window.open(googleHotelsUrl, '_blank');
};
return (
<div className="card-modern relative overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-500 to-pink-500"></div>
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-2xl">
🏨
</div>
<div>
<h3 className="text-xl font-bold text-[#001A3A]">Réserver un Hôtel</h3>
<p className="text-sm text-gray-500">Trouvez l'hébergement parfait via Google Travel</p>
</div>
</div>
<form onSubmit={handleSearch} className="space-y-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Destination</label>
<input
type="text"
value={search.destination}
onChange={(e) => setSearch({ ...search, destination: e.target.value })}
placeholder="Ex: Paris, France"
className="input-modern"
required
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Arrivée</label>
<input
type="date"
value={search.checkIn}
onChange={(e) => setSearch({ ...search, checkIn: e.target.value })}
className="input-modern"
required
/>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Départ</label>
<input
type="date"
value={search.checkOut}
onChange={(e) => setSearch({ ...search, checkOut: e.target.value })}
className="input-modern"
required
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Voyageurs</label>
<select
value={search.guests}
onChange={(e) => setSearch({ ...search, guests: parseInt(e.target.value) })}
className="input-modern"
>
{[1, 2, 3, 4, 5, 6].map((num) => (
<option key={num} value={num}>{num} {num === 1 ? 'voyageur' : 'voyageurs'}</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Chambres</label>
<select
value={search.rooms}
onChange={(e) => setSearch({ ...search, rooms: parseInt(e.target.value) })}
className="input-modern"
>
{[1, 2, 3, 4, 5].map((num) => (
<option key={num} value={num}>{num} {num === 1 ? 'chambre' : 'chambres'}</option>
))}
</select>
</div>
</div>
<button type="submit" className="w-full btn-navy text-lg py-4 mt-6">
🔍 Rechercher les Hôtels
</button>
<p className="text-xs text-center text-gray-500 mt-2">
Vous serez redirigé vers Google Travel pour voir les résultats
</p>
</form>
</div>
);
};
const Reservations: React.FC = () => {
const [activeTab, setActiveTab] = useState<'flight' | 'hotel'>('flight');
return (
<section id="reservations" className="py-20 px-4 bg-[#f0f4f8]">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#006ce4] text-sm font-bold uppercase tracking-wider">Réservations en Ligne</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#001A3A] mt-3 mb-4">
Réservez Vos <span className="text-[#febb02]">Voyages</span> Facilement
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
Utilisez nos moteurs de recherche intégrés à Google Travel pour trouver les meilleurs prix
de billets d'avion et d'hôtels en quelques clics.
</p>
</div>
{/* Tabs */}
<div className="flex justify-center mb-8">
<div className="bg-white rounded-2xl p-2 shadow-lg inline-flex gap-2">
<button
onClick={() => setActiveTab('flight')}
className={cn(
'px-6 py-3 rounded-xl font-bold transition-all duration-200',
activeTab === 'flight'
? 'bg-navy-gradient text-white shadow-lg'
: 'text-[#001A3A] hover:bg-gray-100'
)}
>
✈️ Vols
</button>
<button
onClick={() => setActiveTab('hotel')}
className={cn(
'px-6 py-3 rounded-xl font-bold transition-all duration-200',
activeTab === 'hotel'
? 'bg-navy-gradient text-white shadow-lg'
: 'text-[#001A3A] hover:bg-gray-100'
)}
>
🏨 Hôtels
</button>
</div>
</div>
{/* Booking Forms */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{activeTab === 'flight' && (
<div className="fade-in-up">
<FlightBooking />
</div>
)}
{activeTab === 'hotel' && (
<div className="fade-in-up">
<HotelBooking />
</div>
)}
{/* Info Panel */}
<div className="fade-in-up" style={{ animationDelay: '0.2s' }}>
<div className="bg-navy-gradient rounded-2xl p-8 text-white h-full">
<h3 className="text-2xl font-bold mb-6 flex items-center gap-3">
<span>🏆</span>
Pourquoi Réserver avec Nous ?
</h3>
<div className="space-y-4">
{[
{ icon: '💰', title: 'Meilleurs Tarifs', desc: 'Comparaison automatique via Google Travel' },
{ icon: '⚡', title: 'Réservation Rapide', desc: 'Trouvez votre vol ou hôtel en quelques minutes' },
{ icon: '🛡️', title: 'Sécurité Garantie', desc: 'Transactions sécurisées et fiables' },
{ icon: '📞', title: 'Support 24/7', desc: 'Notre équipe est toujours disponible' },
{ icon: '🌍', title: 'Destinations Mondiales', desc: 'Accès à des milliers de destinations' },
].map((item, index) => (
<div key={index} className="flex items-start gap-4 p-4 bg-white/10 rounded-xl">
<div className="text-3xl">{item.icon}</div>
<div>
<h4 className="font-bold text-[#febb02] mb-1">{item.title}</h4>
<p className="text-sm text-white/70">{item.desc}</p>
</div>
</div>
))}
</div>
<div className="mt-8 pt-8 border-t border-white/20">
<p className="text-sm text-white/60 mb-4">
Besoin d'aide pour votre réservation ?
</p>
<div className="flex flex-col sm:flex-row gap-3">
<a href="tel:+221771437125" className="btn-gold text-center flex-1">
📞 Appeler
</a>
<a
href="https://wa.me/221771437125"
className="btn-green text-center flex-1"
target="_blank"
rel="noopener noreferrer"
>
💬 WhatsApp
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
const Services: React.FC = () => {
const services = [
{ icon: '✈️', title: 'Billetterie Aérienne', desc: 'Vols nationaux et internationaux aux meilleurs tarifs' },
{ icon: '🏨', title: 'Réservation Hôtels', desc: 'Hébergements de qualité partout dans le monde' },
{ icon: '🛂', title: 'Assistance Visa', desc: 'Canada, USA, Europe (Schengen) - Traitement rapide' },
{ icon: '🕋', title: 'Hajj & Omra', desc: 'Organisation complète de vos pèlerinages' },
{ icon: '🛡️', title: 'Assurance Voyage', desc: 'Couverture santé et rapatriement internationale' },
{ icon: '🚐', title: 'Transferts Aéroport', desc: 'Navettes confortables et sécurisées' },
];
return (
<section id="services" className="py-20 px-4 bg-white">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#006ce4] text-sm font-bold uppercase tracking-wider">Nos Services</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#001A3A] mt-3 mb-4">
Solutions Complètes de <span className="text-[#febb02]">Voyage</span>
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
Des solutions complètes pour tous vos besoins de voyage, avec l'expertise de l'Agence N°1 de Thiès.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service, index) => (
<div key={index} className="card-modern fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
<div className="text-4xl mb-4">{service.icon}</div>
<h3 className="text-xl font-bold text-[#001A3A] mb-2">{service.title}</h3>
<p className="text-gray-600">{service.desc}</p>
</div>
))}
</div>
</div>
</section>
);
};
const WhyUs: React.FC = () => {
return (
<section id="pourquoi-nous" className="py-20 px-4 bg-navy-gradient">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#febb02] text-sm font-bold uppercase tracking-wider">Notre Différence</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-white mt-3 mb-4">
Pourquoi Choisir <span className="text-[#febb02]">SR VOYAGES</span> ?
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{ icon: '🏆', title: 'N°1 à Thiès', desc: 'Agence reconnue comme la référence du voyage dans la région' },
{ icon: '⚡', title: 'Réactivité', desc: 'Disponible 6j/7. Réponse rapide et traitement prioritaire' },
{ icon: '💰', title: 'Meilleurs Tarifs', desc: 'Accès direct aux meilleures offres du marché' },
{ icon: '❤️', title: 'Suivi Personnalisé', desc: 'Un conseiller dédié de A à Z' },
].map((item, index) => (
<div key={index} className="text-center p-6 border border-white/10 rounded-2xl hover:bg-white/5 transition-all fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
<div className="text-5xl mb-4">{item.icon}</div>
<h3 className="text-xl font-bold text-[#febb02] mb-2">{item.title}</h3>
<p className="text-white/60">{item.desc}</p>
</div>
))}
</div>
{/* N°1 Showcase */}
<div className="max-w-4xl mx-auto mt-16 bg-white/10 border border-[#febb02]/30 rounded-2xl p-8 backdrop-blur-sm">
<div className="flex flex-col md:flex-row items-center gap-6 text-center md:text-left">
<div className="text-6xl">🏆</div>
<div>
<h3 className="text-2xl font-black text-[#febb02] mb-2">
Agence de Voyage N°1 dans la région de Thiès
</h3>
<p className="text-white/70 mb-4">
SR VOYAGES s'est imposée comme la référence incontournable du voyage dans toute la région de Thiès.
Plus de 500 clients satisfaits témoignent de notre expertise et de notre engagement.
</p>
<div className="inline-flex items-center gap-2 bg-[#febb02]/20 border border-[#febb02]/40 text-[#febb02] px-4 py-2 rounded-full text-sm font-bold">
✓ +500 clients satisfaits · +10 ans d'expérience
</div>
</div>
</div>
</div>
</div>
</section>
);
};
const Testimonials: React.FC = () => {
const testimonials = [
{
name: 'Moussa Diallo',
location: 'Thiès',
text: 'SR Voyages m\'a obtenu mon visa Canada en un temps record. L\'équipe a pris en charge tout le dossier avec un professionnalisme remarquable!',
rating: 5
},
{
name: 'Fatou Sarr',
location: 'Dakar',
text: 'Mon Omra organisé par SR Voyages était parfait. Chaque détail soigné, hébergement proche des lieux saints. Une expérience inoubliable.',
rating: 5
},
{
name: 'Amadou Koné',
location: 'Thiès',
text: 'Les meilleurs tarifs, sans aucun doute ! Comparé à d\'autres agences, SR Voyages m\'a fait économiser significativement sur mon billet.',
rating: 5
},
];
return (
<section id="avis" className="py-20 px-4 bg-[#f0f4f8]">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#006ce4] text-sm font-bold uppercase tracking-wider">Témoignages</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#001A3A] mt-3 mb-4">
Ils Nous Font <span className="text-[#febb02]">Confiance</span>
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
La satisfaction de nos +500 clients est notre meilleure carte de visite.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{testimonials.map((testimonial, index) => (
<div key={index} className="card-modern fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<span key={i} className="text-[#febb02] text-xl">★</span>
))}
</div>
<blockquote className="text-gray-700 mb-6 italic">
"{testimonial.text}"
</blockquote>
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-navy-gradient text-[#febb02] rounded-full flex items-center justify-center font-bold">
{testimonial.name.charAt(0)}
</div>
<div>
<p className="font-bold text-[#001A3A]">{testimonial.name}</p>
<p className="text-sm text-gray-500">{testimonial.location}</p>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
};
const FAQ: React.FC = () => {
const [openIndex, setOpenIndex] = useState<number | null>(0);
const faqs = [
{
question: 'Pourquoi SR VOYAGES est-elle N°1 dans la région de Thiès ?',
answer: 'SR VOYAGES s\'est imposée comme l\'Agence de Voyage N°1 grâce à plus de 10 ans d\'expérience, +500 clients satisfaits, des tarifs imbattables et un accompagnement personnalisé de A à Z.'
},
{
question: 'Combien de temps faut-il pour obtenir un visa ?',
answer: 'Les délais varient selon le pays : Schengen (Europe) 15–30 jours, Canada 4–8 semaines, USA 2–4 semaines. Notre équipe constitue votre dossier avec soin.'
},
{
question: 'Comment réserver un billet d\'avion en ligne ?',
answer: 'Utilisez notre formulaire de réservation intégré à Google Travel. Entrez vos informations et vous serez redirigé vers les meilleurs tarifs disponibles.'
},
{
question: 'Proposez-vous des facilités de paiement ?',
answer: 'Oui ! Arrangements adaptés pour les packages Hajj & Omra notamment. Paiements acceptés : espèces, virement bancaire, Orange Money et Wave.'
},
{
question: 'Avec quelles compagnies aériennes travaillez-vous ?',
answer: 'Air France, Royal Air Maroc, Emirates, Turkish Airlines, Brussels Airlines, Air Sénégal, Corsair et bien d\'autres.'
},
];
return (
<section id="faq" className="py-20 px-4 bg-white">
<div className="max-w-3xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#006ce4] text-sm font-bold uppercase tracking-wider">FAQ</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#001A3A] mt-3 mb-4">
Questions <span className="text-[#febb02]">Fréquentes</span>
</h2>
</div>
<div className="space-y-4">
{faqs.map((faq, index) => (
<div key={index} className="border-2 border-gray-200 rounded-xl overflow-hidden fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
<button
onClick={() => setOpenIndex(openIndex === index ? null : index)}
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors"
>
<span className="font-bold text-[#001A3A]">{faq.question}</span>
<span className="text-2xl text-[#febb02] transition-transform duration-300">
{openIndex === index ? '−' : '+'}
</span>
</button>
{openIndex === index && (
<div className="px-6 py-4 bg-gray-50">
<p className="text-gray-600">{faq.answer}</p>
</div>
)}
</div>
))}
</div>
</div>
</section>
);
};
const Contact: React.FC = () => {
const [formData, setFormData] = useState({
name: '',
phone: '',
service: '',
message: ''
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const text = `Bonjour SR Voyages ! 👋\n\n*Nouvelle Demande de Devis*\n\n👤 Nom : ${formData.name}\n📞 Tél : ${formData.phone}\n✈️ Service : ${formData.service}\n💬 Message : ${formData.message || '—'}\n\nMerci de me rappeler !`;
window.open(`https://wa.me/221771437125?text=${encodeURIComponent(text)}`, '_blank');
};
return (
<section id="contact" className="py-20 px-4 bg-[#f0f4f8]">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<span className="text-[#006ce4] text-sm font-bold uppercase tracking-wider">Contact</span>
<h2 className="text-3xl sm:text-4xl md:text-5xl font-black text-[#001A3A] mt-3 mb-4">
Prêt à <span className="text-[#febb02]">Voyager</span> ?
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
Devis gratuit et personnalisé. Réponse garantie sous 24h ouvrées.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Info */}
<div className="bg-navy-gradient rounded-2xl p-8 text-white">
<h3 className="text-2xl font-bold text-[#febb02] mb-6">Nos Coordonnées</h3>
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="text-3xl">📍</div>
<div>
<p className="text-[#febb02] font-bold text-sm uppercase tracking-wider mb-1">Adresse</p>
<p className="text-white/70">Av El Hadji Malick Sy, Randouléne<br/>Thiès, Sénégal</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="text-3xl">📞</div>
<div>
<p className="text-[#febb02] font-bold text-sm uppercase tracking-wider mb-1">Téléphones</p>
<p className="text-white/70">
<a href="tel:+221770482193" className="hover:text-[#febb02]">77 048 21 93</a><br/>
<a href="tel:+221771437125" className="hover:text-[#febb02]">77 143 71 25</a><br/>
<a href="tel:+221339532552" className="hover:text-[#febb02]">33 953 25 52</a> (Fixe)
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="text-3xl">⏰</div>
<div>
<p className="text-[#febb02] font-bold text-sm uppercase tracking-wider mb-1">Horaires</p>
<p className="text-white/70">Lundi — Samedi<br/>08h00 – 18h00</p>
</div>
</div>
<div className="flex items-center gap-3 bg-white/10 border border-[#febb02]/30 rounded-xl p-4">
<span className="text-3xl">🏆</span>
<div>
<p className="text-[#febb02] font-bold">Agence N°1 à Thiès</p>
<p className="text-sm text-white/60">+500 clients satisfaits</p>
</div>
</div>
<a
href="https://wa.me/221771437125"
className="btn-green block text-center"
target="_blank"
rel="noopener noreferrer"
>
💬 Discuter sur WhatsApp
</a>
</div>
</div>
{/* Form */}
<div className="card-modern">
<h3 className="text-2xl font-bold text-[#001A3A] mb-2">Demandez Votre Devis</h3>
<p className="text-gray-500 mb-6">Réponse garantie sous 24h. Gratuit, rapide, sans engagement.</p>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Nom Complet *</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="Ex : Moussa Diallo"
className="input-modern"
required
/>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Téléphone *</label>
<input
type="tel"
value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
placeholder="77 XXX XX XX"
className="input-modern"
required
/>
</div>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Service Souhaité *</label>
<select
value={formData.service}
onChange={(e) => setFormData({ ...formData, service: e.target.value })}
className="input-modern"
required
>
<option value="">Choisissez un service...</option>
<option value="Billet d'avion">✈️ Billet d'Avion</option>
<option value="Hôtel">🏨 Réservation Hôtel</option>
<option value="Visa Canada">🇨🇦 Visa Canada</option>
<option value="Visa USA">🇺🇸 Visa USA</option>
<option value="Visa Europe">🇪🇺 Visa Europe</option>
<option value="Hajj">🕋 Hajj</option>
<option value="Omra">🕌 Omra</option>
<option value="Assurance">🛡️ Assurance Voyage</option>
</select>
</div>
<div>
<label className="block text-sm font-bold text-[#001A3A] mb-2">Votre Message</label>
<textarea
value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
rows={5}
placeholder="Décrivez votre besoin : destination, dates, nombre de personnes..."
className="input-modern resize-none"
></textarea>
</div>
<button type="submit" className="w-full btn-navy text-lg py-4">
🚀 Envoyer ma Demande — C'est Gratuit
</button>
<p className="text-xs text-center text-gray-500">
🔒 Vos données restent confidentielles. Agence N°1 à Thiès.
</p>
</form>
</div>
</div>
</div>
</section>
);
};
const Footer: React.FC = () => {
return (
<footer className="bg-[#000b1a] text-white py-16 px-4">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
{/* Brand */}
<div>
<img
src="https://srvoyages.com/wp-content/uploads/2026/03/LOGO-SR-VOYAGES-2.png"
alt="SR VOYAGES"
className="h-10 mb-4 brightness-0 invert"
/>
<p className="text-white/50 text-sm leading-relaxed mb-4">
Votre partenaire de confiance pour explorer le monde en toute sérénité depuis Thiès.
Agence de Voyage N°1 dans la région.
</p>
<div className="inline-flex items-center gap-2 bg-white/10 border border-[#febb02]/30 rounded-lg px-3 py-2">
<span className="text-xl">🏆</span>
<div className="text-xs">
<p className="text-[#febb02] font-bold">N°1 Thiès</p>
<p className="text-white/50">+500 clients</p>
</div>
</div>
</div>
{/* Links */}
<div>
<h4 className="text-[#febb02] text-xs font-bold uppercase tracking-wider mb-4">Liens Rapides</h4>
<ul className="space-y-2">
{['Services', 'Réservations', 'Pourquoi Nous', 'Avis Clients', 'FAQ', 'Contact'].map((item) => (
<li key={item}>
<a href={`#${item.toLowerCase().replace(' ', '-')}`} className="text-white/50 text-sm hover:text-[#febb02] transition-colors">
{item}
</a>
</li>
))}
</ul>
</div>
{/* Contact */}
<div>
<h4 className="text-[#febb02] text-xs font-bold uppercase tracking-wider mb-4">Contact Direct</h4>
<ul className="space-y-3">
<li className="flex items-start gap-2">
<span className="text-white/50">📍</span>
<p className="text-white/50 text-sm">Av El Hadji Malick Sy<br/>Randouléne, Thiès, Sénégal</p>
</li>
<li className="flex items-start gap-2">
<span className="text-white/50">📞</span>
<p className="text-white/50 text-sm">
<a href="tel:+221771437125" className="hover:text-[#febb02]">+221 77 143 71 25</a><br/>
<a href="tel:+221770482193" className="hover:text-[#febb02]">+221 77 048 21 93</a>
</p>
</li>
<li className="flex items-start gap-2">
<span className="text-white/50">⏰</span>
<p className="text-white/50 text-sm">Lun – Sam : 08h00 – 18h00</p>
</li>
</ul>
</div>
</div>
<div className="border-t border-white/10 pt-8 text-center">
<p className="text-white/30 text-xs">
© 2026 SR VOYAGES THIÈS — Tous droits réservés. Agence de Voyage N°1 dans la région de Thiès.
</p>
</div>
</div>
</footer>
);
};
const FloatingWhatsApp: React.FC = () => {
return (
<a
href="https://wa.me/221771437125"
className="fixed bottom-6 right-6 bg-[#25D366] text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 font-bold animate-float hover:animate-none hover:scale-110 transition-all z-50"
target="_blank"
rel="noopener noreferrer"
>
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
</svg>
<span className="hidden sm:inline">WhatsApp</span>
</a>
);
};
const App: React.FC = () => {
return (
<div className="min-h-screen">
<Header />
<main>
<Hero />
<Reservations />
<Services />
<WhyUs />
<Testimonials />
<FAQ />
<Contact />
</main>
<Footer />
<FloatingWhatsApp />
</div>
);
};
export default App;