107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import * as React from 'react';
|
|
import { Reveal } from './Reveal';
|
|
|
|
interface SectionProps {
|
|
number?: string;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
variant?: 'white' | 'gray';
|
|
borderTop?: boolean;
|
|
connector?: React.ReactNode;
|
|
containerVariant?: 'narrow' | 'normal' | 'wide';
|
|
}
|
|
|
|
export const Section: React.FC<SectionProps> = ({
|
|
number,
|
|
title,
|
|
children,
|
|
className = "",
|
|
delay = 0,
|
|
variant = 'white',
|
|
borderTop = false,
|
|
connector,
|
|
containerVariant = 'narrow',
|
|
}) => {
|
|
const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
|
|
const borderClass = borderTop ? 'border-t border-slate-100' : '';
|
|
const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';
|
|
|
|
// If no number and title, or if we want to force a simple layout, we could add a prop.
|
|
// But let's make it smart: if it's wide, maybe we want the title on top anyway?
|
|
// The user specifically asked to move it above for the configurator.
|
|
|
|
const isTopTitle = containerVariant === 'wide';
|
|
|
|
return (
|
|
<section className={`relative py-24 md:py-32 group ${bgClass} ${borderClass} ${className}`}>
|
|
<div className={containerClass}>
|
|
{isTopTitle ? (
|
|
<div className="space-y-16">
|
|
{(number || title) && (
|
|
<div className="flex flex-col md:flex-row md:items-end gap-6 md:gap-12">
|
|
{number && (
|
|
<Reveal delay={delay}>
|
|
<span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none">
|
|
{number}
|
|
</span>
|
|
</Reveal>
|
|
)}
|
|
{title && (
|
|
<Reveal delay={delay + 0.1}>
|
|
<div className="flex items-center gap-3 mb-2 md:mb-4">
|
|
<div className="h-px w-6 bg-slate-900"></div>
|
|
<h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div>{children}</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16">
|
|
{/* Sidebar: Number & Title */}
|
|
<div className="md:col-span-3 relative">
|
|
{/* Connector Line */}
|
|
{connector && (
|
|
<div className="absolute left-[2.5rem] top-0 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
|
|
{connector}
|
|
</div>
|
|
)}
|
|
|
|
<div className="md:sticky md:top-32 space-y-6">
|
|
{number && (
|
|
<Reveal delay={delay}>
|
|
<span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none relative bg-white/0 backdrop-blur-[2px]">
|
|
{number}
|
|
</span>
|
|
</Reveal>
|
|
)}
|
|
{title && (
|
|
<Reveal delay={delay + 0.1}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-px w-6 bg-slate-900"></div>
|
|
<h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="md:col-span-9">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|