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>
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
|
|
import { TopographicPattern } from "@/components/brand/TopographicPattern";
|
|
import { ScrollReveal } from "@/components/motion/ScrollReveal";
|
|
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
|
|
import {
|
|
SITE_TOPO_PATTERN,
|
|
toneFromSectionVariant,
|
|
type TopoPatternId,
|
|
} from "@/content/topo-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
id?: string;
|
|
className?: string;
|
|
children: ReactNode;
|
|
variant?: "default" | "muted" | "inverse";
|
|
riftPattern?: TopoPatternId;
|
|
riftFlow?: boolean;
|
|
};
|
|
|
|
export function Section({
|
|
id,
|
|
className,
|
|
children,
|
|
variant = "default",
|
|
riftPattern = SITE_TOPO_PATTERN,
|
|
riftFlow,
|
|
}: Props) {
|
|
let pattern: TopoPatternId = riftPattern;
|
|
if (riftFlow && pattern === "none") pattern = SITE_TOPO_PATTERN;
|
|
const tone = toneFromSectionVariant(variant);
|
|
const isGreen = tone === "green";
|
|
const showPattern = !isGreen && pattern !== "none";
|
|
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={cn(
|
|
"group/topo-section relative isolate py-16 md:py-24",
|
|
isGreen && "section-green bg-[#1a5c38] text-white",
|
|
!isGreen && "section-white bg-white text-[#0d3d26]",
|
|
showPattern && "overflow-x-hidden",
|
|
isGreen && "overflow-hidden",
|
|
className
|
|
)}
|
|
data-section-tone={tone}
|
|
>
|
|
{showPattern && (
|
|
<TopographicPattern pattern={pattern} tone="light" />
|
|
)}
|
|
{!isGreen && <TopoCurvyExtend />}
|
|
<TopoSectionProvider tone={tone}>
|
|
<ScrollReveal
|
|
variant="section"
|
|
className={cn(
|
|
"topo-content-layer relative z-10 mx-auto max-w-6xl px-4 md:px-6",
|
|
!isGreen && "topo-content-readable"
|
|
)}
|
|
>
|
|
{children}
|
|
</ScrollReveal>
|
|
</TopoSectionProvider>
|
|
</section>
|
|
);
|
|
}
|