1243 lines
39 KiB
JavaScript
1243 lines
39 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button, useMediaQuery } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { RxChevronDown } from "react-icons/rx";
|
|
|
|
type ImageProps = {
|
|
url?: string;
|
|
src: string;
|
|
alt?: string;
|
|
};
|
|
|
|
type NavLink = {
|
|
url: string;
|
|
title: string;
|
|
subMenuLinks?: NavLink[];
|
|
};
|
|
|
|
type Props = {
|
|
logo: ImageProps;
|
|
navLinks: NavLink[];
|
|
buttons: ButtonProps[];
|
|
};
|
|
|
|
export type Navbar3Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Navbar3 = (props: Navbar3Props) => {
|
|
const { logo, navLinks, buttons } = {
|
|
...Navbar3Defaults,
|
|
...props,
|
|
};
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const isMobile = useMediaQuery("(max-width: 991px)");
|
|
|
|
return (
|
|
<section
|
|
id="relume"
|
|
className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18"
|
|
>
|
|
<button
|
|
className="flex size-12 flex-col justify-center lg:hidden"
|
|
onClick={() => setIsMobileMenuOpen((prev) => !prev)}
|
|
>
|
|
{Array(3)
|
|
.fill(null)
|
|
.map((_, index) => (
|
|
<span key={index} className="my-[3px] h-0.5 w-6 bg-black lg:hidden" />
|
|
))}
|
|
</button>
|
|
<AnimatePresence>
|
|
<motion.div
|
|
initial="closed"
|
|
animate={isMobileMenuOpen ? "open" : "closed"}
|
|
exit="closed"
|
|
variants={{
|
|
closed: {
|
|
x: "-100%",
|
|
opacity: 1,
|
|
transition: { type: "spring", duration: 0.6, bounce: 0 },
|
|
transitionEnd: {
|
|
opacity: "var(--opacity-closed, 0%)",
|
|
x: "var(--x-closed, -100%)",
|
|
},
|
|
},
|
|
open: {
|
|
x: 0,
|
|
opacity: 1,
|
|
transition: { type: "spring", duration: 0.4, bounce: 0 },
|
|
},
|
|
}}
|
|
className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]"
|
|
>
|
|
<a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
|
|
<img src={logo.src} alt={logo.alt} />
|
|
</a>
|
|
{navLinks.map((navLink, index) => (
|
|
<div key={index} className="w-full lg:w-auto">
|
|
{navLink.subMenuLinks && navLink.subMenuLinks.length > 0 ? (
|
|
<SubMenu navLink={navLink} isMobile={isMobile} />
|
|
) : (
|
|
<a
|
|
href={navLink.url}
|
|
className="relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base"
|
|
>
|
|
{navLink.title}
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
<div className="mt-6 lg:hidden">
|
|
{buttons.map((button, index) => (
|
|
<Button key={index} {...button} className="w-full">
|
|
{button.title}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
{isMobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
animate={{ opacity: 0.5 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="fixed inset-0 z-40 bg-black lg:hidden"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
<a href={logo.url} className="flex min-h-16 flex-shrink-0 items-center">
|
|
<img src={logo.src} alt={logo.alt} />
|
|
</a>
|
|
<div className="flex min-h-16 items-center justify-end gap-x-4">
|
|
<div>
|
|
{buttons.map((button, index) => (
|
|
<Button key={index} {...button} className="px-4 py-1 md:px-6 md:py-2">
|
|
{button.title}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean }) => {
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
onMouseEnter={() => !isMobile && setIsDropdownOpen(true)}
|
|
onMouseLeave={() => !isMobile && setIsDropdownOpen(false)}
|
|
>
|
|
<button
|
|
className="flex w-full items-center justify-between gap-2 py-3 text-md lg:flex-none lg:justify-start lg:px-4 lg:py-2 lg:text-base"
|
|
onClick={() => setIsDropdownOpen((prev) => !prev)}
|
|
>
|
|
<span>{navLink.title}</span>
|
|
<AnimatePresence>
|
|
<motion.span
|
|
animate={isDropdownOpen ? "rotated" : "initial"}
|
|
variants={{
|
|
rotated: { rotate: 180 },
|
|
initial: { rotate: 0 },
|
|
}}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<RxChevronDown />
|
|
</motion.span>
|
|
</AnimatePresence>
|
|
</button>
|
|
{isDropdownOpen && (
|
|
<AnimatePresence>
|
|
<motion.nav
|
|
variants={{
|
|
open: {
|
|
visibility: "visible",
|
|
opacity: "var(--opacity-open, 100%)",
|
|
y: 0,
|
|
},
|
|
close: {
|
|
visibility: "hidden",
|
|
opacity: "var(--opacity-close, 0)",
|
|
y: "var(--y-close, 0%)",
|
|
},
|
|
}}
|
|
initial="close"
|
|
exit="close"
|
|
animate={isDropdownOpen ? "open" : "close"}
|
|
className="bg-background-primary lg:absolute lg:z-50 lg:border lg:border-border-primary lg:p-2 lg:[--y-close:25%]"
|
|
>
|
|
{navLink.subMenuLinks?.map((subMenuLink, index) => (
|
|
<a
|
|
key={index}
|
|
href={subMenuLink.url}
|
|
className="block py-3 pl-[5%] text-md lg:py-2 lg:pl-4 lg:pr-8 lg:text-left lg:text-base"
|
|
>
|
|
{subMenuLink.title}
|
|
</a>
|
|
))}
|
|
</motion.nav>
|
|
</AnimatePresence>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Navbar3Defaults: Props = {
|
|
logo: {
|
|
url: "#",
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
|
alt: "Logo image",
|
|
},
|
|
navLinks: [
|
|
{ title: "Link One", url: "#" },
|
|
{ title: "Link Two", url: "#" },
|
|
{
|
|
title: "Link Three",
|
|
url: "#",
|
|
subMenuLinks: [
|
|
{ title: "Link Four", url: "#" },
|
|
{ title: "Link Five", url: "#" },
|
|
{ title: "Link Six", url: "#" },
|
|
],
|
|
},
|
|
],
|
|
buttons: [
|
|
{
|
|
title: "Button",
|
|
size: "sm",
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
import * as React from "react";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
import { Button } from "@relume_io/relume-ui";
|
|
import { RxChevronRight } from "react-icons/rx";
|
|
import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
|
|
|
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 Event17Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Event17 = (props: Event17Props) => {
|
|
const { tagline, heading, description, button, featuredEvents } = {
|
|
...Event17Defaults,
|
|
...props,
|
|
};
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container">
|
|
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
|
<h4 className="font-semibold">{tagline}</h4>
|
|
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1>
|
|
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
|
|
</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) => (
|
|
<FeaturedEvent key={index} {...event} />
|
|
))}
|
|
</div>
|
|
<div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
|
|
<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">
|
|
<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="mt-5 flex flex-col items-start md:mt-6">
|
|
<div className="mb-3 flex flex-wrap gap-4 text-sm 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 Event17Defaults: 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: "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 2",
|
|
},
|
|
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 3",
|
|
},
|
|
date: {
|
|
weekday: "Sun",
|
|
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 /> },
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@relume_io/relume-ui";
|
|
import type { CarouselApi } from "@relume_io/relume-ui";
|
|
import clsx from "clsx";
|
|
|
|
type ImageProps = {
|
|
src: string;
|
|
alt?: string;
|
|
};
|
|
|
|
type Props = {
|
|
heading: string;
|
|
description: string;
|
|
images: ImageProps[];
|
|
};
|
|
|
|
export type Gallery19Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Gallery19 = (props: Gallery19Props) => {
|
|
const { heading, description, images } = {
|
|
...Gallery19Defaults,
|
|
...props,
|
|
};
|
|
|
|
const [api, setApi] = useState<CarouselApi>();
|
|
const [current, setCurrent] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (!api) {
|
|
return;
|
|
}
|
|
setCurrent(api.selectedScrollSnap() + 1);
|
|
api.on("select", () => {
|
|
setCurrent(api.selectedScrollSnap() + 1);
|
|
});
|
|
}, [api]);
|
|
|
|
return (
|
|
<section id="relume">
|
|
<div className="px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container">
|
|
<div className="rb-12 mb-12 text-center md:mb-18 lg:mb-20">
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="md:text-md">{description}</p>
|
|
</div>
|
|
{/* for all available options: https://www.embla-carousel.com/api/options/ */}
|
|
<Carousel
|
|
setApi={setApi}
|
|
opts={{
|
|
loop: true,
|
|
align: "start",
|
|
}}
|
|
>
|
|
<div className="relative">
|
|
<CarouselContent className="ml-0">
|
|
{images.map((image, index) => (
|
|
<CarouselItem key={index} className="basis-1/2 px-3 md:basis-1/4 md:px-4">
|
|
<div className="w-full">
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="aspect-square size-full object-cover"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="hidden md:flex md:size-12 lg:size-14" />
|
|
<CarouselNext className="hidden md:flex md:size-12 lg:size-14" />
|
|
</div>
|
|
<div className="mt-[30px] flex items-center justify-center md:mt-[46px]">
|
|
{images.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => api?.scrollTo(index)}
|
|
className={clsx("relative mx-[3px] inline-block size-2 rounded-full", {
|
|
"bg-black": current === index + 1,
|
|
"bg-neutral-darker/40": current !== index + 1,
|
|
})}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Gallery19Defaults: Props = {
|
|
heading: "Image Gallery",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
images: [
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 1",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 2",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 3",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 4",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 5",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 6",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 7",
|
|
},
|
|
{
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
|
alt: "Relume placeholder image 8",
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button, Input } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
|
|
type Props = {
|
|
heading: string;
|
|
description: string;
|
|
inputPlaceholder?: string;
|
|
button: ButtonProps;
|
|
termsAndConditions: string;
|
|
video: string;
|
|
videoType: string;
|
|
};
|
|
|
|
export type Cta30Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Cta30 = (props: Cta30Props) => {
|
|
const { heading, description, inputPlaceholder, button, termsAndConditions, video, videoType } = {
|
|
...Cta30Defaults,
|
|
...props,
|
|
};
|
|
|
|
const [emailInput, setEmailInput] = useState<string>("");
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
console.log({
|
|
emailInput,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container relative z-10 max-w-lg text-center">
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="text-text-alternative md:text-md">{description}</p>
|
|
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
|
|
<form
|
|
className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder={inputPlaceholder}
|
|
value={emailInput}
|
|
onChange={(e) => setEmailInput(e.target.value)}
|
|
/>
|
|
<Button {...button} className="items-center justify-center px-6 py-3">
|
|
{button.title}
|
|
</Button>
|
|
</form>
|
|
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-0 z-0">
|
|
<video className="absolute inset-0 aspect-video size-full object-cover" autoPlay loop muted>
|
|
<source src={video} type={videoType} />
|
|
</video>
|
|
<div className="absolute inset-0 bg-black/50" />
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Cta30Defaults: Props = {
|
|
heading: "Medium length heading goes here",
|
|
description:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
|
inputPlaceholder: "Enter your email",
|
|
button: {
|
|
title: "Sign up",
|
|
variant: "primary",
|
|
size: "sm",
|
|
},
|
|
termsAndConditions: `
|
|
<p class='text-xs text-text-alternative'>
|
|
By clicking Sign Up you're confirming that you agree with our
|
|
<a href='#' class='underline'>Terms and Conditions</a>.
|
|
</p>
|
|
`,
|
|
video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4",
|
|
videoType: "video/mp4",
|
|
};
|
|
|
|
|
|
|
|
|
|
import * as React from "react";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
import { Button } from "@relume_io/relume-ui";
|
|
import { RxChevronRight } from "react-icons/rx";
|
|
import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
|
|
|
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 Event20Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Event20 = (props: Event20Props) => {
|
|
const { tagline, heading, description, button, featuredEvents } = {
|
|
...Event20Defaults,
|
|
...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) => (
|
|
<FeaturedEvent key={index} {...event} />
|
|
))}
|
|
</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,
|
|
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 Event20Defaults: 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: "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 2",
|
|
},
|
|
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 3",
|
|
},
|
|
date: {
|
|
weekday: "Sun",
|
|
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 /> },
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
import { Button } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
import { BiCheck } from "react-icons/bi";
|
|
|
|
type PricingPlan = {
|
|
planName: string;
|
|
monthlyPrice: string;
|
|
yearlyPrice: string;
|
|
features: string[];
|
|
button: ButtonProps;
|
|
};
|
|
|
|
type Props = {
|
|
tagline: string;
|
|
heading: string;
|
|
description: string;
|
|
pricingPlans: PricingPlan[];
|
|
};
|
|
|
|
export type Pricing18Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Pricing18 = (props: Pricing18Props) => {
|
|
const { tagline, heading, description, pricingPlans } = {
|
|
...Pricing18Defaults,
|
|
...props,
|
|
};
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container">
|
|
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
|
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="md:text-md">{description}</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
|
{pricingPlans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8"
|
|
>
|
|
<div>
|
|
<div className="rb-6 mb-6 text-center md:mb-8">
|
|
<h6 className="text-md font-bold md:text-xl">{plan.planName}</h6>
|
|
<h1 className="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
|
|
{plan.monthlyPrice}
|
|
<span className="text-2xl font-bold md:text-3xl lg:text-4xl">/mo</span>
|
|
</h1>
|
|
<p>or {plan.yearlyPrice} yearly</p>
|
|
</div>
|
|
<div className="mb-8 grid grid-cols-1 gap-4 py-2">
|
|
{plan.features.map((feature, index) => (
|
|
<div key={index} className="flex self-start">
|
|
<div className="mr-4 flex-none self-start">
|
|
<BiCheck className="size-6" />
|
|
</div>
|
|
<p>{feature}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button {...plan.button} className="w-full">
|
|
{plan.button.title}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Pricing18Defaults: Props = {
|
|
tagline: "Tagline",
|
|
heading: "Pricing plan",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
pricingPlans: [
|
|
{
|
|
planName: "Basic plan",
|
|
monthlyPrice: "$19",
|
|
yearlyPrice: "$199",
|
|
features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
|
|
button: { title: "Get started" },
|
|
},
|
|
{
|
|
planName: "Business plan",
|
|
monthlyPrice: "$29",
|
|
yearlyPrice: "$299",
|
|
features: [
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
],
|
|
button: { title: "Get started" },
|
|
},
|
|
{
|
|
planName: "Enterprise plan",
|
|
monthlyPrice: "$49",
|
|
yearlyPrice: "$499",
|
|
features: [
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
"Feature text goes here",
|
|
],
|
|
button: { title: "Get started" },
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
import {
|
|
Button,
|
|
Accordion,
|
|
AccordionTrigger,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
} from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
|
|
type QuestionsProps = {
|
|
title: string;
|
|
answer: string;
|
|
};
|
|
|
|
type Props = {
|
|
heading: string;
|
|
description: string;
|
|
footerHeading: string;
|
|
footerDescription: string;
|
|
button: ButtonProps;
|
|
questions: QuestionsProps[];
|
|
};
|
|
|
|
export type Faq10Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Faq10 = (props: Faq10Props) => {
|
|
const { heading, description, questions, footerHeading, footerDescription, button } = {
|
|
...Faq10Defaults,
|
|
...props,
|
|
};
|
|
|
|
const halfLength = Math.ceil(questions.length / 2);
|
|
const firstColumnQuestions = questions.slice(0, halfLength);
|
|
const secondColumnQuestions = questions.slice(halfLength);
|
|
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
|
<div className="container">
|
|
<div className="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
|
|
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="md:text-md">{description}</p>
|
|
</div>
|
|
<div className="grid w-full auto-rows-min grid-cols-1 items-start gap-x-12 md:grid-cols-2 lg:gap-x-16">
|
|
<Accordion type="multiple" className="w-full">
|
|
{firstColumnQuestions.map((question, index) => (
|
|
<AccordionItem key={index} value={`item-${index}`} className="overflow-hidden">
|
|
<AccordionTrigger className="md:py-5 md:text-md">{question.title}</AccordionTrigger>
|
|
<AccordionContent className="md:pb-6">{question.answer}</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
<Accordion type="multiple" className="w-full">
|
|
{secondColumnQuestions.map((question, index) => (
|
|
<AccordionItem
|
|
key={index + halfLength}
|
|
value={`item-${index + halfLength}`}
|
|
className="overflow-hidden first:border-t-0 md:first:border-t"
|
|
>
|
|
<AccordionTrigger className="md:py-5 md:text-md">{question.title}</AccordionTrigger>
|
|
<AccordionContent className="md:pb-6">{question.answer}</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
<div className="mx-auto mt-12 max-w-md text-center md:mt-18 lg:mt-20">
|
|
<h4 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
|
|
{footerHeading}
|
|
</h4>
|
|
<p className="md:text-md">{footerDescription}</p>
|
|
<div className="mt-6 md:mt-8">
|
|
<Button {...button}>{button.title}</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Faq10Defaults: Props = {
|
|
heading: "FAQs",
|
|
description:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
|
questions: [
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
{
|
|
title: "Question text goes here",
|
|
answer:
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
|
|
},
|
|
],
|
|
footerHeading: "Still have questions?",
|
|
footerDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
button: {
|
|
title: "Contact",
|
|
variant: "secondary",
|
|
},
|
|
};
|
|
|
|
|
|
|
|
|
|
import { FaXTwitter } from "react-icons/fa6";
|
|
import {
|
|
BiLogoFacebookCircle,
|
|
BiLogoInstagram,
|
|
BiLogoLinkedinSquare,
|
|
BiLogoYoutube,
|
|
} from "react-icons/bi";
|
|
|
|
type ImageProps = {
|
|
url?: string;
|
|
src: string;
|
|
alt?: string;
|
|
};
|
|
|
|
type Links = {
|
|
title: string;
|
|
url: string;
|
|
};
|
|
|
|
type SocialMediaLinks = {
|
|
url: string;
|
|
icon: React.ReactNode;
|
|
};
|
|
|
|
type ColumnLinks = {
|
|
links: Links[];
|
|
};
|
|
|
|
type Address = {
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
type Contact = {
|
|
label: string;
|
|
phone: string;
|
|
email: string;
|
|
};
|
|
|
|
type Props = {
|
|
logo: ImageProps;
|
|
address: Address;
|
|
contact: Contact;
|
|
columnLinks: ColumnLinks[];
|
|
socialMediaLinks: SocialMediaLinks[];
|
|
footerText?: string;
|
|
footerLinks: Links[];
|
|
};
|
|
|
|
export type Footer3Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Footer3 = (props: Footer3Props) => {
|
|
const { logo, address, contact, columnLinks, socialMediaLinks, footerText, footerLinks } = {
|
|
...Footer3Defaults,
|
|
...props,
|
|
};
|
|
return (
|
|
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20">
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20">
|
|
<div>
|
|
<div className="rb-6 mb-6 md:mb-8">
|
|
<a href={logo.url}>
|
|
<img src={logo.src} alt={logo.alt} className="inline-block" />
|
|
</a>
|
|
</div>
|
|
<div className="rb-6 mb-6 md:mb-8">
|
|
<div>
|
|
<p className="mb-1 text-sm font-semibold">{address.label}</p>
|
|
<p className="mb-5 text-sm md:mb-6">{address.value}</p>
|
|
</div>
|
|
<div>
|
|
<p className="mb-1 text-sm font-semibold">{contact.label}</p>
|
|
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6">
|
|
<a href={`tel:${contact.phone}`}>{contact.phone}</a>
|
|
<a href={`mailto:${contact.email}`}>{contact.email}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-flow-col grid-cols-[max-content] items-start justify-start gap-x-3">
|
|
{socialMediaLinks.map((link, index) => (
|
|
<a key={index} href={link.url}>
|
|
{link.icon}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 items-start gap-x-6 gap-y-10 md:grid-cols-2 md:gap-x-8 md:gap-y-4">
|
|
{columnLinks.map((column, index) => (
|
|
<ul key={index}>
|
|
{column.links.map((link, linkIndex) => (
|
|
<li key={linkIndex} className="py-2 text-sm font-semibold">
|
|
<a href={link.url}>{link.title}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="h-px w-full bg-black" />
|
|
<div className="flex flex-col-reverse items-start justify-between pb-4 pt-6 text-sm md:flex-row md:items-center md:pb-0 md:pt-8">
|
|
<p className="mt-8 md:mt-0">{footerText}</p>
|
|
<ul className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 text-sm md:grid-flow-col md:gap-x-6 md:gap-y-0">
|
|
{footerLinks.map((link, index) => (
|
|
<li key={index} className="underline">
|
|
<a href={link.url}>{link.title}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export const Footer3Defaults: Props = {
|
|
logo: {
|
|
url: "#",
|
|
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
|
alt: "Logo image",
|
|
},
|
|
address: {
|
|
label: "Address:",
|
|
value: "Level 1, 12 Sample St, Sydney NSW 2000",
|
|
},
|
|
contact: {
|
|
label: "Contact:",
|
|
phone: "1800 123 4567",
|
|
email: "info@relume.io",
|
|
},
|
|
columnLinks: [
|
|
{
|
|
links: [
|
|
{ title: "Link One", url: "#" },
|
|
{ title: "Link Two", url: "#" },
|
|
{ title: "Link Three", url: "#" },
|
|
{ title: "Link Four", url: "#" },
|
|
{ title: "Link Five", url: "#" },
|
|
],
|
|
},
|
|
{
|
|
links: [
|
|
{ title: "Link Six", url: "#" },
|
|
{ title: "Link Seven", url: "#" },
|
|
{ title: "Link Eight", url: "#" },
|
|
{ title: "Link Nine", url: "#" },
|
|
{ title: "Link Ten", url: "#" },
|
|
],
|
|
},
|
|
],
|
|
socialMediaLinks: [
|
|
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
|
|
{ url: "#", icon: <BiLogoInstagram className="size-6" /> },
|
|
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
|
|
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
|
|
{ url: "#", icon: <BiLogoYoutube className="size-6" /> },
|
|
],
|
|
footerText: "© 2024 Relume. All rights reserved.",
|
|
footerLinks: [
|
|
{ title: "Privacy Policy", url: "#" },
|
|
{ title: "Terms of Service", url: "#" },
|
|
{ title: "Cookies Settings", url: "#" },
|
|
],
|
|
};
|