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/App.tsx

@@ -4,6 +4,16 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import Themes from "./pages/Themes";
+import Puzzles from "./pages/Puzzles";
+import Miscellany from "./pages/Miscellany";
+import SchoolConnect from "./pages/theme-pages/SchoolConnect";
+import DiscreteMath from "./pages/theme-pages/DiscreteMath";
+import SocialChoice from "./pages/theme-pages/SocialChoice";
+import AdvancedAlgorithms from "./pages/theme-pages/AdvancedAlgorithms";
+import DataStructures from "./pages/theme-pages/DataStructures";
+import Games from "./pages/theme-pages/Games";
+import CardsMath from "./pages/theme-pages/CardsMath";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -16,6 +26,19 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/themes" element={<Themes />} />
+          <Route path="/puzzles" element={<Puzzles />} />
+          <Route path="/miscellany" element={<Miscellany />} />
+          
+          {/* Theme-specific routes */}
+          <Route path="/themes/school-connect" element={<SchoolConnect />} />
+          <Route path="/themes/discrete-math" element={<DiscreteMath />} />
+          <Route path="/themes/social-choice" element={<SocialChoice />} />
+          <Route path="/themes/advanced-algorithms" element={<AdvancedAlgorithms />} />
+          <Route path="/themes/data-structures" element={<DataStructures />} />
+          <Route path="/themes/games" element={<Games />} />
+          <Route path="/themes/cards-math" element={<CardsMath />} />
+          
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/ComingSoon.tsx

