From a0a38df7081859e9df4ef5f3837b47da41f8b2a1 Mon Sep 17 00:00:00 2001
From: Kayin <34983642+kayinleong@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:06:22 +0800
Subject: [PATCH] Minor updates

---
 kitahack-frontend/src/app/app.routes.ts       | 16 +++--
 .../attaches/attaches.component.html          |  2 +-
 .../check-list/check-list.component.html      |  3 +-
 .../app/components/code/code.component.html   |  2 +-
 .../delimiter/delimiter.component.html        |  2 +-
 .../components/header/header.component.html   |  2 +-
 .../app/components/image/image.component.html |  2 +-
 .../link-tool/link-tool.component.html        |  4 +-
 .../app/components/list/list.component.html   |  2 +-
 .../nested-list/nested-list.component.html    |  2 +-
 .../paragraph/paragraph.component.html        | 10 +--
 .../personality/personality.component.html    |  2 +-
 .../app/components/quote/quote.component.html |  2 +-
 .../app/components/table/table.component.html |  2 +-
 .../components/warning/warning.component.html |  2 +-
 .../app/layouts/navbar/navbar.component.html  | 67 ++++++++-----------
 .../src/app/pages/event/event.component.html  |  2 +-
 .../src/app/pages/event/event.component.ts    |  6 +-
 .../src/app/pages/event/event.routes.ts       | 13 ++--
 .../hero-section/hero-section.component.html  |  2 +-
 .../src/app/services/clientpage.service.ts    | 16 ++++-
 kitahack-frontend/src/index.html              | 36 +++++++++-
 22 files changed, 113 insertions(+), 84 deletions(-)

diff --git a/kitahack-frontend/src/app/app.routes.ts b/kitahack-frontend/src/app/app.routes.ts
index fb372d0..10c8b48 100644
--- a/kitahack-frontend/src/app/app.routes.ts
+++ b/kitahack-frontend/src/app/app.routes.ts
@@ -10,22 +10,24 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule)
+        loadChildren: () =>
+          import('./pages/home/home.module').then((m) => m.HomeModule),
       },
       {
         path: 'event',
-        loadChildren: () => import('./pages/event/event.module').then(m => m.EventModule)
-      }
-    ]
+        loadChildren: () =>
+          import('./pages/event/event.module').then((m) => m.EventModule),
+      },
+    ],
   },
   {
     path: '**',
     redirectTo: '',
-  }
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled' })],
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/kitahack-frontend/src/app/components/attaches/attaches.component.html b/kitahack-frontend/src/app/components/attaches/attaches.component.html
index 1521830..4fb5660 100644
--- a/kitahack-frontend/src/app/components/attaches/attaches.component.html
+++ b/kitahack-frontend/src/app/components/attaches/attaches.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <a href="{{value.file.url}}" target="_blank" rel="noopener noreferral" type="button" class="w-full h-full ">
     <div class="flex justify-center p-2 py-10 my-auto text-gray-900 transition duration-500 border-4 shadow-lg dark:text-white bg-gray-50 dark:bg-gray-600 rounded-xl border-r-google-red-500 border-l-google-blue-500 border-t-google-green-500 border-b-google-yellow-500 hover:text-white hover:font-bold hover:bg-gradient-to-r via-google-yellow-500 to-google-red-500 from-google-blue-500 ">
       <div class="me-2">
diff --git a/kitahack-frontend/src/app/components/check-list/check-list.component.html b/kitahack-frontend/src/app/components/check-list/check-list.component.html
index affac05..c016c53 100644
--- a/kitahack-frontend/src/app/components/check-list/check-list.component.html
+++ b/kitahack-frontend/src/app/components/check-list/check-list.component.html
@@ -1,5 +1,4 @@
-<section class="my-5">
-
+<section class="mt-5">
   <div *ngFor="let item of value" class="flex items-center mb-2">
     <input [checked]="item.checked" id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" disabled>
     <label for="default-checkbox" class="text-sm font-medium text-gray-900 ms-2 dark:text-gray-300">
