37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface StickyNarrativeItem {
|
|
title: string;
|
|
content: string;
|
|
}
|
|
|
|
interface StickyNarrativeProps {
|
|
title: string;
|
|
items: StickyNarrativeItem[];
|
|
}
|
|
|
|
export default function StickyNarrative({ title, items }: StickyNarrativeProps) {
|
|
return (
|
|
<div className="my-24 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-start not-prose">
|
|
<div className="lg:col-span-4 lg:sticky lg:top-32">
|
|
<h3 className="text-2xl md:text-3xl font-bold text-primary leading-tight">
|
|
{title}
|
|
</h3>
|
|
<div className="w-16 h-1.5 bg-accent mt-8 rounded-full" />
|
|
</div>
|
|
<div className="lg:col-span-8 space-y-12 md:space-y-16">
|
|
{items.map((item, index) => (
|
|
<div key={index} className="group border-b border-neutral-200 pb-12 last:border-0 last:pb-0">
|
|
<h4 className="text-xl md:text-2xl font-bold text-text-primary mb-4 group-hover:text-primary transition-colors">
|
|
{item.title}
|
|
</h4>
|
|
<div className="text-lg text-text-secondary leading-relaxed">
|
|
{item.content}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|