61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { Icon } from '@iconify/react'
|
|
|
|
export const Route = createFileRoute('/_authenticated/dashboard/roadmap-discovery')({
|
|
component: RoadmapDiscoveryPage,
|
|
})
|
|
|
|
function RoadmapDiscoveryPage() {
|
|
return (
|
|
<section className="w-[972px] h-[438px]">
|
|
<div className="w-full h-full">
|
|
<div className="w-[421px] mx-auto text-center">
|
|
<h2 className="text-[23px] font-normal leading-[1.2] text-[#6d6d6d]">Welcome to Roadmap Discovery</h2>
|
|
<h1 className="text-[46px] font-bold leading-[1.2] text-[#5d5d5d] mt-[12px]">Start your Journey</h1>
|
|
</div>
|
|
|
|
<div className="w-[528px] h-[146px] mx-auto mt-10 flex items-start">
|
|
<img
|
|
src="/image/mascot-1.png"
|
|
alt="Mascot"
|
|
className="w-[146px] h-[146px] object-cover"
|
|
/>
|
|
|
|
<div className="w-[381px] h-[78px] bg-white mt-0">
|
|
<p className="text-[19px] leading-[1.2] text-[#6d6d6d] px-5 py-4">
|
|
Lagi pengen belajar apa? Ketik aja di sini,
|
|
<br />
|
|
biar AI bantuin bikin roadmap-nya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-[732px] h-[43px] mx-auto mt-10">
|
|
<div className="w-full h-[34px] flex items-center gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Mau belajar roadmap apa?"
|
|
className="w-[468px] h-[34px] border border-[#d1d1d1] rounded-sm px-3 text-[15px] text-[#6d6d6d] placeholder:text-[#b0b0b0] focus:outline-none focus:border-[#23a1eb]"
|
|
/>
|
|
|
|
<select
|
|
className="w-[248px] h-[34px] border border-[#d1d1d1] rounded-sm px-3 text-[15px] text-[#6d6d6d] bg-white focus:outline-none focus:border-[#23a1eb]"
|
|
defaultValue="Tingkat Belajar"
|
|
>
|
|
<option disabled>Tingkat Belajar</option>
|
|
<option>Pemula</option>
|
|
<option>Menengah</option>
|
|
<option>Lanjutan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button className="w-[140px] h-[34px] mt-[49px] mx-auto flex items-center justify-center gap-2 bg-[#23a1eb] text-[#f6f6f6] rounded-sm text-[15px] font-semibold hover:bg-[#1d8fd3] transition-colors cursor-pointer">
|
|
<Icon icon="mdi:star-four-points" width="12" />
|
|
Generate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|