jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

amélioration page /avec-piscine

Browse source
This commit is contained in:
Jalil Arfaoui 2025-01-05 19:13:39 +01:00
parent add7d92d9f
commit b8fa3386c5
2 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/ui/blocks/MainSection.astro
View file

@ -3,37 +3,33 @@
import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro"; import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
// Destructure the props passed to the Astro component // Destructure the props passed to the Astro component
const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props; const { title, subTitle, btnTitle, btnURL } = Astro.props;
// Define TypeScript interface for props // Define TypeScript interface for props
interface Props { interface Props {
title: string; title: string;
subTitle: string; subTitle: string;
btnExists?: boolean;
btnTitle?: string; btnTitle?: string;
btnURL?: string; btnURL?: string;
} }
--- ---
<!-- Root section of the component -->
<section <section
class="mx-auto mt-10 max-w-[85rem] px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-14 2xl:max-w-full" class="mx-auto mt-10 max-w-[85rem] px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-14 2xl:max-w-full"
> >
<div class="max-w-screen-md"> <div class="max-w-screen-md">
<!-- Section title -->
<h1 <h1
class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200" class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200"
> >
{title} {title}
</h1> </h1>
<!-- Section subtitle -->
<p <p
class="mb-8 max-w-prose text-pretty font-normal text-neutral-600 dark:text-neutral-400 sm:text-xl" class="mb-8 max-w-prose text-pretty font-normal text-neutral-600 dark:text-neutral-400 sm:text-xl"
> >
{subTitle} {subTitle}
</p> </p>
<!-- Conditional rendering of PrimaryCTA component if 'btnExists' property is truthy --> <slot />
{ {
btnExists ? ( btnTitle && btnURL ? (
<div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0"> <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<PrimaryCTA title={btnTitle} url={btnURL} /> <PrimaryCTA title={btnTitle} url={btnURL} />
</div> </div>

18
src/pages/avec-piscine.astro
View file

@ -19,6 +19,7 @@ const structuredDescription = {
} satisfies WithContext<WebPage> } satisfies WithContext<WebPage>
import photoDeLaPiscine from "@images/vue-piscine.jpg" import photoDeLaPiscine from "@images/vue-piscine.jpg"
import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
--- ---
<MainLayout <MainLayout
@ -27,10 +28,17 @@ import photoDeLaPiscine from "@images/vue-piscine.jpg"
> >
<MainSection <MainSection
title="Baignez-vous au calme" title="Baignez-vous au calme"
subTitle="Piscine de 4m x 8m, soit 50m3, à l’abri des regards et fraiche toute l’année" subTitle="Piscine de 4m x 8m, soit 50m3, à l’abri des regards et fraiche toute l’année."
btnExists={true} >
btnURL="/pieces" <p class="text-neutral-800 dark:text-neutral-100">
btnTitle="Entrer dans la maison" Piscine avec liner.
/> Filtration par sable Triton, et traitement au chlore. 2 skimmers et une aspiration en fond de piscine.
Évacuation des eaux vers tout à l’égout ou avec les eaux de pluie, au choix.
</p>
</MainSection>
<GrandePhotoCentrale src={photoDeLaPiscine} alt="Photo de la piscine" /> <GrandePhotoCentrale src={photoDeLaPiscine} alt="Photo de la piscine" />
<div class="mb-8">
Vous voulez en savoir plus ?
<PrimaryCTA title="Entrer dans la maison" url="/pieces" />
</div>
</MainLayout> </MainLayout>