From 4c779f9498cb9ba9db2abb47e62b8caeb36322eb Mon Sep 17 00:00:00 2001
From: samuel161415 <samuelnegalign1@gmail.com>
Date: Wed, 29 May 2024 16:27:15 +0300
Subject: [PATCH] sami.fix: fixing safari issue on the landing page and also
 adding and commenting the share feature

---
 .../components/landing/landing.component.html | 23 ++++++++++---------
 .../components/landing/landing.component.ts   | 18 +++++++++++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html
index ef0abda..105dde7 100644
--- a/src/app/components/landing/landing.component.html
+++ b/src/app/components/landing/landing.component.html
@@ -1,25 +1,25 @@
-<div id="landing" class="min-h-screen pt-[0px] lg:pt-[0px] bg-blue-950 bg-opacity-50">
-  <video autoplay [muted]="isMuted" loop class="w-full h-[100vh] object-cover absolute z-0">
+<div id="landing" class="min-h-screen pt-[0px] lg:pt-[0px] bg-blue-950 bg-opacity-50 relative">
+  <video autoplay [muted]="isMuted" loop class="w-full h-full object-cover absolute z-0">
     <source src="https://res.cloudinary.com/eskalate/video/upload/v1716272816/Hackathon/Hackathon_2023_Highlights_RAW_V1.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
   <div
-    class="min-h-[100vh] lg:pt-[18vh] px-20 flex flex-col justify-center items-center  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 items-start  z-1 relative drop-shadow-2xl bg-black bg-opacity-50"
   >
  
-    <div class="grid grid-cols-2 md:grid-cols-12 text-white">
-      <section class="left col-span-2 md:col-span-6  md:p-5 md:h-full flex flex-col items-center md:items-start justify-between ">
+    <div class=" text-white px-5">
+      <section  class="bg-black bg-opacity-30 left col-span-2  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"
         >
           <!-- A2SV Hackathon, 2023 -->
           <h1
-            class="text-left w-full max-md:text-center text-xl font-bold md:text-3xl lg:text-5xl"
+            class=" text-left w-full max-md:text-center text-xl font-bold md:text-3xl lg:text-5xl"
           >
-            A2SV Hackathon, 2024
+            A2SV Hackathon, 20244
           </h1>
           <h1
-            class="text-left w-full max-md:text-center text-xl mt-6  md:text-2xl lg:text-3xl"
+            class="text-left w-full max-md:text-center text-xl mt-6 mb-10 md:text-2xl lg:text-3xl"
           >
             AI for Impact - Solving Africa's Challenges
           </h1>
@@ -34,7 +34,7 @@ <h2><app-count-down class="inline-block pl-0 max-md:text-center"></app-count-dow
         <a href="https://form.typeform.com/to/XoEqw6vQ" target="_blank">
           <button
             (click)="setActiveButton('signup', 'https://form.typeform.com/to/XoEqw6vQ')"
-            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     {{
+            class="text-sm rounded-full px-5 py-2.5 mr-2 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 === 'signup'
                 ? 'bg-purple-500   '
                 : 'bg-purple-700  '
@@ -46,7 +46,7 @@ <h2><app-count-down class="inline-block pl-0 max-md:text-center"></app-count-dow
           <a href="https://form.typeform.com/to/ShJTk212" target="_blank">
             <button
               (click)="setActiveButton('mentor', 'https://form.typeform.com/to/ShJTk212')"
-              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 {{
+              class="max-md:mt-5  mr-2 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 === 'mentor'
                   ? 'bg-purple-500   '
                   : 'bg-purple-700  '
@@ -58,7 +58,7 @@ <h2><app-count-down class="inline-block pl-0 max-md:text-center"></app-count-dow
           <a href="https://form.typeform.com/to/opvWnrn7" target="_blank">
             <button
               (click)="setActiveButton('partner', 'https://form.typeform.com/to/opvWnrn7')"
-              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 {{
+              class="max-md:mt-5  mr-2 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 === 'partner'
                   ? 'bg-purple-500   '
                   : 'bg-purple-700  '
@@ -67,6 +67,7 @@ <h2><app-count-down class="inline-block pl-0 max-md:text-center"></app-count-dow
               Partner with us
             </button>
           </a>
+          <!-- <button (click)="shareImage()" 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 ">Share</button> -->
           
         </div>
           
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
index 8d02b46..2168301 100644
--- a/src/app/components/landing/landing.component.ts
+++ b/src/app/components/landing/landing.component.ts
@@ -79,4 +79,22 @@ export class LandingComponent {
     this.activeButton = buttonName;
     window.open(link, '_blank');
   }
+  shareImage() {
+    const imageUrl = 'https://res.cloudinary.com/eskalate/image/upload/v1716850665/Hackathon-2024/Hackathon_Partner_With_Us.png'; // Replace with your image URL
+    const imageTitle = 'Check out this image!';
+
+    if (navigator.share) {
+      navigator.share({
+        title: imageTitle,
+        text: 'Sharing this awesome image!',
+        url: imageUrl
+      }).then(() => {
+        console.log('Thanks for sharing!');
+      }).catch((error) => {
+        console.error('Error sharing:', error);
+      });
+    } else {
+      console.warn('Web Share API is not supported in this browser.');
+    }
+  }
 }