feat: let us use tailwindcss

Author: tobenot

src/games/carrot-card-demo/components/Card.tsx

@@ -10,26 +10,26 @@ interface CardProps {
 
 export const Card: React.FC<CardProps> = ({ card, onChoice }) => {
   return (
-    <div className="card-container">
-      <div className="card-illustration">
+    <div className="absolute inset-0 flex flex-col bg-gradient-to-br from-slate-700 to-slate-800 text-white overflow-hidden animate-fade-in">
+      <div className="flex-1 relative overflow-hidden bg-gradient-to-br from-slate-600 to-slate-700">
         <ImageLoader
           src={card.illustration || card.id}
           fallbackSrc="default"
           basePath="/illustrations/"
           alt={card.name}
-          imageClass="h-full w-full object-cover"
+          imageClass="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
         />
       </div>
-      <div className="card-content">
-        <h2 className="card-name">{card.name}</h2>
-        <div className="card-description">
+      <div className="p-8 bg-black/80 backdrop-blur-sm border-t border-white/10">
+        <h2 className="text-3xl font-bold mb-4 text-gray-100 text-center">{card.name}</h2>
+        <div className="text-lg leading-relaxed mb-8 text-gray-300 text-center max-w-2xl mx-auto">
           <TypewriterText text={card.description} enabled={true} />
         </div>
-        <div className="card-choices">
+        <div className="flex gap-4 justify-center flex-wrap">
           {card.choices.map((choice: any, index: number) => (
             <button
               key={index}
-              className="choice-button"
+              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-400 hover:to-blue-500 text-white px-6 py-3 rounded-full cursor-pointer text-base font-medium transition-all duration-300 shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40 hover:-translate-y-1 active:translate-y-0 min-w-[150px]"
               onClick={() => onChoice()}
               title={choice.description}
             >

src/games/carrot-card-demo/components/GameContainer.tsx

@@ -3,7 +3,6 @@ import { Card as CardType } from '@/games/carrot-card-demo/types';
 import { cardService } from '@/games/carrot-card-demo/services/cardService';
 import { Card } from '@/games/carrot-card-demo/components/Card';
 import { MainMenu } from '@/games/carrot-card-demo/components/MainMenu';
-import '../styles/game.css';
 
 export function GameContainer() {
   const [currentCard, setCurrentCard] = useState<CardType | null>(null);

src/games/carrot-card-demo/components/MainMenu.tsx

@@ -6,18 +6,33 @@ interface MainMenuProps {
 
 export function MainMenu({ onStart }: MainMenuProps) {
   return (
-    <div className="main-menu-container">
-      <div className="main-menu-content">
-        <div className="main-menu-header">
-          <h1 className="main-menu-title">Carrot Card Adventure</h1>
-          <p className="main-menu-subtitle">An interactive storytelling experience</p>
+    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-500 via-purple-500 to-purple-700 overflow-hidden">
+      {/* Background texture overlay */}
+      <div 
+        className="absolute inset-0 opacity-30"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grain' width='100' height='100' patternUnits='userSpaceOnUse'><circle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.1)'/><circle cx='75' cy='75' r='1' fill='rgba(255,255,255,0.1)'/><circle cx='50' cy='10' r='0.5' fill='rgba(255,255,255,0.05)'/></pattern></defs><rect width='100' height='100' fill='url(%23grain)'/></svg>")`
+        }}
+      ></div>
+      
+      <div className="relative z-10 text-center text-white max-w-2xl px-12 animate-fade-in">
+        <div className="mb-12">
+          <h1 className="text-6xl font-extrabold mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent drop-shadow-lg tracking-tight">
+            Carrot Card Adventure
+          </h1>
+          <p className="text-xl opacity-90 font-light tracking-wide">
+            An interactive storytelling experience
+          </p>
         </div>
 
-        <div className="main-menu-actions">
-          <button onClick={onStart} className="main-menu-start-btn">
+        <div className="flex flex-col items-center gap-6">
+          <button 
+            onClick={onStart} 
+            className="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-400 hover:to-pink-400 text-white font-semibold text-lg px-10 py-4 rounded-full cursor-pointer transition-all duration-300 shadow-lg shadow-orange-500/30 hover:shadow-xl hover:shadow-orange-500/40 hover:-translate-y-1 active:translate-y-0 uppercase tracking-wider"
+          >
             Begin Your Journey
           </button>
-          <p className="main-menu-hint">
+          <p className="text-sm opacity-70 italic">
             Make choices that shape your destiny
           </p>
         </div>