Blen: registration button update and add eligibility criteria quesito…

…ns feature

src/app/app.component.html

@@ -162,7 +162,7 @@
   >
     Register
   </button>
-</div> -->
+</div>
 <!-- <app-registration
   [showModal]="showModal"
   (closeModalEvent)="onHideModal()"

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

@@ -1,6 +1,6 @@
 <div
   id="landing"
-  class="min-h-screen pt-[0px] lg:pt-[0px] bg-blue-950 bg-opacity-50 relative"
+  class="min-h-screen pt-[0px]  lg:pt-[0px] bg-blue-950 bg-opacity-60 relative"
 >
   <video
     autoplay
@@ -15,24 +15,24 @@
     />
     Your browser does not support the video tag.
   </video>
-  <!-- <app-registration [comingName]="individualName" [showModal]="showIndividualRegistrationModal" [registrationLink]="indivisualRegistrationLink" (closeModalEvent)="onHideModal()"></app-registration>
-  <app-registration [comingName]="teamName" [showModal]="showTeamRegistrationModal" [registrationLink]="teamRegistrationLink" (closeModalEvent)="onHideModal()"></app-registration> -->
+  <app-registration [comingName]="individualName" [showModal]="showIndividualRegistrationModal" [registrationLink]="indivisualRegistrationLink" (closeModalEvent)="onHideModal()"></app-registration>
+  <app-registration [comingName]="teamName" [showModal]="showTeamRegistrationModal" [registrationLink]="teamRegistrationLink" (closeModalEvent)="onHideModal()"></app-registration>
   <app-mentors-registration [registrationLink]="mentorsRegistrationLink" [showModal]="showMentorsModal" (closeModalEvent)="onHideModal()"></app-mentors-registration>
   <app-advisors-registration [registrationLink]="advisorsRegistrationLink" [showModal]="showAdvisorsModal" (closeModalEvent)="onHideModal()" ></app-advisors-registration>
 
   <div
-    class=" h-[100vh] lg:pt-[18vh] px:5 md:px-20 flex flex-col max-lg:justify-center justify-start items-start  z-1 relative drop-shadow-2xl bg-black bg-opacity-50"
+    class=" h-[100vh] lg:pt-[18vh] px:5 md:px-20 flex flex-col max-lg:justify-center justify-start   z-1  drop-shadow-2xl bg-black bg-opacity-60"
   >
     <div class="text-white px-5">
       <section
-        class="left col-span-2 p-5 md:h-full flex flex-col items-center md:items-start justify-between"
+        class="left col-span-2 p-5 md:h-[76vh] flex flex-col  items-center md:items-start justify-start"
       >
         <div
-          class="w-full flex flex-col max-md:items-center items-start leading-relaxed mb-5"
+          class="w-full flex flex-col max-md:items-center items-start leading-relaxed mb-2"
         >
           <!-- A2SV Hackathon, 2023 -->
           <p
-            class=" text-left w-full max-md:text-center text-[24px] font-bold md:text-[36px] lg:text-[40px]"
+            class=" text-left w-full max-md:text-center text-[36px] font-bold md:text-[46px] lg:text-[60px]"
           >
             A2SV Hackathon, 2024
           </p>
@@ -43,14 +43,27 @@
           </h1>
         </div>
 
-        <h2>
+        <div class="flex flex-col  w-full justify-center">
+        <h2 class="flex flex-col justify-center  md:items-start ">
           <app-count-down
             class="inline-block pl-0 max-md:text-center"
           ></app-count-down>
