122 lines
4.6 KiB
TypeScript
122 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
|
|
interface InnerBannerProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
breadcrumbs?: { label: string; href?: string }[];
|
|
backgroundImage?: string;
|
|
}
|
|
|
|
export default function InnerBanner({
|
|
title,
|
|
subtitle,
|
|
breadcrumbs,
|
|
backgroundImage = "/hero-image.jpg"
|
|
}: InnerBannerProps) {
|
|
return (
|
|
<div className="relative h-[450px] w-full overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src={backgroundImage}
|
|
alt={`${title} - Sky and Soil Real Estate`}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative h-full max-w-7xl mx-auto px-6 flex flex-col justify-center">
|
|
{/* Breadcrumbs */}
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|
<nav className="mb-4">
|
|
<ol className="flex items-center gap-2 text-sm text-white/80">
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<li key={index} className="flex items-center gap-2">
|
|
{crumb.href ? (
|
|
<a
|
|
href={crumb.href}
|
|
className="hover:text-white transition-colors"
|
|
>
|
|
{crumb.label}
|
|
</a>
|
|
) : (
|
|
<span className="text-white font-medium">{crumb.label}</span>
|
|
)}
|
|
{index < breadcrumbs.length - 1 && (
|
|
<svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
)}
|
|
|
|
{/* Title */}
|
|
<h1 className="text-5xl md:text-6xl font-bold text-white mb-4 leading-tight">
|
|
{title}
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
{subtitle && (
|
|
<p className="text-xl text-white/90 max-w-2xl">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
|
|
{/* Decorative Line */}
|
|
<div className="mt-6 w-24 h-1 bg-primary rounded-full" />
|
|
</div>
|
|
|
|
{/* Animated Particles */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
{[
|
|
{ left: 20, top: 30, delay: 0, duration: 3.5 },
|
|
{ left: 60, top: 70, delay: 0.5, duration: 4 },
|
|
{ left: 80, top: 20, delay: 1, duration: 3.2 },
|
|
{ left: 40, top: 80, delay: 1.5, duration: 4.5 },
|
|
{ left: 10, top: 50, delay: 2, duration: 3.8 },
|
|
].map((particle, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute w-2 h-2 bg-white/20 rounded-full animate-float"
|
|
style={{
|
|
left: `${particle.left}%`,
|
|
top: `${particle.top}%`,
|
|
animationDelay: `${particle.delay}s`,
|
|
animationDuration: `${particle.duration}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px) translateX(50px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float linear infinite;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|