add categories

app/page.tsx

@@ -1,15 +1,21 @@
+"use client"
 import PillLink from '@/components/PillLink';
+import CategoryRow from '@/components/CategoryRow';
+import { categories } from "@/lib/categories";
 
 export default function Home() {
   return (
-    <div className="mx-auto p-4 text-center">
+    <div className="container mx-auto px-4 py-8 text-center">
       <PillLink text="Transformers.js" link="https://www.npmjs.com/package/@xenova/transformers" newText='Powered by' />
-      <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tighter">
+      <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tighter mb-4">
         Playground
       </h1>
-      <p className="font-bold text-slate-700 mt-4 font-mono italic text-md">
+      <p className="font-bold text-slate-700 font-mono italic text-lg mb-10">
         The fastest way to get started with Transformers.js.
       </p>
+      <div className="mt-24">
+        <CategoryRow categories={categories} />
+      </div>
     </div>
   );
-}
+}

components/CategoryCard.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Category } from '../types/categories';
+import { getColorConfig } from '@/lib/utils';
+
+type CategoryCardProps = Category;
+
+const CategoryCard: React.FC<CategoryCardProps> = ({
+  title,
+  icon: Icon,
+  colorName,
+  description,
+  isNew,
+  graphic: Graphic
+}) => {
+  const { text, gradient, iconBg } = getColorConfig(colorName);
+
+  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 && (
+        <div className={`absolute top-2 right-2 ${iconBg} ${text} text-xs font-bold py-1 px-2 rounded-full`}>
+          New
+        </div>
+      )}
+      <div className="flex items-center mb-3">
+        <div className={`${iconBg} ${text} p-1.5 rounded-full mr-2`}>
+          <Icon size={20} />
+        </div>
+        <h2 className="text-xl font-bold">{title}</h2>
+      </div>
+      <div className="mb-3 flex-grow">
+        <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>
+    </div>
+  );
+};
+
+export default CategoryCard;

components/CategoryRow.tsx

@@ -0,0 +1,24 @@
+import { motion } from 'framer-motion';
+import CategoryCard from '@/components/CategoryCard';
+import { Category } from '@/types/categories';
+
+interface CategoryRowProps {
+  categories: Category[];
+}
+
+export default function CategoryRow({ categories }: CategoryRowProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12 max-w-5xl mx-auto">
+      {categories.map((category, index) => (
+        <motion.div
+          key={category.title}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: index * 0.1 }}
+        >
+          <CategoryCard {...category} />
+        </motion.div>
+      ))}
+    </div>
+  );
+}

lib/categories.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { Scissors, Sparkles, Mic, Smile } 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';
+
+export const categories: Category[] = [
+  {
+    title: "Segment",
+    icon: Scissors,
+    description: "Break down images into distinct segments based on the object or background.",
+    isNew: true,
+    colorName: "indigo",
+    graphic: SegmentationIcon
+  },
+  {
+    title: "Embed",
+    icon: Sparkles,
+    description: "Create vector embeddings for text and images.",
+    colorName: "teal",
+    graphic: EmbeddingIcon
+  },
+  {
+    title: "Transcribe",
+    icon: Mic,
+    description: "Convert speech to text with high accuracy using advanced AI-powered transcription (Whisper).",
+    colorName: "rose",
+    graphic: TranscriptionIcon
+  },
+  {
+    title: "Sentiment",
+    icon: Smile,
+    description: "Analyze text to determine the emotional tone and attitude, classifying it as positive, negative, or neutral.",
+    colorName: "amber",
+    graphic: SentimentAnalysisIcon
+  }
+];

lib/icons/EmbeddingIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+const EmbeddingIcon: React.FC<IconProps> = ({ 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="#5eead4" rx="10" ry="10" />
+      
+      {/* Text representation */}
+      <rect x="10" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="40" fill="#f472b6" fontSize="14" fontWeight="bold">Hello</text>
+      <text x="20" y="70" fill="#60a5fa" fontSize="14" fontWeight="bold">World</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" />
+      
+      {/* 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" />
+      
+      {/* 3D points */}
+      <circle cx="150" cy="40" r="4" fill="#f472b6" />
+      <text x="157" y="44" fill="#f472b6" fontSize="10" fontWeight="bold">Hello</text>
+      <circle cx="155" cy="70" r="4" fill="#60a5fa" />
+      <text x="120" y="74" fill="#60a5fa" fontSize="10" fontWeight="bold">World</text>
+    </svg>
+  );
+};
+
+export default EmbeddingIcon;

