Initial commit

src/components/widgets/Features.astro

@@ -0,0 +1,56 @@
+---
+import WidgetWrapper from "./WidgetWrapper.astro";
+import type { FeaturesProps } from "@/types/types";
+import { Icon } from "astro-icon/components";
+import Card from "@/components/ui/Card.astro";
+import Headline from "@/components/ui/Headline.astro";
+
+const {
+  features = [],
+  title,
+  subtitle,
+  tagline,
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props as FeaturesProps;
+
+const { container: containerClassProp = "", ...otherClasses } = classes;
+---
+
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={` ${containerClassProp}`}
+  bg={bg}
+  classes={otherClasses}
+>
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={{
+      container: "max-w-3xl mx-auto text-center",
+    }}
+  />
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    {
+      features.map((feature) => (
+        <Card>
+          {feature.icon && (
+            <div
+              class={`w-12 h-12 rounded-lg flex items-center justify-center mb-6 ${feature.iconClass ? feature.iconClass : "bg-primary/10 text-primary"}`}
+            >
+              <Icon name={feature.icon} class="w-6 h-6" />
+            </div>
+          )}
+          <h3 class="text-xl font-bold text-foreground mb-3">
+            {feature.title}
+          </h3>
+          <p class="text-muted-foreground text-sm">{feature.description}</p>
+        </Card>
+      ))
+    }
+  </div>
+</WidgetWrapper>