diff --git a/kitahack-frontend/src/app/components/code/code.component.html b/kitahack-frontend/src/app/components/code/code.component.html
index 13390e6..ac6a575 100644
--- a/kitahack-frontend/src/app/components/code/code.component.html
+++ b/kitahack-frontend/src/app/components/code/code.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <pre class="line-numbers language-{{value.language}}">
 <code #codeEle class="language-{{value.language}} match-braces" data-prismjs-copy="copy">{{ value.code.trim() }}</code>
   </pre>
diff --git a/kitahack-frontend/src/app/components/delimiter/delimiter.component.html b/kitahack-frontend/src/app/components/delimiter/delimiter.component.html
index c244cda..ccd3b9e 100644
--- a/kitahack-frontend/src/app/components/delimiter/delimiter.component.html
+++ b/kitahack-frontend/src/app/components/delimiter/delimiter.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div class="flex justify-center gap-4">
     <div class="w-2 h-2 rounded-full bg-google-red-500"></div>
     <div class="w-2 h-2 rounded-full bg-google-blue-500"></div>
diff --git a/kitahack-frontend/src/app/components/header/header.component.html b/kitahack-frontend/src/app/components/header/header.component.html
index 1fc1b61..a38cb74 100644
--- a/kitahack-frontend/src/app/components/header/header.component.html
+++ b/kitahack-frontend/src/app/components/header/header.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <h1 [ngClass]="getHeaderLevel()" class="font-bold !font-[GoogleSans-Bold]">
     {{ value.text }}
   </h1>
diff --git a/kitahack-frontend/src/app/components/image/image.component.html b/kitahack-frontend/src/app/components/image/image.component.html
index 6571cbc..f646a0b 100644
--- a/kitahack-frontend/src/app/components/image/image.component.html
+++ b/kitahack-frontend/src/app/components/image/image.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div [ngClass]="withBackground ? 'py-5 bg-gray-400' : ''">
     <img src="{{url}}" alt="{{caption}}" [ngClass]="{
       'p-5 rounded-md border-2 border-gray-600': withBorder,
diff --git a/kitahack-frontend/src/app/components/link-tool/link-tool.component.html b/kitahack-frontend/src/app/components/link-tool/link-tool.component.html
index e1b4c26..ff76721 100644
--- a/kitahack-frontend/src/app/components/link-tool/link-tool.component.html
+++ b/kitahack-frontend/src/app/components/link-tool/link-tool.component.html
@@ -1,5 +1,5 @@
-<section class="my-5 text-center">
-  <a href="{{ link !== undefined ? link : '#' }}" target="_blank" rel="noreferral noopener" class="px-3 py-2 duration-200 rounded-md hover:bg-google-blue-500/10 text-google-blue-500">
+<section class="px-3 py-2 mt-5 text-center duration-200 rounded-md hover:bg-google-blue-500/10 text-google-blue-500">
+  <a href="{{ link !== undefined ? link : '#' }}" target="_blank" rel="noreferral noopener">
     {{ title !== undefined ? title : "Title not available" }}
   </a>
 </section>
diff --git a/kitahack-frontend/src/app/components/list/list.component.html b/kitahack-frontend/src/app/components/list/list.component.html
index a66dc87..efbe1ea 100644
--- a/kitahack-frontend/src/app/components/list/list.component.html
+++ b/kitahack-frontend/src/app/components/list/list.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <ul *ngIf="style === 'unordered'" class="max-w-md ml-5 space-y-1 text-gray-500 list-disc dark:text-gray-400">
     <li *ngFor="let text of value">
       {{text}}
diff --git a/kitahack-frontend/src/app/components/nested-list/nested-list.component.html b/kitahack-frontend/src/app/components/nested-list/nested-list.component.html
index 449fa3f..67169a4 100644
--- a/kitahack-frontend/src/app/components/nested-list/nested-list.component.html
+++ b/kitahack-frontend/src/app/components/nested-list/nested-list.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div *ngIf="style == 'unordered'">
     <ul *ngFor="let element of value" class="max-w-md ml-5 space-y-1 text-gray-500 list-disc dark:text-gray-400">
       <li>{{ element.content }}</li>
