File size: 4,608 Bytes
f4209d5 | 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 | import { useEffect, useState } from "react";
import { Link } from "@tanstack/react-router";
import { Card, CardContent } from "@labas/ui/components/card";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const LS_KEY = "labas-getting-started-dismissed";
const steps = [
{
num: 1,
title: "Generate Soal",
desc: "Buat soal latihan AI sesuai exam yang kamu pilih. Pilih jenis ujian, section, format, dan topik.",
link: "/generate",
icon: "auto_awesome" as const,
color: "matcha",
},
{
num: 2,
title: "Buat Paket",
desc: "Kumpulkan soal dari Bank Soal jadi paket latihan. Bisa manual atau pakai Auto Bundle.",
link: "/bank",
icon: "folder" as const,
color: "slushie",
},
{
num: 3,
title: "Mulai Latihan",
desc: "Kerjakan paket soal, lihat skor, dan pantau perkembangan belajarmu.",
link: "/packages",
icon: "play_arrow" as const,
color: "lemon",
},
];
const colorMap: Record<string, { bg: string; text: string; badge: string }> = {
matcha: { bg: "bg-[var(--matcha-300)]", text: "text-[var(--matcha-800)]", badge: "bg-[var(--matcha-300)]/30" },
slushie: { bg: "bg-[var(--slushie-500)]", text: "text-[var(--slushie-800)]", badge: "bg-[var(--slushie-500)]/20" },
lemon: { bg: "bg-[var(--lemon-400)]", text: "text-[var(--lemon-800)]", badge: "bg-[var(--lemon-400)]/30" },
};
export function GettingStartedCard() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const dismissed = localStorage.getItem(LS_KEY) === "true";
if (!dismissed) setVisible(true);
}, []);
const dismiss = () => {
localStorage.setItem(LS_KEY, "true");
setVisible(false);
};
if (!visible) return null;
return (
<Card className="mb-8 bg-gradient-to-br from-[var(--matcha-300)]/20 to-[var(--slushie-500)]/20 border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)] relative overflow-hidden">
<div className="absolute -right-12 -top-12 w-48 h-48 ai-glow pointer-events-none opacity-20" />
<CardContent className="p-6 md:p-8">
<div className="flex items-start justify-between mb-6">
<div className="flex items-center gap-3">
<div className="h-12 w-12 bg-[var(--clay-black)] rounded-[var(--radius-xl)] flex items-center justify-center">
<MaterialIcon name="school" className="text-2xl text-[var(--pure-white)]" />
</div>
<div>
<h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
Mulai Belajar
</h2>
<p className="text-sm text-[var(--warm-charcoal)]">
Ikuti 3 langkah mudah untuk memulai latihan.
</p>
</div>
</div>
<button
onClick={dismiss}
className="text-[var(--warm-silver)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
>
<MaterialIcon name="close" className="text-xl" />
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{steps.map((step) => {
const c = colorMap[step.color];
return (
<Link
key={step.num}
to={step.link}
className="flex items-start gap-4 p-4 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--matcha-400)] transition-all group clay-hover"
>
<div className={`h-10 w-10 ${c.bg} rounded-[var(--radius-lg)] flex items-center justify-center shrink-0`}>
<span className="text-sm font-black text-[var(--matcha-800)]">{step.num}</span>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<MaterialIcon name={step.icon} className={`text-sm ${c.text}`} />
<h3 className="font-headline font-bold text-[var(--clay-black)] group-hover:text-[var(--matcha-800)] transition-colors">
{step.title}
</h3>
</div>
<p className="text-xs text-[var(--warm-charcoal)] leading-relaxed">
{step.desc}
</p>
</div>
<MaterialIcon name="chevron_right" className="text-lg text-[var(--warm-silver)] group-hover:text-[var(--matcha-800)] shrink-0 self-center transition-colors" />
</Link>
);
})}
</div>
</CardContent>
</Card>
);
}
|