"use client"; import { useEffect, useRef, useState } from "react"; import "./north-star.css"; import { OppCharts } from "@/components/partner-charts"; import { CapabilityIcon } from "@/components/capability-icons"; import { CAPABILITIES, COMPARISON, FLYWHEELS, INDUSTRIES, INDUSTRY_TABS, JOURNEY, NORTHSTAR_NODES, OPPORTUNITY_CARDS, SYSTEM_TABS, type Flywheel as FlywheelData, } from "@/lib/north-star"; import type { NorthStarContent, SectionCopy } from "@/lib/north-star-content"; function nodeIcon(id: string) { switch (id) { case "growth": return ; case "customer": return ; case "operations": return ; default: return <>; } } function FlywheelSvg({ data, idx }: { data: FlywheelData; idx: number }) { const size = 220; const c = 110; const r = 92; const n = data.steps.length; return ( {data.steps.map((step, i) => { const a = (i / n) * 2 * Math.PI - Math.PI / 2; const x = c + Math.cos(a) * (r + 6); const y = c + Math.sin(a) * (r + 6); const anchor = Math.abs(Math.cos(a)) < 0.3 ? "middle" : x > c ? "end" : "start"; return ( {step} ); })} {data.title.split(" ")[0].toUpperCase()} ); } const NODE_POS: Record = { growth: { top: "2%", left: "50%", transform: "translateX(-50%)" }, customer: { top: "50%", right: "0%", transform: "translateY(-50%)" }, operations: { bottom: "2%", left: "50%", transform: "translateX(-50%)" }, technology: { top: "50%", left: "0%", transform: "translateY(-50%)" }, }; /** Renders a section header (eyebrow + heading with optional gradient em + subtitle). */ function SectionHead({ copy, headingClass, subClass, subStyle, reveal = true, }: { copy: SectionCopy; headingClass: string; subClass?: string; subStyle?: React.CSSProperties; reveal?: boolean; }) { const r = reveal ? " reveal" : ""; return ( <>

{copy.eyebrow}

{copy.heading} {copy.headingEm ? {copy.headingEm} : null} {copy.headingSuffix} {copy.heading2 ? ( <> {"\n"} {copy.heading2} ) : null}

{copy.sub ? (

{copy.sub}

) : null} ); } export function NorthStarPage({ content }: { content: NorthStarContent }) { const rootRef = useRef(null); const canvasRef = useRef(null); const [activeSystem, setActiveSystem] = useState(SYSTEM_TABS[0].id); const [activeIndustry, setActiveIndustry] = useState(INDUSTRY_TABS[0].id); const [filled, setFilled] = useState(false); // Reveal + imagine via IntersectionObserver useEffect(() => { const root = rootRef.current; if (!root) return; const els = root.querySelectorAll(".reveal, .imagine-line"); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add(e.target.classList.contains("imagine-line") ? "visible" : "in"); } else if (e.target.classList.contains("imagine-line")) { e.target.classList.remove("visible"); } }); }, { threshold: 0.15 }, ); els.forEach((el) => io.observe(el)); const t = setTimeout(() => setFilled(true), 300); return () => { io.disconnect(); clearTimeout(t); }; }, []); // Particle field useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let raf = 0; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener("resize", resize); const COUNT = 60; const ps = Array.from({ length: COUNT }, (_, i) => ({ x: ((i * 97) % 100) / 100, y: ((i * 53) % 100) / 100, vx: (((i * 31) % 100) / 100 - 0.5) * 0.0006, vy: (((i * 17) % 100) / 100 - 0.5) * 0.0006, r: 0.5 + ((i * 7) % 15) / 10, a: 0.05 + ((i * 13) % 25) / 100, })); const draw = () => { const w = canvas.width; const h = canvas.height; ctx.clearRect(0, 0, w, h); ps.forEach((p) => { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > 1) p.vx *= -1; if (p.y < 0 || p.y > 1) p.vy *= -1; ctx.beginPath(); ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(43,186,200,${p.a + 0.12})`; ctx.fill(); }); for (let i = 0; i < ps.length; i++) { for (let j = i + 1; j < ps.length; j++) { const dx = (ps[i].x - ps[j].x) * w; const dy = (ps[i].y - ps[j].y) * h; const dist = Math.hypot(dx, dy); if (dist < 150) { ctx.beginPath(); ctx.moveTo(ps[i].x * w, ps[i].y * h); ctx.lineTo(ps[j].x * w, ps[j].y * h); ctx.strokeStyle = `rgba(54,184,95,${0.08 * (1 - dist / 150)})`; ctx.lineWidth = 0.5; ctx.stroke(); } } } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); }; }, []); return (
{/* HERO */}

{content.hero.eyebrow}

{content.hero.heading} {content.hero.headingEm ? {content.hero.headingEm} : null} {content.hero.headingSuffix} {content.hero.heading2 ? ( <> {"\n"} {content.hero.heading2} ) : null}

{content.hero.sub}

{/* OPPORTUNITY */}
{OPPORTUNITY_CARDS.map((card) => (

{card.title}

{card.desc}

{card.meterLabel}
))}
{/* NORTHSTAR MAP */}
✦
Northstar
{NORTHSTAR_NODES.map((node) => (
{nodeIcon(node.id)}
{node.label}

{node.title}

{node.desc}

))}
{/* CAPABILITIES */}
{SYSTEM_TABS.map((t) => ( ))}
{SYSTEM_TABS.map((t) => (
{CAPABILITIES[t.id].map((cap) => (

{cap.title}

{cap.desc}

))}
))}
{/* FLYWHEELS */}
{FLYWHEELS.map((fw, idx) => (

{fw.title}

{fw.desc}

))}
{/* JOURNEY */}
{JOURNEY.map((step) => (
{step.num}

{step.title}

{step.detail}
))}
{/* INDUSTRIES */}
{INDUSTRY_TABS.map((t) => ( ))}
{INDUSTRY_TABS.map((t) => { const c = INDUSTRIES[t.id]; return (
{([ ["Common Challenges", c.challenges], ["Hidden Opportunities", c.opportunities], ["Future Possibilities", c.possibilities], ] as const).map(([heading, items]) => (

{heading}

    {items.map((item) => (
  • {item}
    • ))}
))}
); })}
{/* COMPARISON */}

{COMPARISON.vendor.title}

{COMPARISON.vendor.rows.map((row) => (
{row}
))}

{COMPARISON.partner.title}

{COMPARISON.partner.rows.map((row) => (
{row}
))}
{/* IMAGINE */}

{content.imagineEyebrow}

Imagine if your leadership team could see opportunities{" "} before competitors.
Imagine if customer needs became visible{" "} before they were expressed.
Imagine if every decision was supported by{" "} intelligence, not instinct alone.
Imagine if your operations could handle{" "} ten times the volume without ten times the team.
Imagine if growth was no longer limited by the cost of{" "} scale.
{/* FINAL CTA */}

{content.finalCta.eyebrow}

{content.finalCta.heading} {content.finalCta.headingEm ? {content.finalCta.headingEm} : null} {content.finalCta.headingSuffix} {content.finalCta.heading2 ? ( <> {"\n"} {content.finalCta.heading2} ) : null}

{content.finalCta.sub}

); }