3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
|
|
import { TopographicPattern } from "@/components/brand/TopographicPattern";
|
|
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
|
|
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
|
|
import { SITE_TOPO_PATTERN } from "@/content/topo-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type PageRiftHeaderVariant =
|
|
| "program"
|
|
| "lineup"
|
|
| "partners"
|
|
| "pitch"
|
|
| "exhibit"
|
|
| "sponsor"
|
|
| "tickets"
|
|
| "minimal";
|
|
|
|
type Props = {
|
|
variant: PageRiftHeaderVariant;
|
|
profilePath?: string;
|
|
eyebrow?: string;
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function PageRiftHeader({
|
|
variant,
|
|
profilePath,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
children,
|
|
className,
|
|
}: Props) {
|
|
void variant;
|
|
void profilePath;
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"section-white group/topo-section relative isolate min-h-[220px] overflow-x-hidden border-b border-[#1a5c38]/10 bg-white pt-24 pb-10 md:min-h-[260px] md:pb-12",
|
|
className
|
|
)}
|
|
>
|
|
<TopographicPattern pattern={SITE_TOPO_PATTERN} tone="light" />
|
|
<TopoCurvyExtend />
|
|
<TopoSectionProvider tone="light">
|
|
<div className="topo-content-layer topo-content-readable relative z-10 mx-auto max-w-6xl px-4 pt-4 md:px-6">
|
|
<TopoProseSurface className="max-w-3xl">
|
|
{eyebrow && (
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
<div className="mt-3">{title}</div>
|
|
{description && (
|
|
<div className="mt-4 text-muted-foreground leading-relaxed">{description}</div>
|
|
)}
|
|
</TopoProseSurface>
|
|
{children && <div className="relative z-[15] mt-8">{children}</div>}
|
|
</div>
|
|
</TopoSectionProvider>
|
|
</header>
|
|
);
|
|
}
|