achat-maison-albi-fr/src/components/FeaturesStats.astro

72 lines
1.8 KiB
Text
Raw Normal View History

---
import StatsBig from "../components/ui/blocks/StatsBig.astro";
import StatsSmall from "../components/ui/blocks/StatsSmall.astro";
const { title, subTitle } = Astro.props;
interface Props {
title: string;
subTitle: string;
}
/* TypeScript type for testimonials. */
type Stat = {
stat: string;
description: string;
};
/* An array of testimonials, each being an object that conforms to the above `Testimonial` type. */
const stats: Stat[] = [
{
stat: "99.8%",
description: "project completion rate",
},
{
stat: "5,000+",
description: "successful installations",
},
{
stat: "85%",
description: "client growth year-over-year",
},
];
---
<div
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
<div class="max-w-screen-md">
<h2
class="mb-4 text-balance text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200"
>
{title}
</h2>
<p
class="mb-16 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-xl"
>
{subTitle}
</p>
</div>
<div class="grid items-center gap-6 lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-4">
<StatsBig
title="96%"
subTitle="of our clients rate their experience with ScrewFast as exceptional"
/>
</div>
<div
class="relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-neutral-300 lg:before:dark:bg-neutral-700"
>
<div
class="grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3"
>
{
stats.map((stat) => (
<StatsSmall title={stat.stat} subTitle={stat.description} />
))
}
</div>
</div>
</div>
</div>