diff --git a/www/app/lib/WherebyEmbed.tsx b/www/app/lib/WherebyEmbed.tsx new file mode 100644 index 00000000..c5abed44 --- /dev/null +++ b/www/app/lib/WherebyEmbed.tsx @@ -0,0 +1,63 @@ +"use client"; +import { useEffect, useRef } from "react"; +import "@whereby.com/browser-sdk/embed"; +import { Box, Button, HStack, useToast, Text } from "@chakra-ui/react"; + +interface WherebyEmbedProps { + roomUrl: string; +} + +export default function WherebyEmbed({ roomUrl }: WherebyEmbedProps) { + const wherebyRef = useRef(null); + + const toast = useToast(); + useEffect(() => { + if (roomUrl && !localStorage.getItem("recording-notice-dismissed")) { + const toastId = toast({ + position: "top", + duration: null, + render: ({ onClose }) => ( + + + + This webinar is being recorded. By continuing, you agree to our{" "} + + + + + + ), + }); + + return () => { + toast.close(toastId); + }; + } + }, [roomUrl, toast]); + + return ( + + ); +} diff --git a/www/app/webinars/[title]/page.tsx b/www/app/webinars/[title]/page.tsx new file mode 100644 index 00000000..6dd355b7 --- /dev/null +++ b/www/app/webinars/[title]/page.tsx @@ -0,0 +1,253 @@ +"use client"; +import { useEffect, useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { notFound } from "next/navigation"; +import useRoomMeeting from "../../[roomName]/useRoomMeeting"; +import dynamic from "next/dynamic"; +const WherebyEmbed = dynamic(() => import("../../lib/WherebyEmbed"), { + ssr: false, +}); + +export type WebinarDetails = { + params: { + title: string; + }; +}; + +export type Webinar = { + title: string; + startsAt: string; + endsAt: string; +}; + +enum WebinarStatus { + Upcoming = "upcoming", + Live = "live", + Ended = "ended", +} + +const ROOM_NAME = "webinar"; + +const WEBINARS: Webinar[] = [ + { + title: "ai-operational-assistant", + startsAt: "2025-02-05T17:00:00Z", // 12pm EST + endsAt: "2025-02-05T18:00:00Z", + }, + { + title: "ai-operational-assistant-dry-run", + startsAt: "2025-02-04T15:00:00Z", + endsAt: "2025-02-04T16:00:00Z", + }, +]; + +export default function WebinarPage(details: WebinarDetails) { + const title = details.params.title; + const webinar = WEBINARS.find((webinar) => webinar.title === title); + if (!webinar) { + return notFound(); + } + const startDate = new Date(Date.parse(webinar.startsAt)); + const endDate = new Date(Date.parse(webinar.endsAt)); + + const meeting = useRoomMeeting(ROOM_NAME); + const roomUrl = meeting?.response?.host_room_url + ? meeting?.response?.host_room_url + : meeting?.response?.room_url; + + const [status, setStatus] = useState(WebinarStatus.Ended); + const [countdown, setCountdown] = useState({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }); + + useEffect(() => { + const updateCountdown = () => { + const now = new Date(); + + if (now < startDate) { + setStatus(WebinarStatus.Upcoming); + const difference = startDate.getTime() - now.getTime(); + setCountdown({ + days: Math.floor(difference / (1000 * 60 * 60 * 24)), + hours: Math.floor((difference / (1000 * 60 * 60)) % 24), + minutes: Math.floor((difference / 1000 / 60) % 60), + seconds: Math.floor((difference / 1000) % 60), + }); + } else if (now < endDate) { + setStatus(WebinarStatus.Live); + } + }; + + updateCountdown(); + + const timer = setInterval(updateCountdown, 1000); + return () => clearInterval(timer); + }, [webinar]); + + if (status === WebinarStatus.Live) { + return <>{roomUrl && }; + } + + return ( +
+
+ + Monadical Logo + +
+ FREE WEBINAR +
+ +

+ Building AI-Powered +
+ Operational Assistants +

+ +

+ From Simple Automation to Strategic Implementation +

+ +

+ Wednesday, February 5th @ 12pm EST +

+ +
+ {[ + { value: countdown.days, label: "DAYS" }, + { value: countdown.hours, label: "HOURS" }, + { value: countdown.minutes, label: "MINUTES" }, + { value: countdown.seconds, label: "SECONDS" }, + ].map((item, index) => ( +
+
{item.value}
+
{item.label}
+
+ ))} +
+ +
+ + RSVP HERE + + +
+

+ AI is ready to deliver value to your organization, but it's not + ready to act autonomously. The highest-value applications of AI + today are assistants, which significantly increase the efficiency + of workers in operational roles. Software companies are reporting + 30% improvements in developer output across the board, and there's + no reason AI can't deliver the same kind of value to workers in + other roles. +

+

+ In this session,{" "} + + Monadical + {" "} + cofounder Max McCrea will dive into what operational assistants + are and how you can implement them in your organization to deliver + real, tangible value. +

+
+ +
+

What We'll Cover:

+
    + {[ + "What an AI operational assistant is (and isn't).", + "Example use cases for how they can be implemented across your organization.", + "Key security and design considerations to avoid sharing sensitive data with outside platforms.", + "Live demos showing both entry-level and advanced implementations.", + "How you can start implementing them to immediately unlock value.", + ].map((item, index) => ( +
  • + {item} +
    • + ))} +
+
+ +
+

Who Should Attend:

+
    + {[ + "Operations leaders looking to reduce manual work", + "Technical decision makers evaluating AI solutions", + "Teams concerned about data security and control", + ].map((item, index) => ( +
  • + {item} +
    • + ))} +
+
+ +

+ Plan to walk away with a clear understanding of how to implement AI + solutions in your organization, with live demos of actual + implementations and plenty of time for Q&A to address your specific + challenges. +

+ + + RSVP HERE + +
+
+ POWERED BY: +
+ + Reflector +
+

+ Reflector +

+

+ Capture the signal, not the noise +

+
+ +
+
+
+ ); +} diff --git a/www/app/webinars/ai-operational-assistant/page.tsx b/www/app/webinars/ai-operational-assistant/page.tsx deleted file mode 100644 index 15df3954..00000000 --- a/www/app/webinars/ai-operational-assistant/page.tsx +++ /dev/null @@ -1,167 +0,0 @@ -"use client"; -import { useEffect, useState } from 'react'; -import Link from 'next/link'; -import Image from 'next/image'; - -export default function WebinarPage() { - const [countdown, setCountdown] = useState({ - days: 0, - hours: 0, - minutes: 0, - seconds: 0 - }); - - useEffect(() => { - const targetDate = new Date('2025-02-05T17:00:00Z'); // 12pm EST - - const updateCountdown = () => { - const now = new Date(); - const difference = targetDate.getTime() - now.getTime(); - // If the target date has passed, show all zeros - if (difference < 0) { - setCountdown({ - days: 0, - hours: 0, - minutes: 0, - seconds: 0 - }); - return; - } - - setCountdown({ - days: Math.floor(difference / (1000 * 60 * 60 * 24)), - hours: Math.floor((difference / (1000 * 60 * 60)) % 24), - minutes: Math.floor((difference / 1000 / 60) % 60), - seconds: Math.floor((difference / 1000) % 60) - }); - }; - - const timer = setInterval(updateCountdown, 1000); - return () => clearInterval(timer); - }, []); - - return ( -
-
- - Monadical Logo - -
FREE WEBINAR
- -

- Building AI-Powered
Operational Assistants -

- -

- From Simple Automation to Strategic Implementation -

- -

- Wednesday, February 5th @ 12pm EST -

- -
- {[ - { value: countdown.days, label: 'DAYS' }, - { value: countdown.hours, label: 'HOURS' }, - { value: countdown.minutes, label: 'MINUTES' }, - { value: countdown.seconds, label: 'SECONDS' } - ].map((item, index) => ( -
-
{item.value}
-
{item.label}
-
- ))} -
- -
- - RSVP HERE - - -
-

- AI is ready to deliver value to your organization, but it's not ready to act autonomously. - The highest-value applications of AI today are assistants, which significantly increase the efficiency - of workers in operational roles. Software companies are reporting 30% improvements in developer output - across the board, and there's no reason AI can't deliver the same kind of value to workers in other roles. -

-

- In this session, Monadical cofounder Max McCrea will dive into what operational assistants are and - how you can implement them in your organization to deliver real, tangible value. -

-
- -
-

What We'll Cover:

-
    - {[ - "What an AI operational assistant is (and isn't).", - "Example use cases for how they can be implemented across your organization.", - "Key security and design considerations to avoid sharing sensitive data with outside platforms.", - "Live demos showing both entry-level and advanced implementations.", - "How you can start implementing them to immediately unlock value." - ].map((item, index) => ( -
  • - {item} -
    • - ))} -
-
- -
-

Who Should Attend:

-
    - {[ - "Operations leaders looking to reduce manual work", - "Technical decision makers evaluating AI solutions", - "Teams concerned about data security and control" - ].map((item, index) => ( -
  • - {item} -
    • - ))} -
-
- -

- Plan to walk away with a clear understanding of how to implement AI solutions in your organization, - with live demos of actual implementations and plenty of time for Q&A to address your specific challenges. -

- - - RSVP HERE - -
-
- POWERED BY:
- - Reflector -
-

- Reflector -

-

- Capture the signal, not the noise -

-
- -
-
-
- ); -}