diff --git a/kitahack-frontend/src/app/components/paragraph/paragraph.component.html b/kitahack-frontend/src/app/components/paragraph/paragraph.component.html
index f6ccdb3..a4e0dc5 100644
--- a/kitahack-frontend/src/app/components/paragraph/paragraph.component.html
+++ b/kitahack-frontend/src/app/components/paragraph/paragraph.component.html
@@ -1,7 +1,3 @@
-<section class="container px-6 mx-auto">
-  <div class="px-6 text-gray-800 md:px-12 lg:text-left xl:px-52">
-    <section class="my-5">
-      <p>{{ value }}</p>
-    </section>
-  </div>
-</section> 
+<section class="mt-5">
+  <p [innerHTML]="value"></p>
+</section>
diff --git a/kitahack-frontend/src/app/components/personality/personality.component.html b/kitahack-frontend/src/app/components/personality/personality.component.html
index ee92484..fc14dba 100644
--- a/kitahack-frontend/src/app/components/personality/personality.component.html
+++ b/kitahack-frontend/src/app/components/personality/personality.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div class="flex flex-col items-center justify-center gap-10 pt-12 sm:flex-row">
     <img class="flex-none object-cover rounded-full aspect-square w-52" src="{{ photo }}" alt="Personality Photo" />
     <div class="flex-auto max-w-xl">
diff --git a/kitahack-frontend/src/app/components/quote/quote.component.html b/kitahack-frontend/src/app/components/quote/quote.component.html
index 39e296f..d78fd5b 100644
--- a/kitahack-frontend/src/app/components/quote/quote.component.html
+++ b/kitahack-frontend/src/app/components/quote/quote.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div class="box-border px-3 py-5 bg-gray-100 rounded-2xl dark:bg-gray-300">
     <div [ngClass]="setAlignment() + ' mt-5 px-5 italic font-[Whisper] text-5xl'">
       {{ value.text }}
diff --git a/kitahack-frontend/src/app/components/table/table.component.html b/kitahack-frontend/src/app/components/table/table.component.html
index 3d26422..fa79225 100644
--- a/kitahack-frontend/src/app/components/table/table.component.html
+++ b/kitahack-frontend/src/app/components/table/table.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 rtl:text-right dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
diff --git a/kitahack-frontend/src/app/components/warning/warning.component.html b/kitahack-frontend/src/app/components/warning/warning.component.html
index e876146..9da028e 100644
--- a/kitahack-frontend/src/app/components/warning/warning.component.html
+++ b/kitahack-frontend/src/app/components/warning/warning.component.html
@@ -1,4 +1,4 @@
-<section class="my-5">
+<section class="mt-5">
   <div class="space-y-8">
     <!-- <div class="p-4 rounded-lg shadow-lg bg-google-green-500/5 shadow-google-green-500/10">
       <div class="flex">
diff --git a/kitahack-frontend/src/app/layouts/navbar/navbar.component.html b/kitahack-frontend/src/app/layouts/navbar/navbar.component.html
index cd2c3ef..0044b0b 100644
--- a/kitahack-frontend/src/app/layouts/navbar/navbar.component.html
+++ b/kitahack-frontend/src/app/layouts/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <header class="fixed top-0 z-20 w-full bg-white start-0">
   <nav class="flex items-center justify-between p-6 mx-auto max-w-7xl lg:px-8" aria-label="Global">
     <div class="flex lg:flex-1">
-      <a href="#" class="-m-1.5 p-1.5 flex flex-row items-center gap-3 text-gray-700">
+      <a routerLink="/" class="-m-1.5 p-1.5 flex flex-row items-center gap-3 text-gray-700">
         <span class="sr-only">GDSC KitaHack {{ clientPages.length.toString() }}</span>
         <img width="125" height="125" src="assets/img/kitahack.png" />
       </a>
@@ -9,7 +9,7 @@
     <div class="flex space-x-5 lg:hidden">
       <button (click)="toggleEventNavbar()" type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
         <span class="sr-only">Open event menu</span>
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <svg class="w-6 h-6" fill="none" st1roke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"></path>
         </svg>
       </button>
@@ -22,8 +22,8 @@
     </div>
 
     <div class="hidden lg:flex lg:gap-x-12">
