// Three hero variations: // A — Centered, type-driven, big restrained statement // B — Asymmetric editorial, name on left, statement on right, headshot column // C — Mark-as-art: animated geometric remix of the RLC monogram filling the right half const { useEffect: heUE, useState: heUS, useRef: heUR } = React; // BudgetHero — feathered photo of a hand-annotated budget on a wooden desk. // Subtle mouse-parallax tilt on rich/medium motion; static on subtle. function BudgetHero({ motion = "medium" }) { const [mx, setMx] = heUS(0); const [my, setMy] = heUS(0); heUE(() => { if (motion === "subtle") return; const onMove = (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 2; const y = (e.clientY / window.innerHeight - 0.5) * 2; setMx(x); setMy(y); }; window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, [motion]); const tiltX = my * (motion === "rich" ? 3 : 1.5); const tiltY = mx * (motion === "rich" ? -3 : -1.5); const dx = mx * (motion === "rich" ? 8 : 4); const dy = my * (motion === "rich" ? 8 : 4); return (
A hand-annotated nonprofit annual operating budget on a wooden desk, with notes and checkmarks
); } function NavBar({ variant, motion, transparent, scrolled }) { const links = [ { label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Experience", href: "#experience" }, { label: "Expertise", href: "#expertise" }, { label: "Impact", href: "#impact" }, ]; const solid = !transparent || scrolled; const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { if (menuOpen) { const orig = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = orig; }; } }, [menuOpen]); return ( ); } // ───────────────────────────────────────────── Hero A — Centered // budgetTreatment: "card" (default — image card on the right) // "rightBleed" (image fills right half, navy wash overlay) // "fullBleed" (image covers entire hero as a watermark) function HeroCentered({ motion, transparent, scrolled, budgetTreatment = "card" }) { const isRightBleed = budgetTreatment === "rightBleed"; const isFullBleed = budgetTreatment === "fullBleed"; const isCard = budgetTreatment === "card"; return (
{/* Watermark image background — full-bleed or right-half */} {(isRightBleed || isFullBleed) && (
{/* Watermark image background — full-bleed or right-half. objectPosition shifts slightly RIGHT so the budget paper stays centered when the image is constrained to the right ~58% of the hero, while still showing a sliver of the "Strategic Planning" notepad on the left. */} {/* Navy color wash — multiplies over the image so it becomes a tonal watermark */}
{/* Subtle blue tint blend */}
)} {/* Animated grid backdrop — only visible when not under heavy image wash */} {isCard && } {isFullBleed && }
Nonprofit fundraising · strategy · capacity

Grow the budget. Advance the mission.

25+ years building nonprofits, reversing deficits, and growing revenue. RLC Development Solutions partners with civic, charitable, and advocacy organizations across the United States.

Start a conversation See the work →
{isCard && (
)}
); } // ───────────────────────────────────────────── Hero B — Asymmetric editorial function HeroEditorial({ motion, transparent, scrolled }) { return (
RLC Development Solutions · Est. 2020

We build it with you — and stay until it works.

Nonprofit fundraising and strategy support from Rey López-Calderón, J.D. — 25+ years specializing in nonpartisan civic and democracy organizations.

Start a conversation See the work →
); } // ───────────────────────────────────────────── Hero C — Mark as art function HeroMarkArt({ motion, transparent, scrolled }) { const [t, setT] = heUS(0); heUE(() => { if (motion === "subtle") return; let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [motion]); // Mouse parallax const [mx, setMx] = heUS(0); const [my, setMy] = heUS(0); heUE(() => { if (motion !== "rich") return; const onMove = (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 2; const y = (e.clientY / window.innerHeight - 0.5) * 2; setMx(x); setMy(y); }; window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, [motion]); return (
Fundraising · Strategy · Capacity

25 years in the room.

RLC Development Solutions is the consultancy of Rey López-Calderón, J.D. — a senior fundraising advisor for nonprofits that change the world.

Let's talk Selected work →
); } // Animated remix of the RLC monogram — three deconstructed "marks" floating function AnimatedMark({ motion, t }) { const drift = motion === "subtle" ? 0 : Math.sin(t * 0.6) * 8; const drift2 = motion === "subtle" ? 0 : Math.cos(t * 0.5) * 6; return (
{/* Big primary mark */}
{/* Echo 1 — large mark, low opacity */}
{/* Echo 2 */}
{/* Glow accent */}
); } // ───────────────────────────────────────────── Shared subcomponents function CTAButton({ href, children, variant = "primary" }) { const isPrimary = variant === "primary"; return ( { if (isPrimary) { e.currentTarget.style.background = "#33adff"; e.currentTarget.style.borderColor = "#33adff"; } else { e.currentTarget.style.borderColor = "#0F8C6E"; e.currentTarget.style.color = "#0F8C6E"; } e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={(e) => { if (isPrimary) { e.currentTarget.style.background = "#0099ff"; e.currentTarget.style.borderColor = "#0099ff"; } else { e.currentTarget.style.borderColor = "#1e3a5a"; e.currentTarget.style.color = "#ffffff"; } e.currentTarget.style.transform = "translateY(0)"; }}> {children} ); } function BackgroundGrid({ motion, subtle }) { if (motion === "subtle") return null; return (
); } function ScrollHint({ motion }) { if (motion === "subtle") return null; return (
Scroll
); } Object.assign(window, { HeroCentered, HeroEditorial, HeroMarkArt, NavBar });