a9b4e8c0dc
Refactored the image URL in testimonials and reduced redundancy in the FeaturesStats and accordion components, enhancing code readability. Also, implemented dynamic id generation in the FAQ component, improving scalability and maintainability. Added new pages to the website and updated the meta information, improving SEO.
71 lines
1.8 KiB
Text
71 lines
1.8 KiB
Text
---
|
|
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>
|