Initial commit

app/thank-you/loading.tsx

@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+      <div className="text-center">
+        <div className="w-16 h-16 border-4 border-pink-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+        <div className="text-white text-xl">正在準備感謝...</div>
+      </div>
+    </div>
+  )
+}

app/thank-you/page.tsx

@@ -0,0 +1,434 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Sparkles, Heart, Users, ArrowRight, Home, MessageCircle, BarChart3, Eye, EyeOff } from "lucide-react"
+import HeaderMusicControl from "@/components/header-music-control"
+
+export default function ThankYouPage() {
+  const [wishes, setWishes] = useState<any[]>([])
+  const [showContent, setShowContent] = useState(false)
+  const [lastWishIsPublic, setLastWishIsPublic] = useState(true)
+
+  useEffect(() => {
+    const savedWishes = JSON.parse(localStorage.getItem("wishes") || "[]")
+    setWishes(savedWishes)
+
+    // 檢查最後一個提交的願望是否為公開
+    if (savedWishes.length > 0) {
+      const lastWish = savedWishes[savedWishes.length - 1]
+      setLastWishIsPublic(lastWish.isPublic !== false)
+    }
+
+    // 延遲顯示內容，創造進入效果
+    setTimeout(() => setShowContent(true), 300)
+  }, [])
+
+  const totalWishes = wishes.length
+  const publicWishes = wishes.filter((wish) => wish.isPublic !== false).length
+  const privateWishes = wishes.filter((wish) => wish.isPublic === false).length
+  const thisWeek = wishes.filter((wish) => {
+    const wishDate = new Date(wish.createdAt)
+    const oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+    return wishDate >= oneWeekAgo
+  }).length
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
+      {/* 增強的星空背景 */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* 更多的星星 */}
+        {[...Array(50)].map((_, i) => (
+          <div
+            key={i}
+            className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
+            style={{
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              animationDelay: `${Math.random() * 3}s`,
+              animationDuration: `${2 + Math.random() * 2}s`,
+            }}
+          />
+        ))}
+
+        {/* 特殊的感謝星星 */}
+        {[...Array(20)].map((_, i) => (
+          <div
+            key={`special-${i}`}
+            className="absolute w-1 h-1 md:w-2 md:h-2 bg-gradient-to-r from-pink-300 to-yellow-300 rounded-full animate-pulse opacity-80"
+            style={{
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              animationDelay: `${Math.random() * 4}s`,
+              animationDuration: `${3 + Math.random() * 2}s`,
+            }}
+          />
+        ))}
+
+        {/* 光芒效果 */}
+        <div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-96 h-96 md:w-[600px] md:h-[600px] bg-gradient-radial from-pink-400/30 via-purple-500/20 to-transparent rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
+      </div>
+
+      {/* Header - 修復跑版問題 */}
+      <header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
+          <div className="flex items-center justify-between gap-2">
+            {/* Logo 區域 - 防止文字換行 */}
+            <Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
+              <div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
+                <Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
+              </div>
+              <h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
+            </Link>
+
+            {/* 導航區域 */}
+            <nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
+              {/* 音樂控制 */}
+              <div className="hidden sm:block">
+                <HeaderMusicControl />
+              </div>
+              <div className="sm:hidden">
+                <HeaderMusicControl mobileSimplified />
+              </div>
+
+              {/* 桌面版完整導航 */}
+              <div className="hidden md:flex items-center gap-4">
+                <Link href="/analytics">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
+                  >
+                    <BarChart3 className="w-4 h-4 mr-2" />
+                    問題洞察
+                  </Button>
+                </Link>
+                <Link href="/wishes">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-4"
+                  >
+                    聆聽心聲
+                  </Button>
+                </Link>
+              </div>
+
+              {/* 平板版導航 */}
+              <div className="hidden sm:flex md:hidden items-center gap-1">
+                <Link href="/">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
+                  >
+                    <Home className="w-4 h-4" />
+                  </Button>
+                </Link>
+                <Link href="/analytics">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
+                  >
+                    洞察
+                  </Button>
+                </Link>
+                <Link href="/wishes">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
+                  >
+                    心聲
+                  </Button>
+                </Link>
+              </div>
+
+              {/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
+              <div className="flex sm:hidden items-center gap-1">
+                <Link href="/analytics">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
+                  >
+                    洞察
+                  </Button>
+                </Link>
+                <Link href="/wishes">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
+                  >
+                    心聲
+                  </Button>
+                </Link>
+              </div>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="py-8 md:py-16 px-4">
+        <div className="container mx-auto max-w-4xl">
+          <div
+            className={`transition-all duration-1000 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
+          >
+            {/* 感謝標題區域 */}
+            <div className="text-center mb-12 md:mb-16">
+              {/* 感謝圖標 */}
+              <div className="mb-6 md:mb-8">
+                <div className="relative mx-auto w-24 h-24 md:w-32 md:h-32 mb-4 md:mb-6">
+                  <div className="absolute inset-0 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full animate-pulse shadow-2xl shadow-pink-500/50"></div>
+                  <div className="absolute inset-2 bg-gradient-to-br from-pink-300 to-purple-400 rounded-full flex items-center justify-center">
+                    <Heart className="w-10 h-10 md:w-16 md:h-16 text-white animate-pulse" fill="currentColor" />
+                  </div>
+
+                  {/* 周圍的小心心 */}
+                  {[...Array(8)].map((_, i) => (
+                    <div
+                      key={i}
+                      className="absolute w-3 h-3 md:w-4 md:h-4 text-pink-300 animate-bounce"
+                      style={{
+                        left: `${50 + 40 * Math.cos((i * Math.PI * 2) / 8)}%`,
+                        top: `${50 + 40 * Math.sin((i * Math.PI * 2) / 8)}%`,
+                        animationDelay: `${i * 0.2}s`,
+                        transform: "translate(-50%, -50%)",
+                      }}
+                    >
+                      <Heart className="w-full h-full" fill="currentColor" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 md:mb-6 bg-gradient-to-r from-pink-300 via-purple-300 to-cyan-300 bg-clip-text text-transparent">
+                感謝你的信任與分享
+              </h1>
+
+              <div className="max-w-2xl mx-auto space-y-4 md:space-y-6">
+                <p className="text-xl md:text-2xl text-blue-100 leading-relaxed">
+                  你的困擾已經成功提交，我們會認真分析並提供專業建議
+                </p>
+                <p className="text-lg md:text-xl text-blue-200 leading-relaxed">
+                  每一個真實的工作困擾都是改善的起點，你的分享將幫助我們創造更好的解決方案
+                </p>
+                <p className="text-base md:text-lg text-blue-300 leading-relaxed">
+                  我們的專業團隊會仔細研究你的案例，用科技的力量為你和更多人解決職場挑戰
+                </p>
+              </div>
+
+              {/* 隱私狀態說明 */}
+              <div className="mt-6 md:mt-8">
+                <div
+                  className={`inline-flex items-center gap-2 px-4 py-2 rounded-full border ${
+                    lastWishIsPublic
+                      ? "bg-cyan-500/20 border-cyan-400/50 text-cyan-200"
+                      : "bg-slate-600/20 border-slate-500/50 text-slate-300"
+                  }`}
+                >
+                  {lastWishIsPublic ? (
+                    <>
+                      <Eye className="w-4 h-4" />
+                      <span className="text-sm md:text-base">你的分享已公開，其他人可以看到並產生共鳴</span>
+                    </>
+                  ) : (
+                    <>
+                      <EyeOff className="w-4 h-4" />
+                      <span className="text-sm md:text-base">你的分享保持私密，僅用於問題分析和改善</span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* 統計卡片 */}
+            <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 mb-8 sm:mb-12 md:mb-16">
+              <Card className="bg-gradient-to-br from-pink-800/30 to-purple-800/30 backdrop-blur-sm border border-pink-600/50 shadow-2xl shadow-pink-500/20 transform hover:scale-105 transition-all duration-300">
+                <CardContent className="p-4 sm:p-6 md:p-8 text-center">
+                  <div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-pink-500/30">
+                    <Users className="w-6 h-6 md:w-8 md:h-8 text-white" />
+                  </div>
+                  <div className="text-3xl md:text-4xl font-bold text-white mb-2">{totalWishes}</div>
+                  <div className="text-pink-200 text-sm md:text-base">個案例已收集</div>
+                  <div className="text-pink-300 text-xs md:text-sm mt-1">包括你剛才分享的經歷</div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-gradient-to-br from-cyan-800/30 to-blue-800/30 backdrop-blur-sm border border-cyan-600/50 shadow-2xl shadow-cyan-500/20 transform hover:scale-105 transition-all duration-300">
+                <CardContent className="p-4 sm:p-6 md:p-8 text-center">
+                  <div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-cyan-500/30">
+                    <Sparkles className="w-6 h-6 md:w-8 md:h-8 text-white" />
+                  </div>
+                  <div className="text-3xl md:text-4xl font-bold text-white mb-2">{thisWeek}</div>
+                  <div className="text-cyan-200 text-sm md:text-base">本週新增案例</div>
+                  <div className="text-cyan-300 text-xs md:text-sm mt-1">你不是一個人在面對挑戰</div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-gradient-to-br from-purple-800/30 to-indigo-800/30 backdrop-blur-sm border border-purple-600/50 shadow-2xl shadow-purple-500/20 transform hover:scale-105 transition-all duration-300">
+                <CardContent className="p-4 sm:p-6 md:p-8 text-center">
+                  <div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-purple-500/30">
+                    <Heart className="w-6 h-6 md:w-8 md:h-8 text-white" fill="currentColor" />
+                  </div>
+                  <div className="text-3xl md:text-4xl font-bold text-white mb-2">∞</div>
+                  <div className="text-purple-200 text-sm md:text-base">無限的可能性</div>
+                  <div className="text-purple-300 text-xs md:text-sm mt-1">每個問題都能找到解決方案</div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* 隱私統計說明 */}
+            {privateWishes > 0 && (
+              <div className="text-center mb-8 md:mb-12">
+                <div className="inline-flex items-center gap-4 bg-slate-800/50 backdrop-blur-sm rounded-lg px-4 md:px-6 py-3 md:py-4 border border-slate-600/50">
+                  <div className="flex items-center gap-2 text-cyan-200">
+                    <Eye className="w-4 h-4" />
+                    <span className="text-sm md:text-base font-medium">{publicWishes} 個公開案例</span>
+                  </div>
+                  <div className="w-px h-6 bg-slate-600"></div>
+                  <div className="flex items-center gap-2 text-slate-300">
+                    <EyeOff className="w-4 h-4" />
+                    <span className="text-sm md:text-base font-medium">{privateWishes} 個私密案例</span>
+                  </div>
+                </div>
+                <p className="text-xs md:text-sm text-slate-400 mt-2 px-4">
+                  所有案例都會用於問題分析，幫助改善整體工作環境
+                </p>
+              </div>
+            )}
+
+            {/* 激勵訊息卡片 */}
+            <Card className="bg-gradient-to-r from-slate-800/80 to-slate-900/80 backdrop-blur-sm border border-slate-600/50 shadow-2xl mb-12 md:mb-16">
+              <CardContent className="p-4 sm:p-6 md:p-8 lg:p-12">
+                <div className="text-center space-y-4 sm:space-y-6 md:space-y-8">
+                  <div className="flex items-center justify-center gap-4 mb-6">
+                    <div className="w-2 h-2 bg-pink-400 rounded-full animate-pulse"></div>
+                    <div
+                      className="w-3 h-3 bg-purple-400 rounded-full animate-pulse"
+                      style={{ animationDelay: "0.5s" }}
+                    ></div>
+                    <div
+                      className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"
+                      style={{ animationDelay: "1s" }}
+                    ></div>
+                  </div>
+
+                  <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">你的分享推動了積極的改變</h2>
+
+                  <div className="grid md:grid-cols-2 gap-6 md:gap-8 text-left">
+                    <div className="space-y-4">
+                      <h3 className="text-lg md:text-xl font-semibold text-blue-200 flex items-center gap-2">
+                        <Sparkles className="w-5 h-5 text-cyan-400" />
+                        勇於面對挑戰
+                      </h3>
+                      <p className="text-slate-300 leading-relaxed">
+                        願意分享工作困擾需要勇氣。你的坦誠讓我們能夠深入了解職場的真實挑戰，這是解決問題的重要第一步。
+                      </p>
+                    </div>
+
+                    <div className="space-y-4">
+                      <h3 className="text-lg md:text-xl font-semibold text-purple-200 flex items-center gap-2">
+                        <Heart className="w-5 h-5 text-pink-400" fill="currentColor" />
+                        共同的使命
+                      </h3>
+                      <p className="text-slate-300 leading-relaxed">
+                        在這個平台上，有許多和你面臨相似挑戰的人。你的經驗分享讓大家知道，我們都在為更好的工作環境而努力。
+                      </p>
+                    </div>
+
+                    <div className="space-y-4">
+                      <h3 className="text-lg md:text-xl font-semibold text-green-200 flex items-center gap-2">
+                        <ArrowRight className="w-5 h-5 text-green-400" />
+                        推動實際改變
+                      </h3>
+                      <p className="text-slate-300 leading-relaxed">
+                        每一個案例都是我們開發解決方案的重要依據。你的困擾將幫助我們創造更智能、更實用的工作工具。
+                      </p>
+                    </div>
+
+                    <div className="space-y-4">
+                      <h3 className="text-lg md:text-xl font-semibold text-yellow-200 flex items-center gap-2">
+                        <Sparkles className="w-5 h-5 text-yellow-400" />
+                        創造更好未來
+                      </h3>
+                      <p className="text-slate-300 leading-relaxed">
+                        我們相信科技能夠讓工作變得更有效率、更有意義。你的分享是實現這個目標的重要推動力。
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 行動按鈕 */}
+            <div className="text-center space-y-6 md:space-y-8">
+              <h3 className="text-xl md:text-2xl font-semibold text-white mb-6">接下來你可以...</h3>
+
+              <div className="flex flex-col md:flex-row gap-4 md:gap-6 justify-center max-w-2xl mx-auto">
+                {lastWishIsPublic ? (
+                  <Link href="/wishes" className="flex-1">
+                    <Button
+                      size="lg"
+                      className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
+                    >
+                      <MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
+                      查看你的公開分享
+                    </Button>
+                  </Link>
+                ) : (
+                  <Link href="/wishes" className="flex-1">
+                    <Button
+                      size="lg"
+                      className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
+                    >
+                      <MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
+                      查看其他公開經歷
+                    </Button>
+                  </Link>
+                )}
+
+                <Link href="/analytics" className="flex-1">
+                  <Button
+                    variant="outline"
+                    size="lg"
+                    className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 border-2 border-cyan-400 bg-slate-800/50 hover:bg-slate-700/50 text-cyan-100 hover:text-white font-semibold shadow-lg backdrop-blur-sm transform hover:scale-105 transition-all"
+                  >
+                    <Sparkles className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
+                    查看問題分析
+                  </Button>
+                </Link>
+              </div>
+
+              <div className="pt-4">
+                <Link href="/">
+                  <Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-6 py-2">
+                    <Home className="w-4 h-4 mr-2" />
+                    回到首頁
+                  </Button>
+                </Link>
+              </div>
+            </div>
+
+            {/* 底部激勵訊息 */}
+            <div className="text-center mt-16 md:mt-20 p-6 md:p-8 bg-gradient-to-r from-slate-800/30 to-slate-900/30 rounded-2xl border border-slate-600/30 backdrop-blur-sm">
+              <div className="flex items-center justify-center gap-2 mb-4">
+                <Heart className="w-5 h-5 text-pink-400 animate-pulse" fill="currentColor" />
+                <Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
+                <Heart className="w-5 h-5 text-purple-400 animate-pulse" fill="currentColor" />
+              </div>
+              <p className="text-lg md:text-xl text-blue-200 font-medium mb-2">再次感謝你的信任與分享</p>
+              <p className="text-sm md:text-base text-blue-300">每一份真實的經歷都是推動職場環境改善的重要力量</p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}