88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import Container from '@/components/ui/Container';
|
|
|
|
interface AlternatingSectionProps {
|
|
heading: string;
|
|
description: string | ReactNode;
|
|
mockup: ReactNode;
|
|
layout: 'text-left' | 'text-right';
|
|
backgroundImage?: string;
|
|
}
|
|
|
|
export default function AlternatingSection({
|
|
heading,
|
|
description,
|
|
mockup,
|
|
layout,
|
|
backgroundImage
|
|
}: AlternatingSectionProps) {
|
|
return (
|
|
<section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
|
|
{backgroundImage && (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: `url(${backgroundImage})`,
|
|
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)'
|
|
}}
|
|
/>
|
|
)}
|
|
<Container size="lg" className="relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
{layout === 'text-left' ? (
|
|
<>
|
|
{/* Text Content - Left */}
|
|
<div className="space-y-6">
|
|
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
|
|
{heading}
|
|
</h2>
|
|
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mockup - Right (fade right) */}
|
|
<div className="relative">
|
|
<div
|
|
className="w-full h-[400px] lg:h-[500px]"
|
|
style={{
|
|
maskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
|
|
WebkitMaskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
|
|
}}
|
|
>
|
|
{mockup}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Mockup - Left (fade left) */}
|
|
<div className="relative order-2 lg:order-1">
|
|
<div
|
|
className="w-full h-[400px] lg:h-[500px]"
|
|
style={{
|
|
maskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
|
|
WebkitMaskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
|
|
}}
|
|
>
|
|
{mockup}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text Content - Right */}
|
|
<div className="space-y-6 order-1 lg:order-2">
|
|
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
|
|
{heading}
|
|
</h2>
|
|
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
} |