VIBN Frontend for Coolify deployment

marketing/components/features.tsx

@@ -0,0 +1,32 @@
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Features() {
+  return (
+    <section id="features" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
+        <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl text-center">
+          {homepage.features.title}
+        </h2>
+        <p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">
+          {homepage.features.description}
+        </p>
+      </div>
+      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {homepage.features.list.map((feature, index) => (
+          <Card key={index} className="transition-all hover:border-primary/50">
+            <CardHeader>
+              <CardTitle className="text-lg">{feature.title}</CardTitle>
+              <CardDescription className="text-base leading-relaxed">
+                {feature.description}
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+      </div>
+    </section>
+  );
+}
+