Spaces:
Runtime error
Runtime error
File size: 6,823 Bytes
054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a 5ee5085 054d73a e5c2788 054d73a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | export function Features() {
const features = [
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
),
title: "自動評分",
description: "使用 AI 精準評分選擇題、數值題，甚至開放式問題。",
color: "var(--color-primary)",
},
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
),
title: "智能解釋",
description: "為每個錯誤答案提供個人化解釋，幫助學生理解錯誤。",
color: "var(--color-accent)",
},
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
),
title: "同儕學習小組",
description: "AI 建議的學生分組，將表現優秀的學生與需要特定主題幫助的學生配對。",
color: "var(--color-success)",
},
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
),
title: "電子郵件報告",
description: "直接在收件匣中接收精美的格式化報告，隨時可與學生或家長分享。",
color: "var(--color-warning)",
},
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
),
title: "隱私優先",
description: "學生資料安全處理。我們只存取您分享的內容，絕不儲存敏感資訊。",
color: "var(--color-primary-light)",
},
{
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
title: "即時分析",
description: "幾秒內獲得全面洞察，而非數小時。更多時間教學，更少時間評分。",
color: "var(--color-accent-light)",
},
];
return (
<section id="features" className="py-20 px-6 bg-gradient-to-b from-transparent to-[var(--color-surface)]/50">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="font-display text-4xl font-bold text-[var(--color-text)] mb-4">
了解您的學生所需的一切
<span className="text-gradient"> 功能</span>
</h2>
<p className="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
ClassLens 結合 AI 的力量與深思熟慮的教育實踐，為您提供可操作的洞察。
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{features.map((feature, i) => (
<div
key={i}
className="card p-6 hover:shadow-lg transition-all hover:-translate-y-1 group"
>
<div
className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110"
style={{
backgroundColor: `color-mix(in srgb, ${feature.color} 15%, transparent)`,
color: feature.color
}}
>
{feature.icon}
</div>
<h3 className="font-display text-xl font-semibold text-[var(--color-text)] mb-2">
{feature.title}
</h3>
<p className="text-[var(--color-text-muted)]">
{feature.description}
</p>
</div>
))}
</div>
{/* How it works */}
<div className="mt-24">
<h3 className="font-display text-3xl font-bold text-center text-[var(--color-text)] mb-12">
How It Works
</h3>
<div className="relative">
{/* Connection line */}
<div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-accent)] to-[var(--color-success)] -translate-y-1/2" />
<div className="grid lg:grid-cols-4 gap-8">
{[
{ step: 1, title: "Connect Google", desc: "Link your Google account to access Form responses" },
{ step: 2, title: "Share URL", desc: "Paste your Google Form or Sheets response URL" },
{ step: 3, title: "AI Analyzes", desc: "ClassLens grades, explains, and groups students" },
{ step: 4, title: "Get Report", desc: "Receive a beautiful report via email and dashboard" },
].map((item) => (
<div key={item.step} className="relative text-center">
<div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] text-white font-bold text-xl flex items-center justify-center shadow-lg relative z-10">
{item.step}
</div>
<h4 className="font-display text-lg font-semibold text-[var(--color-text)] mb-2">
{item.title}
</h4>
<p className="text-sm text-[var(--color-text-muted)]">{item.desc}</p>
</div>
))}
</div>
</div>
</div>
</div>
</section>
);
}
|