Kirubel-Kibru-Yaltopia
d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { RoundedRockVoronoiBackground } from "@/components/brand/RoundedRockVoronoiBackground";
|
|
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
|
|
import { WavyContourLinesBackground } from "@/components/brand/WavyContourLinesBackground";
|
|
import { ScrollReveal } from "@/components/motion/ScrollReveal";
|
|
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
|
|
import { toneFromSectionVariant, type TopoPatternId } from "@/content/topo-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
id?: string;
|
|
className?: string;
|
|
children: ReactNode;
|
|
/** Override section backdrop (rock on green, contours on white); pass `null` to hide. */
|
|
background?: ReactNode | null;
|
|
variant?: "default" | "muted" | "inverse";
|
|
/** @deprecated Patterns are hero + footer only; kept for API compatibility */
|
|
riftPattern?: TopoPatternId;
|
|
/** @deprecated */
|
|
riftFlow?: boolean;
|
|
};
|
|
|
|
export function Section({
|
|
id,
|
|
className,
|
|
children,
|
|
background,
|
|
variant = "default",
|
|
riftPattern,
|
|
riftFlow,
|
|
}: Props) {
|
|
void riftPattern;
|
|
void riftFlow;
|
|
const tone = toneFromSectionVariant(variant);
|
|
const isGreen = tone === "green";
|
|
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={cn(
|
|
"group/topo-section relative isolate py-16 md:py-24",
|
|
isGreen && "section-green bg-[#1a5c38]",
|
|
!isGreen && "section-white bg-white text-[#0d3d26]",
|
|
!isGreen && "overflow-x-hidden overflow-y-visible",
|
|
isGreen && "overflow-hidden",
|
|
className
|
|
)}
|
|
data-section-tone={tone}
|
|
>
|
|
{isGreen &&
|
|
(background !== undefined ? (
|
|
background
|
|
) : (
|
|
<RoundedRockVoronoiBackground
|
|
className="z-0"
|
|
gradient={variant === "inverse"}
|
|
/>
|
|
))}
|
|
{!isGreen &&
|
|
(background !== undefined ? (
|
|
background
|
|
) : (
|
|
<WavyContourLinesBackground className="z-0" />
|
|
))}
|
|
{!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>
|
|
);
|
|
}
|