Upload 5 files

src/pages/HomePage.tsx

@@ -0,0 +1,174 @@
+import { motion } from 'framer-motion';
+
+export default function HomePage() {
+  return (
+    <div className="py-8">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="text-center mb-12"
+      >
+        <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          Roblox 基礎入門教學
+        </h1>
+        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+          從零開始學習 Roblox Studio 開發，打造屬於你的遊戲世界
+        </p>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+        <motion.div 
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-xl shadow-lg"
+        >
+          <h2 className="text-2xl font-bold text-blue-800 mb-4">為什麼學習 Roblox 開發？</h2>
+          <p className="text-gray-700 mb-4">
+            Roblox 是一個全球性的遊戲平台，擁有超過 2 億月活躍用戶，為創作者提供了展示創意和賺取收入的機會。
+            透過學習 Roblox Studio 開發，你可以：
+          </p>
+          <ul className="list-disc pl-5 space-y-2 text-gray-700">
+            <li>將創意轉化為互動體驗</li>
+            <li>學習程式設計、3D 建模和遊戲開發基礎</li>
+            <li>加入全球開發者社群</li>
+            <li>有機會透過作品獲得收入</li>
+          </ul>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          className="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl shadow-lg"
+        >
+          <h2 className="text-2xl font-bold text-purple-800 mb-4">課程特色</h2>
+          <p className="text-gray-700 mb-4">
+            我們的教學課程專為初學者設計，透過循序漸進的方式帶你掌握 Roblox 開發技能：
+          </p>
+          <ul className="list-disc pl-5 space-y-2 text-gray-700">
+            <li>實用範例與實作練習</li>
+            <li>清晰的步驟說明與圖片指引</li>
+            <li>從基礎到進階的學習路徑</li>
+            <li>完整的程式碼範例與解說</li>
+            <li>專注於創意與互動性</li>
+          </ul>
+        </motion.div>
+      </div>
+
+      <motion.h2 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.6 }}
+        className="text-3xl font-bold text-center mb-8 text-gray-800"
+      >
+        課程內容
+      </motion.h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.7 }}
+          className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+        >
+          <div className="h-3 bg-blue-500"></div>
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">第一課：基礎入門</h3>
+            <p className="text-gray-600 mb-4">
+              了解 Roblox 平台、基本操作與 Studio 環境熟悉，為後續開發打下基礎。
+            </p>
+            <a 
+              href="/lesson1" 
+              className="inline-block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+            >
+              開始學習
+            </a>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.8 }}
+          className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+        >
+          <div className="h-3 bg-green-500"></div>
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">第二課：賽車遊戲</h3>
+            <p className="text-gray-600 mb-4">
+              建構四輪車模型與 8 字形賽道，實現車輛控制與計分系統。
+            </p>
+            <a 
+              href="/lesson2" 
+              className="inline-block px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
+            >
+              開始學習
+            </a>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.9 }}
+          className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+        >
+          <div className="h-3 bg-purple-500"></div>
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">第三課：互動機關</h3>
+            <p className="text-gray-600 mb-4">
+              設計機關門與數學題互動系統，學習進階互動機制與教育元素整合。
+            </p>
+            <a 
+              href="/lesson3" 
+              className="inline-block px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
+            >
+              開始學習
+            </a>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 1 }}
+          className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+        >
+          <div className="h-3 bg-pink-500"></div>
+          <div className="p-6">
+            <h3 className="text-xl font-bold text-gray-800 mb-2">第四課：視覺化設計</h3>
+            <p className="text-gray-600 mb-4">
+              使用立方體創建科技感立體投影圖像，探索視覺化程式設計的創意可能。
+            </p>
+            <a 
+              href="/lesson4" 
+              className="inline-block px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600 transition-colors"
+            >
+              開始學習
+            </a>
+          </div>
+        </motion.div>
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 1.1 }}
+        className="mt-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 text-white text-center"
+      >
+        <h2 className="text-2xl font-bold mb-4">準備好開始你的 Roblox 開發之旅了嗎？</h2>
+        <p className="mb-6 max-w-2xl mx-auto">
+          從第一課開始，循序漸進地學習 Roblox Studio 開發技能，打造屬於你的遊戲世界！
+        </p>
+        <a 
+          href="/lesson1" 
+          className="inline-block px-6 py-3 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 transition-colors"
+        >
+          立即開始學習
+        </a>
+      </motion.div>
+    </div>
+  );
+}

src/pages/Lesson1Page.tsx

