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

…onent

kitahack-frontend/package.json

@@ -25,6 +25,7 @@
     "@angular-devkit/build-angular": "^17.0.3",
     "@angular/cli": "^17.0.3",
     "@angular/compiler-cli": "^17.0.0",
+    "@types/jest": "^29.5.10",
     "autoprefixer": "^10.4.16",
     "flowbite": "^2.2.0",
     "postcss": "^8.4.31",

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

@@ -1,6 +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

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
-import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
 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";
@@ -24,5 +24,27 @@ import { MentorsSectionComponent } from './mentors-section/mentors-section.compo
         JudgingCriteriaSectionComponent,
         MentorsSectionComponent,
     ]
+=======
+
+// Layouts
+import { NavbarComponent } from './layouts/navbar/navbar.component';
+import { FooterComponent } from './layouts/footer/footer.component';
+import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    FooterComponent,
+    DefaultLayoutComponent,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+  ],
+>>>>>>> f911b06653d6cc4b9b2e79df1cc70e6ee3374f72
 })
 export class AppModule {}

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

@@ -7,6 +7,12 @@ const routes: Routes = [
   {
     path: '',
     component: DefaultLayoutComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule)
+      }
+    ]
   },
   {
     path: '**',

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

@@ -0,0 +1,4 @@
+<div [ngClass]="getComponentClass()" [style.background-color]="bgColor">
+  <ng-content></ng-content>
+</div>
+<div [ngClass]="getTailClass()" [style.border-top-color]="bgColor"></div>

kitahack-frontend/src/app/chatbox/chatbox.component.ts → kitahack-frontend/src/app/components/chatbox/chatbox.component.ts

@@ -1,10 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-chatbox',
-  standalone: true,
-  imports: [CommonModule],
   templateUrl: './chatbox.component.html',
   styleUrl: './chatbox.component.css'
 })

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

@@ -0,0 +1,162 @@
+.container {
+    margin: auto;
+    height: 18rem;
+    padding: 1.75rem;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    /* background-image: url(img/countdown_background.svg); */
+}
+
+.text-center {
+    text-align: center;
+}
+
+.pb-4 {
+    padding-bottom: 1rem;
+}
+
+.text-3xl {
+    font-size: 1.875rem;
+}
+
+.md\\:text-4xl {
+    font-size: 2.25rem;
+}
+
+.font-medium {
+    font-weight: 500;
+}
+
+.text-gray-700 {
+    color: #4a5568;
+}
+
+.dark\\:text-white {
+    color: #ffffff;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.gap-5 {
+    gap: 1.25rem;
+}
+
+.auto-cols-max {
+    grid-auto-columns: max-content;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.sm\\:w-1\\ {
+    width: 25%;
+}
+
+.md\\:w-1\\{
+    width: 16.666667%;
+}
+
+.lg\\:w-1\\ {
+    width: 12.5%;
+}
+
+.bg-google-red {
+
+    background-color: #E33835;
+}
+
+.bg-google-blue {
+    background-color: #4580E8;
+}
+
+.bg-google-green {
+    background-color: #329C55;
+}
+
+.bg-google-yellow {
+    background-color: #F9AB00;
+}
+
+.dark\\:bg-neutral {
+    background-color: #374151;
+}
+
+.rounded-box {
+    border-radius: 0.375rem;
+}
+
+.text-white {
+    color: #ffffff;
+}
+
+.dark\\:text-neutral-content {
+    color: #9ca3af;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.aspect-video {
+    aspect-ratio: 16 / 9;
+}
+
+.p-1 {
+    padding: 0.25rem;
+}
+
+.sm\\:p-4 {
+    padding: 1rem;
+}
+
+.countdown {
+    font-size: 60px;
+}
+
+
+.text-6xl {
+    font-size: 4rem;
+}
+
+.lg\\:text-7xl {
+    font-size: 5rem;
+}
+
+.dark\\:text-white {
+    color: #ffffff;
+}
+
+.text-md {
+    font-size: 1.25rem;
+}
+
+.sm\\:text-xl {
+    font-size: 1.25rem;
+}
+
+.font-medium {
+    font-weight: 500;
+}
+
+
+

kitahack-frontend/src/app/components/countdown-section/countdown-section.component.html

@@ -0,0 +1,37 @@
+<section class="container mx-auto h-72 p-7 bg-center bg-no-repeat bg-cover"
+    style="background-image: url(https://2023.kitahack.com/img/countdown_background.svg)">
+    <h2 class="text-center pb-4 text-3xl md:text-4xl font-medium text-gray-700 dark:text-white">Days until Demo-day</h2>
+
+    <div class=" flex flex-row gap-5 text-center auto-cols-max justify-center ">
+        <div
+            class="flex flex-col  sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-red dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center aspect-video p-1 sm:p-4">
+            <span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
+                <span id="days">{{ days }}</span>
+            </span>
+            <span class="text-md sm:text-xl font-medium">days</span>
+        </div>
+        <div
+            class="flex flex-col  sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-blue dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
+            <span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
+                <span id="hours">{{ hours }}</span>
+            </span>
+            <span class="text-md sm:text-xl font-medium">hours</span>
+        </div>
+        <div
+            class="flex flex-col  sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-green dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
+            <span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
+                <span id="minutes">{{ minutes }}</span>
+            </span>
+            <span class="text-md sm:text-xl font-medium">minutes</span>
+        </div>
+        <div
+            class="flex flex-col sm:w-1/4 md:w-1/6 lg:w-1/8 bg-google-yellow dark:bg-neutral rounded-box text-white dark:text-neutral-content justify-center items-center p-1 sm:p-4">
+            <span class="countdown font-bold text-6xl lg:text-7xl dark:text-white">
+                <span id="seconds">{{ seconds }}</span>
+            </span>
+            <span class="text-md sm:text-xl font-medium">seconds</span>
+        </div>
+
+    </div>
+
+</section>

kitahack-frontend/src/app/components/countdown-section/countdown-section.component.js

@@ -0,0 +1,27 @@
+function startCountdown(endDate) {
+    var interval = setInterval(function() {
+        var now = new Date().getTime();
+        var distance = endDate - now;
+
+        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        document.getElementById('days').innerHTML = days;
+        document.getElementById('hours').innerHTML = hours;
+        document.getElementById('minutes').innerHTML = minutes;
+        document.getElementById('seconds').innerHTML = seconds;
+
+        if (distance < 0) {
+            clearInterval(interval);
+            document.getElementById('days').innerHTML = '0';
+            document.getElementById('hours').innerHTML = '0';
+            document.getElementById('minutes').innerHTML = '0';
+            document.getElementById('seconds').innerHTML = '0';
+        }
+    }, 1000);
+}
+
+var endDate = new Date("Dec 31, 2023 00:00:00").getTime();  // replace with your end date
+startCountdown(endDate);

kitahack-frontend/src/app/components/countdown-section/countdown-section.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-countdown-section',
+  templateUrl: './countdown-section.component.html',
+  styleUrls: ['./countdown-section.component.css']
+})
+export class CountdownSectionComponent implements OnInit {
+  days: string = '';
+  hours: string = '';
+  minutes: string = '';
+  seconds: string = '';
+
+  ngOnInit(): void {
+    this.startCountdown("Dec 31, 2023 00:00:00");
+  }
+
+  startCountdown(endDate: string): void {
+    let interval = setInterval(() => {
+      let now = new Date().getTime();
+      let distance = new Date(endDate).getTime() - now;
+
+      let days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      this.days = days.toString();
+      this.hours = hours.toString();
+      this.minutes = minutes.toString();
+      this.seconds = seconds.toString();
+
+      if (distance < 0) {
+        clearInterval(interval);
+        this.days = '0';
+        this.hours = '0';
+        this.minutes = '0';
+        this.seconds = '0';
+      }
+    }, 1000);
+  }
+}