initial commit

src/components/ServicesSection.astro

@@ -0,0 +1,55 @@
+---
+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>