Merge pull request #19 from Google-Developer-Student-Club-Malaysia/de…

…v-malik

Dev Malik

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

@@ -1 +1,10 @@
+<<<<<<< HEAD
+<!-- <router-outlet></router-outlet>  -->
+<app-hero-section />
+<app-team-formation-section />
+<app-details />
+<app-judging-criteria-section />
+<app-mentors-section />
+=======
 <router-outlet></router-outlet>
+>>>>>>> f911b06653d6cc4b9b2e79df1cc70e6ee3374f72

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

@@ -2,6 +2,29 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app.routes';
+<<<<<<< HEAD
+import { HeroSectionComponent } from './hero-section/hero-section.component';
+import { TeamFormationSectionComponent } from './team-formation-section/team-formation-section.component';
+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],
+    providers: [],
+    bootstrap: [AppComponent],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        HeroSectionComponent,
+        TeamFormationSectionComponent,
+        DetailsComponent,
+        ChatboxComponent,
+        JudgingCriteriaSectionComponent,
+        MentorsSectionComponent,
+    ]
+=======
 
 // Layouts
 import { NavbarComponent } from './layouts/navbar/navbar.component';
@@ -22,5 +45,6 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.
     BrowserModule,
     AppRoutingModule,
   ],
+>>>>>>> f911b06653d6cc4b9b2e79df1cc70e6ee3374f72
 })
 export class AppModule {}

kitahack-frontend/src/app/components/hero-section/hero-section.component.css

@@ -19,15 +19,20 @@
 	padding:6px 24px;
 	text-decoration:none;
 	text-shadow:0px 1px 0px #ffffff;
+
 }
 
 .hero_button:hover {
 	background-color:transparent;
+	outline: none;
+	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
 }
 
 .hero_button:active {
 	position:relative;
 	top:1px;
+	outline: none;
+	border: none;
 }
 
 .hero_arrow{
@@ -62,6 +67,8 @@
 	color: white; /* Set the text color */
 	font-size: 16px; /* Adjust font size based on your design */
 	cursor: pointer; /* Add a cursor pointer for interaction */
+	outline: none;
+	border: none;
 	transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out; /* Add transition for smooth hover effect */
   }
 

kitahack-frontend/src/app/components/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/hero-section/hero-section.component.html

@@ -0,0 +1,67 @@
+<div class="container px-6 py-16 mx-auto">
+  <div
+    class="px-6 py-12 lg:my-12 md:px-12 text-gray-800 text-center lg:text-left"
+  >
+    <div class="container mx-auto xl:px-32">
+      <div class="grid lg:grid-cols-2 gap-12 items-center">
+        <!-- Content -->
+        <div class="mt-12 lg:mt-0">
+          <h1
+            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 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
+            class="text-gray-700 font-normal dark:text-gray-400 max-w-2xl mb-6 lg:mb-8"
+          >
+            KitaHack is a 2-month event featuring
+            <strong>talks, events, and a hackathon</strong> organised by Google
+            Developer Student Clubs Malaysia (GDSC Malaysia)
+          </p>
+          <!-- <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">The event date is 11th - 12th March 2023.</p> -->
+          <p
+            class="text-gray-700 font-normal dark:text-gray-400 max-w-2xl mb-6 lg:mb-8"
+          >
+            The event duration is <strong>4th Jan - 10th Mar 2023</strong>
+          </p>
+
+          <!-- Button -->
+          <a
+            id="hero_button"
+            href="https://youtu.be/dQw4w9WgXcQ?si=xQPvlC-e20eRbVIQ"
+            target="_blank"
+            class="gradient-border-button h-14 btn border-white relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 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="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!
+              <svg
+                aria-hidden="true"
+                class="ml-2 -mr-1 w-5 h-5"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </span>
+          </a>
+        </div>
+        <!-- Image -->
+        <div class="mb-12 lg:mb-0">
+          <img
+            src="https://google-developer-student-club-malaysia.github.io/kitahack2023/img/gsc_home_hero_logo.png"
+            class="w-full rounded-lg shadow-2xl shadow-gray-900 dark:shadow-gray-400"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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 {
+
+}