-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patha-propos.html
More file actions
115 lines (108 loc) · 7.23 KB
/
Copy patha-propos.html
File metadata and controls
115 lines (108 loc) · 7.23 KB
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
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>À Propos de Nous — Huges Service</title>
<!-- ========== DEBUT Favicon (CHEMINS CORRIGÉS) ========== -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<!-- ========== FIN Favicon (CHEMINS CORRIGÉS) ========== -->
<meta name="description" content="Découvrez la mission et l'histoire de Huges Service, votre partenaire de livraison de confiance à Dakar." />
<meta name="theme-color" content="#386641" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
:root {
--huges-green: #386641;
--huges-orange: #F59E0B;
--huges-light-green: #6A994E;
--huges-light-gray: #F7F7F7;
}
</style>
</head>
<body class="antialiased bg-white text-gray-800 font-sans" x-data="{ mobileMenuOpen: false, legalModalOpen: false }">
<div class="min-h-screen flex flex-col">
<header class="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-gray-200">
<div class="max-w-7xl mx-auto px-6">
<div class="relative flex items-center justify-between h-16">
<a href="index.html" class="flex items-center gap-3" aria-label="Huges Service - Accueil">
<img src="https://i.postimg.cc/nz5CJRy6/Chat-GPT-Image-27-juil-2025-05-17-01.png" alt="Logo Huges Service" class="h-12 w-auto" />
<div>
<div class="text-lg font-bold text-gray-900">Huges Service</div>
<div class="text-xs text-gray-500 -mt-1">Livraison moto — Dakar</div>
</div>
</a>
<nav class="hidden md:flex items-center gap-6 text-sm font-medium text-gray-700">
<a href="index.html" class="hover:text-[var(--huges-green)] transition-colors">Accueil</a>
<a href="formules.html" class="hover:text-[var(--huges-green)] transition-colors">Formules</a>
<a href="a-propos.html" class="text-[var(--huges-green)] transition-colors">À Propos</a>
<a href="contact.html" class="hover:text-[var(--huges-green)] transition-colors">Contact</a>
<a href="formules.html" class="ml-4 inline-block bg-[var(--huges-orange)] hover:bg-amber-500 text-white px-5 py-2.5 rounded-lg shadow-sm font-semibold transition-transform hover:scale-105">
Voir les abonnements
</a>
</nav>
<div class="flex md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:bg-gray-100 focus:outline-none">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': mobileMenuOpen, 'inline-flex': !mobileMenuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
<path :class="{'hidden': !mobileMenuOpen, 'inline-flex': mobileMenuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div x-show="mobileMenuOpen" x-transition class="md:hidden">
<nav class="px-2 pt-2 pb-4 space-y-1 sm:px-3 text-center">
<a href="index.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Accueil</a>
<a href="formules.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Formules</a>
<a href="a-propos.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">À Propos</a>
<a href="contact.html" @click="mobileMenuOpen = false" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Contact</a>
<a href="formules.html" @click="mobileMenuOpen = false" class="mt-4 block w-full bg-[var(--huges-orange)] hover:bg-amber-500 text-white px-5 py-2.5 rounded-lg shadow-sm font-semibold">Voir les abonnements</a>
</nav>
</div>
</header>
<main>
<section class="bg-gray-50 py-20 lg:py-28">
<div class="max-w-4xl mx-auto px-6 text-center">
<h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900" data-aos="fade-down">
Notre mission : <span class="text-[var(--huges-green)]">simplifier la livraison à Dakar.</span>
</h1>
<p class="mt-6 text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
Huges Service est né d'un constat simple : les e-commerçants, restaurateurs et professionnels de Dakar perdaient un temps précieux et de l'argent à gérer leurs livraisons au coup par coup. Notre objectif est de leur offrir la sérénité grâce à un service de livraison par abonnement, fiable, rapide et économique. Nous croyons en la puissance du commerce local et nous sommes là pour le soutenir, une livraison à la fois.
</p>
</div>
</section>
<section class="py-20 lg:py-28">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div data-aos="fade-right">
<h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">L'humain au cœur de notre service</h2>
<p class="mt-4 text-gray-600">Notre équipe de livreurs n'est pas juste un groupe de chauffeurs, mais une communauté de professionnels formés et passionnés. Nous connaissons Dakar comme notre poche et nous nous engageons à traiter chaque colis avec le plus grand soin, comme s'il s'agissait du nôtre. La confiance que vous nous accordez est notre plus grande motivation.</p>
</div>
<div class="grid grid-cols-2 gap-4" data-aos="fade-left" data-aos-delay="200">
<img class="rounded-lg shadow-md aspect-[4/5] object-cover" src="Images/a-propos.png" alt="Livreur souriant">
<img class="rounded-lg shadow-md aspect-[4/5] object-cover mt-8" src="Images/Equipe.png" alt="Un autre membre de l'équipe">
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-white">
<!-- ... (Le footer reste identique) ... -->
</footer>
</div>
<!-- ... (Le modal reste identique) ... -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true,
});
</script>
</body>
</html>