Refactor index page

Display all interactives and redesign using cards.

src/App.tsx

@@ -19,6 +19,8 @@ import Miscellany from "./pages/theme-pages/Miscellany";
 import ContestProblems from "./pages/theme-pages/ContestProblems";
 import BinaryNumberGamePage from "./pages/BinaryNumberGamePage";
 import BinaryNumberGameGreenScreen from "./pages/BinaryNumberGameGreenScreen";
+import TernaryNumberGamePage from "./pages/TernaryNumberGamePage";
+import BalancedTernaryGamePage from "./pages/BalancedTernaryGamePage";
 import BinarySearchTrickPage from "./pages/BinarySearchTrickPage";
 import BinarySearchTrickGreenScreen from "./pages/BinarySearchTrickGreenScreen";
 import GameOfSimGreenScreen from "./pages/GameOfSimGreenScreen";
@@ -71,6 +73,8 @@ const App = () => (
           {/* Direct interactive routes */}
           <Route path="/binary-number-game" element={<BinaryNumberGamePage />} />
           <Route path="/binary-number-game/:mode" element={<BinaryNumberGameGreenScreen />} />
+          <Route path="/ternary-number-game" element={<TernaryNumberGamePage />} />
+          <Route path="/balanced-ternary-game" element={<BalancedTernaryGamePage />} />
           <Route path="/binary-search-trick" element={<BinarySearchTrickPage />} />
           <Route path="/binary-search-trick/:mode" element={<BinarySearchTrickGreenScreen />} />
           <Route path="/game-of-sim" element={<GameOfSimPage />} />

src/components/InteractiveIndex.tsx

@@ -28,6 +28,24 @@ const allInteractives: Interactive[] = [
     theme: 'Discrete Math',
     dateAdded: '2024-01-15'
   },
+  {
+    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', 'conversion', 'representation', 'base-3'],
+    path: '/ternary-number-game',
+    theme: 'Discrete Math',
+    dateAdded: '2024-01-16'
+  },
+  {
+    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', 'conversion', 'representation', 'base-3', 'signed-digits'],
+    path: '/balanced-ternary-game',
+    theme: 'Discrete Math',
+    dateAdded: '2024-01-17'
+  },
   {
     id: 'binary-search-trick',
     title: 'Binary Search Magic Trick',
@@ -54,6 +72,15 @@ const allInteractives: Interactive[] = [
     path: '/ternary-search-trick',
     theme: 'Data Structures',
     dateAdded: '2024-07-20'
+  },
+  {
+    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', 'logic', 'game-theory'],
+    path: '/northcotts-game',
+    theme: 'Games',
+    dateAdded: '2024-03-15'
   }
 ];
 

src/pages/BalancedTernaryGamePage.tsx

@@ -0,0 +1,13 @@
+import BalancedTernaryGame from '@/components/BalancedTernaryGame';
+
+const BalancedTernaryGamePage = () => {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-4xl mx-auto">
+        <BalancedTernaryGame />
+      </div>
+    </div>
+  );
+};
+
+export default BalancedTernaryGamePage;

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

src/pages/TernaryNumberGamePage.tsx

@@ -0,0 +1,13 @@
+import TernaryNumberGame from '@/components/TernaryNumberGame';
+
+const TernaryNumberGamePage = () => {
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-4xl mx-auto">
+        <TernaryNumberGame />
+      </div>
+    </div>
+  );
+};
+
+export default TernaryNumberGamePage;