MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hackathon): Update landing page UI and meta tag (#59)

Browse Source 
* feat: update landing page

* feat: Add favicon and SEO (JSON-LD schema, meta tags)

- Add favicon image
- Add JSON-LD schema for Hackathon event
- Add react-helmet-async for managing meta tags

* chore: remove react-helmet-async
This commit is contained in:
Hafid Nur
2025-11-25 15:47:55 +07:00
committed by GitHub
parent d9c4217fd3
commit a2cf67d210
7 changed files with 445 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/src/app/page.tsx
+244 -219
View File
@@ -1,5 +1,7 @@
import { useNavigate } from 'react-router';
import { useState } from 'react';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { Icon } from '@iconify/react';
export default function HomePage() {
const navigate = useNavigate();
@@ -15,7 +17,7 @@ export default function HomePage() {
{
question: 'Apakah ada biaya pendaftaran?',
answer:
'Tidak, hackathon ini gratis dan terbuka untuk semua peserta yang memenuhi kriteria.',
'Tidak, hackathon ini GRATIS dan terbuka untuk semua peserta yang memenuhi kriteria.',
},
{
question: 'Apa tema hackathon kali ini?',
@@ -35,43 +37,43 @@ export default function HomePage() {
{
question: 'Apakah harus membentuk tim? Boleh solo?',
answer:
'Ya, peserta harus membentuk tim dengan maksimal 3 orang per tim.',
'Tidak boleh solo. Peserta harus membentuk tim yang terdiri dari 2 - 5 orang per tim. Peserta bisa mencari anggota melalui website ini atau WA Group Hackathon.',
},
{
question: 'Apakah boleh menggunakan AI (vibe coding)?',
answer:
'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development.',
'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development. Kami merekomendasikan menggunakan Kolosal.ai selama proses development (Free Credit)',
},
{
question: 'Apa project wajib di-deploy?',
answer:
'Ya, project harus di-deploy dan dapat diakses secara online untuk penilaian.',
'Diusahakan project agar di-deploy dan dapat diakses secara online untuk meningkatkan penilaian.',
},
{
question: 'Apakah peserta mendapatkan sertifikat?',
answer:
'Ya, semua peserta yang menyelesaikan hackathon akan mendapatkan sertifikat.',
'Kami akan memberikan sertifikat kepada tim yang submit project dan menyelesaikan rangkaian hackathon.',
},
{
question: 'Website error dan terjadi masalah?',
answer:
'Silakan hubungi kami melalui grup WA Hackathon atau email imphnen@gmail.com.',
'Jika menemukan masalah teknis, silakan hubungi kami melalui grup WA Hackathon.',
},
];
return (
<div className="min-h-screen bg-white">
{/* Navigation */}
<nav className="flex items-center justify-between px-4 md:px-8 py-4 border-b border-gray-200 bg-white sticky top-0 z-50">
<nav className="flex items-center justify-between px-4 md:px-8 py-4 border-b border-gray-200 bg-white sticky top-0 z-50 max-w-7xl mx-auto">
<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 text-blue-600">
<span className="text-lg md:text-xl font-bold text-primary-500">
Hackathon
</span>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center gap-6 lg:gap-8">
<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"
@@ -91,18 +93,27 @@ export default function HomePage() {
FAQ
</a>
<button
<Button
onClick={() => navigate('/auth/login')}
className="px-4 lg:px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm lg:text-base"
size="sm"
variant="bordered"
className="rounded-lg text-base"
>
Masuk
</Button>
<Button
onClick={() => navigate('/auth/signup')}
size="sm"
className="rounded-lg text-base"
>
Daftar Sekarang
</button>
</Button>
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2"
className="md:hidden p-2 cursor-pointer"
>
<svg
className="w-6 h-6"
@@ -123,22 +134,28 @@ export default function HomePage() {
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden border-b border-gray-200 bg-white">
<div className="flex flex-col gap-4 px-4 py-4">
<a href="#timeline" className="text-gray-600 hover:text-gray-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"
>
Timeline
</a>
<a href="#hadiah" className="text-gray-600 hover:text-gray-900">
<a
href="#hadiah"
className="ms-3 text-gray-600 hover:text-gray-900"
>
Hadiah
</a>
<a href="#faq" className="text-gray-600 hover:text-gray-900">
<a href="#faq" className="ms-3 text-gray-600 hover:text-gray-900">
FAQ
</a>
<a href="#masuk" className="text-gray-600 hover:text-gray-900">
<a href="#masuk" className="ms-3 text-gray-600 hover:text-gray-900">
Masuk
</a>
<button
onClick={() => navigate('/auth/login')}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center"
className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
>
Daftar Sekarang
</button>
@@ -147,76 +164,73 @@ export default function HomePage() {
)}
{/* Hero Section */}
<section className="flex flex-col items-center justify-center px-4 md:px-8 py-10 md:py-20 bg-gradient-to-b from-white to-gray-50">
<section className="flex flex-col items-center justify-center px-4 md:px-8 py-20 md:py-20 bg-linear-to-b from-white to-gray-50">
{/* Logos */}
<div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
<div className="flex items-center">
<span className="text-3xl md:text-5xl lg:text-6xl font-bold text-blue-600">
IMPHNEN
</span>
<img
src="images/imphnen-logo.svg"
alt="IMPHNEN"
className="h-12 md:h-16"
/>
</div>
<span className="text-3xl md:text-5xl lg:text-6xl font-bold text-gray-400">
×
</span>
<div className="flex items-center">
<span className="text-3xl md:text-5xl lg:text-6xl font-bold">
Kolosal
</span>
<img
src="images/sponsors/kolosal-logo_rlxbck.svg"
alt="Kolosal.ai"
className="h-8 md:h-12"
/>
</div>
</div>
{/* Title */}
<h1 className="text-5xl md:text-7xl lg:text-9xl font-bold text-gray-900 mb-6 md:mb-10 lg:mb-12 text-center">
<h1 className="text-h1 font-bold text-gray-900 mb-4 text-center">
Hackathon
</h1>
{/* Subtitle */}
<p className="text-xl md:text-3xl lg:text-4xl text-blue-600 font-semibold mb-6 md:mb-8 text-center px-4">
<p className="text-p1 text-primary-500 font-semibold mb-6 md:mb-8 text-center px-4">
"Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
</p>
{/* Description */}
<p className="text-base md:text-xl lg:text-2xl text-gray-600 max-w-xs md:max-w-2xl lg:max-w-3xl text-center mb-8 md:mb-12 px-4">
<p className="text-p3 text-gray-600 max-w-lg text-center mb-8 md:mb-12 px-4">
Kompetisi pengembangan teknologi untuk menciptakan
<br className="hidden md:block" /> solusi inovatif yang menghadirkan
dampak nyata
</p>
{/* Status */}
<div className="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-10 md:mb-16 text-sm md:text-lg lg:text-xl text-gray-600">
<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-2 md:gap-3">
<svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 20 20"
>
<circle cx="10" cy="10" r="8" fill="#10b981" />
</svg>
<Icon icon="streamline-plump:web" width="16" height="16" />
<span>Online</span>
</div>
<div className="flex items-center gap-2 md:gap-3 text-center">
<svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" />
</svg>
<Icon icon="heroicons:clock" width="16" height="16" />
<span>Pendaftaran hingga 30 November 2025</span>
</div>
</div>
{/* CTA Buttons */}
<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto px-4 md:px-0">
<button
onClick={() => navigate('/auth/login')}
className="w-full md:w-auto px-6 md:px-8 py-3 bg-blue-600 text-white text-base md:text-lg rounded-lg hover:bg-blue-700 transition-colors text-center font-semibold"
<div className="flex items-center gap-4 px-4">
<Button
onClick={() => navigate('/auth/signup')}
className="rounded-lg text-base max-h-auto"
>
Daftar Sekarang
</button>
<button className="w-full md:w-auto px-6 md:px-8 py-3 bg-white text-gray-900 text-base md:text-lg rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors text-center font-semibold">
</Button>
<a
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"
>
Gabung Grup WA Hackathon
</button>
</a>
</div>
{/* Scroll indicator */}
@@ -240,17 +254,17 @@ export default function HomePage() {
{/* About Section */}
<section className="py-16 md:py-24 px-4 md:px-8 bg-white">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-bold mb-6">
Tentang <span className="text-blue-600">Hackathon</span>
<h2 className="text-3xl md:text-5xl font-bold mb-10">
Tentang <span className="text-primary-500">Hackathon</span>
</h2>
<p className="text-lg md:text-xl text-gray-600 mb-6">
<p className="text-lg md:text-xl text-left md:text-center text-gray-600 mb-6">
<span className="font-semibold text-gray-900">Hackathon</span>{' '}
adalah kompetisi pengembangan teknologi yang mengajak talenta muda
untuk berkolaborasi dalam menciptakan solusi inovatif.
</p>
<p className="text-lg md:text-xl text-gray-600">
<p className="text-lg md:text-xl text-left md:text-center text-gray-600">
IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
<span className="font-semibold text-blue-600">
<span className="font-semibold text-primary-500">
"Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
</span>
.
@@ -260,66 +274,57 @@ export default function HomePage() {
{/* Prizes Section */}
<section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<div className="max-w-6xl mx-auto">
<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">
Hadiah <span className="text-blue-600">Menarik</span>
Hadiah <span className="text-primary-500">Menarik</span>
</h2>
<p className="text-xl md:text-2xl text-blue-600 font-semibold">
<p className="text-xl md:text-2xl text-primary-500 font-semibold">
Total Prize Pool Rp14.500.000
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{/* Prize 1 */}
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-blue-500 transform hover:scale-105 transition-transform">
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-primary-500 transition-colors">
<div className="flex justify-center mb-4">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<svg
className="w-8 h-8 text-blue-600"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<div className="w-16 h-16 bg-primary-100 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-2xl font-bold text-center mb-2">Juara 1</h3>
<p className="text-3xl font-bold text-blue-600 text-center">
<p className="text-3xl font-bold text-primary-500 text-center">
Rp6.000.000
</p>
</div>
{/* Prize 2 */}
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 transform hover:scale-105 transition-transform">
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-gray-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">
<svg
className="w-8 h-8 text-gray-600"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<Icon
icon="ic:round-star"
className="h-8 w-8 text-gray-600"
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">Juara 2</h3>
<p className="text-3xl font-bold text-blue-600 text-center">
<p className="text-3xl font-bold text-primary-500 text-center">
Rp4.000.000
</p>
</div>
{/* Prize 3 */}
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-orange-300 transform hover:scale-105 transition-transform">
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-orange-300 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">
<svg
className="w-8 h-8 text-orange-600"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<Icon
icon="ic:round-star"
className="h-8 w-8 text-orange-600"
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">Juara 3</h3>
@@ -329,16 +334,13 @@ export default function HomePage() {
</div>
{/* Special Prize */}
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-purple-300 transform hover:scale-105 transition-transform">
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-purple-300 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">
<svg
className="w-8 h-8 text-purple-600"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<Icon
icon="ic:round-star"
className="h-8 w-8 text-purple-600"
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">
@@ -357,22 +359,22 @@ export default function HomePage() {
<div className="max-w-4xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
Timeline <span className="text-blue-600">Acara</span>
Timeline <span className="text-primary-500">Acara</span>
</h2>
<p className="text-lg text-gray-600">
Jadwal lengkap pelaksanaan hackathon
</p>
</div>
<div className="space-y-8">
<div>
{/* Timeline Item 1 */}
<div className="flex gap-6">
<div className="flex flex-col items-center">
<div className="w-4 h-4 bg-blue-600 rounded-full"></div>
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
<div className="w-0.5 h-full bg-gray-300"></div>
</div>
<div className="flex-1 pb-8">
<p className="text-blue-600 font-semibold mb-2">
<p className="text-primary-500 font-semibold mb-2">
30 November 2025
</p>
<h3 className="text-xl font-bold mb-2">Penutupan Registrasi</h3>
@@ -385,11 +387,11 @@ export default function HomePage() {
{/* Timeline Item 2 */}
<div className="flex gap-6">
<div className="flex flex-col items-center">
<div className="w-4 h-4 bg-blue-600 rounded-full"></div>
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
<div className="w-0.5 h-full bg-gray-300"></div>
</div>
<div className="flex-1 pb-8">
<p className="text-blue-600 font-semibold mb-2">
<p className="text-primary-500 font-semibold mb-2">
30 November 2025
</p>
<h3 className="text-xl font-bold mb-2">Technical Meeting</h3>
@@ -403,11 +405,11 @@ export default function HomePage() {
{/* Timeline Item 3 */}
<div className="flex gap-6">
<div className="flex flex-col items-center">
<div className="w-4 h-4 bg-blue-600 rounded-full"></div>
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
<div className="w-0.5 h-full bg-gray-300"></div>
</div>
<div className="flex-1 pb-8">
<p className="text-blue-600 font-semibold mb-2">
<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>
@@ -420,11 +422,11 @@ export default function HomePage() {
{/* Timeline Item 4 */}
<div className="flex gap-6">
<div className="flex flex-col items-center">
<div className="w-4 h-4 bg-blue-600 rounded-full"></div>
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
<div className="w-0.5 h-full bg-gray-300"></div>
</div>
<div className="flex-1 pb-8">
<p className="text-blue-600 font-semibold mb-2">
<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>
@@ -437,10 +439,10 @@ export default function HomePage() {
{/* Timeline Item 5 */}
<div className="flex gap-6">
<div className="flex flex-col items-center">
<div className="w-4 h-4 bg-blue-600 rounded-full"></div>
<div className="w-4 h-4 bg-primary-500 rounded-full"></div>
</div>
<div className="flex-1">
<p className="text-blue-600 font-semibold mb-2">
<p className="text-primary-500 font-semibold mb-2">
15 Desember 2025
</p>
<h3 className="text-xl font-bold mb-2">Pengumuman & Final</h3>
@@ -455,41 +457,47 @@ export default function HomePage() {
{/* Judges Section */}
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="md:max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
Dewan <span className="text-blue-600">Juri</span>
Dewan <span className="text-primary-500">Juri</span>
</h2>
<p className="text-lg text-gray-600">
Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<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="bg-white rounded-xl p-8 shadow-lg text-center">
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
<h3 className="text-xl font-bold mb-1">
<div className="flex flex-col justify-between bg-white rounded-xl p-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">
Alifais Farrel Ramdhani
</h3>
<p className="text-blue-600 font-semibold mb-1">CTO</p>
<p className="text-gray-600">Kolosal.ai</p>
<div>
<p className="text-primary-500 font-semibold mb-1">CTO</p>
<p className="text-gray-600">Kolosal.ai</p>
</div>
</div>
{/* Judge 2 */}
<div className="bg-white rounded-xl p-8 shadow-lg text-center">
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
<h3 className="text-xl font-bold mb-1">Anka Tama</h3>
<p className="text-blue-600 font-semibold mb-1">Admin</p>
<p className="text-gray-600">IMPHNEN</p>
<div className="flex flex-col justify-between bg-white rounded-xl p-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>
<p className="text-primary-500 font-semibold mb-1">Admin</p>
<p className="text-gray-600">IMPHNEN</p>
</div>
</div>
{/* Judge 3 */}
<div className="bg-white rounded-xl p-8 shadow-lg text-center">
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
<h3 className="text-xl font-bold mb-1">Hafid Nur</h3>
<p className="text-blue-600 font-semibold mb-1">Moderator</p>
<p className="text-gray-600">IMPHNEN</p>
<div className="flex flex-col justify-between bg-white rounded-xl p-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>
<p className="text-primary-500 font-semibold mb-1">Moderator</p>
<p className="text-gray-600">IMPHNEN</p>
</div>
</div>
</div>
</div>
@@ -499,7 +507,7 @@ export default function HomePage() {
<section id="faq" className="py-16 md:py-24 px-4 md:px-8 bg-white">
<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-blue-600">
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-primary-500">
FAQ
</h2>
<p className="text-lg text-gray-600">
@@ -512,13 +520,13 @@ export default function HomePage() {
<div key={index} className="border border-gray-200 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"
className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors cursor-pointer"
>
<span className="font-semibold text-gray-900">
{faq.question}
</span>
<svg
className={`w-5 h-5 text-blue-600 transform transition-transform ${
className={`w-5 h-5 text-primary-500 transform transition-transform ${
openFaq === index ? 'rotate-180' : ''
}`}
fill="none"
@@ -546,16 +554,25 @@ export default function HomePage() {
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<div className="max-w-6xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
Sponsor & <span className="text-blue-600">Partner</span>
Sponsor & <span className="text-primary-500">Partner</span>
</h2>
<p className="text-lg text-gray-600 mb-12">
<p className="text-lg text-gray-600 mb-8">
Acara ini sepenuhnya disponsori oleh
</p>
<div className="flex justify-center">
<div className="bg-white rounded-xl p-8 shadow-lg inline-block">
<span className="text-3xl font-bold">Kolosal</span>
</div>
<a
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"
>
<img
src="images/sponsors/kolosal-logo_rlxbck.svg"
alt="Kolosal.ai"
className="h-12 md:h-16"
/>
</a>
</div>
</div>
</section>
@@ -563,34 +580,39 @@ export default function HomePage() {
{/* CTA Section */}
<section
id="masuk"
className="py-16 md:py-24 px-4 md:px-8 bg-gradient-to-b from-white to-blue-50"
className="py-16 md:py-24 px-4 md:px-8 bg-linear-to-b from-white to-blue-50"
>
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-bold mb-6">
Segera Daftarkan <span className="text-blue-600">Timmu!</span>
Segera Daftarkan <span className="text-primary-500">Timmu!</span>
</h2>
<p className="text-lg md:text-xl text-gray-600 mb-8">
<p className="text-lg md:text-xl text-left md:text-center text-gray-600 mb-8">
Jangan lewatkan kesempatan emas untuk bersaing dengan developer
terbaik,
<br className="hidden md:block" />
belajar dari para ahli, dan memenangkan hadiah jutaan rupiah!
<br className="hidden md:block" /> belajar dari para ahli, dan
memenangkan hadiah jutaan rupiah!
</p>
<div className="flex flex-col md:flex-row gap-4 justify-center">
<button
onClick={() => navigate('/auth/login')}
className="px-8 py-3 bg-blue-600 text-white text-lg rounded-lg hover:bg-blue-700 transition-colors font-semibold"
onClick={() => navigate('/auth/signup')}
className="px-8 py-3 bg-primary-500 text-white text-lg rounded-lg hover:bg-primary-700 transition-colors font-semibold cursor-pointer"
>
Daftar Sekarang
</button>
<button 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">
<a
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"
>
Gabung Grup WA Hackathon
</button>
</a>
</div>
<p className="text-sm text-gray-500 mt-6">
Pendaftaran ditutup pada{' '}
<span className="text-blue-600 font-semibold">
<span className="text-primary-500 font-semibold">
30 November 2025
</span>
</p>
@@ -615,42 +637,53 @@ export default function HomePage() {
masa depan.
</p>
<div className="flex gap-4 mt-4">
<a
href="#"
className="text-gray-400 hover:text-white transition-colors"
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
<div className="flex gap-4">
<a
href="https://fb.com/groups/programmerhandal"
className="text-gray-400 hover:text-accent transition-colors"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
>
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-white transition-colors"
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
<Icon icon="ic:baseline-facebook" className="w-6 h-6" />
</a>
<a
href="https://www.instagram.com/imphnen.dev"
className="text-gray-400 hover:text-accent transition-colors"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
>
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z" />
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-white transition-colors"
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
<Icon icon="mdi:instagram" className="w-6 h-6" />
</a>
<a
href="https://www.linkedin.com/company/imphnen"
className="text-gray-400 hover:text-accent transition-colors"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.840 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<Icon icon="mdi:linkedin" className="w-6 h-6" />
</a>
<a
href="https://www.tiktok.com/@imphnen"
className="text-gray-400 hover:text-accent transition-colors"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
>
<Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
</a>
<a
href="https://github.com/IMPHNEN"
className="text-gray-400 hover:text-accent transition-colors"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
>
<Icon icon="mdi:github" className="w-6 h-6" />
</a>
</div>
</div>
</div>
@@ -681,7 +714,7 @@ export default function HomePage() {
</li>
<li>
<a
href="#masuk"
href="/auth/signup"
className="hover:text-white transition-colors"
>
Daftar
@@ -693,54 +726,46 @@ export default function HomePage() {
{/* Contact */}
<div>
<h3 className="font-bold text-lg mb-4">Contact</h3>
<ul className="space-y-2 text-gray-400">
<li className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
<ul className="space-y-2 text-gray-400 text-sm">
<li className="flex items-start gap-2">
<Icon
icon="material-symbols:mail-outline-rounded"
className="min-w-5 min-h-5 mt-0.5"
/>
<a
href="mailto:imphnen@gmail.com"
className="hover:text-white transition-colors"
>
<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>
imphnen@gmail.com
imphnen@gmail.com
</a>
</li>
<li className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
<li className="flex items-start gap-2">
<Icon
icon="solar:phone-linear"
className="min-w-5 min-h-5 mt-0.5"
/>
<a
href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
className="hover:text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
/>
</svg>
WA Group Hackathon
WA Group Hackathon
</a>
</li>
<li className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
<li className="flex items-start gap-2">
<Icon
icon="streamline-plump:web"
className="min-w-5 min-h-5 mt-0.5"
/>
<a
href="https://imphnen.dev"
className="hover:text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
/>
</svg>
IMPHNEN.dev
IMPHNEN.dev
</a>
</li>
</ul>
</div>
apps/hackathon/src/index.css
+2 -2
View File
@@ -130,7 +130,7 @@
html {
font-family: 'Bai Jamjuree', sans-serif;
font-weight: 400;
font-size: 12px;
font-size: 16px;
line-height: 1.2;
}
}
}