feat(hackathon): add dark mode support with theme toggle
- Add ThemeProvider with system/light/dark mode support and localStorage persistence - Add ThemeToggle component for pages without sidebar (landing, login, signup) - Enable class-based dark mode in Tailwind CSS v4 via @custom-variant - Add dark mode classes to landing page, login, signup, and all dashboard pages - Keep IMPHNEN logo blue in dark mode, invert Kolosal logo 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Maulana Sodiqin
co-authored by
Claude
Claude
parent
c9f5b9e4a5
commit
1839f4cab0
+110
-108
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { ThemeToggle } from '../components/theme-toggle';
|
||||
|
||||
export default function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -62,13 +63,13 @@ export default function HomePage() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-white dark:bg-neutral-950">
|
||||
{/* Navigation */}
|
||||
<div id="#top" className="hidden"></div>
|
||||
<nav className="border-b border-gray-200 bg-white sticky top-0 z-50">
|
||||
<nav className="border-b border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 sticky top-0 z-50">
|
||||
<div className="flex items-center justify-between max-w-7xl mx-auto px-4 md:px-8 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg md:text-xl font-bold">IMPHNEN</span>
|
||||
<span className="text-lg md:text-xl font-bold dark:text-white">IMPHNEN</span>
|
||||
<a
|
||||
href="#top"
|
||||
className="text-lg md:text-xl font-bold text-primary-500 hover:cursor-pointer"
|
||||
@@ -80,22 +81,23 @@ export default function HomePage() {
|
||||
<div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
|
||||
<a
|
||||
href="#timeline"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||
className="text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Timeline
|
||||
</a>
|
||||
<a
|
||||
href="#hadiah"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||
className="text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Hadiah
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||
className="text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
<Button
|
||||
onClick={() => navigate('/auth/login')}
|
||||
size="sm"
|
||||
@@ -113,47 +115,50 @@ export default function HomePage() {
|
||||
</Button>
|
||||
</div>
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="md:hidden p-2 cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="p-2 cursor-pointer text-gray-900 dark:text-white"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-b border-gray-200 bg-white">
|
||||
<div className="md:hidden border-b border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
|
||||
<div className="flex flex-col items-start gap-4 px-4 py-4">
|
||||
<a
|
||||
href="#timeline"
|
||||
className="ms-3 text-gray-600 hover:text-gray-900"
|
||||
className="ms-3 text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Timeline
|
||||
</a>
|
||||
<a
|
||||
href="#hadiah"
|
||||
className="ms-3 text-gray-600 hover:text-gray-900"
|
||||
className="ms-3 text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Hadiah
|
||||
</a>
|
||||
<a href="#faq" className="ms-3 text-gray-600 hover:text-gray-900">
|
||||
<a href="#faq" className="ms-3 text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white">
|
||||
FAQ
|
||||
</a>
|
||||
<a href="#masuk" className="ms-3 text-gray-600 hover:text-gray-900">
|
||||
<a href="#masuk" className="ms-3 text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white">
|
||||
Masuk
|
||||
</a>
|
||||
<button
|
||||
@@ -177,7 +182,7 @@ export default function HomePage() {
|
||||
className="absolute bottom-1/3 -right-20 w-100 h-100 rounded-full bg-linear-to-r from-blue-400/20 to-primary/20 blur-3xl"
|
||||
style={{ transform: 'translate(0px, 0px)', opacity: 1 }}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-size-[40px_40px]"></div>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-size-[40px_40px]"></div>
|
||||
</div>
|
||||
<div className="mx-auto container px-4 relative flex flex-col items-center">
|
||||
{/* Logos */}
|
||||
@@ -189,19 +194,19 @@ export default function HomePage() {
|
||||
className="h-12 md:h-16"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-3xl md:text-5xl font-bold text-gray-400">
|
||||
<span className="text-3xl md:text-5xl font-bold text-gray-400 dark:text-neutral-500">
|
||||
×
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="images/sponsors/kolosal-logo_rlxbck.svg"
|
||||
alt="Kolosal.ai"
|
||||
className="h-8 md:h-12"
|
||||
className="h-8 md:h-12 dark:invert"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h1 className="text-h1 font-bold text-gray-900 mb-4 text-center">
|
||||
<h1 className="text-h1 font-bold text-gray-900 dark:text-white mb-4 text-center">
|
||||
Hackathon
|
||||
</h1>
|
||||
{/* Subtitle */}
|
||||
@@ -209,12 +214,12 @@ export default function HomePage() {
|
||||
"Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
|
||||
</p>
|
||||
{/* Description */}
|
||||
<p className="text-p3 text-gray-600 max-w-lg md:max-w-xl text-center mb-8 md:mb-12 px-4 font-sans">
|
||||
<p className="text-p3 text-gray-600 dark:text-neutral-400 max-w-lg md:max-w-xl text-center mb-8 md:mb-12 px-4 font-sans">
|
||||
Kompetisi pengembangan teknologi untuk menciptakan solusi inovatif
|
||||
yang menghadirkan dampak nyata
|
||||
</p>
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600">
|
||||
<div className="flex items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600 dark:text-neutral-400">
|
||||
<div className="flex items-center gap-2 md:gap-3">
|
||||
<Icon icon="streamline-plump:web" width="16" height="16" />
|
||||
<span>Online</span>
|
||||
@@ -236,7 +241,7 @@ export default function HomePage() {
|
||||
href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center px-4 py-2.5 border-2 border-gray-300 hover:border-gray-400 transition-colors text-center bg-transparent hover:text-gray-900 hover:bg-gray-50 text-base text-gray-600 rounded-lg font-bai-jamjuree font-semibold"
|
||||
className="inline-flex items-center justify-center px-4 py-2.5 border-2 border-gray-300 dark:border-neutral-600 hover:border-gray-400 dark:hover:border-neutral-500 transition-colors text-center bg-transparent hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-neutral-800 text-base text-gray-600 dark:text-neutral-400 rounded-lg font-bai-jamjuree font-semibold"
|
||||
>
|
||||
Gabung Grup WA Hackathon
|
||||
</a>
|
||||
@@ -244,7 +249,7 @@ export default function HomePage() {
|
||||
{/* Scroll indicator */}
|
||||
<div className="mt-12 md:mt-20">
|
||||
<svg
|
||||
className="w-6 h-6 text-gray-400 animate-bounce"
|
||||
className="w-6 h-6 text-gray-400 dark:text-neutral-500 animate-bounce"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -261,17 +266,17 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section className="py-16 md:py-24 px-4 md:px-8 bg-white">
|
||||
<section className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-neutral-950">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-10 dark:text-white">
|
||||
Tentang <span className="text-primary-500">Hackathon</span>
|
||||
</h2>
|
||||
<p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 mb-6">
|
||||
<span className="font-semibold text-gray-900">Hackathon</span>{' '}
|
||||
<p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-neutral-400 mb-6">
|
||||
<span className="font-semibold text-gray-900 dark:text-white">Hackathon</span>{' '}
|
||||
adalah kompetisi pengembangan teknologi yang mengajak talenta muda
|
||||
untuk berkolaborasi dalam menciptakan solusi inovatif.
|
||||
</p>
|
||||
<p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600">
|
||||
<p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-neutral-400">
|
||||
IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
|
||||
<span className="font-semibold text-primary-500">
|
||||
"Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
|
||||
@@ -282,10 +287,10 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Prizes Section */}
|
||||
<section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
|
||||
<section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-neutral-900">
|
||||
<div className="max-w-lg md:max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 font-bai-jamjuree">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 font-bai-jamjuree dark:text-white">
|
||||
Hadiah <span className="text-primary-500">Menarik</span>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-primary-500 font-semibold font-sans">
|
||||
@@ -295,67 +300,67 @@ export default function HomePage() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* Prize 1 */}
|
||||
<div className="bg-white rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 hover:border-primary-500 transition-colors">
|
||||
<div className="bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-neutral-700 hover:border-primary-500 dark:hover:border-primary-500 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
|
||||
<Icon
|
||||
icon="ic:round-star"
|
||||
className="h-8 w-8 text-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-center mb-2">Juara 1</h3>
|
||||
<h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 1</h3>
|
||||
<p className="text-2xl font-bold text-primary-500 text-center font-sans">
|
||||
Rp6.000.000
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Prize 2 */}
|
||||
<div className="bg-white rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 hover:border-gray-500 transition-colors">
|
||||
<div className="bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-neutral-700 hover:border-gray-500 dark:hover:border-neutral-500 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-gray-100 dark:bg-neutral-700 rounded-full flex items-center justify-center">
|
||||
<Icon
|
||||
icon="ic:round-star"
|
||||
className="h-8 w-8 text-gray-600"
|
||||
className="h-8 w-8 text-gray-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-center mb-2">Juara 2</h3>
|
||||
<h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 2</h3>
|
||||
<p className="text-2xl font-bold text-primary-500 text-center font-sans">
|
||||
Rp4.000.000
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Prize 3 */}
|
||||
<div className="bg-white rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 hover:border-orange-300 transition-colors">
|
||||
<div className="bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-neutral-700 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
|
||||
<Icon
|
||||
icon="ic:round-star"
|
||||
className="h-8 w-8 text-orange-600"
|
||||
className="h-8 w-8 text-orange-600 dark:text-orange-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-center mb-2">Juara 3</h3>
|
||||
<p className="text-2xl font-bold text-orange-600 text-center font-sans">
|
||||
<h3 className="text-xl font-bold text-center mb-2 dark:text-white">Juara 3</h3>
|
||||
<p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-center font-sans">
|
||||
Rp2.500.000
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Special Prize */}
|
||||
<div className="bg-white rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 hover:border-purple-300 transition-colors">
|
||||
<div className="bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-neutral-700 hover:border-purple-300 dark:hover:border-purple-500 transition-colors">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
|
||||
<Icon
|
||||
icon="ic:round-star"
|
||||
className="h-8 w-8 text-purple-600"
|
||||
className="h-8 w-8 text-purple-600 dark:text-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-center mb-2">
|
||||
<h3 className="text-xl font-bold text-center mb-2 dark:text-white">
|
||||
Juara Kategori Lainnya
|
||||
</h3>
|
||||
<p className="text-2xl font-bold text-purple-600 text-center font-sans">
|
||||
<p className="text-2xl font-bold text-purple-600 dark:text-purple-500 text-center font-sans">
|
||||
Rp2.000.000
|
||||
</p>
|
||||
</div>
|
||||
@@ -364,13 +369,13 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<section id="timeline" className="py-16 md:py-24 px-4 md:px-8 bg-white">
|
||||
<section id="timeline" className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-neutral-950">
|
||||
<div className="max-w-4xl mx-auto font-sans">
|
||||
<div className="text-center mb-12 font-bai-jamjuree">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
|
||||
Timeline <span className="text-primary-500">Acara</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
<p className="text-lg text-gray-600 dark:text-neutral-400">
|
||||
Jadwal lengkap pelaksanaan hackathon
|
||||
</p>
|
||||
</div>
|
||||
@@ -380,14 +385,14 @@ export default function HomePage() {
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
<div className="flex-1 pb-8">
|
||||
<p className="text-primary-500 font-semibold mb-2">
|
||||
30 November 2025
|
||||
</p>
|
||||
<h3 className="text-xl font-bold mb-2">Penutupan Registrasi</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="text-xl font-bold mb-2 dark:text-white">Penutupan Registrasi</h3>
|
||||
<p className="text-gray-600 dark:text-neutral-400">
|
||||
Batas akhir pendaftaran peserta hackathon.
|
||||
</p>
|
||||
</div>
|
||||
@@ -397,14 +402,14 @@ export default function HomePage() {
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
<div className="flex-1 pb-8">
|
||||
<p className="text-primary-500 font-semibold mb-2">
|
||||
30 November 2025
|
||||
</p>
|
||||
<h3 className="text-xl font-bold mb-2">Technical Meeting</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="text-xl font-bold mb-2 dark:text-white">Technical Meeting</h3>
|
||||
<p className="text-gray-600 dark:text-neutral-400">
|
||||
Akan diadakan technical meeting terkait lomba melalui Google
|
||||
Meet. Stay tune di grup WA Hackathon.
|
||||
</p>
|
||||
@@ -415,14 +420,14 @@ export default function HomePage() {
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
<div className="flex-1 pb-8">
|
||||
<p className="text-primary-500 font-semibold mb-2">
|
||||
1 - 7 Desember 2025
|
||||
</p>
|
||||
<h3 className="text-xl font-bold mb-2">Tahap Penyisihan</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="text-xl font-bold mb-2 dark:text-white">Tahap Penyisihan</h3>
|
||||
<p className="text-gray-600 dark:text-neutral-400">
|
||||
Peserta mengerjakan tantangan yang diberikan.
|
||||
</p>
|
||||
</div>
|
||||
@@ -432,14 +437,14 @@ export default function HomePage() {
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300"></div>
|
||||
<div className="w-0.5 h-full bg-gray-300 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
<div className="flex-1 pb-8">
|
||||
<p className="text-primary-500 font-semibold mb-2">
|
||||
8 - 14 Desember 2025
|
||||
</p>
|
||||
<h3 className="text-xl font-bold mb-2">Penilaian & Webinar</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="text-xl font-bold mb-2 dark:text-white">Penilaian & Webinar</h3>
|
||||
<p className="text-gray-600 dark:text-neutral-400">
|
||||
Proses penilaian oleh juri dan sesi webinar.
|
||||
</p>
|
||||
</div>
|
||||
@@ -454,8 +459,8 @@ export default function HomePage() {
|
||||
<p className="text-primary-500 font-semibold mb-2">
|
||||
15 Desember 2025
|
||||
</p>
|
||||
<h3 className="text-xl font-bold mb-2">Pengumuman & Final</h3>
|
||||
<p className="text-gray-600">
|
||||
<h3 className="text-xl font-bold mb-2 dark:text-white">Pengumuman & Final</h3>
|
||||
<p className="text-gray-600 dark:text-neutral-400">
|
||||
Presentasi final dan pengumuman pemenang.
|
||||
</p>
|
||||
</div>
|
||||
@@ -465,47 +470,44 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Judges Section */}
|
||||
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 font-sans">
|
||||
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-neutral-900 font-sans">
|
||||
<div className="md:max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12 font-bai-jamjuree">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
|
||||
Dewan <span className="text-primary-500">Juri</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
<p className="text-lg text-gray-600 dark:text-neutral-400">
|
||||
Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Judge 1 */}
|
||||
<div className="flex flex-col justify-between bg-white rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
{/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
|
||||
<h3 className="text-p3 font-bold mb-1">
|
||||
<div className="flex flex-col justify-between bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
<h3 className="text-p3 font-bold mb-1 dark:text-white">
|
||||
Alifais Farrel Ramdhani
|
||||
</h3>
|
||||
<div>
|
||||
<p className="text-primary-500 font-semibold mb-1">CTO</p>
|
||||
<p className="text-gray-600">Kolosal.ai</p>
|
||||
<p className="text-gray-600 dark:text-neutral-400">Kolosal.ai</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Judge 2 */}
|
||||
<div className="flex flex-col justify-between bg-white rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
{/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
|
||||
<h3 className="text-p3 font-bold mb-1">Anka Tama</h3>
|
||||
<div className="flex flex-col justify-between bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
<h3 className="text-p3 font-bold mb-1 dark:text-white">Anka Tama</h3>
|
||||
<div>
|
||||
<p className="text-primary-500 font-semibold mb-1">Admin</p>
|
||||
<p className="text-gray-600">IMPHNEN</p>
|
||||
<p className="text-gray-600 dark:text-neutral-400">IMPHNEN</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Judge 3 */}
|
||||
<div className="flex flex-col justify-between bg-white rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
{/* <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div> */}
|
||||
<h3 className="text-p3 font-bold mb-1">Hafid Nur</h3>
|
||||
<div className="flex flex-col justify-between bg-white dark:bg-neutral-800 rounded-xl px-4 py-8 shadow-lg text-center">
|
||||
<h3 className="text-p3 font-bold mb-1 dark:text-white">Hafid Nur</h3>
|
||||
<div>
|
||||
<p className="text-primary-500 font-semibold mb-1">Moderator</p>
|
||||
<p className="text-gray-600">IMPHNEN</p>
|
||||
<p className="text-gray-600 dark:text-neutral-400">IMPHNEN</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -513,25 +515,25 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section id="faq" className="py-16 md:py-24 px-4 md:px-8 bg-white">
|
||||
<section id="faq" className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-neutral-950">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-primary-500">
|
||||
FAQ
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
<p className="text-lg text-gray-600 dark:text-neutral-400">
|
||||
Pertanyaan yang Sering Diajukan
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 font-sans">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg">
|
||||
<div key={index} className="border border-gray-200 dark:border-neutral-700 rounded-lg">
|
||||
<button
|
||||
onClick={() => setOpenFaq(openFaq === index ? null : index)}
|
||||
className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="font-semibold text-gray-900">
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{faq.question}
|
||||
</span>
|
||||
<svg
|
||||
@@ -551,7 +553,7 @@ export default function HomePage() {
|
||||
</svg>
|
||||
</button>
|
||||
{openFaq === index && (
|
||||
<div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
|
||||
<div className="px-6 pb-4 text-gray-600 dark:text-neutral-400">{faq.answer}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -560,12 +562,12 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Sponsors Section */}
|
||||
<section className="py-20 md:py-28 px-4 md:px-8 bg-gray-50">
|
||||
<section className="py-20 md:py-28 px-4 md:px-8 bg-gray-50 dark:bg-neutral-900">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
|
||||
Sponsor & <span className="text-primary-500">Partner</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 mb-8">
|
||||
<p className="text-lg text-gray-600 dark:text-neutral-400 mb-8">
|
||||
Acara ini sepenuhnya disponsori oleh
|
||||
</p>
|
||||
|
||||
@@ -574,12 +576,12 @@ export default function HomePage() {
|
||||
href="https://kolosal.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-white rounded-xl p-8 shadow-lg inline-block border-2 border-transparent hover:border-gray-500 transition-colors"
|
||||
className="bg-white dark:bg-neutral-800 rounded-xl p-8 shadow-lg inline-block border-2 border-transparent hover:border-gray-500 dark:hover:border-neutral-500 transition-colors"
|
||||
>
|
||||
<img
|
||||
src="images/sponsors/kolosal-logo_rlxbck.svg"
|
||||
alt="Kolosal.ai"
|
||||
className="h-12 md:h-16"
|
||||
className="h-12 md:h-16 dark:invert"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -589,13 +591,13 @@ export default function HomePage() {
|
||||
{/* CTA Section */}
|
||||
<section
|
||||
id="masuk"
|
||||
className="py-20 md:py-28 px-4 md:px-8 bg-linear-to-b from-white to-blue-50"
|
||||
className="py-20 md:py-28 px-4 md:px-8 bg-linear-to-b from-white to-blue-50 dark:from-neutral-950 dark:to-neutral-900"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto text-center font-sans">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6 font-bai-jamjuree">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-6 font-bai-jamjuree dark:text-white">
|
||||
Segera Daftarkan <span className="text-primary-500">Timmu!</span>
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-left md:text-center text-gray-600 mb-8">
|
||||
<p className="text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-neutral-400 mb-8">
|
||||
Jangan lewatkan kesempatan emas untuk bersaing dengan developer
|
||||
terbaik,
|
||||
<br className="hidden md:block" /> belajar dari para ahli, dan
|
||||
@@ -613,13 +615,13 @@ export default function HomePage() {
|
||||
href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-3 bg-white text-gray-900 text-lg rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors font-semibold"
|
||||
className="px-8 py-3 bg-white dark:bg-neutral-800 text-gray-900 dark:text-white text-lg rounded-lg border-2 border-gray-300 dark:border-neutral-600 hover:border-gray-400 dark:hover:border-neutral-500 transition-colors font-semibold"
|
||||
>
|
||||
Gabung Grup WA Hackathon
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-500 mt-6">
|
||||
<p className="text-sm text-gray-500 dark:text-neutral-500 mt-6">
|
||||
Pendaftaran ditutup pada{' '}
|
||||
<span className="text-primary-500 font-semibold">
|
||||
30 November 2025
|
||||
|
||||
Reference in New Issue
Block a user