From d7232f8470f5ef24b4eb2240e6e686cf0a1c5daa Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 15:03:06 +0000
Subject: [PATCH] Refine interactive layout and content

- Center cards in one-by-one mode.
- Remove global header/footer from interactive pages.
- Fix "School Connect" text on data structures page.
- Remove binary representation interactive from data structures list.
---
 src/components/BinarySearchTrick.tsx     |  2 +-
 src/components/InteractiveGallery.tsx    | 10 ++--------
 src/pages/theme-pages/DataStructures.tsx | 16 +++++++---------
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/BinarySearchTrick.tsx b/src/components/BinarySearchTrick.tsx
index 8a33f70..01ac78d 100644
--- a/src/components/BinarySearchTrick.tsx
+++ b/src/components/BinarySearchTrick.tsx
@@ -231,7 +231,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
         </div>
       )}
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+      <div className={`grid gap-4 ${isOneByOne ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'}`}>
         {getDisplayCards().map((card) => (
           <Card 
             key={card.id} 
diff --git a/src/components/InteractiveGallery.tsx b/src/components/InteractiveGallery.tsx
index 58a9d1c..d7033af 100644
--- a/src/components/InteractiveGallery.tsx
+++ b/src/components/InteractiveGallery.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Search } from 'lucide-react';
-import BinaryNumberGame from '@/components/BinaryNumberGame';
+
 import BinarySearchTrick from '@/components/BinarySearchTrick';
 interface Interactive {
   id: string;
@@ -13,12 +13,6 @@ interface Interactive {
   component: React.ComponentType;
 }
 const interactives: Interactive[] = [{
-  id: 'binary-number-game',
-  title: 'Binary Number Representation',
-  description: 'Learn binary representation by expressing numbers as sums of powers of two. Toggle cards to match the target sum!',
-  tags: ['binary', 'math', 'numbers', 'representation', 'powers-of-two'],
-  component: BinaryNumberGame
-}, {
   id: 'binary-search-trick',
   title: 'Binary Search Magic Trick',
   description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
@@ -43,7 +37,7 @@ const InteractiveGallery = () => {
   }
   return <div className="space-y-6">
       <div className="space-y-4">
-        <h1 className="text-3xl font-bold text-foreground">School Connect Interactives</h1>
+        <h1 className="text-3xl font-bold text-foreground">Data Structures Interactives</h1>
         <p className="text-muted-foreground text-lg">
           Interactive tools and resources designed to connect theoretical concepts with practical applications in educational settings.
         </p>
diff --git a/src/pages/theme-pages/DataStructures.tsx b/src/pages/theme-pages/DataStructures.tsx
index e6a89a1..617e03a 100644
--- a/src/pages/theme-pages/DataStructures.tsx
+++ b/src/pages/theme-pages/DataStructures.tsx
@@ -1,15 +1,13 @@
-import Layout from "@/components/Layout";
 import InteractiveGallery from "@/components/InteractiveGallery";
+
 const DataStructures = () => {
-  return <Layout>
-      <div className="space-y-8">
-        <div className="text-center">
-          
-          
-        </div>
-        
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto p-6">
         <InteractiveGallery />
       </div>
-    </Layout>;
+    </div>
+  );
 };
+
 export default DataStructures;
\ No newline at end of file