From 7b6be17e497b7678fd16a14bae33641fd5a9c46a Mon Sep 17 00:00:00 2001
From: V Thulisile Sibanda <66913810+thulieblack@users.noreply.github.com>
Date: Tue, 7 May 2024 16:11:46 +0200
Subject: [PATCH] feat: add london cfp banner (#2931)

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>%0ACo-authored-by: akshatnema <akshatnema.school@gmail.com>
---
 components/campaigns/AnnoucementHero.js | 126 +++++++++++-------------
 1 file changed, 56 insertions(+), 70 deletions(-)

diff --git a/components/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js
index 26e227297ed2..dde5686b2f77 100644
--- a/components/campaigns/AnnoucementHero.js
+++ b/components/campaigns/AnnoucementHero.js
@@ -20,14 +20,11 @@ function shouldShowBanner(cfpDeadline) {
 }
 
 export default function AnnouncementHero({ className = '', small = false, hideVideo = false }) {
-  //return null;
-  
+
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const cfpDeadlineIndia = '2023-11-30T06:00:00Z'
-  const cfpDeadlineFrance = '2023-12-06T06:00:00Z'
-  const showBannerIndia = shouldShowBanner(cfpDeadlineIndia);
-  const showBannerFrance = shouldShowBanner(cfpDeadlineFrance);
+  const cfpDeadlineLondon = '2024-07-12T06:00:00Z';
+  const showBannerLondon = shouldShowBanner(cfpDeadlineLondon);
 
   const Banner = ({ title, dateLocation, cfaText, eventName, cfpDeadline, link, city, activeBanner }) => {
     return (
@@ -65,24 +62,14 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
 
   const banners = [
     {
-      title: "AsyncAPI Conf",
-      city: "Bengaluru",
-      dateLocation: "30th of November, 2023 | Bengaluru, India",
-      cfaText: "Grab Free Tickets",
-      eventName: "AACoT'23 Bengaluru Edition",
-      cfpDeadline: cfpDeadlineIndia,
-      link: "https://conference.asyncapi.com/venue/bangalore",
-      show: showBannerIndia
-    },
-    {
-      title: "AsyncAPI Conf",
-      city: "Paris",
-      dateLocation: "8th of December, 2023 | Paris, France",
-      cfaText: "Get Free Tickets",
-      eventName: "AACoT'23 Paris Edition",
-      cfpDeadline: cfpDeadlineFrance,
-      link: "https://ticket.apidays.global/event/apidays-paris-2023/8a1f3904-e2be-4c69-a880-37d2ddf1027d/cart?coupon=ASYNCAPICONF23",
-      show: showBannerFrance
+      title: "AsyncAPI Conf on Tour'24",
+      city: "London",
+      dateLocation: "18 - 19 of September, 2024 | United Kingdom, London",
+      cfaText: "Apply To Speak",
+      eventName: "the end of Call for Speakers",
+      cfpDeadline: cfpDeadlineLondon,
+      link: "https://conference.asyncapi.com/venue/London",
+      show: showBannerLondon
     }
   ];
 
@@ -109,50 +96,49 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
     };
   }, [activeIndex]);
 
-  return ''
-  // return (
-  //   <Container as="section" padding='' className={`text-center`}>
-  //     <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
-  //       <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
-  //         <ArrowLeft className='w-4 text-white' />
-  //       </div>
-  //       <div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
-  //         <div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
-  //         {banners.map((banner, index) => (
-  //           banner.show && (
-  //             <Banner
-  //               key={index}
-  //               title={banner.title}
-  //               dateLocation={banner.dateLocation}
-  //               cfaText={banner.cfaText}
-  //               eventName={banner.eventName}
-  //               cfpDeadline={banner.cfpDeadline}
-  //               link={banner.link}
-  //               city={banner.city}
-  //               activeBanner={index === activeIndex % len}
-  //             />
-  //           )
-  //         ))}
-  //         </div>
-  //         <div className="flex justify-center m-auto">
-  //           {banners.map((banner, index) => (
-  //             <div
-  //               key={index}
-  //               className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
-  //                 activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
-  //               }`}
-  //               onClick={() => goToIndex(index)}
-  //             />
-  //           ))}
-  //     </div>
-  //       </div>
-  //       <div
-  //         className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
-  //         onClick={goToNext}
-  //       >
-  //         <ArrowRight className='text-white' />
-  //       </div>
-  //     </div>
-  //   </Container>
-  // );
+  return (
+    <Container as="section" padding='' className={`text-center`}>
+      <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
+        {numberOfVisibleBanners > 1 && <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
+          <ArrowLeft className='w-4 text-white' />
+        </div>}
+        <div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
+          <div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
+          {banners.map((banner, index) => (
+            banner.show && (
+              <Banner
+                key={index}
+                title={banner.title}
+                dateLocation={banner.dateLocation}
+                cfaText={banner.cfaText}
+                eventName={banner.eventName}
+                cfpDeadline={banner.cfpDeadline}
+                link={banner.link}
+                city={banner.city}
+                activeBanner={index === activeIndex % len}
+              />
+            )
+          ))}
+          </div>
+          <div className="flex justify-center m-auto">
+            {banners.map((banner, index) => (
+              <div
+                key={index}
+                className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
+                  activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
+                }`}
+                onClick={() => goToIndex(index)}
+              />
+            ))}
+          </div>
+        </div>
+        {numberOfVisibleBanners > 1 && <div
+          className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
+          onClick={goToNext}
+        >
+          <ArrowRight className='text-white' />
+        </div>}
+      </div>
+    </Container>
+  );
 }