File size: 15,335 Bytes
5064c23 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIX Multi-Services - Artisan local polyvalent</title>
<meta name="description" content="Artisan local à La Rouquette (12200) spécialisé en dépannage, bricolage, aménagement extérieur et travaux intérieurs. Service sur 30km autour de La Rouquette.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#f59e0b',
},
secondary: {
500: '#3b82f6',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<!-- Navigation Component -->
<custom-nav></custom-nav>
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-primary-500 to-amber-600 text-white py-20 px-4">
<div class="container mx-auto max-w-6xl text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Votre artisan polyvalent à La Rouquette</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Dépannage, bricolage, aménagement extérieur et travaux intérieurs - Un service complet et professionnel dans un rayon de 30km</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="tel:+33612345678" class="bg-white text-primary-500 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-lg shadow-lg transition-all hover:shadow-xl">
<i data-feather="phone" class="inline mr-2"></i> Appelez-nous
</a>
<a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-500 px-6 py-3 rounded-lg font-semibold text-lg transition-all">
<i data-feather="mail" class="inline mr-2"></i> Devis gratuit
</a>
</div>
</div>
</section>
<!-- Services Preview -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Nos Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow">
<div class="text-primary-500 mb-4">
<i data-feather="tool" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2 dark:text-white">Dépannage & Bricolage</h3>
<p class="text-gray-600 dark:text-gray-300">Interventions rapides pour vos urgences domestiques et petits travaux.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow">
<div class="text-primary-500 mb-4">
<i data-feather="home" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2 dark:text-white">Aménagement Extérieur</h3>
<p class="text-gray-600 dark:text-gray-300">Clôtures, terrasses et tous vos projets d'extérieur.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow">
<div class="text-primary-500 mb-4">
<i data-feather="layers" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2 dark:text-white">Travaux de Mini-Pelle</h3>
<p class="text-gray-600 dark:text-gray-300">Préparation de terrain, tranchées et autres travaux nécessitant une mini-pelle.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow">
<div class="text-primary-500 mb-4">
<i data-feather="edit-3" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold mb-2 dark:text-white">Travaux Intérieurs</h3>
<p class="text-gray-600 dark:text-gray-300">Pose de cuisine, finitions et rénovation intérieure.</p>
</div>
</div>
</div>
</section>
<!-- Local Presence -->
<section class="py-16 px-4 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto max-w-6xl">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6 dark:text-white">Un artisan local à votre service</h2>
<p class="text-lg mb-6 text-gray-700 dark:text-gray-300">Basé à La Rouquette (12200), je me déplace dans un rayon de 30km pour vous apporter mon expertise et mon savoir-faire.</p>
<div class="flex items-center gap-4 mb-4">
<i data-feather="map-pin" class="text-primary-500"></i>
<span class="dark:text-white">La Rouquette et ses alentours</span>
</div>
<div class="flex items-center gap-4 mb-4">
<i data-feather="clock" class="text-primary-500"></i>
<span class="dark:text-white">Interventions rapides</span>
</div>
<div class="flex items-center gap-4">
<i data-feather="award" class="text-primary-500"></i>
<span class="dark:text-white">Professionnel qualifié</span>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-lg">
<img src="http://static.photos/construction/640x360/1" alt="Zone d'intervention TIX Multi-Services" class="w-full h-auto rounded-lg">
</div>
</div>
</div>
</div>
</section>
<!-- Projects Preview -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Nos Réalisations</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-lg transition-all">
<img src="http://static.photos/construction/640x360/2" alt="Projet d'aménagement extérieur" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
<h3 class="text-white text-xl font-semibold">Clôture sur mesure</h3>
</div>
</div>
<div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-lg transition-all">
<img src="http://static.photos/construction/640x360/3" alt="Projet de rénovation intérieure" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
<h3 class="text-white text-xl font-semibold">Pose de cuisine</h3>
</div>
</div>
<div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-lg transition-all">
<img src="http://static.photos/construction/640x360/4" alt="Travaux de mini-pelle" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
<h3 class="text-white text-xl font-semibold">Préparation de terrain</h3>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="realisations.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-500 hover:bg-primary-600">
Voir toutes nos réalisations
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 px-4 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Ce que disent nos clients</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<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-700 dark:text-gray-300 mb-4">"Intervention rapide et professionnelle pour réparer ma porte de garage. Je recommande vivement TIX Multi-Services!"</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="http://static.photos/people/100x100/1" alt="Client satisfait" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold dark:text-white">Marie D.</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">La Rouquette</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<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-700 dark:text-gray-300 mb-4">"Excellent travail pour l'installation de ma clôture. Respect des délais et du budget. À refaire sans hésiter!"</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="http://static.photos/people/100x100/2" alt="Client satisfait" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold dark:text-white">Pierre L.</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">Saint-Igest</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<div class="text-amber-400 mr-2">
<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-700 dark:text-gray-300 mb-4">"Très satisfait de la rénovation de ma salle de bain. Professionnel, propre et à l'écoute de mes besoins."</p>
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-300 mr-3 overflow-hidden">
<img src="http://static.photos/people/100x100/3" alt="Client satisfait" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold dark:text-white">Sophie R.</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">Villefranche-de-Rouergue</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 px-4 bg-primary-500 text-white">
<div class="container mx-auto max-w-6xl text-center">
<h2 class="text-3xl font-bold mb-6">Prêt à concrétiser votre projet?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Contactez-nous dès aujourd'hui pour un devis gratuit et sans engagement.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="tel:+33612345678" class="bg-white text-primary-500 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-lg shadow-lg transition-all hover:shadow-xl">
<i data-feather="phone" class="inline mr-2"></i> 06 12 34 56 78
</a>
<a href="contact.html" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-500 px-6 py-3 rounded-lg font-semibold text-lg transition-all">
<i data-feather="mail" class="inline mr-2"></i> Demander un devis
</a>
</div>
</div>
</section>
<!-- Footer Component -->
<custom-footer></custom-footer>
<script src="components/nav.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |