efa48f6f6b
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Limit mainwhite pattern to the landing hero and a bottom footer band; remove it from sections and page headers. Add vertical water-flow animation and stronger hero particles with hover boost. Fix green text on white sections and card descriptions in green bands, including the two-days program cards. Co-authored-by: Cursor <cursoragent@cursor.com>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import type { CSSProperties } from "react";
|
|
import { MAIN_WHITE_PATTERN_SRC } from "@/content/topo-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
introPhase: "intro" | "settled" | "static";
|
|
className?: string;
|
|
hoverActive?: boolean;
|
|
hoverX?: number;
|
|
hoverY?: number;
|
|
};
|
|
|
|
export function HeroTopographyBackground({
|
|
introPhase,
|
|
className,
|
|
hoverActive = false,
|
|
hoverX = 50,
|
|
hoverY = 50,
|
|
}: Props) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rift-hero-topo group/topo-section absolute inset-0 isolate overflow-hidden bg-white",
|
|
introPhase === "intro" && "rift-hero-intro",
|
|
introPhase === "settled" && "rift-hero-settled",
|
|
introPhase === "static" && "rift-hero-static",
|
|
hoverActive && "rift-hero-topo--hover",
|
|
className
|
|
)}
|
|
style={
|
|
{
|
|
"--topo-hover-x": `${hoverX}%`,
|
|
"--topo-hover-y": `${hoverY}%`,
|
|
} as CSSProperties
|
|
}
|
|
aria-hidden
|
|
>
|
|
<div className="topo-hero-pattern-site absolute inset-0">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={MAIN_WHITE_PATTERN_SRC}
|
|
alt=""
|
|
className="topo-pattern-asset topo-hero-pattern-img block h-full w-full object-cover"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
|
|
<div className="topo-hero-pattern-water absolute inset-0" aria-hidden>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={MAIN_WHITE_PATTERN_SRC}
|
|
alt=""
|
|
className="topo-hero-water-flow-img block h-full w-full object-cover"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
|
|
<div className="topo-hero-channel-glow absolute inset-0" aria-hidden />
|
|
<div className="topo-hero-water-shimmer absolute inset-0" aria-hidden />
|
|
<div className="topo-hero-water-spotlight absolute inset-0" aria-hidden />
|
|
</div>
|
|
);
|
|
}
|