Merge pull request #8 from RealEskalate/sami.timeline

sami.fix: fixing the second commit like button,modal appearance

src/app/app.component.html

@@ -4,13 +4,13 @@
 <app-consent></app-consent>
 <ng-container *ngIf="isModalOpen">
   <div
-    class="fixed  top-0 left-0 z-50 mt-4 ml-4 w-full  pt-3"
+    class="fixed  top-0 left-0 z-50   w-full mt-5  pt-3  flex flex-col justify-end"
   >
     <div class="modal-overlay"></div>
     <div
-      class="modal-container modal-box w-11/12 max-sm:w-full max-sm:mx-2 max-w-5xl bg-gray-900 text-center flex flex-col mt-4 shadow-lg m-auto"
+      class="border border-gray-600   modal-box w-11/12 max-sm:w-full max-sm:mx-2 max-w-5xl bg-gray-900 text-center flex flex-col mt-4  shadow-lg m-auto"
     >
-      <app-what-we-provide></app-what-we-provide>
+      <app-what-we-provide ></app-what-we-provide>
     </div>
   </div>
 </ng-container>
@@ -24,6 +24,16 @@
   (closeModalEvent)="closeModal()"
 ></app-winner_modal>
 </div>
+<div *ngIf="showPartnerButton" style="position: fixed; top: 45vh; left: -40px; z-index: 1000">
+  <a href="https://form.typeform.com/to/opvWnrn7" target="_blank">
+    <button
+      class="px-4 py-3 rounded-md transition-transform duration-300 ease-in-out bg-gradient-to-r from-indigo-600 to-pink-500"
+      style="transform: rotate(270deg)"
+    >
+      Partner with Us
+    </button>
+  </a>
+</div>
 <app-landing></app-landing>
 <div id="prize2024" class="relative z-40">
   <app-prize2024></app-prize2024>

src/app/app.component.ts