-      <a href="#hero" class="text-sm font-semibold leading-6 text-gray-700">Overview</a>
-      <a href="#faqs" class="text-sm font-semibold leading-6 text-gray-700">FAQs</a>
+      <a routerLink="/" fragment="hero" class="text-sm font-semibold leading-6 text-gray-700">Overview</a>
+      <a routerLink="/" fragment="faqs" class="text-sm font-semibold leading-6 text-gray-700">FAQs</a>
 
       <div class="relative">
         <button (click)="toggleEventButton()" type="button" class="flex items-center text-sm font-semibold leading-6 text-gray-700 gap-x-1" aria-expanded="false">
@@ -42,7 +42,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a [routerLink]="'/event/' + clientPage.id" class="block font-semibold text-gray-700">
+                <a [routerLink]="'/event/' + clientPage.url" class="block font-semibold text-gray-700">
                   {{ clientPage.name }}
                   <span class="absolute inset-0" (click)="toggleEventButton()"></span>
                 </a>
@@ -76,7 +76,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#hero" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="hero" class="block font-semibold text-gray-700">
                   What is KitaHack
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -92,7 +92,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#sdg" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="sdg" class="block font-semibold text-gray-700">
                   What is Sustainable Development Goals?
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -108,7 +108,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#how-to-join" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="how-to-join" class="block font-semibold text-gray-700">
                   How to join
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -124,7 +124,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#team-formation" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="team-formation" class="block font-semibold text-gray-700">
                   Team Formation
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -140,7 +140,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#tracks" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="tracks" class="block font-semibold text-gray-700">
                   Tracks
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -156,7 +156,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#judging-criteria" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="judging-criteria" class="block font-semibold text-gray-700">
                   Judging Criteria
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -172,7 +172,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#judging-criteria" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="submission-criteria" class="block font-semibold text-gray-700">
                   Submission Criteria
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -188,7 +188,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#mentors" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="mentors" class="block font-semibold text-gray-700">
                   Mentors
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -204,7 +204,7 @@
                 </svg>
               </div>
               <div class="flex-auto">
-                <a href="#chapters" class="block font-semibold text-gray-700">
+                <a routerLink="/" fragment="chapters" class="block font-semibold text-gray-700">
                   Chapters
                   <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
                 </a>
@@ -215,7 +215,7 @@
             </div>
           </div>
           <div class="sticky bottom-0 flex flex-row w-full text-center bg-gray-50">
-            <a href="https://gdsc.community.dev/events/details/developer-student-clubs-monash-university-malaysia-presents-kitahack-2024-kickoff-session/" target="_blank" rel="noopener noreferrer" class="w-full p-3 text-base font-semibold leading-7 text-gray-700 hover:bg-gray-100">Register Here</a>
+            <a routerLink="/https://forms.gle/YCZZj5EQg5vS61y78" target="_blank" rel="noopener noreferrer" class="w-full p-3 text-base font-semibold leading-7 text-gray-700 hover:bg-gray-100">Register Here</a>
           </div>
         </div>
       </div>
@@ -245,7 +245,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a [routerLink]="'/event/' + clientPage.id" class="block font-semibold text-gray-700">
+                  <a (click)="toggleEventNavbar()" [routerLink]="'/event/' + clientPage.url" class="block font-semibold text-gray-700">
                     {{ clientPage.name }}
                     <span class="absolute inset-0" (click)="toggleEventButton()"></span>
                   </a>
@@ -288,7 +288,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#hero" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="hero" class="block font-semibold text-gray-700">
                     What is KitaHack
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -304,9 +304,9 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#sdg" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="sdg" class="block font-semibold text-gray-700">
                     What is Sustainable Development Goals?
-                    <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
+                    <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
                   <p class="mt-1 text-gray-600">
                     Join to preserve the environment!
@@ -320,7 +320,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#how-to-join" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="how-to-join" class="block font-semibold text-gray-700">
                     How to join
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -336,7 +336,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#team-formation" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="team-formation" class="block font-semibold text-gray-700">
                     Team Formation
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -352,7 +352,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#tracks" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="tracks" class="block font-semibold text-gray-700">
                     Tracks
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -368,7 +368,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#judging-criteria" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="judging-criteria" class="block font-semibold text-gray-700">
                     Judging Criteria
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -384,9 +384,9 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#judging-criteria" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="submission-criteria" class="block font-semibold text-gray-700">
                     Submission Criteria
