53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { HTMLAttributes, ReactNode } from "react";
|
|
|
|
interface BackgroundSectionProps extends HTMLAttributes<HTMLElement> {
|
|
children: ReactNode;
|
|
backgroundImage: string;
|
|
overlay?: boolean;
|
|
}
|
|
|
|
export default function BackgroundSection({
|
|
children,
|
|
backgroundImage,
|
|
overlay = true,
|
|
className = "",
|
|
...props
|
|
}: BackgroundSectionProps) {
|
|
return (
|
|
<section
|
|
className={`relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16 ${className}`}
|
|
{...props}
|
|
>
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `url('${backgroundImage}')`,
|
|
}}
|
|
>
|
|
{/* Dark overlay for readability */}
|
|
{overlay && (
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b"
|
|
style={{
|
|
background: `linear-gradient(to bottom,
|
|
color-mix(in srgb, var(--background) 70%, transparent),
|
|
color-mix(in srgb, var(--background) 60%, transparent),
|
|
color-mix(in srgb, var(--background) 80%, transparent)
|
|
)`,
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|