Header 139



<section id="relume" class="relative flex h-[150vh] flex-col items-center">
<div
class="sticky top-[5vh] z-10 mb-[-5vh] mt-[5vh] flex h-[90vh] w-[90%] flex-col items-start justify-center overflow-hidden"
style="width: 90%; height: 90vh; transform: none"
>
<div class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container relative z-10 max-w-md">
<h1 class="mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl">
Medium length hero heading goes here
</h1>
<p class="text-text-alternative md:text-md">
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.
</p>
<div class="mt-6 flex flex-wrap gap-4 md:mt-8">
<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 bg-background-alternative text-text-alternative px-6 py-3"
title="Button"
>
Button</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-alternative text-text-alternative px-6 py-3"
title="Button"
>
Button
</button>
</div>
</div>
</div>
<div class="absolute inset-0 z-0" style="transform: none">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="size-full object-cover"
/>
<div class="absolute inset-0 bg-black/50"></div>
</div>
<button
class="hidden md:flex absolute bottom-[5%] right-[5%] flex w-full items-center justify-center md:max-w-[14rem] lg:max-w-xxs"
type="button"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="radix-:R1p:"
data-state="closed"
style="transform: none"
>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-video-thumbnail-landscape.svg"
alt="Relume placeholder image"
class="size-full object-cover"
/><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>
<div class="absolute inset-0 -z-10 mt-[100vh]"></div>
</section>
"use client";
import { Button, Dialog, DialogContent, DialogTrigger } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import clsx from "clsx";
import { motion, useScroll, useTransform } from "framer-motion";
import { useState } from "react";
import { CgSpinner } from "react-icons/cg";
import { FaCirclePlay } from "react-icons/fa6";
type ImageProps = {
src: string;
alt?: string;
};
type Props = {
heading: string;
description: string;
buttons: ButtonProps[];
image: ImageProps;
video: string;
videoImage: ImageProps;
};
export type Header139Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Header139 = (props: Header139Props) => {
const { heading, description, buttons, image, video, videoImage } = {
...Header139Defaults,
...props,
};
const [isIframeLoaded, setIsIframeLoaded] = useState(false);
const { scrollYProgress } = useScroll();
const containerMotion = {
y: useTransform(scrollYProgress, [0, 0.4], ["0vh", "-5vh"]),
width: useTransform(scrollYProgress, [0, 0.4], ["90%", "100%"]),
height: useTransform(scrollYProgress, [0, 0.4], ["90vh", "100vh"]),
};
const imageTranslate = {
y: useTransform(scrollYProgress, [0.4, 1], ["0%", "70%"]),
};
const videoDialogTranslate = {
y: useTransform(scrollYProgress, [0.3, 0.4], ["0%", "200%"]),
};
return (
<section id="relume" className="relative flex h-[150vh] flex-col items-center">
<motion.div
className="sticky top-[5vh] z-10 mb-[-5vh] mt-[5vh] flex h-[90vh] w-[90%] flex-col items-start justify-center overflow-hidden"
style={containerMotion}
>
<div className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container relative z-10 max-w-md">
<h1 className="mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl">
{heading}
</h1>
<p className="text-text-alternative md:text-md">{description}</p>
<div className="mt-6 flex flex-wrap gap-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
</div>
<motion.div className="absolute inset-0 z-0" style={imageTranslate}>
<img src={image.src} alt={image.alt} className="size-full object-cover" />
<div className="absolute inset-0 bg-black/50" />
</motion.div>
<Dialog>
<DialogTrigger className="hidden md:flex" asChild>
<motion.button
className="absolute bottom-[5%] right-[5%] flex w-full items-center justify-center md:max-w-[14rem] lg:max-w-xxs"
style={videoDialogTranslate}
>
<img src={videoImage.src} alt={videoImage.alt} className="size-full object-cover" />
<FaCirclePlay className="absolute z-20 size-16 text-white" />
</motion.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>
</motion.div>
<div className="absolute inset-0 -z-10 mt-[100vh]" />
</section>
);
};
export const Header139Defaults: Props = {
heading: "Medium length hero heading goes here",
description:
"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.",
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary-alt" }],
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
alt: "Relume placeholder image",
},
video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
videoImage: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video-thumbnail-landscape.svg",
alt: "Relume placeholder image",
},
};
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.