ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type TimelineRailProps = {
|
|
/** Distance from track top to rail start */
|
|
offsetTop: number;
|
|
/** Rail length (desktop: first→last node; stacked: first card top→last card bottom) */
|
|
trackHeight: number;
|
|
/** Progress fill within the rail (0 → trackHeight) */
|
|
progressHeight: number;
|
|
className?: string;
|
|
};
|
|
|
|
export function TimelineRail({
|
|
offsetTop,
|
|
trackHeight,
|
|
progressHeight,
|
|
className,
|
|
}: TimelineRailProps) {
|
|
const clampedTrack = Math.max(0, trackHeight);
|
|
const clampedProgress = Math.min(Math.max(0, progressHeight), clampedTrack);
|
|
|
|
return (
|
|
<div
|
|
className={cn("timeline-rail pointer-events-none absolute z-0", className)}
|
|
style={{ top: offsetTop, height: clampedTrack }}
|
|
aria-hidden
|
|
>
|
|
{/* Dim track — ends at the last node, not past the final card */}
|
|
<div className="timeline-rail__track absolute inset-0 w-[2px] -translate-x-1/2 rounded-full bg-foreground/12" />
|
|
|
|
{/* Soft progress accent */}
|
|
<div
|
|
className="timeline-rail__progress absolute top-0 w-[2px] -translate-x-1/2 rounded-full bg-gradient-to-b from-primary/35 via-primary to-[color:var(--brand-highlight)] transition-[height,box-shadow] duration-500 ease-out"
|
|
style={{
|
|
height: clampedProgress,
|
|
boxShadow:
|
|
clampedProgress > 0
|
|
? "0 0 10px color-mix(in srgb, var(--brand-primary) 40%, transparent), 0 0 22px color-mix(in srgb, var(--brand-highlight) 18%, transparent)"
|
|
: "none",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|