Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pizzeria à Témara | Pizzeria Yummy</title> | |
| <meta name="description" content="Découvrez les meilleures pizzas artisanales à Témara. Pizzeria Yummy vous propose des pizzas fraîches préparées avec des ingrédients de qualité dans une ambiance conviviale."> | |
| <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> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://static.photos/food/1200x630/1'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .menu-category:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .sticky-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| </style> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "Restaurant", | |
| "name": "Pizzeria Yummy", | |
| "image": "http://static.photos/food/1200x630/1", | |
| "@id": "", | |
| "url": "https://www.pizzeriayummy.ma", | |
| "telephone": "+212 123 456 789", | |
| "priceRange": "$$", | |
| "address": { | |
| "@type": "PostalAddress", | |
| "streetAddress": "123 Avenue Hassan II", | |
| "addressLocality": "Témara", | |
| "addressRegion": "Rabat-Salé-Kénitra", | |
| "postalCode": "12000", | |
| "addressCountry": "MA" | |
| }, | |
| "geo": { | |
| "@type": "GeoCoordinates", | |
| "latitude": 33.9236, | |
| "longitude": -6.9076 | |
| }, | |
| "openingHoursSpecification": { | |
| "@type": "OpeningHoursSpecification", | |
| "dayOfWeek": [ | |
| "Monday", | |
| "Tuesday", | |
| "Wednesday", | |
| "Thursday", | |
| "Friday", | |
| "Saturday", | |
| "Sunday" | |
| ], | |
| "opens": "11:00", | |
| "closes": "23:00" | |
| }, | |
| "servesCuisine": "Italian", | |
| "hasMenu": "https://www.pizzeriayummy.ma/menu" | |
| } | |
| </script> | |
| </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-gray-800 hover: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-gray-800 hover: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="hero-image h-96 flex items-center justify-center text-center text-white"> | |
| <div class="px-4" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Les meilleures pizzas de Témara</h1> | |
| <p class="text-xl mb-8">Pâte fraîche, ingrédients de qualité et amour dans chaque bouchée</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="menu.html" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Voir notre menu</a> | |
| <a href="contact.html" class="bg-white hover:bg-gray-100 text-red-600 font-bold py-3 px-6 rounded-lg transition duration-300">Commander maintenant</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Categories Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Nos spécialités à Témara</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Pizza Category --> | |
| <a href="pizzas.html" class="menu-category bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="http://static.photos/food/640x360/2" alt="Pizzas Yummy Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Pizzas</h3> | |
| <p class="text-gray-600">Découvrez nos pizzas artisanales préparées avec des ingrédients frais et une pâte maison.</p> | |
| </div> | |
| </a> | |
| <!-- Pasta Category --> | |
| <a href="pates.html" class="menu-category bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="http://static.photos/food/640x360/3" alt="Pâtes italiennes Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Pâtes</h3> | |
| <p class="text-gray-600">Nos délicieuses pâtes préparées selon les recettes traditionnelles italiennes.</p> | |
| </div> | |
| </a> | |
| <!-- Desserts Category --> | |
| <a href="desserts.html" class="menu-category bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="http://static.photos/food/640x360/4" alt="Desserts maison Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Desserts</h3> | |
| <p class="text-gray-600">Terminez votre repas avec nos desserts faits maison qui raviront vos papilles.</p> | |
| </div> | |
| </a> | |
| <!-- Boissons Category --> | |
| <a href="boissons.html" class="menu-category bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <img src="http://static.photos/food/640x360/5" alt="Boissons fraîches Témara" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Boissons</h3> | |
| <p class="text-gray-600">Une sélection de boissons fraîches pour accompagner parfaitement votre repas.</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8" data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold mb-4">Notre histoire à Témara</h2> | |
| <p class="text-gray-600 mb-4">Fondée en 2010, Pizzeria Yummy est devenue une institution culinaire à Témara, appréciée pour ses pizzas artisanales préparées avec passion.</p> | |
| <p class="text-gray-600 mb-6">Nous nous engageons à utiliser des ingrédients frais et locaux chaque fois que possible, soutenant ainsi les producteurs de la région de Témara.</p> | |
| <a href="about.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">En savoir plus</a> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <img src="http://static.photos/restaurant/640x360/1" alt="Intérieur Pizzeria Yummy Témara" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos clients à Témara</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 flex"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"La meilleure pizza de Témara ! Les ingrédients sont toujours frais et le service est impeccable. Notre adresse préférée pour les soirées pizza en famille."</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Karim B.</h4> | |
| <p class="text-sm text-gray-500">Habitant de Témara</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 flex"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"Je commande régulièrement chez Pizzeria Yummy depuis mon bureau à Témara. Livraison rapide et pizzas toujours délicieuses. Leur pizza margherita est exceptionnelle!"</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Amina S.</h4> | |
| <p class="text-sm text-gray-500">Cliente régulière</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 flex"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"Ambiance chaleureuse et pizzas faites avec amour. Nous venons chaque vendredi soir avec des amis. Un incontournable de Témara!"</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Mehdi L.</h4> | |
| <p class="text-sm text-gray-500">Habitant de Hay Riad</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Google Maps Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Retrouvez-nous à Témara</h2> | |
| <div class="bg-white p-4 rounded-lg shadow-md"> | |
| <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!3m3!1m2!1s0x0%3A0x0!2zMzPCsDU1JzI1LjAiTiA2wrA1NCcyNy40Ilc!5e0!3m2!1sen!2sma!4v1620000000000!5m2!1sen!2sma" | |
| width="100%" | |
| height="450" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| class="rounded-lg" | |
| title="Localisation Pizzeria Yummy Témara"> | |
| </iframe> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i data-feather="map-pin" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Adresse</h3> | |
| <p class="text-gray-600">123 Avenue Hassan II, Témara 12000, Maroc</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i data-feather="phone" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Téléphone</h3> | |
| <p class="text-gray-600">+212 123 456 789</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i data-feather="clock" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Horaires</h3> | |
| <p class="text-gray-600">Lundi - Dimanche: 11h - 23h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Preview Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Actualités de Témara</h2> | |
| <a href="blog.html" class="text-red-600 hover:text-red-700 font-medium flex items-center"> | |
| Voir tous les articles <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <a href="blog/nouvelle-pizza.html" class="group"> | |
| <div class="overflow-hidden rounded-lg mb-4"> | |
| <img src="http://static.photos/food/640x360/6" alt="Nouvelle pizza saisonnière Témara" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| </div> | |
| <span class="inline-block bg-red-100 text-red-600 text-xs px-2 py-1 rounded mb-2">Nouveauté</span> | |
| <h3 class="text-xl font-bold mb-2 group-hover:text-red-600 transition duration-300">Notre nouvelle pizza saisonnière</h3> | |
| <p class="text-gray-600 mb-2">Découvrez notre création exclusive inspirée des saveurs locales de Témara.</p> | |
| <span class="text-sm text-gray-500">15 juin 2023</span> | |
| </a> | |
| <!-- Blog Post 2 --> | |
| <a href="blog/evenement-temara.html" class="group"> | |
| <div class="overflow-hidden rounded-lg mb-4"> | |
| <img src="http://static.photos/cityscape/640x360/1" alt="Participation événement Témara" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| </div> | |
| <span class="inline-block bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded mb-2">Événement</span> | |
| <h3 class="text-xl font-bold mb-2 group-hover:text-red-600 transition duration-300">Participation au festival culinaire de Témara</h3> | |
| <p class="text-gray-600 mb-2">Retour sur notre participation au grand événement gastronomique de la ville.</p> | |
| <span class="text-sm text-gray-500">2 juin 2023</span> | |
| </a> | |
| <!-- Blog Post 3 --> | |
| <a href="blog/ingredients-locaux.html" class="group"> | |
| <div class="overflow-hidden rounded-lg mb-4"> | |
| <img src="http://static.photos/agriculture/640x360/1" alt="Producteurs locaux Témara" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300"> | |
| </div> | |
| <span class="inline-block bg-green-100 text-green-600 text-xs px-2 py-1 rounded mb-2">Engagement</span> | |
| <h3 class="text-xl font-bold mb-2 group-hover:text-red-600 transition duration-300">Nos engagements envers les producteurs locaux</h3> | |
| <p class="text-gray-600 mb-2">Comment nous soutenons l'agriculture locale dans la région de Témara.</p> | |
| <span class="text-sm text-gray-500">20 mai 2023</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-red-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Restez informé</h2> | |
| <p class="max-w-2xl mx-auto mb-8">Abonnez-vous à notre newsletter pour recevoir nos offres spéciales et actualités à Témara.</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-gray-800 hover:bg-black text-white px-6 py-3 rounded-r-lg font-medium transition duration-300">S'abonner</button> | |
| </form> | |
| </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> | |