125 lines
4.3 KiB
TypeScript
125 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { usePathname } from 'next/navigation';
|
|
import { motion } from 'framer-motion';
|
|
import { Badge, Container, Heading } from '@/components/ui';
|
|
import { Button } from '@/components/ui/Button';
|
|
|
|
export interface HeroSectionProps {
|
|
title: string;
|
|
badge?: string;
|
|
subtitle?: string;
|
|
backgroundImage?: any;
|
|
alignment?: 'left' | 'center';
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
}
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.15,
|
|
delayChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }
|
|
},
|
|
};
|
|
|
|
export const HeroSection: React.FC<HeroSectionProps> = (props) => {
|
|
const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
|
|
const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<section
|
|
className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-24 pb-16 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
|
|
>
|
|
{bgSrc && (
|
|
<motion.div
|
|
key={`hero-bg-${pathname}`}
|
|
className="absolute inset-0 z-0"
|
|
initial={{ scale: 1.05, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 1.5, ease: "easeOut" }}
|
|
>
|
|
<Image
|
|
src={bgSrc}
|
|
alt={title || 'Hero Background'}
|
|
fill
|
|
className="object-cover filter contrast-110 saturate-110 brightness-95"
|
|
style={{
|
|
objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
|
|
}}
|
|
sizes="100vw"
|
|
priority
|
|
/>
|
|
{/* Cinematic Color Grading Overlay */}
|
|
<div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
|
|
|
|
{/* Dramatic Vignette & Fade to content */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
|
|
|
|
{/* Top Fade for Header Navigation Readability */}
|
|
<div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
|
|
</motion.div>
|
|
)}
|
|
<Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
|
|
<motion.div
|
|
key={`hero-content-${pathname}`}
|
|
className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{badge && (
|
|
<motion.div variants={itemVariants}>
|
|
<Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
|
|
{badge}
|
|
</Badge>
|
|
</motion.div>
|
|
)}
|
|
<motion.div variants={itemVariants}>
|
|
<Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
|
|
{title}
|
|
</Heading>
|
|
</motion.div>
|
|
{subtitle && (
|
|
<motion.div variants={itemVariants}>
|
|
<p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
|
|
{subtitle}
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
{ctaLabel && ctaHref && (
|
|
<motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
|
|
<Button
|
|
href={ctaHref}
|
|
variant="accent"
|
|
size="lg"
|
|
>
|
|
{ctaLabel}
|
|
<span className="ml-3 transition-transform group-hover/btn:translate-x-2">
|
|
→
|
|
</span>
|
|
</Button>
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
};
|