Amended alginment issue, added mentors sectiona and added mentor comp…

…onent

kitahack-frontend/src/app/app.component.html

@@ -3,3 +3,4 @@
 <app-team-formation-section />
 <app-details />
 <app-judging-criteria-section />
+<app-mentors-section />

kitahack-frontend/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { TeamFormationSectionComponent } from './team-formation-section/team-for
 import { DetailsComponent } from "./details/details.component";
 import { ChatboxComponent } from './chatbox/chatbox.component';
 import { JudgingCriteriaSectionComponent } from './judging-criteria-section/judging-criteria-section.component';
+import { MentorsSectionComponent } from './mentors-section/mentors-section.component';
 
 @NgModule({
     declarations: [DefaultLayoutComponent, AppComponent],
@@ -21,6 +22,7 @@ import { JudgingCriteriaSectionComponent } from './judging-criteria-section/judg
         DetailsComponent,
         ChatboxComponent,
         JudgingCriteriaSectionComponent,
+        MentorsSectionComponent,
     ]
 })
 export class AppModule {}

kitahack-frontend/src/app/hero-section/hero-section.component.html

@@ -10,7 +10,7 @@
             id="hero_title"
             class="gradient-text text-transparent text-5xl md:text-6xl xl:text-6xl font-bold tracking-tight mb-6 dark:text-white dark:bg-none"
           >
-            GDSC KitaHack 2023
+            GDSC KitaHack 2024
           </h1>
           <!-- <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">KitaHack is a 2-day hackathon that is organised by Google Developer Student Clubs Malaysia (GDSC Malaysia).</p> -->
           <p

kitahack-frontend/src/app/judging-criteria-section/judging-criteria-section.component.css

@@ -1,8 +1,9 @@
 .custom-container {
     padding: 2rem; /* Adjust padding based on your design */
     margin: auto;
-    max-width: 3xl; /* Set your desired max-width, e.g., 1200px */
-  }
+    max-width: 900px; /* Set your desired max-width, e.g., 1200px */
+}
+
 
   .stats-container {
     display: flex;

kitahack-frontend/src/app/mentor/mentor.component.html

@@ -0,0 +1,30 @@
+<div
+  class="relative w-80 p-4 my-14 mx-6 bg-white rounded-lg flex flex-col justify-center items-center shadow-md dark:bg-gray-700"
+>
+  <div
+    class="top-0 left-2/4 overflow-hidden absolute rounded-full w-38 h-38 shadow-xl -translate-x-1/2 -translate-y-1/2"
+  >
+    <img
+      class="w-full aspect-square object-cover brightness-50 dark:brightness-100"
+      src="https://media.tenor.com/_cL3US50IEUAAAAd/donkey-shrek-donkey.gif"
+      alt=""
+    />
+  </div>
+  <p class="text-gray-700 mt-20 mb-2 font-bold text-xl dark:text-white">
+    To be announced
+  </p>
+  <p class="text-gray-700 font-normal dark:text-gray-400">TBA</p>
+  <p
+    class="text-gray-700 font-normal mt-4 px-2 text-justify dark:text-gray-400"
+  >
+    We are currently in the process of selecting and inviting the top mentors to
+    join us at KitaHack. Keep an eye out for announcements on their names and
+    expertise in the coming weeks. We can't wait to share their valuable
+    insights and experiences with you!
+  </p>
+  <button
+    class="mt-5 mb-2 bg-yellow-500 transition ease-in-out delay-50 hover:bg-white text-white hover:text-yellow-500 hover:border hover:border-yellow-700 font-bold py-2 px-4 rounded dark:hover:bg-gray-700 dark:hover:text-white dark:hover:border-white"
+  >
+    <a href="#">View Profile</a>
+  </button>
+</div>

kitahack-frontend/src/app/mentor/mentor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MentorComponent } from './mentor.component';
+
+describe('MentorComponent', () => {
+  let component: MentorComponent;
+  let fixture: ComponentFixture<MentorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MentorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MentorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kitahack-frontend/src/app/mentor/mentor.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-mentor',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './mentor.component.html',
+  template:'<p>{{name}}</p><p>{{title}}</p><p>{{description}}</p>',
+  styleUrl: './mentor.component.css'
+})
+export class MentorComponent {
+  @Input() name: string | undefined;
+  @Input() title: string | undefined;
+  @Input() description: string | undefined;
+}

kitahack-frontend/src/app/mentors-section/mentors-section.component.html

@@ -0,0 +1,11 @@
+<h1
+  class="font-bold text-3xl md:text-5xl mt-20 mx-auto mb-6 justify-center text-center dark:text-white"
+>
+  Mentors
+</h1>
+
+<section class="w-full flex flex-wrap justify-center items-center pt-10 px-4">
+  <app-mentor />
+  <app-mentor />
+  <app-mentor />
+</section>

kitahack-frontend/src/app/mentors-section/mentors-section.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MentorsSectionComponent } from './mentors-section.component';
+
+describe('MentorsSectionComponent', () => {
+  let component: MentorsSectionComponent;
+  let fixture: ComponentFixture<MentorsSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MentorsSectionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MentorsSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kitahack-frontend/src/app/mentors-section/mentors-section.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MentorComponent } from '../mentor/mentor.component';
+
+@Component({
+  selector: 'app-mentors-section',
+  standalone: true,
+  imports: [CommonModule, 
+  MentorComponent],
+  templateUrl: './mentors-section.component.html',
+  styleUrl: './mentors-section.component.css'
+})
+export class MentorsSectionComponent {
+
+}