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,139 +0,0 @@
|
||||
import imgInterieure from '@/assets/photos/empty-room-blue-wall-with-moulding-and-parquet-fl-2023-11-27-04-52-31-utc.webp'
|
||||
import imgExterieure from '@/assets/Website Content/Photos/wooden-deck-with-sky-2023-11-27-05-29-44-utc.webp'
|
||||
import imgDecoration from '@/assets/Website Content/Photos/Mural_Jerkspot_02.jpg'
|
||||
import imgCommerciale from '@/assets/Website Content/Photos/minimalist-bright-office-room-interior-design-mee-2023-11-27-05-17-04-utc.webp'
|
||||
import imgRenovation from '@/assets/Website Content/Photos/amazing-design-of-a-room-with-doors-and-parquet-fl-2023-11-27-05-33-04-utc.webp'
|
||||
|
||||
export default function TwoRowBentoGridWithThreeColumnSecondRow() {
|
||||
return (
|
||||
<div className="bg-[var(--color-brand-600)] py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2
|
||||
className="text-base/7 font-semibold text-white"
|
||||
style={{ fontFamily: 'var(--font-body)' }}
|
||||
>
|
||||
Nos Services
|
||||
</h2>
|
||||
<p
|
||||
className="mt-2 max-w-lg text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl"
|
||||
style={{ fontFamily: 'var(--font-display)' }}
|
||||
>
|
||||
Des solutions complètes en peinture et décoration
|
||||
</p>
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
||||
|
||||
{/* Peinture intérieure — top left */}
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-xl bg-white max-lg:rounded-t-xl lg:rounded-tl-xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-xl max-lg:rounded-t-xl lg:rounded-tl-xl">
|
||||
<img
|
||||
alt="Peinture intérieure résidentielle"
|
||||
src={imgInterieure.src}
|
||||
className="h-80 object-cover object-left"
|
||||
/>
|
||||
<div className="p-10 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-[var(--color-brand-500)]">Résidentiel</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Peinture intérieure
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Transformation complète de vos espaces intérieurs. Préparation des surfaces, application soignée et finitions impeccables pour tous types de pièces.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl shadow-sm outline outline-black/5 max-lg:rounded-t-xl lg:rounded-tl-xl" />
|
||||
</div>
|
||||
|
||||
{/* Peinture extérieure — top right */}
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-xl bg-white lg:rounded-tr-xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-xl lg:rounded-tr-xl">
|
||||
<img
|
||||
alt="Peinture extérieure résidentielle"
|
||||
src={imgExterieure.src}
|
||||
className="h-80 object-cover object-left lg:object-right"
|
||||
/>
|
||||
<div className="p-10 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-[var(--color-brand-500)]">Résidentiel</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Peinture extérieure
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Protection et embellissement de la façade de votre maison. Travaux résistants aux conditions climatiques du Québec pour une durabilité maximale.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl shadow-sm outline outline-black/5 lg:rounded-tr-xl" />
|
||||
</div>
|
||||
|
||||
{/* Décoration intérieure — bottom left */}
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-xl bg-white lg:rounded-bl-xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-xl lg:rounded-bl-xl">
|
||||
<img
|
||||
alt="Décoration intérieure"
|
||||
src={imgDecoration.src}
|
||||
className="h-80 object-cover object-left"
|
||||
/>
|
||||
<div className="p-10 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-[var(--color-brand-500)]">Résidentiel</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Décoration intérieure
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Conseils personnalisés en couleur et décoration. Effets décoratifs, murales, textures et finitions spécialisées.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl shadow-sm outline outline-black/5 lg:rounded-bl-xl" />
|
||||
</div>
|
||||
|
||||
{/* Peinture commerciale — bottom center */}
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-xl bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-xl">
|
||||
<img
|
||||
alt="Peinture commerciale"
|
||||
src={imgCommerciale.src}
|
||||
className="h-80 object-cover"
|
||||
/>
|
||||
<div className="p-10 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-[var(--color-brand-500)]">Commercial</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Peinture commerciale
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Bureaux, commerces et espaces institutionnels. Travaux planifiés selon votre calendrier pour minimiser les perturbations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
|
||||
{/* Rénovation complète — bottom right */}
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-xl bg-white max-lg:rounded-b-xl lg:rounded-br-xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-xl max-lg:rounded-b-xl lg:rounded-br-xl">
|
||||
<img
|
||||
alt="Rénovation complète"
|
||||
src={imgRenovation.src}
|
||||
className="h-80 object-cover"
|
||||
/>
|
||||
<div className="p-10 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-[var(--color-brand-500)]">Résidentiel</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Rénovation complète
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
||||
Coordination complète de vos travaux de finition. De la peinture aux moulures, un seul entrepreneur pour tous vos projets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-xl shadow-sm outline outline-black/5 max-lg:rounded-b-xl lg:rounded-br-xl" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
export default function WithImageTiles() {
|
||||
return (
|
||||
<div className="overflow-hidden py-32" style={{ backgroundColor: 'var(--color-brand-600)' }}>
|
||||
<div className="mx-auto max-w-7xl px-6 lg:flex lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 lg:mx-0 lg:max-w-none lg:min-w-full lg:flex-none lg:gap-y-8">
|
||||
<div className="lg:col-end-1 lg:w-full lg:max-w-lg lg:pb-8">
|
||||
<h2 className="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
|
||||
Prêt à transformer votre espace?
|
||||
</h2>
|
||||
<p className="mt-6 text-xl/8 text-green-100">
|
||||
Obtenez une soumission gratuite et sans engagement dès aujourd'hui.
|
||||
</p>
|
||||
<p className="mt-6 text-base/7 text-green-200">
|
||||
Peintres décorateurs professionnels à Laval et sur la Rive-Nord. Peinture résidentielle et commerciale,
|
||||
décoration intérieure et extérieure.
|
||||
</p>
|
||||
<div className="mt-10 flex">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2"
|
||||
style={{ color: 'var(--color-brand-600)' }}
|
||||
>
|
||||
Demandez votre soumission
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-start justify-end gap-6 sm:gap-8 lg:contents">
|
||||
<div className="w-0 flex-auto lg:ml-auto lg:w-auto lg:flex-none lg:self-end">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1670272502246-768d249768ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&q=80"
|
||||
className="aspect-7/5 w-148 max-w-none rounded-2xl object-cover max-sm:w-120" style={{ backgroundColor: 'var(--color-brand-700)' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="contents lg:col-span-2 lg:col-end-2 lg:ml-auto lg:flex lg:w-148 lg:items-start lg:justify-end lg:gap-x-8">
|
||||
<div className="order-first flex w-64 flex-none justify-end self-end max-sm:w-40 lg:w-auto">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1605656816944-971cd5c1407f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
|
||||
className="aspect-4/3 w-[24rem] max-w-none flex-none rounded-2xl object-cover" style={{ backgroundColor: 'var(--color-brand-700)' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-96 flex-auto justify-end lg:w-auto lg:flex-none">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=842&q=80"
|
||||
className="aspect-7/5 w-148 max-w-none flex-none rounded-2xl object-cover max-sm:w-120" style={{ backgroundColor: 'var(--color-brand-700)' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden sm:block sm:w-0 sm:flex-auto lg:w-auto lg:flex-none">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
|
||||
className="aspect-4/3 w-[24rem] max-w-none rounded-2xl object-cover" style={{ backgroundColor: 'var(--color-brand-700)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
98
src/components/ui/hero.tsx
Normal file
98
src/components/ui/hero.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/components/ui/carousel";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import general from "../../content/settings/general.json";
|
||||
import photo1 from "@/assets/photos/empty-room-blue-wall-with-moulding-and-parquet-fl-2023-11-27-04-52-31-utc.webp";
|
||||
import photo2 from "@/assets/photos/the-attic-of-a-home-with-white-ceilings-and-white-2023-11-27-05-27-44-utc.webp";
|
||||
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";
|
||||
|
||||
export type HeroContent = {
|
||||
pillCta: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
cta: string;
|
||||
ctaHref: string;
|
||||
};
|
||||
|
||||
const slides = [
|
||||
{ src: photo1.src, alt: "Peinture intérieure" },
|
||||
{ src: photo2.src, alt: "Décoration murale" },
|
||||
{ src: photo3.src, alt: "Finition de qualité" },
|
||||
{ src: photo4.src, alt: "Chambre" },
|
||||
{ src: photo5.src, alt: "Pièce lumineuse" },
|
||||
];
|
||||
|
||||
const autoplayPlugin = Autoplay({
|
||||
delay: 5000,
|
||||
stopOnInteraction: false,
|
||||
stopOnMouseEnter: false,
|
||||
});
|
||||
|
||||
export default function Hero({ content }: { content: HeroContent }) {
|
||||
const { pillCta, title, subtitle, cta, ctaHref } = content;
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<div className="relative isolate overflow-hidden h-screen min-h-[600px]">
|
||||
<Carousel
|
||||
className="absolute inset-0 -z-10 size-full [&_[data-slot='carousel-content']]:h-full"
|
||||
opts={{ loop: true, dragFree: false }}
|
||||
plugins={[autoplayPlugin]}
|
||||
>
|
||||
<CarouselContent className="-ml-0 h-full">
|
||||
{slides.map((slide, index) => (
|
||||
<CarouselItem key={index} className="pl-0 h-full relative">
|
||||
<img
|
||||
src={slide.src}
|
||||
alt={slide.alt}
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</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="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>
|
||||
<span className="text-white/30" aria-hidden>
|
||||
·
|
||||
</span>
|
||||
<span>{general.serviceArea}</span>
|
||||
<span className="text-white/30" aria-hidden>
|
||||
·
|
||||
</span>
|
||||
<span>{pillCta}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
className="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
|
||||
style={{ fontFamily: "var(--font-display)" }}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">
|
||||
{subtitle}
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center">
|
||||
<a
|
||||
href={ctaHref}
|
||||
className="rounded-md bg-[var(--color-brand-600)] px-3.5 py-2.5 text-sm font-semibold 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}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Dialog, DialogPanel } from '@headlessui/react'
|
||||
import heroVideoMp4 from '@/assets/videos/cachet-deco.mp4'
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import { defaultLocale } from '../../../i18n/config'
|
||||
import { t } from '../../../i18n/utils'
|
||||
import general from '../../../content/settings/general.json'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Landing 1', href: '/landing-1' },
|
||||
{ name: 'Landing 2', href: '/landing-2' },
|
||||
{ name: 'Landing 3', href: '/landing-3' },
|
||||
]
|
||||
|
||||
export default function SimpleCenteredWithBackgroundImage() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<header className="absolute inset-x-0 top-0 z-50 bg-[var(--color-brand-600)]">
|
||||
<nav aria-label="Global" className="flex items-center justify-between p-2 lg:px-8">
|
||||
<div className="flex lg:flex-1">
|
||||
<a href="/" className="-m-1.5 p-1 m-1 bg-[white] rounded-full">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<Bars3Icon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:gap-x-12">
|
||||
{navigation.map((item) => (
|
||||
<a key={item.name} href={item.href} className="text-sm/6 font-semibold text-white hover:underline underline-offset-4 decoration-2">
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-[var(--color-brand-600)] shadow-sm ring-1 ring-inset ring-white/30 hover:bg-white/90 transition-colors"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
||||
<div className="fixed inset-0 z-50" />
|
||||
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-gray-900 dark:sm:ring-gray-100/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<a href="/" className="-m-1.5 p-1.5 block sm:hidden">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
<XMarkIcon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-500/10 dark:divide-gray-500/25">
|
||||
<div className="space-y-2 py-6">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-center bg-[var(--color-brand-600)] text-white ring-1 ring-inset ring-[var(--color-brand-600)] hover:bg-[var(--color-brand-700)]"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div className="relative isolate min-h-screen overflow-hidden pt-14">
|
||||
<video
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
className="absolute inset-0 -z-10 size-full object-cover"
|
||||
>
|
||||
<source src={heroVideoMp4} type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 -z-10 bg-black/50" />
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="grid min-h-[calc(100vh-3.5rem)] grid-cols-1 items-center gap-12 py-20 lg:grid-cols-[1fr_auto] lg:gap-12 lg:py-24">
|
||||
<div>
|
||||
<p className="mb-4 inline-block text-sm font-bold uppercase tracking-wider text-white/65">
|
||||
{general.tagline}
|
||||
</p>
|
||||
<h1 className="mb-5 text-4xl font-medium leading-tight text-white sm:text-5xl lg:text-[2.5rem]" style={{ fontFamily: 'var(--font-display)' }}>
|
||||
{t(defaultLocale, 'hero.title')}
|
||||
</h1>
|
||||
<p className="mb-9 max-w-[540px] text-xl leading-relaxed text-white/82">
|
||||
{t(defaultLocale, 'hero.subtitle')}
|
||||
</p>
|
||||
<div className="mb-8 flex flex-wrap gap-4">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="inline-flex items-center gap-2 rounded-md bg-white px-8 py-3.5 text-lg font-semibold text-[var(--color-brand-600)] transition-colors hover:bg-[var(--color-brand-50)]"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<polyline points="14,2 14,8 20,8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
<polyline points="10,9 9,9 8,9" />
|
||||
</svg>
|
||||
{t(defaultLocale, 'hero.cta')}
|
||||
</a>
|
||||
<a
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 rounded-md border-2 border-white px-6 py-3 text-base font-semibold text-white transition-colors hover:bg-white/10"
|
||||
>
|
||||
{t(defaultLocale, 'cta.learn_more')}
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12,5 19,12 12,19" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 gap-x-3.5 text-sm text-white/65">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
<span>RBQ {general.rbq}</span>
|
||||
</div>
|
||||
<span className="text-white/30" aria-hidden>·</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
<span>{general.serviceArea}</span>
|
||||
</div>
|
||||
<span className="text-white/30" aria-hidden>·</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
<span>Soumission gratuite</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden items-center justify-center lg:flex" aria-hidden>
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
alt=""
|
||||
width={320}
|
||||
height={320}
|
||||
loading="eager"
|
||||
className="h-[280px] w-[280px] object-contain opacity-[0.18] brightness-0 invert"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Dialog, DialogPanel } from '@headlessui/react'
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Accueil', href: '/' },
|
||||
{ name: 'Services', href: '/services' },
|
||||
{ name: 'Contact', href: '/contact' },
|
||||
]
|
||||
|
||||
export default function SimpleCenteredWithBackgroundImage() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<header className="absolute inset-x-0 top-0 z-50">
|
||||
<nav aria-label="Global" className="flex items-center justify-between p-6 lg:px-8">
|
||||
<div className="flex lg:flex-1">
|
||||
<a href="/" className="-m-1.5 p-1.5">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<Bars3Icon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:gap-x-12">
|
||||
{navigation.map((item) => (
|
||||
<a key={item.name} href={item.href} className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:underline underline-offset-4 decoration-2">
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
||||
<div className="fixed inset-0 z-50" />
|
||||
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-gray-900 dark:sm:ring-gray-100/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<a href="/" className="-m-1.5 p-1.5">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
<XMarkIcon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-500/10 dark:divide-gray-500/25">
|
||||
<div className="space-y-2 py-6">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div className="relative isolate overflow-hidden pt-14">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
|
||||
className="absolute inset-0 -z-10 size-full object-cover not-dark:hidden"
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=fff&sat=-100&exp=15&blend-mode=overlay"
|
||||
className="absolute inset-0 -z-10 size-full object-cover opacity-10 dark:hidden"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20 dark:text-gray-400 dark:ring-white/10 dark:hover:ring-white/20">
|
||||
Announcing our next round of funding.{' '}
|
||||
<a href="#" className="font-semibold text-indigo-600 dark:text-indigo-400">
|
||||
<span aria-hidden="true" className="absolute inset-0" />
|
||||
Read more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h1 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl dark:text-white">
|
||||
Data to enrich your online business
|
||||
</h1>
|
||||
<p className="mt-8 text-lg font-medium text-pretty text-gray-600 sm:text-xl/8 dark:text-gray-400">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
|
||||
fugiat veniam occaecat.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a
|
||||
href="#"
|
||||
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" className="text-sm/6 font-semibold text-gray-900 dark:text-white">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Dialog, DialogPanel } from "@headlessui/react";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/components/ui/carousel";
|
||||
import { defaultLocale } from "../../../i18n/config";
|
||||
import { t } from "../../../i18n/utils";
|
||||
import general from "../../../content/settings/general.json";
|
||||
import photo1 from "@/assets/photos/empty-room-blue-wall-with-moulding-and-parquet-fl-2023-11-27-04-52-31-utc.webp";
|
||||
import photo2 from "@/assets/photos/the-attic-of-a-home-with-white-ceilings-and-white-2023-11-27-05-27-44-utc.webp";
|
||||
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";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Landing 1", href: "/landing-1" },
|
||||
{ name: "Landing 2", href: "/landing-2" },
|
||||
{ name: "Landing 3", href: "/landing-3" },
|
||||
|
||||
];
|
||||
|
||||
const slides = [
|
||||
{ src: photo1.src, alt: "Peinture intérieure" },
|
||||
{ src: photo2.src, alt: "Décoration murale" },
|
||||
{ src: photo3.src, alt: "Finition de qualité" },
|
||||
{ src: photo4.src, alt: "Chambre" },
|
||||
{ src: photo5.src, alt: "Pièce lumineuse" },
|
||||
];
|
||||
|
||||
const autoplayPlugin = Autoplay({
|
||||
delay: 5000,
|
||||
stopOnInteraction: false,
|
||||
stopOnMouseEnter: false,
|
||||
});
|
||||
|
||||
export default function SimpleCenteredWithImageSlider() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<header className="absolute inset-x-0 top-0 z-50">
|
||||
<nav
|
||||
aria-label="Global"
|
||||
className="flex items-center justify-between p-6 lg:px-8"
|
||||
>
|
||||
<div className="flex lg:flex-1">
|
||||
<a href="/" className="flex items-center bg-[white] rounded-3xl shadow-md
|
||||
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 ">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</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">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-[var(--color-brand-100)] hover:text-[var(--color-brand-300)]"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<Bars3Icon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:gap-x-12">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm/6 font-semibold text-white hover:underline underline-offset-4 decoration-2 drop-shadow"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="rounded-md bg-[var(--color-brand-600)] px-4 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-[var(--color-brand-600)] hover:bg-[var(--color-brand-700)] transition-colors"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<Dialog
|
||||
open={mobileMenuOpen}
|
||||
onClose={setMobileMenuOpen}
|
||||
className="lg:hidden"
|
||||
>
|
||||
<div className="fixed inset-0 z-50" />
|
||||
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-gray-900 dark:sm:ring-gray-100/10">
|
||||
<div className="flex items-center justify-between sm:justify-end lg:justify-between">
|
||||
<a href="/" className="flex sm:hidden lg:flex items-center bg-[white] rounded-3xl
|
||||
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 ">
|
||||
<span className="sr-only">Cachet Peintres Décorateurs</span>
|
||||
<img
|
||||
alt="Cachet Peintres Décorateurs"
|
||||
src="/images/logo.png"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xl sm:text-2xl md:text-3xl font-semibold text-brand-600 uppercase">{general.brandName}</p>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
<XMarkIcon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-500/10 dark:divide-gray-500/25">
|
||||
<div className="space-y-2 py-6">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="py-6">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-center bg-[var(--color-brand-600)] text-white ring-1 ring-inset ring-[var(--color-brand-600)] hover:bg-[var(--color-brand-700)]"
|
||||
>
|
||||
Soumission gratuite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
{/* Full-screen hero with background carousel */}
|
||||
<div className="relative isolate overflow-hidden h-screen min-h-[600px]">
|
||||
{/* Background carousel */}
|
||||
<Carousel
|
||||
className="absolute inset-0 -z-10 size-full [&_[data-slot='carousel-content']]:h-full"
|
||||
opts={{ loop: true, dragFree: false }}
|
||||
plugins={[autoplayPlugin]}
|
||||
>
|
||||
<CarouselContent className="-ml-0 h-full">
|
||||
{slides.map((slide, index) => (
|
||||
<CarouselItem key={index} className="pl-0 h-full relative">
|
||||
<img
|
||||
src={slide.src}
|
||||
alt={slide.alt}
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
{/* Dark overlay for text legibility */}
|
||||
<div className="absolute inset-0 bg-black/50" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
{/* Hero text content */}
|
||||
<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="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>
|
||||
<span className="text-white/30" aria-hidden>·</span>
|
||||
<span>{general.serviceArea}</span>
|
||||
<span className="text-white/30" aria-hidden>·</span>
|
||||
<span>Soumission gratuite</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
className="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
|
||||
style={{ fontFamily: "var(--font-display)" }}
|
||||
>
|
||||
{t(defaultLocale, "hero.title")}
|
||||
</h1>
|
||||
<p className="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8">
|
||||
{t(defaultLocale, "hero.subtitle")}
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center">
|
||||
<a
|
||||
href="/soumission"
|
||||
className="rounded-md bg-[var(--color-brand-600)] px-3.5 py-2.5 text-sm font-semibold 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)]"
|
||||
>
|
||||
{t(defaultLocale, "hero.cta")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import imgBg from '@/assets/Website Content/Photos/choosing-wall-paints-2023-11-27-05-09-01-utc.webp'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Certifié RBQ',
|
||||
description: 'Entrepreneur certifié par la Régie du Bâtiment du Québec (RBQ : 5839 8736 01). Travaux assurés et conformes aux normes.',
|
||||
},
|
||||
{
|
||||
name: 'Ponctualité et fiabilité',
|
||||
description: 'Nous respectons nos engagements. Les délais sont tenus et votre projet est livré à temps, selon les standards convenus.',
|
||||
},
|
||||
{
|
||||
name: 'Matériaux de qualité',
|
||||
description: 'Nous utilisons exclusivement des peintures et produits de première qualité pour un résultat durable et esthétique.',
|
||||
},
|
||||
{
|
||||
name: 'Équipe professionnelle',
|
||||
description: 'Nos peintres décorateurs sont formés et expérimentés. Chaque détail compte pour nous, de la préparation à la finition.',
|
||||
},
|
||||
]
|
||||
|
||||
export default function WithFadingImage() {
|
||||
return (
|
||||
<div className="bg-[linear-gradient(to_bottom,white_0%,white_75%,var(--color-brand-50)_100%)]">
|
||||
<div aria-hidden="true" className="relative">
|
||||
<img
|
||||
alt="Peintres décorateurs au travail"
|
||||
src={imgBg.src}
|
||||
className="h-96 w-full object-cover object-center "
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-white" />
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto -mt-12 max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
|
||||
<h2
|
||||
className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
|
||||
style={{ fontFamily: 'var(--font-display)' }}
|
||||
>
|
||||
Pourquoi choisir Cachet?
|
||||
</h2>
|
||||
<p className="mt-4 text-gray-500" style={{ fontFamily: 'var(--font-body)' }}>
|
||||
Une expertise reconnue au service de votre satisfaction
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-4 lg:gap-x-8">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="border-t-2 border-[var(--color-brand-500)] pt-4">
|
||||
<dt
|
||||
className="font-semibold text-[var(--color-gray-600)]"
|
||||
style={{ fontFamily: 'var(--font-body)' }}
|
||||
>
|
||||
{feature.name}
|
||||
</dt>
|
||||
<dd className="mt-2 text-sm text-gray-500 leading-relaxed">{feature.description}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -42,7 +42,7 @@ function classNames(...classes: string[]) {
|
||||
|
||||
export default function Grid() {
|
||||
return (
|
||||
<div className="relative isolate bg-brand-50 pt-24 pb-32 sm:pt-32 dark:bg-gray-900">
|
||||
<div className="relative isolate bg-brand-50 pt-24 pb-32 sm:pt-32 dark:bg-brand-50">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu overflow-hidden opacity-30 blur-3xl"
|
||||
Reference in New Issue
Block a user