Spaces:
Running
Running
on ne voit pas bien le sous titre du hero :Caraibes Froid offre des solutions de location flexibles et fiables pour les professionnels, avec une flotte moderne et un service client dédié.
Browse files- README.md +9 -5
- index.html +318 -19
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: yellow
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
index.html
CHANGED
|
@@ -1,19 +1,318 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en"><head>
|
| 3 |
+
<meta charset="utf-8"/>
|
| 4 |
+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
| 5 |
+
<title>Caraibes Froid - Location de véhicules frigorifiques</title>
|
| 6 |
+
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
| 7 |
+
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;700;800&display=swap" rel="stylesheet"/>
|
| 9 |
+
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
| 10 |
+
<script>
|
| 11 |
+
tailwind.config = {
|
| 12 |
+
darkMode: "class",
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
"primary": "#003366",
|
| 17 |
+
"secondary": "#66CCFF",
|
| 18 |
+
"background-light": "#f6f7f8",
|
| 19 |
+
"background-dark": "#101a22",
|
| 20 |
+
"foreground-light": "#0d151b",
|
| 21 |
+
"foreground-dark": "#f6f7f8",
|
| 22 |
+
"subtle-light": "#e7eef3",
|
| 23 |
+
"subtle-dark": "#1a2833",
|
| 24 |
+
"muted-light": "#4c759a",
|
| 25 |
+
"muted-dark": "#a1b2c1",
|
| 26 |
+
},
|
| 27 |
+
fontFamily: {
|
| 28 |
+
"display": ["Exo 2", "sans-serif"]
|
| 29 |
+
},
|
| 30 |
+
borderRadius: {
|
| 31 |
+
"DEFAULT": "0.5rem",
|
| 32 |
+
"lg": "0.75rem",
|
| 33 |
+
"xl": "1rem",
|
| 34 |
+
"full": "9999px"
|
| 35 |
+
},
|
| 36 |
+
},
|
| 37 |
+
},
|
| 38 |
+
}
|
| 39 |
+
</script>
|
| 40 |
+
<style>
|
| 41 |
+
.icon {
|
| 42 |
+
width: 1.5rem;
|
| 43 |
+
height: 1.5rem;
|
| 44 |
+
}
|
| 45 |
+
.thin-icon {
|
| 46 |
+
stroke-width: 1;
|
| 47 |
+
}
|
| 48 |
+
</style>
|
| 49 |
+
</head>
|
| 50 |
+
<body class="bg-background-light dark:bg-background-dark font-display text-foreground-light dark:text-foreground-dark">
|
| 51 |
+
<div class="relative min-h-screen w-full">
|
| 52 |
+
<header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm">
|
| 53 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 54 |
+
<div class="flex h-20 items-center justify-between">
|
| 55 |
+
<div class="flex items-center gap-3">
|
| 56 |
+
<div class="flex-shrink-0">
|
| 57 |
+
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
| 58 |
+
<path d="M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z" fill="#66CCFF" stroke="#003366" stroke-linejoin="round" stroke-width="2"></path>
|
| 59 |
+
</svg>
|
| 60 |
+
</div>
|
| 61 |
+
<h1 class="text-2xl font-bold tracking-tight text-primary">Caraibes Froid</h1>
|
| 62 |
+
</div>
|
| 63 |
+
<nav class="hidden lg:flex items-center gap-8">
|
| 64 |
+
<a class="text-sm font-medium hover:text-secondary transition-colors" href="#">Accueil</a>
|
| 65 |
+
<a class="text-sm font-medium hover:text-secondary transition-colors" href="#">Flotte</a>
|
| 66 |
+
<a class="text-sm font-medium hover:text-secondary transition-colors" href="#">Services</a>
|
| 67 |
+
<a class="text-sm font-medium hover:text-secondary transition-colors" href="#">Assistance</a>
|
| 68 |
+
<a class="text-sm font-medium hover:text-secondary transition-colors" href="#">Contact</a>
|
| 69 |
+
</nav>
|
| 70 |
+
<div class="hidden lg:flex items-center gap-4">
|
| 71 |
+
<button class="rounded-full border border-primary px-6 py-2.5 text-sm font-semibold text-primary hover:bg-primary/10 transition-colors">
|
| 72 |
+
Mon compte
|
| 73 |
+
</button>
|
| 74 |
+
<button class="rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary/90 transition-colors">
|
| 75 |
+
Réserver
|
| 76 |
+
</button>
|
| 77 |
+
</div>
|
| 78 |
+
<button class="lg:hidden p-2">
|
| 79 |
+
<svg class="h-6 w-6 thin-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
| 80 |
+
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
| 81 |
+
</svg>
|
| 82 |
+
</button>
|
| 83 |
+
</div>
|
| 84 |
+
</div>
|
| 85 |
+
</header>
|
| 86 |
+
<main>
|
| 87 |
+
<section class="relative">
|
| 88 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
|
| 89 |
+
<div class="h-[60vh] min-h-[500px] max-h-[700px] bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB6SxiMGUY89HDgYln2uUle-armbAA4fPzrBGq47WCyIPoP_biUSejhV59zixAue_B61b3cPUmSyQgG3Iw83ImFvLcrK6sVn0YxFeozaCX-ctOYgY8Rpgl_Y6tQ93Tlk_cv1Yqagzyg75Qg65qAh8LTqCXLybhi8EDkD5TIRTo-cA_3Pij9QZNhbih7OnwygsVmg4RwaRJnWVuzRJP4LPgH8pM_JhQHwpc2iTTwDzIN5REWB8az0eyARMfFrZJm9Ultc-EtjzPyUekL"); background-position: center 70%;'></div>
|
| 90 |
+
<div class="absolute inset-0 flex items-end">
|
| 91 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8 pb-16 text-white text-center md:text-left">
|
| 92 |
+
<div class="max-w-3xl">
|
| 93 |
+
<h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight">Votre partenaire de confiance pour la location de véhicules frigorifiques</h2>
|
| 94 |
+
<p class="mt-4 max-w-2xl mx-auto md:mx-0 text-lg text-white/90">Caraibes Froid offre des solutions de location flexibles et fiables pour les professionnels, avec une flotte moderne et un service client dédié.</p>
|
| 95 |
+
<div class="mt-8">
|
| 96 |
+
<button class="rounded-full bg-secondary px-8 py-3 text-base font-semibold text-primary shadow-lg hover:bg-secondary/90 transition-colors">Découvrir notre flotte</button>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</section>
|
| 102 |
+
<section class="bg-background-light dark:bg-background-dark py-16 sm:py-24">
|
| 103 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 104 |
+
<div class="max-w-4xl mx-auto bg-white dark:bg-subtle-dark p-6 sm:p-8 rounded-xl shadow-lg -mt-32 relative z-10 border border-gray-200">
|
| 105 |
+
<h3 class="text-xl font-bold mb-4 text-center text-primary">Trouvez le véhicule adapté à vos besoins</h3>
|
| 106 |
+
<div class="relative">
|
| 107 |
+
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
|
| 108 |
+
<svg aria-hidden="true" class="h-5 w-5 text-muted-light dark:text-muted-dark thin-icon" fill="currentColor" viewBox="0 0 20 20">
|
| 109 |
+
<path clip-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" fill-rule="evenodd"></path>
|
| 110 |
+
</svg>
|
| 111 |
+
</div>
|
| 112 |
+
<input class="w-full rounded-full border-gray-300 bg-background-light dark:bg-background-dark py-3.5 pl-11 pr-4 text-foreground-light dark:text-foreground-dark placeholder:text-muted-light placeholder:dark:text-muted-dark focus:ring-2 focus:ring-inset focus:ring-secondary" placeholder="Rechercher par type, capacité ou mot-clé..." type="text"/>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="mt-20 text-center">
|
| 116 |
+
<h2 class="text-3xl font-bold tracking-tight text-primary sm:text-4xl">Nos engagements pour votre satisfaction</h2>
|
| 117 |
+
<p class="mt-4 text-lg text-muted-light dark:text-muted-dark max-w-3xl mx-auto">Qualité, fiabilité et service client irréprochable sont au coeur de notre métier.</p>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="mt-16 grid gap-8 md:grid-cols-3">
|
| 120 |
+
<div class="flex flex-col items-center text-center p-6 bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 121 |
+
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/20 text-primary">
|
| 122 |
+
<svg class="h-6 w-6 icon thin-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
| 123 |
+
<path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
| 124 |
+
</svg>
|
| 125 |
+
</div>
|
| 126 |
+
<h3 class="mt-5 text-lg font-semibold text-primary">Expertise certifiée</h3>
|
| 127 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Agent agréé Carrier Transicold et certification ATP pour une chaîne du froid maîtrisée.</p>
|
| 128 |
+
</div>
|
| 129 |
+
<div class="flex flex-col items-center text-center p-6 bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 130 |
+
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/20 text-primary">
|
| 131 |
+
<svg class="h-6 w-6 icon thin-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
| 132 |
+
<path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
| 133 |
+
</svg>
|
| 134 |
+
</div>
|
| 135 |
+
<h3 class="mt-5 text-lg font-semibold text-primary">Assistance 24/7</h3>
|
| 136 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Une équipe dédiée disponible à tout moment pour répondre à vos urgences.</p>
|
| 137 |
+
</div>
|
| 138 |
+
<div class="flex flex-col items-center text-center p-6 bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 139 |
+
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/20 text-primary">
|
| 140 |
+
<svg class="h-6 w-6 icon thin-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
| 141 |
+
<path d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.125-.504 1.125-1.125V14.25m-17.25 4.5v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5c0-.621.504-1.125 1.125-1.125H6.75" stroke-linecap="round" stroke-linejoin="round"></path>
|
| 142 |
+
</svg>
|
| 143 |
+
</div>
|
| 144 |
+
<h3 class="mt-5 text-lg font-semibold text-primary">Flotte récente</h3>
|
| 145 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Des véhicules modernes et performants, équipés des dernières technologies.</p>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</section>
|
| 150 |
+
<section class="bg-subtle-light dark:bg-subtle-dark py-16 sm:py-24">
|
| 151 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 152 |
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
| 153 |
+
<div class="order-2 md:order-1">
|
| 154 |
+
<h2 class="text-3xl font-bold tracking-tight text-primary sm:text-4xl">La robustesse au service de vos livraisons</h2>
|
| 155 |
+
<p class="mt-4 text-lg text-muted-light dark:text-muted-dark">Nos camions frigorifiques sont conçus pour les conditions les plus exigeantes. Qu'il s'agisse de charger des palettes de produits frais ou de denrées surgelées, leur fiabilité est à toute épreuve.</p>
|
| 156 |
+
<div class="mt-6">
|
| 157 |
+
<a class="font-semibold text-primary hover:text-secondary transition-colors" href="#">Voir nos camions porteurs →</a>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="order-1 md:order-2 rounded-xl overflow-hidden shadow-lg">
|
| 161 |
+
<img alt="Camion frigorifique en cours de chargement" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFU_b3o4-0g6_X5h6L9o_eY3p5f5e_u_o_y_k_c_h_z_k_q_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_z"/>
|
| 162 |
+
</div>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
</section>
|
| 166 |
+
<section class="bg-background-light dark:bg-background-dark py-16 sm:py-24">
|
| 167 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 168 |
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
| 169 |
+
<div class="rounded-xl overflow-hidden shadow-lg">
|
| 170 |
+
<img alt="Fourgon frigorifique prêt pour une livraison en ville" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9E_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U_G_W_C_U"/>
|
| 171 |
+
</div>
|
| 172 |
+
<div>
|
| 173 |
+
<h2 class="text-3xl font-bold tracking-tight text-primary sm:text-4xl">Agilité et performance pour vos tournées</h2>
|
| 174 |
+
<p class="mt-4 text-lg text-muted-light dark:text-muted-dark">Nos fourgons et véhicules utilitaires sont parfaits pour la distribution en milieu urbain. Leurs portes latérales facilitent les chargements et déchargements rapides, optimisant vos opérations quotidiennes.</p>
|
| 175 |
+
<div class="mt-6">
|
| 176 |
+
<a class="font-semibold text-primary hover:text-secondary transition-colors" href="#">Explorer nos utilitaires →</a>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
</div>
|
| 181 |
+
</section>
|
| 182 |
+
<section class="bg-subtle-light dark:bg-subtle-dark py-16 sm:py-24">
|
| 183 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 184 |
+
<div class="text-center">
|
| 185 |
+
<h2 class="text-3xl font-bold tracking-tight text-primary sm:text-4xl">Découvrez nos catégories de véhicules</h2>
|
| 186 |
+
<p class="mt-4 text-lg text-muted-light dark:text-muted-dark max-w-2xl mx-auto">Des solutions pour chaque besoin, du petit utilitaire au semi-remorque.</p>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
| 189 |
+
<div class="group overflow-hidden rounded-xl bg-background-light dark:bg-background-dark shadow-md">
|
| 190 |
+
<div class="h-56 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB4zWGlX8evubolaodaUS-_r9fxnL_oc0EbIq4x_NJ6wFZjsiE6Iz0DykDiYKzEadi1AWcx4JRxFYJ-ENzjIrt--siLlBUVsccout4_XtpzRaG6R3EJ1MdSKs9i2YbewSHhZU8bU_XrdjImER358ciX2abpP_ZFWrQY46vDeBCbuli7Cr-RMR7dUWpv2cYsqAKeIuw6EdtuXxSHsTJH5BeHU15U7SpvsC-gCeCD2GQctP1k4It4DE1VOQm0kcVV9L2l5pY8A7HWU60y");'></div>
|
| 191 |
+
<div class="p-6">
|
| 192 |
+
<h3 class="text-lg font-semibold text-primary">Fourgons frigorifiques</h3>
|
| 193 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Idéal pour les livraisons urbaines et les petits volumes, agiles et performants.</p>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
<div class="group overflow-hidden rounded-xl bg-background-light dark:bg-background-dark shadow-md">
|
| 197 |
+
<div class="h-56 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBzkWbAH2Uc25JprLEylAGxDcIwbtu1aCtF3Ue1OfsV-MGE_H-_uT6yDuymvU_d24UDhXo5uulpPyvMsYiibF4KIQFPnp6b4xyMUBmRtLIW9zTPuUvyaNhhVhxo3BsrILUFHfa9ROfCMAezv9Ttbm0ROp8St6Xns_I-7lAFG3J485kzV1tTcAMmR41FiMoMCCUonJAHQqRIZqvhRINTWGTt1il4mwGcMsi0X4ijmHN_leU-i1YsBJVhesGLvmrpTWCDMrwpsIONue5p");'></div>
|
| 198 |
+
<div class="p-6">
|
| 199 |
+
<h3 class="text-lg font-semibold text-primary">Camions frigorifiques</h3>
|
| 200 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Adaptés aux transports de moyenne et longue distance, alliant capacité et fiabilité.</p>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
<div class="group overflow-hidden rounded-xl bg-background-light dark:bg-background-dark shadow-md">
|
| 204 |
+
<div class="h-56 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAEwnuEB77ODkbBMvspY6xrCTQ5vBGXeT2Fk39rPiGAOdxEQAPA3kUDHZa0qDRQq878bj-0rBAUxH6BHEt3Kzhs65qE097z0Bz7VYbpfPx-71PiuBuo09ntHkrxYbPzdECJkxFNjd-FqCch8zW_iX3XTAqNPV04IGOUQq9vj8-7H2XpeEakYf1Hy7SEhoQfoh61gyRk89oWMpqtRVUceymdwJBMxx0nck4JhTD10svBv7wq412dTHAWbyfeI1aydZXSp5QPZrUOErxQ");'></div>
|
| 205 |
+
<div class="p-6">
|
| 206 |
+
<h3 class="text-lg font-semibold text-primary">Semi-remorques frigorifiques</h3>
|
| 207 |
+
<p class="mt-2 text-sm text-muted-light dark:text-muted-dark">Pour les gros volumes et les transports inter-régionaux, la solution grande capacité.</p>
|
| 208 |
+
</div>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
</section>
|
| 213 |
+
<section class="bg-background-light dark:bg-background-dark py-16 sm:py-24">
|
| 214 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
| 215 |
+
<div class="text-center">
|
| 216 |
+
<h2 class="text-3xl font-bold tracking-tight text-primary sm:text-4xl">Foire Aux Questions</h2>
|
| 217 |
+
<p class="mt-4 text-lg text-muted-light dark:text-muted-dark max-w-2xl mx-auto">Trouvez les réponses à vos questions les plus fréquentes.</p>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="mt-12 max-w-3xl mx-auto">
|
| 220 |
+
<div class="space-y-4" x-data="{ open: 0 }">
|
| 221 |
+
<div class="bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 222 |
+
<button @click="open = open === 1 ? 0 : 1" class="flex w-full items-center justify-between p-6 text-left">
|
| 223 |
+
<span class="text-lg font-medium text-primary">Quelles sont les conditions de location ?</span>
|
| 224 |
+
<svg :class="{ 'rotate-180': open === 1 }" class="h-6 w-6 thin-icon text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 225 |
+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
|
| 226 |
+
</svg>
|
| 227 |
+
</button>
|
| 228 |
+
<div class="px-6 pb-6" x-show="open === 1">
|
| 229 |
+
<p class="text-muted-light dark:text-muted-dark">Pour louer un véhicule chez Caraibes Froid, vous devez être âgé d'au moins 21 ans, posséder un permis de conduire valide depuis plus de 2 ans et présenter un justificatif de domicile. Pour les locations professionnelles, un extrait Kbis de moins de 3 mois est également requis.</p>
|
| 230 |
+
</div>
|
| 231 |
+
</div>
|
| 232 |
+
<div class="bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 233 |
+
<button @click="open = open === 2 ? 0 : 2" class="flex w-full items-center justify-between p-6 text-left">
|
| 234 |
+
<span class="text-lg font-medium text-primary">Quelles assurances sont incluses ?</span>
|
| 235 |
+
<svg :class="{ 'rotate-180': open === 2 }" class="h-6 w-6 thin-icon text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 236 |
+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
|
| 237 |
+
</svg>
|
| 238 |
+
</button>
|
| 239 |
+
<div class="px-6 pb-6" x-show="open === 2">
|
| 240 |
+
<p class="text-muted-light dark:text-muted-dark">Toutes nos locations incluent une assurance responsabilité civile et une assurance dommages au véhicule avec une franchise. Des options de rachat de franchise partiel ou total sont disponibles pour plus de sérénité. Nous collaborons étroitement avec les compagnies d'assurance pour faciliter les démarches en cas de sinistre.</p>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 244 |
+
<button @click="open = open === 3 ? 0 : 3" class="flex w-full items-center justify-between p-6 text-left">
|
| 245 |
+
<span class="text-lg font-medium text-primary">Comment se déroule le processus de réservation ?</span>
|
| 246 |
+
<svg :class="{ 'rotate-180': open === 3 }" class="h-6 w-6 thin-icon text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 247 |
+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
|
| 248 |
+
</svg>
|
| 249 |
+
</button>
|
| 250 |
+
<div class="px-6 pb-6" x-show="open === 3">
|
| 251 |
+
<p class="text-muted-light dark:text-muted-dark">Vous pouvez réserver en ligne via notre site web en quelques clics, ou en nous contactant directement par téléphone. Choisissez vos dates, le type de véhicule souhaité, et validez votre réservation. Un acompte vous sera demandé pour confirmer la location.</p>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
<div class="bg-subtle-light dark:bg-subtle-dark rounded-xl">
|
| 255 |
+
<button @click="open = open === 4 ? 0 : 4" class="flex w-full items-center justify-between p-6 text-left">
|
| 256 |
+
<span class="text-lg font-medium text-primary">Proposez-vous des locations longue durée ?</span>
|
| 257 |
+
<svg :class="{ 'rotate-180': open === 4 }" class="h-6 w-6 thin-icon text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 258 |
+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
|
| 259 |
+
</svg>
|
| 260 |
+
</button>
|
| 261 |
+
<div class="px-6 pb-6" x-show="open === 4">
|
| 262 |
+
<p class="text-muted-light dark:text-muted-dark">Oui, nous sommes spécialisés dans les locations de moyenne et longue durée, particulièrement adaptées aux besoins des professionnels B2B. Nos contrats sont flexibles et incluent l'entretien du véhicule et l'assistance 24/7. Contactez-nous pour un devis personnalisé.</p>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
</div>
|
| 266 |
+
</div>
|
| 267 |
+
</div>
|
| 268 |
+
</section>
|
| 269 |
+
</main>
|
| 270 |
+
<footer class="bg-subtle-light dark:bg-subtle-dark">
|
| 271 |
+
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
| 272 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 273 |
+
<div class="col-span-1 md:col-span-2">
|
| 274 |
+
<div class="flex items-center gap-3">
|
| 275 |
+
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
| 276 |
+
<path d="M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z" fill="#66CCFF" stroke="#003366" stroke-linejoin="round" stroke-width="2"></path>
|
| 277 |
+
</svg>
|
| 278 |
+
<h2 class="text-2xl font-bold text-primary">Caraibes Froid</h2>
|
| 279 |
+
</div>
|
| 280 |
+
<p class="mt-4 text-sm text-muted-light dark:text-muted-dark max-w-xs">Le spécialiste de la location de véhicules frigorifiques en Martinique pour les professionnels.</p>
|
| 281 |
+
</div>
|
| 282 |
+
<div>
|
| 283 |
+
<h3 class="text-sm font-semibold uppercase tracking-wider text-foreground-light dark:text-foreground-dark">Navigation</h3>
|
| 284 |
+
<ul class="mt-4 space-y-3">
|
| 285 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Accueil</a></li>
|
| 286 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Flotte</a></li>
|
| 287 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Services</a></li>
|
| 288 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Contact</a></li>
|
| 289 |
+
</ul>
|
| 290 |
+
</div>
|
| 291 |
+
<div>
|
| 292 |
+
<h3 class="text-sm font-semibold uppercase tracking-wider text-foreground-light dark:text-foreground-dark">Légal</h3>
|
| 293 |
+
<ul class="mt-4 space-y-3">
|
| 294 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Mentions légales</a></li>
|
| 295 |
+
<li><a class="text-sm text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">Politique de confidentialité</a></li>
|
| 296 |
+
</ul>
|
| 297 |
+
</div>
|
| 298 |
+
</div>
|
| 299 |
+
<div class="mt-8 border-t border-muted-light/20 dark:border-muted-dark/20 pt-8 flex flex-col sm:flex-row items-center justify-between">
|
| 300 |
+
<p class="text-sm text-muted-light dark:text-muted-dark">© 2024 Caraibes Froid. Tous droits réservés.</p>
|
| 301 |
+
<div class="flex space-x-6 mt-4 sm:mt-0">
|
| 302 |
+
<a class="text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">
|
| 303 |
+
<svg aria-hidden="true" class="h-6 w-6 thin-icon" fill="currentColor" viewBox="0 0 24 24">
|
| 304 |
+
<path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd"></path>
|
| 305 |
+
</svg>
|
| 306 |
+
</a>
|
| 307 |
+
<a class="text-muted-light dark:text-muted-dark hover:text-secondary transition-colors" href="#">
|
| 308 |
+
<svg aria-hidden="true" class="h-6 w-6 thin-icon" fill="currentColor" viewBox="0 0 24 24">
|
| 309 |
+
<path clip-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.013-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049 1.064.218 1.791.465 2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.08 2.525c.636-.247 1.363-.416 2.427-.465C9.53 2.013 9.884 2 12.315 2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6zm5.25-8.25a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5z" fill-rule="evenodd"></path>
|
| 310 |
+
</svg>
|
| 311 |
+
</a>
|
| 312 |
+
</div>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
</footer>
|
| 316 |
+
</div>
|
| 317 |
+
<script defer="" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
| 318 |
+
</body></html>
|