Upload 3 files

src/components/layout/Footer.tsx

@@ -0,0 +1,32 @@
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-6">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          <div className="mb-4 md:mb-0">
+            <h3 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+              Roblox 基礎入門教學
+            </h3>
+            <p className="text-gray-400 mt-2">
+              學習 Roblox Studio 開發，打造屬於你的遊戲世界
+            </p>
+          </div>
+          <div className="flex space-x-4">
+            <a href="#" className="hover:text-blue-400 transition-colors">
+              關於我們
+            </a>
+            <a href="#" className="hover:text-blue-400 transition-colors">
+              聯絡資訊
+            </a>
+            <a href="#" className="hover:text-blue-400 transition-colors">
+              資源下載
+            </a>
+          </div>
+        </div>
+        <div className="mt-6 border-t border-gray-800 pt-6 text-center text-gray-400">
+          <p>© {new Date().getFullYear()} Roblox 基礎入門教學. 版權所有.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/layout/Layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from './Navbar';
+import Footer from './Footer';
+
+export default function Layout() {
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      <Navbar />
+      <main className="flex-grow container mx-auto px-4 py-8 max-w-7xl">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}

src/components/layout/Navbar.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <nav className="bg-gray-900 text-white shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <Link to="/" className="flex items-center">
+                <img 
+                  className="h-8 w-8 mr-2" 
+                  src="/roblox-logo.png" 
+                  alt="Roblox Logo" 
+                />
+                <span className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+                  Roblox 基礎入門
+                </span>
+              </Link>
+            </div>
+          </div>
+          
+          {/* Desktop menu */}
+          <div className="hidden md:block">
+            <div className="ml-10 flex items-baseline space-x-4">
+              <Link to="/" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
+                首頁
+              </Link>
+              <Link to="/lesson1" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
+                第一課：基礎入門
+              </Link>
+              <Link to="/lesson2" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
+                第二課：賽車遊戲
+              </Link>
+              <Link to="/lesson3" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
+                第三課：互動機關
+              </Link>
+              <Link to="/lesson4" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
+                第四課：視覺化設計
+              </Link>
+            </div>
+          </div>
+          
+          {/* Mobile menu button */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+            >
+              <span className="sr-only">Open main menu</span>
+              {isMenuOpen ? (
+                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              ) : (
+                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            <Link 
+              to="/" 
+              className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              首頁
+            </Link>
+            <Link 
+              to="/lesson1" 
+              className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              第一課：基礎入門
+            </Link>
+            <Link 
+              to="/lesson2" 
+              className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              第二課：賽車遊戲
+            </Link>
+            <Link 
+              to="/lesson3" 
+              className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              第三課：互動機關
+            </Link>
+            <Link 
+              to="/lesson4" 
+              className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              第四課：視覺化設計
+            </Link>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}