lib/icons/SegmentationIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+const SegmentationIcon: React.FC<IconProps> = ({ 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="#818cf8" rx="10" ry="10" />
+      
+      {/* Original Image */}
+      <rect x="10" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <circle cx="35" cy="35" r="15" fill="#fbbf24" />
+      <rect x="55" y="45" width="25" height="35" fill="#34d399" />
+      
+      {/* Arrow */}
+      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
+      <polygon points="105,46 113,50 105,54" fill="#fff" />
+      
+      {/* Segmented Image */}
+      <rect x="110" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <circle cx="135" cy="35" r="15" fill="#fbbf24" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
+      <rect x="155" y="45" width="25" height="35" fill="#34d399" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
+    </svg>
+  );
+};
+
+export default SegmentationIcon;

lib/icons/SentimentAnalysisIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+const SentimentAnalysisIcon: React.FC<IconProps> = ({ 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="#fbbf24" rx="10" ry="10" />
+      
+      {/* Input text */}
+      <rect x="10" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="15" y="35" fill="#92400e" fontSize="8" fontWeight="bold">Great product!</text>
+      <text x="15" y="50" fill="#92400e" fontSize="8" fontWeight="bold">Highly</text>
+      <text x="15" y="65" fill="#92400e" fontSize="8" fontWeight="bold">recommended.</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" />
+      
+      {/* 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" />
+    </svg>
+  );
+};
+
+export default SentimentAnalysisIcon;

lib/icons/TranscriptionIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface TranscriptionIconProps {
+  className?: string;
+}
+
+const TranscriptionIcon: React.FC<TranscriptionIconProps> = ({ 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="#fb7185" rx="10" ry="10" />
+      
+      {/* Audio waveform */}
+      <rect x="10" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <path d="M15 50 Q 25 20, 35 50 Q 45 80, 55 50 Q 65 20, 75 50 Q 85 80, 95 50" 
+            fill="none" stroke="#e11d48" strokeWidth="2" />
+      
+      {/* Arrow */}
+      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
+      <polygon points="105,46 113,50 105,54" fill="#fff" />
+      
+      {/* Transcribed text */}
+      <rect x="110" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="120" y="30" fill="#be123c" fontSize="10" fontWeight="bold">Hello, how</text>
+      <text x="120" y="45" fill="#be123c" fontSize="10" fontWeight="bold">are you</text>
+      <text x="120" y="60" fill="#be123c" fontSize="10" fontWeight="bold">today?</text>
+      <line x1="120" y1="70" x2="180" y2="70" stroke="#fda4af" strokeWidth="1" />
+      <line x1="120" y1="80" x2="170" y2="80" stroke="#fda4af" strokeWidth="1" />
+    </svg>
+  );
+};
+
+export default TranscriptionIcon;

lib/utils.ts

@@ -4,3 +4,46 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export type ColorConfig = {
+  bg: string;
+  text: string;
+  gradient: string;
+  iconBg: string;
+};
+
+export const colorConfigs: Record<string, ColorConfig> = {
+  indigo: {
+    bg: 'bg-indigo-200',
+    text: 'text-indigo-800',
+    gradient: 'from-indigo-500 to-indigo-700',
+    iconBg: 'bg-indigo-200',
+  },
+  teal: {
+    bg: 'bg-teal-200',
+    text: 'text-teal-800',
+    gradient: 'from-teal-500 to-teal-700',
+    iconBg: 'bg-teal-200',
+  },
+  rose: {
+    bg: 'bg-rose-200',
+    text: 'text-rose-800',
+    gradient: 'from-rose-500 to-rose-700',
+    iconBg: 'bg-rose-200',
+  },
+  amber: {
+    bg: 'bg-amber-200',
+    text: 'text-amber-800',
+    gradient: 'from-amber-500 to-amber-700',
+    iconBg: 'bg-amber-200',
+  },
+};
+
+export const getColorConfig = (colorName: string): ColorConfig => {
+  return colorConfigs[colorName] || {
+    bg: 'bg-gray-200',
+    text: 'text-gray-800',
+    gradient: 'from-gray-500 to-gray-700',
+    iconBg: 'bg-gray-200',
+  };
+};

package-lock.json

@@ -14,6 +14,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
+        "framer-motion": "^11.11.7",
         "lucide-react": "^0.451.0",
         "next": "14.2.15",
         "react": "^18",
@@ -3054,6 +3055,31 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.7.tgz",
+      "integrity": "sha512-89CgILOXPeG3L7ymOTGrLmf8IiKubYLUN/QkYgQuLvehAHfqgwJbLfCnhuyRI4WTds1TXkUp67A7IJrgRY/j1w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "framer-motion": "^11.11.7",
     "lucide-react": "^0.451.0",
     "next": "14.2.15",
     "react": "^18",

types/categories.ts

@@ -0,0 +1,10 @@
+import type { LucideIcon } from 'lucide-react';
+
+export interface Category {
+  title: string;
+  icon: LucideIcon;
+  description: string;
+  isNew?: boolean;
+  colorName: string;
+  graphic: React.ComponentType<React.SVGProps<SVGSVGElement>>; 
+};