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 (

{/* Announcement Bar */}

Agence N°1 — Thiès, Sénégal | ✈️ Devis Gratuit en 24h | 📞 77 143 71 25

{/* Navigation */}

); }; const Hero: React.FC = () => { return (

{/* Background Effects */}

Agence N°1 — Thiès, Sénégal

🏆 N°1 Agence de Voyage dans la région de Thiès

Réservez Vos Voyages
en Ligne

SR VOYAGES — Agence N°1 à Thiès — vous propose maintenant la réservation en ligne de billets d’avion et hôtels aux meilleurs tarifs. Visas, Hajj & Omra disponibles.

🚀 Réserver Maintenant 💬 WhatsApp

{/* Stats */}

{[ { 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) => (

{stat.value}

{stat.label}

))}

); }; const FlightBooking: React.FC = () => { const [search, setSearch] = useState({ 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 (

✈️

Réserver un Vol

Comparez les meilleurs prix via Google Travel

Départ setSearch({ …search, origin: e.target.value })} placeholder=”Ex: Dakar (DSS)” className=”input-modern” required />

Destination setSearch({ …search, destination: e.target.value })} placeholder=”Ex: Paris (CDG)” className=”input-modern” required />

Date de départ setSearch({ …search, departureDate: e.target.value })} className=”input-modern” required />

Date de retour (optionnel) setSearch({ …search, returnDate: e.target.value })} className=”input-modern” />

Passagers setSearch({ …search, passengers: parseInt(e.target.value) })} className=”input-modern” > {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => ( {num} {num === 1 ? ‘passager’ : ‘passagers’} ))}

Classe setSearch({ …search, class: e.target.value })} className=”input-modern” > Économique Premium Économique Affaires Première

🔍 Rechercher les Vols

Vous serez redirigé vers Google Travel pour voir les résultats

); }; const HotelBooking: React.FC = () => { const [search, setSearch] = useState({ 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 (

🏨

Réserver un Hôtel

Trouvez l’hébergement parfait via Google Travel

Destination setSearch({ …search, destination: e.target.value })} placeholder=”Ex: Paris, France” className=”input-modern” required />

Arrivée setSearch({ …search, checkIn: e.target.value })} className=”input-modern” required />

Départ setSearch({ …search, checkOut: e.target.value })} className=”input-modern” required />

Voyageurs setSearch({ …search, guests: parseInt(e.target.value) })} className=”input-modern” > {[1, 2, 3, 4, 5, 6].map((num) => ( {num} {num === 1 ? ‘voyageur’ : ‘voyageurs’} ))}

Chambres setSearch({ …search, rooms: parseInt(e.target.value) })} className=”input-modern” > {[1, 2, 3, 4, 5].map((num) => ( {num} {num === 1 ? ‘chambre’ : ‘chambres’} ))}

🔍 Rechercher les Hôtels

Vous serez redirigé vers Google Travel pour voir les résultats

); }; const Reservations: React.FC = () => { const [activeTab, setActiveTab] = useState<'flight' | 'hotel'>(‘flight’); return (

Réservations en Ligne

Réservez Vos Voyages Facilement

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.

{/* Tabs */}

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 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

{/* Booking Forms */}

{activeTab === ‘flight’ && (

)} {activeTab === ‘hotel’ && (

)} {/* Info Panel */}

🏆 Pourquoi Réserver avec Nous ?

{[ { 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) => (

{item.icon}

{item.title}

{item.desc}

))}

Besoin d’aide pour votre réservation ?

📞 Appeler 💬 WhatsApp

); }; 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 (

Nos Services

Solutions Complètes de Voyage

Des solutions complètes pour tous vos besoins de voyage, avec l’expertise de l’Agence N°1 de Thiès.

{services.map((service, index) => (

{service.icon}

{service.title}

{service.desc}

))}

); }; const WhyUs: React.FC = () => { return (

Notre Différence

Pourquoi Choisir SR VOYAGES ?

{[ { 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) => (

{item.icon}

{item.title}

{item.desc}

))}

{/* N°1 Showcase */}

🏆

Agence de Voyage N°1 dans la région de Thiès

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.

✓ +500 clients satisfaits · +10 ans d’expérience

); }; 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 (

Témoignages

Ils Nous Font Confiance

La satisfaction de nos +500 clients est notre meilleure carte de visite.

{testimonials.map((testimonial, index) => (

{[…Array(testimonial.rating)].map((_, i) => ( ★ ))}

“{testimonial.text}”

{testimonial.name.charAt(0)}

{testimonial.name}

{testimonial.location}

))}

); }; const FAQ: React.FC = () => { const [openIndex, setOpenIndex] = useState(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 (

FAQ

Questions Fréquentes

{faqs.map((faq, index) => (

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” > {faq.question} {openIndex === index ? ‘−’ : ‘+’} {openIndex === index && (

{faq.answer}

)}

))}

); }; 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 (

Contact

Prêt à Voyager ?

Devis gratuit et personnalisé. Réponse garantie sous 24h ouvrées.

{/* Info */}

Nos Coordonnées

📍

Adresse

Av El Hadji Malick Sy, Randouléne
Thiès, Sénégal

📞

Téléphones

77 048 21 93
77 143 71 25
33 953 25 52 (Fixe)

⏰

Horaires

Lundi — Samedi
08h00 – 18h00

🏆

Agence N°1 à Thiès

+500 clients satisfaits

💬 Discuter sur WhatsApp

{/* Form */}

Demandez Votre Devis

Réponse garantie sous 24h. Gratuit, rapide, sans engagement.

Nom Complet * setFormData({ …formData, name: e.target.value })} placeholder=”Ex : Moussa Diallo” className=”input-modern” required />

Téléphone * setFormData({ …formData, phone: e.target.value })} placeholder=”77 XXX XX XX” className=”input-modern” required />

Service Souhaité * setFormData({ …formData, service: e.target.value })} className=”input-modern” required > Choisissez un service… ✈️ Billet d’Avion 🏨 Réservation Hôtel 🇨🇦 Visa Canada 🇺🇸 Visa USA 🇪🇺 Visa Europe 🕋 Hajj 🕌 Omra 🛡️ Assurance Voyage

Votre Message setFormData({ …formData, message: e.target.value })} rows={5} placeholder=”Décrivez votre besoin : destination, dates, nombre de personnes…” className=”input-modern resize-none” >

🚀 Envoyer ma Demande — C’est Gratuit

🔒 Vos données restent confidentielles. Agence N°1 à Thiès.

); }; const Footer: React.FC = () => { return ( ); }; const FloatingWhatsApp: React.FC = () => { return ( WhatsApp ); }; const App: React.FC = () => { return (

); }; export default App;