mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact

Browse Source
This commit is contained in:
Marc Mintel
2026-01-30 00:47:39 +01:00
parent f536765b6c
commit 36bb12f656
3 changed files with 720 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/Section.tsx
View File

@@ -10,6 +10,7 @@ interface SectionProps {
variant?: 'white' | 'gray';
borderTop?: boolean;
connector?: React.ReactNode;
containerVariant?: 'narrow' | 'normal' | 'wide';
}
export const Section: React.FC<SectionProps> = ({
@@ -21,49 +22,84 @@ export const Section: React.FC<SectionProps> = ({
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="narrow-container">
<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={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 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>{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>
</Reveal>
)}
<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>
{/* Main Content */}
<div className="md:col-span-9">
{children}
</div>
</div>
)}
</div>
</section>
);