Refactor theme structure

Add new themes under Discrete Math, move binary interactive, and remove School Connect.

src/pages/theme-pages/DiscreteMath.tsx

@@ -1,11 +1,86 @@
-import ComingSoon from "@/components/ComingSoon";
+import { 
+  Hash, 
+  FileCheck, 
+  Calculator, 
+  Shuffle, 
+  Network, 
+  Binary, 
+  GitBranch 
+} from "lucide-react";
+import Layout from "@/components/Layout";
+import ThemeCard from "@/components/ThemeCard";
 
 const DiscreteMath = () => {
+  const subThemes = [
+    {
+      title: "Foundations",
+      description: "Basic concepts including sets, logic, number systems, and fundamental mathematical structures.",
+      path: "/themes/discrete-math/foundations",
+      icon: <Hash className="w-6 h-6" />
+    },
+    {
+      title: "Proofs",
+      description: "Learn proof techniques including direct proofs, contradiction, induction, and formal reasoning.",
+      path: "/themes/discrete-math/proofs", 
+      icon: <FileCheck className="w-6 h-6" />
+    },
+    {
+      title: "Counting",
+      description: "Combinatorics, permutations, combinations, and advanced counting principles.",
+      path: "/themes/discrete-math/counting",
+      icon: <Calculator className="w-6 h-6" />
+    },
+    {
+      title: "Uncertainty",
+      description: "Probability theory, random variables, and statistical reasoning in discrete contexts.",
+      path: "/themes/discrete-math/uncertainty",
+      icon: <Shuffle className="w-6 h-6" />
+    },
+    {
+      title: "Structures",
+      description: "Algebraic structures, relations, functions, and abstract mathematical systems.",
+      path: "/themes/discrete-math/structures",
+      icon: <Network className="w-6 h-6" />
+    },
+    {
+      title: "Numbers",
+      description: "Number theory, modular arithmetic, cryptography, and computational number theory.",
+      path: "/themes/discrete-math/numbers",
+      icon: <Binary className="w-6 h-6" />
+    },
+    {
+      title: "Graphs",
+      description: "Graph theory, algorithms on graphs, trees, and network analysis.",
+      path: "/themes/discrete-math/graphs",
+      icon: <GitBranch className="w-6 h-6" />
+    }
+  ];
+
   return (
-    <ComingSoon 
-      title="Discrete Mathematics"
-      description="Explore fundamental concepts in discrete mathematics through visual and interactive demonstrations, including graph theory, combinatorics, logic, and set theory."
-    />
+    <Layout>
+      <div className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-foreground mb-4">Discrete Mathematics</h1>
+            <p className="text-muted-foreground text-lg">
+              Explore fundamental concepts in discrete mathematics through visual and interactive demonstrations.
+            </p>
+          </div>
+
+          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
+            {subThemes.map((theme) => (
+              <ThemeCard
+                key={theme.title}
+                title={theme.title}
+                description={theme.description}
+                path={theme.path}
+                icon={theme.icon}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
   );
 };
 

src/pages/theme-pages/SchoolConnect.tsx

@@ -1,15 +0,0 @@
-import Layout from "@/components/Layout";
-
-import InteractiveGallery from "@/components/InteractiveGallery";
-
-const SchoolConnect = () => {
-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <InteractiveGallery />
-      </div>
-    </Layout>
-  );
-};
-
-export default SchoolConnect;

src/pages/theme-pages/discrete-math/Counting.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Counting = () => {
+  return (
+    <ComingSoon 
+      title="Counting"
+      description="Explore combinatorics, permutations, combinations, and advanced counting principles through visual tools and interactive exercises."
+    />
+  );
+};
+
+export default Counting;

src/pages/theme-pages/discrete-math/Foundations.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Search } from "lucide-react";
+import Layout from "@/components/Layout";
+import InteractiveCard from "@/components/InteractiveCard";
+import BinaryNumberGame from "@/components/BinaryNumberGame";
+
+interface Interactive {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  component: React.ComponentType;
+}
+
+const interactives: Interactive[] = [
+  {
+    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", "representation"],
+    component: BinaryNumberGame,
+  },
+];
+
+const Foundations = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
+
+  const filteredInteractives = interactives.filter(
+    (interactive) =>
+      interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      interactive.tags.some((tag) =>
+        tag.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+  );
+
+  if (selectedInteractive) {
+    const InteractiveComponent = selectedInteractive.component;
+    return (
+      <Layout>
+        <div className="container mx-auto px-4 py-8">
+          <div className="space-y-6">
+            <div className="flex items-center gap-4">
+              <Link 
+                to="/themes/discrete-math"
+                className="text-primary hover:text-primary/80 font-medium"
+              >
+                ← Back to Discrete Math
+              </Link>
+              <h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
+            </div>
+            <div className="bg-background border rounded-lg p-6">
+              <InteractiveComponent />
+            </div>
+            <button
+              onClick={() => setSelectedInteractive(null)}
+              className="inline-flex items-center px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
+            >
+              ← Back to Foundations Gallery
+            </button>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <div className="space-y-8">
+          <div className="flex items-center gap-4">
+            <Link 
+              to="/themes/discrete-math"
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              ← Back to Discrete Math
+            </Link>
+            <h1 className="text-3xl font-bold text-foreground">Foundations</h1>
+          </div>
+
+          <div className="relative max-w-md">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <input
+              type="text"
+              placeholder="Search interactives..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 border border-outline rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredInteractives.map((interactive) => (
+              <InteractiveCard
+                key={interactive.id}
+                title={interactive.title}
+                description={interactive.description}
+                tags={interactive.tags}
+                onClick={() => setSelectedInteractive(interactive)}
+              />
+            ))}
+          </div>
+
+          {filteredInteractives.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">
+                No interactives found matching "{searchTerm}"
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Foundations;

src/pages/theme-pages/discrete-math/Graphs.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Graphs = () => {
+  return (
+    <ComingSoon 
+      title="Graphs"
+      description="Discover graph theory, algorithms on graphs, trees, and network analysis through interactive graph manipulation and visualization tools."
+    />
+  );
+};
+
+export default Graphs;

src/pages/theme-pages/discrete-math/Numbers.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Numbers = () => {
+  return (
+    <ComingSoon 
+      title="Numbers"
+      description="Explore number theory, modular arithmetic, cryptography, and computational number theory through hands-on tools and visualizations."
+    />
+  );
+};
+
+export default Numbers;

src/pages/theme-pages/discrete-math/Proofs.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Proofs = () => {
+  return (
+    <ComingSoon 
+      title="Proofs"
+      description="Learn proof techniques including direct proofs, contradiction, induction, and formal reasoning through interactive demonstrations and practice problems."
+    />
+  );
+};
+
+export default Proofs;

src/pages/theme-pages/discrete-math/Structures.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Structures = () => {
+  return (
+    <ComingSoon 
+      title="Structures"
+      description="Understand algebraic structures, relations, functions, and abstract mathematical systems through interactive visualizations and examples."
+    />
+  );
+};
+
+export default Structures;

src/pages/theme-pages/discrete-math/Uncertainty.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Uncertainty = () => {
+  return (
+    <ComingSoon 
+      title="Uncertainty"
+      description="Study probability theory, random variables, and statistical reasoning in discrete contexts through simulations and interactive models."
+    />
+  );
+};
+
+export default Uncertainty;