improve colors and layout

components/CategoryCard.tsx

@@ -12,40 +12,48 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
   description,
   status,
   graphic: Graphic,
-  slug
+  slug,
 }) => {
   const { bg, text, gradient, iconBg } = getColorConfig(colorName);
   const isComingSoon = status === 'Coming Soon';
 
-  return (
-    <div className={`rounded-xl p-4 text-white w-92 h-[380px] flex flex-col relative shadow-lg transition-transform duration-300 ease-in-out hover:scale-105 ${gradient}`}>
+  const CardContent = () => (
+    <>
       {(status === 'New' || status === 'Coming Soon') && (
-        <div className={`absolute top-2 right-2 ${bg} ${text} text-xs font-bold py-1 px-2 rounded-full`}>
+        <div className={`absolute top-4 right-4 ${bg} ${text} text-xs font-bold py-1 px-2 rounded-full`}>
           {status}
         </div>
       )}
-      <div className="flex items-center mb-3">
-        <div className={`${iconBg} ${text} p-1.5 rounded-full mr-2`}>
-          <Icon size={20} />
+      <div className="mb-2">
+        <div className="flex items-center">
+          <div className={`${iconBg} ${text} p-2 rounded-full mr-3`}>
+            <Icon size={20} />
+          </div>
+          <h2 className="text-xl font-bold">{title}</h2>
         </div>
-        <h2 className="text-xl font-bold">{title}</h2>
       </div>
-      <div className="mb-3 flex-grow">
+      <div className="flex-grow px-8 py-4"> 
         <Graphic />
       </div>
-      <p className="text-sm font-medium mb-3 leading-tight">{description}</p>
+      <p className="text-sm font-medium leading-tight mt-2">{description}</p>
+    </>
+  );
+
+  return (
+    <div className={`rounded-xl p-6 text-white w-92 h-72 flex flex-col relative shadow-lg transition-transform duration-300 ease-in-out hover:scale-105 ${gradient}`}>
       {isComingSoon ? (
-        <button 
-          className="w-full bg-white opacity-50 cursor-not-allowed py-2 px-3 rounded-lg text-sm transition-colors mt-auto text-black font-extrabold"
-          disabled
-        >
-          Coming Soon
-        </button>
+        <>
+          <CardContent />
+          <button 
+            className="w-full bg-white opacity-50 cursor-not-allowed py-2 px-3 rounded-lg text-xs transition-colors mt-3 text-black font-extrabold"
+            disabled
+          >
+            Coming Soon
+          </button>
+        </>
       ) : (
-        <Link href={`/categories/${slug}`} passHref>
-          <a className={`w-full bg-white ${text} py-2 px-3 rounded-lg text-sm font-semibold transition-colors mt-auto text-center hover:bg-opacity-90`}>
-            View Tools
-          </a>
+        <Link href={`/category/${slug}`} className="flex flex-col flex-grow">
+          <CardContent />
         </Link>
       )}
     </div>

lib/categories.tsx

@@ -14,7 +14,7 @@ export const categories: Category[] = [
     slug: "segment",
     icon: Scissors,
     description: "Slice and dice images with precision. Carve out objects and backgrounds like a digital sculptor.",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "indigo",
     graphic: SegmentationIcon
   },
@@ -23,7 +23,7 @@ export const categories: Category[] = [
     slug: "embed",
     icon: Sparkles,
     description: "Transform words and pixels into mathematical magic.",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "teal",
     graphic: EmbeddingIcon
   },
@@ -32,7 +32,7 @@ export const categories: Category[] = [
     slug: "transcribe",
     icon: Mic,
     description: "AI that hears all and forgets nothing (except the 'uhms').",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "rose",
     graphic: TranscriptionIcon
   },
@@ -41,7 +41,7 @@ export const categories: Category[] = [
     slug: "sentiment",
     icon: Smile,
     description: "Read between the lines. From 🤗 to 😠, we've got feelings figured out.",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "amber",
     graphic: SentimentAnalysisIcon
   },
@@ -50,7 +50,7 @@ export const categories: Category[] = [
     slug: "classify",
     icon: Tags,
     description: "Sort the digital chaos.",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "purple",
     graphic: ClassificationIcon
   },
@@ -59,7 +59,7 @@ export const categories: Category[] = [
     slug: "generate-text",
     icon: Type,
     description: "Llama. Qwen. Enough said.",
-    status: "Coming Soon",
+    status: "Available",
     colorName: "blue",
     graphic: TextGenerationIcon
   }

lib/utils.ts

@@ -16,61 +16,61 @@ export const colorConfigs: Record<string, ColorConfig> = {
   indigo: {
     bg: 'bg-indigo-50',
     text: 'text-indigo-900',
-    gradient: 'bg-gradient-to-br from-indigo-500 to-purple-600',
+    gradient: 'bg-gradient-to-br from-indigo-500 to-indigo-700',
     iconBg: 'bg-indigo-200',
   },
   teal: {
     bg: 'bg-teal-50',
     text: 'text-teal-900',
-    gradient: 'bg-gradient-to-br from-teal-400 to-emerald-600',
+    gradient: 'bg-gradient-to-br from-teal-500 to-teal-700',
     iconBg: 'bg-teal-200',
   },
   rose: {
     bg: 'bg-rose-50',
     text: 'text-rose-900',
-    gradient: 'bg-gradient-to-br from-rose-400 to-pink-600',
+    gradient: 'bg-gradient-to-br from-rose-500 to-rose-700',
     iconBg: 'bg-rose-200',
   },
   amber: {
     bg: 'bg-amber-50',
     text: 'text-amber-900',
-    gradient: 'bg-gradient-to-br from-amber-400 to-orange-500',
+    gradient: 'bg-gradient-to-br from-amber-500 to-amber-700',
     iconBg: 'bg-amber-200',
   },
   purple: {
     bg: 'bg-purple-50',
     text: 'text-purple-900',
-    gradient: 'bg-gradient-to-br from-purple-400 to-indigo-600',
+    gradient: 'bg-gradient-to-br from-purple-500 to-purple-700',
     iconBg: 'bg-purple-200',
   },
   blue: {
     bg: 'bg-blue-50',
     text: 'text-blue-900',
-    gradient: 'bg-gradient-to-br from-blue-400 to-cyan-600',
+    gradient: 'bg-gradient-to-br from-blue-500 to-blue-700',
     iconBg: 'bg-blue-200',
   },
   emerald: {
     bg: 'bg-emerald-50',
     text: 'text-emerald-900',
-    gradient: 'bg-gradient-to-br from-emerald-400 to-green-600',
+    gradient: 'bg-gradient-to-br from-emerald-500 to-emerald-700',
     iconBg: 'bg-emerald-200',
   },
   fuchsia: {
     bg: 'bg-fuchsia-50',
     text: 'text-fuchsia-900',
-    gradient: 'bg-gradient-to-br from-fuchsia-400 to-pink-600',
+    gradient: 'bg-gradient-to-br from-fuchsia-500 to-fuchsia-700',
     iconBg: 'bg-fuchsia-200',
   },
   lime: {
     bg: 'bg-lime-50',
     text: 'text-lime-900',
-    gradient: 'bg-gradient-to-br from-lime-400 to-green-500',
+    gradient: 'bg-gradient-to-br from-lime-500 to-lime-700',
     iconBg: 'bg-lime-200',
   },
   sky: {
     bg: 'bg-sky-50',
     text: 'text-sky-900',
-    gradient: 'bg-gradient-to-br from-sky-400 to-blue-600',
+    gradient: 'bg-gradient-to-br from-sky-500 to-sky-700',
     iconBg: 'bg-sky-200',
   },
 };