@@ -27,6 +27,7 @@ declare var loadPrivacyPlugin: any;
 })
 export class AppComponent implements OnInit, OnDestroy  {
   // constructor(private privacyConsentService: PrivacyConsentService) {}
+  showPartnerButton: boolean = false;
   isWinnerModalOpen = false;
   modalData: any = {};
   modalSubscription: Subscription | undefined;
@@ -44,11 +45,11 @@ export class AppComponent implements OnInit, OnDestroy  {
 
 
   @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent) {
-    if (!this.isClickWithinModal(event) && this.modalService.isModalOpen) {
-      this.modalService.closeModal();
-    }
-  }
+  // onDocumentClick(event: MouseEvent) {
+  //   if (!this.isClickWithinModal(event) && this.modalService.isModalOpen) {
+  //     this.modalService.closeModal();
+  //   }
+  // }
 
   isClickWithinModal(event: MouseEvent): boolean {
     // Add logic to determine if the click is within the modal element
@@ -82,10 +83,9 @@ export class AppComponent implements OnInit, OnDestroy  {
     });
 
     this.winnerModalService.modalData$.subscribe((data) => {
-
-
       this.modalData = data;
     });
+
     const hasConsent = localStorage.getItem('consentGiven');
     this.termsPluginLoaderService.loadPlugin();
 
@@ -115,6 +115,9 @@ export class AppComponent implements OnInit, OnDestroy  {
   closeModal() {
     this.winnerModalService.toggleModal(false);
   }
+  closeJoinModal(){
+    this.modalService.closeModal()
+  }
 
 
   updateCountDownVisibility() {
@@ -219,5 +222,17 @@ export class AppComponent implements OnInit, OnDestroy  {
     if (currentSection !== this.currentSection) {
       if (currentSection !== '') this.currentSection = currentSection;
     }
+
+
+    // For Partner button logic 
+    const landingElement = this._el.nativeElement.querySelector('#landing');
+    const landingOffsetTop = landingElement.offsetTop;
+    const scrollPosition = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    const landingHeight = landingElement.offsetHeight;
+
+    // Adjust the value based on your requirement
+    const triggerPosition = landingOffsetTop + landingHeight - 100;
+
+    this.showPartnerButton = scrollPosition > triggerPosition;
   }
 }

src/app/components/landing/landing.component.html

@@ -2,8 +2,8 @@
   <div
     class="bg_svg min-h-[80vh] px-20 flex flex-col justify-center items-center"
   >
-    <div class="flex flex-col md:flex-row justify-center text-white">
-      <section class="left flex-1 md:p-5">
+    <div class="grid grid-cols-1 md:grid-cols-12 text-white">
+      <section class="left col-span-1 md:col-span-6  md:p-5 md:h-full flex flex-col items-center md:items-start justify-between ">
         <div
           class="w-full flex flex-col max-md:items-center items-start leading-relaxed mb-5"
         >
@@ -14,24 +14,27 @@
             A2SV Hackathon, 2024
           </h1>
           <h1
-            class="text-left w-full max-md:text-center text-xl mt-5 font-semibold md:text-2xl lg:text-4xl"
+            class="text-left w-full max-md:text-center text-xl mt-6  md:text-2xl lg:text-3xl"
           >
             AI for Impact - Solving Africa's Challenges
           </h1>
         </div>
-        <div style="position: fixed; top: 45vh; left: -40px; z-index: 1000">
+
+
+
           <a href="https://form.typeform.com/to/opvWnrn7" target="_blank">
             <button
               (click)="setActiveButton('partner')"
-              class="px-4 py-3 rounded-md transition-transform duration-300 ease-in-out bg-gradient-to-r from-indigo-600 to-pink-500"
-              style="transform: rotate(270deg)"
+              class="mb-10 rounded-full px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-pink-500 relative hover:bg-gradient-to-r hover:from-indigo-600 hover:to-pink-500 text-white transition-all cursor-pointer ease-out duration-300"
+
             >
               Partner with Us
             </button>
           </a>
-        </div>
+
+
       </section>
-      <section class="right flex-1 md:h-full md:px-5 mb-10">
+      <section class="right col-span-1 md:col-span-6  md:h-full md:px-5 mb-10 ">
         <p class="my-4 tracking-tight leading-a.5 text-justify justify-between">
           Join Africa’s largest Hackathon in 2024, focused on creating social
           and economic solutions with AI. This is the largest hackathon in
@@ -47,12 +50,12 @@
         <p></p>
         <h2>Registration starts on June 1, 2024.</h2>
         <div
-          class="flex flex-col md:flex-row justify-center max-md:items-center md:justify-start mt-3"
+          class="max-md:mt-8 flex flex-col md:flex-row justify-center max-md:items-center md:justify-start mt-3"
         >
           <a href="https://form.typeform.com/to/ShJTk212" target="_blank">
             <button
               (click)="setActiveButton('mentor')"
-              class="text-sm px-4 py-2 rounded-full  transition-transform duration-300 ease-in-out  hover:bg-purple-500     {{
+              class="text-sm rounded-full px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-pink-500 relative hover:bg-gradient-to-r hover:from-indigo-600 hover:to-pink-500 text-white transition-all cursor-pointer ease-out duration-300    hover:bg-purple-500     {{
                 activeButton === 'mentor'
                   ? 'bg-purple-500   '
                   : 'bg-purple-700  '
@@ -64,7 +67,7 @@ <h2>Registration starts on June 1, 2024.</h2>
           <a href="https://form.typeform.com/to/XoEqw6vQ" target="_blank">
             <button
               (click)="setActiveButton('signup')"
-              class="max-md:mt-5 text-sm px-4 py-2 rounded-full transition-transform duration-300 ease-in-out  hover:bg-purple-500 lg:ml-5 {{
+              class="max-md:mt-5 text-sm rounded-full px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-pink-500 relative hover:bg-gradient-to-r hover:from-indigo-600 hover:to-pink-500 text-white transition-all cursor-pointer ease-out duration-300 lg:ml-5 {{
                 activeButton === 'signup'
                   ? 'bg-purple-500   '
                   : 'bg-purple-700  '

src/app/modal.service.ts

@@ -11,14 +11,14 @@ export class ModalService {
   constructor() {}
 
   openModal() {
-    console.log('open clicked',this.modalStateChanged);
+    // console.log('open clicked',this.modalStateChanged);
 
     this.isModalOpen = true;
     this.modalStateChanged.emit(true);
   }
 
   closeModal() {
-    console.log('closed clicked',this.modalStateChanged);
+    // console.log('closed clicked',this.modalStateChanged);
 
     this.isModalOpen = false;
     this.modalStateChanged.emit(false);

src/app/pages/home/home.component.html

@@ -399,12 +399,12 @@ <h1 class="w-full text-center flex flex-row justify-start items-center mb-2"><sp
           <div
 
           [ngClass]="{ 'description': animated }"
-            class="opacity-0 border h-full rounded-lg flex-1 lg:flex-grow flex justify-start"
+            class="opacity-0  h-full rounded-lg flex-1 lg:flex-grow flex md:justify-center md:items-center"
           >
             <!-- <app-winner></app-winner> -->
 
             <div
-             class="h-full w-full">
+             class="h-3/4 w-full ">
               <iframe
                 id="videoIframe"
                 class="h-full w-full bg-black object-center object-contain rounded-2xl"

src/app/pages/home/home.component.ts

@@ -81,7 +81,7 @@ export class HomeComponent implements OnInit {
   }
 
   openModal(event: Event) {
-    console.log('openModal home is clicked');
+    // console.log('openModal home is clicked');
 
     event.stopPropagation();
     this.modalService.openModal();

src/app/pages/prize2024/prize2024.component.ts

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
 
 export class Prize2024Component {
   awards = [
-    "Trip to Addis Ababa, including airfare, hotel, and other expenses.",
+    "Trip to Addis Ababa, including airfare, hotel, food and other expenses.",
     "Opportunity to pitch one's project idea to renowned tech individuals and venture capitalists.",
     "Certificate of achievement."
   ]

src/app/shared/bot/bot.component.ts

@@ -48,7 +48,7 @@ export class BotComponent {
     this.localStorageService.setWaitingStatus( true )
     try{
       this.chatService.sendMessage( this.chatForm.value.message! ).subscribe((response:any)=>{
-        console.log(response)
+        // console.log(response)
         this.isChatLoading = false;
         this.localStorageService.setWaitingStatus( false )
         this.localStorageService.addMessage({

src/app/shared/bubble/bubble.component.ts

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
 export class BubbleComponent {
   isIframeLoading: boolean = true;
   onIframeLoad() {
-    console.log("iframe loaded")
+    // console.log("iframe loaded")
     this.isIframeLoading = false;
   }
 }

src/app/shared/chat-service.service.ts

@@ -51,7 +51,7 @@ export class ChatService {
 
       }
       default: {
-        console.log('Chat-Service ~ Unknown Error: ',error.message, 'StatusCode: ', error.status)
+        // console.log('Chat-Service ~ Unknown Error: ',error.message, 'StatusCode: ', error.status)
         return `Unknown Server Error`;
       }
 

src/app/shared/header/header.component.html

@@ -297,13 +297,13 @@
             <a
               (click)="scrollToSection('prize2024'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
-              >🏆 Prize</a
+              >🏆 $30K Prize</a
             >
-            <a
+            <!-- <a
               (click)="scrollToSection('partners'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
               >A2SV Interview Partners</a
-            >
+            > -->
             <a
               (click)="scrollToSection('info'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
@@ -313,17 +313,22 @@
               (click)="scrollToSection('judges'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
               >Judges</a -->
-            >
-            <a
+
+            <!-- <a
               (click)="scrollToSection('eligibility'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
               >Eligibility</a
-            >
+            > -->
             <a
               (click)="scrollToSection('about-us'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
               >About Us</a
             >
+            <a
+            (click)="scrollToSection('partners'); toggleMenu()"
+            class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
+            >A2SV Interview Partners</a
+          >
           </div>
         </div>
       </div>

src/app/shared/track-winners/track-winners.component.html

@@ -16,8 +16,13 @@
     </div>
   </div>
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-2">
-    <div *ngFor="let winner of winners" class="my-6">
+    <div *ngFor="let winner of winners; let i = index" class="my-6">
       <div
+      [class]="{
+        'md:-translate-y-[15px]': i === 0,
+        'md:-translate-y-[40px]': i === 1,
+        'md:-translate-y-0': i === 2
+      }"
         class="relative h-full grid grid-rows-auto-1fr rounded-lg my-10 md:my-0 text-gray-300 border-2 border-gray-800 group hover:bg-gray-700 hover:shadow-md hover:border transition duration-300 hover:border-solid transform hover:scale-105 hover:text-white"
       >
         <div