Marketing Website

frontend/src/marketing/components/FeatureGrid.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
+
+interface FeatureItem {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  link?: { label: string; href: string };
+}
+
+interface FeatureGridProps {
+  features: FeatureItem[];
+}
+
+const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-24">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {features.map((feature) => (
+          <div
+            key={feature.title}
+            className="relative rounded-3xl border border-white/10 bg-gradient-to-br from-white/8 via-transparent to-white/0 p-8 flex flex-col gap-4 group hover:border-brand-400/40 transition"
+          >
+            <div className="size-12 rounded-2xl bg-brand-500/10 border border-brand-500/30 flex items-center justify-center text-brand-200">
+              {feature.icon}
+            </div>
+            <h3 className="text-xl font-semibold text-white">{feature.title}</h3>
+            <p className="text-sm text-white/60 leading-relaxed">
+              {feature.description}
+            </p>
+            {feature.link && (
+              <a
+                href={feature.link.href}
+                className="inline-flex items-center gap-2 text-sm font-semibold text-brand-200 hover:text-brand-100"
+              >
+                {feature.link.label}
+                <ArrowUpRightIcon className="h-4 w-4" />
+              </a>
+            )}
+            <div className="absolute inset-0 rounded-3xl border border-white/0 group-hover:border-brand-500/30 transition" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FeatureGrid;
+