mbcubeconsulting/cachetdeco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scaffold

Browse Source
This commit is contained in:
mouad bouras
2026-03-12 20:16:40 -04:00
commit 184cdcad78
71 changed files with 10018 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/pages/soumission.astro Normal file
View File

@@ -0,0 +1,258 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import SoumissionForm from '../components/SoumissionForm.astro';
import { getLangFromUrl, t } from '../i18n/utils';
import general from '../content/settings/general.json';
const lang = getLangFromUrl(Astro.url);
---
<BaseLayout
title={t(lang, 'nav.soumission')}
description="Demandez votre soumission gratuite pour vos travaux de peinture ou décoration à Laval et sur la Rive-Nord. Cachet Peintres Décorateurs vous répond rapidement."
canonical="/soumission"
>
<!-- Page header -->
<section class="page-header">
<div class="container-site">
<nav class="breadcrumb" aria-label="Fil d'Ariane">
<a href="/">{t(lang, 'nav.accueil')}</a>
<span aria-hidden="true">›</span>
<span aria-current="page">{t(lang, 'nav.soumission')}</span>
</nav>
<h1 class="page-title">{t(lang, 'soumission.title')}</h1>
<p class="page-subtitle">{t(lang, 'soumission.subtitle')}</p>
</div>
</section>
<section class="soumission-section">
<div class="container-site soumission-grid">
<!-- Form -->
<div class="soumission-form-col">
<SoumissionForm />
</div>
<!-- Side info -->
<aside class="soumission-sidebar">
<div class="sidebar-card">
<h2 class="sidebar-title">Comment ça fonctionne</h2>
<ol class="process-list">
<li class="process-step">
<div class="process-num">1</div>
<div>
<h3>Remplissez le formulaire</h3>
<p>Décrivez votre projet en quelques mots — type de travaux, superficie et délai souhaité.</p>
</div>
</li>
<li class="process-step">
<div class="process-num">2</div>
<div>
<h3>Nous vous contactons</h3>
<p>Un de nos experts vous rappelle dans les 24–48 heures pour planifier une visite gratuite.</p>
</div>
</li>
<li class="process-step">
<div class="process-num">3</div>
<div>
<h3>Soumission détaillée</h3>
<p>Vous recevez une soumission claire et sans engagement, avec tous les détails du projet.</p>
</div>
</li>
</ol>
</div>
<div class="sidebar-contact">
<h3>Ou contactez-nous directement</h3>
<a href={`tel:${general.phone.replace(/\D/g, '')}`} class="sidebar-phone">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l.94-.94a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
{general.phone}
</a>
<a href={`mailto:${general.email}`} class="sidebar-email">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
{general.email}
</a>
<p class="sidebar-legal">
Numéro RBQ : {general.rbq}<br />
{general.legalName}
</p>
</div>
</aside>
</div>
</section>
</BaseLayout>
<style>
.page-header {
background-color: var(--color-brand-50);
border-bottom: 1.5px solid var(--color-brand-100);
padding: 3rem 0 2.5rem;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-brand-400);
margin-bottom: 1rem;
}
.breadcrumb a {
color: var(--color-brand-600);
transition: opacity 0.2s ease;
}
.breadcrumb a:hover { opacity: 0.7; }
.breadcrumb span[aria-current] {
color: var(--color-gray-dark);
opacity: 0.7;
}
.page-title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--color-brand-600);
margin-bottom: 0.75rem;
}
.page-subtitle {
font-size: 1.125rem;
color: var(--color-gray-dark);
opacity: 0.75;
max-width: 560px;
}
.soumission-section {
padding: 4rem 0 5rem;
}
.soumission-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 4rem;
align-items: start;
}
/* Sidebar */
.soumission-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background-color: var(--color-brand-50);
border: 1.5px solid var(--color-brand-100);
border-radius: 10px;
padding: 2rem;
}
.sidebar-title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-brand-600);
margin-bottom: 1.5rem;
}
.process-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.process-step {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.process-num {
width: 36px;
height: 36px;
background-color: var(--color-brand-600);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
flex-shrink: 0;
}
.process-step h3 {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-brand-600);
margin-bottom: 0.25rem;
}
.process-step p {
font-size: 0.875rem;
color: var(--color-gray-dark);
opacity: 0.75;
line-height: 1.55;
}
.sidebar-contact {
background-color: var(--color-brand-600);
color: #ffffff;
border-radius: 10px;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.sidebar-contact h3 {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.25rem;
}
.sidebar-phone,
.sidebar-email {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 1rem;
font-weight: 700;
color: #ffffff;
transition: opacity 0.2s ease;
}
.sidebar-phone:hover,
.sidebar-email:hover { opacity: 0.8; }
.sidebar-legal {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
margin-top: 0.5rem;
line-height: 1.6;
}
@media (max-width: 900px) {
.soumission-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.soumission-sidebar {
order: -1;
}
}
</style>