56 lines
1.8 KiB
Plaintext
56 lines
1.8 KiB
Plaintext
---
|
|
import MaxWidthWrapper from "./other/max.width.wrapper";
|
|
import SectionHeading from "./atoms/section.heading";
|
|
import { cn } from "@/lib/utils";
|
|
import Title from "./atoms/title";
|
|
|
|
const { variant = "lime", services } = Astro.props;
|
|
|
|
const colorMap =
|
|
variant === "lime"
|
|
? {
|
|
primary: "bg-lime-100 text-lime-600",
|
|
secondary: "bg-lime-100 text-lime-700",
|
|
tertiary: "bg-lime-100 text-lime-600",
|
|
quaternary: "bg-lime-100 text-lime-700",
|
|
}
|
|
: {
|
|
primary: "bg-amber-100 text-amber-600",
|
|
secondary: "bg-amber-100 text-amber-700",
|
|
tertiary: "bg-amber-100 text-amber-600",
|
|
quaternary: "bg-amber-100 text-amber-700",
|
|
};
|
|
---
|
|
|
|
<MaxWidthWrapper id="services" className="w-full space-y-20">
|
|
<SectionHeading
|
|
title="Everything you need in one package"
|
|
subtitle="Our Services"
|
|
/>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
|
{
|
|
services.map((service) => (
|
|
<div
|
|
class="flex items-center text-center flex-col gap-4"
|
|
{...service.aos}
|
|
>
|
|
<div
|
|
class={cn(
|
|
"grid place-items-center w-20 h-20 rounded-full",
|
|
// @ts-ignore
|
|
colorMap[service.color],
|
|
)}
|
|
>
|
|
<service.icon className="h-8 w-auto" />
|
|
</div>
|
|
<Title title={service.title} size="h3" />
|
|
<span class="text-sm text-gray-700">
|
|
{service.description}
|
|
</span>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</MaxWidthWrapper>
|