1.0

2026-03-26 13:04:18 -04:00
parent 70d8d83691
commit 4a64e90a47
9 changed files with 418 additions and 1064 deletions
--- a/src/components/sections/contact.tsx
+++ b/src/components/sections/contact.tsx
@@ -12,13 +12,11 @@ interface Props {
  addressValue: string
  serviceAreaLabel: string
  serviceArea: string
-  firstNameLabel?: string
-  lastNameLabel?: string
+  fullNameLabel?: string
  emailFieldLabel?: string
  phoneFieldLabel?: string
  messageLabel?: string
-  firstNamePlaceholder?: string
-  lastNamePlaceholder?: string
+  fullNamePlaceholder?: string
  emailPlaceholder?: string
  phonePlaceholder?: string
  messagePlaceholder?: string
@@ -26,8 +24,7 @@ interface Props {
 }

 interface ContactFields {
-  firstName: string
-  lastName: string
+  fullName: string
  email: string
  phone: string
  message: string
@@ -42,13 +39,11 @@ export default function Contact({
  addressValue,
  serviceAreaLabel,
  serviceArea,
-  firstNameLabel = 'Prénom',
-  lastNameLabel = 'Nom',
+  fullNameLabel = 'Nom complet',
  emailFieldLabel = 'Courriel',
  phoneFieldLabel = 'Téléphone',
  messageLabel = 'Message',
-  firstNamePlaceholder = 'Jean',
-  lastNamePlaceholder = 'Tremblay',
+  fullNamePlaceholder = 'Jean Tremblay',
  emailPlaceholder = 'nom@exemple.com',
  phonePlaceholder = '(514) 555-1234',
  messagePlaceholder = 'Décrivez votre projet...',
@@ -184,32 +179,18 @@ export default function Contact({
          ) : (
            <form onSubmit={handleSubmit(onSubmit)} noValidate className="mt-0">
            <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
-              <div>
-                <label htmlFor="first-name" className={labelClass}>{firstNameLabel}</label>
+              <div className="sm:col-span-2">
+                <label htmlFor="full-name" className={labelClass}>{fullNameLabel}</label>
                <div className="mt-2.5">
                  <input
-                    id="first-name"
+                    id="full-name"
                    type="text"
-                    autoComplete="given-name"
-                    placeholder={firstNamePlaceholder}
-                    className={errors.firstName ? inputErrorClass : inputClass}
-                    {...register("firstName", { required: "Veuillez entrer votre prénom." })}
+                    autoComplete="name"
+                    placeholder={fullNamePlaceholder}
+                    className={errors.fullName ? inputErrorClass : inputClass}
+                    {...register("fullName", { required: "Veuillez entrer votre nom complet." })}
                  />
-                  {errors.firstName && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{errors.firstName.message}</p>}
-                </div>
-              </div>
-              <div>
-                <label htmlFor="last-name" className={labelClass}>{lastNameLabel}</label>
-                <div className="mt-2.5">
-                  <input
-                    id="last-name"
-                    type="text"
-                    autoComplete="family-name"
-                    placeholder={lastNamePlaceholder}
-                    className={errors.lastName ? inputErrorClass : inputClass}
-                    {...register("lastName", { required: "Veuillez entrer votre nom." })}
-                  />
-                  {errors.lastName && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{errors.lastName.message}</p>}
+                  {errors.fullName && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{errors.fullName.message}</p>}
                </div>
              </div>
              <div className="sm:col-span-2">
@@ -238,7 +219,10 @@ export default function Contact({
                    autoComplete="tel"
                    placeholder={phonePlaceholder}
                    className={errors.phone ? inputErrorClass : inputClass}
-                    {...register("phone", { required: "Veuillez entrer votre numéro de téléphone." })}
+                    {...register("phone", {
+                      required: "Veuillez entrer votre numéro de téléphone.",
+                      pattern: { value: /^[+\d][\d\s\-().]{6,19}$/, message: "Veuillez entrer un numéro de téléphone valide." },
+                    })}
                  />
                  {errors.phone && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{errors.phone.message}</p>}
                </div>
--- a/src/components/seo-head.astro
+++ b/src/components/seo-head.astro
@@ -33,7 +33,7 @@ const canonicalUrl = canonical

 const ogImageUrl = ogImage
  ? ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage}`
-  : `${siteUrl}/images/logo.png`;
+  : `${siteUrl}/images/logo-vignette.svg`;

 // JSON-LD LocalBusiness structured data
 const structuredData = {
@@ -92,7 +92,7 @@ const structuredData = {

 <!-- Favicon -->
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="icon" type="image/png" href="/images/logo.png" />
+<link rel="icon" type="image/png" href="/images/logo-vignette.svg" />

 <!-- JSON-LD -->
 <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
--- a/src/components/ui/hero.tsx
+++ b/src/components/ui/hero.tsx
@@ -16,16 +16,16 @@ export type HeroContent = {
 };

 const logo = {
-  src: '/images/logo-text.svg',
-  alt: 'Cachet Peintres Décorateurs',
-}
+  src: "/images/logo-text.svg",
+  alt: "Cachet Peintres Décorateurs",
+};

 const slides = [
-  { src: '/images/carrousel-1.webp', alt: "Peinture intérieure" },
-  { src: '/images/carrousel-2.webp', alt: "Décoration murale" },
-  { src: '/images/carrousel-3.webp', alt: "Finition de qualité" },
-  { src: '/images/carrousel-4.webp', alt: "Chambre" },
-  { src: '/images/carrousel-5.webp', alt: "Pièce lumineuse" },
+  { src: "/images/carrousel-1.webp", alt: "Peinture intérieure" },
+  { src: "/images/carrousel-2.webp", alt: "Décoration murale" },
+  { src: "/images/carrousel-3.webp", alt: "Finition de qualité" },
+  { src: "/images/carrousel-4.webp", alt: "Chambre" },
+  { src: "/images/carrousel-5.webp", alt: "Pièce lumineuse" },
 ];

 const autoplayPlugin = Autoplay({
@@ -71,34 +71,106 @@ export default function Hero({ content }: { content: HeroContent }) {

        <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8 h-full flex items-center justify-center pt-14">
          <div className="mx-auto max-w-4xl text-center">
-            <motion.div {...fadeUp(0.2)}>
-              <img
-                src={logo.src}
-                alt={general.siteName}
-                className="w-full h-auto"
+            <div className="relative rounded-lg px-6 py-2">
+              <motion.div
+                className="absolute inset-0 rounded-lg bg-brand-50"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.85, duration: 2, ease: [0.22, 1, 0.36, 1] }}
              />
-            </motion.div>
+              <svg className="relative" viewBox="0 0 1390 500" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                  <clipPath id="cachet-rise-clip">
+                    <motion.rect
+                      x="0"
+                      initial={{ y: 334, height: 0 }}
+                      animate={{ y: 0, height: 334 }}
+                      transition={{
+                        duration: 1,
+                        ease: [0.22, 1, 0.36, 1],
+                        delay: 0.85,
+                      }}
+                      width="1390"
+                    />
+                  </clipPath>
+                  <clipPath id="decorateurs-drop-clip">
+                    <motion.rect
+                      x="0"
+                      initial={{ y: 334, height: 0 }}
+                      animate={{ y: 334, height: 166 }}
+                      transition={{
+                        duration: 1,
+                        ease: [0.22, 1, 0.36, 1],
+                        delay: 0.85,
+                      }}
+                      width="1390"
+                    />
+                  </clipPath>
+                </defs>
+                <motion.text
+                  x="3"
+                  y="312"
+                  font-family="Cocogoose Classic Trial"
+                  font-size="350"
+                  font-weight="600"
+                  className="fill-brand-600"
+                  clipPath="url(#cachet-rise-clip)"
+                >
+                  CACHET
+                </motion.text>
+                <motion.path
+                  id="Rectangle"
+                  fill="#b0b0ac"
+                  fill-rule="evenodd"
+                  stroke="none"
+                  d="M 228 360 L 1161 360 L 1161 334 L 228 334 Z"
+                  initial={{ scaleX: 0 }}
+                  animate={{ scaleX: 1 }}
+                  transition={{
+                    duration: 0.85,
+                    ease: [0.22, 1, 0.36, 1],
+                    delay: 0.35,
+                  }}
+                  style={{
+                    originX: 0,
+                    transformBox: "fill-box",
+                    transformOrigin: "0% 50%",
+                  }}
+                />
+                <text
+                  x="228"
+                  y="435"
+                  font-family="Geoform"
+                  font-size="72"
+                  font-weight="700"
+                  className="fill-graphite-600"
+                  clipPath="url(#decorateurs-drop-clip)"
+                >
+                  PEINTRES DECORATEURS
+                </text>
+              </svg>
+            </div>
+            
            <motion.p
-              {...fadeUp(0.45)}
+              {...fadeUp(1.15)}
              className="p-4 mt-8 text-lg font-medium text-pretty text-white sm:text-xl/8 lg:text-2xl/8"
            >
              {subtitle}
            </motion.p>

-            <div
-              {...fadeUp(0.65)}
-              
+            <motion.div
+              {...fadeUp(1.25)}
              className="mt-10 flex items-center justify-center"
            >
              <motion.a
-              whileHover={{ scale: 1.075, transition: { duration: 0.1 } }}
-              transition={{ type: "spring", stiffness: 400, damping: 25, }}
+                whileHover={{ scale: 1.075, transition: { duration: 0.1 } }}
+                transition={{ type: "spring", stiffness: 400, damping: 25 }}
                href={ctaHref}
                className="rounded-md bg-[var(--color-brand-600)] px-3.5 py-2.5 text-lg font-light text-white shadow-xs hover:bg-[var(--color-brand-700)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-brand-600)]"
              >
                {cta}
              </motion.a>
-            </div>
+            </motion.div>
          </div>
        </div>
      </div>
--- a/src/content/settings/seo.json
+++ b/src/content/settings/seo.json
@@ -3,6 +3,6 @@
  "titleTemplate": "%s | Cachet Peintres Décorateurs",
  "defaultDescription": "Peintres décorateurs professionnels à Laval et sur la Rive-Nord. Peinture résidentielle et commerciale, décoration intérieure et extérieure. RBQ 5839 8736 01. Soumission gratuite.",
  "keywords": "peintre Laval, peinture résidentielle Laval, peinture commerciale Rive-Nord, décoration intérieure Laval, peintres décorateurs Québec, peinture extérieure Laval, rénovation Rive-Nord, soumission peinture gratuite",
-  "ogImage": "/images/logo.png",
+  "ogImage": "/images/logo-vignette.svg",
  "twitterCard": "summary_large_image"
 }
--- a/src/pages/api/contact.ts
+++ b/src/pages/api/contact.ts
@@ -5,8 +5,7 @@ import general from '@/content/settings/general.json';
 export const prerender = false;

 interface ContactBody {
-  firstName: string;
-  lastName: string;
+  fullName: string;
  email: string;
  phone: string;
  message: string;
@@ -16,10 +15,9 @@ function isValidBody(body: unknown): body is ContactBody {
  if (typeof body !== 'object' || body === null) return false;
  const b = body as Record<string, unknown>;
  return (
-    typeof b.firstName === 'string' && b.firstName.trim().length > 0 &&
-    typeof b.lastName === 'string' && b.lastName.trim().length > 0 &&
+    typeof b.fullName === 'string' && b.fullName.trim().length > 0 &&
    typeof b.email === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(b.email) &&
-    typeof b.phone === 'string' && b.phone.trim().length > 0 &&
+    typeof b.phone === 'string' && /^[+\d][\d\s\-().]{6,19}$/.test(b.phone.trim()) &&
    typeof b.message === 'string' && b.message.trim().length > 0
  );
 }
@@ -37,14 +35,14 @@ function buildContactNotificationHtml(data: ContactBody): string {
    <div style="background:#ffffff;border-radius:0 0 8px 8px;overflow:hidden">
      <div style="padding:24px;background:#f0f4ef;border-bottom:2px solid #d6e2d4">
        <p style="margin:0;font-size:15px;color:#314732;font-weight:600">
-          Vous avez reçu un nouveau message de <strong>${data.firstName} ${data.lastName}</strong>.
+          Vous avez reçu un nouveau message de <strong>${data.fullName}</strong>.
        </p>
      </div>
      <table style="width:100%;border-collapse:collapse">
        <tbody>
          <tr>
            <td style="padding:8px 12px;color:#666;font-size:14px;border-bottom:1px solid #eee;width:40%">Nom</td>
-            <td style="padding:8px 12px;font-size:14px;border-bottom:1px solid #eee;font-weight:600">${data.firstName} ${data.lastName}</td>
+            <td style="padding:8px 12px;font-size:14px;border-bottom:1px solid #eee;font-weight:600">${data.fullName}</td>
          </tr>
          <tr>
            <td style="padding:8px 12px;color:#666;font-size:14px;border-bottom:1px solid #eee">Courriel</td>
@@ -61,7 +59,7 @@ function buildContactNotificationHtml(data: ContactBody): string {
        <div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:16px;font-size:14px;color:#374151;line-height:1.6;white-space:pre-wrap">${data.message}</div>
      </div>
      <div style="padding:16px 20px 24px">
-        <a href="mailto:${data.email}?subject=Re: Message — Cachet Peintres Décorateurs" style="display:inline-block;padding:10px 24px;background:#314732;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:700">Répondre à ${data.firstName}</a>
+        <a href="mailto:${data.email}?subject=Re: Message — Cachet Peintres Décorateurs" style="display:inline-block;padding:10px 24px;background:#314732;color:#fff;text-decoration:none;border-radius:4px;font-size:14px;font-weight:700">Répondre à ${data.fullName}</a>
      </div>
    </div>
    <p style="margin:24px 0 0;text-align:center;font-size:11px;color:#999">
@@ -105,7 +103,7 @@ export const POST: APIRoute = async ({ request }) => {
      from: fromAddress,
      to: toAddress,
      replyTo: body.email,
-      subject: `Nouveau message — ${body.firstName} ${body.lastName}`,
+      subject: `Nouveau message — ${body.fullName}`,
      html: buildContactNotificationHtml(body),
    });
  } catch (e) {