feat: update landing page

2025-11-25 15:05:37 +07:00
1 parent bd052f4866
commit aeb23a7255
@@ -0,0 +1,9 @@
+<svg width="138" height="52" viewBox="0 0 138 52" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="137.505" height="51.7538" fill="url(#pattern0_164_316)"/>
+<defs>
+<pattern id="pattern0_164_316" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_164_316" transform="matrix(0.000440723 0 0 0.00117096 -0.173204 -1.3185)"/>
+</pattern>
+<image id="image0_164_316" width="3000" height="3000" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAu4CAYAAABxFfV5AAAACXBIWXMAAC4jAAAuIwF4pT92AAX6AElEQVR4nOzaMQEAIAzAsIF/z0MGPRIFFdCzuwMAAAAAAAAAAAAAAL/d3wEAAAAAAAAAAAAAADBjcAcAAAAAAAAAAAAAIMLgDgAAAAAAAAAAAABAgsEdAAAAAAAAAAAAAIAEgzsAAAAAAAAAAAAAAAkGdwAAAAAAAAAAAAAAEgzuAAAAAAAAAAAAAAAkGNwBAAAAAAAAAAAAAEgwuAMAAAAAAAAAAAAAkGBwBwAAAAAAAAAAAAAgweAOAAAAAAAAAAAAAECCwR0AAAAAAAAAAAAAgASDOwAAAAAAAAAAAAAACQZ3AAAALine truncated
+</defs>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="317" height="170" viewBox="0 0 317 170" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="317" height="169.613" fill="url(#pattern0_164_317)"/>
+<defs>
+<pattern id="pattern0_164_317" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_164_317" transform="scale(0.00184502 0.00344828)"/>
+</pattern>
+<image id="image0_164_317" width="542" height="290" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh4AAAEiCAYAAAC2k9sBAAAABGdBTUEAALGPC/xhBQAACklpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAAEiJnVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKLine truncated
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9814 11.6032C15.0691 11.7133 15.1239 11.8495 15.124 12C15.124 12.1501 15.0698 12.2867 14.9825 12.3968L26.8264 24H7.79044L7.76667 23.9757L0.0248413 16.3911L0 16.3679V7.63213L0.0248413 7.60885L7.76667 0.0243365L7.79044 0H26.8264L14.9814 11.6032ZM14.8659 12.5111C14.7535 12.5968 14.6143 12.6507 14.4609 12.6507C14.3071 12.6507 14.1673 12.5971 14.0548 12.5111L10.3977 16.0938C10.5164 16.2113 10.5899 16.3726 10.5899 16.5509C10.5899 16.6459 10.5668 16Line truncated
+<path d="M82 5.69697V17.3333H80.291V5.69697H82Z" fill="#0D0E0F"/>
+<path d="M73.9503 17.5265C73.3939 17.5265 72.8909 17.4242 72.4413 17.2197C71.9916 17.0114 71.6353 16.7102 71.3724 16.3163C71.1133 15.9223 70.9837 15.4394 70.9837 14.8674C70.9837 14.375 71.079 13.9697 71.2695 13.6515C71.4601 13.3333 71.7173 13.0814 72.0412 12.8958C72.3651 12.7102 72.7271 12.5701 73.1272 12.4754C73.5273 12.3807 73.935 12.3087 74.3504 12.2595C74.8762 12.1989 75.303 12.1496 75.6307 12.1117C75.9584 12.0701 76.1966 12.0038 76.3452 11.9129C76.4938 11.822 76.5681 11.6742 76.5681 11.469Line truncated
+<path d="M69.613 10.7367L68.064 11.0095C67.9992 10.8125 67.8963 10.625 67.7553 10.447C67.6182 10.2689 67.4314 10.1231 67.1952 10.0095C66.9589 9.89583 66.6636 9.83901 66.3092 9.83901C65.8253 9.83901 65.4214 9.94697 65.0975 10.1629C64.7736 10.375 64.6116 10.6496 64.6116 10.9867C64.6116 11.2784 64.7202 11.5133 64.9374 11.6913C65.1546 11.8693 65.5052 12.0151 65.9891 12.1288L67.3838 12.447C68.1916 12.6326 68.7937 12.9186 69.19 13.3049C69.5863 13.6913 69.7845 14.1932 69.7845 14.8106C69.7845 15.3333 6Line truncated
+<path d="M57.3021 17.5095C56.479 17.5095 55.7607 17.322 55.1472 16.947C54.5337 16.572 54.0574 16.0473 53.7182 15.3731C53.3791 14.6989 53.2095 13.911 53.2095 13.0095C53.2095 12.1042 53.3791 11.3125 53.7182 10.6345C54.0574 9.95644 54.5337 9.42992 55.1472 9.05492C55.7607 8.67992 56.479 8.49242 57.3021 8.49242C58.1252 8.49242 58.8435 8.67992 59.457 9.05492C60.0705 9.42992 60.5468 9.95644 60.8859 10.6345C61.2251 11.3125 61.3946 12.1042 61.3946 13.0095C61.3946 13.911 61.2251 14.6989 60.8859 15.3731C6Line truncated
+<path d="M51.573 5.69697V17.3333H49.864V5.69697H51.573Z" fill="#0D0E0F"/>
+<path d="M44.132 17.5095C43.3089 17.5095 42.5906 17.322 41.9771 16.947C41.3636 16.572 40.8873 16.0473 40.5482 15.3731C40.209 14.6989 40.0395 13.911 40.0395 13.0095C40.0395 12.1042 40.209 11.3125 40.5482 10.6345C40.8873 9.95644 41.3636 9.42992 41.9771 9.05492C42.5906 8.67992 43.3089 8.49242 44.132 8.49242C44.9551 8.49242 45.6734 8.67992 46.2869 9.05492C46.9004 9.42992 47.3767 9.95644 47.7158 10.6345C48.055 11.3125 48.2245 12.1042 48.2245 13.0095C48.2245 13.911 48.055 14.6989 47.7158 15.3731C47.3Line truncated
+<path d="M30.7951 17.3333V5.69697H32.5613V11.2538H32.7042L37.6141 5.69697H39.8376L35.1163 10.9356L39.8547 17.3333H37.7284L33.9445 12.1345L32.5613 13.714V17.3333H30.7951Z" fill="#0D0E0F"/>
+</svg>
@@ -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-.0Line truncated
-                  </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.404Line truncated
-                  </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>
@@ -130,7 +130,7 @@
  html {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
-    font-size: 12px;
+    font-size: 16px;
    line-height: 1.2;
  }
-}
+}