Refactor site structure and add comprehensive interactive index

- Move Puzzles and Miscellany under Themes
- Add Contest Problems as new theme
- Create About page with comprehensive site information
- Create InteractiveIndex component with advanced filtering and sorting
- Update navigation to include Index, Themes, and About
- Add pagination (10 items per page) with search and tag filtering
- Update routing structure for new theme organization
- Remove standalone Puzzles and Miscellany pages
- Add new theme pages: /themes/puzzles, /themes/miscellany, /themes/contest-problems
- Update homepage to point to new interactive index
- Maintain consistent layout and styling across all new pages

src/pages/About.tsx

@@ -0,0 +1,56 @@
+import Layout from "@/components/Layout";
+
+const About = () => {
+  return (
+    <Layout>
+      <div className="py-12 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold text-foreground mb-8">About Interactives</h1>
+          
+          <div className="prose prose-lg max-w-none">
+            <p className="text-lg text-muted-foreground mb-6">
+              Welcome to Interactives, a comprehensive educational platform designed to enhance learning through interactive experiences. Our mission is to make complex concepts accessible and engaging through hands-on exploration.
+            </p>
+            
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">Our Mission</h2>
+            <p className="text-muted-foreground mb-6">
+              We believe that learning is most effective when it's interactive, visual, and engaging. Our platform provides a collection of carefully crafted interactive tools that supplement traditional educational methods, helping students and educators alike to better understand and explore complex topics.
+            </p>
+            
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">What We Offer</h2>
+            <ul className="list-disc list-inside text-muted-foreground mb-6 space-y-2">
+              <li><strong>Interactive Demonstrations:</strong> Visual representations of complex concepts</li>
+              <li><strong>Educational Games:</strong> Learning through play and problem-solving</li>
+              <li><strong>Algorithm Visualizations:</strong> Step-by-step breakdowns of computational processes</li>
+              <li><strong>Mathematical Explorations:</strong> Hands-on discovery of mathematical principles</li>
+              <li><strong>Social Choice Simulations:</strong> Understanding collective decision-making</li>
+            </ul>
+            
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">Our Approach</h2>
+            <p className="text-muted-foreground mb-6">
+              Each interactive is designed with careful attention to pedagogy, ensuring that users not only learn the concepts but also develop intuition and deeper understanding. We focus on creating experiences that are both educational and enjoyable, making learning a rewarding journey rather than a chore.
+            </p>
+            
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">For Educators</h2>
+            <p className="text-muted-foreground mb-6">
+              Our platform serves as a valuable supplement to classroom instruction, providing tools that can be used to illustrate concepts, engage students, and provide hands-on practice. Many of our interactives are designed to work well in both individual and group learning environments.
+            </p>
+            
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">For Students</h2>
+            <p className="text-muted-foreground mb-6">
+              Whether you're studying computer science, mathematics, or related fields, our interactives provide a unique way to explore and understand complex topics. Use them to supplement your coursework, prepare for exams, or simply satisfy your curiosity about how things work.
+            </p>
+            
+            <div className="bg-muted p-6 rounded-lg mt-8">
+              <p className="text-sm text-muted-foreground italic">
+                Interactives is an ongoing project, with new content and features being added regularly. We welcome feedback and suggestions for new topics or improvements to existing interactives.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default About; 

src/pages/Index.tsx

@@ -23,14 +23,14 @@ const Index = () => {
           
           <div className="flex justify-center gap-4 mb-16">
             <Button asChild size="lg" className="bg-accent hover:bg-accent/90">
-              <Link to="/themes" className="inline-flex items-center">
-                Explore Themes
+              <Link to="/index" className="inline-flex items-center">
+                Browse All Interactives
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Link>
             </Button>
             <Button asChild variant="outline" size="lg">
-              <Link to="/puzzles">
-                Try Puzzles
+              <Link to="/themes">
+                Explore Themes
               </Link>
             </Button>
           </div>

src/pages/Themes.tsx

@@ -6,7 +6,10 @@ import {
   Database, 
   Gamepad2, 
   CreditCard,
-  Calculator
+  Calculator,
+  Puzzle,
+  Sparkles,
+  Trophy
 } from "lucide-react";
 import Layout from "@/components/Layout";
 import ThemeCard from "@/components/ThemeCard";
@@ -48,6 +51,24 @@ const Themes = () => {
       description: "Discover mathematical principles and probability theory through card games and interactive demonstrations.",
       path: "/themes/cards-math",
       icon: <CreditCard className="w-6 h-6" />
+    },
+    {
+      title: "Puzzles",
+      description: "Get ready for an engaging collection of educational puzzles designed to challenge your problem-solving skills and reinforce key concepts across multiple disciplines.",
+      path: "/themes/puzzles",
+      icon: <Puzzle className="w-6 h-6" />
+    },
+    {
+      title: "Miscellany",
+      description: "Discover unique educational experiments, creative tools, and innovative interactive content that doesn't fit into traditional categories but sparks curiosity and enhances learning.",
+      path: "/themes/miscellany",
+      icon: <Sparkles className="w-6 h-6" />
+    },
+    {
+      title: "Contest Problems",
+      description: "Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations.",
+      path: "/themes/contest-problems",
+      icon: <Trophy className="w-6 h-6" />
     }
   ];
 

src/pages/theme-pages/ContestProblems.tsx

@@ -0,0 +1,19 @@
+import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+
+const ContestProblems = () => {
+  return (
+    <Layout>
+      <div className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <ComingSoon 
+            title="Contest Problems"
+            description="Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations."
+          />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default ContestProblems; 

src/pages/theme-pages/Miscellany.tsx

@@ -0,0 +1,19 @@
+import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+
+const Miscellany = () => {
+  return (
+    <Layout>
+      <div className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <ComingSoon 
+            title="Miscellany"
+            description="Discover unique educational experiments, creative tools, and innovative interactive content that doesn't fit into traditional categories but sparks curiosity and enhances learning."
+          />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Miscellany; 

src/pages/theme-pages/Puzzles.tsx

@@ -0,0 +1,19 @@
+import ComingSoon from "@/components/ComingSoon";
+import Layout from "@/components/Layout";
+
+const Puzzles = () => {
+  return (
+    <Layout>
+      <div className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <ComingSoon 
+            title="Interactive Puzzles"
+            description="Get ready for an engaging collection of educational puzzles designed to challenge your problem-solving skills and reinforce key concepts across multiple disciplines."
+          />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Puzzles;