fix: revert colors for FeatureCard (#1045)

Author: ken-matsui

app/_components/feature-card.tsx

@@ -6,28 +6,45 @@ interface FeatureCardProps {
     icon: IconDefinition;
     title: string;
     description: string;
-    gradientFrom?: string;
-    gradientTo?: string;
-    borderColor?: string;
+    colorScheme?: "primary" | "blue" | "purple" | "green" | "orange" | "red";
     className?: string;
 }
 
+const cardColorVariants = {
+    primary:
+        "bg-gradient-to-br from-primary/5 to-secondary/10 border-primary/20",
+    blue: "bg-gradient-to-br from-primary/5 to-primary/10 border-primary/20",
+    purple: "bg-gradient-to-br from-secondary/5 to-secondary/10 border-secondary/20",
+    green: "bg-gradient-to-br from-success/5 to-success/10 border-success/20",
+    orange: "bg-gradient-to-br from-warning/5 to-warning/10 border-warning/20",
+    red: "bg-gradient-to-br from-danger/5 to-danger/10 border-danger/20",
+};
+
+const iconColorMapping = {
+    primary: "primary" as const,
+    blue: "blue" as const,
+    purple: "purple" as const,
+    green: "green" as const,
+    orange: "orange" as const,
+    red: "red" as const,
+};
+
 export function FeatureCard({
     icon,
     title,
     description,
-    gradientFrom = "primary/5",
-    gradientTo = "primary/10",
-    borderColor = "primary/20",
+    colorScheme = "primary",
     className = "",
 }: FeatureCardProps) {
     return (
-        <Card
-            className={`bg-gradient-to-br from-${gradientFrom} to-${gradientTo} border-${borderColor} ${className}`}
-        >
+        <Card className={`${cardColorVariants[colorScheme]} ${className}`}>
             <CardHeader className="pb-4">
                 <div className="flex items-center gap-3">
-                    <GradientIcon icon={icon} size="lg" />
+                    <GradientIcon
+                        icon={icon}
+                        size="lg"
+                        colorScheme={iconColorMapping[colorScheme]}
+                    />
                     <h3 className="text-xl font-semibold">{title}</h3>
                 </div>
             </CardHeader>

app/_components/gradient-icon.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 interface GradientIconProps {
     icon: IconDefinition;
     size?: "sm" | "md" | "lg" | "xl";
+    colorScheme?: "primary" | "blue" | "purple" | "green" | "orange" | "red";
     className?: string;
     iconClassName?: string;
 }
@@ -22,15 +23,25 @@ const iconSizeClasses = {
     xl: "text-xl",
 };
 
+const colorVariants = {
+    primary: "bg-gradient-to-br from-primary-500 to-secondary-500",
+    blue: "bg-gradient-to-br from-primary-500 to-primary-600",
+    purple: "bg-gradient-to-br from-secondary-500 to-secondary-600",
+    green: "bg-gradient-to-br from-success-500 to-success-600",
+    orange: "bg-gradient-to-br from-warning-500 to-warning-600",
+    red: "bg-gradient-to-br from-danger-500 to-danger-600",
+};
+
 export function GradientIcon({
     icon,
     size = "md",
+    colorScheme = "primary",
     className = "",
     iconClassName = "",
 }: GradientIconProps) {
     return (
         <div
-            className={`flex items-center justify-center ${sizeClasses[size]} bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg shadow-sm ${className}`}
+            className={`flex items-center justify-center ${sizeClasses[size]} ${colorVariants[colorScheme]} rounded-lg shadow-sm ${className}`}
         >
             <FontAwesomeIcon
                 icon={icon}

app/page.tsx

@@ -133,51 +133,42 @@ export default function Home() {
                             icon={faBolt}
                             title="Lightning Fast"
                             description="Optimized build system with parallel processing and smart caching for blazing fast builds."
+                            colorScheme="blue"
                         />
 
                         <FeatureCard
                             icon={faCode}
                             title="Developer Friendly"
                             description="Intuitive CLI with helpful error messages and comprehensive documentation."
-                            gradientFrom="secondary/5"
-                            gradientTo="secondary/10"
-                            borderColor="secondary/20"
+                            colorScheme="purple"
                         />
 
                         <FeatureCard
                             icon={faBox}
                             title="Rich Ecosystem"
                             description="Growing ecosystem of C++ packages with seamless dependency management."
-                            gradientFrom="success/5"
-                            gradientTo="success/10"
-                            borderColor="success/20"
+                            colorScheme="green"
                         />
 
                         <FeatureCard
                             icon={faCog}
                             title="Zero Configuration"
                             description="Works out of the box with sensible defaults. No complex setup required."
-                            gradientFrom="warning/5"
-                            gradientTo="warning/10"
-                            borderColor="warning/20"
+                            colorScheme="orange"
                         />
 
                         <FeatureCard
                             icon={faRocket}
                             title="Modern Standards"
                             description="Built with modern C++ standards and best practices in mind."
-                            gradientFrom="danger/5"
-                            gradientTo="danger/10"
-                            borderColor="danger/20"
+                            colorScheme="red"
                         />
 
                         <FeatureCard
                             icon={faHouseChimneyWindow}
                             title="Cross Platform"
                             description="Works seamlessly on macOS and Linux with consistent behavior."
-                            gradientFrom="primary/5"
-                            gradientTo="secondary/10"
-                            borderColor="primary/20"
+                            colorScheme="primary"
                         />
                     </div>
                 </div>