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

* 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
2025-11-25 15:47:55 +07:00
parent d9c4217fd3
commit a2cf67d210
7 changed files with 445 additions and 364 deletions
@@ -2,12 +2,40 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Hackathon</title>
+    <title>IMPHNEN x Kolosal.ai Hackathon 2025</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
+    <meta
+      name="description"
+      content="Ikuti IMPHNEN x Kolosal.ai Hackathon 2025! Kompetisi coding online gratis dengan total hadiah Rp14.500.000. Tema: Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif."
+    />
+    <meta
+      name="keywords"
+      content="hackathon, lomba coding, kompetisi it, imphnen, kolosal.ai, ai hackathon, lomba programming 2025"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/images/imphnen-logo-simple.svg"
+    />
    <link rel="stylesheet" href="/src/index.css" />
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://hackathon.imphnen.dev/" />
+    <meta property="og:title" content="IMPHNEN x Kolosal.ai Hackathon 2025" />
+    <meta
+      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
+      property="twitter:title"
+      content="IMPHNEN x Kolosal.ai Hackathon 2025"
+    />
  </head>
  <body>
    <div id="root"></div>
@@ -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 16.7352 10.5295 16.8165L17.6956 23.8371H25.8608C25.8683 23.78 25.8804 23.7233 25.903 23.6699C25.9358 23.5923 25.9831 23.5211 26.0434 23.4614L14.8659 12.5111ZM10.3307 8.06807C10.2184 8.15365 10.0801 8.20766 9.92678 8.20774C9.80008 8.20774 9.68295 8.17075 9.58225 8.1104L5.61305 12L9.65353 15.9584C9.73677 15.9215 9.82951 15.9012 9.92678 15.9012C10.0509 15.9013 10.1655 15.9372 10.2648 15.9954L13.9381 12.3968C13.8511 12.2868 13.7977 12.1499 13.7977 12C13.7978 11.8498 13.8518 11.7132 13.9392 11.6032L10.3307 8.06807ZM10.4906 7.22053C10.5522 7.3192 10.5899 7.4339 10.5899 7.55806C10.5899 7.70823 10.5357 7.84479 10.4485 7.95485L14.0558 11.4889C14.1682 11.4034 14.3076 11.3503 14.4609 11.3503C14.6139 11.3503 14.7536 11.4026 14.8659 11.4879L26.0434 0.537519C25.9835 0.477938 25.9356 0.407383 25.903 0.33013C25.8804 0.276608 25.8682 0.220166 25.8608 0.162949H17.6956L10.4906 7.22053Z" fill="#0D0E0F"/>
+<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.4697V11.4299C76.5681 10.9337 76.4271 10.5492 76.1452 10.2765C75.867 10.0038 75.4516 9.86742 74.8991 9.86742C74.3237 9.86742 73.8702 9.99432 73.5387 10.2481C73.211 10.4981 72.9843 10.7765 72.8585 11.0833L71.2524 10.7197C71.4429 10.1894 71.7211 9.76136 72.0869 9.4356C72.4565 9.10606 72.8814 8.86742 73.3615 8.71969C73.8417 8.56818 74.3466 8.49242 74.8762 8.49242C75.2268 8.49242 75.5983 8.53409 75.9908 8.61742C76.3871 8.69697 76.7568 8.84469 77.0997 9.0606C77.4465 9.27651 77.7304 9.58523 77.9514 9.98674C78.1724 10.3845 78.2829 10.9015 78.2829 11.5379V17.3333H76.6139V16.1401H76.5453C76.4348 16.3598 76.269 16.5758 76.048 16.7879C75.827 17 75.5431 17.1761 75.1963 17.3163C74.8496 17.4564 74.4342 17.5265 73.9503 17.5265ZM74.3218 16.1629C74.7943 16.1629 75.1982 16.0701 75.5336 15.8845C75.8727 15.6989 76.1299 15.4564 76.3052 15.1572C76.4843 14.8542 76.5738 14.5303 76.5738 14.1856V13.0606C76.5129 13.1212 76.3947 13.178 76.2195 13.2311C76.048 13.2803 75.8517 13.3239 75.6307 13.3617C75.4097 13.3958 75.1944 13.428 74.9848 13.4583C74.7753 13.4848 74.6 13.5076 74.459 13.5265C74.1275 13.5682 73.8245 13.6383 73.5502 13.7367C73.2796 13.8352 73.0624 13.9773 72.8986 14.1629C72.7385 14.3447 72.6585 14.5871 72.6585 14.8901C72.6585 15.3106 72.8147 15.6288 73.1272 15.8447C73.4397 16.0568 73.8379 16.1629 74.3218 16.1629Z" fill="#0D0E0F"/>
+<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 69.632 15.7992 69.3272 16.2083C69.0262 16.6136 68.6051 16.9318 68.064 17.1629C67.5267 17.3939 66.9037 17.5095 66.1949 17.5095C65.2118 17.5095 64.4097 17.3011 63.7885 16.8845C63.1674 16.464 62.7864 15.8674 62.6454 15.0947L64.2972 14.8447C64.4001 15.2727 64.6116 15.5966 64.9317 15.8163C65.2518 16.0322 65.6691 16.1401 66.1835 16.1401C66.7436 16.1401 67.1914 16.0246 67.5267 15.7936C67.862 15.5587 68.0297 15.2727 68.0297 14.9356C68.0297 14.6629 67.9268 14.4337 67.721 14.2481C67.5191 14.0625 67.2085 13.9223 66.7894 13.8276L65.3032 13.5038C64.484 13.3182 63.8781 13.0227 63.4856 12.6174C63.0969 12.2121 62.9026 11.6989 62.9026 11.0776C62.9026 10.5625 63.0474 10.1117 63.337 9.72538C63.6266 9.33901 64.0267 9.03788 64.5373 8.82197C65.0479 8.60227 65.6328 8.49242 66.2921 8.49242C67.2409 8.49242 67.9878 8.69697 68.5327 9.10606C69.0776 9.51136 69.4377 10.0549 69.613 10.7367Z" fill="#0D0E0F"/>
+<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.3731C60.5468 16.0473 60.0705 16.572 59.457 16.947C58.8435 17.322 58.1252 17.5095 57.3021 17.5095ZM57.3078 16.0833C57.8413 16.0833 58.2833 15.9432 58.6339 15.6629C58.9845 15.3826 59.2436 15.0095 59.4112 14.5436C59.5827 14.0776 59.6685 13.5644 59.6685 13.0038C59.6685 12.447 59.5827 11.9356 59.4112 11.4697C59.2436 11 58.9845 10.6231 58.6339 10.339C58.2833 10.0549 57.8413 9.91288 57.3078 9.91288C56.7705 9.91288 56.3247 10.0549 55.9703 10.339C55.6197 10.6231 55.3587 11 55.1872 11.4697C55.0196 11.9356 54.9357 12.447 54.9357 13.0038C54.9357 13.5644 55.0196 14.0776 55.1872 14.5436C55.3587 15.0095 55.6197 15.3826 55.9703 15.6629C56.3247 15.9432 56.7705 16.0833 57.3078 16.0833Z" fill="#0D0E0F"/>
+<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.3767 16.0473 46.9004 16.572 46.2869 16.947C45.6734 17.322 44.9551 17.5095 44.132 17.5095ZM44.1377 16.0833C44.6712 16.0833 45.1132 15.9432 45.4638 15.6629C45.8144 15.3826 46.0735 15.0095 46.2412 14.5436C46.4126 14.0776 46.4984 13.5644 46.4984 13.0038C46.4984 12.447 46.4126 11.9356 46.2412 11.4697C46.0735 11 45.8144 10.6231 45.4638 10.339C45.1132 10.0549 44.6712 9.91288 44.1377 9.91288C43.6004 9.91288 43.1546 10.0549 42.8002 10.339C42.4496 10.6231 42.1886 11 42.0171 11.4697C41.8495 11.9356 41.7656 12.447 41.7656 13.0038C41.7656 13.5644 41.8495 14.0776 42.0171 14.5436C42.1886 15.0095 42.4496 15.3826 42.8002 15.6629C43.1546 15.9432 43.6004 16.0833 44.1377 16.0833Z" fill="#0D0E0F"/>
+<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-.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>
@@ -130,7 +130,7 @@
  html {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
-    font-size: 12px;
+    font-size: 16px;
    line-height: 1.2;
  }
-}
+}