Hugging Face's logo

Spaces:
LaCharpenterieDeMars
/
positiveplus
Running

App Files Community
LaCharpenterieDeMars commited on
Commit
f049f48
·
verified ·
1 Parent(s): 99f0c59

Crée un site pour mon entreprise "La Charpenterie De Mars" de Charpente, construction bois, couverture, zinguerie sur Toulouse. Le site sur font noir avec des couleur rouge et blanche, je voudrais que le logo ressemble à la planète mars simplifié. Tu récupère tout les texte et design sur mon site de vente https://positiveplus.fr/ - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +983 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Positiveplus
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: positiveplus
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,983 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Maison Positive Plus - L'habitat de demain, dès aujourd'hui</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-section {
18
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_Toulouse-Occitanie.avif');
19
+ background-size: cover;
20
+ background-position: center;
21
+ height: 100vh;
22
+ }
23
+
24
+ .floating-text {
25
+ animation: float 3s ease-in-out infinite;
26
+ }
27
+
28
+ @keyframes float {
29
+ 0% { transform: translateY(0px); }
30
+ 50% { transform: translateY(-15px); }
31
+ 100% { transform: translateY(0px); }
32
+ }
33
+
34
+ .testimonial-card {
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .testimonial-card:hover {
39
+ transform: translateY(-10px);
40
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
41
+ }
42
+
43
+ .house-card {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .house-card:hover {
48
+ transform: scale(1.03);
49
+ }
50
+
51
+ .timeline-item:not(:last-child)::after {
52
+ content: '';
53
+ position: absolute;
54
+ left: 50%;
55
+ bottom: -50px;
56
+ width: 2px;
57
+ height: 50px;
58
+ background-color: #3b82f6;
59
+ }
60
+
61
+ .cookie-consent {
62
+ transition: all 0.5s ease;
63
+ bottom: -100%;
64
+ }
65
+
66
+ .cookie-consent.active {
67
+ bottom: 0;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-50">
72
+ <!-- Cookie Consent Banner -->
73
+ <div id="cookieConsent" class="cookie-consent fixed left-0 right-0 bg-white shadow-lg p-4 md:p-6 z-50">
74
+ <div class="max-w-6xl mx-auto">
75
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
76
+ <div class="flex-1">
77
+ <div class="flex items-center gap-2 mb-2">
78
+ <img src="https://cdn-cookieyes.com/assets/images/revisit.svg" alt="Cookie" class="w-6 h-6">
79
+ <h3 class="font-semibold text-gray-800">Nous respectons votre vie privée.</h3>
80
+ </div>
81
+ <p class="text-gray-600 text-sm">
82
+ Nous utilisons des cookies pour améliorer votre expérience de navigation, diffuser des publicités ou des contenus personnalisés et analyser notre trafic. En cliquant sur « Tout accepter », vous consentez à notre utilisation des cookies.
83
+ </p>
84
+ </div>
85
+ <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
86
+ <button id="customizeCookies" class="px-4 py-2 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition">Personnaliser</button>
87
+ <button id="rejectAll" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-100 transition">Tout rejeter</button>
88
+ <button id="acceptAll" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Accepter tout</button>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Cookie Preferences Modal -->
93
+ <div id="cookiePreferences" class="hidden mt-6 pt-6 border-t border-gray-200">
94
+ <div class="flex justify-between items-center mb-4">
95
+ <h3 class="font-semibold text-lg text-gray-800">Personnaliser les préférences en matière de consentement</h3>
96
+ <button id="closePreferences" class="text-gray-500 hover:text-gray-700">
97
+ <img src="https://cdn-cookieyes.com/assets/images/close.svg" alt="Fermer" class="w-6 h-6">
98
+ </button>
99
+ </div>
100
+
101
+ <p class="text-gray-600 mb-6">
102
+ Nous utilisons des cookies pour vous aider à naviguer efficacement et à exécuter certaines fonctionnalités. Vous trouverez des informations détaillées sur tous les cookies sous chaque catégorie de consentement ci-dessous.
103
+ </p>
104
+
105
+ <div class="space-y-6">
106
+ <!-- Necessary Cookies -->
107
+ <div class="bg-gray-50 p-4 rounded-lg">
108
+ <div class="flex justify-between items-center mb-2">
109
+ <div>
110
+ <h4 class="font-semibold text-gray-800">Nécessaire</h4>
111
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Toujours actif</span>
112
+ </div>
113
+ </div>
114
+ <p class="text-gray-600 text-sm mb-3">
115
+ Les cookies nécessaires sont cruciaux pour les fonctions de base du site Web et celui-ci ne fonctionnera pas comme prévu sans eux. Ces cookies ne stockent aucune donnée personnellement identifiable.
116
+ </p>
117
+ <div class="space-y-2 text-sm">
118
+ <div>
119
+ <span class="font-medium">Cookie cookieyes-consent</span>
120
+ <p>Durée: 1 an</p>
121
+ <p>Description: CookieYes place ce témoin pour mémoriser les préférences des utilisateurs en matière de consentement afin que leurs préférences soient respectées lors des visites ultérieures de ce site. Il ne collecte ni ne stocke aucune information personnelle sur les visiteurs du site.</p>
122
+ </div>
123
+ <div>
124
+ <span class="font-medium">Cookie elementor</span>
125
+ <p>Durée: N'expire jamais</p>
126
+ <p>Description: Le thème WordPress du site Internet utilise ce témoin. Il permet au propriétaire du site Internet de mettre en œuvre ou de modifier le contenu du site Internet en temps réel.</p>
127
+ </div>
128
+ <div>
129
+ <span class="font-medium">Cookie wpEmojiSettingsSupports</span>
130
+ <p>Durée: session</p>
131
+ <p>Description: WordPress sets this cookie when a user interacts with emojis on a WordPress site. It helps determine if the user's browser can display emojis properly.</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Functional Cookies -->
137
+ <div class="bg-gray-50 p-4 rounded-lg">
138
+ <div class="flex justify-between items-center mb-2">
139
+ <h4 class="font-semibold text-gray-800">Fonctionnelle</h4>
140
+ <label class="relative inline-flex items-center cursor-pointer">
141
+ <input type="checkbox" class="sr-only peer">
142
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
143
+ </label>
144
+ </div>
145
+ <p class="text-gray-600 text-sm">
146
+ Les cookies fonctionnels permettent d'exécuter certaines fonctionnalités telles que le partage du contenu du site Web sur des plateformes de médias sociaux, la collecte de commentaires et d'autres fonctionnalités tierces.
147
+ </p>
148
+ <p class="text-gray-500 text-sm mt-2">Aucun cookie à afficher.</p>
149
+ </div>
150
+
151
+ <!-- Analytics Cookies -->
152
+ <div class="bg-gray-50 p-4 rounded-lg">
153
+ <div class="flex justify-between items-center mb-2">
154
+ <h4 class="font-semibold text-gray-800">Analytique</h4>
155
+ <label class="relative inline-flex items-center cursor-pointer">
156
+ <input type="checkbox" class="sr-only peer">
157
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
158
+ </label>
159
+ </div>
160
+ <p class="text-gray-600 text-sm">
161
+ Les cookies analytiques sont utilisés pour comprendre comment les visiteurs interagissent avec le site Web. Ces cookies aident à fournir des informations sur le nombre de visiteurs, le taux de rebond, la source de trafic, etc.
162
+ </p>
163
+ <p class="text-gray-500 text-sm mt-2">Aucun cookie à afficher.</p>
164
+ </div>
165
+
166
+ <!-- Performance Cookies -->
167
+ <div class="bg-gray-50 p-4 rounded-lg">
168
+ <div class="flex justify-between items-center mb-2">
169
+ <h4 class="font-semibold text-gray-800">Performance</h4>
170
+ <label class="relative inline-flex items-center cursor-pointer">
171
+ <input type="checkbox" class="sr-only peer">
172
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
173
+ </label>
174
+ </div>
175
+ <p class="text-gray-600 text-sm">
176
+ Les cookies de performance sont utilisés pour comprendre et analyser les indices de performance clés du site Web, ce qui permet de fournir une meilleure expérience utilisateur aux visiteurs.
177
+ </p>
178
+ <p class="text-gray-500 text-sm mt-2">Aucun cookie à afficher.</p>
179
+ </div>
180
+
181
+ <!-- Advertising Cookies -->
182
+ <div class="bg-gray-50 p-4 rounded-lg">
183
+ <div class="flex justify-between items-center mb-2">
184
+ <h4 class="font-semibold text-gray-800">Publicité</h4>
185
+ <label class="relative inline-flex items-center cursor-pointer">
186
+ <input type="checkbox" class="sr-only peer">
187
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
188
+ </label>
189
+ </div>
190
+ <p class="text-gray-600 text-sm">
191
+ Les cookies de publicité sont utilisés pour fournir aux visiteurs des publicités personnalisées basées sur les pages visitées précédemment et analyser l'efficacité de la campagne publicitaire.
192
+ </p>
193
+ <p class="text-gray-500 text-sm mt-2">Aucun cookie à afficher.</p>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="flex flex-col sm:flex-row justify-end gap-3 mt-6">
198
+ <button id="rejectAllPrefs" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-100 transition">Tout rejeter</button>
199
+ <button id="savePreferences" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Enregistrer mes préférences</button>
200
+ <button id="acceptAllPrefs" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">Accepter tout</button>
201
+ </div>
202
+
203
+ <div class="flex items-center justify-end mt-4">
204
+ <span class="text-xs text-gray-500 mr-2">Powered by</span>
205
+ <img src="https://cdn-cookieyes.com/assets/images/poweredbtcky.svg" alt="CookieYes" class="h-6">
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Header -->
212
+ <header class="bg-white shadow-sm sticky top-0 z-40">
213
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
214
+ <div class="flex justify-between items-center py-4">
215
+ <div class="flex items-center">
216
+ <a href="#" class="flex items-center">
217
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/logo-xl_la-charpenterie-de-mars-habitats-neufs_Toulouse-Occitanie.webp" alt="La Charpenterie de Mars" class="h-12 md:h-16">
218
+ </a>
219
+ </div>
220
+
221
+ <div class="hidden md:flex items-center space-x-8">
222
+ <a href="#maison-positive" class="text-gray-700 hover:text-blue-600 transition">Maison Positive</a>
223
+ <a href="#avantages" class="text-gray-700 hover:text-blue-600 transition">Avantages</a>
224
+ <a href="#modeles" class="text-gray-700 hover:text-blue-600 transition">Modèles</a>
225
+ <a href="#processus" class="text-gray-700 hover:text-blue-600 transition">Processus</a>
226
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
227
+ </div>
228
+
229
+ <div class="flex items-center space-x-4">
230
+ <a href="tel:0625554477" class="hidden md:flex items-center text-blue-600 hover:text-blue-800 transition">
231
+ <i class="fas fa-phone-alt mr-2"></i>
232
+ <span>06 25 55 44 77</span>
233
+ </a>
234
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
235
+ Contactez votre expert
236
+ </a>
237
+ <button class="md:hidden text-gray-700" id="mobileMenuButton">
238
+ <i class="fas fa-bars text-2xl"></i>
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Mobile Menu -->
245
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200 absolute w-full z-30">
246
+ <div class="px-4 py-3 space-y-3">
247
+ <a href="#maison-positive" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Maison Positive</a>
248
+ <a href="#avantages" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Avantages</a>
249
+ <a href="#modeles" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Modèles</a>
250
+ <a href="#processus" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Processus</a>
251
+ <a href="#contact" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Contact</a>
252
+ <a href="tel:0625554477" class="block px-3 py-2 bg-blue-600 text-white rounded-md text-center">
253
+ <i class="fas fa-phone-alt mr-2"></i> Appelez-nous
254
+ </a>
255
+ </div>
256
+ </div>
257
+ </header>
258
+
259
+ <!-- Hero Section -->
260
+ <section class="hero-section flex items-center justify-center text-white">
261
+ <div class="max-w-6xl mx-auto px-6 text-center">
262
+ <div class="floating-text">
263
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
264
+ <span class="block">L'habitat de demain,</span>
265
+ <span class="block">dès aujourd'hui</span>
266
+ </h1>
267
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
268
+ Des maisons économiques, autonomes, locales, extensibles, modulables et écologiques pour un avenir durable
269
+ </p>
270
+ <a href="#contact" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition duration-300">
271
+ Demandez votre devis gratuit
272
+ </a>
273
+ </div>
274
+ </div>
275
+ </section>
276
+
277
+ <!-- Features Section -->
278
+ <section id="avantages" class="py-16 bg-white">
279
+ <div class="max-w-6xl mx-auto px-6">
280
+ <div class="text-center mb-16">
281
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Pourquoi choisir une Maison Positive ?</h2>
282
+ <p class="text-gray-600 max-w-3xl mx-auto">
283
+ Découvrez les avantages de nos maisons écologiques et autonomes
284
+ </p>
285
+ </div>
286
+
287
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
288
+ <!-- Feature 1 -->
289
+ <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition">
290
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
291
+ <i class="fas fa-euro-sign text-blue-600 text-2xl"></i>
292
+ </div>
293
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Économique</h3>
294
+ <p class="text-gray-600">Réduisez vos charges, et gagnez de l'argent</p>
295
+ </div>
296
+
297
+ <!-- Feature 2 -->
298
+ <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition">
299
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
300
+ <i class="fas fa-bolt text-green-600 text-2xl"></i>
301
+ </div>
302
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Autonomie énergétique totale</h3>
303
+ <p class="text-gray-600">Indépendance énergétique, eau et électricité. Devenez producteur d'énergie</p>
304
+ </div>
305
+
306
+ <!-- Feature 3 -->
307
+ <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition">
308
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
309
+ <i class="fas fa-leaf text-yellow-600 text-2xl"></i>
310
+ </div>
311
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Écologie respectée</h3>
312
+ <p class="text-gray-600">Empreinte carbone négative, matériaux locaux et biosourcés</p>
313
+ </div>
314
+
315
+ <!-- Feature 4 -->
316
+ <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition">
317
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
318
+ <i class="fas fa-heart text-red-600 text-2xl"></i>
319
+ </div>
320
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Santé préservée</h3>
321
+ <p class="text-gray-600">Matériaux naturels, sans COV, pour un intérieur pur et un air sain</p>
322
+ </div>
323
+
324
+ <!-- Feature 5 -->
325
+ <div class="bg-gray-50 p-6 rounded-lg text-center hover:shadow-lg transition">
326
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
327
+ <i class="fas fa-hands-helping text-purple-600 text-2xl"></i>
328
+ </div>
329
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Éthique et responsabilité</h3>
330
+ <p class="text-gray-600">Construction respectueuse de l'environnement et des personnes</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Testimonials Section -->
337
+ <section class="py-16 bg-gray-50">
338
+ <div class="max-w-6xl mx-auto px-6">
339
+ <div class="text-center mb-16">
340
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Témoignages</h2>
341
+ <p class="text-gray-600 max-w-3xl mx-auto">
342
+ Découvrez ce que nos clients disent de leurs Maisons Positives
343
+ </p>
344
+ </div>
345
+
346
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
347
+ <!-- Testimonial 1 -->
348
+ <div class="testimonial-card bg-white p-8 rounded-lg shadow-md">
349
+ <div class="flex items-center mb-6">
350
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus-autonome-toulouse-occitanie_temoignage1.jpg" alt="Béatrice et Michel" class="w-16 h-16 rounded-full object-cover mr-4">
351
+ <div>
352
+ <h4 class="font-semibold text-gray-800">Béatrice et Michel</h4>
353
+ <p class="text-gray-500 text-sm">Propriétaires d'une Maison Positive+</p>
354
+ </div>
355
+ </div>
356
+ <blockquote class="text-gray-600 italic mb-6">
357
+ "Vivre dans une maison Positive+ a transformé notre quotidien – non seulement nous économisons de l'énergie, mais nous contribuons à un avenir meilleur."
358
+ </blockquote>
359
+ <div class="flex space-x-1 text-yellow-400">
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Testimonial 2 -->
369
+ <div class="testing-card bg-white p-8 rounded-lg shadow-md">
370
+ <div class="flex items-center mb-6">
371
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus-autonome-toulouse-occitanie_temoignage2.jpg" alt="Cyril et Mélanie" class="w-16 h-16 rounded-full object-cover mr-4">
372
+ <div>
373
+ <h4 class="font-semibold text-gray-800">Cyril et Mélanie</h4>
374
+ <p class="text-gray-500 text-sm">Propriétaires d'une Maison Positive++</p>
375
+ </div>
376
+ </div>
377
+ <blockquote class="text-gray-600 italic mb-6">
378
+ "Nous avons choisi la Maison Positive++ pour sa conception écologique et évolutive, et nous ne pourrions pas être plus satisfaits. Le confort thermique est incroyable, même en hiver!"
379
+ </blockquote>
380
+ <div class="flex space-x-1 text-yellow-400">
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="text-center mt-12">
391
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-md font-semibold hover:bg-blue-700 transition duration-300">
392
+ Vous aussi devenez propriétaire
393
+ </a>
394
+ </div>
395
+ </div>
396
+ </section>
397
+
398
+ <!-- Models Section -->
399
+ <section id="modeles" class="py-16 bg-white">
400
+ <div class="max-w-6xl mx-auto px-6">
401
+ <div class="text-center mb-16">
402
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Découvrez nos maisons Économiques et Autonomes</h2>
403
+ <p class="text-gray-600 max-w-3xl mx-auto">
404
+ Chez La Charpenterie de Mars, nous avons conçu deux types de maisons positives pour répondre aux besoins variés des familles d'aujourd'hui
405
+ </p>
406
+ </div>
407
+
408
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
409
+ <!-- Model 1 -->
410
+ <div class="house-card bg-gray-50 rounded-lg overflow-hidden shadow-md">
411
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/08/iStock-500786171-1024x675.avif" alt="Maison Positive+" class="w-full h-64 object-cover">
412
+ <div class="p-6">
413
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Maison Positive+</h3>
414
+ <p class="text-blue-600 font-semibold mb-4">À partir de 185 000 €</p>
415
+ <p class="text-gray-600 mb-6">
416
+ La Maison Positive+ Tradit Bois est construite en ossature bois, un matériau biosourcé à haute performance écologique. Avec son isolation en fibre de bois, cette maison offre une isolation thermique naturelle exceptionnelle.
417
+ </p>
418
+ <div class="space-y-3 mb-6">
419
+ <div class="flex items-start">
420
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
421
+ <span class="text-gray-700">Isolation Naturelle : La fibre de bois régule la température intérieure</span>
422
+ </div>
423
+ <div class="flex items-start">
424
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
425
+ <span class="text-gray-700">Autonomie Énergétique : Devenez producteur d'énergie</span>
426
+ </div>
427
+ <div class="flex items-start">
428
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
429
+ <span class="text-gray-700">Modulabilité : Conçue pour évoluer avec vos besoins</span>
430
+ </div>
431
+ </div>
432
+ <div class="flex flex-col sm:flex-row gap-3">
433
+ <a href="#contact" class="flex-1 bg-blue-600 text-white text-center py-2 rounded-md hover:bg-blue-700 transition">Votre devis</a>
434
+ <a href="#" class="flex-1 border border-blue-600 text-blue-600 text-center py-2 rounded-md hover:bg-blue-50 transition">J'achète mon terrain</a>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Model 2 -->
440
+ <div class="house-card bg-gray-50 rounded-lg overflow-hidden shadow-md">
441
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/08/iStock-500786171-1024x675.avif" alt="Maison Positive++" class="w-full h-64 object-cover">
442
+ <div class="p-6">
443
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Maison Positive++</h3>
444
+ <p class="text-blue-600 font-semibold mb-4">À partir de 210 000 €</p>
445
+ <p class="text-gray-600 mb-6">
446
+ La Maison Positive++ Tradit-Paille est construite en ossature bois, isolée en paille. Ce choix économique et écoresponsable vous garantit une isolation thermique et phonique bien supérieure.
447
+ </p>
448
+ <div class="space-y-3 mb-6">
449
+ <div class="flex items-start">
450
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
451
+ <span class="text-gray-700">Empreinte Carbone Négative : La paille stocke du carbone</span>
452
+ </div>
453
+ <div class="flex items-start">
454
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
455
+ <span class="text-gray-700">Matériaux Sains : Sans COV, air intérieur pur et sain</span>
456
+ </div>
457
+ <div class="flex items-start">
458
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
459
+ <span class="text-gray-700">Flexibilité de Conception : Extension possible de 80m² à 150m²</span>
460
+ </div>
461
+ </div>
462
+ <div class="flex flex-col sm:flex-row gap-3">
463
+ <a href="#contact" class="flex-1 bg-blue-600 text-white text-center py-2 rounded-md hover:bg-blue-700 transition">Votre devis</a>
464
+ <a href="#" class="flex-1 border border-blue-600 text-blue-600 text-center py-2 rounded-md hover:bg-blue-50 transition">J'achète mon terrain</a>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Sizes Section -->
471
+ <div class="text-center mb-12">
472
+ <h3 class="text-2xl font-semibold text-gray-800 mb-4">Disponibles en 3 déclinaisons de surface</h3>
473
+ <p class="text-gray-600 mb-6">La famille grandit, votre maison aussi ! Faites évoluer votre maison au cours de votre vie !</p>
474
+
475
+ <div class="flex justify-center space-x-4 mb-8">
476
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md">80m²</button>
477
+ <button class="px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50">120m²</button>
478
+ <button class="px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50">150m²</button>
479
+ </div>
480
+
481
+ <!-- Image Gallery -->
482
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
483
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_04.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
484
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_01.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
485
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_02.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
486
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_03.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
487
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_04.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
488
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/maison-positive-plus_80m-toulouse-occitanie_01.webp" alt="Maison 80m²" class="w-full h-48 object-cover rounded-lg">
489
+ </div>
490
+ </div>
491
+
492
+ <div class="text-center">
493
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-md font-semibold hover:bg-blue-700 transition duration-300">
494
+ Faites construire votre maison de rêve
495
+ </a>
496
+ </div>
497
+ </div>
498
+ </section>
499
+
500
+ <!-- Comparison Section -->
501
+ <section class="py-16 bg-gray-50">
502
+ <div class="max-w-6xl mx-auto px-6">
503
+ <div class="text-center mb-16">
504
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Pourquoi choisir nos maisons?</h2>
505
+ <p class="text-gray-600 max-w-3xl mx-auto">Choisissez l'avenir avec la maison de demain</p>
506
+ </div>
507
+
508
+ <div class="overflow-x-auto">
509
+ <table class="w-full bg-white rounded-lg overflow-hidden shadow-md">
510
+ <thead class="bg-gray-800 text-white">
511
+ <tr>
512
+ <th class="px-6 py-4 text-left"></th>
513
+ <th class="px-6 py-4 text-center">
514
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/08/logo_maison-classique_white.svg" alt="Maison classique" class="h-10 mx-auto">
515
+ </th>
516
+ <th class="px-6 py-4 text-center">
517
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/08/logo_positive-plus.svg" alt="Maison Positive+" class="h-10 mx-auto">
518
+ </th>
519
+ <th class="px-6 py-4 text-center">
520
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/08/logo_positive-plus-plus.svg" alt="Maison Positive++" class="h-10 mx-auto">
521
+ </th>
522
+ </tr>
523
+ </thead>
524
+ <tbody class="divide-y divide-gray-200">
525
+ <tr>
526
+ <td class="px-6 py-4 font-medium text-gray-900">Empreinte Carbone</td>
527
+ <td class="px-6 py-4 text-center text-gray-600">Élevée – Production de briques très énergivore</td>
528
+ <td class="px-6 py-4 text-center text-gray-600">Moyenne – Bois + laine de bois, matériaux biosourcés et Local</td>
529
+ <td class="px-6 py-4 text-center text-gray-600">Faible – Bois + paille, empreinte carbone négative et materiaux très Local</td>
530
+ </tr>
531
+ <tr>
532
+ <td class="px-6 py-4 font-medium text-gray-900">Durabilité Matériaux</td>
533
+ <td class="px-6 py-4 text-center text-gray-600">Bonne, briques durables</td>
534
+ <td class="px-6 py-4 text-center text-gray-600">Très bonne, bois traité et laine durable</td>
535
+ <td class="px-6 py-4 text-center text-gray-600">Très bonne, paille bien protégée, durabilité importante</td>
536
+ </tr>
537
+ <tr>
538
+ <td class="px-6 py-4 font-medium text-gray-900">Performance Thermique</td>
539
+ <td class="px-6 py-4 text-center text-gray-600">Moyenne – Isolation moyenne selon la qualité des briques</td>
540
+ <td class="px-6 py-4 text-center text-gray-600">Excellente – La laine de bois offre une très bonne isolation thermique</td>
541
+ <td class="px-6 py-4 text-center text-gray-600">Excellente – La paille est un excellent isolant naturel</td>
542
+ </tr>
543
+ <tr>
544
+ <td class="px-6 py-4 font-medium text-gray-900">Rendement Énergétique</td>
545
+ <td class="px-6 py-4 text-center text-gray-600">Rendement énergétique faible, consommation forte</td>
546
+ <td class="px-6 py-4 text-center text-gray-600">Très bon rendement énergétique, surplus en revente</td>
547
+ <td class="px-6 py-4 text-center text-gray-600">Très bon rendement énergétique, surplus en revente</td>
548
+ </tr>
549
+ <tr>
550
+ <td class="px-6 py-4 font-medium text-gray-900">Coût de Construction</td>
551
+ <td class="px-6 py-4 text-center text-gray-600">Moyen-Élevé – 1 750 à 2 250 €/m²</td>
552
+ <td class="px-6 py-4 text-center text-gray-600">Élevé – 1 800 à 2 500 €/m²</td>
553
+ <td class="px-6 py-4 text-center text-gray-600">Moyen – 2 000 à 2 700 €/m²</td>
554
+ </tr>
555
+ </tbody>
556
+ </table>
557
+ </div>
558
+
559
+ <div class="text-center mt-12">
560
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-md font-semibold hover:bg-blue-700 transition duration-300">
561
+ Faites construire la maison de vos rêves
562
+ </a>
563
+ </div>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- Process Section -->
568
+ <section id="processus" class="py-16 bg-white">
569
+ <div class="max-w-6xl mx-auto px-6">
570
+ <div class="text-center mb-16">
571
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Votre maison en 6 mois!</h2>
572
+ <p class="text-gray-600 max-w-3xl mx-auto">
573
+ Découvrez notre processus de construction clé en main
574
+ </p>
575
+ </div>
576
+
577
+ <div class="relative">
578
+ <!-- Timeline -->
579
+ <div class="space-y-20 md:space-y-0 md:grid md:grid-cols-6 md:gap-10">
580
+ <!-- Step 1 -->
581
+ <div class="timeline-item relative text-center">
582
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
583
+ <span class="text-white font-bold text-xl">1</span>
584
+ </div>
585
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Notre premier rendez-vous</h3>
586
+ <p class="text-gray-600">
587
+ Échangez avec nos experts pour confirmer votre projet et votre choix de maison.
588
+ </p>
589
+ <a href="#contact" class="mt-4 inline-block text-blue-600 hover:text-blue-800">Votre devis</a>
590
+ </div>
591
+
592
+ <!-- Step 2 -->
593
+ <div class="timeline-item relative text-center">
594
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
595
+ <span class="text-white font-bold text-xl">2</span>
596
+ </div>
597
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Présentation des plans</h3>
598
+ <p class="text-gray-600">
599
+ Nous concevons les plans de votre maison personnalisée suivant vos besoins et vos envies.
600
+ </p>
601
+ </div>
602
+
603
+ <!-- Step 3 -->
604
+ <div class="timeline-item relative text-center">
605
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
606
+ <span class="text-white font-bold text-xl">3</span>
607
+ </div>
608
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Signature de votre devis</h3>
609
+ <p class="text-gray-600">
610
+ Nouvelle rencontre et début de votre accompagnement.
611
+ </p>
612
+ <p class="font-bold text-blue-600 mt-2">VOTRE MAISON DANS 6 MOIS !</p>
613
+ </div>
614
+
615
+ <!-- Step 4 -->
616
+ <div class="timeline-item relative text-center">
617
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
618
+ <span class="text-white font-bold text-xl">4</span>
619
+ </div>
620
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Phase de Construction</h3>
621
+ <p class="text-gray-600">
622
+ 1 rendez-vous par semaine sur site pendant la durée des travaux.
623
+ </p>
624
+ </div>
625
+
626
+ <!-- Step 5 -->
627
+ <div class="timeline-item relative text-center">
628
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
629
+ <span class="text-white font-bold text-xl">5</span>
630
+ </div>
631
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Réception de chantier</h3>
632
+ <p class="text-gray-600">
633
+ 6 mois plus tard, vous commencez votre nouvelle vie dans votre nouvelle maison positive.
634
+ </p>
635
+ </div>
636
+
637
+ <!-- Step 6 -->
638
+ <div class="timeline-item relative text-center">
639
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
640
+ <span class="text-white font-bold text-xl">6</span>
641
+ </div>
642
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Célébration</h3>
643
+ <p class="text-gray-600">
644
+ Photo souvenir avec l'équipe, remise des clés et dossier de votre nouvelle maison.
645
+ </p>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <div class="text-center mt-16">
651
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-md font-semibold hover:bg-blue-700 transition duration-300">
652
+ Vous aussi devenez propriétaire
653
+ </a>
654
+ </div>
655
+ </div>
656
+ </section>
657
+
658
+ <!-- About Section -->
659
+ <section class="py-16 bg-gray-50">
660
+ <div class="max-w-6xl mx-auto px-6">
661
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
662
+ <div>
663
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Qui sommes-nous ?</h2>
664
+ <blockquote class="text-xl italic text-gray-700 mb-8 border-l-4 border-blue-600 pl-6">
665
+ "Construire une maison, c'est créer un cadre de vie sain et durable pour aujourd'hui et pour les générations à venir. Chaque projet que nous réalisons est une contribution à un avenir plus vert, plus juste, et plus respectueux de notre planète et de l'humain."
666
+ </blockquote>
667
+ <p class="text-gray-600 mb-6">
668
+ Fort de son expérience dans plusieurs pays et de sa formation rigoureuse chez les Compagnons du Devoir, Julian Mars a décidé de créer une entreprise qui met l'accent sur notre meilleur savoir-faire, nos qualités artisanales, l'éthique, la santé, et l'innovation écologique.
669
+ </p>
670
+ <p class="text-gray-600">
671
+ Depuis, La Charpenterie de Mars est devenue synonyme d'excellence dans la construction de maisons en bois et en paille, charpentes traditionnelles, et structures complexes.
672
+ </p>
673
+ </div>
674
+ <div class="flex justify-center">
675
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/la-charpenterie-de-mars_Toulouse-Occitanie_logo.avif" alt="La Charpenterie de Mars" class="rounded-lg shadow-lg max-w-md w-full">
676
+ </div>
677
+ </div>
678
+
679
+ <!-- Land Section -->
680
+ <div class="mt-16 bg-white p-8 rounded-lg shadow-md">
681
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
682
+ <div>
683
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Vous souhaitez acquérir un terrain ?</h3>
684
+ <p class="text-gray-600 mb-6">
685
+ "Vous souhaitez acquérir votre terrain afin de construire votre maison positive plus, contactez notre partenaire foncier exclusif Louis-Jérôme Salles !"
686
+ </p>
687
+ <p class="text-gray-600 mb-6">
688
+ Louis-Jérôme Salles et l'équipe de Mes éco-conseils, partenaires exclusifs de La Charpenterie de Mars, vous accompagnent au-delà de la transaction immobilière. Nous vous transmettons les clés pour que votre environnement de vie devienne un lieu ressource et qu'il participe à votre épanouissement.
689
+ </p>
690
+ <a href="#" class="inline-block bg-green-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-green-700 transition duration-300">
691
+ Acheter mon terrain
692
+ </a>
693
+ </div>
694
+ <div class="flex justify-center">
695
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/10/Logo_Mes-Eco-conseils_la-sante-des-lieux.jpg" alt="Mes Eco-conseils" class="rounded-lg max-w-xs">
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </section>
701
+
702
+ <!-- Contact Section -->
703
+ <section id="contact" class="py-16 bg-blue-600 text-white">
704
+ <div class="max-w-6xl mx-auto px-6">
705
+ <div class="text-center mb-12">
706
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Parlons de votre projet de Maison Positive</h2>
707
+ <p class="text-xl max-w-3xl mx-auto">
708
+ C'est le moment de vous lancer en contactant Julian de la Charpenterie de Mars.
709
+ </p>
710
+ <p class="text-xl font-semibold mt-4">
711
+ Préparez-vous à emménager dans votre nouvelle maison dans 6 mois !
712
+ </p>
713
+ </div>
714
+
715
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
716
+ <!-- Contact Form -->
717
+ <div class="bg-white rounded-lg shadow-lg p-8 text-gray-800">
718
+ <h3 class="text-2xl font-bold mb-6">Contactez-nous</h3>
719
+ <form id="contactForm" class="space-y-4">
720
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
721
+ <div>
722
+ <label for="lastname" class="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
723
+ <input type="text" id="lastname" name="lastname" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
724
+ </div>
725
+ <div>
726
+ <label for="firstname" class="block text-sm font-medium text-gray-700 mb-1">Prénom *</label>
727
+ <input type="text" id="firstname" name="firstname" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
728
+ </div>
729
+ </div>
730
+
731
+ <div>
732
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail *</label>
733
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
734
+ </div>
735
+
736
+ <div>
737
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone *</label>
738
+ <div class="flex">
739
+ <select id="country" name="country" class="w-1/3 px-4 py-2 border border-gray-300 rounded-l-md focus:ring-blue-500 focus:border-blue-500">
740
+ <option value="+1">United States +1</option>
741
+ <option value="+33" selected>France +33</option>
742
+ <option value="+44">United Kingdom +44</option>
743
+ <!-- More options would be here in a real implementation -->
744
+ </select>
745
+ <input type="tel" id="phone" name="phone" required class="flex-1 px-4 py-2 border-t border-b border-r border-gray-300 rounded-r-md focus:ring-blue-500 focus:border-blue-500">
746
+ </div>
747
+ </div>
748
+
749
+ <div>
750
+ <label class="block text-sm font-medium text-gray-700 mb-1">Je possède un terrain ?</label>
751
+ <div class="flex space-x-4">
752
+ <label class="inline-flex items-center">
753
+ <input type="radio" name="has_land" value="yes" class="h-4 w-4 text-blue-600">
754
+ <span class="ml-2">Oui</span>
755
+ </label>
756
+ <label class="inline-flex items-center">
757
+ <input type="radio" name="has_land" value="no" class="h-4 w-4 text-blue-600">
758
+ <span class="ml-2">Non</span>
759
+ </label>
760
+ </div>
761
+ </div>
762
+
763
+ <div>
764
+ <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">Je suis intéressé(e) par *</label>
765
+ <select id="interest" name="interest" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
766
+ <option value="">-- Sélectionnez --</option>
767
+ <option value="positive+">Maison Positive+</option>
768
+ <option value="positive++">Maison Positive++</option>
769
+ <option value="both">Les deux modèles</option>
770
+ </select>
771
+ </div>
772
+
773
+ <div>
774
+ <label for="size" class="block text-sm font-medium text-gray-700 mb-1">Superficie souhaitée *</label>
775
+ <select id="size" name="size" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
776
+ <option value="">-- Sélectionnez --</option>
777
+ <option value="80">80m²</option>
778
+ <option value="120">120m²</option>
779
+ <option value="150">150m²</option>
780
+ </select>
781
+ </div>
782
+
783
+ <div>
784
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Un message à nous adresser ?</label>
785
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
786
+ </div>
787
+
788
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-md font-semibold hover:bg-blue-700 transition duration-300 flex items-center justify-center">
789
+ <span id="submitText">Envoyer</span>
790
+ <span id="submitSpinner" class="hidden ml-2">
791
+ <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
792
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
793
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
794
+ </svg>
795
+ </span>
796
+ </button>
797
+ </form>
798
+ </div>
799
+
800
+ <!-- Contact Info -->
801
+ <div>
802
+ <div class="mb-8">
803
+ <h3 class="text-2xl font-bold mb-4">Contact</h3>
804
+ <div class="flex items-center mb-4">
805
+ <i class="fas fa-phone-alt mr-4 text-xl"></i>
806
+ <a href="tel:0625554477" class="text-xl hover:underline">06 25 55 44 77</a>
807
+ </div>
808
+ <div class="flex items-center mb-4">
809
+ <i class="fas fa-map-marker-alt mr-4 text-xl"></i>
810
+ <a href="https://www.google.fr/maps/place/Brax/@43.6105879,1.2001671,13.53z/data=!4m6!3m5!1s0x12aeb28dfae5dc1d:0x9c3d59d214b140e2!8m2!3d43.616561!4d1.240469!16s%2Fm%2F03nt7kr?entry=ttu&g_ep=EgoyMDI0MDgyNi4wIKXMDSoASAFQAw%3D%3D" target="_blank" class="hover:underline">
811
+ 31490 Brax - Toulouse Occitanie
812
+ </a>
813
+ </div>
814
+ <div class="flex space-x-4 mt-6">
815
+ <a href="https://www.instagram.com/lacharpenteriedemars/" class="text-2xl hover:text-blue-300 transition">
816
+ <i class="fab fa-instagram"></i>
817
+ </a>
818
+ <a href="https://www.facebook.com/deMARSdesign" class="text-2xl hover:text-blue-300 transition">
819
+ <i class="fab fa-facebook"></i>
820
+ </a>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="mb-8">
825
+ <h3 class="text-2xl font-bold mb-4">LIENS RAPIDES</h3>
826
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
827
+ <div>
828
+ <ul class="space-y-2">
829
+ <li><a href="#maison-positive" class="hover:underline">Maison de demain</a></li>
830
+ <li><a href="#avantages" class="hover:underline">Avantages d'une maison positive</a></li>
831
+ <li><a href="#modeles" class="hover:underline">Maison Positive +</a></li>
832
+ </ul>
833
+ </div>
834
+ <div>
835
+ <ul class="space-y-2">
836
+ <li><a href="#modeles" class="hover:underline">Maison Positive ++</a></li>
837
+ <li><a href="#contact" class="hover:underline">Devis maison positive</a></li>
838
+ </ul>
839
+ </div>
840
+ </div>
841
+ </div>
842
+
843
+ <div>
844
+ <a href="#contact" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition duration-300">
845
+ Je veux ma maison
846
+ </a>
847
+ </div>
848
+
849
+ <div class="mt-8">
850
+ <img src="https://positiveplus.fr/wp-content/uploads/2024/09/la-charpenterie-de-mars_Toulouse_logo-xs.avif" alt="La Charpenterie de Mars" class="h-16">
851
+ <p class="mt-2 font-semibold">La Charpenterie de Mars</p>
852
+ <p>Habitats neufs et rénovation, éthiques et écologiques</p>
853
+ <p>Toulouse et région Occitanie</p>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </section>
859
+
860
+ <!-- Footer -->
861
+ <footer class="bg-gray-900 text-white py-8">
862
+ <div class="max-w-6xl mx-auto px-6">
863
+ <div class="text-center">
864
+ <p class="text-gray-400">
865
+ © 2024 La Charpenterie de Mars. Tous droits réservés.
866
+ </p>
867
+ <p class="text-gray-400 mt-2">
868
+ <a href="https://donuts-web.cafe/" target="_blank" class="hover:text-blue-400">Donuts Web Café - création de sites Internet par Fabien Sayer</a>
869
+ </p>
870
+ </div>
871
+ </div>
872
+ </footer>
873
+
874
+ <script>
875
+ // Mobile Menu Toggle
876
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
877
+ const mobileMenu = document.getElementById('mobileMenu');
878
+
879
+ mobileMenuButton.addEventListener('click', () => {
880
+ mobileMenu.classList.toggle('hidden');
881
+ });
882
+
883
+ // Cookie Consent
884
+ const cookieConsent = document.getElementById('cookieConsent');
885
+ const customizeCookies = document.getElementById('customizeCookies');
886
+ const closePreferences = document.getElementById('closePreferences');
887
+ const cookiePreferences = document.getElementById('cookiePreferences');
888
+ const acceptAll = document.getElementById('acceptAll');
889
+ const rejectAll = document.getElementById('rejectAll');
890
+ const acceptAllPrefs = document.getElementById('acceptAllPrefs');
891
+ const rejectAllPrefs = document.getElementById('rejectAllPrefs');
892
+ const savePreferences = document.getElementById('savePreferences');
893
+
894
+ // Check if cookie consent was already given
895
+ if (!localStorage.getItem('cookieConsent')) {
896
+ setTimeout(() => {
897
+ cookieConsent.classList.add('active');
898
+ }, 1000);
899
+ }
900
+
901
+ // Cookie consent buttons
902
+ customizeCookies.addEventListener('click', () => {
903
+ cookiePreferences.classList.remove('hidden');
904
+ });
905
+
906
+ closePreferences.addEventListener('click', () => {
907
+ cookiePreferences.classList.add('hidden');
908
+ });
909
+
910
+ acceptAll.addEventListener('click', () => {
911
+ localStorage.setItem('cookieConsent', 'all');
912
+ cookieConsent.classList.remove('active');
913
+ });
914
+
915
+ rejectAll.addEventListener('click', () => {
916
+ localStorage.setItem('cookieConsent', 'none');
917
+ cookieConsent.classList.remove('active');
918
+ });
919
+
920
+ acceptAllPrefs.addEventListener('click', () => {
921
+ localStorage.setItem('cookieConsent', 'all');
922
+ cookieConsent.classList.remove('active');
923
+ });
924
+
925
+ rejectAllPrefs.addEventListener('click', () => {
926
+ localStorage.setItem('cookieConsent', 'none');
927
+ cookieConsent.classList.remove('active');
928
+ });
929
+
930
+ savePreferences.addEventListener('click', () => {
931
+ // Here you would save the specific preferences
932
+ localStorage.setItem('cookieConsent', 'custom');
933
+ cookieConsent.classList.remove('active');
934
+ });
935
+
936
+ // Form submission
937
+ const contactForm = document.getElementById('contactForm');
938
+ const submitText = document.getElementById('submitText');
939
+ const submitSpinner = document.getElementById('submitSpinner');
940
+
941
+ contactForm.addEventListener('submit', (e) => {
942
+ e.preventDefault();
943
+
944
+ submitText.textContent = 'Envoi en cours';
945
+ submitSpinner.classList.remove('hidden');
946
+
947
+ // Simulate form submission
948
+ setTimeout(() => {
949
+ submitText.textContent = 'Envoyé !';
950
+ submitSpinner.classList.add('hidden');
951
+
952
+ // Reset form after 2 seconds
953
+ setTimeout(() => {
954
+ contactForm.reset();
955
+ submitText.textContent = 'Envoyer';
956
+ }, 2000);
957
+ }, 1500);
958
+ });
959
+
960
+ // Smooth scrolling for anchor links
961
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
962
+ anchor.addEventListener('click', function (e) {
963
+ e.preventDefault();
964
+
965
+ const targetId = this.getAttribute('href');
966
+ if (targetId === '#') return;
967
+
968
+ const targetElement = document.querySelector(targetId);
969
+ if (targetElement) {
970
+ targetElement.scrollIntoView({
971
+ behavior: 'smooth'
972
+ });
973
+
974
+ // Close mobile menu if open
975
+ if (!mobileMenu.classList.contains('hidden')) {
976
+ mobileMenu.classList.add('hidden');
977
+ }
978
+ }
979
+ });
980
+ });
981
+ </script>
982
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LaCharpenterieDeMars/positiveplus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
983
+ </html>