75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
import { ReactNode, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
type ScrollLockedSectionProps = {
|
|
id: string;
|
|
eyebrow: string;
|
|
title: ReactNode;
|
|
description: ReactNode;
|
|
showButton?: boolean;
|
|
buttonText?: string;
|
|
buttonLink?: string;
|
|
};
|
|
|
|
export const ScrollLockedSection = ({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
showButton = true,
|
|
buttonText = 'Directory Info',
|
|
buttonLink,
|
|
}: ScrollLockedSectionProps) => {
|
|
const navigate = useNavigate();
|
|
const sectionRef = useRef<HTMLElement | null>(null);
|
|
|
|
return (
|
|
<section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-black">
|
|
<div className="sticky top-0 flex h-screen flex-col">
|
|
<div className="flex h-full w-full flex-col px-6 sm:px-10 lg:px-16">
|
|
{/* Text Section - Takes ~20% of vertical space */}
|
|
<div className="flex-shrink-0 space-y-4 pt-16 sm:pt-20 lg:pt-24">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-white">
|
|
{eyebrow}
|
|
</span>
|
|
<div className="max-w-3xl space-y-3">
|
|
<p className="text-2xl font-semibold leading-tight text-white sm:text-3xl lg:text-[2.25rem] lg:leading-[1.2]">
|
|
{title}
|
|
</p>
|
|
<p className="text-base leading-relaxed text-white/70 sm:text-lg">{description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Animation Section - Takes ~80% of vertical space */}
|
|
<div className="flex flex-col items-center gap-6 py-10 sm:gap-8 sm:py-12 lg:gap-10">
|
|
<div className="mx-auto w-full border border-white/10 bg-black shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] aspect-[28/8]" />
|
|
{/* Button below animation card */}
|
|
{showButton && buttonLink && (
|
|
<div className="flex justify-center">
|
|
{buttonLink.startsWith('http') ? (
|
|
<a
|
|
href={buttonLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
|
|
>
|
|
{buttonText}
|
|
</a>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(buttonLink)}
|
|
className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
|
|
>
|
|
{buttonText}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|