37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
interface PageHeaderProps {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
image?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const PageHeader: React.FC<PageHeaderProps> = ({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
image = "/media/images/headers/header-about.png"
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className="relative w-full h-[400px] md:h-[500px] bg-brand-dark text-white flex flex-col justify-center items-center text-center overflow-hidden">
|
||
|
|
<div className="absolute inset-0 z-0">
|
||
|
|
<img
|
||
|
|
src={image}
|
||
|
|
alt={title}
|
||
|
|
className="w-full h-full object-cover opacity-30"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-b from-brand-dark/80 to-brand-dark/40" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative z-10 container mx-auto px-6 mt-16">
|
||
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">{title}</h1>
|
||
|
|
{description && (
|
||
|
|
<p className="text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PageHeader;
|