Housekeeping: reorder themes, fix hover effects, update titles, add collapsible tags, move Zeckendorf Search Magic Trick to Data Structures

src/components/GamesGallery.tsx

@@ -76,7 +76,7 @@ const GamesGallery = () => {
               onClick={() => setSelectedGame(null)}
               className="text-primary hover:text-primary/80 font-medium"
             >
-              ← Back to Educational Games
+              ← Back to Games
             </button>
           </div>
           <GameComponent showSocialShare={true} />
@@ -90,7 +90,7 @@ const GamesGallery = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="space-y-6">
           <div className="space-y-4">
-            <h1 className="text-3xl font-bold text-foreground">Educational Games</h1>
+            <h1 className="text-3xl font-bold text-foreground">Games</h1>
             <p className="text-muted-foreground text-lg">
               Learn through play with interactive games that reinforce computer science and mathematical concepts.
             </p>

src/components/InteractiveIndex.tsx

@@ -61,7 +61,7 @@ const allInteractives: Interactive[] = [
     description: 'Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers.',
     tags: ['fibonacci', 'magic', 'numbers', 'trick', 'zeckendorf', 'representation'],
     path: '/discrete-math/foundations/zeckendorf-search',
-    theme: 'Discrete Math',
+    theme: 'Data Structures and Algorithms',
     dateAdded: '2024-12-22'
   },
   {
@@ -166,6 +166,7 @@ const InteractiveIndex = () => {
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
+  const [showTags, setShowTags] = useState(false);
 
   // Get all unique tags
   const allTags = useMemo(() => {
@@ -292,19 +293,26 @@ const InteractiveIndex = () => {
 
           {/* Tags */}
           <div className="mb-8">
-            <h3 className="text-lg font-semibold text-foreground mb-3">Filter by Tags</h3>
+            <div className="flex items-center mb-3">
-            <div className="flex flex-wrap gap-2">
+              <h3 className="text-lg font-semibold text-foreground mr-3">Filter by Tags</h3>
-              {allTags.map(tag => (
+              <Button variant="ghost" size="sm" onClick={() => setShowTags(v => !v)}>
-                <Badge 
+                {showTags ? 'Hide Tags' : 'Show all Tags'}
-                  key={tag}
+              </Button>
-                  variant={selectedTag === tag ? "default" : "outline"}
-                  className="cursor-pointer hover:bg-primary hover:text-primary-foreground"
-                  onClick={() => handleTagClick(tag)}
-                >
-                  {tag}
-                </Badge>
-              ))}
             </div>
+            {showTags && (
+              <div className="flex flex-wrap gap-2">
+                {allTags.map(tag => (
+                  <Badge 
+                    key={tag}
+                    variant={selectedTag === tag ? "default" : "outline"}
+                    className="cursor-pointer hover:bg-primary hover:text-primary-foreground"
+                    onClick={() => handleTagClick(tag)}
+                  >
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
           </div>
 
           {/* Results Count */}

src/components/ThemeCard.tsx

@@ -15,7 +15,7 @@ const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps
     <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",
+        "group block bg-surface border border-outline rounded-lg p-6 shadow-card hover:shadow-card-hover transition-all duration-200",
         className
       )}
     >
@@ -33,7 +33,7 @@ const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps
             {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" />
+        <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent transition-all flex-shrink-0 ml-4" />
       </div>
     </Link>
   );

src/pages/Themes.tsx

@@ -58,17 +58,17 @@ const Themes = () => {
       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" />
+    },
+    {
+      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" />
     }
   ];
 

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

@@ -44,13 +44,6 @@ const interactives: Interactive[] = [{
   tags: ["fibonacci", "numbers", "representation", "zeckendorf", "combinatorics"],
   component: ZeckendorfGame,
   greenScreenPath: "/discrete-math/foundations/zeckendorf"
-}, {
-  id: "zeckendorf-search-trick",
-  title: "Zeckendorf Search Magic Trick",
-  description: "Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers.",
-  tags: ["fibonacci", "magic", "numbers", "trick", "zeckendorf", "representation"],
-  component: ZeckendorfSearchTrick,
-  greenScreenPath: "/discrete-math/foundations/zeckendorf-search"
 }];
 const Foundations = () => {
   const [searchTerm, setSearchTerm] = useState("");