kleap
/
app-hopping-chameleon-beam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/onboarding/page.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:54:19 +00:00
parent b4e005d6b7
commit a3681d21c5
1 changed files with 114 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
app/onboarding/page.tsx Normal file
View File

@ -0,0 +1,114 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import Link from "next/link";
import { motion } from "framer-motion";
export default function OnboardingPage() {
return (
<main className="min-h-screen bg-neutral-50 pt-24 pb-20">
<Container className="max-w-2xl">
<div className="mb-12">
<div className="flex justify-between items-center mb-4">
<span className="text-sm font-medium text-indigo-600">Langkah 1 dari 3</span>
<span className="text-sm text-neutral-500">33% Selesai</span>
</div>
<div className="w-full bg-neutral-200 h-2 rounded-full overflow-hidden">
<div className="bg-indigo-600 h-full w-1/3" />
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
>
<Heading className="mb-2">Apa goal utama kamu?</Heading>
<Subheading className="mb-8">Kami akan mencocokkanmu dengan mentor yang paling relevan.</Subheading>
<Card className="border-none shadow-sm">
<CardContent className="p-8 space-y-8">
<div className="space-y-3">
<Label htmlFor="goal">Saya ingin fokus pada...</Label>
<Select>
<SelectTrigger id="goal" className="h-12">
<SelectValue placeholder="Pilih goal kamu" />
</SelectTrigger>
<SelectContent>
<SelectItem value="career">Persiapan Karier & Interview</SelectItem>
<SelectItem value="technical">Skill Teknis (Coding, Design, dll)</SelectItem>
<SelectItem value="leadership">Leadership & Management</SelectItem>
<SelectItem value="business">Business & Entrepreneurship</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-3">
<Label>Target waktu pencapaian</Label>
<RadioGroup defaultValue="1-3" className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<RadioGroupItem value="1" id="t1" className="peer sr-only" />
<Label
htmlFor="t1"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
>
<span className="text-sm font-medium">Segera</span>
<span className="text-xs text-neutral-500">{"< 1 bulan"}</span>
</Label>
</div>
<div>
<RadioGroupItem value="1-3" id="t2" className="peer sr-only" />
<Label
htmlFor="t2"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
>
<span className="text-sm font-medium">Menengah</span>
<span className="text-xs text-neutral-500">1-3 bulan</span>
</Label>
</div>
<div>
<RadioGroupItem value="3+" id="t3" className="peer sr-only" />
<Label
htmlFor="t3"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
>
<span className="text-sm font-medium">Panjang</span>
<span className="text-xs text-neutral-500">3+ bulan</span>
</Label>
</div>
</RadioGroup>
</div>
<div className="space-y-3">
<Label htmlFor="budget">Budget per sesi (IDR)</Label>
<Select>
<SelectTrigger id="budget" className="h-12">
<SelectValue placeholder="Pilih range budget" />
</SelectTrigger>
<SelectContent>
<SelectItem value="free">Gratis (Mentor Volunteer)</SelectItem>
<SelectItem value="100-300">100rb - 300rb</SelectItem>
<SelectItem value="300-500">300rb - 500rb</SelectItem>
<SelectItem value="500+">Di atas 500rb</SelectItem>
</SelectContent>
</Select>
<p className="text-xs text-neutral-500 italic">
* Tenang, kamu bisa mengubah filter ini nanti.
</p>
</div>
<Button className="w-full h-12 bg-indigo-600 hover:bg-indigo-700 text-lg" asChild>
<Link href="/mentors">Lihat Rekomendasi Mentor</Link>
</Button>
</CardContent>
</Card>
</motion.div>
</Container>
</main>
);
}