-                    <span class="absolute inset-0" (click)="toggleMoreButton()"></span>
+                    <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
                   <p class="mt-1 text-gray-600">
                     You can only submit your project once
@@ -400,7 +400,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#mentors" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="mentors" class="block font-semibold text-gray-700">
                     Mentors
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -416,7 +416,7 @@
                   </svg>
                 </div>
                 <div class="flex-auto">
-                  <a href="#chapters" class="block font-semibold text-gray-700">
+                  <a routerLink="/" fragment="chapters" class="block font-semibold text-gray-700">
                     Chapters
                     <span class="absolute inset-0" (click)="toggleMoreNavbar()"></span>
                   </a>
@@ -426,22 +426,11 @@
                 </div>
               </div>
             </div>
-            <!-- <div class="py-6 space-y-2">
-              <a (click)="toggleMoreNavbar()" href="#hero" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Overview</a>
-              <a (click)="toggleMoreNavbar()" href="#what-is-kitahack" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">What is KitaHack</a>
-              <a (click)="toggleMoreNavbar()" href="#how-to-join" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">How to join</a>
-              <a (click)="toggleMoreNavbar()" href="#team-formation" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Team Formation</a>
-              <a (click)="toggleMoreNavbar()" href="#tracks" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Tracks</a>
-              <a (click)="toggleMoreNavbar()" href="#judging-criteria" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Judging Criteria</a>
-              <a (click)="toggleMoreNavbar()" href="#mentors" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Mentors</a>
-              <a (click)="toggleMoreNavbar()" href="#chapters" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">Chapters</a>
-              <a (click)="toggleMoreNavbar()" href="#faqs" class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-gray-700 rounded-lg hover:bg-gray-50">FAQs</a>
-            </div> -->
           </div>
         </div>
       </div>
       <div class="sticky bottom-0 flex flex-row w-full text-center bg-gray-50">
-        <a href="https://gdsc.community.dev/events/details/developer-student-clubs-monash-university-malaysia-presents-kitahack-2024-kickoff-session/" target="_blank" rel="noopener noreferrer" class="w-full p-3 text-base font-semibold leading-7 text-gray-700 hover:bg-gray-100">Register Here</a>
+        <a routerLink="/https://forms.gle/YCZZj5EQg5vS61y78" target="_blank" rel="noopener noreferrer" class="w-full p-3 text-base font-semibold leading-7 text-gray-700 hover:bg-gray-100">Register Here</a>
       </div>
     </div>
   </div>
diff --git a/kitahack-frontend/src/app/pages/event/event.component.html b/kitahack-frontend/src/app/pages/event/event.component.html
index 827d190..feb6070 100644
--- a/kitahack-frontend/src/app/pages/event/event.component.html
+++ b/kitahack-frontend/src/app/pages/event/event.component.html
@@ -27,7 +27,7 @@ <h2 class="font-semibold leading-7 text-google-blue-500">
     </div>
 
     <div *ngIf="clientPage === undefined || chapter === undefined || blocks.length <= 0" class="text-center">
-      <img src="/assets/img/google_developers_preloader.gif" alt="Google DevelopersPreloader">
+      <img src="/assets/img/google_developers_preloader.gif" alt="Google Developers Preloader">
     </div>
   </div>
 </section>
