Refactor index page

Display all interactives and redesign using cards.

src/pages/Index.tsx

@@ -1,8 +1,70 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { ArrowRight, BookOpen, Puzzle, Sparkles } from "lucide-react";
 import Layout from "@/components/Layout";
 
+// Featured interactives to display on index page
+const featuredInteractives = [
+  {
+    id: 'binary-number-game',
+    title: 'Binary Number Representation',
+    description: 'Learn how numbers are represented in binary (base-2) format through an interactive guessing game.',
+    tags: ['binary', 'numbers', 'conversion'],
+    path: '/binary-number-game',
+    theme: 'Discrete Math'
+  },
+  {
+    id: 'ternary-number-game',
+    title: 'Ternary Number Representation',
+    description: 'Learn how numbers are represented in ternary (base-3) format by toggling between 0, 1, or 2 copies of powers of three.',
+    tags: ['ternary', 'numbers', 'base-3'],
+    path: '/ternary-number-game',
+    theme: 'Discrete Math'
+  },
+  {
+    id: 'balanced-ternary-game',
+    title: 'Balanced Ternary Number Representation',
+    description: 'Explore balanced ternary using digits T (-1), 0, and 1. Add or subtract powers of three to match the target number.',
+    tags: ['balanced-ternary', 'numbers', 'signed-digits'],
+    path: '/balanced-ternary-game',
+    theme: 'Discrete Math'
+  },
+  {
+    id: 'binary-search-trick',
+    title: 'Binary Search Magic Trick',
+    description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
+    tags: ['binary', 'magic', 'trick'],
+    path: '/binary-search-trick',
+    theme: 'Data Structures'
+  },
+  {
+    id: 'game-of-sim',
+    title: 'Game of Sim',
+    description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
+    tags: ['strategy', 'graph-theory', 'two-player'],
+    path: '/game-of-sim',
+    theme: 'Games'
+  },
+  {
+    id: 'ternary-search-trick',
+    title: 'Ternary Search Magic Trick',
+    description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
+    tags: ['ternary', 'magic', 'search'],
+    path: '/ternary-search-trick',
+    theme: 'Data Structures'
+  },
+  {
+    id: 'northcotts-game',
+    title: "Northcott's Game",
+    description: 'A strategic board game where players move their pieces to outmaneuver their opponent in a tactical race.',
+    tags: ['strategy', 'board-game', 'two-player'],
+    path: '/northcotts-game',
+    theme: 'Games'
+  }
+];
+
 const Index = () => {
   return (
     <Layout>
@@ -36,6 +98,61 @@ const Index = () => {
           </div>
         </div>
       </section>
+
+      {/* Featured Interactives Section */}
+      <section className="py-16 px-4 bg-muted/20">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-foreground mb-8 text-center">
+            Featured Interactives
+          </h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {featuredInteractives.map(interactive => (
+              <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
+                <CardHeader>
+                  <CardTitle className="text-lg leading-tight">
+                    <Link 
+                      to={interactive.path}
+                      className="text-foreground hover:text-primary transition-colors"
+                    >
+                      {interactive.title}
+                    </Link>
+                  </CardTitle>
+                  <Badge variant="outline" className="w-fit text-xs">
+                    {interactive.theme}
+                  </Badge>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                    {interactive.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1 mb-4">
+                    {interactive.tags.slice(0, 3).map(tag => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                  <Button asChild size="sm" className="w-full">
+                    <Link to={interactive.path}>
+                      Try Interactive
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="text-center mt-12">
+            <Button asChild variant="outline" size="lg">
+              <Link to="/index" className="inline-flex items-center">
+                View All Interactives
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
     </Layout>
   );
 };