41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import SafeHtml from "@/components/safe-html";
|
|
import { cn } from "@/lib/utils";
|
|
import { ImageProps, TextProps } from "@/types/front";
|
|
|
|
type HeroImageProps = {
|
|
image: ImageProps;
|
|
title: TextProps;
|
|
description: TextProps;
|
|
};
|
|
|
|
export default function HeroImage(props: Readonly<HeroImageProps>) {
|
|
const { image, title, description } = props;
|
|
const lazyload = image.lazyload ? "lazy" : "eager";
|
|
return (
|
|
<section className="relative">
|
|
<div
|
|
className={cn(
|
|
"w-full h-auto md:h-[90vh]",
|
|
"relative z-1 overflow-hidden group flex justify-center items-center",
|
|
)}
|
|
>
|
|
<img
|
|
loading={lazyload}
|
|
className="min-h-80 h-full object-cover w-full"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
title={image?.title ?? image.alt}
|
|
srcSet={image.src}
|
|
/>
|
|
</div>
|
|
<div className="bg-background rounded-l-3xl z-1 md:absolute md:bottom-0 md:-translate-y-[75px] md:right-0 w-full md:w-[55%] p-10">
|
|
<SafeHtml
|
|
as="p"
|
|
className={cn("font-bold text-3xl", title.font)}
|
|
html={title.text}
|
|
/>
|
|
<p className={cn("mt-4", description.font)}>{description.text}</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|