Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contactez-nous | Pizzeria Yummy Témara</title> | |
| <meta name="description" content="Contactez Pizzeria Yummy à Témara pour commander, réserver ou poser vos questions. Nous sommes situés au cœur de Témara et livrons dans toute la ville."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录feather-icons"></script> | |
| <style> | |
| .sticky-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="sticky-nav bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="text-2xl font-bold text-red-600">Pizzeria Yummy</a> | |
| <span class="hidden md:inline-block text-sm text-gray-500">Témara</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-gray-800 hover:text-red-600 font-medium">Accueil</a> | |
| <a href="menu.html" class="text-gray-800 hover:text-red-600 font-medium">Menu</a> | |
| <a href="about.html" class="text-gray-800 hover:text-red-600 font-medium">À propos</a> | |
| <a href="contact.html" class="text-red-600 font-medium">Contact</a> | |
| <a href="blog.html" class="text-gray-800 hover:text-red-600 font-medium">Blog</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-gray-800 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="index.html" class="block py-2 text-gray-800 hover:text-red-600">Accueil</a> | |
| <a href="menu.html" class="block py-2 text-gray-800 hover:text-red-600">Menu</a> | |
| <a href="about.html" class="block py-2 text-gray-800 hover:text-red-600">À propos</a> | |
| <a href="contact.html" class="block py-2 text-red-600">Contact</极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录a> | |
| <a href="blog.html" class="block py-2 text-gray-800 hover:text-red-600">Blog</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-red-600 text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Contactez-nous</h1> | |
| <p class="text-xl max-w-2xl mx-auto">Nous sommes à votre écoute pour toutes vos questions, commandes ou réservations à Témara.</p> | |
| </div> | |
| </section> | |
| <!-- Contact Info Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Address --> | |
| <div class="text-center" data-aos="fade-up"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="map-pin" class="text-red-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Notre adresse</h3> | |
| <p class="text-gray-600">123 Avenue Hassan II<br>Témara 12000, Maroc</p> | |
| </div> | |
| <!-- Phone --> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="phone" class="text-red-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Téléphone</h3> | |
| <p class="text-gray-600">+212 123 456 789</p> | |
| <p class="text-sm text-gray-500">Livraison et réservations</p> | |
| </div> | |
| <!-- Hours --> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="clock" class="text-red-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Horaires d'ouverture</h3> | |
| <p class="text-gray-600">Lundi - Dimanche<br>11h00 - 23h00</p> | |
| </div> | |
| </div> | |
| <!-- Contact Form & Map --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Contact Form --> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold mb-6">Envoyez-nous un message</h2> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> | |
| <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label> | |
| <select id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent" required> | |
| <option value="">Sélectionnez un sujet</option> | |
| <option value="commande">Commande</option> | |
| <option value="reservation">Réservation</option> | |
| <option value="question">Question</option> | |
| <option value="feedback">Retour d'expérience</option> | |
| <option value="other">Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Envoyer le message</button> | |
| </form> | |
| </div> | |
| <!-- Map & Additional Info --> | |
| <div data-aos="fade-left"> | |
| <h2 class="text-3xl font-bold mb-6">Retrouvez-nous à Témara</h2> | |
| <div class="bg-white p-4 rounded-lg shadow-md mb-8"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3307.041292423931!2d-6.9076!3d33.9236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录3!1m2!1s0x0%3A0x0!2zMzPCsDU1JzI1LjAiTiA2wrA1NCcyNy40Ilc!5e0!3m2!1sen!2sma!4v1620000000000!5m2!1sen!2sma" | |
| width="100%" | |
| height="300" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| class="rounded-lg" | |
| title="Localisation Pizzeria Yummy Témara"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4">Informations supplémentaires</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i data-feather="truck" class="text-red-600 w-5 h-5 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Service de livraison</h4> | |
| <p class="text-sm text-gray-600">Livraison gratuite à Témara pour les commandes de plus de 150 DH. Délai de livraison moyen: 30-45 minutes.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="credit-card" class="text-red-600 w-5 h-5 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Modes de paiement</h4> | |
| <p class="text-sm text-gray-600">Nous acceptons les paiements en espèces, par carte bancaire et via les applications de paiement mobile.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="users" class="text-red-600 w-5 h-5 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-medium mb-1">Réservations de groupe</h4> | |
| <p class="text-sm text-gray-600">Nous acceptons les réservations pour les groupes et événements. Contactez-nous à l'avance pour les groupes de plus de 8 personnes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Delivery Areas Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Zones de livraison à Témara</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <i data-feather="map" class="text-red-600 w-8 h-8 mx-auto mb-3"></i> | |
| <h3 class="font-bold mb-2">Centre-ville</h3> | |
| <p class="text-gray-600 text-sm">Livraison dans tout le centre-ville de Témara</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <i data-feather="map" class="text-red-600 w-8 h-8 mx-auto mb-3"></i> | |
| <h3 class="font-bold mb-2">Hay Riad</h3> | |
| <p class="text-gray-600 text-sm">Livraison dans le quartier Hay Riad</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <i data-feather="map" class="text-red-600 w-8 h-8 mx-auto mb-3"></i> | |
| <h3 class="font-bold mb-2">Al Irfane</h3> | |
| <p class="text-gray-600 text-sm">Livraison dans le quartier Al Irfane</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <i data-feather="map" class="text-red-600 w-8 h-8 mx-auto mb-3"></极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录i> | |
| <h3 class="font-bold mb-2">Sidi Yahya</h3> | |
| <p class="text-gray-600 text-sm">Livraison dans le quartier Sidi Yahya</p> | |
| </div> | |
| </div> | |
| <p class="text-center text-gray-600 mt-8">Nous livrons également dans les zones environnantes de Témara. Contactez-nous pour vérifier si nous livrons à votre adresse.</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Pizzeria Yummy</h3> | |
| <p class="text-gray-400">Les meilleures pizzas artisanales de Témara, préparées avec des ingrédients frais et beaucoup de passion.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Navigation</h4> | |
| <极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li> | |
| <li><a href="menu.html" class="text-gray-400 hover:text-white transition duration-300">Menu</a></li> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition duration-300">À propos</a></li> | |
| <li><a href="contact.html" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| <li><a href="blog.html" class="text极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2 mt-1"></i> | |
| <span>123 Avenue Hassan II, Témara 12000, Maroc</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-2"></i> | |
| <span>+212 123 456 789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="w-4 h-4 mr-2"></i> | |
| <span>contact@pizzeriayummy.ma</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录 class="font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space极速赛车开奖官网 极速赛车开奖直播 极速赛车开奖记录-x-4"> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center text-gray-400 hover:text-white transition duration-300"> | |
| <i data-feather="star" class="w-4 h-4 mr-2 text-yellow-400 fill-current"></i> | |
| Laissez un avis sur Google | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Pizzeria Yummy. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Politique de confidentialité</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| // Change icon | |
| const icon = this.querySelector('svg'); | |
| if (menu.classList.contains('hidden')) { | |
| feather.replace(); | |
| } else { | |
| icon.innerHTML = feather.icons.x.toSvg(); | |
| } | |
| }); | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |