wip

src/components/header.tsx

@@ -3,6 +3,7 @@ import { Dialog, DialogPanel } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import general from "../content/settings/general.json";
 
+
 export default function Header({
   navigation,
   ctaLabel,
@@ -23,24 +24,16 @@ export default function Header({
         <div className="flex lg:flex-1">
           <a
             href="/"
-            className="flex items-center bg-[white] rounded-3xl shadow-md 
+            className="flex items-center justify-center bg-[white] rounded-full shadow-md p-2"
-    ps-0.5 pe-2 pt-1 pb-0.5
-    md:ps-1 md:pe-3 md:pt-2 md:pb-1
-    
-    "
           >
-            <div className="p-1 bg-[white] rounded-full ">
+            <div className="rounded-full ">
               <span className="sr-only">{general.siteName}</span>
               <img
                 alt={general.siteName}
-                src="/images/logo.png"
+                src="/images/logo-vignette.svg"
-                className="h-10 w-auto"
+                className="h-10 w-10 object-fill"
               />
             </div>
-
-            <p className="text-xl sm:text-2xl md:text-3xl font-semibold text-brand-600 uppercase">
-              {general.brandName}
-            </p>
           </a>
         </div>
         <div className="flex lg:hidden">
@@ -93,7 +86,7 @@ export default function Header({
                 <span className="sr-only">{general.siteName}</span>
                 <img
                   alt={general.siteName}
-                  src="/images/logo.png"
+                  src="/images/logo-vignette.svg"
                   className="h-10 w-auto"
                 />
               </div>

src/components/ui/hero.tsx

@@ -10,10 +10,11 @@ import photo2 from "@/assets/photos/the-attic-of-a-home-with-white-ceilings-and-
 import photo3 from "@/assets/photos/silver-and-white-apartment-interior-2023-11-27-05-32-03-utc.webp";
 import photo4 from "@/assets/photos/a-bedroom-with-white-walls-and-a-bed-and-a-2023-11-27-05-25-30-utc.webp";
 import photo5 from "@/assets/photos/empty-room-with-window-2023-11-27-05-08-12-utc.webp";
-
+import logo from "@/assets/cachet-hero-logo.svg";
 export type HeroContent = {
   pillCta: string;
   title: string;
+  title2: string;
   subtitle: string;
   cta: string;
   ctaHref: string;
@@ -28,13 +29,13 @@ const slides = [
 ];
 
 const autoplayPlugin = Autoplay({
-  delay: 5000,
+  delay: 4000,
   stopOnInteraction: false,
   stopOnMouseEnter: false,
 });
 
 export default function Hero({ content }: { content: HeroContent }) {
-  const { pillCta, title, subtitle, cta, ctaHref } = content;
+  const { pillCta, title, title2, subtitle, cta, ctaHref } = content;
 
   return (
     <div className="bg-white dark:bg-gray-900">
@@ -59,7 +60,7 @@ export default function Hero({ content }: { content: HeroContent }) {
         </Carousel>
 
         <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-2xl text-center">
+          <div className="mx-auto max-w-4xl text-center">
             <div className="hidden sm:mb-8 sm:flex sm:justify-center">
               <div className="flex flex-wrap items-center justify-center gap-2 gap-x-3.5 rounded-full px-4 py-2 text-sm/6 text-gray-300 ring-1 ring-white/20">
                 <span>RBQ {general.rbq}</span>
@@ -73,12 +74,19 @@ export default function Hero({ content }: { content: HeroContent }) {
                 <span>{pillCta}</span>
               </div>
             </div>
-            <h1
+            {/* <h1
               className="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
               style={{ fontFamily: "var(--font-display)" }}
             >
               {title}
             </h1>
+            <h2
+              className="text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl"
+              style={{ fontFamily: "var(--font-display)" }}
+            >
+              {title2}
+            </h2> */}
+            <img src={logo.src} alt={general.siteName} className="w-full h-auto" />
             <p className="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">
               {subtitle}
             </p>

src/content.config.ts

@@ -42,6 +42,7 @@ const hero = defineCollection({
   schema: z.object({
     pillCta: z.string(),
     title: z.string(),
+    title2: z.string(),
     subtitle: z.string(),
     cta: z.string(),
     ctaHref: z.string(),
@@ -87,6 +88,8 @@ const contact = defineCollection({
       button: z.string(),
     }),
     breadcrumbHome: z.string(),
+    rbq: z.string(),
+    neq: z.string(),
   }),
 });
 

src/content/contact/fr/main.json

@@ -23,5 +23,7 @@
     "description": "Obtenez une estimation personnalisée et gratuite pour votre projet de peinture ou décoration.",
     "button": "Soumission gratuite"
   },
-  "breadcrumbHome": "Accueil"
+  "breadcrumbHome": "Accueil",
+  "rbq": "RBQ : ",
+  "neq": "NEQ : "
 }

src/content/hero/fr/main.json

@@ -1,6 +1,7 @@
 {
   "pillCta": "Soumission gratuite",
-  "title": "Peintres Décorateurs à votre service",
+  "title": "CACHET",
+  "title2": "PEINTRES DÉCORATEURS",
   "subtitle": "Travaux de peinture résidentielle et commerciale, décoration intérieure et extérieure. Qualité professionnelle sur la Rive-Nord et Laval.",
   "cta": "Soumission gratuite",
   "ctaHref": "/soumission"

src/layouts/base.astro

@@ -4,6 +4,7 @@ import { getCollection } from 'astro:content';
 import { getLocale } from '@/lib/locale';
 import SEOHead from '@/components/seo-head.astro';
 import Header from '@/components/header';
+import Footer from '@/components/footer.astro';
 
 interface Props {
   title?: string;
@@ -40,5 +41,6 @@ const navigationItems = nav.links.map((link) => ({ name: link.name, href: link.h
     <main id="main-content">
       <slot />
     </main>
+    <Footer />
   </body>
 </html>

src/pages/contact.astro

@@ -118,8 +118,8 @@ const ctaImage = (await import('@/assets/Website Content/Photos/cozy-modern-kitc
         )}
 
         <div class="contact-legal">
-          <p>RBQ : {general.rbq}</p>
+          <p>{contact.rbq} {general.rbq}</p>
-          <p>NEQ : {general.neq} ({general.legalName})</p>
+          <p>{contact.neq} {general.neq} ({general.legalName})</p>
         </div>
       </div>
 

src/pages/index.astro

@@ -8,7 +8,6 @@ import Hero from '@/components/ui/hero';
 import Services from '@/components/ui/services';
 import WhyChooseUs from '@/components/ui/why-choose-us';
 import CTABanner from '@/components/ui/cta-banner';
-import Footer from '@/components/footer.astro';
 import Testimonials from '@/components/ui/testimonials';
 
 const locale = getLocale(Astro);
@@ -70,6 +69,7 @@ const features = services.map((service) => {
 const heroContent = {
   pillCta: heroData.pillCta,
   title: heroData.title,
+  title2: heroData.title2,
   subtitle: heroData.subtitle,
   cta: heroData.cta,
   ctaHref: heroData.ctaHref,
@@ -114,5 +114,4 @@ const heroContent = {
     imageAlt={ctaData.imageAlt}
   />
 
-  <Footer />
 </Layout>