Vexorium brand: update src/components/FeatureCard.tsx

src/components/FeatureCard.tsx

@@ -20,15 +20,28 @@ export function FeatureCard({
   return (
     <Component
       onClick={onClick}
-      className={`group relative flex flex-col items-center rounded-[14px] border-[2px] border-[rgba(220,210,180,0.45)] bg-[linear-gradient(160deg,rgba(28,28,28,0.97)_0%,rgba(10,10,10,0.99)_100%)] px-4 py-4 text-center transition-all duration-300 hover:border-[rgba(235,225,195,0.7)] hover:-translate-y-[3px] hover:shadow-[0_6px_24px_rgba(0,0,0,0.5),0_0_15px_rgba(220,210,180,0.07)] ${onClick ? "cursor-pointer" : ""} ${className}`}
+      className={`group relative flex flex-col items-center rounded-xl px-4 py-4 text-center transition-all duration-300 hover:-translate-y-[3px] ${onClick ? "cursor-pointer" : ""} ${className}`}
+      style={{
+        border: "1px solid rgba(0,255,255,0.15)",
+        background: "linear-gradient(160deg, rgba(0,255,255,0.04) 0%, rgba(5,5,21,0.95) 100%)",
+      }}
+      onMouseEnter={e => {
+        (e.currentTarget as HTMLElement).style.borderColor = "rgba(0,255,255,0.4)";
+        (e.currentTarget as HTMLElement).style.boxShadow = "0 0 20px rgba(0,255,255,0.1)";
+      }}
+      onMouseLeave={e => {
+        (e.currentTarget as HTMLElement).style.borderColor = "rgba(0,255,255,0.15)";
+        (e.currentTarget as HTMLElement).style.boxShadow = "none";
+      }}
     >
-      <div className="pointer-events-none absolute inset-0 rounded-[14px] bg-[radial-gradient(ellipse_at_50%_0%,rgba(235,225,190,0.07)_0%,transparent_55%)]" />
-
+      <div className="pointer-events-none absolute inset-0 rounded-xl"
+        style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(0,255,255,0.06) 0%, transparent 60%)" }}
+      />
       <div className="relative mb-2 flex h-10 w-10 items-center justify-center">
         {icon}
       </div>
-      <p className="relative text-xs font-medium text-[#f0f0f0]">{title}</p>
-      <p className="relative mt-1 text-[11px] leading-relaxed text-[#888888]">
+      <p className="relative text-xs font-semibold" style={{ color: "#e0e0f0", fontFamily: "'Exo 2', sans-serif" }}>{title}</p>
+      <p className="relative mt-1 text-[11px] leading-relaxed" style={{ color: "rgba(224,224,240,0.5)" }}>
         {description}
       </p>
     </Component>