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;