58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import headerImage from "../assets/Header.png";
|
|
import { Button } from "@relume_io/relume-ui";
|
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
|
|
|
type ImageProps = {
|
|
src: string;
|
|
alt?: string;
|
|
};
|
|
|
|
type Props = {
|
|
heading: string;
|
|
description: string;
|
|
buttons: ButtonProps[];
|
|
image: ImageProps;
|
|
};
|
|
|
|
export type Header1Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
|
|
|
export const Header1 = (props: Header1Props) => {
|
|
const { heading, description, buttons, image } = {
|
|
...Header1Defaults,
|
|
...props,
|
|
};
|
|
return (
|
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">
|
|
<div>
|
|
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl text-acid-lime whitespace-pre-wrap">{heading}</h1>
|
|
<p className="text-[48px] font-bold leading-[1.2] text-cloud-white whitespace-pre-wrap">{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>
|
|
<img src={image.src} className="w-full object-cover" alt={image.alt} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const Header1Defaults: Props = {
|
|
heading: "UXplore Konferenz 2026",
|
|
description:
|
|
"25-26 Juni Zürich",
|
|
buttons: [],
|
|
image: {
|
|
src: headerImage,
|
|
alt: "UXplore Konferenz 2026",
|
|
},
|
|
};
|