Merge pull request #738 from WeMakeDevs/feat--kafkta-webinar

feat:  kafkta webinar

package.json

@@ -33,6 +33,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/Cards/WebinarCard.jsx

@@ -1,47 +1,27 @@
 import { BsCalendar, BsClock } from 'react-icons/bs';
 
+import { getTime, getTimeZone } from '@/lib/utils';
+
 import ArrowLink from '@/components/links/ArrowLink';
 import ButtonLink from '@/components/links/ButtonLink';
 
 const WebinarCard = ({ img, title, time, description, slug }) => {
   return (
-    <div className='overflow-hidden rounded-lg border border-content/50 bg-gradient-to-br from-transparent to-base-100/50'>
-      <img src={img} alt={title + 'banner'} />
-      <div className='p-6'>
-        <h3>{title}</h3>
-        <p
-          style={{
-            marginTop: '1.3rem',
-          }}
-        >
-          {description}
-        </p>
-        <p
-          style={{
-            marginTop: '1.3rem',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '.5rem',
-          }}
-          className='h3'
-        >
+    <div className='overflow-hidden rounded-2xl bg-content/5 p-4'>
+      <img
+        src={img}
+        alt={title + 'banner'}
+        className='aspect-video w-full rounded-lg object-cover object-center'
+      />
+      <div className='pt-6 pb-3'>
+        <h3 className='mb-5 line-clamp-2'>{title}</h3>
+        <p className='line-clamp-3'>{description}</p>
+        <p className='h3 mt-5 flex items-center gap-2'>
           <BsCalendar /> {new Date(time).toDateString()}
         </p>
-        <p
-          style={{
-            marginTop: '1.3rem',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '.5rem',
-          }}
-          className='h3'
-        >
-          <BsClock /> {new Date(time).toLocaleTimeString()}{' '}
-          {/\((.*)\)/
-            .exec(new Date(time).toString())[1]
-            .split(' ')
-            .map((i) => i[0].toUpperCase())
-            .join('')}
+        <p className='h3 mt-5 flex items-center gap-2'>
+          <BsClock />
+          {getTime(time)} {getTimeZone(time)}
         </p>
         <ArrowLink
           as={ButtonLink}

src/content/Hackathons/syncloop.js

@@ -1,3 +1,6 @@
+import FirstPrize from 'assets/hackathon/syncloop/1st.png';
+import SecondPrize from 'assets/hackathon/syncloop/2nd.png';
+import ThirdPrize from 'assets/hackathon/syncloop/3rd.png';
 import SyncloopBanner from 'assets/hackathon/syncloop/Banner.png';
 import HeroImg from 'assets/hackathon/syncloop/theme.png';
 
@@ -60,30 +63,43 @@ const SyncloopHackathon = {
     },
   ],
   // !NOTE: Please add the respective prize list
-  prizes: [
+  tracks: [
     {
       title: 'Real-Time Data Synchronisation',
       description:
         'Build APIs that enable real-time synchronisation of data between multiple applications.',
-      gift: ['To be announced'],
     },
     {
       title: 'API Integration Showcase',
       description:
         'Participants can create projects that demonstrate creative integration of Syncloop APIs with popular platforms and services.',
-      gift: ['To be announced'],
     },
     {
       title: 'Developers Toolkit',
       description:
         'Create tools, plugins, or libraries that extend the capabilities of the Syncloop platform and enhance developers productivity.',
-      gift: ['To be announced'],
     },
     {
       title: 'Industry-Specific Solutions',
       description:
         'Hackathon participants can design API-driven solutions tailored for specific industries such as healthcare, e-commerce, education, etc.',
-      gift: ['To be announced'],
+    },
+  ],
+  prizes: [
+    {
+      title: '1st Place',
+      description: 'Acer Nitro 23.8 Inch Full HD Gaming Monitor',
+      image: FirstPrize,
+    },
+    {
+      title: '2nd Place',
+      description: 'OnePlus Nord Watch',
+      image: SecondPrize,
+    },
+    {
+      title: '3rd Place',
+      description: 'Sony Wireless On-Ear Headphones',
+      image: ThirdPrize,
     },
   ],
   judges: [],

src/content/Webinars/KafkaWebinar.js

@@ -0,0 +1,40 @@
+import Poster from '@/assets/webinars/kafka/poster.png';
+import Speaker from '@/assets/webinars/kafka/speaker.jpeg';
+
+import {
+  IndividualWebinarCompletedPageHeader,
+  IndividualWebinarPageFAQ,
+} from './IndividualWebinarPageContent';
+
+const KafkaWebinar = {
+  header: IndividualWebinarCompletedPageHeader,
+  name: 'Deploying Kafka Brokers in Multiple Clouds with KubeSlice',
+  description:
+    'Apache Kafka has emerged as the central nervous system for businesses enabling real-time event streaming. This webinar will explore how KubeSlice simplifies the deployment of Kafka across multi-cloud environments, unlocking new use cases and driving business value.',
+  poster: Poster,
+  videoUrl: null,
+  takeaways: [
+    'Understanding the Kafka Revolution',
+    'The shift to a centralized event streaming paradigm.',
+    'Real-world examples of Kafka deployment in retail, insurance, banking, and more.',
+    'Seamless Kafka Deployment across Multi-Cluster Environments with KubeSlice Deploying Kafka brokers across various Kubernetes clusters.',
+    'Application in single clouds, multi-cloud, and hybrid environments. Optimizing Kafka Communication',
+    'Strategies for resilience, scalability, and high availability. Real-time analytics and actionable insights.',
+    'Unified Control, Security, and Compliance with KubeSlice Unified management of resources and access privileges.',
+    'Use Cases and Real-World Applications with Multi-Cluster Kafka',
+  ],
+  time: '17 Augest 2023 16:00:00 GMT',
+  speakers: [
+    {
+      name: 'Prasad Dorbala',
+      description: 'Chief Product Officer at Avesha',
+      linkedin: 'prasad-dorbala',
+      img: Speaker,
+    },
+  ],
+  register: 'KafkaWebinar',
+  slug: 'multiple-clouds-with-kubeslice',
+  faq: IndividualWebinarPageFAQ,
+};
+
+export default KafkaWebinar;

src/content/Webinars/index.content.js

@@ -1,9 +1,9 @@
 import CostOptimizationWebinar from '@/content/Webinars/CostOptimizationWebinar';
 import { IndividualWebinarPageFAQ } from '@/content/Webinars/IndividualWebinarPageContent';
+import KafkaWebinar from '@/content/Webinars/KafkaWebinar';
 import SimplifiedDeploymentWebinar from '@/content/Webinars/SimplifiedDeployment';
 import ZeroDowmtime from '@/content/Webinars/ZeroDowntimeKubeslice';
 
-// import AccessControlWebinar from './AccessControlWebinar';
 import BPFWebinar from './BPFWebinar';
 import ChatOpsWebinar from './ChatOpsWebinar';
 import GopherWebinar from './GopherWebinar';
@@ -38,7 +38,14 @@ const WebinarPageContent = {
 export default WebinarPageContent;
 
 export const webinar = [
-  // Past
+  {
+    img: KafkaWebinar.poster,
+    title: KafkaWebinar.name,
+    description: KafkaWebinar.description,
+    time: KafkaWebinar.time,
+    slug: KafkaWebinar.slug,
+    details: KafkaWebinar,
+  },
   {
     img: BPFWebinar.poster,
     title: BPFWebinar.name,
@@ -63,7 +70,6 @@ export const webinar = [
     slug: GopherWebinar.slug,
     details: GopherWebinar,
   },
-  // Upcoming
   {
     img: SimplifiedDeploymentWebinar.poster,
     title: SimplifiedDeploymentWebinar.name,
@@ -72,14 +78,7 @@ export const webinar = [
     slug: SimplifiedDeploymentWebinar.slug,
     details: SimplifiedDeploymentWebinar,
   },
-  // {
-  //   img: AccessControlWebinar.poster,
-  //   title: AccessControlWebinar.name,
-  //   description: AccessControlWebinar.description,
-  //   time: AccessControlWebinar.time,
-  //   slug: AccessControlWebinar.slug,
-  //   details: AccessControlWebinar,
-  // },
+
   {
     img: ZeroDowmtime.poster,
     title: ZeroDowmtime.name,

src/pages/PerticularhackathonPage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AiOutlineArrowRight } from 'react-icons/ai';
 import { BsTrophy } from 'react-icons/bs';
+import { GiSprint } from 'react-icons/gi';
 import { HiOutlineArrowRight } from 'react-icons/hi';
 import { MdOutlineLabelImportant } from 'react-icons/md';
 import { VscDebugBreakpointLogUnverified } from 'react-icons/vsc';
@@ -92,17 +93,15 @@ const PerticularhackathonPage = ({ content }) => {
             Choose the track that best suits your skills and interests and win
             prizes worth of $1200
           </p>
-          <p className='h4 mt-2 font-normal text-gray-400'>
-            Potential internship offer to participants who perform well!
-          </p>
+
           <hr className='styled-hr mx-auto my-6' />
           <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
-            {content.prizes.map((item) => (
+            {content.tracks.map((item) => (
               <div
                 className='rounded-xl bg-base-200 p-6 text-left'
                 key={item.title}
               >
-                <BsTrophy
+                <GiSprint
                   style={{ fill: 'url(#blue-gradient)' }}
                   className='h2'
                 />
@@ -152,19 +151,68 @@ const PerticularhackathonPage = ({ content }) => {
                     </ul>
                   </>
                 )}
-                <p className='mt-6 mb-3 text-primary-disable'>Prizes worth</p>
-                <ul className='flex flex-col gap-2'>
-                  {item.gift.map((gift) => (
-                    <li className='flex items-center gap-2' key={gift}>
-                      <AiOutlineArrowRight className='shrink-0' /> {gift}
-                    </li>
-                  ))}
-                </ul>
+                {item.gift && (
+                  <>
+                    <p className='mt-6 mb-3 text-primary-disable'>
+                      Prizes worth
+                    </p>
+                    <ul className='flex flex-col gap-2'>
+                      {item.gift.map((gift) => (
+                        <li className='flex items-center gap-2' key={gift}>
+                          <AiOutlineArrowRight className='shrink-0' /> {gift}
+                        </li>
+                      ))}
+                    </ul>
+                  </>
+                )}
+                {item.image && (
+                  <figure className='mt-3 flex aspect-square w-full items-center justify-center rounded-lg bg-content/10'>
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className='rounded-md object-cover'
+                    />
+                  </figure>
+                )}
               </div>
             ))}
           </div>
         </div>
       </section>
+      {content.prizes.length > 0 && (
+        <section id='tracks'>
+          <div className='layout py-20 text-center'>
+            <h2 className='h1 mb-4'>Prizes for this hackathon</h2>
+
+            <p className='h4 mt-2 font-normal text-gray-400'>
+              Potential internship offer to participants who perform well!
+            </p>
+            <hr className='styled-hr mx-auto my-6' />
+            <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+              {content.prizes.map((item) => (
+                <div
+                  className='rounded-xl bg-base-200 p-6 text-left'
+                  key={item.title}
+                >
+                  <BsTrophy
+                    style={{ fill: 'url(#blue-gradient)' }}
+                    className='h2'
+                  />
+                  <h3 className='mt-5 font-normal'>{item.title}</h3>
+                  <p className='mt-4 whitespace-pre-line'>{item.description}</p>
+                  <figure className='mt-3 flex aspect-square w-full items-center justify-center rounded-lg bg-content/10'>
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className='rounded-md object-cover'
+                    />
+                  </figure>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
       {/* Judges */}
       <section id='judges'>
         <div className='layout py-20'>