Add common header and footer

Implement a common header and footer for all pages except interactive pages. The footer will initially contain placeholder text.

src/pages/Index.tsx

@@ -1,11 +1,11 @@
 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";
+import Layout from "@/components/Layout";
+
 const Index = () => {
-  return <div className="min-h-screen bg-background">
-      <Navigation />
-      
+  return (
+    <Layout>
       {/* Hero Section */}
       <section className="py-20 px-4">
         <div className="max-w-6xl mx-auto text-center">
@@ -14,7 +14,7 @@ const Index = () => {
               <BookOpen className="w-10 h-10 text-accent-foreground" />
             </div>
             <h1 className="text-5xl font-bold text-foreground mb-6 leading-tight">
-              
+              Interactive Learning Hub
             </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.
@@ -36,10 +36,7 @@ const Index = () => {
           </div>
         </div>
       </section>
-
-
-      {/* CTA Section */}
-      
-    </div>;
+    </Layout>
+  );
 };
 export default Index;

src/pages/Themes.tsx

@@ -8,7 +8,7 @@ import {
   CreditCard,
   Calculator
 } from "lucide-react";
-import Navigation from "@/components/Navigation";
+import Layout from "@/components/Layout";
 import ThemeCard from "@/components/ThemeCard";
 
 const Themes = () => {
@@ -58,8 +58,7 @@ const Themes = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-background">
-      <Navigation />
+    <Layout>
       
       <div className="py-12 px-4">
         <div className="max-w-6xl mx-auto">
@@ -78,7 +77,7 @@ const Themes = () => {
 
         </div>
       </div>
-    </div>
+    </Layout>
   );
 };
 

src/pages/theme-pages/SchoolConnect.tsx

@@ -1,10 +1,14 @@
+import Layout from "@/components/Layout";
+
 import InteractiveGallery from "@/components/InteractiveGallery";
 
 const SchoolConnect = () => {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <InteractiveGallery />
-    </div>
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <InteractiveGallery />
+      </div>
+    </Layout>
   );
 };