site rebuild

frontend/src/marketing/components/FeatureGrid.tsx

@@ -13,32 +13,42 @@ interface FeatureGridProps {
 }
 
 const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
+  const iconColors = [
+    "from-[#0693e3] to-[#0472b8]", // Blue
+    "from-[#0bbf87] to-[#08966b]", // Green
+    "from-[#ff7a00] to-[#cc5f00]", // Amber
+    "from-[#5d4ae3] to-[#3a2f94]", // Purple
+  ];
+
   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-slate-200 bg-white p-8 flex flex-col gap-4 group hover:border-brand-400 transition shadow-sm hover:shadow-md"
-          >
-            <div className="size-12 rounded-2xl bg-brand-100 border border-brand-300 flex items-center justify-center text-brand-600">
-              {feature.icon}
+        {features.map((feature, index) => {
+          const gradient = iconColors[index % iconColors.length];
+          return (
+            <div
+              key={feature.title}
+              className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-4 group hover:border-[#0693e3]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
+            >
+              <div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
+              <p className="text-sm text-slate-600 leading-relaxed">
+                {feature.description}
+              </p>
+              {feature.link && (
+                <a
+                  href={feature.link.href}
+                  className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all"
+                >
+                  {feature.link.label}
+                  <ArrowUpRightIcon className="h-4 w-4" />
+                </a>
+              )}
             </div>
-            <h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
-            <p className="text-sm text-slate-600 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-600 hover:text-brand-700"
-              >
-                {feature.link.label}
-                <ArrowUpRightIcon className="h-4 w-4" />
-              </a>
-            )}
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );