feat: Implement website structure

- Add navigation with Themes, Puzzles, and Miscellany.
- Create "coming soon" pages for Puzzles and Miscellany.
- Create a Themes page with cards for various topics.
- Implement basic boxy layout.
- Prepare for future interactive additions and filtering.
- Set up for Netlify deployment.

src/pages/Index.tsx

@@ -1,12 +1,123 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, BookOpen, Puzzle, Sparkles } from "lucide-react";
+import Navigation from "@/components/Navigation";
 
 const Index = () => {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      {/* Hero Section */}
+      <section className="py-20 px-4">
+        <div className="max-w-6xl mx-auto text-center">
+          <div className="mb-8">
+            <div className="w-20 h-20 bg-accent rounded-2xl flex items-center justify-center mx-auto mb-6 transform rotate-3">
+              <BookOpen className="w-10 h-10 text-accent-foreground" />
+            </div>
+            <h1 className="text-5xl font-bold text-foreground mb-6 leading-tight">
+              Interactive Learning
+              <span className="block text-accent">Made Simple</span>
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+              Discover a collection of interactive educational tools designed to supplement lectures and enhance understanding across multiple disciplines. From discrete mathematics to social choice theory.
+            </p>
+          </div>
+          
+          <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
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg">
+              <Link to="/puzzles">
+                Try Puzzles
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Feature Cards */}
+      <section className="py-16 px-4 bg-surface-variant">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center text-foreground mb-12">
+            What You'll Find Here
+          </h2>
+          
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
+              <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
+                <BookOpen className="w-8 h-8 text-accent" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Educational Themes</h3>
+              <p className="text-muted-foreground">
+                Comprehensive interactive modules covering computer science, mathematics, and algorithm design fundamentals.
+              </p>
+            </div>
+            
+            <div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
+              <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
+                <Puzzle className="w-8 h-8 text-accent" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Interactive Puzzles</h3>
+              <p className="text-muted-foreground">
+                Engaging problem-solving activities that reinforce theoretical concepts through hands-on practice.
+              </p>
+            </div>
+            
+            <div className="bg-surface border border-outline rounded-lg p-8 text-center shadow-card">
+              <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
+                <Sparkles className="w-8 h-8 text-accent" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-4">Creative Tools</h3>
+              <p className="text-muted-foreground">
+                Unique educational experiments and miscellaneous interactive content to spark curiosity and creativity.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl font-bold text-foreground mb-6">
+            Ready to Start Learning?
+          </h2>
+          <p className="text-lg text-muted-foreground mb-8">
+            Choose your path and dive into interactive educational content designed to make complex concepts accessible and engaging.
+          </p>
+          
+          <div className="grid sm:grid-cols-3 gap-4 max-w-2xl mx-auto">
+            <Button asChild variant="outline" className="h-auto p-6">
+              <Link to="/themes" className="flex flex-col items-center">
+                <BookOpen className="w-6 h-6 mb-2" />
+                <span className="font-semibold">Themes</span>
+                <span className="text-xs text-muted-foreground">Structured Learning</span>
+              </Link>
+            </Button>
+            
+            <Button asChild variant="outline" className="h-auto p-6">
+              <Link to="/puzzles" className="flex flex-col items-center">
+                <Puzzle className="w-6 h-6 mb-2" />
+                <span className="font-semibold">Puzzles</span>
+                <span className="text-xs text-muted-foreground">Problem Solving</span>
+              </Link>
+            </Button>
+            
+            <Button asChild variant="outline" className="h-auto p-6">
+              <Link to="/miscellany" className="flex flex-col items-center">
+                <Sparkles className="w-6 h-6 mb-2" />
+                <span className="font-semibold">Miscellany</span>
+                <span className="text-xs text-muted-foreground">Creative Tools</span>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };

src/pages/Miscellany.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Miscellany = () => {
+  return (
+    <ComingSoon 
+      title="Creative 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."
+    />
+  );
+};
+
+export default Miscellany;

src/pages/Puzzles.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Puzzles = () => {
+  return (
+    <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."
+    />
+  );
+};
+
+export default Puzzles;

src/pages/Themes.tsx

@@ -0,0 +1,109 @@
+import { 
+  GraduationCap, 
+  Binary, 
+  Users, 
+  Cpu, 
+  Database, 
+  Gamepad2, 
+  CreditCard,
+  Calculator
+} from "lucide-react";
+import Navigation from "@/components/Navigation";
+import ThemeCard from "@/components/ThemeCard";
+
+const Themes = () => {
+  const themes = [
+    {
+      title: "School Connect",
+      description: "Interactive tools designed to bridge theoretical concepts with practical applications in educational settings.",
+      path: "/themes/school-connect",
+      icon: <GraduationCap className="w-6 h-6" />
+    },
+    {
+      title: "Discrete Math",
+      description: "Explore fundamental concepts in discrete mathematics through visual and interactive demonstrations.",
+      path: "/themes/discrete-math",
+      icon: <Binary className="w-6 h-6" />
+    },
+    {
+      title: "Social Choice",
+      description: "Understand voting systems, fairness criteria, and collective decision-making through interactive simulations.",
+      path: "/themes/social-choice",
+      icon: <Users className="w-6 h-6" />
+    },
+    {
+      title: "Advanced Algorithms",
+      description: "Deep dive into complex algorithmic concepts with step-by-step visualizations and performance analysis.",
+      path: "/themes/advanced-algorithms",
+      icon: <Cpu className="w-6 h-6" />
+    },
+    {
+      title: "Data Structures",
+      description: "Master fundamental and advanced data structures through interactive manipulation and visualization.",
+      path: "/themes/data-structures",
+      icon: <Database className="w-6 h-6" />
+    },
+    {
+      title: "Games",
+      description: "Learn through play with educational games that reinforce computer science and mathematical concepts.",
+      path: "/themes/games",
+      icon: <Gamepad2 className="w-6 h-6" />
+    },
+    {
+      title: "Cards and Math",
+      description: "Discover mathematical principles and probability theory through card games and interactive demonstrations.",
+      path: "/themes/cards-math",
+      icon: <CreditCard className="w-6 h-6" />
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <div className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <div className="w-16 h-16 bg-accent rounded-2xl flex items-center justify-center mx-auto mb-6">
+              <Calculator className="w-8 h-8 text-accent-foreground" />
+            </div>
+            <h1 className="text-4xl font-bold text-foreground mb-4">
+              Educational Themes
+            </h1>
+            <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+              Explore our collection of interactive educational modules, each focusing on a specific area of study. 
+              These themes provide structured pathways through complex topics with hands-on learning experiences.
+            </p>
+          </div>
+
+          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
+            {themes.map((theme) => (
+              <ThemeCard
+                key={theme.title}
+                title={theme.title}
+                description={theme.description}
+                path={theme.path}
+                icon={theme.icon}
+              />
+            ))}
+          </div>
+
+          <div className="mt-16 text-center">
+            <div className="bg-surface border border-outline rounded-lg p-8 max-w-4xl mx-auto">
+              <h3 className="text-xl font-semibold text-foreground mb-4">
+                More Themes Coming Soon
+              </h3>
+              <p className="text-muted-foreground">
+                We're continuously developing new interactive themes to cover more educational topics. 
+                Each theme will include multiple interactive modules, assessments, and practical exercises 
+                to enhance your learning experience.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Themes;

src/pages/theme-pages/AdvancedAlgorithms.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const AdvancedAlgorithms = () => {
+  return (
+    <ComingSoon 
+      title="Advanced Algorithms"
+      description="Deep dive into complex algorithmic concepts with step-by-step visualizations and performance analysis. Covering dynamic programming, graph algorithms, network flows, and optimization techniques."
+    />
+  );
+};
+
+export default AdvancedAlgorithms;

src/pages/theme-pages/CardsMath.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const CardsMath = () => {
+  return (
+    <ComingSoon 
+      title="Cards and Mathematics"
+      description="Discover mathematical principles and probability theory through card games and interactive demonstrations. Explore statistics, combinatorics, and game theory through familiar card-based scenarios."
+    />
+  );
+};
+
+export default CardsMath;

src/pages/theme-pages/DataStructures.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const DataStructures = () => {
+  return (
+    <ComingSoon 
+      title="Data Structures"
+      description="Master fundamental and advanced data structures through interactive manipulation and visualization. Explore trees, graphs, heaps, hash tables, and their real-world applications."
+    />
+  );
+};
+
+export default DataStructures;

src/pages/theme-pages/DiscreteMath.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const DiscreteMath = () => {
+  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."
+    />
+  );
+};
+
+export default DiscreteMath;

src/pages/theme-pages/Games.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const Games = () => {
+  return (
+    <ComingSoon 
+      title="Educational Games"
+      description="Learn through play with educational games that reinforce computer science and mathematical concepts. Interactive challenges that make learning engaging and memorable."
+    />
+  );
+};
+
+export default Games;

src/pages/theme-pages/SchoolConnect.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const SchoolConnect = () => {
+  return (
+    <ComingSoon 
+      title="School Connect"
+      description="Interactive tools and resources designed to connect theoretical concepts with practical applications in educational settings, helping bridge the gap between learning and real-world application."
+    />
+  );
+};
+
+export default SchoolConnect;

src/pages/theme-pages/SocialChoice.tsx

@@ -0,0 +1,12 @@
+import ComingSoon from "@/components/ComingSoon";
+
+const SocialChoice = () => {
+  return (
+    <ComingSoon 
+      title="Social Choice Theory"
+      description="Understand voting systems, fairness criteria, and collective decision-making through interactive simulations. Explore Arrow's theorem, voting paradoxes, and electoral systems."
+    />
+  );
+};
+
+export default SocialChoice;