+          <button
+          onClick="document.getElementById('register_modal').showModal()"
+          class="max-md:mt-5 text-2xl mt-5 rounded-full px-16 md:px-28 py-4 text-white transition-all cursor-pointer ease-out duration-400 bg-purple-700 hover:bg-purple-500 relative overflow-hidden group"
+        >
+          <span class="absolute inset-0 w-full h-full rounded-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-50 blur-md animate-pulse"></span>
+          <span class="absolute inset-0 w-full h-full rounded-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-75 blur-lg"></span>
+          <!-- <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-20 ease"></span>
+          <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-30 bg-white opacity-10 rotate-12 group-hover:-translate-x-50 ease"></span>
+          <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-18 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span> -->
+          <span class="absolute right-0 w-8 h-32 -mt-12  transition-all duration-1000 transform translate-x-14 bg-white opacity-10 rotate-12 group-hover:-translate-x-80 ease"></span>
+          <span class="relative text-white font-bold">Register Now</span>
+        </button>
         </h2>
 
         <div
-          class="max-md:mt-8 flex flex-col md:flex-row justify-center max-md:items-center md:justify-start mt-3"
+          class="max-md:mt-5 flex flex-col md:flex-row  max-md:items-center  justify-start"
         >
 
           <!-- <button
@@ -59,13 +72,14 @@ <h2>
           >
             Register now
           </button> -->
-
+          
 
             <button
             (click)="onShowMentorsModal()"
-              class="max-md:mt-5 text-sm rounded-full px-5 py-2.5 md:mr-3  text-white transition-all cursor-pointer ease-out duration-300  bg-purple-700 hover:bg-purple-500 "
+              class=" text-sm rounded-full px-5 py-2.5   text-white transition-all border border-1 cursor-pointer ease-out duration-300  hover:text-underline "
             >
-              Be mentor/advisor
+            <span class="hover:text-pink-500">Be mentor/advisor</span>
+
             </button>
             <!-- <button
             (click)="shareImage()"
@@ -81,12 +95,34 @@ <h2>
 
             <button
             (click)="onShowAdvisorsModal()"
-              class="max-md:mt-5 text-sm rounded-full px-5 py-2.5   text-white transition-all cursor-pointer ease-out duration-300 lg:ml-5 bg-purple-700 hover:bg-purple-500"
+              class="max-md:mt-5 text-sm rounded-full md:ml-3 px-6 py-2.5 text-white transition-all border border-1 cursor-pointer ease-out duration-300 lg:ml-5 left-1/2"
             >
-              Partner with us
+              <span class="hover:text-pink-500">Partner with us</span>
             </button>
+
+
+
+            <div
+            (click)="scrollDown()"
+            class="rounded-full max-md:hidden text-white border-2 p-2 animate-bounce z-40 cursor-pointer mx-auto absolute bottom-4 left-1/2"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-8 h-8"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"
+              />
+            </svg>
+          </div>
+        </div>
 
-
         </div>
         <!-- <app-share-btn class="border border-red-500">Share</app-share-btn> -->
       </section>
@@ -128,7 +164,7 @@ <h2>
         </div>
       </ngx-slick-carousel>
     </div> -->
-    <!-- <dialog *ngIf="showRegistrationModal" id="register_modal" class="modal mt-4">
+    <dialog *ngIf="showRegistration2Modal" id="register_modal_after_eligibility" class="modal mt-4">
       <form method="dialog" class="modal-box w-11/12 max-sm:w-full max-sm:mx-2 max-w-5xl bg-gray-900">
         <section class="text-gray-400 bg-gray-900 body-font">
           <div class="container p-4 ">
@@ -164,32 +200,15 @@ <h2>
           </div>
         </section>
         <div class="modal-action">
-          <button class="btn" onClick="document.getElementById('register_modal').close()" >Close</button>
+          <button class="btn" onClick="document.getElementById('register_modal_after_eligibility').close()" >Close</button>
         </div>
       </form>
 
-    </dialog> -->
+    </dialog>
 
 
   </div>
-  <div
-  (click)="scrollDown()"
-  class="rounded-full max-md:hidden text-white border-2 p-2 animate-bounce z-40 cursor-pointer mx-auto absolute bottom-4 left-1/2"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="w-8 h-8"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"
-    />
-  </svg>
-</div>
+
 
 </div>
+

src/app/components/landing/landing.component.ts

