// Four hero treatments for RangehandIQ. // Shared system: warm paper, bark ink, oxblood accent, sage support. // Sans = Geist; editorial italic = Instrument Serif; data = Geist Mono. // Brand palette — pulled from the logo (oxblood Rangehand, slate IQ, copper mountains). const RANCH_TOKENS = { paper: 'oklch(0.945 0.018 75)', paperSoft: 'oklch(0.965 0.012 75)', paperWarm: 'oklch(0.92 0.022 70)', ink: 'oklch(0.22 0.020 55)', // dark cow silhouette inkSoft: 'oklch(0.42 0.022 60)', inkMute: 'oklch(0.55 0.018 70)', brandRed: 'oklch(0.44 0.115 28)', // "Rangehand" oxblood brandRedDark: 'oklch(0.36 0.110 28)', brandSlate: 'oklch(0.55 0.040 235)', // "IQ" slate blue brandCopper: 'oklch(0.63 0.125 55)', // mountain copper brandTan: 'oklch(0.58 0.060 75)', // tagline gold hair: 'oklch(0.86 0.015 75)', hairStrong: 'oklch(0.78 0.018 75)', }; const sansStack = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif'; const serifStack = '"Instrument Serif", "Source Serif 4", Georgia, serif'; const monoStack = '"Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'; // ───────────────────────────────────────────────────────────────────────── // Shared bits // Typographic wordmark in brand colors. The full pictorial logo (cow + calf // + copper mountains) is used as a featured element below; nav uses just the // type so it stays clean at small sizes. function Wordmark({ inverted = false, size = 17, letterSpacing = '-0.005em' }) { const red = inverted ? 'oklch(0.72 0.115 28)' : RANCH_TOKENS.brandRed; const slate = inverted ? 'oklch(0.78 0.060 235)' : RANCH_TOKENS.brandSlate; return (
Rangehand IQ
); } // Full logo lockup (image). The logo files have baked-in backgrounds, so we // rely on blend modes: multiply drops the light cream BG onto our paper, and // the dark version sits on its own brown plate as a stamp on photo overlays. function LogoLockup({ inverted = false, height = 96 }) { const src = inverted ? 'img/logo-dark.png' : 'img/logo-light.png'; return ( RangehandIQ — Built for the Ranches That Built the West ); } function NavLink({ children, color = RANCH_TOKENS.ink, opacity = 0.78 }) { return ( {children} ); } // Nav: links are {label, href}. The last item is the primary "Request access" // CTA (rendered as a pill). In private beta we link only to in-page anchors — // no page-level routes exist yet, so any item without an href is skipped. const DEFAULT_NAV_ITEMS = [ { label: 'How it works', href: '#features' }, { label: 'The report', href: '#report' }, { label: 'About', href: '#founder' }, { label: 'Request access', href: '#early-access' }, ]; function Nav({ inverted = false, items = DEFAULT_NAV_ITEMS, lockupHeight = 56 }) { const c = inverted ? RANCH_TOKENS.paper : RANCH_TOKENS.ink; const links = items.slice(0, -1); const cta = items[items.length - 1]; return ( ); } function PrimaryCTA({ children = 'See a sample report', size = 'lg' }) { const pad = size === 'lg' ? '14px 24px' : '10px 18px'; const fs = size === 'lg' ? 14 : 13; return ( {children} → ); } function SecondaryCTA({ children = 'Talk to us', color = RANCH_TOKENS.ink, size = 'lg' }) { const pad = size === 'lg' ? '14px 22px' : '10px 16px'; const fs = size === 'lg' ? 14 : 13; return ( {children} ); } function Eyebrow({ children, color = RANCH_TOKENS.inkMute, mark = true }) { return (
{mark && } {children}
); } // ───────────────────────────────────────────────────────────────────────── // HERO 1 — Full-bleed pasture, immersive function Hero1() { return (
{/* Warm dark gradient on the left for legibility */}
{/* Subtle vignette */}
Built for the ranches that built the West

The financial advisor
every big ranch has.
Now built for yours.

