Updated Upcoming Event (#115)

Signed-off-by: Hrishav <[email protected]>

_includes/NavbarBanner.jsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { Container, ContainerFluid } from "@layouts/Container"
+import styles from "@includes/scss/Navbar.module.scss"
+import { Paragraph } from "./Texts"
+import Link from "next/link"
+
+const NavbarBanner = () => {
+  return (
+    <ContainerFluid className={styles.bannerBackground}>
+      <Container className="h-8 w-full flex items-center justify-center gap-1">
+        <Paragraph dark bold secondary>
+          Meet us at Kubecon NA 2024, Kiosk: #16A
+        </Paragraph>
+        <Link href="https://litmuschaos.io/blog/litmuschaos-is-joining-kubecon-cloudnativecon-north-america-2024-3blg">
+          <a
+            className="text-white text-sm font-semibold underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn More
+          </a>
+        </Link>
+      </Container>
+    </ContainerFluid>
+  )
+}
+
+export default NavbarBanner

_includes/TopNavbar.jsx

@@ -21,7 +21,7 @@ import Image from "next/image"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { RegularButton, TextLink } from "./CTA"
-import { Paragraph } from "./Texts"
+import NavbarBanner from "./NavbarBanner"
 
 const TopNavbar = () => {
   const url = "https://api.github.com/repos/litmuschaos/litmus"
@@ -92,6 +92,7 @@ const TopNavbar = () => {
             : ""
         }`}
       >
+        <NavbarBanner />
         <Container className={styles.navbarCont}>
           <nav className={styles.navbar}>
             <div className={styles.logoCont}>

_includes/scss/Navbar.module.scss

@@ -334,3 +334,7 @@ div.gitPart {
     }
   }
 }
+
+div.bannerBackground {
+  background: linear-gradient(90deg, #b1479a 0%, #6a2c88 100%);
+}

components/homepage/UpcomingEvent.jsx

@@ -15,24 +15,33 @@ const UpcomingEvent = () => {
             <img
               src="/landing_images/nextEvent.png"
               alt="LitmusChaos"
-              className="w-full h-72 object-cover object-center"
+              className="w-full h-auto object-cover object-center"
             />
           </div>
           <div className={styles.textContainer}>
             <div className={styles.topText}>
               <p className={styles.gradText}>UPCOMING COMMUNITY EVENT</p>
               <h3 className="text-xl sm:text-2xl md:text-3xl font-medium mt-2 text-primary">
-                LitmusChaosCon
+                KubeCon NA 2024
               </h3>
-              <h4 className="text-base sm:text-lg md:text-xl font-medium text-primary mt-1 md:mt-4">
-                {GetLocalTime("12 Sep 2024 00:00:00 +0530").dateString}
+              <h4 className="text-base sm:text-lg md:text-xl font-medium text-primary mt-1 md:mt-4 mb-2">
+                {GetLocalTime("13 Nov 2024 00:00:00 +0530").dateString}
+                {" - "}
+                {GetLocalTime("15 Nov 2024 00:00:00 +0530").dateString}
               </h4>
               <Paragraph>
-                LitmusChaos Con is an event surrounding all things LitmusChaos
-                and Chaos Engineering. It is a platform for SREs, QA Engineers,
-                Developers, Performance Engineers and Students to exchange their
-                ideas, experience, contribution stories and usage of
-                LitmusChaos.
+                Meet LitmusChaos at KubeCon North America 2024.
+                <div className="text-sm my-1">
+                  <span className="font-semibold">Location:</span> Level 1 |
+                  Halls A-C + 1-5 | Project Pavilion (Hall 1)
+                </div>
+                <div className="text-sm mb-1">
+                  <span className="font-semibold">Kiosk:</span> #16A
+                </div>
+                <div className="text-sm">
+                  <span className="font-semibold">Shift:</span> Half-shift AM
+                  schedule
+                </div>
               </Paragraph>
             </div>
             <TextLink

pages/index.jsx

@@ -4,6 +4,7 @@ import Community from "@components/homepage/Community"
 import Features from "@components/homepage/Features"
 import Hero from "@components/homepage/Hero"
 import Testimonials from "@components/homepage/Testimonials"
+import UpcomingEvent from "@components/homepage/UpcomingEvent"
 import { PreFooter } from "@includes/BottomFooter"
 import SEO from "@lib/SEO"
 
@@ -12,6 +13,7 @@ const Home = () => {
     <>
       <SEO page={""} />
       <Hero />
+      <UpcomingEvent />
       <Adopters />
       <AboutLitmus />
       <Features />