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/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;