Template
Rami BitarandClaude Fable 5.1
07a99b441c
- Set up next-themes with a light/dark toggle in the header and move all sections onto theme tokens; dark mode stays pure black - Replace the hero terminal line with the AI Elements Snippet component - Restructure components into layout/, sections/, and shared/ with site-wide config in lib/site.ts Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
45 lines
881 B
TypeScript
45 lines
881 B
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
export function SectionHeading({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
align = 'left',
|
|
className,
|
|
}: {
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
align?: 'left' | 'center';
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'max-w-2xl',
|
|
align === 'center' && 'mx-auto text-center',
|
|
className,
|
|
)}
|
|
>
|
|
{eyebrow && (
|
|
<p className="font-mono text-xs uppercase tracking-[0.2em] text-foreground/40">
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
<h2
|
|
className={cn(
|
|
'text-3xl font-semibold tracking-tight sm:text-4xl',
|
|
eyebrow && 'mt-4',
|
|
)}
|
|
>
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="mt-5 text-lg leading-8 text-foreground/55">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|