Menu
Event 26
<section id="relume" class="overflow-hidden 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">Events</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="relative" role="region" aria-roledescription="carousel">
<div>
<div class="flex ml-0">
<div
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 1"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Tue<!-- -->
<!-- -->06<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 2"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Wed<!-- -->
<!-- -->07<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 3"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Thu<!-- -->
<!-- -->08<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 4"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Fri<!-- -->
<!-- -->09<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 5"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Sat<!-- -->
<!-- -->10<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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
role="group"
aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<div class="flex flex-col items-start border border-border-primary">
<a href="#" class="relative block aspect-[3/2] w-full"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image 6"
class="absolute size-full object-cover"
/><span
class="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold"
>Category</span
></a
>
<div class="flex flex-col items-start p-6">
<div class="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div class="flex items-center gap-2">
<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
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Sud<!-- -->
<!-- -->11<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<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
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
</div>
<a href="#" class="mb-2"
><h2 class="text-xl font-bold md:text-2xl">Event title heading</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim
in eros.
</p>
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0 mt-5 md:mt-6"
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>
</div>
<div class="mt-[54px] flex items-center justify-between md:mt-[86px]">
<div class="mt-3.5 flex w-full items-start justify-start">
<button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button
><button class="mx-[3px] inline-block size-2 rounded-full bg-neutral-light"></button>
</div>
<div class="flex items-end justify-end gap-2 md:gap-4">
<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 rounded-full bg-neutral-white left-0 static right-0 top-0 -mt-1.5 size-12 -translate-y-0"
disabled=""
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"
></path></svg
><span class="sr-only">Previous slide</span></button
><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 rounded-full bg-neutral-white static right-0 top-0 -mt-1.5 size-12 -translate-y-0"
disabled=""
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
></path></svg
><span class="sr-only">Next slide</span>
</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, useEffect } from "react";
import type { ButtonProps, CarouselApi } from "@relume_io/relume-ui";
import {
Button,
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx";
import { BiMap, BiCalendarAlt } from "react-icons/bi";
import clsx from "clsx";
type ImageProps = {
src: string;
alt?: string;
};
type Date = {
weekday: string;
day: string;
month: string;
year: string;
};
type FeaturedEvent = {
url: string;
image: ImageProps;
date: Date;
category: string;
title: string;
location: string;
description: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
button: ButtonProps;
featuredEvents: FeaturedEvent[];
};
export type Event26Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Event26 = (props: Event26Props) => {
const { tagline, heading, description, button, featuredEvents } = {
...Event26Defaults,
...props,
};
const [api, setApi] = useState<CarouselApi>();
const [current, setCurrent] = useState<number>(0);
useEffect(() => {
if (!api) {
return;
}
setCurrent(api.selectedScrollSnap() + 1);
api.on("select", () => {
setCurrent(api.selectedScrollSnap() + 1);
});
}, [api]);
return (
<section id="relume" className="overflow-hidden 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>
<Carousel
setApi={setApi}
opts={{
loop: true,
align: "start",
}}
>
<CarouselContent className="ml-0">
{featuredEvents.map((event, index) => (
<CarouselItem
key={index}
className="basis-[95%] pl-0 pr-6 sm:basis-4/5 md:basis-1/2 md:pr-8 lg:basis-1/3"
>
<FeaturedEvent key={index} {...event} />
</CarouselItem>
))}
</CarouselContent>
<div className="mt-[54px] flex items-center justify-between md:mt-[86px]">
<div className="mt-3.5 flex w-full items-start justify-start">
{featuredEvents.map((_, index) => (
<button
key={index}
onClick={() => api?.scrollTo(index)}
className={clsx("mx-[3px] inline-block size-2 rounded-full", {
"bg-black": current === index + 1,
"bg-neutral-light": current !== index + 1,
})}
/>
))}
</div>
<div className="flex items-end justify-end gap-2 md:gap-4">
<CarouselPrevious className="static right-0 top-0 -mt-1.5 size-12 -translate-y-0" />
<CarouselNext className="static right-0 top-0 -mt-1.5 size-12 -translate-y-0" />
</div>
</div>
</Carousel>
<div className="mt-12 flex justify-end md:hidden">
<Button {...button}>{button.title}</Button>
</div>
</div>
</section>
);
};
const FeaturedEvent: React.FC<FeaturedEvent> = ({
url,
image,
date,
category,
title,
location,
description,
button,
}) => {
return (
<div className="flex flex-col items-start border border-border-primary">
<a href={url} className="relative block aspect-[3/2] w-full">
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
{category}
</span>
</a>
<div className="flex flex-col items-start p-6">
<div className="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
<div className="flex items-center gap-2">
<BiCalendarAlt className="size-6 flex-none" />
{date.weekday} {date.day} {date.month} {date.year}
</div>
<div className="flex items-center gap-2">
<BiMap className="size-6 flex-none" />
<span>{location}</span>
</div>
</div>
<a href={url} className="mb-2">
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
</a>
<p>{description}</p>
<Button {...button} className="mt-5 md:mt-6">
{button.title}
</Button>
</div>
</div>
);
};
export const Event26Defaults: Props = {
tagline: "Tagline",
heading: "Events",
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-landscape.svg",
alt: "Relume placeholder image 1",
},
date: {
weekday: "Tue",
day: "06",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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-landscape.svg",
alt: "Relume placeholder image 2",
},
date: {
weekday: "Wed",
day: "07",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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-landscape.svg",
alt: "Relume placeholder image 3",
},
date: {
weekday: "Thu",
day: "08",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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-landscape.svg",
alt: "Relume placeholder image 4",
},
date: {
weekday: "Fri",
day: "09",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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-landscape.svg",
alt: "Relume placeholder image 5",
},
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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-landscape.svg",
alt: "Relume placeholder image 6",
},
date: {
weekday: "Sud",
day: "11",
month: "Feb",
year: "2024",
},
category: "Category",
title: "Event title heading",
location: "Location",
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)
