151 lines
7.2 KiB
TypeScript
151 lines
7.2 KiB
TypeScript
import { Sidebar } from "@/components/sidebar"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Upload, Settings, BarChart3, FileText, ArrowRight } from "lucide-react"
|
||
import Link from "next/link"
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Sidebar />
|
||
|
||
<main className="md:ml-64 p-6">
|
||
{/* Hero Section */}
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-12 pt-8 md:pt-0">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4 font-[var(--font-playfair)]">
|
||
AI 智能評審系統
|
||
</h1>
|
||
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
|
||
上傳您的 PPT、影片或網站連結，設定評分標準，獲得專業的 AI 評分結果
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button asChild size="lg" className="text-lg px-8">
|
||
<Link href="/upload">
|
||
開始評審 <ArrowRight className="ml-2 h-5 w-5" />
|
||
</Link>
|
||
</Button>
|
||
<Button asChild variant="outline" size="lg" className="text-lg px-8 bg-transparent">
|
||
<Link href="/criteria">設定標準</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features Grid */}
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<Upload className="h-6 w-6 text-primary" />
|
||
</div>
|
||
<CardTitle className="text-lg">多格式上傳</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<CardDescription>支援 PPT、影片、網站連結等多種格式的內容上傳</CardDescription>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<Settings className="h-6 w-6 text-secondary" />
|
||
</div>
|
||
<CardTitle className="text-lg">彈性評分標準</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<CardDescription>自定義評分項目和權重，建立符合需求的評審標準</CardDescription>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<BarChart3 className="h-6 w-6 text-accent" />
|
||
</div>
|
||
<CardTitle className="text-lg">智能評分</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<CardDescription>AI 分析內容並根據您的標準提供詳細的評分結果</CardDescription>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="text-center hover:shadow-lg transition-shadow">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 bg-chart-4/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<FileText className="h-6 w-6 text-chart-4" />
|
||
</div>
|
||
<CardTitle className="text-lg">詳細報告</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<CardDescription>獲得完整的評分報告和改進建議，追蹤歷史記錄</CardDescription>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* How it works */}
|
||
<Card className="mb-12">
|
||
<CardHeader className="text-center">
|
||
<CardTitle className="text-2xl font-[var(--font-playfair)]">使用流程</CardTitle>
|
||
<CardDescription className="text-lg">簡單四步驟，完成專業評審</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid md:grid-cols-4 gap-8">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 text-primary-foreground font-bold text-xl">
|
||
1
|
||
</div>
|
||
<h3 className="font-semibold mb-2">設定評分標準</h3>
|
||
<p className="text-sm text-muted-foreground">定義評分項目和權重比例</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4 text-secondary-foreground font-bold text-xl">
|
||
2
|
||
</div>
|
||
<h3 className="font-semibold mb-2">上傳內容</h3>
|
||
<p className="text-sm text-muted-foreground">上傳 PPT、影片或提供網站連結</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4 text-accent-foreground font-bold text-xl">
|
||
3
|
||
</div>
|
||
<h3 className="font-semibold mb-2">AI 分析</h3>
|
||
<p className="text-sm text-muted-foreground">系統自動分析內容並評分</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-chart-4 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
|
||
4
|
||
</div>
|
||
<h3 className="font-semibold mb-2">查看結果</h3>
|
||
<p className="text-sm text-muted-foreground">獲得詳細評分報告和建議</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
<Card className="text-center">
|
||
<CardContent className="pt-6">
|
||
<div className="text-3xl font-bold text-primary mb-2">10+</div>
|
||
<p className="text-muted-foreground">評分維度</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="text-center">
|
||
<CardContent className="pt-6">
|
||
<div className="text-3xl font-bold text-secondary mb-2">100%</div>
|
||
<p className="text-muted-foreground">客製化標準</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="text-center">
|
||
<CardContent className="pt-6">
|
||
<div className="text-3xl font-bold text-accent mb-2">24/7</div>
|
||
<p className="text-muted-foreground">即時評審</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|