add a couple categories, improve look and feel

components/CategoryCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from 'next/link';
 import type { Category } from '../types/categories';
 import { getColorConfig } from '../lib/utils';
 
@@ -10,7 +11,8 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
   colorName,
   description,
   status,
-  graphic: Graphic
+  graphic: Graphic,
+  slug
 }) => {
   const { bg, text, gradient, iconBg } = getColorConfig(colorName);
   const isComingSoon = status === 'Coming Soon';
@@ -32,14 +34,20 @@ const CategoryCard: React.FC<CategoryCardProps> = ({
         <Graphic />
       </div>
       <p className="text-sm font-medium mb-3 leading-tight">{description}</p>
-      <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>
+      {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>
+      ) : (
+        <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>
+      )}
     </div>
   );
 };

components/CategoryPage.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import React from 'react';
+import Link from 'next/link';
+import { getColorConfig, cn } from '@/lib/utils';
+
+interface CategoryPageProps {
+  category: {
+    title: string;
+    description: string;
+    colorName: string;
+  };
+}
+
+const CategoryPage: React.FC<CategoryPageProps> = ({ category }) => {
+  const { title, description, colorName } = category;
+  const colorConfig = getColorConfig(colorName);
+
+  return (
+    <div className={cn('min-h-screen', colorConfig.bg, colorConfig.text)}>
+      <div className="container mx-auto px-4 py-8">
+        <nav className="mb-8">
+          <ol className="flex items-center space-x-3 text-sm sm:text-base">
+            <li className="flex items-center">
+              <Link href="/" className="hover:underline transition-colors duration-200 flex items-center">
+                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+                </svg>
+                Home
+              </Link>
+            </li>
+            <li className="flex items-center">
+              <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+              <span className="ml-2 font-medium">{title}</span>
+            </li>
+          </ol>
+        </nav>
+        <div className="text-center">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tighter mb-4">
+            {title}
+          </h1>
+          <p className="font-bold font-mono italic text-lg mb-10">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryPage;

components/PillLink.tsx

@@ -10,21 +10,27 @@ interface PillLinkProps {
 
 const PillLink: React.FC<PillLinkProps> = ({ text, link, isNew = false, newText = 'NEW' }) => {
   return (
-    <Link href={link}>
+    <Link target="_blank" href={link}>
       <Badge 
         className="
-          mb-4 bg-red-500 px-2 py-1 text-xs font-medium text-white shadow-sm 
-          transition-all duration-200 
-          hover:bg-red-600 
+          mb-4 bg-gray-900 px-3 py-1.5 text-xs font-medium text-white
+          shadow-md transition-all duration-200 
+          hover:bg-gray-800 hover:shadow-lg
           transform hover:scale-105
+          rounded-full relative
+          overflow-hidden
+          group
         "
       >
-        {isNew || newText && (
-          <span className="mr-1 rounded bg-white px-1 py-0.5 text-[10px] font-bold text-red-500">
-            {newText}
-          </span>
-        )}
-        {text}
+        <span className="relative z-10">
+          {(isNew || newText) && (
+            <span className="mr-2 rounded-full bg-white px-1.5 py-0.5 text-[10px] font-bold text-gray-900">
+              {newText}
+            </span>
+          )}
+          {text}
+        </span>
+        <span className="absolute inset-0 bg-gradient-to-r from-white to-gray-300 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
       </Badge>
     </Link>
   );

lib/categories.tsx

@@ -1,14 +1,17 @@
 "use client"
-import { Scissors, Sparkles, Mic, Smile } from 'lucide-react';
+import { Scissors, Sparkles, Mic, Smile, Tags, Type } from 'lucide-react';
 import type { Category } from '../types/categories';
 import SegmentationIcon from './icons/SegmentationIcon';
 import TranscriptionIcon from './icons/TranscriptionIcon';
 import SentimentAnalysisIcon from './icons/SentimentAnalysisIcon';
 import EmbeddingIcon from './icons/EmbeddingIcon';
+import ClassificationIcon from './icons/ClassificationIcon';
+import TextGenerationIcon from './icons/TextGenerationIcon';
 
 export const categories: Category[] = [
   {
     title: "Segment",
+    slug: "segment",
     icon: Scissors,
     description: "Break down images into distinct segments based on the object or background.",
     status: "Coming Soon",
@@ -17,6 +20,7 @@ export const categories: Category[] = [
   },
   {
     title: "Embed",
+    slug: "embed",
     icon: Sparkles,
     description: "Create vector embeddings for text and images.",
     status: "Coming Soon",
@@ -25,6 +29,7 @@ export const categories: Category[] = [
   },
   {
     title: "Transcribe",
+    slug: "transcribe",
     icon: Mic,
     description: "Convert speech to text with high accuracy using advanced AI-powered transcription (Whisper).",
     status: "Coming Soon",
@@ -33,10 +38,29 @@ export const categories: Category[] = [
   },
   {
     title: "Sentiment",
+    slug: "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
+  },
+  {
+    title: "Classify",
+    slug: "classify",
+    icon: Tags,
+    description: "Categorize text or images into predefined classes using machine learning algorithms.",
+    status: "Coming Soon",
+    colorName: "purple",
+    graphic: ClassificationIcon
+  },
+  {
+    title: "Generate Text",
+    slug: "generate-text",
+    icon: Type,
+    description: "Create human-like text based on prompts or context using advanced language models.",
+    status: "Coming Soon",
+    colorName: "blue",
+    graphic: TextGenerationIcon
   }
 ];

lib/icons/ClassificationIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ClassificationIconProps {
+  className?: string;
+}
+
+const ClassificationIcon: React.FC<ClassificationIconProps> = ({ className = '' }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="200" height="100" fill="#a855f7" rx="10" ry="10" />
+      
+      {/* Input text */}
+      <rect x="10" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="30" fill="#7e22ce" fontSize="10" fontWeight="bold">Unclassified</text>
+      <text x="20" y="45" fill="#7e22ce" fontSize="10" fontWeight="bold">Text or</text>
+      <text x="20" y="60" fill="#7e22ce" fontSize="10" fontWeight="bold">Image</text>
+      
+      {/* Arrow */}
+      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
+      <polygon points="105,46 113,50 105,54" fill="#fff" />
+      
+      {/* Classification result */}
+      <rect x="110" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <rect x="115" y="20" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="120" y="31" fill="#6b21a8" fontSize="10">Category A</text>
+      <rect x="115" y="40" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="120" y="51" fill="#6b21a8" fontSize="10">Category B</text>
+      <rect x="115" y="60" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="120" y="71" fill="#6b21a8" fontSize="10">Category C</text>
+    </svg>
+  );
+};
+
+export default ClassificationIcon;

lib/icons/EmbeddingIcon.tsx

@@ -21,10 +21,18 @@ const EmbeddingIcon: React.FC<IconProps> = ({ className = '' }) => {
       {/* 3D space representation */}
       <rect x="110" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
       
-      {/* 3D axes */}
-      <line x1="115" y1="85" x2="185" y2="85" stroke="#0f766e" strokeWidth="1" opacity="0.5" />
-      <line x1="115" y1="85" x2="115" y2="15" stroke="#0f766e" strokeWidth="1" opacity="0.5" />
-      <line x1="115" y1="85" x2="145" y2="65" stroke="#0f766e" strokeWidth="1" opacity="0.5" />
+      {/* Improved 3D axes with reduced opacity */}
+      <line x1="115" y1="85" x2="185" y2="85" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
+      <polygon points="185,85 181,83 181,87" fill="#0f766e" opacity="0.3" />
+      <text x="187" y="89" fill="#0f766e" fontSize="8" opacity="0.3">x</text>
+
+      <line x1="115" y1="85" x2="115" y2="15" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
+      <polygon points="115,15 113,19 117,19" fill="#0f766e" opacity="0.3" />
+      <text x="111" y="13" fill="#0f766e" fontSize="8" opacity="0.3">y</text>
+
+      <line x1="115" y1="85" x2="145" y2="65" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
+      <polygon points="145,65 141,67 143,70" fill="#0f766e" opacity="0.3" />
+      <text x="147" y="64" fill="#0f766e" fontSize="8" opacity="0.3">z</text>
       
       {/* 3D points */}
       <circle cx="150" cy="40" r="4" fill="#f472b6" />

lib/icons/SentimentAnalysisIcon.tsx

@@ -25,10 +25,16 @@ const SentimentAnalysisIcon: React.FC<IconProps> = ({ className = '' }) => {
       
       {/* Sentiment analysis result */}
       <rect x="110" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <circle cx="150" cy="50" r="22" fill="#4ade80" />
-      <path d="M140 50 Q 150 60, 160 50" fill="none" stroke="#fffbeb" strokeWidth="2" />
-      <circle cx="143" cy="43" r="2" fill="#fffbeb" />
-      <circle cx="157" cy="43" r="2" fill="#fffbeb" />
+      
+      {/* Sentiment gauge background */}
+      <rect x="120" y="30" width="60" height="20" fill="#e5e7eb" rx="10" ry="10" />
+      
+      {/* Sentiment gauge fill (80% positive) */}
+      <rect x="120" y="30" width="48" height="20" fill="#4ade80" rx="10" ry="10" />
+      
+      {/* Sentiment score text */}
+      <text x="150" y="70" fill="#4ade80" fontSize="14" fontWeight="bold" textAnchor="middle">80%</text>
+      <text x="150" y="85" fill="#92400e" fontSize="10" textAnchor="middle">Positive</text>
     </svg>
   );
 };

lib/icons/TextGenerationIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface TextGenerationIconProps {
+  className?: string;
+}
+
+const TextGenerationIcon: React.FC<TextGenerationIconProps> = ({ className = '' }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="200" height="100" fill="#3b82f6" rx="10" ry="10" />
+      
+      {/* Input prompt */}
+      <rect x="10" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="40" fill="#1d4ed8" fontSize="10" fontWeight="bold">Prompt:</text>
+      <text x="20" y="55" fill="#1d4ed8" fontSize="10" fontWeight="bold">Generate a</text>
+      <text x="20" y="70" fill="#1d4ed8" fontSize="10" fontWeight="bold">story about...</text>
+      
+      {/* Arrow */}
+      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
+      <polygon points="105,46 113,50 105,54" fill="#fff" />
+      
+      {/* Generated text */}
+      <rect x="110" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="120" y="25" fill="#1e40af" fontSize="8">Once upon a time,</text>
+      <text x="120" y="35" fill="#1e40af" fontSize="8">in a land far away,</text>
+      <text x="120" y="45" fill="#1e40af" fontSize="8">there was a brave</text>
+      <text x="120" y="55" fill="#1e40af" fontSize="8">knight who...</text>
+      <line x1="120" y1="65" x2="180" y2="65" stroke="#93c5fd" strokeWidth="1" />
+      <line x1="120" y1="75" x2="170" y2="75" stroke="#93c5fd" strokeWidth="1" />
+    </svg>
+  );
+};
+
+export default TextGenerationIcon;

lib/utils.ts

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

types/categories.ts

@@ -4,6 +4,7 @@ export type CategoryStatus = 'New' | 'Coming Soon' | 'Available';
 
 export interface Category {
   title: string;
+  slug: string;
   icon: LucideIcon;
   description: string;
   status: CategoryStatus;