scaffold

src/pages/index.astro

@@ -0,0 +1,139 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Hero from '../components/Hero.astro';
+import ServicesPreview from '../components/ServicesPreview.astro';
+import CTABanner from '../components/CTABanner.astro';
+import { getLangFromUrl, t } from '../i18n/utils';
+import general from '../content/settings/general.json';
+
+const lang = getLangFromUrl(Astro.url);
+---
+
+<BaseLayout
+  title="Peintres Décorateurs | Laval & Rive-Nord"
+  description={`${general.siteName} — Peintres décorateurs professionnels à Laval et sur la Rive-Nord. Peinture résidentielle et commerciale, décoration intérieure et extérieure. Soumission gratuite.`}
+  canonical="/"
+>
+  <Hero />
+  <ServicesPreview />
+
+  <!-- Why choose us section -->
+  <section class="why-section">
+    <div class="container-site">
+      <div class="section-header">
+        <h2 class="section-title">Pourquoi choisir Cachet?</h2>
+        <p class="section-subtitle">Une expertise reconnue au service de votre satisfaction</p>
+      </div>
+      <div class="why-grid">
+        <div class="why-card">
+          <div class="why-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+            </svg>
+          </div>
+          <h3>Certifié RBQ</h3>
+          <p>Entrepreneur certifié par la Régie du Bâtiment du Québec (RBQ : 5839 8736 01). Travaux assurés et conformes aux normes.</p>
+        </div>
+        <div class="why-card">
+          <div class="why-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12,6 12,12 16,14"/>
+            </svg>
+          </div>
+          <h3>Ponctualité et fiabilité</h3>
+          <p>Nous respectons nos engagements. Les délais sont tenus et votre projet est livré à temps, selon les standards convenus.</p>
+        </div>
+        <div class="why-card">
+          <div class="why-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <polyline points="20,6 9,17 4,12"/>
+            </svg>
+          </div>
+          <h3>Matériaux de qualité</h3>
+          <p>Nous utilisons exclusivement des peintures et produits de première qualité pour un résultat durable et esthétique.</p>
+        </div>
+        <div class="why-card">
+          <div class="why-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+          </div>
+          <h3>Équipe professionnelle</h3>
+          <p>Nos peintres décorateurs sont formés et expérimentés. Chaque détail compte pour nous, de la préparation à la finition.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <CTABanner />
+</BaseLayout>
+
+<style>
+  .why-section {
+    padding: 5rem 0;
+    background-color: var(--color-brand-50);
+  }
+
+  .section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  .why-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+  }
+
+  .why-card {
+    background-color: #ffffff;
+    border: 1.5px solid var(--color-brand-100);
+    border-radius: 8px;
+    padding: 1.75rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .why-icon {
+    width: 48px;
+    height: 48px;
+    background-color: var(--color-brand-600);
+    color: #ffffff;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .why-card h3 {
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--color-brand-600);
+  }
+
+  .why-card p {
+    font-size: 0.9rem;
+    color: var(--color-gray-dark);
+    opacity: 0.8;
+    line-height: 1.6;
+  }
+
+  @media (max-width: 900px) {
+    .why-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 540px) {
+    .why-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>