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

chore: update landing page

Browse Source
This commit is contained in:
Hafid Nur
2025-11-25 18:29:04 +07:00
parent c6c0d6fded
commit f40e0e35b9
2 changed files with 190 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/index.html
-2
View File
@@ -28,8 +28,6 @@
property="og:description"
content="Total hadiah Rp14.500.000! Daftar sekarang dan wujudkan inovasi AI-mu untuk membantu usaha lokal."
/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://hackathon.imphnen.dev/" />
<meta
apps/hackathon/src/app/page.tsx
+63 -50
View File
@@ -64,14 +64,18 @@ export default function HomePage() {
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 max-w-7xl mx-auto">
<div id="#top" className="hidden"></div>
<nav className="border-b border-gray-200 bg-white 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 text-primary-500">
<a
href="#top"
className="text-lg md:text-xl font-bold text-primary-500 hover:cursor-pointer"
>
Hackathon
</span>
</a>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
<a
@@ -92,7 +96,6 @@ export default function HomePage() {
>
FAQ
</a>
<Button
onClick={() => navigate('/auth/login')}
size="sm"
@@ -109,7 +112,6 @@ export default function HomePage() {
Daftar Sekarang
</Button>
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -129,6 +131,7 @@ export default function HomePage() {
/>
</svg>
</button>
</div>
</nav>
{/* Mobile Menu */}
@@ -164,7 +167,19 @@ export default function HomePage() {
)}
{/* Hero Section */}
<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">
<section className="relative w-full overflow-hidden py-20">
<div className="absolute inset-0 overflow-hidden">
<div
className="absolute top-1/4 -left-20 w-100 h-100 rounded-full bg-linear-to-r from-primary/20 to-blue-400/20 blur-3xl"
style={{ transform: 'translate(10px, -5px)', opacity: 0.9 }}
></div>
<div
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>
<div className="mx-auto container px-4 relative flex flex-col items-center">
{/* 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">
@@ -174,7 +189,7 @@ export default function HomePage() {
className="h-12 md:h-16"
/>
</div>
<span className="text-3xl md:text-5xl lg:text-6xl font-bold text-gray-400">
<span className="text-3xl md:text-5xl font-bold text-gray-400">
×
</span>
<div className="flex items-center">
@@ -185,24 +200,19 @@ export default function HomePage() {
/>
</div>
</div>
{/* Title */}
<h1 className="text-h1 font-bold text-gray-900 mb-4 text-center">
Hackathon
</h1>
{/* Subtitle */}
<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-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 className="text-p3 text-gray-600 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-2 md:gap-3">
@@ -214,7 +224,6 @@ export default function HomePage() {
<span>Pendaftaran hingga 30 November 2025</span>
</div>
</div>
{/* CTA Buttons */}
<div className="flex items-center gap-4 px-4">
<Button
@@ -232,7 +241,6 @@ export default function HomePage() {
Gabung Grup WA Hackathon
</a>
</div>
{/* Scroll indicator */}
<div className="mt-12 md:mt-20">
<svg
@@ -249,6 +257,7 @@ export default function HomePage() {
/>
</svg>
</div>
</div>
</section>
{/* About Section */}
@@ -257,12 +266,12 @@ export default function HomePage() {
<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-left md:text-center text-gray-600 mb-6">
<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>{' '}
adalah kompetisi pengembangan teknologi yang mengajak talenta muda
untuk berkolaborasi dalam menciptakan solusi inovatif.
</p>
<p className="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">
IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
<span className="font-semibold text-primary-500">
"Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
@@ -276,17 +285,17 @@ export default function HomePage() {
<section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<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">
<h2 className="text-3xl md:text-5xl font-bold mb-4 font-bai-jamjuree">
Hadiah <span className="text-primary-500">Menarik</span>
</h2>
<p className="text-xl md:text-2xl text-primary-500 font-semibold">
<p className="text-xl md:text-2xl text-primary-500 font-semibold font-sans">
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-gray-300 hover:border-primary-500 transition-colors">
<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="flex justify-center mb-4">
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
<Icon
@@ -295,14 +304,14 @@ export default function HomePage() {
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">Juara 1</h3>
<p className="text-3xl font-bold text-primary-500 text-center">
<h3 className="text-xl font-bold text-center mb-2">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 p-8 shadow-lg border-2 border-gray-300 hover:border-gray-500 transition-colors">
<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="flex justify-center mb-4">
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
<Icon
@@ -311,14 +320,14 @@ export default function HomePage() {
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">Juara 2</h3>
<p className="text-3xl font-bold text-primary-500 text-center">
<h3 className="text-xl font-bold text-center mb-2">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 p-8 shadow-lg border-2 border-gray-300 hover:border-orange-300 transition-colors">
<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="flex justify-center mb-4">
<div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
<Icon
@@ -327,14 +336,14 @@ export default function HomePage() {
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">Juara 3</h3>
<p className="text-3xl font-bold text-orange-600 text-center">
<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">
Rp2.500.000
</p>
</div>
{/* Special Prize */}
<div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 hover:border-purple-300 transition-colors">
<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="flex justify-center mb-4">
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
<Icon
@@ -343,10 +352,10 @@ export default function HomePage() {
/>
</div>
</div>
<h3 className="text-2xl font-bold text-center mb-2">
<h3 className="text-xl font-bold text-center mb-2">
Juara Kategori Lainnya
</h3>
<p className="text-3xl font-bold text-purple-600 text-center">
<p className="text-2xl font-bold text-purple-600 text-center font-sans">
Rp2.000.000
</p>
</div>
@@ -356,8 +365,8 @@ export default function HomePage() {
{/* Timeline Section */}
<section id="timeline" 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">
<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">
Timeline <span className="text-primary-500">Acara</span>
</h2>
@@ -456,9 +465,9 @@ export default function HomePage() {
</section>
{/* Judges Section */}
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 font-sans">
<div className="md:max-w-6xl mx-auto">
<div className="text-center mb-12">
<div className="text-center mb-12 font-bai-jamjuree">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
Dewan <span className="text-primary-500">Juri</span>
</h2>
@@ -469,7 +478,7 @@ export default function HomePage() {
<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 p-8 shadow-lg text-center">
<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">
Alifais Farrel Ramdhani
@@ -481,7 +490,7 @@ export default function HomePage() {
</div>
{/* Judge 2 */}
<div className="flex flex-col justify-between bg-white rounded-xl p-8 shadow-lg text-center">
<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>
@@ -491,7 +500,7 @@ export default function HomePage() {
</div>
{/* Judge 3 */}
<div className="flex flex-col justify-between bg-white rounded-xl p-8 shadow-lg text-center">
<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>
@@ -515,7 +524,7 @@ export default function HomePage() {
</p>
</div>
<div className="space-y-4">
<div className="space-y-4 font-sans">
{faqs.map((faq, index) => (
<div key={index} className="border border-gray-200 rounded-lg">
<button
@@ -551,7 +560,7 @@ export default function HomePage() {
</section>
{/* Sponsors Section */}
<section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
<section className="py-20 md:py-28 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-primary-500">Partner</span>
@@ -580,10 +589,10 @@ export default function HomePage() {
{/* CTA Section */}
<section
id="masuk"
className="py-16 md:py-24 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"
>
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-bold mb-6">
<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">
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">
@@ -620,12 +629,12 @@ export default function HomePage() {
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-12 px-4 md:px-8">
<footer className="bg-gray-900 text-white py-12 px-4 md:px-8 font-sans">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
{/* Brand */}
<div>
<div className="flex items-center gap-2 mb-4">
<div className="flex items-center gap-2 mb-4 font-bai-jamjuree">
<span className="text-2xl font-bold">IMPHNEN</span>
<span className="text-2xl font-bold text-blue-500">
Hackathon
@@ -689,7 +698,9 @@ export default function HomePage() {
{/* Quick Links */}
<div>
<h3 className="font-bold text-lg mb-4">Quick Links</h3>
<h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
Quick Links
</h3>
<ul className="space-y-2 text-gray-400">
<li>
<a
@@ -725,7 +736,9 @@ export default function HomePage() {
{/* Contact */}
<div>
<h3 className="font-bold text-lg mb-4">Contact</h3>
<h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
Contact
</h3>
<ul className="space-y-2 text-gray-400 text-sm">
<li className="flex items-start gap-2">
<Icon