add category status

components/CategoryCard.tsx

@@ -9,14 +9,15 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
   icon: Icon,
   colorName,
   description,
-  isNew,
+  status,
   graphic: Graphic
 }) => {
   const { text, gradient, iconBg } = getColorConfig(colorName);
+  const isComingSoon = status === 'Coming Soon';
 
   return (
     <div className={`bg-gradient-to-br ${gradient} 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`}>
-      {isNew && (
+      {(status === 'New' || status === 'Coming Soon') && (
         <div className={`absolute top-2 right-2 ${iconBg} ${text} text-xs font-bold py-1 px-2 rounded-full`}>
           New
         </div>
@@ -31,8 +32,13 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
         <Graphic />
       </div>
       <p className="text-xs mb-3 leading-tight">{description}</p>
-      <button className={`w-full bg-white ${text} py-2 px-3 rounded-lg text-sm font-semibold hover:bg-opacity-90 transition-colors mt-auto`}>
-        View Tools
+      <button 
+        className={`w-full bg-white ${text} py-2 px-3 rounded-lg text-sm font-semibold transition-colors mt-auto ${
+          isComingSoon ? 'opacity-50 cursor-not-allowed' : 'hover:bg-opacity-90'
+        }`}
+        disabled={isComingSoon}
+      >
+        {isComingSoon ? 'Coming Soon' : 'View Tools'}
       </button>
     </div>
   );

lib/categories.tsx

@@ -11,7 +11,7 @@ export const categories: Category[] = [
     title: "Segment",
     icon: Scissors,
     description: "Break down images into distinct segments based on the object or background.",
-    isNew: true,
+    status: "Coming Soon",
     colorName: "indigo",
     graphic: SegmentationIcon
   },
@@ -19,6 +19,7 @@ export const categories: Category[] = [
     title: "Embed",
     icon: Sparkles,
     description: "Create vector embeddings for text and images.",
+    status: "Coming Soon",
     colorName: "teal",
     graphic: EmbeddingIcon
   },
@@ -26,6 +27,7 @@ export const categories: Category[] = [
     title: "Transcribe",
     icon: Mic,
     description: "Convert speech to text with high accuracy using advanced AI-powered transcription (Whisper).",
+    status: "Coming Soon",
     colorName: "rose",
     graphic: TranscriptionIcon
   },
@@ -33,6 +35,7 @@ export const categories: Category[] = [
     title: "Sentiment",
     icon: Smile,
     description: "Analyze text to determine the emotional tone and attitude, classifying it as positive, negative, or neutral.",
+    status: "Coming Soon",
     colorName: "amber",
     graphic: SentimentAnalysisIcon
   }

types/categories.ts

@@ -1,10 +1,12 @@
 import type { LucideIcon } from 'lucide-react';
 
+export type CategoryStatus = 'New' | 'Coming Soon' | 'Available';
+
 export interface Category {
   title: string;
   icon: LucideIcon;
   description: string;
-  isNew?: boolean;
+  status: CategoryStatus;
   colorName: string;
   graphic: React.ComponentType<React.SVGProps<SVGSVGElement>>; 
-};
+}