Menu
Event 29
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div
class="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20"
>
<div class="max-w-lg">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">Webinars</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button
class="focus-visible:ring-border-primary gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3 hidden md:flex"
title="View all"
>
View all
</button>
</div>
<div
class="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3"
>
<div class="flex flex-col">
<button
class="relative flex w-full items-center justify-center"
type="button"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="radix-:Rm:"
data-state="closed"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="aspect-[3/2] size-full object-cover"
/><span class="absolute inset-0 z-10 bg-black/50"></span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
class="absolute z-20 size-16 text-white"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
></path>
</svg>
</button>
<div class="mt-5 md:mt-6">
<div class="mb-3 flex flex-wrap items-center gap-2 text-sm md:mb-4">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg
><span
>45<!-- -->
minutes</span
>
</div>
<a class="mb-2 block" href="#"
><h3 class="text-xl font-bold md:text-2xl">Webinar title heading</h3></a
>
<p class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="flex items-center gap-2">
<h4 class="font-semibold">Speakers:</h4>
<div class="flex items-center">
<img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 1"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 2"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 3"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 4"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/>
</div>
</div>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-3 flex items-center justify-center gap-x-2 text-base md:mt-4"
title="View event"
>
View event<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex flex-col">
<button
class="relative flex w-full items-center justify-center"
type="button"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="radix-:Rq:"
data-state="closed"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="aspect-[3/2] size-full object-cover"
/><span class="absolute inset-0 z-10 bg-black/50"></span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
class="absolute z-20 size-16 text-white"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
></path>
</svg>
</button>
<div class="mt-5 md:mt-6">
<div class="mb-3 flex flex-wrap items-center gap-2 text-sm md:mb-4">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg
><span
>45<!-- -->
minutes</span
>
</div>
<a class="mb-2 block" href="#"
><h3 class="text-xl font-bold md:text-2xl">Webinar title heading</h3></a
>
<p class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="flex items-center gap-2">
<h4 class="font-semibold">Speakers:</h4>
<div class="flex items-center">
<img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 1"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 2"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 3"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 4"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/>
</div>
</div>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-3 flex items-center justify-center gap-x-2 text-base md:mt-4"
title="View event"
>
View event<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex flex-col">
<button
class="relative flex w-full items-center justify-center"
type="button"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="radix-:Ru:"
data-state="closed"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder image 1"
class="aspect-[3/2] size-full object-cover"
/><span class="absolute inset-0 z-10 bg-black/50"></span
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
class="absolute z-20 size-16 text-white"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"
></path>
</svg>
</button>
<div class="mt-5 md:mt-6">
<div class="mb-3 flex flex-wrap items-center gap-2 text-sm md:mb-4">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg
><span
>45<!-- -->
minutes</span
>
</div>
<a class="mb-2 block" href="#"
><h3 class="text-xl font-bold md:text-2xl">Webinar title heading</h3></a
>
<p class="mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="flex items-center gap-2">
<h4 class="font-semibold">Speakers:</h4>
<div class="flex items-center">
<img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 1"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 2"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 3"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/><img
src="https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg"
alt="Speaker 4"
class="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/>
</div>
</div>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-3 flex items-center justify-center gap-x-2 text-base md:mt-4"
title="View event"
>
View event<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mt-12 flex justify-end md:hidden">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3"
title="View all"
>
View all
</button>
</div>
</div>
</section>
"use client";
import { useState } from "react";
import type { ButtonProps } from "@relume_io/relume-ui";
import { Button, Dialog, DialogContent, DialogTrigger } from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx";
import { MdAccessTime } from "react-icons/md";
import { FaCirclePlay } from "react-icons/fa6";
import { CgSpinner } from "react-icons/cg";
import clsx from "clsx";
type ImageProps = {
src: string;
alt?: string;
};
type FeaturedEvent = {
url: string;
image: ImageProps;
video: string;
duration: string;
title: string;
speakers: ImageProps[];
description: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
button: ButtonProps;
featuredEvents: FeaturedEvent[];
};
export type Event29Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Event29 = (props: Event29Props) => {
const { tagline, heading, description, button, featuredEvents } = {
...Event29Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20">
<div className="max-w-lg">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<Button {...button} className="hidden md:flex">
{button.title}
</Button>
</div>
<div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
{featuredEvents.map((event, index) => {
return (
<FeaturedEvent
key={index}
url={event.url}
image={event.image}
video={event.video}
duration={event.duration}
title={event.title}
speakers={event.speakers}
description={event.description}
button={event.button}
/>
);
})}
</div>
<div className="mt-12 flex justify-end md:hidden">
<Button {...button}>{button.title}</Button>
</div>
</div>
</section>
);
};
const FeaturedEvent: React.FC<FeaturedEvent> = ({
url,
image,
video,
duration,
title,
speakers,
description,
button,
}) => {
const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);
return (
<div className="flex flex-col">
<Dialog>
<DialogTrigger asChild>
<button className="relative flex w-full items-center justify-center">
<img src={image.src} alt={image.alt} className="aspect-[3/2] size-full object-cover" />
<span className="absolute inset-0 z-10 bg-black/50" />
<FaCirclePlay className="absolute z-20 size-16 text-white" />
</button>
</DialogTrigger>
<DialogContent>
{!isIframeLoaded && <CgSpinner className="mx-auto size-16 animate-spin text-white" />}
<iframe
className={clsx("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
visible: isIframeLoaded,
hidden: !isIframeLoaded,
})}
src={video}
allow="autoplay; encrypted-media; picture-in-picture"
allowFullScreen
onLoad={() => setIsIframeLoaded(true)}
></iframe>
</DialogContent>
</Dialog>
<div className="mt-5 md:mt-6">
<div className="mb-3 flex flex-wrap items-center gap-2 text-sm md:mb-4">
<MdAccessTime className="size-6 flex-none" />
<span>{duration} minutes</span>
</div>
<a className="mb-2 block" href={url}>
<h3 className="text-xl font-bold md:text-2xl">{title}</h3>
</a>
<p className="mb-2">{description}</p>
<div className="flex items-center gap-2">
<h4 className="font-semibold">Speakers:</h4>
{speakers.length > 0 && (
<div className="flex items-center">
{speakers.map((speaker, index) => (
<img
key={index}
src={speaker.src}
alt={speaker.alt}
className="-ml-2 block size-10 rounded-full border-2 border-white first-of-type:ml-0"
/>
))}
</div>
)}
</div>
<Button
{...button}
className="mt-3 flex items-center justify-center gap-x-2 text-base md:mt-4"
>
{button.title}
</Button>
</div>
</div>
);
};
export const Event29Defaults: Props = {
tagline: "Tagline",
heading: "Webinars",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
variant: "secondary",
size: "primary",
title: "View all",
},
featuredEvents: [
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
duration: "45",
title: "Webinar title heading",
speakers: [
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 1",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 2",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 3",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 4",
},
],
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: {
title: "View event",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
duration: "45",
title: "Webinar title heading",
speakers: [
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 1",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 2",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 3",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 4",
},
],
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: {
title: "View event",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
{
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image 1",
},
video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
duration: "45",
title: "Webinar title heading",
speakers: [
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 1",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 2",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 3",
},
{
src: "https://assets-global.website-files.com/624380709031623bfe4aee60/631035b9698714c1fee46997_Placeholder Small Image.svg",
alt: "Speaker 4",
},
],
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: {
title: "View event",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