@@ -75,7 +75,7 @@ export class LandingComponent {
   showGetInvolvedModal = true;
   showTeamRegistrationModal = false;
   showIndividualRegistrationModal = false;
-  showRegistrationModal = true;
+  showRegistration2Modal = true;
   // passing links directly to the child is causig me error so I have thos use this name 
   individualName = 'individual'
   teamName = 'team'
@@ -127,7 +127,7 @@ export class LandingComponent {
   onRegisterTeam() {
     this.toggleChatEvent.emit(false);
     this.showTeamRegistrationModal = true;
-    this.showRegistrationModal = false;
+    this.showRegistration2Modal = false;
     document.body.classList.add('overflow-hidden', 'z-0')
     document.getElementById('prizes')?.classList.add('z-0')
     document.getElementById('prizes')?.classList.remove('z-40')
@@ -143,7 +143,7 @@ export class LandingComponent {
   onRegisterIndividual() {
     this.toggleChatEvent.emit(false);
     this.showIndividualRegistrationModal = true;
-    this.showRegistrationModal = false;
+    this.showRegistration2Modal = false;
     document.body.classList.add('overflow-hidden', 'z-0')
     document.getElementById('prizes')?.classList.add('z-0')
     document.getElementById('prizes')?.classList.remove('z-40')
@@ -177,7 +177,7 @@ export class LandingComponent {
     this.toggleChatEvent.emit(true)
     this.showModal = false;
     this.showGetInvolvedModal = true;
-    this.showRegistrationModal = true;
+    this.showRegistration2Modal = true;
     this.showMentorsModal = false;
     this.showAdvisorsModal = false;
     this.showTeamRegistrationModal = false;
@@ -193,7 +193,7 @@ export class LandingComponent {
     document.getElementById('footer')?.classList.remove('hidden')
   }
   closeModal() {
-    this.showRegistrationModal = false;
+    this.showRegistration2Modal = false;
   }
 
   scrollDown(): void {

src/app/pages/eligibility/eligibility.component.html

@@ -1,13 +1,13 @@
-<section id="eligibility" class=" max-sm:px-4 max-lg:px-12 sm:pb-16 pt-24 pb-32 px-20 overflow-x-hidden">
-  <p class="sm:text-4xl text-center text-2xl font-medium  mb-4 text-white">Eligibility</p>
-  <div class=" p-2 grid grid-cols-1 lg:grid-cols-2 gap-x-12   items-center">
-    <div  class="  flex-none max-lg:my-6 sm:pb-8 md:mx-8 sm:mt-0   sm:text-left">
-      <p class=" text-gray-300 leading-relaxed max-sm:text-start  ">The hackathon is open to all students located in Africa who are passionate about AI and eager to showcase their skills and creativity. To participate, you must meet the following eligibility requirements:</p>
+<section id="eligibility" class="max-sm:px-4 max-lg:px-12 sm:pb-16 pt-24 pb-32 px-20 overflow-x-hidden">
+  <p class="sm:text-4xl text-center text-2xl font-medium mb-4 text-white">Eligibility</p>
+  <div class="p-2 grid grid-cols-1 lg:grid-cols-2 gap-x-12 items-center">
+    <div class="flex-none max-lg:my-6 sm:pb-8 md:mx-8 sm:mt-0 sm:text-left">
+      <p class="text-gray-300 leading-relaxed max-sm:text-start">The hackathon is open to all students located in Africa who are passionate about AI and eager to showcase their skills and creativity. To participate, you must meet the following eligibility requirements:</p>
 
-      <div class="flex justify-center mt-6">
+      <div class="flex justify-center mt-6 mb-5">
         <button (click)="showIndividualCriteria()" 
                 [ngClass]="{'bg-purple-400 disabled': isIndividual, 'bg-purple-700': !isIndividual}"
-                class="inline-flex text-white border-0 max-sm:px-4 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl  text-sm mr-4">
+                class="inline-flex text-white border-0 max-sm:px-4 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm mr-4">
           Individual
         </button>
         <button (click)="showTeamCriteria()" 
@@ -16,21 +16,49 @@
           Team
         </button>
       </div>
-       <ul>
-        <li *ngFor="let criteria of (isIndividual ? individualCriterieas : teamCriterieas)">
-              <div class="flex justify-start gap-x-3 py-[8px] items-start mt-6 border-t border-white border-opacity-30">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="flex-none w-8 h-8 text-[#AC6AFF]">
-                <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
-              </svg>
-              <p class="text-gray-300 leading-relaxed max-sm:text-start">{{criteria.text}}
-              </p>
+
+      <div>
+        <ul>
+          <li *ngFor="let criterion of criteria; let i = index" >
+            <div class="flex items-start gap-x-3 py-2">
+              <div class="flex-none w-8 h-8">
+                <svg *ngIf="criterion.answered === true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full text-[#AC6AFF]">
+                  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
+                </svg>
+                <svg *ngIf="criterion.answered === false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full text-red-500">
+                  <path fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5zM9.47 9.47a.75.75 0 011.06-1.06l1.47 1.47 1.47-1.47a.75.75 0 011.06 1.06L12.53 12l1.47 1.47a.75.75 0 01-1.06 1.06l-1.47-1.47-1.47 1.47a.75.75 0 01-1.06-1.06L11.47 12 9.47 10.53z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <p *ngIf="i <= currentQuestionIndex" class="text-gray-300 leading-relaxed max-sm:text-start" [@fadeInOut]>{{ criterion.text }}</p>
             </div>
-        </li>
-      </ul>
-      <div *ngIf="registrationButtonVisible" class="flex mt-12 justify-center">
-        <button onClick="register_modal.showModal()"  class="inline-flex disabled:bg-gray-500  text-black bg-white border-0 max-sm:px-4 py-2 px-6 focus:outline-none hover:drop-shadow-xl  hover:bg-gray-300 rounded max-sm:text-sm text-lg">Register Now</button>
+            <hr *ngIf="criterion.answered !== null" class="border-t border-white border-opacity-30 mb-2">
+          </li>
+        </ul>
+
+        <div *ngIf="!eligibilityConfirmed && !ineligible && currentQuestionIndex < criteria.length" class="flex justify-center ">
+          <button (click)="answerYes()" 
+                  class="inline-flex text-white border-0 bg-green-500 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm mr-4">
+            Yes
+          </button>
+          <button (click)="answerNo()" 
+                  class="inline-flex text-white border-0 bg-red-500 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm">
+            No
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="eligibilityConfirmed || ineligible" [@fadeInOut]>
+        <p class="text-gray-300 leading-relaxed max-sm:text-start mt-6" *ngIf="eligibilityConfirmed">You are eligible to participate!</p>
+        <p class="text-gray-300 leading-relaxed max-sm:text-start mt-6" *ngIf="ineligible">Sorry, you are not eligible to participate.</p>
+        <div *ngIf="eligibilityConfirmed" class="flex mt-12 justify-center">
+          <button onClick="document.getElementById('register_modal_after_eligibility').showModal()" 
+                  class="inline-flex transition-all cursor-pointer ease-out duration-400 bg-purple-700 hover:bg-purple-500 relative disabled:bg-gray-500 text-black border-0 max-sm:px-4 py-2 px-9 focus:outline-none hover:drop-shadow-xl hover:bg-gray-300 rounded max-sm:text-sm text-lg group">
+                  <span class="absolute right-0 w-6 h-12 -mt-2  text-white  transition-all duration-1000 transform translate-x-17 sm:bg-transparent md:bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span>
+            Register Now
+          </button>
+        </div>
       </div>
     </div>
-    <img src="assets/chat%20image.png" class="  flex-none max-md:hidden  w-full object-cover object-center rounded-3xl" alt="">
+    <img src="assets/chat%20image.png" class="flex-none max-md:hidden w-full object-cover object-center rounded-3xl" alt="">
   </div>
 </section>