import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Mail, Gamepad2, Music, Sparkles } from "lucide-react";

export default function YuyuWebsite() { return ( <div className="min-h-screen bg-gradient-to-br from-indigo-200 via-white to-pink-100 text-gray-800"> <header className="sticky top-0 bg-white/90 backdrop-blur-md shadow-md z-10"> <nav className="flex items-center justify-between p-4 max-w-6xl mx-auto"> <h1 className="text-2xl font-bold text-indigo-600">與與的世界</h1> <ul className="flex space-x-6 text-md font-medium"> <li><a href="#about" className="hover:text-indigo-500">關於我</a></li> <li><a href="#hobbies" className="hover:text-indigo-500">興趣</a></li> <li><a href="#contact" className="hover:text-indigo-500">聯絡我</a></li> </ul> </nav> </header>

<main className="px-4 py-10 max-w-4xl mx-auto">
    <section className="text-center mb-12">
      <h2 className="text-4xl font-extrabold mb-4">哈囉，我是與與！</h2>
      <p className="text-lg text-gray-700">一位熱愛遊戲與音樂的自由靈魂，
        喜歡探索新科技、寫網頁、偶爾在深夜煮碗泡麵沉思人生。
      </p>
    </section>

    <section id="about" className="mb-12">
      <Card className="shadow-lg">
        <CardContent className="p-6">
          <h3 className="text-2xl font-semibold mb-2">關於我</h3>
          <p>
            我是與與，一個熱愛創造的人。不論是寫程式、做音樂混音、還是熬夜破關 RPG，
            我總能從中找到樂趣與靈感。夢想是打造一個能讓人開心又實用的網站世界。
          </p>
        </CardContent>
      </Card>
    </section>

    <section id="hobbies" className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
      <Card className="shadow-md">
        <CardContent className="p-4 flex flex-col items-center">
          <Gamepad2 className="h-10 w-10 text-pink-500 mb-2" />
          <h4 className="text-lg font-medium">打遊戲</h4>
          <p className="text-sm text-center">最喜歡策略與劇情豐富的 RPG 遊戲！</p>
        </CardContent>
      </Card>
      <Card className="shadow-md">
        <CardContent className="p-4 flex flex-col items-center">
          <Music className="h-10 w-10 text-indigo-500 mb-2" />
          <h4 className="text-lg font-medium">聽音樂</h4>
          <p className="text-sm text-center">愛好 Lo-fi、日系音樂，偶爾來點交響搖滾。</p>
        </CardContent>
      </Card>
      <Card className="shadow-md">
        <CardContent className="p-4 flex flex-col items-center">
          <Sparkles className="h-10 w-10 text-yellow-500 mb-2" />
          <h4 className="text-lg font-medium">創意發想</h4>
          <p className="text-sm text-center">喜歡天馬行空，總在腦中演一部自己的動畫。</p>
        </CardContent>
      </Card>
    </section>

    <section id="contact" className="mb-12">
      <Card className="shadow-lg">
        <CardContent className="p-6">
          <h3 className="text-2xl font-semibold mb-2">聯絡我</h3>
          <p className="mb-4">如果你也喜歡遊戲、音樂，或者有趣的網頁專案，歡迎聯絡我一起交流！</p>
          <div className="flex items-center space-x-2">
            <Mail className="h-5 w-5 text-gray-600" />
            <span className="text-sm">yuyu@example.com</span>
          </div>
        </CardContent>
      </Card>
    </section>
  </main>

  <footer className="text-center py-6 text-gray-500 text-sm">
    &copy; 2025 與與の網站. All rights reserved.
  </footer>
</div>

); }