@@ -0,0 +1,55 @@
+import { Link } from "react-router-dom";
+import { ArrowLeft, Wrench } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ComingSoonProps {
+  title: string;
+  description?: string;
+}
+
+const ComingSoon = ({ title, description }: ComingSoonProps) => {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+      <div className="text-center max-w-2xl mx-auto">
+        <div className="w-24 h-24 bg-surface-variant rounded-full flex items-center justify-center mx-auto mb-8">
+          <Wrench className="w-12 h-12 text-muted-foreground" />
+        </div>
+        
+        <h1 className="text-4xl font-bold text-foreground mb-4">
+          {title}
+        </h1>
+        
+        <h2 className="text-2xl font-semibold text-accent mb-6">
+          Coming Soon
+        </h2>
+        
+        <p className="text-muted-foreground text-lg leading-relaxed mb-8">
+          {description || 
+            "We're working hard to bring you amazing interactive educational content. This section will be filled with engaging puzzles, tools, and resources to enhance your learning experience."
+          }
+        </p>
+        
+        <div className="bg-surface border border-outline rounded-lg p-6 mb-8">
+          <p className="text-sm text-muted-foreground">
+            Want to be notified when this section launches? We're building something special that will include:
+          </p>
+          <ul className="text-sm text-muted-foreground mt-3 space-y-1">
+            <li>• Interactive learning modules</li>
+            <li>• Real-time collaboration tools</li>
+            <li>• Progress tracking and analytics</li>
+            <li>• Customizable difficulty levels</li>
+          </ul>
+        </div>
+        
+        <Button asChild variant="outline">
+          <Link to="/" className="inline-flex items-center">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Home
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ComingSoon;

src/components/InteractiveCard.tsx

@@ -0,0 +1,104 @@
+import { Badge } from "@/components/ui/badge";
+import { ArrowRight, Clock, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface InteractiveCardProps {
+  title: string;
+  description: string;
+  tags: string[];
+  difficulty?: "Beginner" | "Intermediate" | "Advanced";
+  duration?: string;
+  participants?: string;
+  imageUrl?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+const InteractiveCard = ({ 
+  title, 
+  description, 
+  tags, 
+  difficulty, 
+  duration, 
+  participants,
+  imageUrl,
+  onClick,
+  className 
+}: InteractiveCardProps) => {
+  const difficultyColors = {
+    Beginner: "bg-green-100 text-green-800",
+    Intermediate: "bg-yellow-100 text-yellow-800", 
+    Advanced: "bg-red-100 text-red-800"
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "group cursor-pointer bg-surface border border-outline rounded-lg overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-200 hover:-translate-y-1",
+        className
+      )}
+    >
+      {imageUrl && (
+        <div className="h-48 bg-surface-variant overflow-hidden">
+          <img 
+            src={imageUrl} 
+            alt={title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+          />
+        </div>
+      )}
+      
+      <div className="p-6">
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="text-lg font-semibold text-foreground group-hover:text-accent transition-colors flex-1">
+            {title}
+          </h3>
+          <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all flex-shrink-0 ml-2" />
+        </div>
+        
+        <p className="text-muted-foreground text-sm leading-relaxed mb-4">
+          {description}
+        </p>
+        
+        <div className="flex items-center gap-4 mb-4 text-xs text-muted-foreground">
+          {duration && (
+            <div className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              <span>{duration}</span>
+            </div>
+          )}
+          {participants && (
+            <div className="flex items-center gap-1">
+              <Users className="w-3 h-3" />
+              <span>{participants}</span>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex flex-wrap gap-2 mb-3">
+          {difficulty && (
+            <Badge 
+              variant="secondary" 
+              className={cn("text-xs", difficultyColors[difficulty])}
+            >
+              {difficulty}
+            </Badge>
+          )}
+          {tags.slice(0, 3).map((tag) => (
+            <Badge key={tag} variant="outline" className="text-xs">
+              {tag}
+            </Badge>
+          ))}
+          {tags.length > 3 && (
+            <Badge variant="outline" className="text-xs">
+              +{tags.length - 3}
+            </Badge>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InteractiveCard;

src/components/Navigation.tsx

@@ -0,0 +1,52 @@
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "@/lib/utils";
+
+const Navigation = () => {
+  const location = useLocation();
+  
+  const navItems = [
+    { name: "Themes", path: "/themes" },
+    { name: "Puzzles", path: "/puzzles" },
+    { name: "Miscellany", path: "/miscellany" }
+  ];
+
+  return (
+    <nav className="bg-surface border-b border-outline">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <Link 
+            to="/" 
+            className="text-xl font-bold text-foreground hover:text-accent transition-colors"
+          >
+            EduInteractives
+          </Link>
+          
+          <div className="flex space-x-8">
+            {navItems.map((item) => {
+              const isActive = location.pathname === item.path;
+              return (
+                <Link
+                  key={item.name}
+                  to={item.path}
+                  className={cn(
+                    "px-3 py-2 text-sm font-medium transition-colors relative",
+                    isActive 
+                      ? "text-accent" 
+                      : "text-foreground hover:text-accent"
+                  )}
+                >
+                  {item.name}
+                  {isActive && (
+                    <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent" />
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;

src/components/ThemeCard.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router-dom";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ThemeCardProps {
+  title: string;
+  description: string;
+  path: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps) => {
+  return (
+    <Link
+      to={path}
+      className={cn(
+        "group block bg-surface border border-outline rounded-lg p-6 shadow-card hover:shadow-card-hover transition-all duration-200 hover:-translate-y-1",
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          {icon && (
+            <div className="w-12 h-12 bg-surface-variant rounded-lg flex items-center justify-center mb-4 group-hover:bg-accent group-hover:text-accent-foreground transition-colors">
+              {icon}
+            </div>
+          )}
+          <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
+            {title}
+          </h3>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            {description}
+          </p>
+        </div>
+        <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all flex-shrink-0 ml-4" />
+      </div>
+    </Link>
+  );
+};
+
+export default ThemeCard;

src/index.css

@@ -8,33 +8,48 @@ All colors MUST be HSL.
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* Clean, geometric aesthetic inspired by anytype */
+    --background: 0 0% 98%;
+    --foreground: 220 13% 18%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 220 13% 18%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 220 13% 18%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 220 13% 18%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 220 13% 91%;
+    --secondary-foreground: 220 13% 18%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 220 13% 96%;
+    --muted-foreground: 220 9% 46%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 346 77% 49%;
+    --accent-foreground: 0 0% 98%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 220 13% 18%;
+
+    /* Custom design tokens for the boxy aesthetic */
+    --surface: 0 0% 100%;
+    --surface-variant: 220 13% 96%;
+    --outline: 220 13% 87%;
+    --outline-variant: 220 13% 91%;
+    
+    /* Gradients for visual interest */
+    --gradient-primary: linear-gradient(135deg, hsl(346 77% 49%) 0%, hsl(346 77% 45%) 100%);
+    --gradient-secondary: linear-gradient(135deg, hsl(220 13% 96%) 0%, hsl(220 13% 91%) 100%);
+    
+    /* Shadows for depth */
+    --shadow-card: 0 1px 3px hsl(220 13% 18% / 0.1), 0 1px 2px hsl(220 13% 18% / 0.06);
+    --shadow-card-hover: 0 4px 6px hsl(220 13% 18% / 0.1), 0 2px 4px hsl(220 13% 18% / 0.06);
 
     --radius: 0.5rem;
 
@@ -56,33 +71,42 @@ All colors MUST be HSL.
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 220 13% 9%;
+    --foreground: 220 13% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 220 13% 11%;
+    --card-foreground: 220 13% 98%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 220 13% 11%;
+    --popover-foreground: 220 13% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 220 13% 98%;
+    --primary-foreground: 220 13% 9%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 220 13% 15%;
+    --secondary-foreground: 220 13% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 220 13% 15%;
+    --muted-foreground: 220 9% 63%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 346 77% 49%;
+    --accent-foreground: 0 0% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 220 13% 15%;
+    --input: 220 13% 15%;
+    --ring: 220 13% 91%;
+
+    /* Dark mode custom tokens */
+    --surface: 220 13% 11%;
+    --surface-variant: 220 13% 15%;
+    --outline: 220 13% 23%;
+    --outline-variant: 220 13% 19%;
+    
+    --shadow-card: 0 1px 3px hsl(220 13% 0% / 0.2), 0 1px 2px hsl(220 13% 0% / 0.12);
+    --shadow-card-hover: 0 4px 6px hsl(220 13% 0% / 0.2), 0 2px 4px hsl(220 13% 0% / 0.12);
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;

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

tailwind.config.ts

@@ -52,6 +52,10 @@ export default {
 					DEFAULT: 'hsl(var(--card))',
 					foreground: 'hsl(var(--card-foreground))'
 				},
+				surface: 'hsl(var(--surface))',
+				'surface-variant': 'hsl(var(--surface-variant))',
+				outline: 'hsl(var(--outline))',
+				'outline-variant': 'hsl(var(--outline-variant))',
 				sidebar: {
 					DEFAULT: 'hsl(var(--sidebar-background))',
 					foreground: 'hsl(var(--sidebar-foreground))',
@@ -68,6 +72,14 @@ export default {
 				md: 'calc(var(--radius) - 2px)',
 				sm: 'calc(var(--radius) - 4px)'
 			},
+			boxShadow: {
+				'card': 'var(--shadow-card)',
+				'card-hover': 'var(--shadow-card-hover)',
+			},
+			backgroundImage: {
+				'gradient-primary': 'var(--gradient-primary)',
+				'gradient-secondary': 'var(--gradient-secondary)',
+			},
 			keyframes: {
 				'accordion-down': {
 					from: {