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/components/ComingSoon.tsx

@@ -1,3 +1,4 @@
+import Layout from "@/components/Layout";
 import { Link } from "react-router-dom";
 import { ArrowLeft, Wrench } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -9,28 +10,36 @@ interface ComingSoonProps {
 
 const ComingSoon = ({ title, description }: ComingSoonProps) => {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+    <Layout>
-      <div className="text-center max-w-2xl mx-auto">
+      <div className="flex items-center justify-center px-4 py-20">
-        <div className="w-24 h-24 bg-surface-variant rounded-full flex items-center justify-center mx-auto mb-8">
+        <div className="text-center max-w-2xl mx-auto">
-          <Wrench className="w-12 h-12 text-muted-foreground" />
+          <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>
+          
+          {description && (
+            <p className="text-lg text-muted-foreground mb-8">
+              {description}
+            </p>
+          )}
+          
+          <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>
-        
-        <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>
-        
-        <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>
+    </Layout>
   );
 };
 

src/components/Layout.tsx

@@ -0,0 +1,33 @@
+import Navigation from '@/components/Navigation';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Navigation />
+      
+      <main className="flex-1">
+        {children}
+      </main>
+      
+      <footer className="bg-surface border-t border-outline py-8 px-4 mt-auto">
+        <div className="max-w-6xl mx-auto text-center">
+          <p className="text-muted-foreground">
+            © 2024 Interactives. Educational tools for enhanced learning experiences.
+          </p>
+          <div className="mt-4 flex justify-center gap-6 text-sm text-muted-foreground">
+            <span>Made with ❤️ for education</span>
+            <span>•</span>
+            <span>Explore • Learn • Discover</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Layout;

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">
+  return (
-      <Navigation />
+    <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>
-
+    </Layout>
-
+  );
-      {/* CTA Section */}
-      
-    </div>;
 };
 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">
+    <Layout>
-      <Navigation />
       
       <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">
+    <Layout>
-      <InteractiveGallery />
+      <div className="container mx-auto px-4 py-8">
-    </div>
+        <InteractiveGallery />
+      </div>
+    </Layout>
   );
 };