cleanup and cms migration
Some checks failed
Build and Deploy / build-and-deploy (push) Has been cancelled
Some checks failed
Build and Deploy / build-and-deploy (push) Has been cancelled
This commit is contained in:
@@ -1,69 +1,63 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import SoumissionForm from '../components/SoumissionForm.astro';
|
||||
import { getLangFromUrl, t } from '../i18n/utils';
|
||||
import Layout from '@/layouts/base.astro';
|
||||
import SoumissionForm from '@/components/submission-form.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { getLocale } from '@/lib/locale';
|
||||
import general from '../content/settings/general.json';
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
return Astro.redirect('/404');
|
||||
const locale = getLocale(Astro);
|
||||
|
||||
const [soumissionEntry] = await getCollection('soumission', (e) => e.id === `${locale}/main`);
|
||||
const [navEntry] = await getCollection('navigation', (e) => e.id === `${locale}/main`);
|
||||
if (!soumissionEntry || !navEntry) throw new Error(`Missing soumission content for locale: ${locale}`);
|
||||
|
||||
const soumission = soumissionEntry.data;
|
||||
const nav = navEntry.data;
|
||||
const homeLink = nav.links.find((l) => l.href === '/')?.name ?? soumission.breadcrumbHome;
|
||||
const soumissionNav = nav.links.find((l) => l.href === '/soumission');
|
||||
---
|
||||
<BaseLayout
|
||||
title={t(lang, 'nav.soumission')}
|
||||
|
||||
<Layout
|
||||
title={nav.pageTitles.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>
|
||||
<a href="/">{homeLink}</a>
|
||||
<span aria-hidden="true">›</span>
|
||||
<span aria-current="page">{t(lang, 'nav.soumission')}</span>
|
||||
<span aria-current="page">{soumissionNav?.name ?? soumission.pageTitle}</span>
|
||||
</nav>
|
||||
<h1 class="page-title">{t(lang, 'soumission.title')}</h1>
|
||||
<p class="page-subtitle">{t(lang, 'soumission.subtitle')}</p>
|
||||
<h1 class="page-title">{soumission.title}</h1>
|
||||
<p class="page-subtitle">{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>
|
||||
<h2 class="sidebar-title">{soumission.sidebar.processTitle}</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>
|
||||
{soumission.sidebar.steps.map((step, i) => (
|
||||
<li class="process-step">
|
||||
<div class="process-num">{i + 1}</div>
|
||||
<div>
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-contact">
|
||||
<h3>Ou contactez-nous directement</h3>
|
||||
<h3>{soumission.sidebar.directContactTitle}</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"/>
|
||||
@@ -78,183 +72,11 @@ return Astro.redirect('/404');
|
||||
{general.email}
|
||||
</a>
|
||||
<p class="sidebar-legal">
|
||||
Numéro RBQ : {general.rbq}<br />
|
||||
{soumission.sidebar.rbqLabel} {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>
|
||||
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user