@@ -0,0 +1,534 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export default function Lesson1Page() {
+  const [activeSection, setActiveSection] = useState('intro');
+
+  const scrollToSection = (sectionId: string) => {
+    setActiveSection(sectionId);
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6">
+      {/* Sidebar Navigation */}
+      <div className="md:w-1/4 lg:w-1/5">
+        <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
+          <h3 className="text-lg font-bold text-gray-800 mb-4">課程目錄</h3>
+          <nav className="space-y-2">
+            <button 
+              onClick={() => scrollToSection('intro')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'intro' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              課程目標
+            </button>
+            <button 
+              onClick={() => scrollToSection('part1')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part1' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              Roblox 平台介紹
+            </button>
+            <button 
+              onClick={() => scrollToSection('part2')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part2' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              Roblox 基本操作
+            </button>
+            <button 
+              onClick={() => scrollToSection('part3')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part3' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              Roblox Studio 環境熟悉
+            </button>
+            <button 
+              onClick={() => scrollToSection('summary')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'summary' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              總結與練習
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="md:w-3/4 lg:w-4/5">
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 mb-8 text-white">
+            <h1 className="text-3xl md:text-4xl font-bold mb-4">Roblox 基礎入門 - 第一課</h1>
+            <p className="text-lg opacity-90">
+              從零開始學習 Roblox，了解平台基礎與 Studio 開發環境
+            </p>
+          </div>
+
+          {/* Course Objectives */}
+          <section id="intro" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">課程目標</h2>
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <p className="text-gray-700 mb-4">
+                本課程旨在幫助初學者了解 Roblox 平台的基本概念，掌握基本操作，並熟悉 Roblox Studio 開發環境。通過本課程，學員將能夠：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>了解 Roblox 平台的基本概念與特色</li>
+                <li>掌握 Roblox 平台的基本操作方式</li>
+                <li>熟悉 Roblox Studio 開發環境的界面與功能</li>
+                <li>創建一個簡單的 Roblox 場景</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 1: Roblox Platform Introduction */}
+          <section id="part1" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第一部分：Roblox 平台介紹</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 是什麼？</h3>
+              <p className="text-gray-700 mb-4">
+                Roblox 是一個全球性平台，���天有成千上萬人在這裡的沉浸式使用者創作 3D 世界裡一起想像、創作及分享體驗。在 Roblox 中，您可以找到各種類型的體驗，這些多樣化的體驗充分展現了創作者們廣闊的想像力。
+              </p>
+              <p className="text-gray-700 mb-4">
+                Roblox 的獨特之處在於，平台上所有的體驗和大部分虛擬人偶道具都是由全球社群創作的。這意味著 Roblox 不僅是一個遊戲平台，更是一個創作平台，讓使用者可以自由發揮創意，創造屬於自己的虛擬世界。
+              </p>
+              <div className="my-6 flex justify-center">
+                <img 
+                  src="/roblox-platform.webp" 
+                  alt="Roblox 平台介紹" 
+                  className="rounded-lg shadow-md max-w-full h-auto"
+                />
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 的特色</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">創作與分享</h4>
+                  <p className="text-gray-700">
+                    Roblox 允許使用者創建自己的遊戲和體驗，並與全球數百萬玩家分享。
+                  </p>
+                </div>
+                <div className="bg-purple-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-purple-800 mb-2">社交互動</h4>
+                  <p className="text-gray-700">
+                    使用者可以與朋友一起遊玩，參與各種社交活動，建立虛擬社區。
+                  </p>
+                </div>
+                <div className="bg-green-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-green-800 mb-2">跨平台體驗</h4>
+                  <p className="text-gray-700">
+                    Roblox 支援多種設備，包括電腦、手機、平板和遊戲主機，讓使用者可以隨時隨地享受 Roblox 體驗。
+                  </p>
+                </div>
+                <div className="bg-yellow-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-yellow-800 mb-2">虛擬經濟系統</h4>
+                  <p className="text-gray-700">
+                    Roblox 擁有自己的虛擬貨幣 Robux，使用者可以通過創作內容賺取 Robux，甚至將其兌換為真實貨幣。
+                  </p>
+                </div>
+                <div className="bg-pink-50 p-4 rounded-lg md:col-span-2">
+                  <h4 className="font-bold text-pink-800 mb-2">持續更新與發展</h4>
+                  <p className="text-gray-700">
+                    Roblox 平台不斷推出新功能和工具，為創作者提供更多可能性。
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 的應用領域</h3>
+              <p className="text-gray-700 mb-4">
+                除了娛樂，Roblox 也被廣泛應用於教育領域。許多教育工作者利用 Roblox 教授編程、設計和創意思維等技能。通過在 Roblox 上開發，使用者可以培養問題解決、團隊合作和程式編寫等重要能力，同時也能發展數理工科（STEM）技能。
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <h4 className="font-bold text-blue-800 mb-2">教育價值</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>培養程式設計思維</li>
+                  <li>發展 3D 建模與空間思考能力</li>
+                  <li>鍛煉創意解決問題的能力</li>
+                  <li>學習團隊協作與專案管理</li>
+                  <li>理解基本經濟概念與市場運作</li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Part 2: Roblox Basic Operations */}
+          <section id="part2" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第二部分：Roblox 基本操作</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">註冊與登入</h3>
+              <p className="text-gray-700 mb-4">
+                要開始使用 Roblox，首先需要創建一個帳號。訪問 <a href="https://www.roblox.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Roblox 官網</a>，點擊「註冊」按鈕，填寫相關信息即可完成註冊。註冊後，您可以使用您的用戶名和密碼登入 Roblox 平台。
+              </p>
+              <div className="bg-yellow-50 p-4 rounded-lg">
+                <h4 className="font-bold text-yellow-800 mb-2">註冊提示</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>選擇一個容易記住但難以猜測的密碼</li>
+                  <li>使用真實的出生日期（這會影響帳號的安全設置）</li>
+                  <li>考慮啟用雙重驗證以增強帳號安全性</li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">探索 Roblox 平台</h3>
+              <p className="text-gray-700 mb-4">
+                登入後，您將看到 Roblox 的主頁面，這裡展示了推薦的遊戲和體驗。您可以通過頂部的導航欄訪問不同的頁面：
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">首頁</h4>
+                  <p className="text-gray-700">顯示推薦的遊戲和體驗</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">發現</h4>
+                  <p className="text-gray-700">瀏覽不同類別的遊戲和體驗</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">市場</h4>
+                  <p className="text-gray-700">購買虛擬物品，如服裝、配件等</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">創建</h4>
+                  <p className="text-gray-700">訪問 Roblox Studio 和創作相關資源</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">Robux</h4>
+                  <p className="text-gray-700">購買和管理虛擬貨幣</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">個人資料</h4>
+                  <p className="text-gray-700">查看和編輯個人信息</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">遊玩體驗</h3>
+              <p className="text-gray-700 mb-4">
+                在 Roblox 中遊玩體驗非常簡單：
+              </p>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在首頁或發現頁面找到您感興趣的體驗</li>
+                <li>點擊體驗卡片進入詳情頁</li>
+                <li>點擊「遊玩」按鈕開始體驗</li>
+                <li>等待體驗加載完成後，您就可以開始遊玩了</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">基本控制</h3>
+              <p className="text-gray-700 mb-4">
+                在大多數 Roblox 體驗中，基本控制方式如下：
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">移動</h4>
+                  <p className="text-gray-700">使用 W, A, S, D 鍵或方向鍵控制角色移動</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">跳躍</h4>
+                  <p className="text-gray-700">按空格鍵</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">視角控制</h4>
+                  <p className="text-gray-700">移動滑鼠來改變視角</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">互動</h4>
+                  <p className="text-gray-700">點擊滑鼠左鍵或按 E 鍵與物體互動（具體按鍵可能因體驗而異）</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">社交功能</h3>
+              <p className="text-gray-700 mb-4">
+                Roblox 提供了豐富的社交功能，讓使用者可以與朋友互動：
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-purple-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-purple-800 mb-2">添加好友</h4>
+                  <p className="text-gray-700">訪問其他使用者的個人資料頁面，點擊「添加好友」按鈕</p>
+                </div>
+                <div className="bg-purple-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-purple-800 mb-2">聊天</h4>
+                  <p className="text-gray-700">通過聊天功能與好友交流</p>
+                </div>
+                <div className="bg-purple-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-purple-800 mb-2">組隊</h4>
+                  <p className="text-gray-700">邀請好友一起遊玩體驗</p>
+                </div>
+                <div className="bg-purple-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-purple-800 mb-2">加入群組</h4>
+                  <p className="text-gray-700">參與社區活動，結識志同道合的玩家</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Part 3: Roblox Studio Environment */}
+          <section id="part3" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第三部分：Roblox Studio 環境熟悉</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">什麼是 Roblox Studio？</h3>
+              <p className="text-gray-700 mb-4">
+                Roblox Studio 是 Roblox 的官方開發工具，它允許創作者設計、構建和發布自己的 Roblox 體驗。無論您是初學者還是有經驗的開發者，Roblox Studio 都提供了豐富的工具和資源，幫助您實現創意。
+              </p>
+              <div className="my-6 flex justify-center">
+                <img 
+                  src="/roblox-studio.webp" 
+                  alt="Roblox Studio 介紹" 
+                  className="rounded-lg shadow-md max-w-full h-auto"
+                />
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">安裝 Roblox Studio</h3>
+              <p className="text-gray-700 mb-4">
+                要開始使用 Roblox Studio，請按照以下步驟操作：
+              </p>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>訪問 <a href="https://www.roblox.com/create" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Roblox 創建頁面</a></li>
+                <li>點擊「開始創建」按鈕</li>
+                <li>如果您尚未安裝 Roblox Studio，系統會提示您下載並安裝</li>
+                <li>安裝完成後，使用您的 Roblox 帳號登入 Studio</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox Studio 界面概覽</h3>
+              <p className="text-gray-700 mb-4">
+                首次打開 Roblox Studio 時，您會看到一個起始頁面，提供了多種模板供您選擇。選擇一個模板後，您將進入 Studio 的主界面，主要包括以下部分：
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">菜單欄</h4>
+                  <p className="text-gray-700">位於頂部，包含文件、編輯、視圖等選項</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">工具欄</h4>
+                  <p className="text-gray-700">包含常用工具按鈕，如選擇、移動、縮放等</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">資源管理器</h4>
+                  <p className="text-gray-700">顯示場景中的所有物體和組件</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">屬性面板</h4>
+                  <p className="text-gray-700">顯示選中物體的屬性和設置</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">工作區</h4>
+                  <p className="text-gray-700">主要的 3D 編輯區域，您可以在這裡構建和編輯場景</p>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">輸出窗口</h4>
+                  <p className="text-gray-700">顯示腳本執行結果和錯誤信息</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">基本工具使用</h3>
+              <p className="text-gray-700 mb-4">
+                Roblox Studio 提供了多種工具，幫助您創建和編輯場景：
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">選擇工具</h4>
+                  <p className="text-gray-700">用於選擇場景中的物體</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">移動工具</h4>
+                  <p className="text-gray-700">用於移動物體的位置</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">旋轉工具</h4>
+                  <p className="text-gray-700">用於旋轉物體</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">縮放工具</h4>
+                  <p className="text-gray-700">用於調整物體的大小</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg md:col-span-2">
+                  <h4 className="font-bold text-blue-800 mb-2">部件工具</h4>
+                  <p className="text-gray-700">用於創建基本形狀，如方塊、球體等</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">創建簡單場景</h3>
+              <p className="text-gray-700 mb-4">
+                讓我們通過創建一個簡單的場景來熟悉 Roblox Studio 的基本操作：
+              </p>
+              <div className="space-y-4">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">1. 創建新項目</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>打開 Roblox Studio</li>
+                    <li>選擇「基礎模板」創建新項目</li>
+                  </ul>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">2. 添加地形</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>點擊「模型」選項卡</li>
+                    <li>選擇「地形編輯器」</li>
+                    <li>使用地形工具創建基本地形</li>
+                  </ul>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">3. 添加物體</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>在工具欄中選擇「部件」工具</li>
+                    <li>點擊工作區創建一個方塊</li>
+                    <li>使用移動、旋轉和縮放工具調整方塊的位置和大小</li>
+                  </ul>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">4. 設置屬性</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>在資源管理器中選擇創建的方塊</li>
+                    <li>在屬性面板中修改顏色、材質等屬性</li>
+                  </ul>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">5. 測試場景</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>點擊「播放」按鈕測試場景</li>
+                    <li>使用 WASD 鍵和空格鍵控制角色移動和跳躍</li>
+                  </ul>
+                </div>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-gray-800 mb-2">6. 保存項目</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>點擊「文件」{'>'}「保存」</li>
+                    <li>輸入項目名稱並保存</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">發布體驗</h3>
+              <p className="text-gray-700 mb-4">
+                完成場景創建後，您可以將其發布到 Roblox 平台，與其他玩家分享：
+              </p>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>點擊「文件」{'>'}「發布到 Roblox」</li>
+                <li>設置體驗名稱、描述和縮略圖</li>
+                <li>選擇發布選項（公開或私人）</li>
+                <li>點擊「發布」按鈕</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Summary and Practice */}
+          <section id="summary" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">總結</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <p className="text-gray-700 mb-4">
+                在本課程中，我們介紹了 Roblox 平台的基本概念，學習了 Roblox 的基本操作方式，並熟悉了 Roblox Studio 開發環境。通過這些基礎知識，您已經具備了開始 Roblox 創作之旅的能力。
+              </p>
+              <p className="text-gray-700 mb-4">
+                在接下來的課程中，我們將深入探討 Roblox Studio 的更多功能，學習如何創建更複雜的場景，添加互動元素，以及使用 Lua 腳本為體驗添加邏輯和功能。
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">練習任務</h3>
+              <p className="text-gray-700 mb-4">
+                為了鞏固所學知識，請嘗試完成以下任務：
+              </p>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>創建一個 Roblox 帳號並探索平台</li>
+                <li>遊玩至少三個不同類型的 Roblox 體驗</li>
+                <li>安裝 Roblox Studio 並熟悉界面</li>
+                <li>使用基礎模板創建一個簡單的場景，包含地形和至少三個不同的物體</li>
+                <li>測試您創建的場景並保存項目</li>
+              </ol>
+            </div>
+
+            <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">資源推薦</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a href="https://create.roblox.com/docs" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者文檔</h4>
+                  <p className="text-gray-700">官方開發文檔，包含詳細的 API 參考和教程</p>
+                </a>
+                <a href="https://education.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 教育資源</h4>
+                  <p className="text-gray-700">專為教育者和學生設計的學習資源</p>
+                </a>
+                <a href="https://devforum.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者論壇</h4>
+                  <p className="text-gray-700">與其他開發者交流，獲取幫助和分享經驗</p>
+                </a>
+                <a href="https://www.youtube.com/channel/UCjiPEaapiHbJMoAdi_L8fNA" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者 YouTube 頻道</h4>
+                  <p className="text-gray-700">官方視頻教程和開發者更新</p>
+                </a>
+              </div>
+            </div>
+          </section>
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-12">
+            <a 
+              href="/" 
+              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd" />
+              </svg>
+              返回首頁
+            </a>
+            <a 
+              href="/lesson2" 
+              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"
+            >
+              下一課：賽車遊戲
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/pages/Lesson2Page.tsx

@@ -0,0 +1,731 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const carControllerScript = `
+-- 車輛控制腳本
+-- 常數設定
+local FORWARD_FORCE = 15000    -- 前進力量
+local REVERSE_FORCE = 8000     -- 後退力量
+local TURN_SPEED = 2.5         -- 轉向速度
+local MAX_SPEED = 60           -- 最大速度 (studs/秒)
+local BRAKE_FORCE = 10000      -- 剎車力量
+
+-- 獲取車輛模型及其組件
+local car = script.Parent
+local body = car:WaitForChild("Body")  -- 車身主體
+local frontLeftWheel = car:WaitForChild("FrontLeftWheel")
+local frontRightWheel = car:WaitForChild("FrontRightWheel")
+local rearLeftWheel = car:WaitForChild("RearLeftWheel")
+local rearRightWheel = car:WaitForChild("RearRightWheel")
+
+-- 獲取車輪連接點
+local flHinge = car:WaitForChild("FLHinge")
+local frHinge = car:WaitForChild("FRHinge")
+local rlHinge = car:WaitForChild("RLHinge")
+local rrHinge = car:WaitForChild("RRHinge")
+
+-- 設置車輛控制
+local vehicleSeat = car:WaitForChild("VehicleSeat")
+
+-- 當玩家進入車輛時
+vehicleSeat.Changed:Connect(function(property)
+    if property == "Occupant" then
+        local player = vehicleSeat.Occupant
+        if player then
+            -- 玩家進入車輛
+            print("玩家進入車輛")
+        else
+            -- 玩家離開車輛
+            print("玩家離開車輛")
+        end
+    end
+end)
+
+-- 主要控制循環
+game:GetService("RunService").Heartbeat:Connect(function(deltaTime)
+    if not vehicleSeat.Occupant then return end
+    
+    local throttle = vehicleSeat.ThrottleFloat  -- -1 到 1 之間的值
+    local steer = vehicleSeat.SteerFloat        -- -1 到 1 之間的值
+    
+    -- 計算車輛當前速度
+    local velocity = body.Velocity
+    local speed = velocity.Magnitude
+    
+    -- 應用前進/後退力量
+    local forceVector = body.CFrame.LookVector
+    local force = Vector3.new(0, 0, 0)
+    
+    if throttle > 0 then
+        -- 前進
+        force = forceVector * FORWARD_FORCE * throttle
+    elseif throttle < 0 then
+        -- 後退
+        force = forceVector * -REVERSE_FORCE * math.abs(throttle)
+    end
+    
+    -- 限制最大速度
+    if speed > MAX_SPEED and throttle > 0 then
+        force = Vector3.new(0, 0, 0)
+    end
+    
+    -- 應用轉向
+    local turnAngle = steer * TURN_SPEED * deltaTime
+    if math.abs(throttle) > 0.1 then  -- 只有在移動時才轉向
+        body.CFrame = body.CFrame * CFrame.Angles(0, turnAngle, 0)
+    end
+    
+    -- 應用力量到車身
+    body:ApplyForce(force)
+    
+    -- 旋轉車輪
+    local wheelRotationSpeed = speed * 0.5
+    if throttle > 0 then
+        -- 前進時車輪正向旋轉
+        flHinge.AngularVelocity = wheelRotationSpeed
+        frHinge.AngularVelocity = wheelRotationSpeed
+        rlHinge.AngularVelocity = wheelRotationSpeed
+        rrHinge.AngularVelocity = wheelRotationSpeed
+    elseif throttle < 0 then
+        -- 後退時車輪反向旋轉
+        flHinge.AngularVelocity = -wheelRotationSpeed
+        frHinge.AngularVelocity = -wheelRotationSpeed
+        rlHinge.AngularVelocity = -wheelRotationSpeed
+        rrHinge.AngularVelocity = -wheelRotationSpeed
+    else
+        -- 停止時車輪不旋轉
+        flHinge.AngularVelocity = 0
+        frHinge.AngularVelocity = 0
+        rlHinge.AngularVelocity = 0
+        rrHinge.AngularVelocity = 0
+    end
+    
+    -- 轉向前輪
+    frontLeftWheel.CFrame = frontLeftWheel.CFrame * CFrame.Angles(0, steer * 0.5, 0)
+    frontRightWheel.CFrame = frontRightWheel.CFrame * CFrame.Angles(0, steer * 0.5, 0)
+end)
+
+-- 設置攝影機
+local function setupCamera(player)
+    local character = player.Character or player.CharacterAdded:Wait()
+    local humanoid = character:WaitForChild("Humanoid")
+    
+    -- 設置第三人稱攝影機
+    humanoid.CameraOffset = Vector3.new(0, 2, 0)
+end
+
+vehicleSeat.Changed:Connect(function(property)
+    if property == "Occupant" and vehicleSeat.Occupant then
+        local player = game.Players:GetPlayerFromCharacter(vehicleSeat.Occupant.Parent)
+        if player then
+            setupCamera(player)
+        end
+    end
+end)
+`;
+
+const scoringSystemScript = `
+-- 計分系統腳本
+-- 常數設定
+local CHECKPOINTS_TO_COMPLETE = 8  -- 完成一圈所需的檢查點數量
+local FINISH_MESSAGE = "恭喜完成比賽！"
+
+-- 服務引用
+local Players = game:GetService("Players")
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+-- 創建遠端事件用於更新UI
+local checkpointEvent = Instance.new("RemoteEvent")
+checkpointEvent.Name = "CheckpointEvent"
+checkpointEvent.Parent = ReplicatedStorage
+
+-- 玩家數據儲存
+local playerData = {}
+
+-- 初始化玩家數據
+local function initPlayerData(player)
+    playerData[player.UserId] = {
+        checkpointsPassed = 0,
+        lastCheckpoint = 0,
+        raceCompleted = false,
+        startTime = 0,
+        finishTime = 0
+    }
+end
+
+-- 當玩家加入遊戲時
+Players.PlayerAdded:Connect(function(player)
+    initPlayerData(player)
+    
+    -- 創建計分UI
+    local scoreGui = Instance.new("ScreenGui")
+    scoreGui.Name = "RaceScoreGui"
+    
+    local frame = Instance.new("Frame")
+    frame.Size = UDim2.new(0, 200, 0, 100)
+    frame.Position = UDim2.new(0.85, -100, 0, 10)
+    frame.BackgroundTransparency = 0.5
+    frame.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
+    frame.Parent = scoreGui
+    
+    local checkpointLabel = Instance.new("TextLabel")
+    checkpointLabel.Name = "CheckpointLabel"
+    checkpointLabel.Size = UDim2.new(1, 0, 0.5, 0)
+    checkpointLabel.Text = "檢查點: 0/" .. CHECKPOINTS_TO_COMPLETE
+    checkpointLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+    checkpointLabel.BackgroundTransparency = 1
+    checkpointLabel.Parent = frame
+    
+    local timeLabel = Instance.new("TextLabel")
+    timeLabel.Name = "TimeLabel"
+    timeLabel.Size = UDim2.new(1, 0, 0.5, 0)
+    timeLabel.Position = UDim2.new(0, 0, 0.5, 0)
+    timeLabel.Text = "時間: 0.00"
+    timeLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+    timeLabel.BackgroundTransparency = 1
+    timeLabel.Parent = frame
+    
+    scoreGui.Parent = player.PlayerGui
+    
+    -- 當玩家角色加入時
+    player.CharacterAdded:Connect(function(character)
+        -- 重置玩家數據
+        initPlayerData(player)
+        
+        -- 更新UI
+        checkpointEvent:FireClient(player, "reset", 0, CHECKPOINTS_TO_COMPLETE)
+    end)
+end)
+
+-- 當玩家離開遊戲時
+Players.PlayerRemoving:Connect(function(player)
+    playerData[player.UserId] = nil
+end)
+
+-- 設置檢查點觸發器
+local function setupCheckpoint(checkpoint, checkpointNumber)
+    checkpoint.Touched:Connect(function(hit)
+        local character = hit.Parent
+        local player = Players:GetPlayerFromCharacter(character)
+        
+        if player and not playerData[player.UserId].raceCompleted then
+            local data = playerData[player.UserId]
+            
+            -- 確保檢查點按順序通過
+            if checkpointNumber == (data.lastCheckpoint % CHECKPOINTS_TO_COMPLETE) + 1 then
+                data.checkpointsPassed = data.checkpointsPassed + 1
+                data.lastCheckpoint = checkpointNumber
+                
+                -- 如果是第一個檢查點且剛開始比賽，記錄開始時間
+                if checkpointNumber == 1 and data.startTime == 0 then
+                    data.startTime = tick()
+                end
+                
+                -- 更新UI
+                checkpointEvent:FireClient(player, "update", data.checkpointsPassed, CHECKPOINTS_TO_COMPLETE)
+                
+                -- 檢查是否完成比賽 (完成一圈8字形)
+                if data.checkpointsPassed >= CHECKPOINTS_TO_COMPLETE then
+                    data.raceCompleted = true
+                    data.finishTime = tick() - data.startTime
+                    
+                    -- 通知玩家完成比賽
+                    checkpointEvent:FireClient(player, "complete", data.finishTime)
+                    
+                    -- 顯示完成訊息
+                    game.StarterGui:SetCore("ChatMakeSystemMessage", {
+                        Text = FINISH_MESSAGE .. "\\n完成時間: " .. string.format("%.2f", data.finishTime) .. " 秒",
+                        Color = Color3.fromRGB(0, 255, 0),
+                        Font = Enum.Font.SourceSansBold
+                    })
+                end
+            end
+        end
+    end)
+end
+
+-- 尋找並設置所有檢查點
+local function setupAllCheckpoints()
+    local checkpoints = workspace:FindFirstChild("Checkpoints")
+    if checkpoints then
+        for i, checkpoint in ipairs(checkpoints:GetChildren()) do
+            if checkpoint:IsA("BasePart") and checkpoint.Name:match("Checkpoint%d+") then
+                local number = tonumber(checkpoint.Name:match("%d+"))
+                if number then
+                    setupCheckpoint(checkpoint, number)
+                end
+            end
+        end
+    else
+        warn("找不到檢查點資料夾！請確保在工作區中有一個名為 'Checkpoints' 的資料夾，其中包含命名為 'Checkpoint1', 'Checkpoint2' 等的檢查點。")
+    end
+end
+
+-- 設置客戶端UI更新
+local function setupClientUI()
+    local clientScript = Instance.new("LocalScript")
+    clientScript.Name = "RaceUIUpdater"
+    
+    clientScript.Source = [[
+        local ReplicatedStorage = game:GetService("ReplicatedStorage")
+        local checkpointEvent = ReplicatedStorage:WaitForChild("CheckpointEvent")
+        local player = game.Players.LocalPlayer
+        local scoreGui = player.PlayerGui:WaitForChild("RaceScoreGui")
+        local frame = scoreGui:WaitForChild("Frame")
+        local checkpointLabel = frame:WaitForChild("CheckpointLabel")
+        local timeLabel = frame:WaitForChild("TimeLabel")
+        
+        local startTime = 0
+        local isRacing = false
+        
+        -- 更新時間顯示
+        game:GetService("RunService").RenderStepped:Connect(function()
+            if isRacing and startTime > 0 then
+                local currentTime = tick() - startTime
+                timeLabel.Text = "時間: " .. string.format("%.2f", currentTime)
+            end
+        end)
+        
+        -- 處理檢查點事件
+        checkpointEvent.OnClientEvent:Connect(function(action, value, total)
+            if action == "update" then
+                checkpointLabel.Text = "檢查點: " .. value .. "/" .. total
+                
+                -- 如果是第一個檢查點，開始計時
+                if value == 1 and not isRacing then
+                    startTime = tick()
+                    isRacing = true
+                end
+            elseif action == "complete" then
+                isRacing = false
+                timeLabel.Text = "完成時間: " .. string.format("%.2f", value)
+                checkpointLabel.TextColor3 = Color3.fromRGB(0, 255, 0)
+                timeLabel.TextColor3 = Color3.fromRGB(0, 255, 0)
+            elseif action == "reset" then
+                isRacing = false
+                startTime = 0
+                checkpointLabel.Text = "檢查點: 0/" .. total
+                timeLabel.Text = "時間: 0.00"
+                checkpointLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+                timeLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+            end
+        end)
+    ]]
+    
+    clientScript.Parent = ReplicatedStorage
+end
+
+-- 初始化
+setupAllCheckpoints()
+setupClientUI()
+
+print("賽車計分系統已初始化！")
+`;
+
+export default function Lesson2Page() {
+  const [activeSection, setActiveSection] = useState('intro');
+
+  const scrollToSection = (sectionId: string) => {
+    setActiveSection(sectionId);
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6">
+      {/* Sidebar Navigation */}
+      <div className="md:w-1/4 lg:w-1/5">
+        <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
+          <h3 className="text-lg font-bold text-gray-800 mb-4">課程目錄</h3>
+          <nav className="space-y-2">
+            <button 
+              onClick={() => scrollToSection('intro')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'intro' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              課程簡介
+            </button>
+            <button 
+              onClick={() => scrollToSection('part1')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part1' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              賽車模型建構
+            </button>
+            <button 
+              onClick={() => scrollToSection('part2')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part2' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              8字形賽道設計
+            </button>
+            <button 
+              onClick={() => scrollToSection('part3')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part3' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              車輛控制系統
+            </button>
+            <button 
+              onClick={() => scrollToSection('part4')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part4' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              計分系統
+            </button>
+            <button 
+              onClick={() => scrollToSection('part5')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part5' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              完善與匯出
+            </button>
+            <button 
+              onClick={() => scrollToSection('summary')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'summary' 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              總結與挑戰
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="md:w-3/4 lg:w-4/5">
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="bg-gradient-to-r from-green-600 to-teal-600 rounded-xl p-8 mb-8 text-white">
+            <h1 className="text-3xl md:text-4xl font-bold mb-4">Roblox 基礎入門第二課 - 創造我的世界：賽車遊戲學習</h1>
+            <p className="text-lg opacity-90">
+              學習建構賽車模型、設計賽道、編寫控制腳本與計分系統
+            </p>
+          </div>
+
+          {/* Course Introduction */}
+          <section id="intro" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">課程簡介</h2>
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <p className="text-gray-700 mb-4">
+                本課程將帶領學習者建構一個完整的賽車遊戲，包含四輪車模型、8字形賽道、車輛控制系統與計分機制。通過實際操作，學習者將掌握 Roblox Studio 中的模型建構、程式控制與遊戲機制設計等核心技能。
+              </p>
+              <h3 className="text-xl font-bold text-green-700 mb-3">課程目標</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>在 Roblox Studio 中建構可操作的四輪車模型</li>
+                <li>設計並實現 8 字形賽道與檢查點系統</li>
+                <li>編寫車輛控制腳本，實現前進、後退、左右轉向功能</li>
+                <li>設計計分機制，追蹤賽車完成圈數並判定比賽完成</li>
+              </ul>
+              <h3 className="text-xl font-bold text-green-700 mt-6 mb-3">前置準備</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>已安裝最新版本的 Roblox Studio</li>
+                <li>具備 Roblox Studio 基本操作能力（第一課內容）</li>
+                <li>了解基本的 Lua 程式語法</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 1: Car Model Construction */}
+          <section id="part1" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第一部分：賽車模型建構</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 1：創建新專案</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>打開 Roblox Studio</li>
+                <li>選擇「基礎模板」創建新專案</li>
+                <li>保存專案，命名為「RaceCarGame」</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 2：建立車身基本結構</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在工作區中插入一個方塊部件（Part）</li>
+                <li>調整車身尺寸與位置：Size: 6, 2, 10 (寬, 高, 長), Position: 0, 3, 0 (X, Y, Z), 命名為「Body」</li>
+                <li>設置車身外觀：選擇喜歡的顏色, Material: SmoothPlastic, Anchored: false</li>
+                <li>設置物理屬性：CanCollide: true, Massless: false, CustomPhysicalProperties: true (Density: 1, Friction: 0.3, Elasticity: 0.2)</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 3：創建車輪</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建前左輪：插入圓柱體（Cylinder）, Size: 2, 0.5, 2, Position: -3, 2, 3.5, Orientation: 0, 0, 90, 命名為「FrontLeftWheel」</li>
+                <li>創建前右輪：複製前左輪, Position: 3, 2, 3.5, 命名為「FrontRightWheel」</li>
+                <li>創建後左輪：複製前左輪, Position: -3, 2, -3.5, 命名為「RearLeftWheel」</li>
+                <li>創建後右輪：複製前左輪, Position: 3, 2, -3.5, 命名為「RearRightWheel」</li>
+                <li>設置車輪外觀：Color: 黑色, Material: Rubber, CanCollide: true</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 4：連接車輪與車身</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建前左輪連接點：使用 HingeConstraint, Attachment0 連接 Body, Attachment1 連接 FrontLeftWheel, 命名為「FLHinge」</li>
+                <li>設置前左輪連接點屬性：ActuatorType: Motor, AngularVelocity: 0, MotorMaxTorque: 1000</li>
+                <li>重複上述步驟，為其他三個車輪創建連接點 (FRHinge, RLHinge, RRHinge)</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 5：添加車身細節</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建擋風玻璃：使用方塊部件, 設置大小、位置、顏色（淺藍）、透明度（0.5）、材質（Glass）</li>
+                <li>創建前燈：使用兩個小方塊部件, 放置在車身前部, 設置顏色（黃/白）, 可選添加 PointLight</li>
+                <li>創建後燈：使用兩個小方塊部件, 放置在車身後部, 設置顏色（紅）</li>
+                <li>創建座椅與方向盤：使用方塊和圓環部件</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 6：添加駕駛座</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>插入 VehicleSeat：放置在車身上方中央, 命名為「VehicleSeat」</li>
+                <li>設置 VehicleSeat 屬性：MaxSpeed: 60, Torque: 200, TurnSpeed: 2.5</li>
+                <li>將所有部件組織到一個模型中：選中所有部件, 右鍵「Group」, 命名為「RaceCar」</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 2: Figure-8 Track Design */}
+          <section id="part2" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第二部分：8字形賽道設計</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 1：規劃賽道布局</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建賽道基礎平面：插入大型方塊部件, Size: 100, 1, 100, Position: 0, 0, 0, Color: 綠色, Material: Grass, Anchored: true</li>
+                <li>規劃 8 字形賽道路徑：在基礎平面上方繪製, 確保寬度足夠（12-15 studs）, 彎道半徑適當</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 2：建構賽道</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建賽道部件：使用多個方塊部件組合成 8 字形, 設置大小、位置、顏色（灰色）、材質（Concrete）、Anchored: true</li>
+                <li>使用 Union 工具合併賽道部件...賽道部件, 點擊「Model」{'>'}「Union」, 命名為「Track...</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 3：添加賽道邊界</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建護欄：沿賽道外圍放置方塊部件, 設置大小、顏色（紅白相間）、材質（SmoothPlastic）、Anchored: true</li>
+                <li>調整彎道處的護欄：使用多個小段護欄拼接, 確保護欄緊貼賽道邊緣</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 4：創建檢查點系統</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建檢查點資料夾：在工作區創建 Folder, 命名為「Checkpoints」</li>
+                <li>創建檢查點觸發器：在關鍵位置插入方塊部件, Size: 賽道寬度, 5, 1, Transparency: 0.8, CanCollide: false, 命名為「Checkpoint1」、「Checkpoint2」等, 按順序排列</li>
+                <li>創建起點/終點線：在賽道上創建明顯的起點/終點線, 與第一個檢查點重合</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 3: Vehicle Control System */}
+          <section id="part3" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第三部分：車輛控制系統</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 1：創建車輛控制腳本</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在 RaceCar 模型中添加腳本, 命名為「CarController」</li>
+                <li>編寫車輛控制腳本（見下方代碼）</li>
+                <li>保存腳本</li>
+              </ol>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {carControllerScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 2：測試車輛控制</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>點擊「Play」按鈕進入測試模式</li>
+                <li>使用 W/A/S/D 或方向鍵駕駛車輛</li>
+                <li>測試加速、轉向和剎車功能</li>
+                <li>點擊「Stop」按鈕退出測試模式</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 3：調整車輛控制參數</h3>
+              <p className="text-gray-700 mb-4">
+                根據測試結果調整 CarController 腳本中的參數：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>FORWARD_FORCE, REVERSE_FORCE, MAX_SPEED：調整速度與力量</li>
+                <li>TURN_SPEED：調整轉向靈敏度</li>
+                <li>物理屬性：調整車身和車輪的 Density, Friction, Elasticity</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 4: Scoring System */}
+          <section id="part4" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第四部分：計分系統</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 1：創建計分系統腳本</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在 ServerScriptService 中添加腳本, 命名為「ScoringSystem」</li>
+                <li>編寫計分系統腳本（見下方代碼）</li>
+                <li>保存腳本</li>
+              </ol>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {scoringSystemScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 2：測試計分系統</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>確保所有檢查點已正確設置在 Checkpoints 資料夾中</li>
+                <li>點擊「Play」按鈕進入測試模式</li>
+                <li>駕駛車輛通過檢查點</li>
+                <li>觀察計分 UI 是否正確更新（檢查點數量和時間）</li>
+                <li>完成一圈 8 字形賽道，確認比賽完成提示是否顯示</li>
+                <li>點擊「Stop」按鈕退出測試模式</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 5: Refinement and Export */}
+          <section id="part5" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第五部分：完善與匯出</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 1：完善遊戲細節</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>添加遊戲說明 GUI：包含控制說明和遊戲目標</li>
+                <li>添加環境裝飾：樹木、建築、天空盒等</li>
+                <li>添加音效：車輛引擎聲、比賽開始/完成音效</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 2：最終測試與調整</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>進行全面測試：車輛控制、檢查點、計分、性能</li>
+                <li>根據測試結果進行調整：優化物理、調整檢查點、修復問題</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">步驟 3：匯出專案</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>保存專案：File {'>'}Save</li>
+                <li>發布到 Roblox：File {'>'}Publish to Roblox</li>
+                <li>匯出模型（可選）：選中 RaceCar 模型, File {'>'}Export Selection</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Summary and Challenge */}
+          <section id="summary" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">總結</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <p className="text-gray-700 mb-4">
+                在本課程中，我們成功建構了一個完整的賽車遊戲，包含四輪車模型、8字形賽道、車輛控制系統與計分機制。通過這個項目，學習者掌握了 Roblox Studio 中的模型建構、程式控制與遊戲機制設計等核心技能。
+              </p>
+              <p className="text-gray-700 mb-4">
+                這些技能可以應用於更複雜的遊戲開發項目，例如多人賽車遊戲、障礙賽車場、開放世界駕駛遊戲、車輛模擬器等。
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-green-50 to-teal-50 rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-green-700 mb-3">進階挑戰</h3>
+              <p className="text-gray-700 mb-4">
+                想要進一步提升您的賽車遊戲？嘗試以下挑戰：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>添加多人競賽功能</li>
+                <li>實現車輛損壞系統</li>
+                <li>添加不同類型的車輛</li>
+                <li>創建更複雜的賽道，包含坡道、跳台等</li>
+                <li>添加道具系統（如加速、護盾等）</li>
+              </ul>
+            </div>
+
+            <div className="bg-gradient-to-r from-blue-50 to-green-50 rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">資源推薦</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a href="https://create.roblox.com/docs" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者文檔</h4>
+                  <p className="text-gray-700">官方開發文檔，包含詳細的 API 參考和教程</p>
+                </a>
+                <a href="https://developer.roblox.com/en-us/articles/vehicles" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 車輛系統教程</h4>
+                  <p className="text-gray-700">官方關於車輛系統的詳細教程</p>
+                </a>
+                <a href="https://www.lua.org/manual/5.1/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Lua 程式設計指南</h4>
+                  <p className="text-gray-700">學習 Lua 語言的官方手冊</p>
+                </a>
+                <a href="https://devforum.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者論壇</h4>
+                  <p className="text-gray-700">與其他開發者交流，獲取幫助和分享經驗</p>
+                </a>
+              </div>
+            </div>
+          </section>
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-12">
+            <a 
+              href="/lesson1" 
+              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd" />
+              </svg>
+              上一課：基礎入門
+            </a>
+            <a 
+              href="/lesson3" 
+              className="px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors flex items-center"
+            >
+              下一課：互動機關
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/pages/Lesson3Page.tsx

@@ -0,0 +1,752 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const buttonInteractionScript = `
+-- 按鈕互動腳本
+-- 獲取按鈕模型及其組件
+local button = script.Parent
+local buttonTop = button:WaitForChild("ButtonTop") -- 按鈕頂部可互動部分
+local door = workspace:WaitForChild("Door") -- 門模型
+local doorPanel = door:WaitForChild("DoorPanel") -- 門板
+
+-- 按鈕狀態變數
+local isPressed = false
+local cooldownTime = 1 -- 按鈕冷卻時間（秒）
+local isCooldown = false
+
+-- 按鈕視覺效果設置
+local defaultColor = Color3.fromRGB(255, 0, 0) -- 紅色
+local pressedColor = Color3.fromRGB(0, 255, 0) -- 綠色
+local defaultPosition = buttonTop.Position
+local pressedPosition = defaultPosition - Vector3.new(0, 0.2, 0) -- 按下時下降0.2個單位
+
+-- 門的狀態變數
+local doorTransparency = 0.8 -- 透明狀態的透明度值
+local doorTransitionTime = 1 -- 門變透明的過渡時間（秒）
+local doorOpenTime = 30 -- 門保持透明的時間（秒）
+
+-- 按鈕按下效果函數
+local function pressButton()
+    if isCooldown then return end
+    
+    -- 設置冷卻狀態
+    isCooldown = true
+    isPressed = true
+    
+    -- 播放按鈕按下音效（可選）
+    local sound = Instance.new("Sound")
+    sound.SoundId = "rbxassetid://142376088" -- 按鈕音效ID
+    sound.Volume = 0.5
+    sound.Parent = button
+    sound:Play()
+    
+    -- 按鈕視覺效果
+    buttonTop.Color = pressedColor
+    buttonTop.Position = pressedPosition
+    
+    -- 觸發門變透明
+    makeDoorTransparent()
+    
+    -- 按鈕恢復
+    wait(cooldownTime)
+    buttonTop.Color = defaultColor
+    buttonTop.Position = defaultPosition
+    isPressed = false
+    isCooldown = false
+end
+
+-- 使門變透明的函數
+function makeDoorTransparent()
+    -- 創建過渡效果
+    local startTime = tick()
+    local initialTransparency = doorPanel.Transparency
+    
+    -- 漸變透明度
+    while tick() - startTime < doorTransitionTime do
+        local alpha = (tick() - startTime) / doorTransitionTime
+        doorPanel.Transparency = initialTransparency * (1 - alpha) + doorTransparency * alpha
+        wait()
+    end
+    
+    -- 確保最終透明度正確
+    doorPanel.Transparency = doorTransparency
+    
+    -- 門變為可穿透（但仍然可見）
+    doorPanel.CanCollide = false
+    
+    -- 添加發光效果（可選）
+    local highlight = Instance.new("Highlight")
+    highlight.FillColor = Color3.fromRGB(0, 200, 255)
+    highlight.OutlineColor = Color3.fromRGB(0, 100, 255)
+    highlight.FillTransparency = 0.5
+    highlight.Parent = doorPanel
+    
+    -- 設置計時器，讓門在一段時間後恢復
+    wait(doorOpenTime)
+    
+    -- 如果沒有被數學題系統覆蓋，則恢復門的狀態
+    if doorPanel.Transparency == doorTransparency then
+        -- 漸變回不透明
+        startTime = tick()
+        while tick() - startTime < doorTransitionTime do
+            local alpha = (tick() - startTime) / doorTransitionTime
+            doorPanel.Transparency = doorTransparency * (1 - alpha) + initialTransparency * alpha
+            wait()
+        end
+        
+        -- 恢復門的碰撞
+        doorPanel.Transparency = initialTransparency
+        doorPanel.CanCollide = true
+        
+        -- 移除發光效果
+        if highlight and highlight.Parent then
+            highlight:Destroy()
+        end
+    end
+end
+
+-- 設置按鈕觸發
+buttonTop.Touched:Connect(function(hit)
+    -- 檢查是否是玩家角色的一部分
+    local humanoid = hit.Parent:FindFirstChild("Humanoid")
+    if humanoid and not isPressed then
+        pressButton()
+    end
+end)
+
+print("按鈕互動腳本已加載！")
+`;
+
+const doorMathInteractionScript = `
+-- 透明門與數學題互動腳本
+-- 獲取門板及相關組件
+local doorPanel = script.Parent
+local door = doorPanel.Parent
+
+-- 數學題相關變數
+local mathProblemActive = false
+local currentAnswer = 0
+local currentProblem = ""
+
+-- 服務引用
+local Players = game:GetService("Players")
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+-- 創建遠端事件用於UI更新
+local mathProblemEvent = Instance.new("RemoteEvent")
+mathProblemEvent.Name = "MathProblemEvent"
+mathProblemEvent.Parent = ReplicatedStorage
+
+-- 生成二位數乘法題目
+local function generateMathProblem()
+    -- 生成兩個10-99之間的隨機數
+    local num1 = math.random(10, 99)
+    local num2 = math.random(10, 99)
+    
+    -- 計算答案
+    local answer = num1 * num2
+    
+    -- 創建題目字串
+    local problem = num1 .. " × " .. num2 .. " = ?"
+    
+    return problem, answer
+end
+
+-- 創建數學題UI
+local function createMathProblemUI(player)
+    -- 創建ScreenGui
+    local mathGui = Instance.new("ScreenGui")
+    mathGui.Name = "MathProblemGui"
+    
+    -- 創建主框架
+    local frame = Instance.new("Frame")
+    frame.Size = UDim2.new(0, 300, 0, 200)
+    frame.Position = UDim2.new(0.5, -150, 0.5, -100)
+    frame.BackgroundColor3 = Color3.fromRGB(50, 50, 50)
+    frame.BorderSizePixel = 2
+    frame.BorderColor3 = Color3.fromRGB(255, 255, 255)
+    frame.Parent = mathGui
+    
+    -- 創建標題
+    local titleLabel = Instance.new("TextLabel")
+    titleLabel.Size = UDim2.new(1, 0, 0.2, 0)
+    titleLabel.Position = UDim2.new(0, 0, 0, 0)
+    titleLabel.BackgroundTransparency = 1
+    titleLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+    titleLabel.TextSize = 24
+    titleLabel.Font = Enum.Font.SourceSansBold
+    titleLabel.Text = "解答數學題以通過門"
+    titleLabel.Parent = frame
+    
+    -- 創建問題標籤
+    local problemLabel = Instance.new("TextLabel")
+    problemLabel.Size = UDim2.new(1, 0, 0.3, 0)
+    problemLabel.Position = UDim2.new(0, 0, 0.2, 0)
+    problemLabel.BackgroundTransparency = 1
+    problemLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+    problemLabel.TextSize = 36
+    problemLabel.Font = Enum.Font.SourceSansBold
+    problemLabel.Name = "ProblemLabel"
+    problemLabel.Text = currentProblem
+    problemLabel.Parent = frame
+    
+    -- 創建答案輸入框
+    local answerBox = Instance.new("TextBox")
+    answerBox.Size = UDim2.new(0.6, 0, 0.2, 0)
+    answerBox.Position = UDim2.new(0.2, 0, 0.5, 0)
+    answerBox.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
+    answerBox.TextColor3 = Color3.fromRGB(0, 0, 0)
+    answerBox.TextSize = 24
+    answerBox.Font = Enum.Font.SourceSans
+    answerBox.PlaceholderText = "輸入答案..."
+    answerBox.Text = ""
+    answerBox.Name = "AnswerBox"
+    answerBox.ClearTextOnFocus = true
+    answerBox.Parent = frame
+    
+    -- 創建提交按鈕
+    local submitButton = Instance.new("TextButton")
+    submitButton.Size = UDim2.new(0.4, 0, 0.15, 0)
+    submitButton.Position = UDim2.new(0.3, 0, 0.75, 0)
+    submitButton.BackgroundColor3 = Color3.fromRGB(0, 150, 255)
+    submitButton.TextColor3 = Color3.fromRGB(255, 255, 255)
+    submitButton.TextSize = 20
+    submitButton.Font = Enum.Font.SourceSansBold
+    submitButton.Text = "提交答案"
+    submitButton.Name = "SubmitButton"
+    submitButton.Parent = frame
+    
+    -- 創建結果標籤
+    local resultLabel = Instance.new("TextLabel")
+    resultLabel.Size = UDim2.new(1, 0, 0.1, 0)
+    resultLabel.Position = UDim2.new(0, 0, 0.9, 0)
+    resultLabel.BackgroundTransparency = 1
+    resultLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
+    resultLabel.TextSize = 18
+    resultLabel.Font = Enum.Font.SourceSans
+    resultLabel.Name = "ResultLabel"
+    resultLabel.Text = ""
+    resultLabel.Parent = frame
+    
+    -- 將UI添加到玩家的PlayerGui
+    mathGui.Parent = player.PlayerGui
+    
+    -- 創建本地腳本處理UI交互
+    local localScript = Instance.new("LocalScript")
+    localScript.Parent = mathGui
+    
+    localScript.Source = [[
+        local ReplicatedStorage = game:GetService("ReplicatedStorage")
+        local mathProblemEvent = ReplicatedStorage:WaitForChild("MathProblemEvent")
+        local player = game.Players.LocalPlayer
+        local gui = script.Parent
+        local frame = gui:WaitForChild("Frame")
+        local submitButton = frame:WaitForChild("SubmitButton")
+        local answerBox = frame:WaitForChild("AnswerBox")
+        local resultLabel = frame:WaitForChild("ResultLabel")
+        
+        -- 提交答案
+        local function submitAnswer()
+            local answer = tonumber(answerBox.Text)
+            if answer then
+                mathProblemEvent:FireServer(answer)
+            else
+                resultLabel.Text = "請輸入有效的數字！"
+                resultLabel.TextColor3 = Color3.fromRGB(255, 100, 100)
+            end
+        end
+        
+        -- 連接提交按鈕
+        submitButton.MouseButton1Click:Connect(submitAnswer)
+        
+        -- 按Enter鍵也可提交
+        answerBox.FocusLost:Connect(function(enterPressed)
+            if enterPressed then
+                submitAnswer()
+            end
+        end)
+        
+        -- 處理服務器回應
+        mathProblemEvent.OnClientEvent:Connect(function(action, message)
+            if action == "result" then
+                resultLabel.Text = message
+                if message:find("正確") then
+                    resultLabel.TextColor3 = Color3.fromRGB(100, 255, 100)
+                    -- 答對後關閉UI
+                    wait(1.5)
+                    gui:Destroy()
+                else
+                    resultLabel.TextColor3 = Color3.fromRGB(255, 100, 100)
+                    -- 清空輸入框
+                    answerBox.Text = ""
+                end
+            elseif action == "close" then
+                -- 關閉UI
+                gui:Destroy()
+            end
+        end)
+    ]]
+    
+    return mathGui
+end
+
+-- 處理玩家碰觸透明門
+doorPanel.Touched:Connect(function(hit)
+    -- ��保門是透明狀態
+    if doorPanel.Transparency < 0.5 then return end
+    
+    -- 檢查是否是玩家角色的一部分
+    local character = hit.Parent
+    local player = Players:GetPlayerFromCharacter(character)
+    
+    if player and not mathProblemActive then
+        -- 防止多次觸發
+        mathProblemActive = true
+        
+        -- 生成數學題
+        currentProblem, currentAnswer = generateMathProblem()
+        
+        -- 創建並顯示數學題UI
+        createMathProblemUI(player)
+        
+        -- 發送題目到客戶端
+        mathProblemEvent:FireClient(player, "problem", currentProblem)
+    end
+end)
+
+-- 處理玩家答題
+mathProblemEvent.OnServerEvent:Connect(function(player, answer)
+    if answer == currentAnswer then
+        -- 答案正確
+        mathProblemEvent:FireClient(player, "result", "正確！門已開啟。")
+        
+        -- 允許玩家通過門
+        local character = player.Character
+        if character then
+            -- 創建一個臨時的無碰撞區域，只對這個玩家有效
+            local noCollisionPart = Instance.new("Part")
+            noCollisionPart.Size = doorPanel.Size
+            noCollisionPart.CFrame = doorPanel.CFrame
+            noCollisionPart.Transparency = 1
+            noCollisionPart.CanCollide = false
+            noCollisionPart.Anchored = true
+            noCollisionPart.Parent = workspace
+            
+            -- 設置門完全透明（對這個玩家）
+            local tempHighlight = Instance.new("Highlight")
+            tempHighlight.FillColor = Color3.fromRGB(0, 255, 100)
+            tempHighlight.OutlineColor = Color3.fromRGB(0, 200, 50)
+            tempHighlight.FillTransparency = 0.7
+            tempHighlight.Parent = doorPanel
+            
+            -- 5秒後恢復
+            wait(5)
+            if noCollisionPart and noCollisionPart.Parent then
+                noCollisionPart:Destroy()
+            end
+            if tempHighlight and tempHighlight.Parent then
+                tempHighlight:Destroy()
+            end
+        end
+    else
+        -- 答案錯誤
+        mathProblemEvent:FireClient(player, "result", "錯誤！請再試一次。")
+    end
+    
+    -- 重置狀態，允許再次觸發
+    wait(2)
+    mathProblemActive = false
+end)
+
+print("透明門與數學題互動腳本已加載！")
+`;
+
+export default function Lesson3Page() {
+  const [activeSection, setActiveSection] = useState('intro');
+
+  const scrollToSection = (sectionId: string) => {
+    setActiveSection(sectionId);
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6">
+      {/* Sidebar Navigation */}
+      <div className="md:w-1/4 lg:w-1/5">
+        <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
+          <h3 className="text-lg font-bold text-gray-800 mb-4">課程目錄</h3>
+          <nav className="space-y-2">
+            <button 
+              onClick={() => scrollToSection('intro')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'intro' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              課程簡介
+            </button>
+            <button 
+              onClick={() => scrollToSection('part1')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part1' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              機關門模型建構
+            </button>
+            <button 
+              onClick={() => scrollToSection('part2')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part2' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              按鈕互動機制
+            </button>
+            <button 
+              onClick={() => scrollToSection('part3')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part3' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              數學題互動系統
+            </button>
+            <button 
+              onClick={() => scrollToSection('part4')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part4' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              優化與擴展
+            </button>
+            <button 
+              onClick={() => scrollToSection('part5')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part5' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              匯出與分享
+            </button>
+            <button 
+              onClick={() => scrollToSection('summary')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'summary' 
+                  ? 'bg-purple-100 text-purple-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              總結與挑戰
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="md:w-3/4 lg:w-4/5">
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl p-8 mb-8 text-white">
+            <h1 className="text-3xl md:text-4xl font-bold mb-4">Roblox 基礎入門第三課 - 遊戲互動學習：機關門與數學題互動</h1>
+            <p className="text-lg opacity-90">
+              學習建構互動機關門、按鈕觸發、透明效果與數學題答題系統
+            </p>
+          </div>
+
+          {/* Course Introduction */}
+          <section id="intro" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">課程簡介</h2>
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <p className="text-gray-700 mb-4">
+                本課程將帶領學習者建構一個互動機關門系統，包含按鈕觸發、透明門效果與數學題答題機制。通過實際操作，學習者將掌握 Roblox Studio 中的互動機制設計、UI 創建與程式控制等進階技能。
+              </p>
+              <h3 className="text-xl font-bold text-purple-700 mb-3">課程目標</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>在 Roblox Studio 中建構互動機關門模型</li>
+                <li>設計並實現按鈕觸發機制</li>
+                <li>編寫透明門效果控制腳本</li>
+                <li>設計數學題生成與答題系統</li>
+              </ul>
+              <h3 className="text-xl font-bold text-purple-700 mt-6 mb-3">前置準備</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>已安裝最新版本的 Roblox Studio</li>
+                <li>具備 Roblox Studio 基本操作能力（第一課內容）</li>
+                <li>了解基本的 Lua 程式語法（第二課內容）</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 1: Door Model Construction */}
+          <section id="part1" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第一部分：機關門模型建構</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 1：創建新專案</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>打開 Roblox Studio</li>
+                <li>選擇「基礎模板」創建新專案</li>
+                <li>保存專案，命名為「InteractiveDoorGame」</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 2：建立門框架</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在工作區中插入一個方塊部件（Part）</li>
+                <li>調整門框尺寸與位置：Size: 6, 8, 0.5 (寬, 高, 厚), Position: 0, 4, 0 (X, Y, Z), 命名為「DoorFrame」</li>
+                <li>設置門框外觀：Color: 深棕色, Material: Wood, Anchored: true</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 3：創建門板</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>插入一個方塊部件作為門板</li>
+                <li>設置屬性：Size: 5, 7, 0.3, Position: 調整至門框內, 命名為「DoorPanel」</li>
+                <li>設置門板外觀：Color: 淺棕色, Material: Wood, Anchored: true, CanCollide: true</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 4：添加門把手</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>插入一個圓柱體（Cylinder）作為門把手</li>
+                <li>設置屬性：Size: 0.3, 0.3, 0.8, Position: 調整至門板側面, Orientation: 水平, 命名為「DoorHandle」</li>
+                <li>設置門把手外觀：Color: 金色/銀色, Material: Metal, Anchored: true</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 5：創建按鈕</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>創建按鈕基座：插入方塊部件, Size: 1, 1, 0.5, Position: 門旁牆壁, 命名為「ButtonBase」</li>
+                <li>創建按鈕頂部：插入方塊部件, Size: 0.8, 0.8, 0.3, Position: 基座前方, Color: 紅色, Material: Neon, 命名為「ButtonTop」</li>
+                <li>設置按鈕外觀：基座顏色深灰, 確保按鈕突出</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 6：組織模型結構</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>組織門模型：選中門框、門板、門把手, 右鍵「Group」, 命名為「Door」</li>
+                <li>組織按鈕模型：選中按鈕基座、按鈕頂部, 右鍵「Group」, 命名為「Button」</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 2: Button Interaction Mechanism */}
+          <section id="part2" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第二部分：按鈕互動機制設計</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 1：創建按鈕互動腳本</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在 Button 模型中添加腳本, 命名為「ButtonScript」</li>
+                <li>編寫按鈕互動腳本（見下方代碼）</li>
+                <li>保存腳本</li>
+              </ol>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {buttonInteractionScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 2：測試按鈕互動</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>點擊「Play」按鈕進入測試模式</li>
+                <li>控制角色接觸按鈕</li>
+                <li>觀察按鈕按下效果與門變透明的過程</li>
+                <li>點擊「Stop」按鈕退出測試模式</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 3：調整按鈕互動參數</h3>
+              <p className="text-gray-700 mb-4">
+                根據測試結果調整 ButtonScript 腳本中的參數：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>cooldownTime：調整按鈕冷卻時間</li>
+                <li>doorTransparency：調整門的透明度</li>
+                <li>doorTransitionTime：調整門變透明的過渡時間</li>
+                <li>doorOpenTime：調整門保持透明的時間</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 3: Transparent Door & Math Problem Interaction */}
+          <section id="part3" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第三部分：透明門與數學題互動系統</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 1：創建透明門互動腳本</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在 DoorPanel 中添加腳本, 命名為「DoorMathScript」</li>
+                <li>編寫透明門與數學題互動腳本（見下方代碼）</li>
+                <li>保存腳本</li>
+              </ol>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {doorMathInteractionScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 2：設置 ReplicatedStorage</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>確保 ReplicatedStorage 中有正確的遠端事件</li>
+                <li>如果腳本沒有自動創建，手動創建一個 RemoteEvent</li>
+                <li>命名為「MathProblemEvent」</li>
+                <li>放置在 ReplicatedStorage 中</li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 3：測試數學題互動</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>點擊「Play」按鈕進入測試模式</li>
+                <li>按下按鈕使門變透明</li>
+                <li>接觸透明門觸發數學題 UI</li>
+                <li>測試答題功能：輸入正確/錯誤答案，觀察結果</li>
+                <li>確認答對後門可以穿透</li>
+                <li>點擊「Stop」按鈕退出測試模式</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 4: Optimization and Expansion */}
+          <section id="part4" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第四部分：優化與擴展</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 1：添加視覺效果</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>按鈕按下效果：粒子效果、光源</li>
+                <li>門變透明效果：過渡動畫、粒子效果</li>
+                <li>答題成功效果：成功音效、視覺反饋</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 2：擴展功能</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>調整數學題難度：修改 generateMathProblem 函數，添加難度選項</li>
+                <li>添加計時功能：設置答題時間限制，添加倒計時顯示</li>
+                <li>添加積分系統：記錄答題正確率，顯示積分排行榜</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 5: Export and Share */}
+          <section id="part5" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第五部分：匯出與分享</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 1：最終測試與調整</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>進行全面測試：按鈕、透明門、數學題、性能</li>
+                <li>根據測試結果進行調整：優化腳本、修復問題</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">步驟 2：匯出專案</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>保存專案：File {'>'}Save</li>
+                <li>發布到 Roblox：File {'>'}Publish to Roblox</li>
+                <li>匯出模型（可選）：選中 Door 和 Button 模型, File {'>'}Export Selection</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Summary and Challenge */}
+          <section id="summary" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">總結</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <p className="text-gray-700 mb-4">
+                在本課程中，我們成功建構了一個互動機關門系統，包含按鈕觸發、透明門效果與數學題答題機制。通過這個項目，學習者掌握了 Roblox Studio 中的互動機制設計、UI 創建與程式控制等進階技能。
+              </p>
+              <p className="text-gray-700 mb-4">
+                這些技能可以應用於更複雜的遊戲開發項目，例如解謎遊戲、教育類遊戲、互動式學習環境、技能挑戰系統等。
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-purple-700 mb-3">進階挑戰</h3>
+              <p className="text-gray-700 mb-4">
+                想要進一步提升您的互動機關系統？嘗試以下挑戰：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>添加多種類型的數學題（加減乘除、方程式等）</li>
+                <li>實現難度漸進系統</li>
+                <li>添加多人競賽模式</li>
+                <li>創建更複雜的機關系統，如需要多個按鈕同時按下</li>
+                <li>添加視覺化教學提示系統</li>
+              </ul>
+            </div>
+
+            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">資源推薦</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a href="https://create.roblox.com/docs" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者文檔</h4>
+                  <p className="text-gray-700">官方開發文檔，包含詳細的 API 參考和教程</p>
+                </a>
+                <a href="https://developer.roblox.com/en-us/articles/ui-design" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox UI 設計指南</h4>
+                  <p className="text-gray-700">官方關於 UI 設計的最佳實踐和指南</p>
+                </a>
+                <a href="https://www.lua.org/manual/5.1/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Lua 程式設計指南</h4>
+                  <p className="text-gray-700">學習 Lua 語言的官方手冊</p>
+                </a>
+                <a href="https://devforum.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者論壇</h4>
+                  <p className="text-gray-700">與其他開發者交流，獲取幫助和分享經驗</p>
+                </a>
+              </div>
+            </div>
+          </section>
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-12">
+            <a 
+              href="/lesson2" 
+              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd" />
+              </svg>
+              上一課：賽車遊戲
+            </a>
+            <a 
+              href="/lesson4" 
+              className="px-6 py-3 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors flex items-center"
+            >
+              下一課：視覺化設計
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/pages/Lesson4Page.tsx

@@ -0,0 +1,707 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const cubeGeneratorScript = `
+-- 立方體生成函數
+local function createCube(position, size, color, transparency)
+    local cube = Instance.new("Part")
+    cube.Size = Vector3.new(size, size, size)
+    cube.Position = position
+    cube.Anchored = true
+    cube.CanCollide = false
+    cube.Material = Enum.Material.Neon
+    cube.Color = color or Color3.fromRGB(0, 170, 255)
+    cube.Transparency = transparency or 0.5
+    cube.Parent = workspace
+    
+    -- 添加發光效果
+    local light = Instance.new("PointLight")
+    light.Range = size * 2
+    light.Brightness = 0.5
+    light.Color = color or Color3.fromRGB(0, 170, 255)
+    light.Parent = cube
+    
+    return cube
+end
+
+-- 創建立方體網格陣列
+local function createCubeGrid(centerPosition, gridSize, cubeSize, spacing)
+    local model = Instance.new("Model")
+    model.Name = "CubeGrid"
+    model.Parent = workspace
+    
+    for x = -gridSize/2, gridSize/2 do
+        for y = -gridSize/2, gridSize/2 do
+            for z = -gridSize/2, gridSize/2 do
+                -- 計算位置
+                local position = centerPosition + Vector3.new(
+                    x * (cubeSize + spacing),
+                    y * (cubeSize + spacing),
+                    z * (cubeSize + spacing)
+                )
+                
+                -- 根據位置計算顏色（漸變效果）
+                local color = Color3.fromHSV(
+                    (x + gridSize/2) / gridSize,
+                    (y + gridSize/2) / gridSize,
+                    (z + gridSize/2) / gridSize
+                )
+                
+                -- 創建立方體
+                local cube = createCube(position, cubeSize, color, 0.5)
+                cube.Parent = model
+            end
+        end
+    end
+    
+    return model
+end
+`;
+
+const dnaStructureScript = `
+-- 創建DNA雙螺旋結構
+local function createDNAStructure(centerPosition, height, radius, turns)
+    local model = Instance.new("Model")
+    model.Name = "DNAStructure"
+    model.Parent = workspace
+    
+    local pointsPerTurn = 20 -- 每圈點數
+    local totalPoints = turns * pointsPerTurn -- 總點數
+    
+    -- 創建兩條螺旋骨架
+    for i = 0, totalPoints do
+        local angle = (i / pointsPerTurn) * math.pi * 2
+        local y = (i / totalPoints) * height
+        
+        -- 第一條螺旋
+        local x1 = math.cos(angle) * radius
+        local z1 = math.sin(angle) * radius
+        local position1 = centerPosition + Vector3.new(x1, y, z1)
+        local cube1 = createCube(position1, 0.4, Color3.fromRGB(0, 200, 255), 0.3)
+        cube1.Parent = model
+        
+        -- 第二條螺旋 (相位差180度)
+        local x2 = math.cos(angle + math.pi) * radius
+        local z2 = math.sin(angle + math.pi) * radius
+        local position2 = centerPosition + Vector3.new(x2, y, z2)
+        local cube2 = createCube(position2, 0.4, Color3.fromRGB(0, 255, 200), 0.3)
+        cube2.Parent = model
+        
+        -- 每隔幾個點添加連接橫桿
+        if i % 4 == 0 then
+            -- 創建連接兩條螺旋的橫桿
+            local connector = Instance.new("Part")
+            connector.Size = Vector3.new(radius * 2, 0.2, 0.2)
+            connector.CFrame = CFrame.new(
+                centerPosition + Vector3.new((x1 + x2) / 2, y, (z1 + z2) / 2),
+                centerPosition + Vector3.new(x2, y, z2)
+            )
+            connector.Anchored = true
+            connector.CanCollide = false
+            connector.Material = Enum.Material.Neon
+            connector.Color = Color3.fromRGB(255, 255, 255)
+            connector.Transparency = 0.7
+            connector.Parent = model
+        end
+    end
+    
+    return model
+end
+`;
+
+const holographicProjectionScript = `
+-- 服務引用
+local RunService = game:GetService("RunService")
+local TweenService = game:GetService("TweenService")
+
+-- 常數設定
+local GRID_SIZE = 20 -- 網格大小
+local BASE_COLOR = Color3.fromRGB(0, 100, 150) -- 基本顏色（藍色）
+
+-- 創建容器模型
+local hologramModel = Instance.new("Model")
+hologramModel.Name = "HologramModel"
+hologramModel.Parent = workspace
+
+-- 創建投影平台
+local function createProjectionBase()
+    local base = Instance.new("Part")
+    base.Name = "ProjectionBase"
+    base.Size = Vector3.new(GRID_SIZE * 1.5, 0.5, GRID_SIZE * 1.5)
+    base.Position = Vector3.new(0, 0, 0)
+    base.Anchored = true
+    base.CanCollide = true
+    base.Material = Enum.Material.Neon
+    base.Color = BASE_COLOR
+    base.Transparency = 0.2
+    base.Parent = hologramModel
+    
+    -- 添加投影光環
+    local ring = Instance.new("Part")
+    ring.Name = "ProjectionRing"
+    ring.Shape = Enum.PartType.Cylinder
+    ring.Size = Vector3.new(0.2, base.Size.X * 1.1, base.Size.Z * 1.1)
+    ring.CFrame = base.CFrame * CFrame.Angles(0, 0, math.rad(90))
+    ring.Anchored = true
+    ring.CanCollide = false
+    ring.Material = Enum.Material.Neon
+    ring.Color = Color3.fromRGB(0, 200, 255)
+    ring.Transparency = 0.5
+    ring.Parent = hologramModel
+    
+    return base
+end
+
+-- 添加投影光束
+local function createProjectionBeam(base)
+    -- 創建光束起點
+    local attachment1 = Instance.new("Attachment")
+    attachment1.Position = Vector3.new(0, -2, 0)
+    attachment1.Parent = base
+    
+    -- 創建光束終點
+    local attachment2 = Instance.new("Attachment")
+    attachment2.Position = Vector3.new(0, 15, 0)
+    attachment2.Parent = base
+    
+    -- 創建光束
+    local beam = Instance.new("Beam")
+    beam.Attachment0 = attachment1
+    beam.Attachment1 = attachment2
+    beam.Width0 = 5
+    beam.Width1 = 2
+    beam.FaceCamera = true
+    beam.LightEmission = 1
+    beam.LightInfluence = 0
+    beam.Transparency = NumberSequence.new({
+        NumberSequenceKeypoint.new(0, 0.7),
+        NumberSequenceKeypoint.new(1, 0.9)
+    })
+    beam.Color = ColorSequence.new(Color3.fromRGB(0, 200, 255))
+    beam.Parent = base
+    
+    return beam
+end
+`;
+
+export default function Lesson4Page() {
+  const [activeSection, setActiveSection] = useState('intro');
+
+  const scrollToSection = (sectionId: string) => {
+    setActiveSection(sectionId);
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6">
+      {/* Sidebar Navigation */}
+      <div className="md:w-1/4 lg:w-1/5">
+        <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
+          <h3 className="text-lg font-bold text-gray-800 mb-4">課程目錄</h3>
+          <nav className="space-y-2">
+            <button 
+              onClick={() => scrollToSection('intro')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'intro' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              課程簡介
+            </button>
+            <button 
+              onClick={() => scrollToSection('part1')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part1' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              科技感圖像設計概念
+            </button>
+            <button 
+              onClick={() => scrollToSection('part2')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part2' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              立方體模型建構
+            </button>
+            <button 
+              onClick={() => scrollToSection('part3')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part3' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              科技感圖像實例
+            </button>
+            <button 
+              onClick={() => scrollToSection('part4')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part4' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              立體投影效果實現
+            </button>
+            <button 
+              onClick={() => scrollToSection('part5')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'part5' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              互動控制與優化
+            </button>
+            <button 
+              onClick={() => scrollToSection('summary')}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                activeSection === 'summary' 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              總結與進階挑戰
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="md:w-3/4 lg:w-4/5">
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="bg-gradient-to-r from-blue-600 to-cyan-500 rounded-xl p-8 mb-8 text-white">
+            <h1 className="text-3xl md:text-4xl font-bold mb-4">Roblox 基礎入門第四課 - 視覺化程式設計：科技感立體投影圖像</h1>
+            <p className="text-lg opacity-90">
+              探索程式與視覺藝術的完美結合，使用立方體 Part 創建令人驚嘆的科技感立體投影
+            </p>
+          </div>
+
+          {/* Course Introduction */}
+          <section id="intro" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">課程簡介</h2>
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <p className="text-gray-700 mb-4">
+                本課程將帶領學習者探索 Roblox 中的視覺化程式設計，通過使用立方體 Part 創建科技感的立體投影圖像，展現程式與視覺藝術的完美結合。學習者將掌握如何使用程式化方法生成複雜的視覺效果，並實現互動式的立體投影展示。
+              </p>
+              <h3 className="text-xl font-bold text-blue-700 mb-3">課程目標</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>在 Roblox Studio 中使用立方體 Part 創建複雜的科技感圖像</li>
+                <li>設計並實現立體投影效果</li>
+                <li>編寫程式控制圖像的動態變化與互動</li>
+                <li>掌握粒子效果與光源運用技巧</li>
+              </ul>
+              <h3 className="text-xl font-bold text-blue-700 mt-6 mb-3">前置準備</h3>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>已安裝最新版本的 Roblox Studio</li>
+                <li>具備 Roblox Studio 基本操作能力（第一課內容）</li>
+                <li>了解基本的 Lua 程式語法（第二課與第三課內容）</li>
+                <li>對視覺設計有基本興趣</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* Part 1: Design Concepts */}
+          <section id="part1" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第一部分：科技感圖像設計概念</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：了解科技感設計元素</h3>
+              <p className="text-gray-700 mb-4">
+                科技感設計通常包含以下元素：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700 mb-4">
+                <li><strong>幾何形狀與線條</strong>：使用簡潔的幾何形狀、直線和網格</li>
+                <li><strong>色彩選擇</strong>：藍色、青色等冷色調，高對比度</li>
+                <li><strong>光影效果</strong>：發光、半透明、光束</li>
+                <li><strong>動態變化</strong>：脈衝、旋轉、懸浮效果</li>
+              </ul>
+              <p className="text-gray-700 mb-4">
+                在 Roblox 中，我們可以通過以下方式實現這些元素：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>使用立方體 Part 創建基本形狀</li>
+                <li>調整材質、顏色和透明度</li>
+                <li>添加光源和粒子效果</li>
+                <li>使用腳本控制動態變化</li>
+              </ul>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：規劃立方體陣列設計</h3>
+              <p className="text-gray-700 mb-4">
+                立方體陣列是創建複雜科技感圖像的基礎，主要設計思路包括：
+              </p>
+              <div className="space-y-4">
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">點陣圖像原理</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>將三維空間劃分為網格</li>
+                    <li>每個網格點放置一個立方體</li>
+                    <li>通過控制立方體的存在、大小、顏色等屬性形成圖像</li>
+                  </ul>
+                </div>
+                
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">模塊化設計</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>將複雜圖像分解為簡單模塊</li>
+                    <li>使用函數生成不同的模塊</li>
+                    <li>組合模塊形成完整圖像</li>
+                  </ul>
+                </div>
+                
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <h4 className="font-bold text-blue-800 mb-2">數據驅動設計</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                    <li>使用數學函數生成立方體位置</li>
+                    <li>使用參數控制整體效果</li>
+                    <li>實現動態變化和互動</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：創建新專案</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
+                <li>打開 Roblox Studio</li>
+                <li>選擇「基礎模板」創建新專案</li>
+                <li>保存專案，命名為「HolographicProjection」</li>
+              </ol>
+            </div>
+          </section>
+
+          {/* Part 2: Cube Model Construction */}
+          <section id="part2" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第二部分：立方體模型建構</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建基本立方體</h3>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在工作區中插入一個方塊部件（Part）</li>
+                <li>調整立方體屬性：
+                  <ul className="list-disc pl-6 mt-2 space-y-1">
+                    <li>Size: 0.5, 0.5, 0.5 (寬, 高, 長)</li>
+                    <li>Color: 設置為藍色 (0, 170, 255)</li>
+                    <li>Material: Neon</li>
+                    <li>Transparency: 0.5</li>
+                    <li>Anchored: true</li>
+                    <li>CanCollide: false</li>
+                  </ul>
+                </li>
+                <li>添加發光效果：
+                  <ul className="list-disc pl-6 mt-2 space-y-1">
+                    <li>在立方體中添加 PointLight</li>
+                    <li>Range: 1</li>
+                    <li>Brightness: 0.5</li>
+                    <li>Color: 與立方體相同顏色</li>
+                  </ul>
+                </li>
+              </ol>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：創建立方體生成函數</h3>
+              <p className="text-gray-700 mb-4">
+                為了更有效地創建多個立方體，我們需要編寫一個函數來生成它們：
+              </p>
+              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
+                <li>在 ServerScriptService 中添加腳本，命名為「CubeGenerator」</li>
+                <li>編寫立方體生成函數</li>
+                <li>測試立方體生成</li>
+              </ol>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {cubeGeneratorScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：創建立方體陣列</h3>
+              <p className="text-gray-700 mb-4">
+                使用迴圈創建立方體陣列，形成基本的三維網格結構：
+              </p>
+              <div className="bg-gray-100 p-4 rounded-lg mb-4">
+                <p className="text-gray-700 font-mono">
+                  -- 創建一個 5x5x5 的立方體網格<br/>
+                  local grid = createCubeGrid(Vector3.new(0, 10, 0), 5, 0.5, 0.2)
+                </p>
+              </div>
+              <p className="text-gray-700">
+                這段代碼將在空間中創建一個 5x5x5 的立方體網格，每個立方體大小為 0.5，間距為 0.2，中心位置在 (0, 10, 0)。
+              </p>
+            </div>
+          </section>
+
+          {/* Part 3: Tech Image Examples */}
+          <section id="part3" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第三部分：科技感圖像實例</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建 DNA 雙螺旋結構</h3>
+              <p className="text-gray-700 mb-4">
+                DNA 雙螺旋是一個很好的科技感圖像範例，我們可以使用立方體來構建它：
+              </p>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg mb-4">
+                {dnaStructureScript}
+              </SyntaxHighlighter>
+              <div className="bg-gray-100 p-4 rounded-lg">
+                <p className="text-gray-700 font-mono">
+                  -- 創��一個 DNA 雙螺旋結構<br/>
+                  local dna = createDNAStructure(Vector3.new(0, 5, 0), 15, 3, 3)
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：創建全息投影地球</h3>
+              <p className="text-gray-700 mb-4">
+                全息地球是另一個很酷的科技感圖像，使用立方體點陣模擬球體：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">全息地球實現原理</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>使用球面坐標系（緯度、經度）計算立方體位置</li>
+                  <li>根據隨機值決定是陸地還是海洋，設置不同顏色</li>
+                  <li>添加經緯線網格增強科技感</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                實現代碼會創建一個由小立方體組成的球體，模擬地球表面，並添加經緯線網格增強科技感。
+              </p>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：創建 3D 數據可視化圖表</h3>
+              <p className="text-gray-700 mb-4">
+                數據可視化是科技感圖像的重要應用：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">3D 數據圖表實現要點</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>創建 X、Y、Z 三個坐標軸</li>
+                  <li>根據數據值生成不同高度的柱體</li>
+                  <li>使用顏色漸變表示數據值大小</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                實現代碼會創建一個三維座標系，並在其中生成數據柱體，柱體高度和顏色根據數據值變化。
+              </p>
+            </div>
+          </section>
+
+          {/* Part 4: Holographic Projection */}
+          <section id="part4" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第四部分：立體投影效果實現</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建投影平台</h3>
+              <p className="text-gray-700 mb-4">
+                投影平台是立體投影效果的基礎：
+              </p>
+              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
+                {holographicProjectionScript}
+              </SyntaxHighlighter>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：添加投影光效</h3>
+              <p className="text-gray-700 mb-4">
+                為了增強立體投影效果，我們需要添加光效：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">投影光效關鍵元素</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>光束效果：使用 Beam 物件創建從底部向上的光束</li>
+                  <li>環繞粒子：使用 ParticleEmitter 創建環繞投影的粒子效果</li>
+                  <li>脈衝光環：使用 TweenService 創建平台邊緣的脈衝光環</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                這些視覺效果結合起來，能夠創造出逼真的科幻全息投影感。
+              </p>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：實現投影切換效果</h3>
+              <p className="text-gray-700 mb-4">
+                為了展示不同的科技感圖像，我們需要實現投影切換功能：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">投影切換實現方法</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>創建切換按鈕，添加點擊事件</li>
+                  <li>設置模型顯示/隱藏邏輯</li>
+                  <li>添加切換時的視覺效果（如淡入淡出、粒子爆發等）</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                通過這種方式，玩家可以輕鬆切換不同的科技感圖像，增強互動體驗。
+              </p>
+            </div>
+          </section>
+
+          {/* Part 5: Interactive Control */}
+          <section id="part5" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">第五部分：互動控制與優化</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：添加旋轉控制</h3>
+              <p className="text-gray-700 mb-4">
+                為了讓玩家能夠從不同角度觀察投影模型，我們可以添加旋轉控制：
+              </p>
+              <div className="bg-gray-100 p-4 rounded-lg mb-4">
+                <p className="text-gray-700 font-mono">
+                  -- 添加旋轉功能<br/>
+                  RunService.Heartbeat:Connect(function(deltaTime)<br/>
+                  &nbsp;&nbsp;-- 緩慢旋轉當前顯示的模型<br/>
+                  &nbsp;&nbsp;if displays[currentDisplay].Parent == hologramModel then<br/>
+                  &nbsp;&nbsp;&nbsp;&nbsp;displays[currentDisplay]:SetPrimaryPartCFrame(<br/>
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displays[currentDisplay].PrimaryPart.CFrame * CFrame.Angles(0, deltaTime * 0.5, 0)<br/>
+                  &nbsp;&nbsp;&nbsp;&nbsp;)<br/>
+                  &nbsp;&nbsp;end<br/>
+                  end)
+                </p>
+              </div>
+              <p className="text-gray-700">
+                這段代碼會使當前顯示的模型緩慢旋轉，讓玩家可以看到模型的各個角度。
+              </p>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：添加縮放控制</h3>
+              <p className="text-gray-700 mb-4">
+                添加縮放控制可以讓玩家更詳細地觀察模型：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">縮放控制實現方法</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>創建縮放按鈕（放大/縮小）</li>
+                  <li>使用 TweenService 平滑過渡縮放效果</li>
+                  <li>設置縮放限制，防止模型過大或過小</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                通過縮放控制，玩家可以放大查看模型細節，或縮小查看整體效果。
+              </p>
+            </div>
+
+            <div className="bg-white rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：優化性能</h3>
+              <p className="text-gray-700 mb-4">
+                由於我們使用了大量立方體，需要注意性能優化：
+              </p>
+              <div className="bg-blue-50 p-4 rounded-lg mb-4">
+                <h4 className="font-bold text-blue-800 mb-2">性能優化技巧</h4>
+                <ul className="list-disc pl-6 space-y-1 text-gray-700">
+                  <li>使用 LOD（細節層次）：根據距離調整立方體數量</li>
+                  <li>對象池技術：重用立方體而非創建新的</li>
+                  <li>視錐體剔除：只渲染視野內的立方體</li>
+                  <li>減少光源數量：合理控制發光效果</li>
+                </ul>
+              </div>
+              <p className="text-gray-700">
+                通過這些優化技巧，可以在保持視覺效果的同時提高遊戲性能。
+              </p>
+            </div>
+          </section>
+
+          {/* Summary and Challenge */}
+          <section id="summary" className="mb-12 scroll-mt-24">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">總結與進階挑戰</h2>
+            
+            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">課程總結</h3>
+              <p className="text-gray-700 mb-4">
+                在本課程中，我們學習了如何在 Roblox Studio 中使用立方體 Part 創建科技感的立體投影圖像。我們掌握了以下關鍵技能：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>使用程式化方法生成複雜的立方體陣列</li>
+                <li>創建 DNA 雙螺旋、全息地球等科技感圖像</li>
+                <li>實現立體投影效果，包括投影平台、光束和粒子效果</li>
+                <li>添加互動控制，如切換顯示、旋轉和縮放</li>
+                <li>優化性能，確保流暢運行</li>
+              </ul>
+              <p className="text-gray-700 mt-4">
+                這些技能可以應用於各種 Roblox 遊戲和體驗，如科幻遊戲、教育應用、數據可視化等。
+              </p>
+            </div>
+
+            <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl shadow-md p-6 mb-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">進階挑戰</h3>
+              <p className="text-gray-700 mb-4">
+                想要進一步提升您的視覺化程式設計技能？嘗試以下挑戰：
+              </p>
+              <ul className="list-disc pl-6 space-y-2 text-gray-700">
+                <li>創建更複雜的科技感圖像，如太陽系模型、分子結構等</li>
+                <li>添加聲音效果，增強沉浸感</li>
+                <li>實現手勢控制，讓玩家可以用手勢旋轉和縮放模型</li>
+                <li>添加數據連接功能，實時顯示外部數據源的信息</li>
+                <li>創建可編程界面，讓玩家自定義立方體陣列</li>
+              </ul>
+            </div>
+
+            <div className="bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl shadow-md p-6">
+              <h3 className="text-xl font-bold text-blue-700 mb-3">資源推薦</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a href="https://create.roblox.com/docs" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者文檔</h4>
+                  <p className="text-gray-700">官方開發文檔，包含詳細的 API 參考和教程</p>
+                </a>
+                <a href="https://developer.roblox.com/en-us/articles/Particle-Emitters" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">粒子效果指南</h4>
+                  <p className="text-gray-700">學習如何創建和自定義粒子效果</p>
+                </a>
+                <a href="https://devforum.roblox.com/c/resources/visualization/55" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">視覺化資源</h4>
+                  <p className="text-gray-700">Roblox 開發者論壇中的視覺化資源和討論</p>
+                </a>
+                <a href="https://www.youtube.com/results?search_query=roblox+studio+hologram+effect" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
+                  <h4 className="font-bold text-blue-800 mb-2">全息效果教學</h4>
+                  <p className="text-gray-700">YouTube 上的全息效果教學視頻</p>
+                </a>
+              </div>
+            </div>
+          </section>
+
+          {/* Navigation Buttons */}
+          <div className="flex justify-between mt-12">
+            <a 
+              href="/lesson3" 
+              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd" />
+              </svg>
+              上一課：機關門與數學題
+            </a>
+            <a 
+              href="/" 
+              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"
+            >
+              返回首頁
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+              </svg>
+            </a>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}