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>>; 
-};
+}