updated event page

src/apps/devdoc/pages/events/[event].tsx

@@ -15,12 +15,16 @@ import { Button } from 'kl-design-system/atoms/button';
 import useCountdown from '~/app/utils/use-countdown';
 import ExternalLayout from '~/app/layout/alternate-layout';
 import { createComponents } from '~/app/layout/mdx-components';
+import { cn } from '~/app/utils/commons';
+import events from '../../../../../lib/shared-statics/events.json';
+import { useCallback, useMemo } from 'react';
+import { webinarUrl } from '~/app/utils/config';
 
 type IEvent = {
   event: string;
   content: any;
   frontMatter: {
-    title: string;
+    name: string;
     date: string;
     starttime: string;
     endtime: string;
@@ -68,25 +72,50 @@ const TimeSeparator = () => (
 export default function Event({ event }: { event: IEvent }) {
   const { content, frontMatter } = event;
 
-  const { banner, date, endtime, organizer, starttime, title, type } =
+  const { banner, date, endtime, organizer, starttime, name, type } =
     frontMatter;
 
   const countdown = useCountdown(new Date(`${date}T${starttime}`));
 
+  const countDownComponent = useMemo(() => {
+    return (
+      <div className="wb-grid wb-grid-cols-[36px_6px_36px_6px_36px_6px_36px] wb-gap-lg wb-justify-center">
+        <TimeItem value={`${countdown.days}`} unit="days" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.hours}`} unit="hours" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.minutes}`} unit="mins" />
+        <TimeSeparator />
+        <TimeItem value={`${countdown.seconds}`} unit="sec" />
+      </div>
+    );
+  }, [countdown]);
+
+  const components = useCallback(() => createComponents({}), []);
+
+  const isNow = useCallback(() => {
+    return (
+      countdown.days === 0 &&
+      countdown.hours === 0 &&
+      countdown.minutes === 0 &&
+      countdown.seconds === 0
+    );
+  }, [countdown]);
+
   return (
     <ExternalLayout frontMatter={frontMatter}>
       <Container
         className={cn(
           'wb-min-h-[calc(100vh-76px)] wb-flex-row',
-          'lg:wb-m-auto lg:!wb-max-w-[896px] wb-w-full wb-px-3xl md:!wb-px-5xl lg:!wb-px-8xl xl:!wb-px-11xl 2xl:!wb-px-12xl xl:!wb-max-w-[1024px] 2xl:!wb-max-w-[1120px] 3xl:!wb-min-w-[1408px] lg:!wb-box-content'
+          'lg:wb-m-auto lg:!wb-max-w-[896px] wb-w-full wb-px-3xl md:!wb-px-5xl lg:!wb-px-8xl xl:!wb-px-11xl 2xl:!wb-px-12xl xl:!wb-max-w-[1024px] 2xl:!wb-max-w-[1120px] 3xl:!wb-min-w-[1408px] lg:!wb-box-content',
         )}
       >
-        <Block title={title}>
+        <Block title={name}>
           <ResponsiveContainer className="wb-grid-rows-1">
-            <div className="wb-grid wb-grid-rows-[auto_auto] md:wb-grid-rows-[380px_64px_auto] lg:wb-grid-rows-[480px_auto] wb-gap-3xl md:wb-gap-0 lg:wb-gap-5xl wb-relative">
+            <div className="wb-grid wb-grid-rows-[auto_auto] md:wb-grid-rows-[380px_auto] lg:wb-grid-rows-[480px_auto] wb-gap-3xl md:wb-gap-5xl wb-relative">
               <GraphItem>
                 <ResponsiveImage
-                  alt={title}
+                  alt={name}
                   rmobile={`/events/${banner}-mobile.jpg`}
                   rmobileDark={`/events/${banner}-mobile.jpg`}
                   r768={`/events/${banner}-768.jpg`}
@@ -102,35 +131,20 @@ export default function Event({ event }: { event: IEvent }) {
                   className="wb-w-full md:wb-h-full"
                 />
                 <div className="wb-p-3xl wb-flex wb-flex-col md:wb-flex-row wb-gap-5xl md:wb-absolute wb-bg-surface-basic-default md:wb-z-50 md:wb-bottom-0 md:wb-left-1/2 md:-wb-translate-x-1/2 md:wb-translate-y-5xl md:wb-rounded md:wb-border md:wb-border-border-dark">
-                  <div className="wb-grid wb-grid-cols-[36px_6px_36px_6px_36px_6px_36px] wb-gap-lg wb-justify-center">
-                    <TimeItem value={`${countdown.days}`} unit="days" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.hours}`} unit="hours" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.minutes}`} unit="mins" />
-                    <TimeSeparator />
-                    <TimeItem value={`${countdown.seconds}`} unit="sec" />
-                  </div>
+                  {countDownComponent}
                   <Button
                     block
-                    content="Register now"
+                    content={isNow() ? 'Join now' : 'Register now'}
                     variant="primary"
                     linkComponent={Link}
                     toLabel="href"
-                    to={`https://webinar.kloudlite.io/${event.hash}/join`}
+                    to={`${webinarUrl}/${event.event}/join`}
                   />
                 </div>
               </GraphItem>
-              <GraphItem
-                lines={{
-                  bottom: false,
-                  top: false,
-                }}
-                className="wb-hidden md:wb-block lg:wb-hidden"
-              />
               <GraphItem className="wb-grid wb-grid-cols-1 md:wb-grid-cols-[auto_288px] wb-gap-3xl md:wb-gap-5xl">
                 <div className="wb-border wb-border-r-[1.5px] wb-border-border-dark wb-bg-surface-basic-subdued wb-p-5xl">
-                  <MDXRemote {...content} components={createComponents({})} />
+                  <MDXRemote {...content} components={components} />
                 </div>
                 <div className="wb-border wb-border-l-[1.5px] wb-border-border-dark wb-bg-surface-basic-subdued wb-p-5xl wb-flex wb-flex-col wb-gap-5xl">
                   <div className="wb-flex wb-flex-col wb-gap-2xl wb-pb-5xl wb-border-b wb-border-border-default">
@@ -179,15 +193,9 @@ export default function Event({ event }: { event: IEvent }) {
 
 // Generates `/posts/1` and `/posts/2`
 export async function getStaticPaths() {
-  const filePath = path.join(process.cwd(), 'pages', 'events', '_md');
-
-  const files = fs.readdirSync(filePath, 'utf8');
-
-  const paths = files
-    .filter((f) => f.endsWith('.md'))
-    .map((f) => {
-      return { params: { event: f.replace(/\.md$/, '') } };
-    });
+  const paths = Object.keys(events).map((event) => {
+    return { params: { event } };
+  });
 
   return {
     paths,
@@ -202,7 +210,7 @@ export async function getStaticProps({ params }: any) {
     'pages',
     'events',
     '_md',
-    `${params.event}.md`
+    `${params.event}.mdx`,
   );
 
   const fileContents = fs.readFileSync(filePath, 'utf8');
@@ -217,7 +225,8 @@ export async function getStaticProps({ params }: any) {
   const event = {
     event: params.event,
     content: contentHtml,
-    frontMatter: data,
+    // @ts-ignore
+    frontMatter: { ...data, ...events[params.event] },
   };
 
   return {

src/apps/devdoc/pages/events/_md/code-unbound-new-age-development-environments.mdx

@@ -0,0 +1,31 @@
+---
+banner: "1"
+organizer: 
+  author: "Karthik Thriumalasetti"
+  title: "Founder & CEO, Kloudlite"
+---
+
+### Host: 
+
+Kloudlite – A Developer Experience Company
+
+### Overview:
+
+Get ready to revolutionize your development process with our latest event, "New Era of Development with Workspaces & Environments." This isn’t just another tech talk—it’s a deep dive into the future of development, where traditional roadblocks like build and deploy steps are a thing of the past.
+
+### What to Expect:
+
+- No Build, No Deploy: Discover how to instantly see your code in action without the delays of building or deploying. Kloudlite is leading the charge in this evolution, making development faster, smoother, and more productive.
+- Seamless Integration: Learn how to connect your local workspaces directly with remote environments, ensuring your development setup is always in sync with production.
+- Boost Productivity: Whether you're working on microservices, cloud-native applications, or distributed systems, we’ll show you how to streamline your workflows and collaborate effortlessly across teams.
+
+### Why Attend?
+
+This event is your opportunity to be part of the next generation of developers who are embracing innovative workflows that eliminate friction and boost efficiency. Hosted by Kloudlite, a tech pioneer from India, we’ll share insights on how we’ve evolved our platform to empower developers like you.
+
+
+### Don’t Miss Out!
+
+Join us and transform the way you code—say goodbye to the old way of doing things and embrace the future with Kloudlite.
+
+

src/apps/devdoc/web/utils/config.tsx

@@ -17,6 +17,7 @@ export const siteDesc =
   'Kloudlite is a remote-local development environment platform designed to streamline the workflow for developers working on distributed applications. By integrating both local and remote environments through Kubernetes, Kloudlite ensures a seamless, productive, and more connected development experience.';
 export const basePath = 'https://kloudlite.io';
 export const authUrl = `${process.env.AUTH_URL}` || 'https://auth.kloudlite.io';
+export const webinarUrl = 'https://webinar.kloudlite.io';
 export const contactUrl = `${process.env.CONTACT_URL}`;
 export const consoleUrl =
   `${process.env.CONSOLE_URL}` || 'https://console.kloudlite.io';
@@ -62,7 +63,7 @@ const BrandMenu = ({ className }: { className?: string }) => {
     <div
       className={cn(
         'wb-flex wb-flex-col wb-gap-7xl md:wb-gap-3xl lg:wb-pr-4xl wb-order-last md:wb-order-first md:wb-justify-between md:wb-h-full',
-        className
+        className,
       )}
     >
       <div className="wb-flex wb-flex-row">

src/apps/devdoc/web/utils/const.tsx

@@ -87,7 +87,7 @@ import FibrSvg from '../icons/Fibr';
 import PlaxonicSvg from '../icons/Plaxonic';
 import RedPlutoSvg from '../icons/RedPluto';
 import TalescaleSvg from '../icons/Talescale';
-import { authUrl } from './config';
+import { authUrl, webinarUrl } from './config';
 
 export const linkedInPrefix = 'https://www.linkedin.com/in/';
 export const githubPrefix = 'https://github.com/';
@@ -864,11 +864,11 @@ const consts = {
         </div>
       </>
     ),
-    time: '12:00-1:00 pm',
-    date: 'Sep 14, 2024',
+    time: '12:15-1:15 pm',
+    date: 'Sep 21, 2024',
     enabled: false,
     linkContent: 'Register today',
-    link: `${authUrl}/signup`,
+    link: `${webinarUrl}/code-unbound-new-age-development-environments/join`,
   },
   contactUs: {
     cookies: {