58678ed276
All import paths to UI elements in various components have been updated following a directory restructure. The change helps to better organize components within the 'sections' and 'ui' directories.
78 lines
2.2 KiB
Text
78 lines
2.2 KiB
Text
---
|
|
// Import the necessary components
|
|
import StatsBig from "../ui/blocks/StatsBig.astro";
|
|
import StatsSmall from "../ui/blocks/StatsSmall.astro";
|
|
// Get values from Astro's builtin props
|
|
const { title, subTitle } = Astro.props;
|
|
// TypeScript interface for the properties
|
|
interface Props {
|
|
title: string;
|
|
subTitle: string;
|
|
}
|
|
|
|
// TypeScript type for the statistics
|
|
type Stat = {
|
|
stat: string;
|
|
description: string;
|
|
};
|
|
|
|
// An array of statistics, each being an object that conforms to the above `Stat` 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",
|
|
},
|
|
];
|
|
---
|
|
|
|
<section
|
|
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">
|
|
<!-- Main title -->
|
|
<h2
|
|
class="mb-4 text-balance text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200"
|
|
>
|
|
{title}
|
|
</h2>
|
|
<!-- Subtitle -->
|
|
<p
|
|
class="mb-16 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-xl"
|
|
>
|
|
{subTitle}
|
|
</p>
|
|
</div>
|
|
<!-- Grid container for statistics -->
|
|
<div class="grid items-center gap-6 lg:grid-cols-12 lg:gap-12">
|
|
<!-- First grid item, showing a big statistics -->
|
|
<div class="lg:col-span-4">
|
|
<StatsBig
|
|
title="96%"
|
|
subTitle="of our clients rate their experience with ScrewFast as exceptional"
|
|
/>
|
|
</div>
|
|
<!-- Second grid item, showing multiple small statistics -->
|
|
<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"
|
|
>
|
|
<!-- Iterate over the 'stats' array and create a 'StatsSmall' component for each object in the array -->
|
|
{
|
|
stats.map((stat) => (
|
|
<StatsSmall title={stat.stat} subTitle={stat.description} />
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|