Your ranch's financial advisor — connected to your books, fluent in cattle.

See a sample report Talk to us
{/* Right anchor: location stamp */}
41.8754° N
113.2944° W
Elev. 5,331 ft
); } // ───────────────────────────────────────────────────────────────────────── // HERO 2 — Editorial split (text left, photo right) function Hero2() { return (
Park Valley · Box Elder Co. · UT $595 / yr — 30-day trial
); } // ───────────────────────────────────────────────────────────────────────── // HERO 3 — Horizon plate (austere, gallery-style) function Hero3() { return (
); } // ───────────────────────────────────────────────────────────────────────── // HERO 4 — Type-driven (no overlay photo, ledger-utility) function Hero4() { return (
); } // ───────────────────────────────────────────────────────────────────────── // Photo placeholder — used until real cattle imagery is dropped in. // Subtle diagonal stripes in warm earth tones, mono caption explaining // what shot belongs there. NOT decorative — informative. function PhotoPlaceholder({ caption, sub, tone = 'warm', objectPosition }) { const palettes = { warm: ['oklch(0.55 0.06 50)', 'oklch(0.48 0.05 45)'], // dust + earth cool: ['oklch(0.62 0.04 230)', 'oklch(0.55 0.04 230)'], // sky + sage shadow sage: ['oklch(0.58 0.04 110)', 'oklch(0.50 0.04 110)'], night: ['oklch(0.32 0.030 50)', 'oklch(0.24 0.025 50)'], }; const [a, b] = palettes[tone] || palettes.warm; return (
Photo placeholder
{caption}
{sub &&
{sub}
}
); } // ───────────────────────────────────────────────────────────────────────── // HERO 3 — Variations on the horizon plate // User selected: Hero 3 as direction. Plate = calving pasture (placeholder // where image is missing). Mark = "Now in private beta". Ledger row stays. // CTA copy = "Request access" / "Talk to us". // Four directions exploring: photo, headline treatment, layout, color register. // ───────────────────────────────────────────────────────────────────────── // Shared bits function BetaMark({ tone = 'paper' }) { const c = tone === 'paper' ? RANCH_TOKENS.inkMute : 'oklch(0.78 0.020 70)'; const dot = RANCH_TOKENS.brandRed; return (
Now in private beta
); } function Plate({ src, position = 'center 50%', children, minHeight = 280, ratio }) { return (
{src ? : children}
); } function LedgerCell({ k, v, color = RANCH_TOKENS.ink, mute = RANCH_TOKENS.inkMute, hair = RANCH_TOKENS.hairStrong }) { return (
{k}
{v}
); } const LEDGER = [ ['Built for', 'Cow-calf · 250–1,000 hd'], ['Standards', 'FFSC-aligned · lender-ready'], ['Beta pricing', '$595 / year'], ]; // ───────────────────────────────────────────────────────────────────────── // 3A — Refined baseline. Sans + serif-italic. Calving plate (placeholder). function Hero3A() { return (
); } // ───────────────────────────────────────────────────────────────────────── // 3B — All-sans, larger headline, color-shift only. Riders / winter sage. function Hero3B() { return (
); } // ───────────────────────────────────────────────────────────────────────── // 3C — Centered classical. Mark left, location right, headline centered, // plate below, ledger split 4-up, sub + CTAs centered below the ledger. function Hero3C() { return (
); } // ───────────────────────────────────────────────────────────────────────── // 3D — Dark band. Type + plate up top on paper; ledger + sub + CTAs reverse // onto a bark band along the bottom — visually anchors the page in earth. function Hero3D() { const dark = 'oklch(0.22 0.020 50)'; const darkHair = 'oklch(0.32 0.020 55)'; const darkInk = 'oklch(0.94 0.018 75)'; const darkMute = 'oklch(0.70 0.020 70)'; return (
); } Object.assign(window, { Hero1, Hero2, Hero3, Hero4, Hero3A, Hero3B, Hero3C, Hero3D, PhotoPlaceholder, RANCH_TOKENS });