今天是鐵人賽 Day9，目標是設計網站首頁的雛形，加入 Header、Main 區塊與 Footer，讓專案不再只有測試用的「Hello Tailwind!」，而是開始長出真正的網站結構。

1️⃣ 建立 Home 頁面
在 src/pages/ 底下新增 Home.jsx，並設計基本的網站架構：

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="bg-blue-600 text-white p-4 text-xl font-bold">
        桌遊商城
      </header>

      {/* Main Content */}
      <main className="flex-1 p-6">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">
          歡迎來到桌遊商城！
        </h1>
        <p className="text-gray-600">
          這裡將會展示商品清單，敬請期待 🚀
        </p>
      </main>

      {/* Footer */}
      <footer className="bg-gray-800 text-white text-center p-4">
        © 2025 桌遊商城
      </footer>
    </div>
  );
}

2️⃣ 修改 App.jsx
在 src/App.jsx 引入剛剛建立的 Home 頁面，取代掉原本的測試內容：

import Home from "./pages/Home";

function App() {
  return <Home />;
}

export default App;

3️⃣ 執行測試
啟動開發伺服器：
npm run dev
打開瀏覽器，可以看到：
頂端有藍色背景的「桌遊商城」
中間是一個大標題「歡迎來到桌遊商城！」與說明文字
最下方是深灰底的版權資訊
網站的雛形正式完成！

🐛 遇到的問題

No utility classes were detected
一開始 Tailwind 提示找不到 class
原因是 tailwind.config.js 沒有正確設定掃描範圍
解法：確認有加上
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

Import 錯誤
import Home from "./pages/Home"; 報錯
原因是 src/pages/ 下沒有建立 Home.jsx
解法：新增檔案並 export 預設元件

💡 Day9 收穫

• 成功建立首頁雛形，完成 Header、Main、Footer 基本版面
• 學會用 Tailwind 快速排版，體驗到 utility-first CSS 的威力
• 從單純測試字串進入「有骨架的網站」階段
• 對 React Component 的拆分更有概念
• 解決 Tailwind 掃描不到 class 的小 bug