Mission 8: Workshop — หน้า Home, About, Contact

เป้าหมายของ Mission นี้: สร้างเนื้อหาหน้า Home, About, และ Contact ให้ครบ

flowchart LR
    F1["app/page.tsx"] --> R1["/"]
    F2["app/about/page.tsx"] --> R2["/about"]
    F3["app/contact/page.tsx"] --> R3["/contact"]

โครงไฟล์ที่ต้องมี

app/
  page.tsx        ← หน้า Home (มีอยู่แล้ว แก้เนื้อหาได้เลย)
  about/
    page.tsx      ← สร้างใหม่ — หน้า About
  contact/
    page.tsx      ← สร้างใหม่ — หน้า Contact

Demo หน้า About

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">เกี่ยวกับเรา</h1>
      <p className="mt-2 text-neutral-600">เขียนแนะนำบริษัทสมมติของคุณเองที่นี่</p>
    </main>
  );
}

Demo หน้า Contact

// app/contact/page.tsx
export default function ContactPage() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">ติดต่อเรา</h1>
      <p className="mt-2 text-neutral-600">อีเมล: hello@company.com</p>
    </main>
  );
}

ลองทำหน้า Home ให้มีเนื้อหาแนะนำบริษัทสั้นๆ ด้วย แล้วเช็คว่าคลิก Navbar ไปมาระหว่าง 3 หน้าได้ ครบ