mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
Webinar dry run
This commit is contained in:
63
www/app/lib/WherebyEmbed.tsx
Normal file
63
www/app/lib/WherebyEmbed.tsx
Normal file
@@ -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<HTMLElement>(null);
|
||||
|
||||
const toast = useToast();
|
||||
useEffect(() => {
|
||||
if (roomUrl && !localStorage.getItem("recording-notice-dismissed")) {
|
||||
const toastId = toast({
|
||||
position: "top",
|
||||
duration: null,
|
||||
render: ({ onClose }) => (
|
||||
<Box p={4} bg="white" borderRadius="md" boxShadow="md">
|
||||
<HStack justify="space-between" align="center">
|
||||
<Text>
|
||||
This webinar is being recorded. By continuing, you agree to our{" "}
|
||||
<Button
|
||||
as="a"
|
||||
href="https://monadical.com/privacy"
|
||||
variant="link"
|
||||
color="blue.600"
|
||||
textDecoration="underline"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy Policy
|
||||
</Button>
|
||||
</Text>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
localStorage.setItem("recording-notice-dismissed", "true");
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
),
|
||||
});
|
||||
|
||||
return () => {
|
||||
toast.close(toastId);
|
||||
};
|
||||
}
|
||||
}, [roomUrl, toast]);
|
||||
|
||||
return (
|
||||
<whereby-embed
|
||||
ref={wherebyRef}
|
||||
room={roomUrl}
|
||||
style={{ width: "100vw", height: "100vh" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
253
www/app/webinars/[title]/page.tsx
Normal file
253
www/app/webinars/[title]/page.tsx
Normal file
@@ -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 && <WherebyEmbed roomUrl={roomUrl} />}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-2 py-8 bg-gray-50">
|
||||
<div className="bg-white rounded-3xl px-4 md:px-36 py-4 shadow-md mx-auto">
|
||||
<Link href="https://www.monadical.com" target="_blank">
|
||||
<img
|
||||
src="/monadical-black-white 1.svg"
|
||||
alt="Monadical Logo"
|
||||
className="mx-auto mb-8"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
</Link>
|
||||
<div className="text-center text-sky-600 text-sm font-semibold mb-4">
|
||||
FREE WEBINAR
|
||||
</div>
|
||||
|
||||
<h1 className="text-center text-4xl md:text-5xl mb-3 leading-tight">
|
||||
Building AI-Powered
|
||||
<br />
|
||||
Operational Assistants
|
||||
</h1>
|
||||
|
||||
<p className="text-center text-gray-600 mb-4">
|
||||
From Simple Automation to Strategic Implementation
|
||||
</p>
|
||||
|
||||
<p className="text-center font-semibold mb-4">
|
||||
Wednesday, February 5th @ 12pm EST
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center gap-1 md:gap-8 mb-8">
|
||||
{[
|
||||
{ value: countdown.days, label: "DAYS" },
|
||||
{ value: countdown.hours, label: "HOURS" },
|
||||
{ value: countdown.minutes, label: "MINUTES" },
|
||||
{ value: countdown.seconds, label: "SECONDS" },
|
||||
].map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center bg-white border border-gray-100 shadow-md rounded-lg p-4 aspect-square w-24"
|
||||
>
|
||||
<div className="text-5xl mb-2">{item.value}</div>
|
||||
<div className="text-sky-600 text-xs">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="px-6 md:px-16">
|
||||
<Link
|
||||
href="https://www.linkedin.com/events/7286034395642179584/"
|
||||
target="_blank"
|
||||
className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
|
||||
>
|
||||
RSVP HERE
|
||||
</Link>
|
||||
|
||||
<div className="space-y-4 mb-8 mt-24">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
In this session,{" "}
|
||||
<Link
|
||||
href="https://www.monadical.com"
|
||||
target="_blank"
|
||||
className="text-sky-600 hover:text-sky-700"
|
||||
>
|
||||
Monadical
|
||||
</Link>{" "}
|
||||
cofounder Max McCrea will dive into what operational assistants
|
||||
are and how you can implement them in your organization to deliver
|
||||
real, tangible value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="font-bold text-xl mb-4">What We'll Cover:</h2>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"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) => (
|
||||
<li
|
||||
key={index}
|
||||
className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="font-bold text-xl mb-4">Who Should Attend:</h2>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Operations leaders looking to reduce manual work",
|
||||
"Technical decision makers evaluating AI solutions",
|
||||
"Teams concerned about data security and control",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="mb-8">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href="https://www.linkedin.com/events/7286034395642179584/"
|
||||
target="_blank"
|
||||
className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
|
||||
>
|
||||
RSVP HERE
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-center text-gray-600 text-sm my-24">
|
||||
POWERED BY:
|
||||
<br />
|
||||
<Link href="#" className="flex justify-center items-center mx-auto">
|
||||
<Image
|
||||
src="/reach.svg"
|
||||
width={32}
|
||||
height={40}
|
||||
className="h-11 w-auto"
|
||||
alt="Reflector"
|
||||
/>
|
||||
<div className="flex-col ml-3 mt-4">
|
||||
<h1 className="text-[28px] font-semibold leading-tight text-left">
|
||||
Reflector
|
||||
</h1>
|
||||
<p className="text-gray-500 text-xs tracking-tight -mt-1">
|
||||
Capture the signal, not the noise
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="max-w-4xl mx-auto px-2 py-8 bg-gray-50">
|
||||
<div className="bg-white rounded-3xl px-4 md:px-36 py-4 shadow-md mx-auto">
|
||||
<Link href="https://www.monadical.com" target="_blank">
|
||||
<img src="/monadical-black-white 1.svg" alt="Monadical Logo" className="mx-auto mb-8" width={40} height={40} />
|
||||
</Link>
|
||||
<div className="text-center text-sky-600 text-sm font-semibold mb-4">FREE WEBINAR</div>
|
||||
|
||||
<h1 className="text-center text-4xl md:text-5xl mb-3 leading-tight">
|
||||
Building AI-Powered<br />Operational Assistants
|
||||
</h1>
|
||||
|
||||
<p className="text-center text-gray-600 mb-4">
|
||||
From Simple Automation to Strategic Implementation
|
||||
</p>
|
||||
|
||||
<p className="text-center font-semibold mb-4">
|
||||
Wednesday, February 5th @ 12pm EST
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center gap-1 md:gap-8 mb-8">
|
||||
{[
|
||||
{ value: countdown.days, label: 'DAYS' },
|
||||
{ value: countdown.hours, label: 'HOURS' },
|
||||
{ value: countdown.minutes, label: 'MINUTES' },
|
||||
{ value: countdown.seconds, label: 'SECONDS' }
|
||||
].map((item, index) => (
|
||||
<div key={index} className="text-center bg-white border border-gray-100 shadow-md rounded-lg p-4 aspect-square w-24">
|
||||
<div className="text-5xl mb-2">{item.value}</div>
|
||||
<div className="text-sky-600 text-xs">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="px-6 md:px-16">
|
||||
<Link
|
||||
href="https://www.linkedin.com/events/7286034395642179584/"
|
||||
target="_blank"
|
||||
className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
|
||||
>
|
||||
RSVP HERE
|
||||
</Link>
|
||||
|
||||
<div className="space-y-4 mb-8 mt-24">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
In this session, <Link href="https://www.monadical.com" target="_blank" className="text-sky-600 hover:text-sky-700">Monadical</Link> cofounder Max McCrea will dive into what operational assistants are and
|
||||
how you can implement them in your organization to deliver real, tangible value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="font-bold text-xl mb-4">What We'll Cover:</h2>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"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) => (
|
||||
<li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="font-bold text-xl mb-4">Who Should Attend:</h2>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Operations leaders looking to reduce manual work",
|
||||
"Technical decision makers evaluating AI solutions",
|
||||
"Teams concerned about data security and control"
|
||||
].map((item, index) => (
|
||||
<li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="mb-8">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href="https://www.linkedin.com/events/7286034395642179584/"
|
||||
target="_blank"
|
||||
className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
|
||||
>
|
||||
RSVP HERE
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-center text-gray-600 text-sm my-24">
|
||||
POWERED BY:<br />
|
||||
<Link href="#" className="flex justify-center items-center mx-auto">
|
||||
<Image
|
||||
src="/reach.svg"
|
||||
width={32}
|
||||
height={40}
|
||||
className="h-11 w-auto"
|
||||
alt="Reflector"
|
||||
/>
|
||||
<div className="flex-col ml-3 mt-4">
|
||||
<h1 className="text-[28px] font-semibold leading-tight text-left">
|
||||
Reflector
|
||||
</h1>
|
||||
<p className="text-gray-500 text-xs tracking-tight -mt-1">
|
||||
Capture the signal, not the noise
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user