diff --git a/kitahack-frontend/src/app/pages/event/event.component.ts b/kitahack-frontend/src/app/pages/event/event.component.ts
index ff52023..263dbe9 100644
--- a/kitahack-frontend/src/app/pages/event/event.component.ts
+++ b/kitahack-frontend/src/app/pages/event/event.component.ts
@@ -41,9 +41,9 @@ export class EventComponent implements OnInit {
 
   ngOnInit(): void {
     this.route.paramMap.subscribe((params) => {
-      const id = params.get('id');
-      if (id) {
-        this.clientPageService.getClientPage(id).subscribe({
+      const url = params.get('url');
+      if (url) {
+        this.clientPageService.getClientPageByUrl(url).subscribe({
           next: (clientPage) => {
             this.chapter = clientPage.chapter;
             this.clientPage = clientPage;
diff --git a/kitahack-frontend/src/app/pages/event/event.routes.ts b/kitahack-frontend/src/app/pages/event/event.routes.ts
index b81ecfa..5461409 100644
--- a/kitahack-frontend/src/app/pages/event/event.routes.ts
+++ b/kitahack-frontend/src/app/pages/event/event.routes.ts
@@ -3,20 +3,19 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { EventComponent } from './event.component';
 
-
 const routes: Routes = [
   {
-    path: ':id',
-    component: EventComponent
+    path: ':url',
+    component: EventComponent,
   },
   {
-    path: "**",
-    redirectTo: "/"
-  }
+    path: '**',
+    redirectTo: '/',
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class EventRoutingModule {}
diff --git a/kitahack-frontend/src/app/sections/hero-section/hero-section.component.html b/kitahack-frontend/src/app/sections/hero-section/hero-section.component.html
index 4f73f7e..546ae87 100644
--- a/kitahack-frontend/src/app/sections/hero-section/hero-section.component.html
+++ b/kitahack-frontend/src/app/sections/hero-section/hero-section.component.html
@@ -19,7 +19,7 @@ <h1 id="hero_title" class="font-[GoogleSans-Bold] mb-6 text-5xl font-bold tracki
           </strong>
         </p>
 
-        <a id="hero_button" href="https://gdsc.community.dev/events/details/developer-student-clubs-monash-university-malaysia-presents-kitahack-2024-kickoff-session/" target="_blank" rel="noopener noreferrer" class="gradient-border-button h-14 btn border-white relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400">
+        <a id="hero_button" href="https://forms.gle/YCZZj5EQg5vS61y78" target="_blank" rel="noopener noreferrer" class="gradient-border-button h-14 btn border-white relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400">
           <span class="font-[GoogleSans-Bold] font-bold relative flex px-5 py-3.5 transition-all ease-in duration-75 dark:text-gray-400 dark:bg-[#2A303C] rounded-md group-hover:bg-opacity-0 dark:hover:text-white">
             Register Now!
           </span>
diff --git a/kitahack-frontend/src/app/services/clientpage.service.ts b/kitahack-frontend/src/app/services/clientpage.service.ts
index c910ed3..d429750 100644
--- a/kitahack-frontend/src/app/services/clientpage.service.ts
+++ b/kitahack-frontend/src/app/services/clientpage.service.ts
@@ -11,10 +11,20 @@ export class ClientPageService {
   constructor(private http: HttpClient) {}
 
   getClientPages(): Observable<ClientPage[]> {
-    return this.http.get<ClientPage[]>(`${environment.api.baseUrl}/client_page/`);
+    return this.http.get<ClientPage[]>(
+      `${environment.api.baseUrl}/client_page/`
+    );
   }
 
-  getClientPage(id: string): Observable<ClientPage> {
-    return this.http.get<ClientPage>(`${environment.api.baseUrl}/client_page/${id}`);
+  getClientPageById(id: string): Observable<ClientPage> {
+    return this.http.get<ClientPage>(
+      `${environment.api.baseUrl}/client_page/${id}`
+    );
+  }
+
+  getClientPageByUrl(url: string): Observable<ClientPage> {
+    return this.http.get<ClientPage>(
+      `${environment.api.baseUrl}/client_page/url/${url}`
+    );
   }
 }
diff --git a/kitahack-frontend/src/index.html b/kitahack-frontend/src/index.html
index b8060ef..cdb33a3 100644
--- a/kitahack-frontend/src/index.html
+++ b/kitahack-frontend/src/index.html
@@ -7,10 +7,44 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <style>
+      .splash {
+        opacity: 1;
+        z-index: 1;
+        visibility: visible;
+        transition: opacity 1.4s ease-in-out, visibility 1.4s;
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      app-root:not(:empty)+.splash {
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 1.4s ease-in-out, visibility 5s;
+      }
+
+      .splash_image {
+        width: 100%;
+        max-width: 1000px;
+      }
+
+    </style>
   </head>
 
   <body>
-    <app-root></app-root>
+    <app-root>
+      <div class="splash">
+        <img class="splash_image" src="/assets/img/google_developers_preloader.gif" alt="Google Developers Preloader">
+      </div>
+    </app-root>
   </body>
 
 </html>