6c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 6d:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 6e:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 8f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 60:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}] 61:["$","li","d3-geo",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-geo","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-geo"}]]}]}] 62:["$","li","embla-carousel-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"embla-carousel-react"}]]}]}] 63:["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}] 64:["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}] 65:["$","li","simple-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/simple-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"simple-icons"}]]}]}] 66:["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}] 67:["$","li","topojson-client",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/topojson-client","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"topojson-client"}]]}]}] 68:["$","li","world-atlas",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/world-atlas","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"world-atlas"}]]}]}] 69:["$","$L6c",null,{"namespace":"@upfork","registryDependencies":[]}] 6a:["$","$L6d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L6e",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","bg-page",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bg-page",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff"}]]}],["$","div","bg-page-dark-hero",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bg-page-dark-hero",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#000"}]]}],["$","div","bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff"}]]}],["$","div","fg-primary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-primary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-900)"}]]}],["$","div","fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-550)"}]]}],["$","div","fg-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-450)"}]]}],["$","div","fg-on-dark",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-on-dark",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff"}]]}],["$","div","fg-on-dark-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-on-dark-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-200)"}]]}],["$","div","fg-on-chip",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","fg-on-chip",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-600)"}]]}],["$","div","border-subtle",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","border-subtle",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--color-cold-gray-150)"}]]}],["$","div","border-divider",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":["$L6f","$L70"]}],"$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a"]}],"$L8b"]}]}]]}],"$L8c","$L8d","$L8e"]}]}]}] 90:T8948,"use client"; import { Suspense, useMemo, useRef, useState, useSyncExternalStore } from "react"; import * as THREE from "three"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { Line, useTexture } from "@react-three/drei"; import { Bloom, EffectComposer } from "@react-three/postprocessing"; import { usePrefersReducedMotion } from "@/lib/marketly/hooks"; import { EarthFallbackVideo } from "./EarthFallbackVideo"; import { Starfield } from "./Starfield"; /* ---- Scene geometry (world units; the planet has radius 1) ---------------------------------------------------- */ /* * The camera floats a quarter radius above the night side and looks down at the horizon, so the limb runs as a wide, * gently curved line across the lower part of the frame. The sun sits behind the planet, just under the horizon at * the center: the upper part of the visible planet is still in the evening light, the rest is night. */ const PLANET = new THREE.Vector3(0, -1.25, 0); const CAMERA_REST = new THREE.Vector3(0, 0, 0); const CAMERA_INTRO = new THREE.Vector3(0, 0.45, 1.3); const LOOK_AT = new THREE.Vector3(0, -0.675, -1); const FOV = 38; /** Direction from the planet's center to the sun: straight ahead, high enough to light the ground near the horizon. */ const SUN_DIR = new THREE.Vector3(0, -0.34, -0.94).normalize(); const INTRO_SECONDS = 2.2; /* * The spin. The planet turns about its own axis, which lies across the frame with north to the right: the camera * hangs over 37°N looking west, the way an evening is seen from orbit. The ground comes over the horizon in daylight, * runs down the frame, crosses the terminator, and its towns light up as it passes into the night. Along 37°N the * frame sweeps the Mediterranean, Europe, the United States, Japan, China, India and the Middle East. */ const LATITUDE = THREE.MathUtils.degToRad(37); const POLE = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), new THREE.Vector3(Math.cos(LATITUDE), Math.sin(LATITUDE), 0)); /** Radians a second about the axis: a town crosses the frame from the horizon to the bottom edge in about 12 s. */ const SPIN_SPEED = 0.024; /** Where the spin starts: the Middle East under the camera, the Mediterranean ahead in the evening light. */ const SPIN_START = THREE.MathUtils.degToRad(120); /* The price lines: each rises off one town's lights, runs like a chart and comes down on another's. */ const ARC_SLOTS = 2; const ARC_DRAW = 2.8; const ARC_HOLD = 2.6; const ARC_FADE = 0.9; const ARC_LIFE = ARC_DRAW + ARC_HOLD + ARC_FADE; const ARC_COLORS = ["#ff3fa4", "#5b8bff"]; const ARC_LAYERS = [ { width: 1.6, opacity: 1 }, { width: 4.5, opacity: 0.24 }, { width: 9, opacity: 0.06 }, ]; const TEXTURES = ["https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/textures/earth_day.jpg", "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/textures/earth_night.jpg", "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/textures/earth_clouds.webp"]; type LineHandle = React.ComponentRef; type Props = { /** False while the hero is off screen: the loop pauses. */ active?: boolean; className?: string; }; /** * The turning Earth: the ground comes over the horizon in the evening light, its land and clouds still visible * through the blue air, and runs down into the night, where the towns light up one by one as they cross the * terminator. The sun rises behind the horizon with rays all round, a thin atmosphere glows brightest toward it, * and "price lines" arc from one town's lights to another's. Falls back to a still without WebGL or on low-memory * devices. */ export function EarthScene({ active = true, className }: Props) { const reduced = usePrefersReducedMotion(); // null on the server and during hydration, then whether this device can run the 3D scene. const capable = useSyncExternalStore(subscribeNever, getCapability, () => null); if (capable === false) return ; if (capable === null) return

; // The bloom pass makes the city lights, the price lines and the sun glow; it is skipped on phones and very dense // screens, where it costs more than it shows. const bloom = !reduced && window.innerWidth >= 768 && window.devicePixelRatio <= 2; return (

); } let capability: boolean | null = null; function getCapability(): boolean { if (capability === null) capability = webglAvailable() && !lowMemory(); return capability; } function subscribeNever() { return () => {}; } function webglAvailable(): boolean { try { const canvas = document.createElement("canvas"); return Boolean(canvas.getContext("webgl2") || canvas.getContext("webgl")); } catch { return false; } } function lowMemory(): boolean { const memory = (navigator as Navigator & { deviceMemory?: number }).deviceMemory; return typeof memory === "number" && memory < 4; } /* ---- The scene ----------------------------------------------------------------------------------------------- */ type Arc = { id: number; color: string; points: THREE.Vector3[]; length: number; from: THREE.Vector3; to: THREE.Vector3; born: number }; function Scene({ reduced }: { reduced: boolean }) { const [day, night, clouds] = useTexture(TEXTURES, (textures) => { const [d, n] = textures as THREE.Texture[]; d.colorSpace = THREE.SRGBColorSpace; n.colorSpace = THREE.SRGBColorSpace; // The ground near the horizon is seen almost edge on: keep its detail. for (const t of textures as THREE.Texture[]) t.anisotropy = 16; }); const spinRef = useRef(null); const planetRef = useRef(null); const cloudsRef = useRef(null); const flareRef = useRef(null); const raysRef = useRef<(THREE.Sprite | null)[]>([]); const lineRefs = useRef<(LineHandle | null)[]>([]); const glowRefs = useRef<(THREE.Sprite | null)[]>([]); const started = useRef(null); const spin = useRef(0); const nextId = useRef(1); const arcsRef = useRef<(Arc | null)[]>(Array.from({ length: ARC_SLOTS }, () => null)); const [arcs, setArcs] = useState<(Arc | null)[]>(() => Array.from({ length: ARC_SLOTS }, () => null)); const { camera, size } = useThree(); const restView = useMemo(() => restCamera(size.width / Math.max(size.height, 1)), [size.width, size.height]); const planetMaterial = useMemo(() => planetShader(day, night), [day, night]); const cloudMaterial = useMemo(() => cloudShader(clouds), [clouds]); const spots = useMemo(() => brightSpots(night), [night]); const sunOnLimb = useMemo(() => limbPoint(limbFrame(), Math.PI / 2, -0.03, 1.0), []); useFrame((state, delta) => { const t = state.clock.elapsedTime; if (started.current === null) started.current = t; const elapsed = t - started.current; // Intro: the camera eases in from afar while the sun fades up. const k = reduced ? 1 : Math.min(elapsed / INTRO_SECONDS, 1); const eased = k >= 1 ? 1 : 1 - Math.pow(2, -10 * k); camera.position.lerpVectors(CAMERA_INTRO, CAMERA_REST, eased); camera.lookAt(LOOK_AT); if (flareRef.current) { flareRef.current.traverse((child) => { if (child instanceof THREE.Sprite) child.material.opacity = (child.userData.opacity as number) * eased; }); } // The spin, the clouds drifting a touch faster, and the sun's rays turning slowly against each other. Set from // a running angle each frame, so a re-render can never put the planet back where it started. if (!reduced) { spin.current += Math.min(delta, 0.1) * SPIN_SPEED; raysRef.current.forEach((ray, i) => { if (ray) ray.material.rotation += delta * (i === 0 ? 0.012 : -0.018); }); } if (spinRef.current) spinRef.current.rotation.y = SPIN_START + spin.current; if (cloudsRef.current) cloudsRef.current.rotation.y = SPIN_START + 0.4 + spin.current * 1.06; // The price lines: each slot draws a line, holds it, fades it, then starts another between two other towns. const planet = planetRef.current; if (planet) { let changed = false; const next = arcsRef.current.slice(); next.forEach((arc, i) => { const due = arc ? !reduced && elapsed - arc.born > ARC_LIFE : elapsed > 0.8 + i * (ARC_LIFE / ARC_SLOTS) && (!reduced || i === 0); if (!due) return; const others = next.filter((other, j): other is Arc => other !== null && other.length > 0 && j !== i); const fresh = pickArc(spots, planet, restView, nextId.current, others); nextId.current += 1; // An empty slot (open ocean in view) tries again a second later. next[i] = fresh ? { ...fresh, color: ARC_COLORS[i % ARC_COLORS.length], born: elapsed } : { id: -nextId.current, color: "", points: [], length: 0, from: PLANET, to: PLANET, born: elapsed - ARC_LIFE + 1 }; changed = true; }); if (changed) { arcsRef.current = next; setArcs(next); } } arcsRef.current.forEach((arc, i) => { if (!arc || arc.length === 0) return; const age = elapsed - arc.born; let drawn = 1; let fade = 1; if (!reduced) { drawn = easeInOutCubic(Math.min(age / ARC_DRAW, 1)); if (age > ARC_DRAW + ARC_HOLD) fade = Math.max(1 - (age - ARC_DRAW - ARC_HOLD) / ARC_FADE, 0); } ARC_LAYERS.forEach((layer, l) => { const line = lineRefs.current[i * ARC_LAYERS.length + l]; if (!line) return; line.material.dashOffset = arc.length * (1 - drawn); line.material.opacity = layer.opacity * fade; }); // The town it leaves glows while it climbs; the one it lands on flares up and pulses. const start = glowRefs.current[i * 2]; const end = glowRefs.current[i * 2 + 1]; if (start) start.material.opacity = 0.5 * fade * Math.min(age / 0.4, 1); if (end) end.material.opacity = drawn > 0.97 ? fade * (0.6 + 0.15 * Math.sin(age * 5)) : 0; }); }); return ( <> {/* The lines turn with the planet, so they stay on the towns they join. */} {arcs.map((arc, i) => arc && arc.length > 0 ? ( {ARC_LAYERS.map((layer, l) => ( { lineRefs.current[i * ARC_LAYERS.length + l] = el; }} points={arc.points} color={arc.color} lineWidth={layer.width} transparent opacity={0} blending={THREE.AdditiveBlending} depthWrite={false} dashed dashSize={arc.length} gapSize={arc.length} dashOffset={arc.length} /> ))} void (glowRefs.current[i * 2] = el)} /> void (glowRefs.current[i * 2 + 1] = el)} /> ) : null, )} {/* The evening side seen through the air: a blue veil over the ground toward the horizon, brightest toward the sun. */} {/* The thin bright limb and the wide soft halo beyond it. */} {/* The sun, just behind the horizon: a hot core, rays all round, turning slowly, and a warm haze near it. */} void (raysRef.current[0] = el)} /> void (raysRef.current[1] = el)} /> ); } /** * The planet's surface. Daylight is a low evening sun: a soft ramp from the terminator to the horizon, the land's * greens and browns showing through. The night side keeps a faint earthshine so coasts and land still read, and the * city lights come on as the ground passes into the night: every town at its own moment in the dusk, and broken into * many small points where the texture would otherwise show soft blobs. */ function planetShader(day: THREE.Texture, night: THREE.Texture): THREE.ShaderMaterial { return new THREE.ShaderMaterial({ uniforms: { dayMap: { value: day }, nightMap: { value: night }, sunDir: { value: SUN_DIR } }, vertexShader: /* glsl */ ` varying vec2 vUv; varying vec3 vWorldNormal; void main() { vUv = uv; vWorldNormal = normalize(mat3(modelMatrix) * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: /* glsl */ ` uniform sampler2D dayMap; uniform sampler2D nightMap; uniform vec3 sunDir; varying vec2 vUv; varying vec3 vWorldNormal; // A sin-free hash (Dave Hoskins), random at every scale used here. float hash(vec2 p) { vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } // The same, smoothed between cells, so no square ever shows however close the ground comes. float smoothNoise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y); } // Whether a cell's towns are on: each cell has its own moment in the dusk. float cellOn(vec2 cell, float nightfall) { float onset = hash(cell) * 0.75; return smoothstep(onset, onset + 0.12, nightfall); } // Cells blended into their neighbours, so towns come on one by one without square edges. float townsOn(vec2 p, float nightfall) { vec2 i = floor(p - 0.5); vec2 f = fract(p - 0.5); vec2 u = f * f * (3.0 - 2.0 * f); return mix( mix(cellOn(i, nightfall), cellOn(i + vec2(1.0, 0.0), nightfall), u.x), mix(cellOn(i + vec2(0.0, 1.0), nightfall), cellOn(i + vec2(1.0, 1.0), nightfall), u.x), u.y ); } void main() { float dayness = dot(normalize(vWorldNormal), sunDir); vec3 ground = texture2D(dayMap, vUv).rgb; vec3 lights = texture2D(nightMap, vUv).rgb; // Evening light from a sun low behind the horizon, and a faint cool earthshine on the night side. float light = smoothstep(-0.03, 0.16, dayness); vec3 evening = ground * (0.22 + 1.0 * light) * light; // Seen through the evening air: cooler, under a blue veil. evening = evening * vec3(0.7, 0.84, 1.05) + vec3(0.02, 0.05, 0.12) * light; vec3 earthshine = ground * vec3(0.16, 0.16, 0.2); vec3 color = mix(earthshine, evening, light); // Town by town: each cell of the map switches on at its own moment as the ground goes from dusk to night. float nightfall = smoothstep(0.03, -0.05, dayness); float on = townsOn(vUv * vec2(1440.0, 720.0), nightfall); // Where a texel covers several pixels, break its glow into points of different brightness. vec2 fine = vUv * vec2(8192.0, 4096.0); float spread = length(fwidth(fine)); float grain = smoothNoise(fine + 17.0); float sparkle = mix(1.0, 0.25 + 1.6 * grain * grain, clamp(1.4 - spread * 0.6, 0.0, 1.0)); float level = dot(lights, vec3(0.35, 0.45, 0.2)); vec3 glow = vec3(1.0, 0.7, 0.38) * pow(level, 1.5) * 3.8 * sparkle * on; gl_FragColor = vec4(color + glow, 1.0); #include #include } `, }); } /** The clouds: white in the evening light, nearly gone on the night side so they never dim the towns. */ function cloudShader(clouds: THREE.Texture): THREE.ShaderMaterial { return new THREE.ShaderMaterial({ uniforms: { cloudMap: { value: clouds }, sunDir: { value: SUN_DIR } }, vertexShader: /* glsl */ ` varying vec2 vUv; varying vec3 vWorldNormal; void main() { vUv = uv; vWorldNormal = normalize(mat3(modelMatrix) * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: /* glsl */ ` uniform sampler2D cloudMap; uniform vec3 sunDir; varying vec2 vUv; varying vec3 vWorldNormal; void main() { float cover = texture2D(cloudMap, vUv).a; float light = smoothstep(-0.06, 0.28, dot(normalize(vWorldNormal), sunDir)); vec3 color = mix(vec3(0.02, 0.025, 0.04), vec3(0.8, 0.8, 0.82), light); gl_FragColor = vec4(color, cover * (0.05 + 0.5 * light)); #include #include } `, transparent: true, depthWrite: false, }); } type AtmosphereProps = { radius: number; inner: string; outer: string; power: number; edge: number; opacity: number; /** `back` glows beyond the limb (a halo); `front` tints the planet's own surface toward its edge. */ side: "front" | "back"; /** How much the glow favours the side facing the sun: 0 is even all round, 1 is dark away from the sun. */ sunWeight?: number; }; /** * A glow with a fresnel falloff, added on top: brightest where the surface faces the sun and fading toward the * sides, so the horizon reads as lit from behind the center. */ function Atmosphere({ radius, inner, outer, power, edge, opacity, side, sunWeight = 0.78 }: AtmosphereProps) { const material = useMemo( () => new THREE.ShaderMaterial({ uniforms: { colorA: { value: new THREE.Color(inner) }, colorB: { value: new THREE.Color(outer) }, opacity: { value: opacity }, power: { value: power }, edge: { value: edge }, sunDir: { value: SUN_DIR }, sunWeight: { value: sunWeight }, }, vertexShader: ` varying vec3 vNormal; varying vec3 vWorldNormal; void main() { vNormal = normalize(normalMatrix * normal); vWorldNormal = normalize(mat3(modelMatrix) * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 colorA; uniform vec3 colorB; uniform float opacity; uniform float power; uniform float edge; uniform vec3 sunDir; uniform float sunWeight; varying vec3 vNormal; varying vec3 vWorldNormal; void main() { float facing = dot(vNormal, vec3(0.0, 0.0, 1.0)); float rim = pow(clamp(edge - facing, 0.0, 1.0), power); float toward = clamp(dot(vWorldNormal, sunDir) * 0.5 + 0.5, 0.0, 1.0); float lit = (1.0 - sunWeight) + sunWeight * pow(toward, 2.2); vec3 color = mix(colorA, colorB, rim * lit); gl_FragColor = vec4(color, rim * lit * opacity); } `, blending: THREE.AdditiveBlending, side: side === "front" ? THREE.FrontSide : THREE.BackSide, transparent: true, depthWrite: false, }), [inner, outer, opacity, power, edge, side, sunWeight], ); return ( ); } type FlareKind = "core" | "rays" | "rays2" | "haze"; type FlareProps = { kind: FlareKind; scale: [number, number]; opacity: number; position?: [number, number, number]; ref?: React.Ref; }; /** A soft sprite that always faces the camera, drawn over everything (no depth test) so it sits on the limb. */ function Flare({ kind, scale, opacity, position = [0, 0, 0], ref }: FlareProps) { const texture = useMemo(() => flareTexture(kind), [kind]); return ( ); } /** The glow on a town a line leaves or lands on, in the line's color over a white-hot center. */ function TownGlow({ position, color, ref }: { position: THREE.Vector3; color: string; ref?: React.Ref }) { const texture = useMemo(() => flareTexture("core"), []); const tint = useMemo(() => new THREE.Color(color).lerp(new THREE.Color("#ffffff"), 0.6), [color]); return ( ); } /* ---- Helpers ------------------------------------------------------------------------------------------------- */ const flareTextures = new Map(); /** Drawn once per kind: a white-hot core, two sets of rays reaching out all round, and the orange haze. */ function flareTexture(kind: FlareKind): THREE.Texture { const cached = flareTextures.get(kind); if (cached) return cached; const size = kind === "rays" || kind === "rays2" ? 1024 : 512; const canvas = document.createElement("canvas"); canvas.width = canvas.height = size; const ctx = canvas.getContext("2d")!; const c = size / 2; if (kind === "rays" || kind === "rays2") { drawRays(ctx, c, kind === "rays" ? 11 : 29, kind === "rays" ? 52 : 40); } else { const gradient = ctx.createRadialGradient(c, c, 0, c, c, c); if (kind === "core") { gradient.addColorStop(0, "rgba(255,255,255,1)"); gradient.addColorStop(0.18, "rgba(255,248,230,0.95)"); gradient.addColorStop(0.42, "rgba(255,205,140,0.35)"); gradient.addColorStop(1, "rgba(255,170,90,0)"); } else { gradient.addColorStop(0, "rgba(255,160,80,0.8)"); gradient.addColorStop(0.3, "rgba(255,130,60,0.3)"); gradient.addColorStop(0.6, "rgba(200,90,50,0.05)"); gradient.addColorStop(0.75, "rgba(120,50,40,0)"); gradient.addColorStop(1, "rgba(120,50,40,0)"); } ctx.fillStyle = gradient; ctx.fillRect(0, 0, size, size); } const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; flareTextures.set(kind, texture); return texture; } /** * Rays all round the center, like the sun's glare through a lens: thin wedges of different lengths and widths, * white-hot at the center and fading out, the odd one reaching much further than the rest. */ function drawRays(ctx: CanvasRenderingContext2D, c: number, seed: number, count: number) { const random = mulberry32(seed); ctx.globalCompositeOperation = "lighter"; ctx.filter = "blur(1.2px)"; for (let i = 0; i < count; i++) { const angle = (i / count) * Math.PI * 2 + (random() - 0.5) * 0.1; const long = random() > 0.82; const length = c * (long ? 0.7 + random() * 0.28 : 0.2 + random() * 0.38); const base = (long ? 3.5 : 2) + random() * 3; const dx = Math.cos(angle); const dy = Math.sin(angle); const gradient = ctx.createRadialGradient(c, c, 0, c, c, length); gradient.addColorStop(0, `rgba(255,252,245,${long ? 0.9 : 0.7})`); gradient.addColorStop(0.18, "rgba(255,242,222,0.38)"); gradient.addColorStop(0.55, "rgba(255,226,196,0.1)"); gradient.addColorStop(1, "rgba(255,214,180,0)"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(c - dy * base, c + dx * base); ctx.lineTo(c + dx * length, c + dy * length); ctx.lineTo(c + dy * base, c - dx * base); ctx.closePath(); ctx.fill(); } ctx.filter = "none"; const glow = ctx.createRadialGradient(c, c, 0, c, c, c * 0.3); glow.addColorStop(0, "rgba(255,250,240,0.55)"); glow.addColorStop(1, "rgba(255,230,200,0)"); ctx.fillStyle = glow; ctx.fillRect(0, 0, c * 2, c * 2); } type LimbFrame = { center: THREE.Vector3; toCamera: THREE.Vector3; right: THREE.Vector3; forward: THREE.Vector3; cosHalf: number; sinHalf: number }; /** * The limb (horizon) of the planet as seen from the resting camera, as a frame to place things on: `forward` points * along the view, `right` across it, both in the limb's plane. */ function limbFrame(): LimbFrame { const toCamera = CAMERA_REST.clone().sub(PLANET).normalize(); const distance = CAMERA_REST.distanceTo(PLANET); const look = LOOK_AT.clone().sub(CAMERA_REST); const forward = look.sub(toCamera.clone().multiplyScalar(look.dot(toCamera))).normalize(); const right = new THREE.Vector3().crossVectors(forward, toCamera).normalize(); const cosHalf = 1 / distance; const sinHalf = Math.sqrt(1 - cosHalf * cosHalf); return { center: PLANET.clone(), toCamera, right, forward, cosHalf, sinHalf }; } /** * A point near the limb. `theta` runs around the limb (π/2 is the horizon straight ahead, larger is to the left); * `phi` rotates it toward the camera (down onto the visible night side); `radius` scales from the planet's surface. */ function limbPoint(frame: LimbFrame, theta: number, phi: number, radius = 1): THREE.Vector3 { const ring = frame.right.clone().multiplyScalar(Math.cos(theta)).add(frame.forward.clone().multiplyScalar(Math.sin(theta))); const n = frame.toCamera.clone().multiplyScalar(frame.cosHalf).add(ring.multiplyScalar(frame.sinHalf)).normalize(); const rotated = n.multiplyScalar(Math.cos(phi)).add(frame.toCamera.clone().multiplyScalar(Math.sin(phi))).normalize(); return frame.center.clone().add(rotated.multiplyScalar(radius)); } /** The camera at rest, for deciding what is in the frame once the intro has settled. */ function restCamera(aspect: number): THREE.PerspectiveCamera { const cam = new THREE.PerspectiveCamera(FOV, aspect, 0.01, 100); cam.position.copy(CAMERA_REST); cam.lookAt(LOOK_AT); cam.updateMatrixWorld(); return cam; } type Spot = { local: THREE.Vector3; bright: number }; /** * A point on the unit sphere, in the planet mesh's own space, from latitude and longitude, using the same mapping * as three.js's SphereGeometry gives the equirectangular textures (longitude −180° at the texture's left edge). */ function surfacePoint(lat: number, lon: number): THREE.Vector3 { const phi = ((lon + 180) * Math.PI) / 180; const theta = ((90 - lat) * Math.PI) / 180; return new THREE.Vector3(-Math.cos(phi) * Math.sin(theta), Math.cos(theta), Math.sin(phi) * Math.sin(theta)); } /** * The lit places of the night texture: the image is read at a modest size, every cell keeps its brightest texel if * it is bright enough, and each becomes a point on the planet. These are where the price lines start and end. */ function brightSpots(night: THREE.Texture): Spot[] { const image = night.image as CanvasImageSource & { width?: number; height?: number }; const w = 1024; const h = 512; const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; const ctx = canvas.getContext("2d", { willReadFrequently: true }); if (!ctx || !image) return []; try { ctx.drawImage(image, 0, 0, w, h); } catch { return []; } const data = ctx.getImageData(0, 0, w, h).data; const cell = 6; const spots: Spot[] = []; for (let cy = 0; cy < h; cy += cell) { for (let cx = 0; cx < w; cx += cell) { let best = 0; let bx = cx; let by = cy; for (let y = cy; y < Math.min(cy + cell, h); y++) { for (let x = cx; x < Math.min(cx + cell, w); x++) { const i = (y * w + x) * 4; const lum = data[i] * 0.4 + data[i + 1] * 0.45 + data[i + 2] * 0.15; if (lum > best) { best = lum; bx = x; by = y; } } } if (best > 70) { const lat = 90 - ((by + 0.5) / h) * 180; const lon = ((bx + 0.5) / w) * 360 - 180; spots.push({ local: surfacePoint(lat, lon), bright: best / 255 }); } } } return spots; } /** * Two lit towns for a new line: both on the night side, in the frame, well inside the planet's disc and high enough * in the frame to stay in it while the planet turns; a few degrees to a sixth of the planet apart, and clear of the * lines already showing. Bright towns first, smaller ones when the frame is over sparse land; null over open ocean. */ function pickArc(spots: Spot[], planet: THREE.Object3D, camera: THREE.PerspectiveCamera, id: number, others: Arc[]): Omit | null { const random = mulberry32(1000 + id * 7919); const world = new THREE.Vector3(); const normal = new THREE.Vector3(); const toCamera = new THREE.Vector3(); const ndc = new THREE.Vector3(); const usable = (local: THREE.Vector3) => { planet.localToWorld(world.copy(local)); normal.copy(world).sub(PLANET).normalize(); toCamera.copy(camera.position).sub(world).normalize(); ndc.copy(world).project(camera); // normal.y is how far down the frame the point is: 0.976 is about 13° from under the camera, 0.927 about 22°. return ndc.z < 1 && Math.abs(ndc.x) < 0.78 && normal.y > 0.927 && normal.y < 0.976 && normal.dot(toCamera) > 0.2 && normal.dot(SUN_DIR) < -0.03; }; const onScreen = (local: THREE.Vector3) => planet.localToWorld(world.copy(local)).project(camera).clone(); const taken = others.flatMap((arc) => [arc.from, arc.to]); const middles = others.map((arc) => arc.from.clone().add(arc.to).normalize()); const clear = (p: THREE.Vector3) => taken.every((q) => q.angleTo(p) > 0.06); const visible = spots.filter((spot) => usable(spot.local) && clear(spot.local)); const bright = visible.filter((spot) => spot.bright > 0.45); const pool = bright.length >= 4 ? bright : visible; if (pool.length < 2) return null; for (let attempt = 0; attempt < 160; attempt++) { const a = pool[Math.floor(random() * pool.length)].local; const b = pool[Math.floor(random() * pool.length)].local; if (a === b) continue; const angle = a.angleTo(b); if (angle < 0.07 || angle > 0.26) continue; // Clear of the line already showing, so the two never tangle. const middle = a.clone().add(b).normalize(); if (middles.some((m) => m.angleTo(middle) < 0.1)) continue; // Across the frame rather than straight at the camera, so it reads as a chart and not a needle. const pa = onScreen(a); const pb = onScreen(b); const across = Math.abs(pa.x - pb.x) * camera.aspect; const down = Math.abs(pa.y - pb.y); if (across < 0.8 * down || Math.hypot(across, down) < 0.3) continue; // From the farther town to the nearer one: the climb runs gently into the distance and the landing is the steep // drop, the way a chart falls back onto its last price. const [from, to] = pa.y >= pb.y ? [a, b] : [b, a]; const points = priceArc(from, to, id); return { id, points, length: polylineLength(points), from: from.clone(), to: to.clone() }; } return null; } /** * A price chart standing up from the planet between towns `a` and `b` (unit vectors in the planet's space): it * leaves the first town, climbs in a rising trend with a jagged wobble and the odd sharp move, and drops back onto * the second town. The ground track is the great circle between them; the height is the chart. */ function priceArc(a: THREE.Vector3, b: THREE.Vector3, seed: number): THREE.Vector3[] { const random = mulberry32(seed * 31 + 7); const steps = 120; const angle = a.angleTo(b); const axis = new THREE.Vector3().crossVectors(a, b).normalize(); const height = THREE.MathUtils.clamp(angle * 0.38, 0.022, 0.06); const q = new THREE.Quaternion(); const points: THREE.Vector3[] = []; let wobble = 0; for (let i = 0; i <= steps; i++) { const t = i / steps; wobble = wobble * 0.82 + (random() - 0.5) * 0.16 + (random() > 0.93 ? (random() - 0.5) * 0.35 : 0); const trend = Math.pow(Math.min(t / 0.86, 1), 1.1); const land = t < 0.86 ? 1 : 1 - Math.pow((t - 0.86) / 0.14, 1.2); const level = THREE.MathUtils.clamp(trend * (1 + wobble), 0, 1.25) * land; const ground = a.clone().applyQuaternion(q.setFromAxisAngle(axis, angle * t)).normalize(); points.push(ground.multiplyScalar(1.0015 + height * level)); } return points; } function polylineLength(points: THREE.Vector3[]): number { let length = 0; for (let i = 1; i < points.length; i++) length += points[i].distanceTo(points[i - 1]); return length; } function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function easeInOutCubic(x: number): number { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } useTexture.preload(TEXTURES); 91:T5a5,"use client"; import { useEffect, useState } from "react"; import dynamic from "next/dynamic"; /* * The Earth is the heaviest thing on the page (three.js, four textures, shader compiles). It loads in a chunk of * its own and mounts once the browser has had an idle moment after the first paint, so the headline, the header * and the rest of the page are interactive first. Until then the stage is simply black, which is its background * anyway. */ const EarthScene = dynamic(() => import("./EarthScene").then((m) => m.EarthScene), { ssr: false, loading: () => null }); type Props = { active?: boolean; className?: string }; export function EarthSceneLazy(props: Props) { const [ready, setReady] = useState(false); useEffect(() => { let cancelled = false; const start = () => { if (!cancelled) setReady(true); }; const w = window as Window & { requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => number; cancelIdleCallback?: (id: number) => void }; if (w.requestIdleCallback) { const id = w.requestIdleCallback(start, { timeout: 1500 }); return () => { cancelled = true; w.cancelIdleCallback?.(id); }; } const id = window.setTimeout(start, 300); return () => { cancelled = true; window.clearTimeout(id); }; }, []); if (!ready) return

; return ; } 92:T664,import Image from "next/image"; import Link from "next/link"; import { ChevronRight } from "lucide-react"; import { Icon, type IconName } from "@/components/marketly/ui/Icon"; import { cn } from "@/lib/utils"; type Props = { title: string; sub: string; href: string; /** A round portrait … */ avatar?: string; /** … or an icon in a dark disc. */ icon?: IconName; className?: string; }; /** The dark floating pill of the hero: a 44px portrait or a 40px icon disc, a 20px title with a chevron, a line under. */ export function FloatingPill({ title, sub, href, avatar, icon, className }: Props) { return ( {avatar ? (

) : ( )} {title} {sub} ); } 93:T17df,"use client"; import { useRef } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { hero } from "@/lib/marketly/data/copy"; import { useElementSize, useInView, useMediaQuery, usePrefersReducedMotion } from "@/lib/marketly/hooks"; import { DarkTop } from "@/components/marketly/layout/DarkTop"; import { EarthSceneLazy as EarthScene } from "./EarthSceneLazy"; import { FloatingPill } from "./FloatingPill"; import { HeroCopy } from "./HeroCopy"; import { GlassFrame, ShowcaseTitle } from "./ShowcaseScene"; /* * The stage is the whole viewport (the header floats over it), so these are viewport positions: where things come * to rest, in px from the top. */ const TITLE_START = -168; const TITLE_END = 120; const FRAME_END_DESKTOP = 296; const FRAME_END_MOBILE = 236; const FRAME_START_GAP = 32; // the frame starts just below the fold /** * The pinned "scrollytelling" hero: a black track (1,880px on desktop) with a sticky, viewport-tall stage. Scene 1 * (headline, CTA, the story pill) parallaxes away; scene 2 (the showcase title and the glass video frame) comes * in from above and below and pins while the Earth softens into a warm, blurred glow behind it; the stage then * scrolls off with the page. With reduced motion both scenes are laid out statically. */ export function HeroScroller() { const trackRef = useRef(null); const stageRef = useRef(null); const reduced = usePrefersReducedMotion(); const isDesktop = useMediaQuery("(min-width: 1024px)"); const inView = useInView(trackRef, 0, "200px"); const { height: stageHeight } = useElementSize(stageRef); const stageH = stageHeight || 900; const { scrollY } = useScroll(); const copyY = useTransform(scrollY, (v) => -v * 0.82); const copyOpacity = useTransform(scrollY, [140, 300], [1, 0]); const pillOpacity = useTransform(scrollY, [60, 240], [1, 0]); const titleY = useTransform(scrollY, [250, 650], [0, TITLE_END - TITLE_START]); const titleOpacity = useTransform(scrollY, [250, 600], [0.35, 1]); const frameEnd = isDesktop ? FRAME_END_DESKTOP : FRAME_END_MOBILE; const frameY = useTransform(scrollY, [0, 900], [0, -(stageH + FRAME_START_GAP - frameEnd)]); // Scene 2: the Earth blurs into a bokeh and warms up, like footage shot through a long lens. const earthFilter = useTransform(scrollY, [250, 750], ["blur(0px) saturate(1) brightness(1)", "blur(16px) saturate(1.35) brightness(1.15)"]); const glowOpacity = useTransform(scrollY, [250, 700], [0, 1]); // At rest the planet runs to the bottom edge, so the glass pill has its lights to blur; the fade into black comes // in as the page starts to move. const bottomFade = useTransform(scrollY, [0, 240], [0, 1]); if (reduced) return ; return (

{/* The footage's warm bokeh for scene 2, over the blurred Earth. */} {/* The stage fades into black at the top (under the header) and at the bottom (into the sheet). */}

{/* Scene 1 */} {/* Scene 2 */}

); } /** The two scenes stacked, no parallax, no rotation (prefers-reduced-motion). */ function StaticHero() { return (

); } 94:T52f,"use client"; import { useEffect, useRef } from "react"; import Image from "next/image"; import { hero } from "@/lib/marketly/data/copy"; /** * The platform demo inside the glass frame: a looping muted clip that plays only while at least half of it is on * screen. Without clips (data/copy.ts, `hero.platformDemo`) the poster shows on its own. */ export function PlatformVideo({ className }: { className?: string }) { const { poster, mp4, webm } = hero.platformDemo; const ref = useRef(null); useEffect(() => { const video = ref.current; if (!video) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.intersectionRatio >= 0.5) void video.play().catch(() => {}); else video.pause(); }, { threshold: [0, 0.5, 1] }, ); observer.observe(video); return () => observer.disconnect(); }, []); if (!mp4 && !webm) { return The Marketly charting platform

; } return (

); } 95:T4c4,import { hero } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; import { FloatingPill } from "./FloatingPill"; import { PlatformVideo } from "./PlatformVideo"; /** Scene 2's headline, two lines in the display font. */ export function ShowcaseTitle({ className }: { className?: string }) { return (

{hero.showcaseTitle.map((line) => ( {line} ))}

); } /** Scene 2's glass frame with the platform demo inside and the "Explore all features" pill over its lower edge. */ export function GlassFrame({ className }: { className?: string }) { return (

); } 96:T876,"use client"; import { useMemo } from "react"; import * as THREE from "three"; /** * A plain star field: points scattered on a shell around the camera, drawn as soft white dots of a fixed pixel * size, slightly brighter near the horizon's glow. Deterministic, so every visitor sees the same sky. */ export function Starfield({ count = 2500, radius = 60, depth = 20, size = 2.2, opacity = 0.85 }: { count?: number; radius?: number; depth?: number; size?: number; opacity?: number }) { const { positions, texture } = useMemo(() => { const random = mulberry32(2026); const positions = new Float32Array(count * 3); for (let i = 0; i < count; i++) { const r = radius + random() * depth; const theta = Math.acos(1 - random() * 2); const phi = random() * Math.PI * 2; positions[i * 3] = r * Math.sin(theta) * Math.cos(phi); positions[i * 3 + 1] = r * Math.cos(theta); positions[i * 3 + 2] = r * Math.sin(theta) * Math.sin(phi); } const canvas = document.createElement("canvas"); canvas.width = canvas.height = 32; const ctx = canvas.getContext("2d")!; const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16); gradient.addColorStop(0, "rgba(255,255,255,1)"); gradient.addColorStop(0.4, "rgba(255,255,255,0.6)"); gradient.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 32, 32); const texture = new THREE.CanvasTexture(canvas); return { positions, texture }; }, [count, radius, depth]); return ( ); } function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } 97:T1287,import Link from "next/link"; import { ChevronDown, Globe, ShieldCheck } from "lucide-react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/marketly/ui/accordion"; import { BrandIcon, brandTitles } from "@/components/marketly/ui/BrandIcon"; import { footer as copy } from "@/lib/marketly/data/copy"; import { footerColumns, socials, type FooterGroup } from "@/lib/marketly/data/nav"; import { cn } from "@/lib/utils"; import { FooterTagline } from "./FooterTagline"; import { Logo } from "./Logo"; import { RocketIllustration } from "./RocketIllustration"; /** The site footer: brand column, four link columns (accordions on phones), the launch illustration and the tagline. */ export function Footer() { const allGroups = footerColumns.flat(); return ( ); } function LinkGroup({ group, first }: { group: FooterGroup; first: boolean }) { return (

{group.label}

); } function Links({ group }: { group: FooterGroup }) { return (

{link.label}

); } 98:T11b9,"use client"; import { useCallback, useEffect, useState, useSyncExternalStore } from "react"; import { usePathname } from "next/navigation"; import { Menu } from "lucide-react"; import { SlashButton } from "@/components/marketly/ui/SlashButton"; import { header as copy } from "@/lib/marketly/data/copy"; import { nav } from "@/lib/marketly/data/nav"; import { HeaderBackdrop } from "./HeaderBackdrop"; import { LangMenu } from "./LangMenu"; import { Logo } from "./Logo"; import { MegaMenu } from "./MegaMenu"; import { MobileDrawer } from "./MobileDrawer"; import { SearchDialog, type SearchData } from "./SearchDialog"; import { SearchTrigger } from "./SearchTrigger"; import { UserMenu } from "./UserMenu"; const HEADER_HEIGHT = 64; /** Over dark surfaces the header is transparent with white text; once the white sheet reaches it, it turns white. */ type Mode = "dark" | "light"; function subscribe(listener: () => void) { // Scroll and resize already arrive once per frame; reading the sheet's position right away keeps the switch // on the same frame as the scroll instead of one behind it. window.addEventListener("scroll", listener, { passive: true }); window.addEventListener("resize", listener); return () => { window.removeEventListener("scroll", listener); window.removeEventListener("resize", listener); }; } function readMode(): Mode { const sheet = document.querySelector("[data-sheet]"); if (!sheet) return "dark"; return sheet.getBoundingClientRect().top <= HEADER_HEIGHT ? "light" : "dark"; } /** * The 64px sticky header: transparent with white text over the hero and the dark bands, readable thanks to the * gradient backdrop behind it; white with dark text once the page's sheet has scrolled under it. From the lg * breakpoint: logo, search pill, mega menus, language, account and the CTA; below it: hamburger, mark, search * icon and the CTA. */ export function Header({ searchData }: { searchData: SearchData }) { const [searchOpen, setSearchOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const pathname = usePathname(); const getSnapshot = useCallback(() => readMode(), []); const mode = useSyncExternalStore(subscribe, getSnapshot, () => "dark" as Mode); // A route change moves the sheet without a scroll event: re-read on the next frame. const [, bump] = useState(0); useEffect(() => { const id = requestAnimationFrame(() => bump((n) => n + 1)); return () => cancelAnimationFrame(id); }, [pathname]); useEffect(() => { const onKey = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setSearchOpen((o) => !o); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return ( // The negative bottom margin pulls the page up under the header, so the header floats over the hero and the // dark bands instead of sitting on a strip of page background.

setSearchOpen(true)} className="ms-auto lg:ms-6 xl:ms-[120px]" />

{copy.cta}

); } 99:T857,"use client"; import { useState } from "react"; import { Globe } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/marketly/ui/popover"; import { header } from "@/lib/marketly/data/copy"; import { languages } from "@/lib/marketly/data/nav"; import { cn } from "@/lib/utils"; /** The `EN` globe button and its list of languages (a template: picking one only records the choice). */ export function LangMenu({ className }: { className?: string }) { const [current, setCurrent] = useState(languages[0]); const [open, setOpen] = useState(false); return ( {header.language} ); } 9a:T664,import Link from "next/link"; import { brand } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; /** The placeholder mark: two bold bars and a small disc, 36×28, in the current color. Replace it with your own. */ export function LogoMark({ className, height = 28 }: { className?: string; height?: number }) { return ( ); } type Props = { className?: string; href?: string; /** Hide the wordmark (the collapsed header). */ markOnly?: boolean; /** Hide the wordmark below the `xl` breakpoint. */ wordmarkFromXl?: boolean; height?: number; }; /** Mark + wordmark as a link home. The wordmark is the brand name in the display font. */ export function Logo({ className, href = "/", markOnly = false, wordmarkFromXl = false, height = 28 }: Props) { return ( {!markOnly && ( {brand.name} )} ); } 9b:T56c,import { Plus_Jakarta_Sans } from "next/font/google"; import { Footer } from "./Footer"; import { Header } from "./Header"; import type { SearchData } from "./SearchDialog"; import { ThemeProvider } from "./ThemeProvider"; /** Marketly's display face (headlines, prices): the pages load it themselves, so they bring it into any layout. */ const display = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["500", "600", "700", "800"], variable: "--font-plus-jakarta", display: "swap", }); /** * What the template's app/layout.tsx gives every Marketly page: the light and dark themes, the sticky header (its search * fed with `searchData`, from getSearchData() in lib/marketly/api.ts), the footer, and Marketly's type and colours * (the Styles). Every page in app/ renders inside it, so the pages look the same whatever your own layout does. */ export function MarketlyShell({ searchData, children, className = "" }: { searchData: SearchData; children: React.ReactNode; className?: string }) { return (

{children}

); } 9c:T2c72,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import Link from "next/link"; import { ChevronRight, Star } from "lucide-react"; import type { FeaturedBroker, MenuRow, MenuSection, NavItem } from "@/lib/marketly/data/nav"; import { Icon } from "@/components/marketly/ui/Icon"; import { cn } from "@/lib/utils"; import { useMounted } from "@/lib/marketly/hooks"; const OPEN_DELAY = 120; const CLOSE_GRACE = 200; const MENU_TOP = 60; /** Moves focus among `[role=menuitem]` descendants of `container` with the arrow keys; returns true if it handled the key. */ function roveFocus(container: HTMLElement | null, key: string): boolean { if (!container) return false; const items = Array.from(container.querySelectorAll('[role="menuitem"]')).filter((el) => el.closest('[data-flyout="true"]') === null || el.closest('[data-flyout="true"]') === container); if (!items.length) return false; const i = items.indexOf(document.activeElement as HTMLElement); let next = -1; if (key === "ArrowDown") next = i < 0 ? 0 : (i + 1) % items.length; else if (key === "ArrowUp") next = i < 0 ? items.length - 1 : (i - 1 + items.length) % items.length; else if (key === "Home") next = 0; else if (key === "End") next = items.length - 1; if (next < 0) return false; items[next].focus(); return true; } /** One top-level item: the pill in the header, and its dropdown, portaled to . */ export function MegaMenu({ item }: { item: NavItem }) { const id = useId(); const triggerRef = useRef(null); const menuRef = useRef(null); const openTimer = useRef(undefined); const closeTimer = useRef(undefined); const [open, setOpen] = useState(false); const [left, setLeft] = useState(0); const mounted = useMounted(); const place = useCallback(() => { const rect = triggerRef.current?.getBoundingClientRect(); if (rect) setLeft(Math.round(rect.left)); }, []); const cancel = useCallback(() => { window.clearTimeout(openTimer.current); window.clearTimeout(closeTimer.current); }, []); const openNow = useCallback(() => { cancel(); place(); setOpen(true); }, [cancel, place]); const closeNow = useCallback(() => { cancel(); setOpen(false); }, [cancel]); const show = useCallback(() => { cancel(); openTimer.current = window.setTimeout(openNow, OPEN_DELAY); }, [cancel, openNow]); const hide = useCallback(() => { cancel(); closeTimer.current = window.setTimeout(() => setOpen(false), CLOSE_GRACE); }, [cancel]); useEffect(() => cancel, [cancel]); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { closeNow(); triggerRef.current?.focus(); } }; const onPointerDown = (e: PointerEvent) => { const target = e.target as Node; if (!menuRef.current?.contains(target) && !triggerRef.current?.contains(target)) closeNow(); }; window.addEventListener("keydown", onKey); document.addEventListener("pointerdown", onPointerDown); window.addEventListener("resize", place); return () => { window.removeEventListener("keydown", onKey); document.removeEventListener("pointerdown", onPointerDown); window.removeEventListener("resize", place); }; }, [open, closeNow, place]); function onTriggerKeyDown(e: React.KeyboardEvent) { if (e.key === "ArrowDown" || e.key === " " || (e.key === "Enter" && !open)) { e.preventDefault(); openNow(); requestAnimationFrame(() => roveFocus(menuRef.current, "ArrowDown")); } } function onMenuKeyDown(e: React.KeyboardEvent) { if (e.key === "Tab") { closeNow(); return; } const scope = (e.target as HTMLElement).closest('[data-flyout="true"]') ?? menuRef.current; if (roveFocus(scope, e.key)) e.preventDefault(); } function onBlur(e: React.FocusEvent) { const next = e.relatedTarget as Node | null; if (next && (menuRef.current?.contains(next) || triggerRef.current?.contains(next))) return; if (!next) return; closeNow(); } const sections = item.sections; const [first, ...rest] = sections; return (

{item.label} {item.srSuffix && {item.srSuffix}} {mounted && open && createPortal( , document.body, )}

); } function Section({ section }: { section: MenuSection }) { return (

{section.label && {section.label}} {section.rows.map((row) => ( ))}

); } export function SectionLabel({ children }: { children: React.ReactNode }) { return

{children}

; } /** A row; with `children` it opens a second-level flyout to the end side on hover, focus or →. */ function Row({ row }: { row: MenuRow }) { const [flyout, setFlyout] = useState(false); const timer = useRef(undefined); const ref = useRef(null); const hasChildren = Boolean(row.children?.length); const show = () => { window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setFlyout(true), 100); }; const hide = () => { window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setFlyout(false), 150); }; useEffect(() => () => window.clearTimeout(timer.current), []); function onKeyDown(e: React.KeyboardEvent) { if (!hasChildren) return; if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); setFlyout(true); requestAnimationFrame(() => ref.current?.querySelector('[data-flyout="true"] [role="menuitem"]')?.focus()); } } function onFlyoutKeyDown(e: React.KeyboardEvent) { if (e.key === "ArrowLeft" || e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setFlyout(false); ref.current?.querySelector('[role="menuitem"]')?.focus(); } } return (

setFlyout(true) : undefined} onKeyDown={onKeyDown} className={cn("menu-row", row.sub ? "min-h-[56px] py-1.5" : "min-h-[44px]")} > {row.icon && } {row.label} {row.sub && {row.sub}} {hasChildren && } {hasChildren && flyout && ( )}

); } /** Five stars, filled to the rating (a half star for .5), in the current color. */ export function Stars({ rating, size = 14, className }: { rating: number; size?: number; className?: string }) { return ( {[0, 1, 2, 3, 4].map((i) => { const fill = Math.max(0, Math.min(1, rating - i)); return ( ); })} ); } function FeaturedBrokers({ label, brokers }: { label: string; brokers: FeaturedBroker[] }) { return (

{label}

{brokers.map((b) => ( {b.logo.text} {b.name} {b.rating.toFixed(1)} ))}

); } 9d:T1adf,"use client"; import { useState } from "react"; import Link from "next/link"; import { ChevronLeft, ChevronRight, User } from "lucide-react"; import { Sheet, SheetContent, SheetTitle } from "@/components/marketly/ui/sheet"; import { Switch } from "@/components/marketly/ui/switch"; import { Icon, type IconName } from "@/components/marketly/ui/Icon"; import { header } from "@/lib/marketly/data/copy"; import { languages, nav, type NavItem } from "@/lib/marketly/data/nav"; import { cn } from "@/lib/utils"; import { useTheme } from "./ThemeProvider"; const itemIcons: IconName[] = ["shield", "users", "globe", "star", "more"]; const row = "flex h-12 w-full items-center gap-3 px-5 text-body text-fg-primary no-underline transition-colors hover:bg-row-hover"; type Panel = { kind: "root" } | { kind: "item"; item: NavItem } | { kind: "lang" }; /** The full-screen menu below the lg breakpoint: top-level rows push sub-panels that slide in from the end side. */ export function MobileDrawer({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) { const [panel, setPanel] = useState({ kind: "root" }); const [lang, setLang] = useState(languages[0]); const { theme, setTheme } = useTheme(); function close() { onOpenChange(false); setPanel({ kind: "root" }); } return ( { onOpenChange(next); if (!next) setPanel({ kind: "root" }); }} > {header.menu}

{panel.kind === "root" && (

{header.darkTheme} setTheme(checked ? "dark" : "light")} aria-label={header.darkTheme} /> {header.signIn}

)} {panel.kind === "item" && (

setPanel({ kind: "root" })} label={panel.item.label} /> {panel.item.sections.map((section, i) => (

{section.label &&

{section.label}

}

{r.icon &&
} {r.label} {r.sub && {r.sub}} {r.children && (
- {c.label}
)}

))} {panel.item.featuredBrokers && (

{panel.item.featuredBrokers.label}

{b.logo.text} {b.name} {b.rating.toFixed(1)}

)}

)} {panel.kind === "lang" && (

setPanel({ kind: "root" })} label={header.languageLabel} />

)} ); } function BackRow({ onClick, label }: { onClick: () => void; label: string }) { return ( ); } function Divider() { return

; } 9e:T11d8,/** * The footer's launch: a near-vertical, white-hot trail rising from a soft cloud of exhaust at the bottom to a tiny * rocket near the top, drawn in SVG so it scales and weighs nothing. Laid out for a 980×715 box, the size of the * photograph it can stand in for; swap in a photo by replacing this component. */ export function RocketIllustration({ className }: { className?: string }) { return ( ); } 9f:Tf98,"use client"; import { useMemo, useState } from "react"; import Link from "next/link"; import { Search } from "lucide-react"; import { Dialog, DialogContent, DialogTitle } from "@/components/marketly/ui/dialog"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { Empty } from "@/components/marketly/ui/Empty"; import { header } from "@/lib/marketly/data/copy"; import type { Symbol } from "@/lib/marketly/data/types"; export type SearchData = { tabs: string[]; recent: Symbol[]; trending: Symbol[] }; type Props = { open: boolean; onOpenChange: (open: boolean) => void; data: SearchData }; /** The symbol search: ⌘/Ctrl+K opens it; a dark input, asset-class tabs, recent and trending symbols. */ export function SearchDialog({ open, onOpenChange, data }: Props) { const [query, setQuery] = useState(""); const [tab, setTab] = useState(data.tabs[0]); const q = query.trim().toLowerCase(); const filter = (list: Symbol[]) => (q ? list.filter((s) => s.ticker.toLowerCase().includes(q) || s.name.toLowerCase().includes(q)) : list); const recent = useMemo(() => filter(data.recent), [q, data.recent]); // eslint-disable-line react-hooks/exhaustive-deps const trending = useMemo(() => filter(data.trending), [q, data.trending]); // eslint-disable-line react-hooks/exhaustive-deps return ( ); } function SymbolList({ title, items, onPick }: { title: string; items: Symbol[]; onPick: () => void }) { if (!items.length) return null; return (

{title}

{s.ticker} {s.name} {s.exchange}

); } a0:T4f5,"use client"; import { Search } from "lucide-react"; import { header } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; /** The search pill (desktop) or a round icon button (phones); both open the search dialog. Colors follow the header's mode. */ export function SearchTrigger({ onOpen, className }: { onOpen: () => void; className?: string }) { return ( <> ); } a1:T812,"use client"; import { createContext, useCallback, useContext, useSyncExternalStore } from "react"; export type Theme = "light" | "dark"; /** Where the choice is kept: next-themes' key, so a site that uses next-themes keeps one choice. */ const STORAGE_KEY = "theme"; /** * For a site where nothing else sets the theme before the page paints: inline it in (app/layout.tsx) and a * visitor who chose dark never sees a white flash. Sites with next-themes don't need it. */ export const themeScript = `(function(){try{if(localStorage.getItem("${STORAGE_KEY}")==="dark"){var h=document.documentElement;h.classList.add("dark");h.style.colorScheme="dark"}}catch(e){}})();`; /* * The truth is the `dark` class on , as on every shadcn/ui site: whoever sets it (next-themes, your own toggle, * the switch in Marketly's menus), Marketly follows. */ function subscribe(listener: () => void) { const observer = new MutationObserver(listener); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); return () => observer.disconnect(); } function getTheme(): Theme { return document.documentElement.classList.contains("dark") ? "dark" : "light"; } function getServerTheme(): Theme { return "light"; } function applyTheme(next: Theme) { const html = document.documentElement; html.classList.toggle("dark", next === "dark"); html.style.colorScheme = next; try { localStorage.setItem(STORAGE_KEY, next); } catch { /* private mode: the choice lasts for the page only */ } } const ThemeContext = createContext<{ theme: Theme; setTheme: (theme: Theme) => void }>({ theme: "light", setTheme: () => {} }); export function ThemeProvider({ children }: { children: React.ReactNode }) { const theme = useSyncExternalStore(subscribe, getTheme, getServerTheme); const setTheme = useCallback((next: Theme) => applyTheme(next), []); return {children}; } export function useTheme() { return useContext(ThemeContext); } a2:T80e,"use client"; import Link from "next/link"; import { User } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/marketly/ui/popover"; import { Switch } from "@/components/marketly/ui/switch"; import { header } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; import { useTheme } from "./ThemeProvider"; const rowClass = "flex h-10 w-full items-center gap-2.5 rounded-chip px-3 text-meta text-fg-primary no-underline transition-colors duration-150 hover:bg-chip"; /** The round user button: sign in, help, what's new and the dark-theme switch. */ export function UserMenu({ className }: { className?: string }) { const { theme, setTheme } = useTheme(); return ( {header.signIn} {header.helpCenter} {header.whatsNew} {header.darkTheme} setTheme(checked ? "dark" : "light")} aria-label={header.darkTheme} /> ); } function Divider() { return

; } a3:Te7f,"use client"; import { useState } from "react"; import { ArrowUpRight } from "lucide-react"; import { Stars } from "@/components/marketly/layout/MegaMenu"; import { BrokerCard } from "@/components/marketly/sections/BrokerCard"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { pages, sections } from "@/lib/marketly/data/copy"; import type { Broker } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; /** Category chips, the broker card grid and the comparison table. */ export function BrokersContent({ brokers }: { brokers: Broker[] }) { const copy = pages.brokers; const [filter, setFilter] = useState(copy.filters[0]); const list = brokers.filter((b) => filter === copy.filters[0] || b.category === filter || b.markets?.includes(filter)); return (

{copy.filters.map((f) => ( ))}

{list.map((broker) => ( ))}

{copy.compare}

{copy.columns.map((c, i) => ( ))} {list.map((b) => ( ))}

{c}
{b.name} {b.badge && {b.badge}}	{b.rating.toFixed(1)}	{b.markets?.join(", ")}	{b.minDeposit}	{sections.brokers.open}

); } a4:Tbfe,"use client"; import { useState } from "react"; import { IdeaCard } from "@/components/marketly/sections/IdeaCard"; import { Empty } from "@/components/marketly/ui/Empty"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { pages, sections } from "@/lib/marketly/data/copy"; import type { Idea } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; const PAGE = 6; /** Tabs, asset-class chips and a three-column grid of idea cards that grows six at a time. */ export function IdeasGrid({ ideas }: { ideas: Idea[] }) { const copy = pages.ideas; const [tab, setTab] = useState(copy.tabs[0]); const [filter, setFilter] = useState(copy.filters[0]); const [shown, setShown] = useState(PAGE); const list = ideas .filter((i) => (tab === copy.tabs[0] ? i.editorsPick || i.kind !== "idea" : true)) .filter((i) => filter === copy.filters[0] || matchesFilter(i, filter)) .sort((a, b) => (tab === copy.tabs[1] ? b.boosts - a.boosts : tab === copy.tabs[2] ? b.publishedAt.localeCompare(a.publishedAt) : 0)); return (

{ setTab(v); setShown(PAGE); }} className="mt-8" label="Views" />

{copy.filters.map((f) => ( ))}

{list.length === 0 ? ( ) : (

{list.slice(0, shown).map((idea) => ( ))}

)} {shown < list.length && (

)}

); } function matchesFilter(idea: Idea, filter: string): boolean { const text = `${idea.title} ${idea.excerpt}`.toLowerCase(); const words: Record = { Stocks: ["stock", "nasdaq", "ipo", "aapl", "nvda", "tsla", "micron", "riot"], Crypto: ["bitcoin", "btc", "eth", "crypto", "usdt"], Forex: ["usd/", "eur", "jpy", "gbp", "aud", "cable", "yen"], Futures: ["gold", "crude", "oil", "futures", "wti", "es:"], Indices: ["s&p", "index", "nasdaq 100", "e-mini"], }; return (words[filter] ?? []).some((w) => text.includes(w)); } a5:T7d8,"use client"; import { useEffect, useState } from "react"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { pages } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; /** The region tabs under the page title (a template: they only record the choice). */ export function RegionTabs() { const [region, setRegion] = useState(pages.markets.regions[0]); return ; } /** The sticky anchor list beside the market blocks (from the xl breakpoint): the block in view is blue. */ export function MarketsAnchors({ items }: { items: { id: string; label: string }[] }) { const [active, setActive] = useState(items[0]?.id); useEffect(() => { const sections = items.map((i) => document.getElementById(i.id)?.closest("section")).filter((s): s is HTMLElement => Boolean(s)); const observer = new IntersectionObserver( (entries) => { const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]; if (visible) { const heading = visible.target.querySelector("[id]"); if (heading) setActive(heading.id); } }, { rootMargin: "-20% 0px -60% 0px" }, ); sections.forEach((s) => observer.observe(s)); return () => observer.disconnect(); }, [items]); return ( ); } a6:T875,"use client"; import { useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { NewsList, NewsRow } from "@/components/marketly/sections/NewsList"; import { Card } from "@/components/marketly/ui/Card"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { pages } from "@/lib/marketly/data/copy"; import type { NewsItem } from "@/lib/marketly/data/types"; type Props = { byCategory: Record; top: NewsItem[] }; /** Category tabs, the featured story, a two-column list and the "Top stories" rail. */ export function NewsContent({ byCategory, top }: Props) { const copy = pages.news; const [tab, setTab] = useState(copy.tabs[0]); const items = byCategory[tab] ?? byCategory[copy.tabs[0]] ?? []; const [featured, ...rest] = items; return (

{featured && (

)}

); } a7:T13d5,"use client"; import { useState } from "react"; import Link from "next/link"; import { Check } from "lucide-react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/marketly/ui/accordion"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { SlashButton } from "@/components/marketly/ui/SlashButton"; import { pages } from "@/lib/marketly/data/copy"; import type { Plan } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; type Props = { plans: Plan[]; comparison: { feature: string; values: string[] }[]; faq: { q: string; a: string }[] }; /** Billing toggle, four plan cards, the comparison table and the FAQ. */ export function PricingContent({ plans, comparison, faq }: Props) { const copy = pages.pricing; const [billing, setBilling] = useState(copy.billing[0]); const yearly = billing !== copy.billing[0]; return (

{plans.map((plan) => { const price = yearly ? plan.yearly : plan.monthly; return (

{plan.highlighted && ( {copy.mostPopular} )}

{plan.name}

{plan.tagline}

${price.toFixed(2)} {copy.perMonth}

{yearly ? copy.billedYearly : " "}

{plan.highlighted ? ( {copy.choose} ) : ( {copy.choose} )}

); })}

{copy.compare}

{plans.map((p) => ( ))} {comparison.map((row) => ( {row.values.map((v, i) => ( ))} ))}

Feature	{p.name}
{row.feature}	{v === "✓" ? : v}

{copy.faq}

{faq.map((item) => ( {item.q} {item.a} ))}

); } a8:T986,import Image from "next/image"; import { Check } from "lucide-react"; import { GlassFrame } from "@/components/marketly/hero/ShowcaseScene"; import { Sheet } from "@/components/marketly/layout/Sheet"; import { PageHeader } from "@/components/marketly/ui/PageHeader"; import { SlashButton } from "@/components/marketly/ui/SlashButton"; import { pages } from "@/lib/marketly/data/copy"; import { cn } from "@/lib/utils"; /** Alternating media and text rows, then a black full-bleed band with the glass video frame. */ export function FeaturesPage() { const copy = pages.features; return ( <>

{copy.cta}

{copy.rows.map((row, i) => (

{row.title}

{row.text}

))}

{copy.bandTitle}

{copy.bandSub}

); } a9:Ta32,import { HeroScroller } from "@/components/marketly/hero/HeroScroller"; import { Sheet } from "@/components/marketly/layout/Sheet"; import { Economy } from "@/components/marketly/sections/Economy"; import { FeaturedIpos } from "@/components/marketly/sections/FeaturedIpos"; import { IdeasSection } from "@/components/marketly/sections/IdeasSection"; import { MarketCategory } from "@/components/marketly/sections/MarketCategory"; import { MarketSummary } from "@/components/marketly/sections/MarketSummary"; import { TopStories } from "@/components/marketly/sections/NewsList"; import { TradingBrokers } from "@/components/marketly/sections/TradingBrokers"; import { sections } from "@/lib/marketly/data/copy"; import { getAllMarketCategories, getBrokers, getCommunityIdeas, getEconomicCalendar, getFeaturedIpos, getIndicators, getInflation, getMarketSummary, getNews, } from "@/lib/marketly/api"; /** * The landing page: the pinned hero, then the white sheet with every section, each fed by the data layer. Pass * `loading` to any section to see its skeleton. */ export async function Home() { const [summary, ipos, community, indicators, news, categories, inflation, calendar, brokers] = await Promise.all([ getMarketSummary(), getFeaturedIpos(), getCommunityIdeas(), getIndicators(), getNews("top"), getAllMarketCategories(), getInflation(), getEconomicCalendar(), getBrokers(), ]); return ( <>

{categories.map((category) => ( ))}

); } aa:T64e,import { Sheet } from "@/components/marketly/layout/Sheet"; import { MarketsAnchors, RegionTabs } from "@/components/marketly/pages/MarketsNav"; import { Economy } from "@/components/marketly/sections/Economy"; import { MarketCategory } from "@/components/marketly/sections/MarketCategory"; import { PageHeader } from "@/components/marketly/ui/PageHeader"; import { pages, sections } from "@/lib/marketly/data/copy"; import { getAllMarketCategories, getEconomicCalendar, getInflation } from "@/lib/marketly/api"; /** The markets page reuses the landing's market blocks, with region tabs and a sticky anchor list. */ export async function MarketsPage() { const [categories, inflation, calendar] = await Promise.all([getAllMarketCategories(), getInflation(), getEconomicCalendar()]); const anchors = [...categories.map((c) => ({ id: `market-${c.id}`, label: c.title })), { id: "economy", label: sections.economyBlock.title }]; return ( <>

{categories.map((category) => ( ))}

); } ab:T416,import { EarthSceneLazy as EarthScene } from "@/components/marketly/hero/EarthSceneLazy"; import { DarkTop } from "@/components/marketly/layout/DarkTop"; import { SlashButton } from "@/components/marketly/ui/SlashButton"; import { pages } from "@/lib/marketly/data/copy"; /** A black page with the Earth, the 56px headline and a way home. */ export function NotFound() { const copy = pages.notFound; return (

{copy.title}

{copy.subtitle}

{copy.cta}

); } ac:Tbc9,import Link from "next/link"; import { Logo } from "@/components/marketly/layout/Logo"; import { Sheet } from "@/components/marketly/layout/Sheet"; import { BrandIcon, type Brand } from "@/components/marketly/ui/BrandIcon"; import { SlashButton } from "@/components/marketly/ui/SlashButton"; import { pages } from "@/lib/marketly/data/copy"; const oauthBrands: Record = { Google: "google", Apple: "apple", Facebook: "facebook", X: "x" }; const input = "h-10 w-full rounded-chip border border-border-hover bg-elevated px-3 text-body text-fg-primary outline-none transition-[box-shadow,border-color] placeholder:text-fg-muted focus:border-link focus:ring-2 focus:ring-link/40"; /** A centered 420px card: logo, OAuth buttons, the e-mail form and the gradient sign-in button. */ export function SignInPage() { const copy = pages.signin; return (

{copy.title}

{copy.oauth.map((provider) => ( ))}

{copy.or}

{copy.create}

); } ad:T11c3,import Image from "next/image"; import { BadgeCheck, ExternalLink, Star } from "lucide-react"; import { Icon } from "@/components/marketly/ui/Icon"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { sections } from "@/lib/marketly/data/copy"; import type { Broker, Logo } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; /** * A broker: the layered logo, name with an optional gold badge, category, rating with the verified mark and the * "Open account" button. The card tints softly under the pointer and its logo's layers open a little; the featured * one carries a chip over its border and a violet-to-sky wash that deepens instead. */ export function BrokerCard({ broker, className }: { broker: Broker; className?: string }) { return (

{broker.featured && ( {sections.brokers.featured} )}

{broker.name} {broker.badge && {broker.badge}}

{broker.category}

{broker.rating.toFixed(1)} • {broker.ratingLabel} {broker.verified && } {sections.brokers.open}

); } /** The color a logo is built on, repeated by the two layers behind the tile. */ function logoColor(logo: Logo): string | undefined { return logo.kind === "text" || logo.kind === "icon" ? logo.bg : undefined; } /** * The logo as a stack: the tile in front and two more in the same color behind it, each turned a little further and * more transparent. An image or a flag sits on a neutral tile with gray layers. */ function BrokerLogo({ logo, name }: { logo: Logo; name: string }) { const color = logoColor(logo); const layer = color ? { background: color } : undefined; return ( {logo.kind === "text" && 1 ? "text-[24px]" : "text-[30px]")}>{logo.text}} {logo.kind === "icon" && } {logo.kind === "image" &&

} {(logo.kind === "flag" || logo.kind === "flags") && } ); } ae:Tf82,import { Moon, Sun } from "lucide-react"; import { Card } from "@/components/marketly/ui/Card"; import { Carousel, Slide } from "@/components/marketly/ui/Carousel"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { sections } from "@/lib/marketly/data/copy"; import type { EarningsEvent } from "@/lib/marketly/data/types"; import { formatPrice } from "@/lib/marketly/format"; /** "Earnings Calendar ›": a card per report with the day, the session icon and actual against estimate. */ export function EarningsCalendar({ events, href, loading = false }: { events: EarningsEvent[]; href: string; loading?: boolean }) { return (

{sections.earnings.title} {loading ? Array.from({ length: 4 }, (_, i) => ( )) : events.map((event) => ( ))} {sections.earnings.seeAll}

); } function EarningsCard({ event }: { event: EarningsEvent }) { const Session = event.session === "pre" ? Sun : Moon; return (

{event.when}

{event.symbol.ticker} {event.symbol.name}

); } function Figure({ label, value, currency }: { label: string; value: number | null; currency: string }) { return (

{label}

{value === null ? ( "—" ) : ( <> {formatPrice(value, 2)} {currency} )}

); } function EarningsCardSkeleton() { return (

); } af:Te73,import { Flag } from "@/components/marketly/ui/Flag"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { sections } from "@/lib/marketly/data/copy"; import type { CalendarEvent } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; /** "Economic Calendar ›": rows grouped by day with time, flag, event, importance dots and three figures. */ export function EconomicCalendar({ events, loading = false }: { events: CalendarEvent[]; loading?: boolean }) { const days = Array.from(new Set(events.map((e) => e.day))); return (

{sections.economicCalendar.title}

{sections.economicCalendar.columns.map((c) => ( ))} {loading ? ( {Array.from({ length: 8 }, (_, i) => ( ))} ) : ( days.map((day) => ( {events .filter((e) => e.day === day) .map((e) => ( {[e.actual, e.forecast, e.prior].map((v, i) => ( ))} ))} )) )}

Time	Event	{c}

{day}
{e.time}	{e.event}	{v ?? "—"}

{sections.economicCalendar.seeAll}

); } function Importance({ level }: { level: 1 | 2 | 3 }) { return ( {[1, 2, 3].map((i) => ( ))} ); } b0:T622,"use client"; import dynamic from "next/dynamic"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { sections } from "@/lib/marketly/data/copy"; import type { CalendarEvent, CountryInflation } from "@/lib/marketly/data/types"; import { EconomicCalendar } from "./EconomicCalendar"; /* The map's geometry is heavy, so it loads after the page, into a box of the same shape (no layout shift). */ const WorldMap = dynamic(() => import("./WorldMap").then((m) => m.WorldMap), { ssr: false, loading: () => , }); /** "Economy ›": the global inflation map and the economic calendar. */ export function Economy({ inflation, calendar, loading = false }: { inflation: CountryInflation[]; calendar: CalendarEvent[]; loading?: boolean }) { return (

{sections.economyBlock.title}

{sections.inflationMap.title}

); } b1:T5aa,import { Carousel, Slide } from "@/components/marketly/ui/Carousel"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { sections } from "@/lib/marketly/data/copy"; import type { IpoEvent } from "@/lib/marketly/data/types"; import { IpoCard, IpoCardSkeleton } from "./IpoCard"; /** A carousel of upcoming listings; "See more events" shows only on phones, where the carousel ends sooner. */ export function FeaturedIpos({ events, loading = false }: { events: IpoEvent[]; loading?: boolean }) { return (

{sections.featuredIpos.title} {loading ? Array.from({ length: 4 }, (_, i) => ( )) : events.map((event) => ( ))} {sections.featuredIpos.seeMore}

); } b2:T5eb,"use client"; import { useState } from "react"; import { Empty } from "@/components/marketly/ui/Empty"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { SkeletonRow } from "@/components/marketly/ui/Skeleton"; import { SymbolRow } from "@/components/marketly/ui/SymbolRow"; import type { Symbol } from "@/lib/marketly/data/types"; type Props = { title: string; href: string; tabs: string[]; lists: { regular: Symbol[]; preMarket: Symbol[] }; seeAll: string; loading?: boolean; }; /** "Stock gainers ›" / "Stock losers ›": session tabs over a list of quotes with price and change. */ export function GainersLosers({ title, href, tabs, lists, seeAll, loading = false }: Props) { const [tab, setTab] = useState(tabs[0]); const rows = tab === tabs[0] ? lists.regular : lists.preMarket; return (

{title}

{loading ? Array.from({ length: 5 }, (_, i) => ) : rows.length ? rows.map((s) => ) : }

{seeAll}

); } b3:T10ac,import Image from "next/image"; import Link from "next/link"; import { LogoMark } from "@/components/marketly/layout/Logo"; import { Icon } from "@/components/marketly/ui/Icon"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { sections } from "@/lib/marketly/data/copy"; import type { Idea } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { timeAgo } from "@/lib/marketly/format"; type Props = { idea: Idea; /** The blue bookmark ribbon on editors' picks. */ ribbon?: boolean; /** The INDICATOR / STRATEGY badge. */ badge?: boolean; /** Time, comments and boosts under the byline. */ meta?: boolean; className?: string; }; /** An idea: a chart thumbnail with symbol logos, a title that turns blue on hover, an excerpt and the author. */ export function IdeaCard({ idea, ribbon = false, badge = false, meta = false, className }: Props) { return (

{/* The picture repeats the title's link; it is hidden from assistive tech so the title is the one link. */}

{ribbon && idea.editorsPick && ( )} {badge && idea.kind !== "idea" && ( {idea.kind} )} {idea.symbols.map((logo, i) => ( 0 && "-ms-2")} /> ))} {idea.direction && ( )}

{idea.title}

{idea.excerpt}

{sections.by}{" "} {idea.author}

{meta && (

{timeAgo(idea.publishedAt, new Date("2026-10-01T08:00:00Z"))} {idea.comments} {idea.boosts}

)}

); } export function IdeaCardSkeleton() { return (

); } b4:T8ae,"use client"; import { useState } from "react"; import { Carousel, Slide } from "@/components/marketly/ui/Carousel"; import { Empty } from "@/components/marketly/ui/Empty"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import type { Idea } from "@/lib/marketly/data/types"; import { IdeaCard, IdeaCardSkeleton } from "./IdeaCard"; type Props = { id: string; title: string; href: string; tabs: string[]; /** One list per tab, in the same order. */ lists: Idea[][]; ribbon?: boolean; badge?: boolean; loading?: boolean; /** `h2` for a top-level section, `h3` inside a market block. */ as?: "h2" | "h3"; }; /** A titled carousel of idea cards with pill tabs switching between lists (Community ideas, Indicators and strategies). */ export function IdeasSection({ id, title, href, tabs, lists, ribbon = false, badge = false, loading = false, as = "h3" }: Props) { const [tab, setTab] = useState(tabs[0]); const ideas = lists[Math.max(0, tabs.indexOf(tab))] ?? []; return (

{title} {tabs.length > 1 && }

); } export function IdeaCarousel({ ideas, ribbon, badge, loading, label, className }: { ideas: Idea[]; ribbon?: boolean; badge?: boolean; loading?: boolean; label: string; className?: string }) { if (!loading && ideas.length === 0) return ; return ( {loading ? Array.from({ length: 3 }, (_, i) => ( )) : ideas.map((idea) => ( ))} ); } b5:T86a,import { Card } from "@/components/marketly/ui/Card"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { sections } from "@/lib/marketly/data/copy"; import type { IpoEvent } from "@/lib/marketly/data/types"; /** An upcoming listing: logo, ticker, company, then exchange and offer price in two mini columns (316×124). */ export function IpoCard({ event }: { event: IpoEvent }) { return (

{event.symbol.ticker} {event.symbol.name}

{sections.exchange}: {event.exchange}
{sections.offerPrice}: {event.offerPrice ?? "—"}

); } export function IpoCardSkeleton() { return (

); } b6:T160e,import { Card } from "@/components/marketly/ui/Card"; import { Carousel, Slide } from "@/components/marketly/ui/Carousel"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { Skeleton, SkeletonRow } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { SymbolRow } from "@/components/marketly/ui/SymbolRow"; import { sections } from "@/lib/marketly/data/copy"; import type { MarketCategoryData, Symbol } from "@/lib/marketly/data/types"; import { EarningsCalendar } from "./EarningsCalendar"; import { GainersLosers } from "./GainersLosers"; import { IdeaCarousel } from "./IdeasSection"; import { IpoCard, IpoCardSkeleton } from "./IpoCard"; import { NewsList } from "./NewsList"; import { PerformanceBars } from "./PerformanceBars"; /** * One market block (US stocks, Crypto, Futures, Forex): trends, trade ideas, two symbol lists, gainers and losers, * calendars or performance bars, and news. Everything is driven by the category's JSON. */ export function MarketCategory({ data, loading = false }: { data: MarketCategoryData; loading?: boolean }) { const id = `market-${data.id}`; return (

{data.title}

{sections.communityTrends}

{loading ? Array.from({ length: 5 }, (_, i) => ) : data.trends.map((s) => )}

{sections.tradeIdeas.title}

{data.lists.length > 0 && (

{data.lists.map((list) => (

{list.title}

{loading ? Array.from({ length: 6 }, (_, i) => ) : list.rows.map((s) => )}

{list.seeAll.label}

))}

)} {data.gainers && data.losers && (

)} {data.earnings && (

)} {data.ipos && (

{sections.ipoCalendar.title} {loading ? Array.from({ length: 4 }, (_, i) => ( )) : data.ipos.map((event) => ( ))} {sections.ipoCalendar.seeAll}

)} {data.performance && (

)}

{data.newsTitle}

); } /** A trending symbol: 246×148 card with the logo, ticker and name. */ function TrendCard({ symbol }: { symbol: Symbol }) { return (

{symbol.ticker} {symbol.name}

); } function TrendCardSkeleton() { return (

); } b7:T2a88,import Link from "next/link"; import { Card } from "@/components/marketly/ui/Card"; import { Change } from "@/components/marketly/ui/Change"; import { AxisBars, StackedBar } from "@/components/marketly/ui/ProgressBar"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { Skeleton, SkeletonRow } from "@/components/marketly/ui/Skeleton"; import { Sparkline, type SparkTick } from "@/components/marketly/ui/Sparkline"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { DelayedMark, Price, SymbolRow } from "@/components/marketly/ui/SymbolRow"; import { TickerChip } from "@/components/marketly/ui/TickerChip"; import { sections } from "@/lib/marketly/data/copy"; import type { MarketSummaryData, Symbol } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { formatPrice } from "@/lib/marketly/format"; const dotClass = { bitcoin: "bg-dot-bitcoin", ethereum: "bg-dot-ethereum", others: "bg-dot-others" } as const; /** A part of a card that is a link of its own: it bleeds 12px past its content and tints under the pointer. */ const block = "group/block -m-3 flex flex-col rounded-cta p-3 text-fg-primary no-underline transition-colors duration-150 hover:bg-block-hover"; const clock = (minutes: number) => `${String(Math.floor(minutes / 60) % 24).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`; /** A trading day on the x-axis: the time of every point for the tooltip, and a label at each full hour. */ function sessionAxis(session: NonNullable, count: number): { labels: string[]; ticks: SparkTick[] } { const [hours, minutes] = session.start.split(":").map(Number); const start = hours * 60 + minutes; const length = Math.max(count - 1, 1) * session.stepMinutes; const labels = Array.from({ length: count }, (_, i) => clock(start + i * session.stepMinutes)); const ticks: SparkTick[] = []; for (let at = Math.ceil(start / 60) * 60; at <= start + length; at += 60) ticks.push({ label: clock(at), at: (at - start) / length }); return { labels, ticks }; } /** One label per point of a month that ends on the site's "today", for the mini charts' tooltips. */ function monthLabels(count: number, end = new Date("2026-10-01T17:00:00Z")): string[] { const span = 30 * 24 * 3600 * 1000; return Array.from({ length: count }, (_, i) => { const d = new Date(end.getTime() - (span * (count - 1 - i)) / Math.max(count - 1, 1)); return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", timeZone: "UTC" }); }); } /** * The first block in the sheet, on a three-column grid: the index's trading day across two columns beside the major * indices, then three cards (crypto, futures, economy), each headed by a one-month chart. */ export function MarketSummary({ data, loading = false }: { data: MarketSummaryData; loading?: boolean }) { const { hero, majorIndices, trio, dominance, crypto, commodities, inflation } = data; const [cryptoHead, futuresHead, economyHead] = trio; const heroTone = (hero.changePct ?? 0) >= 0 ? "up" : "down"; const axis = hero.session ? sessionAxis(hero.session, hero.spark?.length ?? 0) : null; const rows = (symbols: Symbol[], placeholders: number) => loading ? Array.from({ length: placeholders }, (_, i) => ) : symbols.map((s) => ); return (

{sections.marketSummary.title}

{/* The big chart takes the height of the indices card next to it; on its own row it keeps a floor. */}

{hero.name} {hero.ticker} {hero.marketOpen !== undefined && ( )}

{loading ? ( ) : (

{formatPrice(hero.price, 2)} {hero.delayed && } {hero.unit && {hero.unit}}

)}

{sections.majorIndices.title}

{rows(majorIndices, 6)}

{sections.majorIndices.seeAll}

{sections.dominance.title}

{d.label}: {loading ? "—" : `${d.pct.toFixed(2)}%`}

{loading ? ( ) : ( ({ pct: d.pct, className: dotClass[d.color], label: d.label }))} /> )}

{rows(crypto, 2)}

{sections.dominance.seeAll}

{rows(commodities, 4)}

{sections.commodities.seeAll}

{inflation.symbol.name}

{inflation.symbol.ticker}

{inflation.rateLabel}

{stat.label}: {loading ? : stat.value}

{sections.economy.seeAll}

); } /** The top of each themed card: the symbol, its quote and change, and a month of it as a small chart. */ function ChartHead({ symbol, loading }: { symbol: Symbol; loading: boolean }) { const tone = (symbol.changePct ?? 0) >= 0 ? "up" : "down"; const points = symbol.spark ?? []; return (

{symbol.name} {symbol.ticker}

{loading ? (

) : (

)}

{sections.oneMonth}

); } b8:Tbfc,import Link from "next/link"; import { Empty } from "@/components/marketly/ui/Empty"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { SkeletonNews } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { sections } from "@/lib/marketly/data/copy"; import type { NewsItem } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { timeAgo } from "@/lib/marketly/format"; /* Mock timestamps are relative to this moment, so "2 hours ago" reads the same on every render. */ const NOW = new Date("2026-10-01T08:00:00Z"); /** Three columns of headlines, four to a column, each with its source and age. */ export function NewsList({ items, loading = false, columns = 3, perColumn = 4, className }: { items: NewsItem[]; loading?: boolean; columns?: 2 | 3; perColumn?: number; className?: string }) { if (!loading && items.length === 0) return ; const shown = loading ? Array.from({ length: columns * perColumn }, () => null) : items.slice(0, columns * perColumn); const cols = Array.from({ length: columns }, (_, c) => shown.slice(c * perColumn, (c + 1) * perColumn)); return (

{cols.map((col, c) => (

{item ? : }

))}

); } export function NewsRow({ item, large = false }: { item: NewsItem; large?: boolean }) { return (

{item.source} · {timeAgo(item.publishedAt, NOW)}

{item.headline}

); } /** "Top stories ›" with its three columns and a "Keep reading" link. */ export function TopStories({ items, loading = false }: { items: NewsItem[]; loading?: boolean }) { return (

{sections.topStories.title} {sections.topStories.keepReading}

); } b9:T85b,"use client"; import { useState } from "react"; import { Change } from "@/components/marketly/ui/Change"; import { PillTabs } from "@/components/marketly/ui/PillTabs"; import { CenteredBar } from "@/components/marketly/ui/ProgressBar"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { SeeAllLink } from "@/components/marketly/ui/SeeAllLink"; import { Skeleton } from "@/components/marketly/ui/Skeleton"; import { SymbolLogo } from "@/components/marketly/ui/SymbolLogo"; import { TickerChip } from "@/components/marketly/ui/TickerChip"; import { sections } from "@/lib/marketly/data/copy"; import type { PerfRow } from "@/lib/marketly/data/types"; /** "Forex performance ›": one centered-zero bar per pair, period tabs underneath. */ export function PerformanceBars({ rows, href, loading = false }: { rows: PerfRow[]; href: string; loading?: boolean }) { const periods = sections.forexPerformance.periods; const [period, setPeriod] = useState(periods[0]); const values = rows.map((r) => r.byPeriod[period] ?? 0); const max = Math.max(...values.map(Math.abs), 0.0001); return (

{sections.forexPerformance.title}

{row.symbol.ticker} {loading ? : } {loading ? : }

{sections.forexPerformance.seeAll}

); } ba:T570,import { Carousel, Slide } from "@/components/marketly/ui/Carousel"; import { SectionHeading } from "@/components/marketly/ui/SectionHeading"; import { sections } from "@/lib/marketly/data/copy"; import type { Broker } from "@/lib/marketly/data/types"; import { BrokerCard } from "./BrokerCard"; /** "Trading and brokers ›": the intro line and the brokers as a carousel, three to a row, the featured one first. */ export function TradingBrokers({ brokers }: { brokers: Broker[] }) { const ordered = [...brokers].sort((a, b) => Number(b.featured) - Number(a.featured)); return (

{sections.brokers.title}

{sections.brokers.intro}

{ordered.map((broker) => ( // The top padding keeps the featured chip, which sits over the card's border, inside the carousel's clip. ))}

); } bb:T11e8,"use client"; import { useMemo, useState } from "react"; import { geoNaturalEarth1, geoPath } from "d3-geo"; import { feature } from "topojson-client"; import world from "world-atlas/countries-110m.json"; import { sections } from "@/lib/marketly/data/copy"; import type { CountryInflation } from "@/lib/marketly/data/types"; const WIDTH = 1360; const HEIGHT = 650; const DOMAIN: [number, number] = [0, 15]; type Country = { id: string; name: string; d: string }; /** Hex → [r,g,b]. */ function rgb(hex: string): [number, number, number] { const n = parseInt(hex.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } /** The sequential scale from the design tokens: light blue → brand blue → deep blue over the domain. */ function scale(value: number, stops: [string, string, string]): string { const t = Math.max(0, Math.min(1, (value - DOMAIN[0]) / (DOMAIN[1] - DOMAIN[0]))); const [a, b, c] = stops.map(rgb); const [from, to, k] = t < 0.5 ? [a, b, t * 2] : [b, c, (t - 0.5) * 2]; const mix = from.map((v, i) => Math.round(v + (to[i] - v) * k)); return `rgb(${mix.join(",")})`; } /** * The choropleth world map (Natural Earth projection, world-atlas 110m). Countries with data are shaded by annual * inflation; hovering shows the figure. Loaded lazily; the page reserves its height meanwhile. */ export function WorldMap({ data, loading = false }: { data: CountryInflation[]; loading?: boolean }) { const [hover, setHover] = useState<{ id: string; x: number; y: number } | null>(null); const byId = useMemo(() => new Map(data.map((d) => [d.id, d])), [data]); const countries = useMemo(() => { const topology = world as unknown as Parameters[0]; const collection = feature(topology, topology.objects.countries as Parameters[1]); const features = "features" in collection ? collection.features : [collection]; const projection = geoNaturalEarth1().fitSize([WIDTH, HEIGHT], collection); const path = geoPath(projection); // A few territories in the atlas have no id; they get one from their position so React keys stay unique. return features.map((f, i) => ({ id: f.id === undefined ? `x${i}` : String(f.id), name: String((f.properties as { name?: string } | null)?.name ?? f.id ?? ""), d: path(f) ?? "" })); }, []); const stops: [string, string, string] = ["#e3effd", "#2962ff", "#0c3299"]; const hovered = hover ? byId.get(hover.id) : undefined; const hoveredName = hover ? countries.find((c) => c.id === hover.id)?.name : undefined; return (

setHover(null)}> {!loading && (

{DOMAIN[0]}% {DOMAIN[1]}%+ {sections.inflationMap.legend}

)} {hover && hoveredName && ( )}

); } bc:Ta11,import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion" import { cn } from "@/lib/utils" import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { return ( ) } function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { return ( ) } function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) { return ( {children} ) } function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } bd:T706,import { siApple, siFacebook, siGoogle, siInstagram, siReddit, siTelegram, siTiktok, siX, siYoutube } from "simple-icons"; import type { Social } from "@/lib/marketly/data/nav"; import { cn } from "@/lib/utils"; /* LinkedIn is no longer in simple-icons; this is the plain "in" mark. */ const linkedin = { title: "LinkedIn", path: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", }; const brands: Record = { x: siX, facebook: siFacebook, youtube: siYoutube, instagram: siInstagram, linkedin, telegram: siTelegram, tiktok: siTiktok, reddit: siReddit, google: siGoogle, apple: siApple, }; export type Brand = keyof typeof brands; /** A brand mark in the current color (paths from simple-icons, CC0). */ export function BrandIcon({ name, size = 24, className, title }: { name: Brand; size?: number; className?: string; title?: string }) { const icon = brands[name]; return ( ); } export const brandTitles: Record = Object.fromEntries(Object.entries(brands).map(([k, v]) => [k, v.title])) as Record; be:Tc18,import { Button as ButtonPrimitive } from "@base-ui/react/button" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-link focus-visible:ring-3 focus-visible:ring-link/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-down aria-invalid:ring-3 aria-invalid:ring-down/20 dark:aria-invalid:border-down/50 dark:aria-invalid:ring-down/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-link text-white hover:bg-link/80", outline: "border-border-subtle bg-page hover:bg-chip hover:text-fg-primary aria-expanded:bg-chip aria-expanded:text-fg-primary dark:border-field-line dark:bg-field-line/30 dark:hover:bg-field-line/50", secondary: "bg-chip text-fg-primary hover:bg-[color-mix(in_oklch,var(--chip-bg),var(--fg-primary)_5%)] aria-expanded:bg-chip aria-expanded:text-fg-primary", ghost: "hover:bg-chip hover:text-fg-primary aria-expanded:bg-chip aria-expanded:text-fg-primary dark:hover:bg-chip/50", destructive: "bg-down/10 text-down hover:bg-down/20 focus-visible:border-down/40 focus-visible:ring-down/20 dark:bg-down/20 dark:hover:bg-down/30 dark:focus-visible:ring-down/40", link: "text-link underline-offset-4 hover:underline", }, size: { default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-8", "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg", "icon-lg": "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", ...props }: ButtonPrimitive.Props & VariantProps) { return ( ) } export { Button, buttonVariants } bf:Td01,"use client"; import { useCallback, useSyncExternalStore } from "react"; import useEmblaCarousel from "embla-carousel-react"; import { cn } from "@/lib/utils"; import { CarouselArrow } from "./CarouselArrow"; type Props = { children: React.ReactNode; /** Gap between slides, in px (matches the design: 32 for cards, 48 for ideas). */ gap?: number; className?: string; label?: string; /** Vertical offset of the arrows from the top, so they center on the cards rather than on captions below them. */ arrowTop?: string; }; /** * A horizontal card carousel on embla: drag-free on touch, one slide per step, round arrows that overlap the first and * last card and disappear at the edges, ←/→ when focused. On phones the slides bleed to the viewport edge. */ export function Carousel({ children, gap = 32, className, label = "Carousel", arrowTop }: Props) { const [emblaRef, embla] = useEmblaCarousel({ align: "start", slidesToScroll: 1, dragFree: true, containScroll: "trimSnaps" }); // Which arrows apply, read straight from embla whenever it reports a change. const subscribe = useCallback( (listener: () => void) => { if (!embla) return () => {}; embla.on("select", listener).on("reInit", listener).on("resize", listener).on("init", listener); return () => { embla.off("select", listener).off("reInit", listener).off("resize", listener).off("init", listener); }; }, [embla], ); const edges = useSyncExternalStore( subscribe, () => (embla ? `${embla.canScrollPrev()}:${embla.canScrollNext()}` : "false:false"), () => "false:false", ); const [canPrev, canNext] = edges.split(":").map((v) => v === "true"); function onKeyDown(e: React.KeyboardEvent) { if (e.key === "ArrowRight") { e.preventDefault(); embla?.scrollNext(); } if (e.key === "ArrowLeft") { e.preventDefault(); embla?.scrollPrev(); } } return (

{children}

embla?.scrollPrev()} disabled={!canPrev} className={arrowTop ? "translate-y-0" : undefined} /> embla?.scrollNext()} disabled={!canNext} className={arrowTop ? "translate-y-0" : undefined} />

); } /** * One slide: a fixed width on desktop, 1.15 cards per screen on phones (the next one peeks). Pass `basis` instead of * `width` for slides that share the row evenly (the classes that set `flex-basis` at each breakpoint). */ export function Slide({ children, width, basis, className }: { children: React.ReactNode; width?: number; basis?: string; className?: string }) { return (

{children}

); } c0:T45a,import { ChevronLeft, ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; /** The 48px white disc with a chevron that floats over a carousel's edge. Hidden when there is nowhere to go. */ export function CarouselArrow({ direction, onClick, disabled, className }: { direction: "prev" | "next"; onClick: () => void; disabled?: boolean; className?: string }) { const Chevron = direction === "prev" ? ChevronLeft : ChevronRight; return ( ); } c1:Tfd8,"use client" import * as React from "react" import { Dialog as DialogPrimitive } from "@base-ui/react/dialog" import { cn } from "@/lib/utils" import { Button } from "@/components/marketly/ui/button" import { XIcon } from "lucide-react" function Dialog({ ...props }: DialogPrimitive.Root.Props) { return } function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) { return } function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) { return } function DialogClose({ ...props }: DialogPrimitive.Close.Props) { return } function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: DialogPrimitive.Popup.Props & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( } > Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DialogFooter({ className, showCloseButton = false, children, ...props }: React.ComponentProps<"div"> & { showCloseButton?: boolean }) { return (

{children} {showCloseButton && ( }> Close )}

) } function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) { return ( ) } function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } c2:T64b,import { cn } from "@/lib/utils"; /** * Where a country's round flag is: the square SVGs in public/flags/ (from flag-icons, MIT), named by ISO 3166-1 * alpha-2 code in lowercase ("eu" for the euro). Add a country by adding its file. */ const flagSrc = (country: string) => `https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/flags/${country.toLowerCase()}.svg`; /** A round country flag. */ export function Flag({ country, size = 36, className, title }: { country: string; size?: number; className?: string; title?: string }) { return ( {/* a line of text, so the flag sits on the baseline the way a letter does */} {"\u00a0"} ); } /** Two flags, the second overlapping the first by a third: a currency pair. */ export function FlagPair({ countries, size = 36, className }: { countries: [string, string]; size?: number; className?: string }) { const small = Math.round(size * 0.68); return ( ); } c3:T885,import type { IconName } from "@/lib/marketly/data/nav"; import type { LogoIcon } from "@/lib/marketly/data/types"; import { ArrowLeftRight, ArrowUpRight, Award, BadgeCheck, Bitcoin, Bookmark, Briefcase, Building, Calendar, ChartColumn, Check, ChevronDown, ChevronLeft, ChevronRight, CircleDot, CircleQuestionMark, Coins, DollarSign, Download, Droplet, Ellipsis, ExternalLink, Flag, Flame, Fuel, Gem, Globe, Layers, LayoutGrid, Lightbulb, Map, Menu, MessageCircle, Moon, Newspaper, Percent, Pickaxe, Rocket, ScanSearch, Search, Shield, ShoppingBag, SlidersHorizontal, SquarePlus, Star, Sun, TrendingUp, Trophy, User, UserPlus, Users, X, type LucideIcon, type LucideProps, } from "lucide-react"; /** Every icon the data layer may name, resolved once here so JSON stays free of imports. */ const icons: Record = { shield: Shield, trophy: Trophy, globe: Globe, star: Star, "star-filled": Star, help: CircleQuestionMark, scan: ScanSearch, calendar: Calendar, newspaper: Newspaper, briefcase: Briefcase, trending: TrendingUp, options: SlidersHorizontal, map: Map, bag: ShoppingBag, lightbulb: Lightbulb, layers: Layers, users: Users, flag: Flag, download: Download, building: Building, compare: ArrowLeftRight, "plus-square": SquarePlus, award: Award, more: Ellipsis, user: User, search: Search, menu: Menu, close: X, "chevron-right": ChevronRight, "chevron-left": ChevronLeft, "chevron-down": ChevronDown, sun: Sun, moon: Moon, check: Check, external: ExternalLink, verified: BadgeCheck, bookmark: Bookmark, comment: MessageCircle, boost: Rocket, features: UserPlus, "circle-dot": CircleDot, droplet: Droplet, flame: Flame, gold: Coins, copper: Pickaxe, barrel: Fuel, bitcoin: Bitcoin, chart: ChartColumn, dollar: DollarSign, percent: Percent, }; export { ArrowUpRight, Gem, LayoutGrid }; export function Icon({ name, ...props }: { name: IconName | LogoIcon } & LucideProps) { const Component = icons[name] ?? CircleDot; return ; } export type { IconName }; c4:T8a4,"use client"; import { useId, useRef } from "react"; import { cn } from "@/lib/utils"; type Props = { tabs: string[]; value: string; onChange: (value: string) => void; className?: string; label?: string; size?: "md" | "sm"; }; /** * The flat pill tabs ("Editors' picks | Popular", "1D 1W 1M …"): 40px buttons, the active one on the light background * and semibold. Scrolls sideways on phones; arrow keys move between tabs. */ export function PillTabs({ tabs, value, onChange, className, label = "Views", size = "md" }: Props) { const id = useId(); const listRef = useRef(null); function onKeyDown(e: React.KeyboardEvent) { const i = tabs.indexOf(value); if (i < 0) return; let next = i; if (e.key === "ArrowRight") next = (i + 1) % tabs.length; else if (e.key === "ArrowLeft") next = (i - 1 + tabs.length) % tabs.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = tabs.length - 1; else return; e.preventDefault(); onChange(tabs[next]); const buttons = listRef.current?.querySelectorAll("[role=tab]"); buttons?.[next]?.focus(); } return (

{tabs.map((tab) => { const active = tab === value; return ( ); })}

); } c5:T9fc,"use client" import * as React from "react" import { Popover as PopoverPrimitive } from "@base-ui/react/popover" import { cn } from "@/lib/utils" function Popover({ ...props }: PopoverPrimitive.Root.Props) { return } function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) { return } function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }: PopoverPrimitive.Popup.Props & Pick< PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >) { return ( ) } function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) { return ( ) } function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) { return ( ) } export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } c6:Ted9,import { cn } from "@/lib/utils"; /** * A bar with zero in the middle: negatives fill leftwards in red, positives rightwards in green, the largest absolute * value in the list reaching the edge. */ export function CenteredBar({ value, max, className }: { value: number; max: number; className?: string }) { const pct = max > 0 ? Math.min(Math.abs(value) / max, 1) * 50 : 0; const positive = value > 0; return (

{value !== 0 && (

)}

); } /** A stacked horizontal bar (the Bitcoin dominance split): rounded ends, a sliver of the surface between segments. */ export function StackedBar({ segments, className }: { segments: { pct: number; className: string; label: string }[]; className?: string }) { return (

`${s.label} ${s.pct}%`).join(", ")}> {segments.map((s) => (

))}

); } type AxisBarsProps = { values: number[]; /** The value at the top gridline; a bar above it rises past the line. */ max: number; /** Gridline labels, top to bottom ("4%", "2%", "0%"). */ yTicks: string[]; /** Labels under the bars, by bar index. */ xTicks: { at: number; label: string; strong?: boolean }[]; loading?: boolean; className?: string; }; /** * A small bar chart with its scale: hairline gridlines, their values on the end side and a few labels under the bars * (the monthly inflation chart). Gray bars and placeholders while loading. */ export function AxisBars({ values, max, yTicks, xTicks, loading = false, className }: AxisBarsProps) { const lines = Math.max(yTicks.length - 1, 1); return (

{yTicks.map((tick, i) => ( ))}

{values.map((v, i) => (

))}

{!loading && xTicks.map((tick) => ( {tick.label} ))}

{yTicks.map((tick, i) => loading ? ( ) : ( {tick} ), )}

); } c7:T74b,import Link from "next/link"; import { ChevronRight } from "lucide-react"; import type { Logo } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { SymbolLogo } from "./SymbolLogo"; type Props = { as?: "h1" | "h2" | "h3"; /** `category` is the 36px heading ("US stocks"); `section` the 28px one ("Market summary"). */ size?: "category" | "section"; href?: string; icon?: Logo; children: React.ReactNode; className?: string; /** Something aligned to the end of the heading row (a tab list, a code icon). */ aside?: React.ReactNode; }; /** A section title with the trailing chevron glyph, the whole thing a link; the chevron nudges on hover. */ export function SectionHeading({ as: Tag = "h2", size = "section", href, icon, children, className, aside }: Props) { const text = ( <> {icon && } {children} {href && ( )} ); const heading = ( {href ? ( {text} ) : ( {text} )} ); if (!aside) return heading; return (

{heading} {aside}

); } c8:T113f,"use client" import * as React from "react" import { Dialog as SheetPrimitive } from "@base-ui/react/dialog" import { cn } from "@/lib/utils" import { Button } from "@/components/marketly/ui/button" import { XIcon } from "lucide-react" function Sheet({ ...props }: SheetPrimitive.Root.Props) { return } function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) { return } function SheetClose({ ...props }: SheetPrimitive.Close.Props) { return } function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) { return } function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) { return ( ) } function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }: SheetPrimitive.Popup.Props & { side?: "top" | "right" | "bottom" | "left" showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( } > Close )} ) } function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) { return ( ) } function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) { return ( ) } export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } c9:T668,import { cn } from "@/lib/utils"; /** A static gray placeholder block (no shimmer, so loading stays calm). Shape by radius: `xs`, `chip`, `full`. */ export function Skeleton({ className, radius = "xs", style }: { className?: string; radius?: "xs" | "chip" | "full"; style?: React.CSSProperties }) { return ( ); } /** A symbol row's skeleton: circle + two bars, the same 76px tall as the row it stands in for. */ export function SkeletonRow({ quote = false }: { quote?: boolean }) { return (

{quote && ( <> )}

); } /** A news item's skeleton: dot + three bars. */ export function SkeletonNews() { return (

); } ca:T471,import Link from "next/link"; import { cn } from "@/lib/utils"; type Props = { children: React.ReactNode; href?: string; onClick?: () => void; size?: "sm" | "lg"; variant?: "gradient" | "light" | "dark"; className?: string; type?: "button" | "submit"; /** White focus outline, for a button on a dark surface. */ onDark?: boolean; }; /** * The signature slash button: a straight start edge and a slanted end edge. `sm` is the 40px header CTA, `lg` the * 56px hero one. The shape itself is CSS, in styles/globals.css (`.slash`). */ export function SlashButton({ children, href, onClick, size = "sm", variant = "gradient", className, type = "button", onDark }: Props) { const classes = cn("slash", size === "sm" ? "slash-sm" : "slash-lg", `slash-${variant}`, onDark && "focus-ring-light", className); if (href) { return ( {children} ); } return ( ); } cb:T19e5,"use client"; import { useId, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { formatPrice } from "@/lib/marketly/format"; /** A label under the chart, placed where its moment falls: `at` runs from 0 (first point) to 1 (last point). */ export type SparkTick = { label: string; at: number }; type Props = { points: number[]; /** `line` is the line with a gradient fill; `outline` the thin gray trace shown while data loads. */ variant?: "line" | "outline"; className?: string; /** Labels under the chart's x-axis, each at its own position. */ ticks?: SparkTick[]; /** While loading: how many gray placeholders stand in for the axis labels. */ tickPlaceholders?: number; tone?: "up" | "down" | "link"; /** A label per point (a time, a date) for the hover tooltip; with it the chart becomes interactive. */ labels?: string[]; /** Fraction digits for the tooltip's value. */ digits?: number; /** Marks the last point with a dot inside a slow pulse: the quote is live. */ live?: boolean; /** Line thickness in px. */ weight?: number; }; /** * A lightweight SVG area chart. It fills whatever box it is given (the drawing never sets the height), the stroke * keeps its thickness at any size, and it stays crisp with hundreds of points. With `labels` it shows a tooltip and a * marker for the point under the pointer. */ export function Sparkline({ points, variant = "line", className, ticks, tickPlaceholders, tone = "link", labels, digits = 2, live = false, weight = 1.75 }: Props) { const id = useId(); const box = useRef(null); const [hover, setHover] = useState(null); const w = 100; const h = 100; const min = Math.min(...points); const max = Math.max(...points); const span = max - min || 1; const step = w / Math.max(points.length - 1, 1); const coords = points.map((p, i) => [i * step, h - ((p - min) / span) * (h - 10) - 5] as const); const path = coords.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" "); const area = `${path} L${w} ${h} L0 ${h} Z`; const stroke = variant === "outline" ? "var(--border-subtle)" : tone === "up" ? "var(--color-minty-green-500)" : tone === "down" ? "var(--color-ripe-red-500)" : "var(--link)"; const interactive = Boolean(labels) && variant === "line"; const last = coords[coords.length - 1]; function onMove(e: React.PointerEvent) { if (!interactive || !box.current) return; const rect = box.current.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * w; setHover(Math.max(0, Math.min(points.length - 1, Math.round(x / step)))); } const marker = hover !== null ? coords[hover] : null; return ( // The end inset leaves room for the last point's dot and keeps the axis under the same span as the line.

setHover(null)}> {/* Dots are drawn in HTML so they stay round whatever the box's aspect ratio. */} {variant === "line" && last && ( {live && } {live && } )} {marker && labels && hover !== null && ( <> )}

{ticks && (

{ticks.map((tick, i) => ( 0.97 ? "-translate-x-full" : "-translate-x-1/2", ticks.length > 5 && (ticks.length - 1 - i) % 2 === 1 && "max-sm:hidden")} style={{ left: `${tick.at * 100}%` }} > {tick.label} ))}

)} {!ticks && tickPlaceholders && (

{Array.from({ length: tickPlaceholders }, (_, i) => ( ))}

)}

); } cc:T6ea,"use client" import { Switch as SwitchPrimitive } from "@base-ui/react/switch" import { cn } from "@/lib/utils" function Switch({ className, size = "default", ...props }: SwitchPrimitive.Root.Props & { size?: "sm" | "default" }) { return ( ) } export { Switch } cd:T8b2,import Image from "next/image"; import type { Logo } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { initials } from "@/lib/marketly/format"; import { Flag, FlagPair } from "./Flag"; import { Icon } from "./Icon"; export type LogoSize = 20 | 24 | 28 | 36 | 44 | 56 | 72; /** * A symbol's logo at a fixed size: an image, a colored disc with text or an icon, a flag or a currency pair. Without a * logo it falls back to the first letter of the name on a light disc. */ export function SymbolLogo({ logo, name, size = 36, className }: { logo?: Logo; name: string; size?: LogoSize; className?: string }) { const base = cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full select-none", className); const fontSize = size >= 56 ? Math.round(size * 0.36) : size >= 36 ? Math.round(size * 0.4) : Math.round(size * 0.46); if (!logo) { return ( {initials(name)} ); } switch (logo.kind) { case "image": return (

); case "text": { const long = logo.text.length >= 3; return ( {logo.text} ); } case "icon": return ( ); case "flag": return ; case "flags": return ; } } ce:Tbdd,import Link from "next/link"; import type { Symbol } from "@/lib/marketly/data/types"; import { cn } from "@/lib/utils"; import { formatPrice } from "@/lib/marketly/format"; import { Change } from "./Change"; import { SymbolLogo } from "./SymbolLogo"; import { TickerChip } from "./TickerChip"; type Props = { symbol: Symbol; /** Show the quote on the end side: `stacked` (price over change, as in the summary cards) or `columns` (side by side, as in the movers lists). */ quote?: "stacked" | "columns" | false; /** Ticker first, name under it (the trend cards and calendars use the other order). */ compact?: boolean; className?: string; }; /** * One symbol as a row: 36px logo, name with its ticker chip beneath, a hairline under it except the last. The whole * row is a link and tints on hover. */ export function SymbolRow({ symbol, quote = false, compact = false, className }: Props) { return ( {symbol.name} {symbol.delayed && } {symbol.ticker} {quote === "stacked" && ( )} {quote === "columns" && ( )} ); } /** A price with its unit in small type after it ("POINT", "USD", "USD / barrel"), written as the data gives it. */ export function Price({ value, unit, digits, className }: { value?: number; unit?: string; digits?: number; className?: string }) { return ( {formatPrice(value, digits)} {unit && {unit}} ); } /** The small orange "D": delayed data. */ export function DelayedMark() { return ( ^D ); } cf:Tcb3,/** * The data layer, as a real backend would expose it. Every function is async and returns the typed mock data from * lib/marketly/data/mock.ts; swap the bodies for fetches (Binance, CoinGecko, Finnhub …) and no component changes. */ import type { Broker, CalendarEvent, CountryInflation, Idea, IpoEvent, MarketCategoryData, MarketSummaryData, NewsItem, Plan, Symbol, } from "@/lib/marketly/data/types"; import { marketSummary, ipos, ideas, news, usStocks, crypto, futures, forex, economy, brokers, plans, search } from "@/lib/marketly/data/mock"; export type NewsCategory = keyof typeof news; export type MarketId = "us-stocks" | "crypto" | "futures" | "forex"; const marketFiles: Record = { "us-stocks": usStocks, crypto, futures, forex }; const marketNews: Record = { "us-stocks": "stocks", crypto: "crypto", futures: "futures", forex: "forex" }; export async function getMarketSummary(): Promise { return marketSummary as MarketSummaryData; } export async function getFeaturedIpos(): Promise { return ipos as IpoEvent[]; } export async function getCommunityIdeas(): Promise<{ editorsPicks: Idea[]; popular: Idea[] }> { return ideas.community as { editorsPicks: Idea[]; popular: Idea[] }; } export async function getIndicators(): Promise<{ editorsPicks: Idea[]; popular: Idea[] }> { return ideas.indicators as { editorsPicks: Idea[]; popular: Idea[] }; } export async function getNews(category: NewsCategory = "top"): Promise { return news[category] as NewsItem[]; } export async function getMarketCategory(id: MarketId): Promise { const data = marketFiles[id] as MarketCategoryData; return { ...data, news: news[marketNews[id]] as NewsItem[] }; } export async function getAllMarketCategories(): Promise { return Promise.all((["us-stocks", "crypto", "futures", "forex"] as MarketId[]).map(getMarketCategory)); } export async function getInflation(): Promise { return economy.inflation as CountryInflation[]; } export async function getEconomicCalendar(): Promise { return economy.calendar as CalendarEvent[]; } export async function getBrokers(): Promise { return brokers as Broker[]; } export async function getPlans(): Promise<{ plans: Plan[]; comparison: { feature: string; values: string[] }[]; faq: { q: string; a: string }[] }> { return plans as { plans: Plan[]; comparison: { feature: string; values: string[] }[]; faq: { q: string; a: string }[] }; } export async function getSearchData(): Promise<{ tabs: string[]; recent: Symbol[]; trending: Symbol[] }> { return search as { tabs: string[]; recent: Symbol[]; trending: Symbol[] }; } /** Every idea on the site, for the Ideas page. */ export async function getAllIdeas(): Promise { const categories = await getAllMarketCategories(); const all = [ ...ideas.community.editorsPicks, ...ideas.community.popular, ...ideas.indicators.editorsPicks, ...ideas.indicators.popular, ...categories.flatMap((c) => c.ideas), ] as Idea[]; const seen = new Set(); return all.filter((i) => (seen.has(i.id) ? false : (seen.add(i.id), true))); } d0:T1ecb,/** * Every piece of copy on the site, in one place: reword or translate here, never inside a component. */ export const brand = { name: "Marketly", tagline: ["CLEAR CHARTS /", "BOLD MOVES."], legalName: "Marketly, Inc.", year: 2026, }; export const header = { search: "Search (Ctrl+K)", searchShort: "Search", language: "EN", cta: "Get started", ctaHref: "/pricing", signIn: "Sign in", helpCenter: "Help Center", whatsNew: "What's new", darkTheme: "Dark theme", languageLabel: "Language", menu: "Menu", close: "Close", back: "Back", account: "Account", }; export const hero = { title: "Every market, in sharp focus", subtitle: "Charts, ideas and market data for traders and investors who plan every move.", cta: "Get started for free", ctaHref: "/pricing", note: "Free plan, no credit card needed", story: { title: "Watch our story", sub: "Two minutes with the founders", href: "/features" }, showcaseTitle: ["One screen.", "Every signal."], explore: { title: "Explore all features", sub: "From quick looks to deep dives", href: "/features" }, /** Video placeholders: when a file is missing the poster shows on its own. Drop your clips into /public/video. */ platformDemo: { poster: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/hero/platform-poster.png", mp4: null as string | null, webm: null as string | null }, earthFallback: { poster: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/hero/earth-poster.jpg", mp4: null as string | null, webm: null as string | null }, avatar: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/avatars/placeholder.svg", }; export const sections = { marketSummary: { title: "Market summary", href: "/markets" }, majorIndices: { title: "Major indices", seeAll: "See all major indices", href: "/markets" }, dominance: { title: "Bitcoin dominance", seeAll: "See all crypto coins", href: "/markets" }, commodities: { title: "Commodities", seeAll: "See all futures", href: "/markets" }, economy: { title: "Economy", seeAll: "See all economic indicators", href: "/markets" }, oneMonth: "1 month", featuredIpos: { title: "Featured IPOs", href: "/markets", seeMore: "See more events" }, communityIdeas: { title: "Community ideas", href: "/ideas", tabs: ["Editors' picks", "Popular"] }, indicators: { title: "Indicators and strategies", href: "/ideas", tabs: ["Editors' picks", "Popular"] }, topStories: { title: "Top stories", href: "/news", keepReading: "Keep reading" }, communityTrends: "Community trends", tradeIdeas: { title: "Trade ideas" }, gainers: { title: "Stock gainers", tabs: ["Regular hours", "Pre-market"], seeAll: "See all stocks with largest daily growth" }, losers: { title: "Stock losers", tabs: ["Regular hours", "Pre-market"], seeAll: "See all stocks with largest daily drop" }, earnings: { title: "Earnings Calendar", seeAll: "See all events" }, ipoCalendar: { title: "IPO Calendar", seeAll: "See all events" }, forexPerformance: { title: "Forex performance", periods: ["1D", "1W", "1M", "3M", "6M", "YTD", "1Y", "5Y", "All"], seeAll: "See all rates" }, economyBlock: { title: "Economy", href: "/markets" }, inflationMap: { title: "Global inflation map", href: "/markets", legend: "Annual inflation" }, economicCalendar: { title: "Economic Calendar", href: "/markets", seeAll: "See all market events", columns: ["Actual", "Forecast", "Prior"] }, brokers: { title: "Trading and brokers", href: "/brokers", intro: "Trade straight from your charts with brokers we have vetted and traders have rated.", open: "Open account", featured: "Featured", }, empty: "No data here yet", actual: "Actual", estimate: "Estimate", exchange: "Exchange", offerPrice: "Offer price", by: "by", loadMore: "Load more", }; export const footer = { madeBy: "Built for traders", language: "English", /** Placeholders: name your own data providers here. */ legal: [ { text: "Market data provided by ", link: { label: "your data provider", href: "#" }, after: "." }, { text: "Quotes are delayed by at least 15 minutes unless marked as real-time." }, { text: "Nothing on this site is investment advice. Trading involves risk, including the loss of your capital." }, { text: "Company filings provided by ", link: { label: "your filings provider", href: "#" }, after: "." }, { text: `© ${brand.year} ${brand.legalName}` }, ], }; export const pages = { pricing: { title: "A plan for every kind of trader", subtitle: "Start free, upgrade when the market asks for more. Cancel anytime.", billing: ["Monthly", "Yearly (save 16%)"], mostPopular: "Most popular", perMonth: "/month", billedYearly: "billed yearly", choose: "Choose plan", start: "Start for free", compare: "Compare plans", faq: "Frequently asked questions", }, markets: { title: "Markets", subtitle: "Every asset class, every region, one view.", regions: ["Entire world", "USA", "Europe", "Asia", "Middle East", "Americas", "Africa"], onThisPage: "On this page", }, ideas: { title: "Community ideas", subtitle: "Analysis, forecasts and scripts from traders around the world.", tabs: ["Editors' picks", "Popular", "Recent", "Education", "Videos"], filters: ["All", "Stocks", "Crypto", "Forex", "Futures", "Indices"], }, brokers: { title: "Brokers", subtitle: "Trade from the chart with a broker we have verified and traders have reviewed.", filters: ["All", "Forex", "Crypto", "Futures", "Stocks"], compare: "Compare brokers", columns: ["Broker", "Rating", "Markets", "Min. deposit", ""], }, features: { title: `${brand.name} Charts`, subtitle: "Charting, analysis and trading on one screen, for every market you follow.", bandTitle: "See it in motion", bandSub: "Every tool, every market, at the speed of your decisions.", cta: `Try ${brand.name} Charts free`, rows: [ { title: "Charts that keep up with you", text: "Candles, bars, Renko, Kagi, point and figure, and more, on any timeframe from a second to a year. Every drawing tool you know, synced across layouts.", bullets: ["100+ built-in indicators", "Market replay on every plan", "Layouts that sync across devices"], image: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-02.png", }, { title: "Analysis in depth", text: "Volume profile, TPO, footprint and order flow sit next to the chart, not in another app. Scripts from the community extend what the platform does out of the box.", bullets: ["Volume and TPO profiles", "Thousands of community scripts", "Alerts on anything you can plot"], image: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-01.png", }, { title: "Trade where you analyze", text: "Connect a verified broker and place, move or close orders on the chart itself. Positions, orders and P&L are drawn where they happen.", bullets: ["Broker integration", "One-click order entry", "Paper trading to practice"], image: "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-04.png", }, ], }, news: { title: "News", subtitle: "What moves the markets, as it happens.", tabs: ["Top", "Stocks", "Crypto", "Forex", "Economy", "Earnings"], topStories: "Top stories", }, signin: { title: "Sign in", oauth: ["Google", "Apple", "Facebook", "X"], or: "or", email: "Email", password: "Password", submit: "Sign in", create: "Create account", forgot: "Forgot password?", continueWith: "Continue with", }, notFound: { title: "Page not found", subtitle: "The page you asked for drifted out of orbit.", cta: "Back to Earth", }, }; d1:T11841,// The mock data the data layer (lib/marketly/api.ts) serves, one export per file of the template's data/ folder. // Swap the data layer's function bodies for fetches and this file can go. // data/brokers.json export const brokers = [ { "id": "okx", "name": "OKX", "logo": { "kind": "text", "text": "✕", "bg": "#000000" }, "category": "Crypto", "rating": 4.4, "ratingLabel": "Very Good", "verified": true, "featured": true, "markets": ["Crypto", "Futures"], "minDeposit": "$0", "href": "#" }, { "id": "oanda", "name": "OANDA", "logo": { "kind": "text", "text": "O", "bg": "#1b2a4a" }, "category": "Forex", "rating": 4.5, "ratingLabel": "Great", "verified": true, "featured": false, "badge": "Best 2023", "markets": ["Forex", "Indices", "Commodities"], "minDeposit": "$0", "href": "#" }, { "id": "ninjatrader", "name": "NinjaTrader", "logo": { "kind": "text", "text": "N", "bg": "#ff5a1f" }, "category": "Futures", "rating": 4.5, "ratingLabel": "Great", "verified": true, "featured": false, "markets": ["Futures", "Forex"], "minDeposit": "$50", "href": "#" }, { "id": "forexcom", "name": "FOREX.com", "logo": { "kind": "text", "text": "F", "bg": "#1a9c5a" }, "category": "Forex", "rating": 4.5, "ratingLabel": "Great", "verified": true, "featured": false, "markets": ["Forex", "Indices", "Stocks"], "minDeposit": "$100", "href": "#" }, { "id": "tradestation", "name": "TradeStation", "logo": { "kind": "text", "text": "T", "bg": "#0f3f8a" }, "category": "Stocks", "rating": 4.3, "ratingLabel": "Very Good", "verified": true, "featured": false, "markets": ["Stocks", "Options", "Futures"], "minDeposit": "$0", "href": "#" }, { "id": "ibkr", "name": "Interactive Brokers", "logo": { "kind": "text", "text": "IB", "bg": "#d81e2c" }, "category": "Stocks", "rating": 4.2, "ratingLabel": "Very Good", "verified": true, "featured": false, "markets": ["Stocks", "Options", "Futures", "Forex", "Bonds"], "minDeposit": "$0", "href": "#" }, { "id": "bybit", "name": "Bybit", "logo": { "kind": "text", "text": "B", "bg": "#f7a600" }, "category": "Crypto", "rating": 4.3, "ratingLabel": "Very Good", "verified": true, "featured": false, "markets": ["Crypto"], "minDeposit": "$0", "href": "#" }, { "id": "pepperstone", "name": "Pepperstone", "logo": { "kind": "text", "text": "P", "bg": "#1c1c1c" }, "category": "Forex", "rating": 4.4, "ratingLabel": "Very Good", "verified": true, "featured": false, "markets": ["Forex", "Indices", "Commodities", "Crypto"], "minDeposit": "$200", "href": "#" }, { "id": "amp", "name": "AMP Futures", "logo": { "kind": "text", "text": "A", "bg": "#00529b" }, "category": "Futures", "rating": 4.1, "ratingLabel": "Good", "verified": true, "featured": false, "markets": ["Futures"], "minDeposit": "$100", "href": "#" } ]; // data/economy.json export const economy = { "inflation": [ { "id": "840", "name": "United States", "inflationPct": 2.9 }, { "id": "124", "name": "Canada", "inflationPct": 1.9 }, { "id": "484", "name": "Mexico", "inflationPct": 3.6 }, { "id": "076", "name": "Brazil", "inflationPct": 5.1 }, { "id": "032", "name": "Argentina", "inflationPct": 33.6 }, { "id": "152", "name": "Chile", "inflationPct": 4.0 }, { "id": "170", "name": "Colombia", "inflationPct": 5.2 }, { "id": "604", "name": "Peru", "inflationPct": 1.4 }, { "id": "826", "name": "United Kingdom", "inflationPct": 3.8 }, { "id": "276", "name": "Germany", "inflationPct": 2.2 }, { "id": "250", "name": "France", "inflationPct": 1.2 }, { "id": "380", "name": "Italy", "inflationPct": 1.6 }, { "id": "724", "name": "Spain", "inflationPct": 2.9 }, { "id": "620", "name": "Portugal", "inflationPct": 2.4 }, { "id": "528", "name": "Netherlands", "inflationPct": 2.7 }, { "id": "056", "name": "Belgium", "inflationPct": 2.1 }, { "id": "756", "name": "Switzerland", "inflationPct": 0.2 }, { "id": "040", "name": "Austria", "inflationPct": 4.1 }, { "id": "752", "name": "Sweden", "inflationPct": 3.2 }, { "id": "578", "name": "Norway", "inflationPct": 3.5 }, { "id": "208", "name": "Denmark", "inflationPct": 2.0 }, { "id": "246", "name": "Finland", "inflationPct": 0.6 }, { "id": "616", "name": "Poland", "inflationPct": 2.9 }, { "id": "203", "name": "Czechia", "inflationPct": 2.5 }, { "id": "348", "name": "Hungary", "inflationPct": 4.3 }, { "id": "642", "name": "Romania", "inflationPct": 9.9 }, { "id": "300", "name": "Greece", "inflationPct": 3.1 }, { "id": "792", "name": "Türkiye", "inflationPct": 33.0 }, { "id": "643", "name": "Russia", "inflationPct": 8.1 }, { "id": "804", "name": "Ukraine", "inflationPct": 13.2 }, { "id": "364", "name": "Iran", "inflationPct": 39.2 }, { "id": "682", "name": "Saudi Arabia", "inflationPct": 2.3 }, { "id": "784", "name": "United Arab Emirates", "inflationPct": 1.8 }, { "id": "818", "name": "Egypt", "inflationPct": 12.0 }, { "id": "566", "name": "Nigeria", "inflationPct": 20.1 }, { "id": "710", "name": "South Africa", "inflationPct": 3.3 }, { "id": "404", "name": "Kenya", "inflationPct": 4.6 }, { "id": "231", "name": "Ethiopia", "inflationPct": 13.9 }, { "id": "012", "name": "Algeria", "inflationPct": 3.8 }, { "id": "504", "name": "Morocco", "inflationPct": 0.3 }, { "id": "356", "name": "India", "inflationPct": 2.1 }, { "id": "586", "name": "Pakistan", "inflationPct": 3.0 }, { "id": "050", "name": "Bangladesh", "inflationPct": 8.3 }, { "id": "156", "name": "China", "inflationPct": -0.4 }, { "id": "392", "name": "Japan", "inflationPct": 2.7 }, { "id": "410", "name": "South Korea", "inflationPct": 1.7 }, { "id": "360", "name": "Indonesia", "inflationPct": 2.3 }, { "id": "764", "name": "Thailand", "inflationPct": -0.8 }, { "id": "704", "name": "Vietnam", "inflationPct": 3.2 }, { "id": "608", "name": "Philippines", "inflationPct": 1.5 }, { "id": "458", "name": "Malaysia", "inflationPct": 1.3 }, { "id": "036", "name": "Australia", "inflationPct": 3.0 }, { "id": "554", "name": "New Zealand", "inflationPct": 2.7 }, { "id": "398", "name": "Kazakhstan", "inflationPct": 12.2 }, { "id": "860", "name": "Uzbekistan", "inflationPct": 8.8 }, { "id": "368", "name": "Iraq", "inflationPct": 2.8 }, { "id": "376", "name": "Israel", "inflationPct": 2.9 }, { "id": "862", "name": "Venezuela", "inflationPct": 180.0 }, { "id": "068", "name": "Bolivia", "inflationPct": 23.3 }, { "id": "858", "name": "Uruguay", "inflationPct": 4.3 }, { "id": "600", "name": "Paraguay", "inflationPct": 4.1 }, { "id": "218", "name": "Ecuador", "inflationPct": 1.4 }, { "id": "408", "name": "North Korea", "inflationPct": 0 }, { "id": "104", "name": "Myanmar", "inflationPct": 25.0 }, { "id": "024", "name": "Angola", "inflationPct": 19.2 }, { "id": "834", "name": "Tanzania", "inflationPct": 3.4 }, { "id": "288", "name": "Ghana", "inflationPct": 11.5 }, { "id": "180", "name": "DR Congo", "inflationPct": 8.4 }, { "id": "729", "name": "Sudan", "inflationPct": 118.0 }, { "id": "434", "name": "Libya", "inflationPct": 2.1 }, { "id": "496", "name": "Mongolia", "inflationPct": 7.9 }, { "id": "004", "name": "Afghanistan", "inflationPct": -5.1 }, { "id": "352", "name": "Iceland", "inflationPct": 4.2 }, { "id": "372", "name": "Ireland", "inflationPct": 2.0 }, { "id": "428", "name": "Latvia", "inflationPct": 4.0 }, { "id": "440", "name": "Lithuania", "inflationPct": 3.7 }, { "id": "233", "name": "Estonia", "inflationPct": 5.2 }, { "id": "112", "name": "Belarus", "inflationPct": 7.0 }, { "id": "688", "name": "Serbia", "inflationPct": 4.5 }, { "id": "191", "name": "Croatia", "inflationPct": 4.1 }, { "id": "100", "name": "Bulgaria", "inflationPct": 5.3 } ], "calendar": [ { "id": "e1", "day": "Today", "time": "08:30", "country": "us", "event": "Nonfarm Payrolls (Sep)", "importance": 3, "actual": null, "forecast": "52K", "prior": "22K" }, { "id": "e2", "day": "Today", "time": "08:30", "country": "us", "event": "Unemployment Rate (Sep)", "importance": 3, "actual": null, "forecast": "4.3%", "prior": "4.3%" }, { "id": "e3", "day": "Today", "time": "10:00", "country": "us", "event": "ISM Services PMI (Sep)", "importance": 2, "actual": null, "forecast": "51.7", "prior": "52.0" }, { "id": "e4", "day": "Today", "time": "09:00", "country": "eu", "event": "ECB President Lagarde speaks", "importance": 2, "actual": null, "forecast": null, "prior": null }, { "id": "e5", "day": "Today", "time": "04:30", "country": "gb", "event": "Services PMI Final (Sep)", "importance": 1, "actual": "50.8", "forecast": "51.9", "prior": "51.9" }, { "id": "e6", "day": "Tomorrow", "time": "09:30", "country": "au", "event": "RBA Interest Rate Decision", "importance": 3, "actual": null, "forecast": "3.85%", "prior": "3.60%" }, { "id": "e7", "day": "Tomorrow", "time": "19:50", "country": "jp", "event": "Household Spending YoY (Aug)", "importance": 1, "actual": null, "forecast": "1.2%", "prior": "1.4%" }, { "id": "e8", "day": "Tomorrow", "time": "02:00", "country": "de", "event": "Factory Orders MoM (Aug)", "importance": 2, "actual": null, "forecast": "1.3%", "prior": "-2.9%" } ] }; // data/ideas.json export const ideas = { "community": { "editorsPicks": [ { "id": "idea-1", "kind": "idea", "editorsPick": true, "boosts": 412, "comments": 38, "publishedAt": "2026-10-01T06:10:00Z", "title": "MU: record memory sales, a sleepy stock", "excerpt": "Micron just posted a record quarter and the stock barely moved. Memory prices are firm and high-bandwidth memory is sold out into next year, yet price keeps hugging the 20-day average. Here's what that usually means.", "author": "Marketly", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-01.png", "symbols": [{ "kind": "text", "text": "MU", "bg": "#1f3a7a" }] }, { "id": "idea-2", "kind": "idea", "editorsPick": true, "boosts": 286, "comments": 21, "publishedAt": "2026-10-01T04:40:00Z", "title": "AUD/USD: a rate hike the market shrugged off", "excerpt": "The RBA raised rates by 25 bps and the Aussie still slipped. With US yields holding firm, carry keeps favoring the dollar. The level to watch is 0.6480.", "author": "AussieDesk", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-02.png", "symbols": [{ "kind": "flags", "countries": ["au", "us"] }] }, { "id": "idea-3", "kind": "idea", "editorsPick": true, "boosts": 198, "comments": 17, "publishedAt": "2026-09-30T21:15:00Z", "title": "EUR/USD: stretched at a yearly low", "excerpt": "The dollar rally has pushed DXY toward resistance at 101.80, and EUR/USD now shows its most oversold daily RSI in months. Moves this stretched rarely last, but they can run further than you think.", "author": "EuroWatch", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-03.png", "symbols": [{ "kind": "flags", "countries": ["eu", "us"] }] }, { "id": "idea-4", "kind": "idea", "editorsPick": true, "boosts": 171, "comments": 9, "publishedAt": "2026-09-30T18:00:00Z", "title": "Gold: the breakout nobody wanted to chase", "excerpt": "Gold cleared 3,800 with barely a pullback. Positioning is crowded, but every dip since July has been bought within two sessions. A measured move from the summer base points to 4,050.", "author": "Marketly", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-04.png", "symbols": [{ "kind": "icon", "icon": "gold", "bg": "#e0a200" }] }, { "id": "idea-5", "kind": "idea", "editorsPick": true, "boosts": 143, "comments": 12, "publishedAt": "2026-09-30T15:30:00Z", "title": "NVDA: consolidation under the all-time high, again", "excerpt": "Third week inside a tight range below 190. Volume is drying up, which is what you want to see before a continuation. Invalidation is a daily close under 176.", "author": "ChartMind", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-05.png", "symbols": [{ "kind": "text", "text": "NV", "bg": "#76b900" }] }, { "id": "idea-6", "kind": "idea", "editorsPick": true, "boosts": 120, "comments": 6, "publishedAt": "2026-09-30T12:00:00Z", "title": "BTC: 110k is the line in the sand", "excerpt": "Bitcoin reclaimed the weekly open after a shallow dip to 109,800. Funding reset to neutral, open interest flushed. The structure favors a retest of the highs as long as 110k holds on a daily close.", "author": "CryptoCartographer", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-06.png", "symbols": [{ "kind": "text", "text": "₿", "bg": "#f7931a" }] } ], "popular": [ { "id": "idea-7", "kind": "idea", "editorsPick": false, "boosts": 1204, "comments": 211, "publishedAt": "2026-09-29T09:00:00Z", "title": "TSLA: the wedge that decides Q4", "excerpt": "A rising wedge into robotaxi headlines. Either the market pays for the story or the pattern resolves lower. Levels: 430 resistance, 395 support, 368 invalidation.", "author": "WaveRider", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-07.png", "symbols": [{ "kind": "text", "text": "T", "bg": "#e82127" }] }, { "id": "idea-8", "kind": "idea", "editorsPick": false, "boosts": 988, "comments": 143, "publishedAt": "2026-09-29T07:30:00Z", "title": "ETH/BTC: the ratio turns", "excerpt": "ETH/BTC printed its first higher high on the weekly since 2023. Rotation trades take time, but the ratio chart rarely lies this early in a cycle.", "author": "LayerTwo", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-08.png", "symbols": [{ "kind": "text", "text": "Ξ", "bg": "#5b6ad0" }, { "kind": "text", "text": "₿", "bg": "#f7931a" }] }, { "id": "idea-9", "kind": "idea", "editorsPick": false, "boosts": 802, "comments": 97, "publishedAt": "2026-09-28T20:00:00Z", "title": "USD/JPY: 150 and the intervention zone", "excerpt": "Every approach to 150 since 2022 has met official pushback. Price is there again. Short-dated vols are rising, which is the market saying it remembers.", "author": "MacroMatt", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-09.png", "symbols": [{ "kind": "flags", "countries": ["us", "jp"] }] } ] }, "indicators": { "editorsPicks": [ { "id": "ind-1", "kind": "indicator", "editorsPick": true, "boosts": 2310, "comments": 164, "publishedAt": "2026-09-27T10:00:00Z", "title": "Adaptive Trailing Stop", "excerpt": "A trailing stop that switches between ATR, percentage and swing modes for each market. The guide walks through every mode and how to tune it for your timeframe.", "author": "StopLogic", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-04.png", "symbols": [{ "kind": "text", "text": "A", "bg": "#f23645" }] }, { "id": "ind-2", "kind": "indicator", "editorsPick": true, "boosts": 1876, "comments": 120, "publishedAt": "2026-09-26T14:00:00Z", "title": "Conviction Trend Ribbon", "excerpt": "A moving-average ribbon that colors by trend strength and projects targets from the latest swing, with risk-to-reward levels drawn right on the chart.", "author": "RibbonWorks", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-05.png", "symbols": [{ "kind": "text", "text": "C", "bg": "#089981" }] }, { "id": "ind-3", "kind": "strategy", "editorsPick": true, "boosts": 1402, "comments": 88, "publishedAt": "2026-09-25T09:00:00Z", "title": "Wyckoff Phase Mapper", "excerpt": "Marks Wyckoff accumulation and distribution phases as they form, labels each event on the chart, and alerts you when a spring or an upthrust appears.", "author": "PhaseFinder", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-06.png", "symbols": [{ "kind": "text", "text": "W", "bg": "#2962ff" }] } ], "popular": [ { "id": "ind-4", "kind": "indicator", "editorsPick": false, "boosts": 5120, "comments": 402, "publishedAt": "2026-09-20T09:00:00Z", "title": "Volume Profile Visible Range Pro", "excerpt": "A visible-range volume profile with value area, POC and naked levels carried forward. Fast on intraday charts, configurable row count and alerts for POC touches.", "author": "ProfileLabs", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-07.png", "symbols": [{ "kind": "text", "text": "V", "bg": "#9c27b0" }] }, { "id": "ind-5", "kind": "strategy", "editorsPick": false, "boosts": 3980, "comments": 310, "publishedAt": "2026-09-19T09:00:00Z", "title": "Mean Reversion Bands Strategy", "excerpt": "Enters against two-sigma extensions with a volatility filter and exits at the mean. Backtested across 40 liquid symbols; parameters are exposed for walk-forward testing.", "author": "QuantNook", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-08.png", "symbols": [{ "kind": "text", "text": "M", "bg": "#00bcd4" }] }, { "id": "ind-6", "kind": "indicator", "editorsPick": false, "boosts": 2744, "comments": 199, "publishedAt": "2026-09-18T09:00:00Z", "title": "Session Levels & Opening Range", "excerpt": "Plots Asia, London and New York session highs and lows, the opening range and its extensions. Everything is toggleable, nothing repaints.", "author": "SessionCraft", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-09.png", "symbols": [{ "kind": "text", "text": "S", "bg": "#ff9800" }] } ] } }; // data/ipos.json export const ipos = [ { "symbol": { "ticker": "ANTHROPIC", "name": "Anthropic PBC", "logo": { "kind": "text", "text": "A", "bg": "#d97757" } }, "exchange": "NASDAQ", "offerPrice": null, "date": "2026-10-14" }, { "symbol": { "ticker": "OPENAI", "name": "OpenAI Group", "logo": { "kind": "text", "text": "O", "bg": "#0f0f0f" } }, "exchange": "NYSE", "offerPrice": null, "date": "2026-10-16" }, { "symbol": { "ticker": "ANDURIL", "name": "Anduril Industries", "logo": { "kind": "text", "text": "AN", "bg": "#2e2e2e" } }, "exchange": "NYSE", "offerPrice": "48.00 USD", "date": "2026-10-21" }, { "symbol": { "ticker": "REVOLUT", "name": "Revolut Ltd.", "logo": { "kind": "text", "text": "R", "bg": "#191c1f" } }, "exchange": "LSE", "offerPrice": "—", "date": "2026-10-23" }, { "symbol": { "ticker": "STRIPE", "name": "Stripe, Inc.", "logo": { "kind": "text", "text": "S", "bg": "#635bff" } }, "exchange": "NASDAQ", "offerPrice": null, "date": "2026-10-28" }, { "symbol": { "ticker": "DATABRICKS", "name": "Databricks, Inc.", "logo": { "kind": "text", "text": "D", "bg": "#ff3621" } }, "exchange": "NASDAQ", "offerPrice": "92.00 USD", "date": "2026-11-04" }, { "symbol": { "ticker": "CANVA", "name": "Canva Pty Ltd", "logo": { "kind": "text", "text": "C", "bg": "#00c4cc" } }, "exchange": "NASDAQ", "offerPrice": null, "date": "2026-11-06" }, { "symbol": { "ticker": "SHEIN", "name": "Shein Group", "logo": { "kind": "text", "text": "SH", "bg": "#0f0f0f" } }, "exchange": "HKEX", "offerPrice": "—", "date": "2026-11-12" } ]; // data/market-summary.json export const marketSummary = { "hero": { "ticker": "SPX", "name": "S&P 500", "logo": { "kind": "text", "text": "500", "bg": "#cc2f3c" }, "price": 6712.2, "changePct": 0.41, "spark": [6696.79, 6698.14, 6701.64, 6705.73, 6709.91, 6713.76, 6715.62, 6715.35, 6713.03, 6709.7, 6707.78, 6708.26, 6707.14, 6705.47, 6704.16, 6702.74, 6700.6, 6700.34, 6697.98, 6697.65, 6696.12, 6695.58, 6692.08, 6690.59, 6685.5, 6685.14, 6684.26, 6682.86, 6682.32, 6681.91, 6683.4, 6679.52, 6680.32, 6676.66, 6677.63, 6677.24, 6673.57, 6670.4, 6670.57, 6673.07, 6671.08, 6669.78, 6673.92, 6675.48, 6677.75, 6677.32, 6676.42, 6678.79, 6677.61, 6679.34, 6677.88, 6677.18, 6677.66, 6680.64, 6674.76, 6673, 6670.58, 6668.45, 6671.8, 6670.16, 6670, 6665.62, 6663.74, 6666.38, 6667.14, 6668.09, 6663.95, 6663.92, 6665.98, 6664.59, 6664.63, 6663.92, 6667.01, 6666.35, 6668.81, 6671.81, 6668.43, 6667.17, 6669.52, 6671.2, 6673.5, 6672.68, 6669.95, 6671.08, 6674.34, 6674.69, 6676.33, 6680.62, 6678.56, 6680.07, 6677.95, 6675.63, 6679.01, 6680.09, 6678.92, 6679.97, 6681.64, 6681.95, 6680.59, 6682.38, 6681.85, 6684.67, 6684.25, 6685.24, 6683.43, 6685.92, 6685.67, 6684, 6682.35, 6682.15, 6682.4, 6683.73, 6683.93, 6686.28, 6683.3, 6684.77, 6682.99, 6681.65, 6682.94, 6684.49, 6685.67, 6688.81, 6688.34, 6692.79, 6696.17, 6695.66, 6696.17, 6696.95, 6695.61, 6695.33, 6695.48, 6702.92, 6707.68, 6708.45, 6711.63, 6716.14, 6718.6, 6719.42, 6717.15, 6716.38, 6716.11, 6711.12, 6708.07, 6707.93, 6703.98, 6703.6, 6703.53, 6700.71, 6695.61, 6696.73, 6691.96, 6691.7, 6691.42, 6690.2, 6692.09, 6693.22, 6694.3, 6695.93, 6698, 6701.58, 6704.75, 6706.83, 6707.44, 6704.32, 6709.12, 6710.86, 6711.47, 6711.63, 6711.84, 6711.81, 6712.2, 6712.11, 6713.13, 6714.32, 6715.97, 6717.77, 6717.16, 6713.36, 6712.28, 6708.72, 6707.4, 6708.33, 6709.88, 6711.53, 6709.76, 6710.14, 6710.8, 6711.49, 6711.66, 6711.17, 6711.27, 6712.13, 6712.39, 6712.38, 6712.38, 6712.2], "unit": "POINT", "delayed": true, "marketOpen": true, "session": { "start": "16:30", "stepMinutes": 2 } }, "majorIndices": [ { "ticker": "NDX", "name": "Nasdaq 100", "logo": { "kind": "text", "text": "100", "bg": "#0b7bd8" }, "price": 24731.5, "changePct": 0.62, "unit": "POINT", "delayed": true }, { "ticker": "NI225", "name": "Japan 225", "logo": { "kind": "text", "text": "225", "bg": "#1f3a7a" }, "price": 44932.6, "changePct": -0.18, "unit": "JPY", "delayed": false }, { "ticker": "000001", "name": "SSE Composite", "logo": { "kind": "text", "text": "SSE", "bg": "#1f1f1f" }, "price": 3882.8, "changePct": 0.52, "unit": "POINT", "delayed": true }, { "ticker": "UKX", "name": "FTSE 100", "logo": { "kind": "text", "text": "100", "bg": "#1e4a8c" }, "price": 9428.3, "changePct": 0.27, "unit": "POINT", "delayed": true }, { "ticker": "DAX", "name": "DAX", "logo": { "kind": "text", "text": "X", "bg": "#0a66c2" }, "price": 24118.1, "changePct": -0.34, "unit": "POINT", "delayed": true }, { "ticker": "PX1", "name": "CAC 40", "logo": { "kind": "text", "text": "40", "bg": "#1a9c5a" }, "price": 7975.4, "changePct": 0.11, "unit": "POINT", "delayed": true } ], "trio": [ { "ticker": "TOTAL", "name": "Crypto market cap", "logo": { "kind": "icon", "icon": "globe", "bg": "#2962ff" }, "changePct": 8.43, "spark": [3.735, 3.737, 3.742, 3.742, 3.748, 3.755, 3.757, 3.76, 3.757, 3.757, 3.757, 3.767, 3.767, 3.775, 3.764, 3.746, 3.767, 3.746, 3.755, 3.758, 3.759, 3.776, 3.756, 3.752, 3.747, 3.74, 3.741, 3.743, 3.748, 3.757, 3.749, 3.737, 3.733, 3.722, 3.721, 3.7, 3.713, 3.699, 3.706, 3.715, 3.717, 3.714, 3.71, 3.701, 3.691, 3.677, 3.695, 3.69, 3.7, 3.717, 3.712, 3.709, 3.697, 3.706, 3.698, 3.693, 3.704, 3.722, 3.745, 3.741, 3.766, 3.777, 3.787, 3.779, 3.779, 3.813, 3.821, 3.845, 3.859, 3.865, 3.88, 3.879, 3.857, 3.892, 3.916, 3.949, 3.942, 3.97, 3.989, 3.985, 4, 4.01, 4.002, 4.004, 4.014, 4.005, 4.005, 4.007, 3.981, 3.983, 3.976, 3.971, 3.991, 3.997, 3.998, 3.987, 3.99, 4.018, 4.028, 4.041, 4.039, 4.024, 4.021, 4.008, 4.032, 4.035, 4.018, 4.027, 4.042, 4.058, 4.073, 4.058, 4.05, 4.043, 4.045, 4.045, 4.046, 4.046, 4.046, 4.05], "unit": "T USD", "digits": 2, "price": 4.05 }, { "ticker": "DXY", "name": "US Dollar index", "logo": { "kind": "icon", "icon": "dollar", "bg": "#089950" }, "changePct": 2.39, "spark": [96.123, 96.12, 96.116, 96.139, 96.144, 96.179, 96.188, 96.216, 96.232, 96.273, 96.322, 96.364, 96.333, 96.252, 96.193, 96.259, 96.287, 96.241, 96.163, 96.091, 96.136, 96.104, 96.042, 95.919, 95.939, 96.017, 95.982, 96.028, 96.05, 95.986, 95.925, 95.961, 96.059, 96.045, 96.045, 96.036, 96.021, 96.079, 96.054, 96.055, 96.065, 96.084, 96.108, 96.199, 96.313, 96.33, 96.376, 96.515, 96.559, 96.562, 96.602, 96.67, 96.69, 96.658, 96.631, 96.619, 96.66, 96.619, 96.604, 96.654, 96.71, 96.861, 96.822, 96.885, 96.97, 97.018, 96.928, 97.001, 97.032, 97.024, 97.084, 97.18, 97.153, 97.189, 97.199, 97.162, 97.261, 97.359, 97.365, 97.45, 97.49, 97.404, 97.362, 97.385, 97.413, 97.464, 97.361, 97.376, 97.44, 97.345, 97.437, 97.386, 97.41, 97.511, 97.59, 97.494, 97.586, 97.52, 97.531, 97.593, 97.589, 97.656, 97.672, 97.783, 97.836, 97.945, 98.038, 98.014, 98.126, 98.157, 98.16, 98.203, 98.147, 98.147, 98.17, 98.263, 98.331, 98.399, 98.413, 98.42], "unit": "USD", "digits": 3, "price": 98.42 }, { "ticker": "US10Y", "name": "US 10Y yield", "logo": { "kind": "flag", "country": "us" }, "changePct": 11.1, "spark": [3.738, 3.738, 3.737, 3.738, 3.739, 3.745, 3.745, 3.756, 3.763, 3.772, 3.763, 3.76, 3.761, 3.759, 3.761, 3.771, 3.768, 3.764, 3.765, 3.761, 3.762, 3.765, 3.761, 3.747, 3.761, 3.742, 3.744, 3.739, 3.749, 3.744, 3.75, 3.746, 3.738, 3.752, 3.756, 3.769, 3.769, 3.764, 3.774, 3.772, 3.775, 3.8, 3.788, 3.793, 3.794, 3.793, 3.814, 3.817, 3.805, 3.802, 3.815, 3.806, 3.824, 3.829, 3.837, 3.842, 3.843, 3.851, 3.839, 3.833, 3.836, 3.834, 3.835, 3.839, 3.829, 3.838, 3.833, 3.832, 3.823, 3.84, 3.834, 3.845, 3.859, 3.853, 3.86, 3.875, 3.891, 3.913, 3.915, 3.929, 3.946, 3.964, 3.963, 3.988, 3.99, 4.002, 4.001, 4, 4.011, 4.019, 4.033, 4.02, 4.023, 4.038, 4.043, 4.042, 4.04, 4.048, 4.047, 4.04, 4.054, 4.072, 4.084, 4.11, 4.112, 4.125, 4.134, 4.139, 4.144, 4.15, 4.152, 4.151, 4.139, 4.143, 4.141, 4.142, 4.146, 4.146, 4.151, 4.153], "unit": "%", "digits": 3, "price": 4.153 } ], "dominance": [ { "label": "Bitcoin", "pct": 57.83, "color": "bitcoin" }, { "label": "Ethereum", "pct": 13.12, "color": "ethereum" }, { "label": "Others", "pct": 29.05, "color": "others" } ], "crypto": [ { "ticker": "BTCUSD", "name": "Bitcoin", "logo": { "kind": "text", "text": "₿", "bg": "#f7931a" }, "price": 117420, "changePct": 2.1, "unit": "USD" }, { "ticker": "ETHUSD", "name": "Ethereum", "logo": { "kind": "text", "text": "Ξ", "bg": "#5b6ad0" }, "price": 4215.6, "changePct": 3.4, "unit": "USD" } ], "commodities": [ { "ticker": "CL1!", "name": "Light crude oil", "logo": { "kind": "icon", "icon": "droplet", "bg": "#0f0f0f" }, "price": 62.41, "changePct": -0.8, "unit": "USD / barrel", "delayed": true }, { "ticker": "NG1!", "name": "Natural gas", "logo": { "kind": "icon", "icon": "flame", "bg": "#2a8df5" }, "price": 3.31, "changePct": 1.2, "unit": "USD / million BTUs", "delayed": true, "digits": 3 }, { "ticker": "GC1!", "name": "Gold", "logo": { "kind": "icon", "icon": "gold", "bg": "#e0a200" }, "price": 3871.2, "changePct": 0.6, "unit": "USD / troy ounce", "delayed": true }, { "ticker": "HG1!", "name": "Copper", "logo": { "kind": "icon", "icon": "copper", "bg": "#c2572b" }, "price": 4.86, "changePct": -0.3, "unit": "USD / pound", "delayed": true, "digits": 4 } ], "inflation": { "symbol": { "ticker": "USIRYY", "name": "US annual inflation rate", "price": 2.9, "changePct": 0 }, "bars": [3, 3.1, 2.8, 2.8, 2.5, 2.5, 3.3, 3.8, 4.2, 3.5, 3.4, 3.4], "rateLabel": "US interest rate", "stats": [ { "label": "Actual", "value": "4.25%" }, { "label": "Forecast", "value": "—" }, { "label": "Next release", "value": "Oct 28, 2026" } ], "yMax": 4, "yTicks": [ "4%", "2%", "0%" ], "xTicks": [ { "at": 0, "label": "Sep" }, { "at": 4, "label": "2026", "strong": true }, { "at": 7, "label": "Apr" }, { "at": 10, "label": "Jul" } ] } }; // data/markets/crypto.json export const crypto = { "id": "crypto", "title": "Crypto", "href": "/markets", "icon": { "kind": "text", "text": "₿", "bg": "#f7931a" }, "trends": [ { "ticker": "MOVRUSDT.P", "name": "MOVR / TetherUS PERPETUAL CONTRACT", "logo": { "kind": "text", "text": "M", "bg": "#53cbc8" } }, { "ticker": "STXUSDT", "name": "Stacks / TetherUS", "logo": { "kind": "text", "text": "S", "bg": "#fc6432" } }, { "ticker": "MONUSDT.P", "name": "MON / TetherUS PERPETUAL CONTRACT", "logo": { "kind": "text", "text": "◆", "bg": "#836ef9" } }, { "ticker": "NIGHTUSDT.P", "name": "NIGHT / TetherUS PERPETUAL CONTRACT", "logo": { "kind": "text", "text": "N", "bg": "#0f0f0f" } }, { "ticker": "FETUSDT", "name": "Fetch.AI / TetherUS", "logo": { "kind": "text", "text": "F", "bg": "#1f2a7a" } } ], "ideas": [ { "id": "cr-i1", "kind": "idea", "editorsPick": false, "boosts": 322, "comments": 44, "publishedAt": "2026-10-01T05:30:00Z", "direction": "long", "title": "BTC: holding the 114k shelf", "excerpt": "Bitcoin keeps closing above the 114k shelf after a sharp rejection from the highs. While that floor holds, the range favors another run at 118k; a daily close below it opens the way to 111k.", "author": "ClearCharts", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-04.png", "symbols": [{ "kind": "text", "text": "₿", "bg": "#f7931a" }] }, { "id": "cr-i2", "kind": "idea", "editorsPick": false, "boosts": 211, "comments": 19, "publishedAt": "2026-10-01T02:30:00Z", "direction": "long", "title": "ETH/USDT: a pause inside the uptrend", "excerpt": "Ether has spent two weeks between 4,100 and 4,300 without losing its higher lows. A break above the range targets the previous high; below 4,100 the pause turns into a deeper pullback.", "author": "RangeRider", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-05.png", "symbols": [{ "kind": "text", "text": "Ξ", "bg": "#5b6ad0" }] }, { "id": "cr-i3", "kind": "idea", "editorsPick": false, "boosts": 148, "comments": 11, "publishedAt": "2026-09-30T21:30:00Z", "direction": "short", "title": "BTC: sellers defend the highs again", "excerpt": "On the hourly chart the supply zone near the highs held for a third time and the short-term trend has turned down. A retest of 112k looks likely before buyers try again.", "author": "TrendTeller", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-06.png", "symbols": [{ "kind": "text", "text": "₿", "bg": "#f7931a" }] } ], "lists": [ { "title": "Crypto gainers", "href": "/markets", "rows": [ { "ticker": "MOVRUSDT", "name": "Moonriver", "logo": { "kind": "text", "text": "M", "bg": "#53cbc8" }, "changePct": 42.1 }, { "ticker": "STXUSDT", "name": "Stacks", "logo": { "kind": "text", "text": "S", "bg": "#fc6432" }, "changePct": 18.4 }, { "ticker": "FETUSDT", "name": "Fetch.AI", "logo": { "kind": "text", "text": "F", "bg": "#1f2a7a" }, "changePct": 12.9 }, { "ticker": "RENDERUSDT", "name": "Render", "logo": { "kind": "text", "text": "R", "bg": "#0f0f0f" }, "changePct": 9.7 }, { "ticker": "INJUSDT", "name": "Injective", "logo": { "kind": "text", "text": "I", "bg": "#00f2fe", "fg": "#0f0f0f" }, "changePct": 8.1 }, { "ticker": "SUIUSDT", "name": "Sui", "logo": { "kind": "text", "text": "S", "bg": "#4da2ff" }, "changePct": 6.3 } ], "seeAll": { "label": "See all crypto gainers", "href": "/markets" } }, { "title": "Crypto losers", "href": "/markets", "rows": [ { "ticker": "NIGHTUSDT", "name": "Midnight", "logo": { "kind": "text", "text": "N", "bg": "#0f0f0f" }, "changePct": -21.6 }, { "ticker": "MONUSDT", "name": "Monad", "logo": { "kind": "text", "text": "◆", "bg": "#836ef9" }, "changePct": -14.2 }, { "ticker": "PEPEUSDT", "name": "Pepe", "logo": { "kind": "text", "text": "P", "bg": "#3d8a2e" }, "changePct": -9.8 }, { "ticker": "WIFUSDT", "name": "dogwifhat", "logo": { "kind": "text", "text": "W", "bg": "#b5835a" }, "changePct": -7.4 }, { "ticker": "ARBUSDT", "name": "Arbitrum", "logo": { "kind": "text", "text": "A", "bg": "#2d374b" }, "changePct": -5.1 }, { "ticker": "OPUSDT", "name": "Optimism", "logo": { "kind": "text", "text": "OP", "bg": "#ff0420" }, "changePct": -4.6 } ], "seeAll": { "label": "See all crypto losers", "href": "/markets" } } ], "newsTitle": "Crypto news", "news": [] }; // data/markets/forex.json export const forex = { "id": "forex", "title": "Forex and currencies", "href": "/markets", "icon": { "kind": "icon", "icon": "globe", "bg": "#2962ff" }, "trends": [ { "ticker": "EURUSD", "name": "Euro / U.S. Dollar", "logo": { "kind": "flags", "countries": ["eu", "us"] } }, { "ticker": "USDJPY", "name": "U.S. Dollar / Japanese Yen", "logo": { "kind": "flags", "countries": ["us", "jp"] } }, { "ticker": "GBPUSD", "name": "British Pound / U.S. Dollar", "logo": { "kind": "flags", "countries": ["gb", "us"] } }, { "ticker": "AUDUSD", "name": "Australian Dollar / U.S. Dollar", "logo": { "kind": "flags", "countries": ["au", "us"] } }, { "ticker": "USDCHF", "name": "U.S. Dollar / Swiss Franc", "logo": { "kind": "flags", "countries": ["us", "ch"] } } ], "ideas": [ { "id": "fx-i1", "kind": "idea", "editorsPick": false, "boosts": 203, "comments": 27, "publishedAt": "2026-10-01T05:20:00Z", "direction": "short", "title": "EUR/USD: the trendline finally gave way", "excerpt": "Six touches since April and now a daily close below. Measured move points to 1.1480; a close back above 1.1720 would invalidate.", "author": "PipPatrol", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-01.png", "symbols": [{ "kind": "flags", "countries": ["eu", "us"] }] }, { "id": "fx-i2", "kind": "idea", "editorsPick": false, "boosts": 141, "comments": 16, "publishedAt": "2026-10-01T02:20:00Z", "direction": "long", "title": "USD/JPY: buying the dip into 147.50", "excerpt": "Rate differentials still favor the dollar and the BOJ is in no hurry. Expect intervention chatter near 150, but structure is higher lows all the way up.", "author": "TokyoTape", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-02.png", "symbols": [{ "kind": "flags", "countries": ["us", "jp"] }] }, { "id": "fx-i3", "kind": "idea", "editorsPick": false, "boosts": 96, "comments": 9, "publishedAt": "2026-09-30T19:50:00Z", "direction": "long", "title": "GBP/USD: a base forming above 1.33", "excerpt": "Cable absorbed the gilt volatility without breaking the weekly support. Looking for a reclaim of 1.3450 to confirm the base.", "author": "CableCartel", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-03.png", "symbols": [{ "kind": "flags", "countries": ["gb", "us"] }] } ], "lists": [], "performance": [ { "symbol": { "ticker": "EURUSD", "name": "Euro / U.S. Dollar", "logo": { "kind": "flags", "countries": ["eu", "us"] } }, "byPeriod": { "1D": -0.41, "1W": -1.2, "1M": -2.3, "3M": -0.8, "6M": 4.1, "YTD": 12.4, "1Y": 6.2, "5Y": -0.9, "All": 32.1 } }, { "symbol": { "ticker": "JPYUSD", "name": "Japanese Yen / U.S. Dollar", "logo": { "kind": "flags", "countries": ["jp", "us"] } }, "byPeriod": { "1D": -0.54, "1W": -0.9, "1M": -1.8, "3M": -2.6, "6M": 1.2, "YTD": 5.1, "1Y": -2.3, "5Y": -28.4, "All": -42.0 } }, { "symbol": { "ticker": "GBPUSD", "name": "British Pound / U.S. Dollar", "logo": { "kind": "flags", "countries": ["gb", "us"] } }, "byPeriod": { "1D": -0.35, "1W": -0.7, "1M": -1.1, "3M": 0.4, "6M": 3.8, "YTD": 7.6, "1Y": 1.9, "5Y": 4.2, "All": -18.5 } }, { "symbol": { "ticker": "AUDUSD", "name": "Australian Dollar / U.S. Dollar", "logo": { "kind": "flags", "countries": ["au", "us"] } }, "byPeriod": { "1D": -0.03, "1W": 0.6, "1M": 1.2, "3M": 2.1, "6M": 6.4, "YTD": 7.0, "1Y": -3.1, "5Y": -7.8, "All": -12.6 } }, { "symbol": { "ticker": "CHFUSD", "name": "Swiss Franc / U.S. Dollar", "logo": { "kind": "flags", "countries": ["ch", "us"] } }, "byPeriod": { "1D": -0.07, "1W": -0.3, "1M": -0.6, "3M": 1.1, "6M": 5.9, "YTD": 13.8, "1Y": 6.9, "5Y": 15.4, "All": 48.2 } }, { "symbol": { "ticker": "CADUSD", "name": "Canadian Dollar / U.S. Dollar", "logo": { "kind": "flags", "countries": ["ca", "us"] } }, "byPeriod": { "1D": -0.1, "1W": -0.4, "1M": -0.9, "3M": -1.4, "6M": 2.6, "YTD": 3.4, "1Y": -2.8, "5Y": -4.6, "All": -9.1 } }, { "symbol": { "ticker": "NZDUSD", "name": "New Zealand Dollar / U.S. Dollar", "logo": { "kind": "flags", "countries": ["nz", "us"] } }, "byPeriod": { "1D": -0.44, "1W": -1.1, "1M": -2.2, "3M": -3.0, "6M": 1.4, "YTD": 3.2, "1Y": -8.4, "5Y": -12.7, "All": -16.3 } }, { "symbol": { "ticker": "CNYUSD", "name": "Chinese Yuan / U.S. Dollar", "logo": { "kind": "flags", "countries": ["cn", "us"] } }, "byPeriod": { "1D": 0.0, "1W": 0.2, "1M": 0.5, "3M": 1.3, "6M": 2.4, "YTD": 2.6, "1Y": 1.1, "5Y": -4.9, "All": -14.2 } } ], "newsTitle": "Forex news", "news": [] }; // data/markets/futures.json export const futures = { "id": "futures", "title": "Futures and commodities", "href": "/markets", "icon": { "kind": "icon", "icon": "barrel", "bg": "#3d3d3d" }, "trends": [ { "ticker": "GC1!", "name": "Gold Futures", "logo": { "kind": "icon", "icon": "gold", "bg": "#e0a200" } }, { "ticker": "CL1!", "name": "Light Crude Oil Futures", "logo": { "kind": "icon", "icon": "droplet", "bg": "#0f0f0f" } }, { "ticker": "ES1!", "name": "E-mini S&P 500 Futures", "logo": { "kind": "text", "text": "500", "bg": "#cc2f3c" } }, { "ticker": "NG1!", "name": "Natural Gas Futures", "logo": { "kind": "icon", "icon": "flame", "bg": "#2a8df5" } }, { "ticker": "SI1!", "name": "Silver Futures", "logo": { "kind": "text", "text": "Ag", "bg": "#9c9c9c" } } ], "ideas": [ { "id": "fu-i1", "kind": "idea", "editorsPick": false, "boosts": 176, "comments": 22, "publishedAt": "2026-10-01T05:40:00Z", "direction": "long", "title": "Gold: 4,000 is a magnet, not a ceiling", "excerpt": "Momentum has not diverged once since the summer breakout. Pullbacks to the 10-day have been bought every time. Target 4,050, then reassess.", "author": "MetalsDesk", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-07.png", "symbols": [{ "kind": "icon", "icon": "gold", "bg": "#e0a200" }] }, { "id": "fu-i2", "kind": "idea", "editorsPick": false, "boosts": 128, "comments": 13, "publishedAt": "2026-10-01T01:10:00Z", "direction": "short", "title": "Crude: the range is the trade", "excerpt": "WTI has spent eight weeks between 60 and 66. Until OPEC+ changes its tune, selling the top of the range with a tight stop has paid every time.", "author": "BarrelCount", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-08.png", "symbols": [{ "kind": "icon", "icon": "droplet", "bg": "#0f0f0f" }] }, { "id": "fu-i3", "kind": "idea", "editorsPick": false, "boosts": 84, "comments": 7, "publishedAt": "2026-09-30T20:30:00Z", "direction": "long", "title": "ES: quarter-end flows and the gap above", "excerpt": "E-mini futures left an unfilled gap at 6,740. Dealers are long gamma into the print, which should keep dips shallow until Friday's payrolls.", "author": "GammaGuide", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-09.png", "symbols": [{ "kind": "text", "text": "500", "bg": "#cc2f3c" }] } ], "lists": [ { "title": "Energy futures", "href": "/markets", "rows": [ { "ticker": "CL1!", "name": "Light Crude Oil", "logo": { "kind": "icon", "icon": "droplet", "bg": "#0f0f0f" }, "price": 62.41, "changePct": -0.8 }, { "ticker": "BRN1!", "name": "Brent Crude Oil", "logo": { "kind": "icon", "icon": "droplet", "bg": "#2e2e2e" }, "price": 66.12, "changePct": -0.6 }, { "ticker": "NG1!", "name": "Natural Gas", "logo": { "kind": "icon", "icon": "flame", "bg": "#2a8df5" }, "price": 3.31, "changePct": 4.2 }, { "ticker": "RB1!", "name": "RBOB Gasoline", "logo": { "kind": "icon", "icon": "droplet", "bg": "#f23645" }, "price": 1.92, "changePct": -1.1 }, { "ticker": "HO1!", "name": "Heating Oil", "logo": { "kind": "icon", "icon": "droplet", "bg": "#ff9800" }, "price": 2.28, "changePct": -0.4 }, { "ticker": "TTF1!", "name": "Dutch TTF Gas", "logo": { "kind": "icon", "icon": "flame", "bg": "#1a9c5a" }, "price": 32.4, "changePct": 1.7 } ], "seeAll": { "label": "See all energy futures", "href": "/markets" } }, { "title": "Metals futures", "href": "/markets", "rows": [ { "ticker": "GC1!", "name": "Gold", "logo": { "kind": "icon", "icon": "gold", "bg": "#e0a200" }, "price": 3871.2, "changePct": 0.6 }, { "ticker": "SI1!", "name": "Silver", "logo": { "kind": "text", "text": "Ag", "bg": "#9c9c9c" }, "price": 47.1, "changePct": 1.4 }, { "ticker": "HG1!", "name": "Copper", "logo": { "kind": "icon", "icon": "copper", "bg": "#c2572b" }, "price": 4.86, "changePct": -0.3 }, { "ticker": "PL1!", "name": "Platinum", "logo": { "kind": "text", "text": "Pt", "bg": "#636363" }, "price": 1588.4, "changePct": 2.2 }, { "ticker": "PA1!", "name": "Palladium", "logo": { "kind": "text", "text": "Pd", "bg": "#4a4a4a" }, "price": 1264.5, "changePct": 1.1 }, { "ticker": "ALI1!", "name": "Aluminum", "logo": { "kind": "text", "text": "Al", "bg": "#808080" }, "price": 2674.0, "changePct": 0.8 } ], "seeAll": { "label": "See all metals futures", "href": "/markets" } } ], "newsTitle": "Futures news", "news": [] }; // data/markets/us-stocks.json export const usStocks = { "id": "us-stocks", "title": "US stocks", "href": "/markets", "icon": { "kind": "flag", "country": "us" }, "trends": [ { "ticker": "MU", "name": "Micron Technology, Inc.", "logo": { "kind": "text", "text": "MU", "bg": "#1f3a7a" } }, { "ticker": "GOOG", "name": "Alphabet Inc (Google) Class C", "logo": { "kind": "text", "text": "G", "bg": "#4285f4" } }, { "ticker": "HPE", "name": "Hewlett Packard Enterprise Company", "logo": { "kind": "text", "text": "H", "bg": "#01a982" } }, { "ticker": "TGE", "name": "The Generation Essentials Group", "logo": { "kind": "text", "text": "TG", "bg": "#2e2e2e" } }, { "ticker": "TNON", "name": "Tenon Medical, Inc.", "logo": { "kind": "text", "text": "T", "bg": "#8c8c8c" } } ], "ideas": [ { "id": "us-i1", "kind": "idea", "editorsPick": false, "boosts": 254, "comments": 31, "publishedAt": "2026-10-01T05:00:00Z", "direction": "long", "title": "RIOT: breakout or blow-off?", "excerpt": "Two strong legs up have put the bulls in charge, but the move still counts as three waves. Holding above the last breakout keeps the trend intact; losing it would make this a blow-off top.", "author": "WaveCounter", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-01.png", "symbols": [{ "kind": "text", "text": "R", "bg": "#ff6a00" }] }, { "id": "us-i2", "kind": "idea", "editorsPick": false, "boosts": 189, "comments": 14, "publishedAt": "2026-10-01T03:00:00Z", "direction": "long", "title": "AAPL: the rising trendline still holds", "excerpt": "Apple keeps printing higher highs and higher lows along its rising trendline. The liquidity above 380 is the obvious magnet; a close below the line would put that view on hold.", "author": "LiquidityLens", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-02.png", "symbols": [{ "kind": "text", "text": "", "bg": "#0f0f0f" }] }, { "id": "us-i3", "kind": "idea", "editorsPick": false, "boosts": 97, "comments": 8, "publishedAt": "2026-09-30T22:00:00Z", "direction": "long", "title": "WAY: a textbook base after the IPO", "excerpt": "An inverse head and shoulders is forming right at the IPO price, with the stock resting on its moving averages on light volume. A push through the neckline would confirm the base.", "author": "PatternPilot", "thumb": "https://upfork.dev/assets/e507ed5d844fd69d8c35e2a314150ed3/ideas/idea-03.png", "symbols": [{ "kind": "text", "text": "W", "bg": "#ff9800" }] } ], "lists": [ { "title": "Highest volume stocks", "href": "/markets", "rows": [ { "ticker": "MU", "name": "Micron Technology, Inc.", "logo": { "kind": "text", "text": "MU", "bg": "#1f3a7a" } }, { "ticker": "NVDA", "name": "NVIDIA Corporation", "logo": { "kind": "text", "text": "N", "bg": "#76b900" } }, { "ticker": "AAPL", "name": "Apple Inc.", "logo": { "kind": "text", "text": "A", "bg": "#0f0f0f" } }, { "ticker": "META", "name": "Meta Platforms, Inc.", "logo": { "kind": "text", "text": "M", "bg": "#0866ff" } }, { "ticker": "MSFT", "name": "Microsoft Corporation", "logo": { "kind": "text", "text": "MS", "bg": "#737373" } }, { "ticker": "TSLA", "name": "Tesla, Inc.", "logo": { "kind": "text", "text": "T", "bg": "#e82127" } } ], "seeAll": { "label": "See all most actively traded stocks", "href": "/markets" } }, { "title": "Most volatile stocks", "href": "/markets", "rows": [ { "ticker": "LQDA", "name": "Liquidia Corporation", "logo": { "kind": "text", "text": "L", "bg": "#2962ff" } }, { "ticker": "NIVF", "name": "NewGenIvf Group Limited", "logo": { "kind": "text", "text": "N", "bg": "#8c8c8c" } }, { "ticker": "TGE", "name": "The Generation Essentials Group", "logo": { "kind": "text", "text": "TG", "bg": "#2e2e2e" } }, { "ticker": "CMCT", "name": "Creative Media & Community Trust", "logo": { "kind": "text", "text": "C", "bg": "#5a3b1a" } }, { "ticker": "GOW", "name": "GOWell Energy Technology", "logo": { "kind": "text", "text": "G", "bg": "#8c8c8c" } }, { "ticker": "CHGA", "name": "Change Agents Corporation", "logo": { "kind": "text", "text": "C", "bg": "#8c8c8c" } } ], "seeAll": { "label": "See all stocks with biggest price changes", "href": "/markets" } } ], "gainers": { "regular": [ { "ticker": "LQDA", "name": "Liquidia Corporation", "logo": { "kind": "text", "text": "L", "bg": "#2962ff" }, "price": 24.18, "changePct": 31.4 }, { "ticker": "ANAB", "name": "AnaptysBio, Inc.", "logo": { "kind": "text", "text": "A", "bg": "#089981" }, "price": 41.02, "changePct": 18.9 }, { "ticker": "RIOT", "name": "Riot Platforms, Inc.", "logo": { "kind": "text", "text": "R", "bg": "#ff6a00" }, "price": 19.77, "changePct": 12.6 }, { "ticker": "WAY", "name": "Waystar Holding Corp.", "logo": { "kind": "text", "text": "W", "bg": "#ff9800" }, "price": 38.9, "changePct": 9.8 }, { "ticker": "HPE", "name": "Hewlett Packard Enterprise", "logo": { "kind": "text", "text": "H", "bg": "#01a982" }, "price": 25.31, "changePct": 7.2 } ], "preMarket": [ { "ticker": "NKE", "name": "Nike, Inc.", "logo": { "kind": "text", "text": "N", "bg": "#0f0f0f" }, "price": 74.3, "changePct": 6.1 }, { "ticker": "AMD", "name": "Advanced Micro Devices", "logo": { "kind": "text", "text": "A", "bg": "#ed1c24" }, "price": 168.2, "changePct": 3.4 }, { "ticker": "BA", "name": "The Boeing Company", "logo": { "kind": "text", "text": "B", "bg": "#0a66c2" }, "price": 221.5, "changePct": 2.9 }, { "ticker": "COST", "name": "Costco Wholesale", "logo": { "kind": "text", "text": "C", "bg": "#e31837" }, "price": 942.1, "changePct": 1.8 }, { "ticker": "MU", "name": "Micron Technology, Inc.", "logo": { "kind": "text", "text": "MU", "bg": "#1f3a7a" }, "price": 171.4, "changePct": 1.2 } ] }, "losers": { "regular": [ { "ticker": "NIVF", "name": "NewGenIvf Group Limited", "logo": { "kind": "text", "text": "N", "bg": "#8c8c8c" }, "price": 0.84, "changePct": -27.3 }, { "ticker": "CMCT", "name": "Creative Media & Community Trust", "logo": { "kind": "text", "text": "C", "bg": "#5a3b1a" }, "price": 2.11, "changePct": -19.6 }, { "ticker": "GOW", "name": "GOWell Energy Technology", "logo": { "kind": "text", "text": "G", "bg": "#8c8c8c" }, "price": 3.42, "changePct": -15.2 }, { "ticker": "CHGA", "name": "Change Agents Corporation", "logo": { "kind": "text", "text": "C", "bg": "#8c8c8c" }, "price": 1.07, "changePct": -12.8 }, { "ticker": "SBUX", "name": "Starbucks Corporation", "logo": { "kind": "text", "text": "S", "bg": "#00704a" }, "price": 83.6, "changePct": -4.1 } ], "preMarket": [ { "ticker": "TSLA", "name": "Tesla, Inc.", "logo": { "kind": "text", "text": "T", "bg": "#e82127" }, "price": 428.7, "changePct": -2.4 }, { "ticker": "META", "name": "Meta Platforms, Inc.", "logo": { "kind": "text", "text": "M", "bg": "#0866ff" }, "price": 731.2, "changePct": -1.6 }, { "ticker": "GS", "name": "The Goldman Sachs Group", "logo": { "kind": "text", "text": "GS", "bg": "#7399c6" }, "price": 784.5, "changePct": -1.1 }, { "ticker": "JPM", "name": "JPMorgan Chase & Co.", "logo": { "kind": "text", "text": "J", "bg": "#5a3b1a" }, "price": 312.3, "changePct": -0.9 }, { "ticker": "XOM", "name": "Exxon Mobil Corporation", "logo": { "kind": "text", "text": "X", "bg": "#f23645" }, "price": 112.8, "changePct": -0.7 } ] }, "earnings": [ { "symbol": { "ticker": "AYI", "name": "Acuity Inc.", "logo": { "kind": "text", "text": "A", "bg": "#3d3d3d" } }, "when": "Today", "session": "pre", "actual": 5.77, "estimate": 5.57, "currency": "USD" }, { "symbol": { "ticker": "MKC", "name": "McCormick & Company, Incorporated", "logo": { "kind": "text", "text": "Mc", "bg": "#c8102e" } }, "when": "Today", "session": "pre", "actual": 0.86, "estimate": 0.76, "currency": "USD" }, { "symbol": { "ticker": "ACN", "name": "Accenture plc", "logo": { "kind": "text", "text": ">", "bg": "#a100ff" } }, "when": "Today", "session": "pre", "actual": 3.03, "estimate": 3.18, "currency": "USD" }, { "symbol": { "ticker": "VFS", "name": "VinFast Auto Ltd.", "logo": { "kind": "text", "text": "V", "bg": "#4a5a7a" } }, "when": "Today", "session": "after", "actual": null, "estimate": -0.27, "currency": "USD" } ], "ipos": [ { "symbol": { "ticker": "ANTHROPIC", "name": "Anthropic PBC", "logo": { "kind": "text", "text": "A", "bg": "#d97757" } }, "exchange": "NASDAQ", "offerPrice": null, "date": "2026-10-14" }, { "symbol": { "ticker": "OPENAI", "name": "OpenAI Group", "logo": { "kind": "text", "text": "O", "bg": "#0f0f0f" } }, "exchange": "NYSE", "offerPrice": null, "date": "2026-10-16" }, { "symbol": { "ticker": "ANDURIL", "name": "Anduril Industries", "logo": { "kind": "text", "text": "AN", "bg": "#2e2e2e" } }, "exchange": "NYSE", "offerPrice": "48.00 USD", "date": "2026-10-21" }, { "symbol": { "ticker": "STRIPE", "name": "Stripe, Inc.", "logo": { "kind": "text", "text": "S", "bg": "#635bff" } }, "exchange": "NASDAQ", "offerPrice": null, "date": "2026-10-28" } ], "newsTitle": "US stocks news", "news": [] }; // data/news.json export const news = { "top": [ { "id": "n1", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Stocks edge higher as investors weigh the latest round of Fed speakers before Friday's jobs report", "publishedAt": "2026-10-01T06:20:00Z" }, { "id": "n2", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Gold extends record run as central banks keep buying and real yields drift lower", "publishedAt": "2026-10-01T05:50:00Z" }, { "id": "n3", "source": "CapWire", "sourceLogo": { "kind": "text", "text": "C", "bg": "#0a66c2" }, "headline": "Micron shares slip despite record HBM revenue; analysts point to a stretched valuation", "publishedAt": "2026-10-01T05:05:00Z" }, { "id": "n4", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Oil steadies near $62 as OPEC+ signals another modest supply increase for November", "publishedAt": "2026-10-01T04:30:00Z" }, { "id": "n5", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "What to watch today: ISM services, Fed's Waller and the start of Q3 earnings previews", "publishedAt": "2026-10-01T04:00:00Z" }, { "id": "n6", "source": "Finance Tribune", "sourceLogo": { "kind": "text", "text": "FT", "bg": "#fcd0b1", "fg": "#0f0f0f" }, "headline": "European banks rally after ECB officials hint the rate-cutting cycle is nearly complete", "publishedAt": "2026-10-01T03:40:00Z" }, { "id": "n7", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Bitcoin holds above $115,000 as spot ETF inflows return for a fourth straight session", "publishedAt": "2026-10-01T03:10:00Z" }, { "id": "n8", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Yen weakens past 149 as the BOJ keeps policy on hold and warns on wage growth", "publishedAt": "2026-10-01T02:45:00Z" }, { "id": "n9", "source": "Westbrook", "sourceLogo": { "kind": "text", "text": "W", "bg": "#0f0f0f" }, "headline": "Nvidia, Microsoft and the $100 billion question hanging over the AI build-out", "publishedAt": "2026-10-01T02:00:00Z" }, { "id": "n10", "source": "CapWire", "sourceLogo": { "kind": "text", "text": "C", "bg": "#0a66c2" }, "headline": "Treasury yields tick higher ahead of a heavy week of auctions and the September payrolls report", "publishedAt": "2026-10-01T01:30:00Z" }, { "id": "n11", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Copper climbs to a six-week high on Chilean supply worries and firmer Chinese demand data", "publishedAt": "2026-10-01T00:50:00Z" }, { "id": "n12", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Earnings season preview: the five charts that matter most going into Q3 reports", "publishedAt": "2026-09-30T23:30:00Z" } ], "stocks": [ { "id": "s1", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Apple supplier shares climb after a report of stronger-than-expected iPhone 18 orders", "publishedAt": "2026-10-01T06:00:00Z" }, { "id": "s2", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Tesla deliveries beat a lowered bar; the stock's reaction says expectations were lower still", "publishedAt": "2026-10-01T05:20:00Z" }, { "id": "s3", "source": "CapWire", "sourceLogo": { "kind": "text", "text": "C", "bg": "#0a66c2" }, "headline": "Nike jumps as turnaround plan shows early traction in North America", "publishedAt": "2026-10-01T04:45:00Z" }, { "id": "s4", "source": "Westbrook", "sourceLogo": { "kind": "text", "text": "W", "bg": "#0f0f0f" }, "headline": "Big banks prepare investors for softer trading revenue in the third quarter", "publishedAt": "2026-10-01T04:00:00Z" }, { "id": "s5", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Small caps lead for a third day as rate-cut bets broaden the rally", "publishedAt": "2026-10-01T03:20:00Z" }, { "id": "s6", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Boeing wins a 60-jet order from a Gulf carrier, its largest this year", "publishedAt": "2026-10-01T02:30:00Z" }, { "id": "s7", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "AMD shares rise on a new data-center partnership announcement", "publishedAt": "2026-10-01T01:50:00Z" }, { "id": "s8", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Meta's capex guidance is now the number every AI investor is watching", "publishedAt": "2026-10-01T01:00:00Z" }, { "id": "s9", "source": "CapWire", "sourceLogo": { "kind": "text", "text": "C", "bg": "#0a66c2" }, "headline": "Costco membership fee hike lands with little pushback from shoppers", "publishedAt": "2026-10-01T00:30:00Z" }, { "id": "s10", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Dividend aristocrats quietly hit a record as the market rotates toward quality", "publishedAt": "2026-09-30T23:00:00Z" }, { "id": "s11", "source": "Westbrook", "sourceLogo": { "kind": "text", "text": "W", "bg": "#0f0f0f" }, "headline": "Starbucks closes stores and cuts jobs in a sweeping reset under its new CEO", "publishedAt": "2026-09-30T22:00:00Z" }, { "id": "s12", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Lithium miners surge as prices rebound from a two-year slump", "publishedAt": "2026-09-30T21:00:00Z" } ], "crypto": [ { "id": "c1", "source": "Chain Daily", "sourceLogo": { "kind": "text", "text": "CD", "bg": "#f7931a" }, "headline": "Bitcoin ETF inflows top $1.2 billion in a week as institutions return", "publishedAt": "2026-10-01T06:10:00Z" }, { "id": "c2", "source": "Token Brief", "sourceLogo": { "kind": "text", "text": "TB", "bg": "#0f0f0f" }, "headline": "Ethereum staking queue grows to its longest since the Shanghai upgrade", "publishedAt": "2026-10-01T05:30:00Z" }, { "id": "c3", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Stablecoin supply crosses $300 billion as payment firms roll out new rails", "publishedAt": "2026-10-01T04:50:00Z" }, { "id": "c4", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Solana's network revenue overtakes Ethereum's for a second month", "publishedAt": "2026-10-01T04:00:00Z" }, { "id": "c5", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Tokenized treasuries pass $10 billion as asset managers expand on-chain funds", "publishedAt": "2026-10-01T03:15:00Z" }, { "id": "c6", "source": "Chain Daily", "sourceLogo": { "kind": "text", "text": "CD", "bg": "#f7931a" }, "headline": "Miners' reserves fall to a five-year low after the halving squeezes margins", "publishedAt": "2026-10-01T02:30:00Z" }, { "id": "c7", "source": "Token Brief", "sourceLogo": { "kind": "text", "text": "TB", "bg": "#0f0f0f" }, "headline": "A major exchange lists its first tokenized stock pairs for European users", "publishedAt": "2026-10-01T01:40:00Z" }, { "id": "c8", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Regulators finalize stablecoin rules, setting a 2027 compliance deadline", "publishedAt": "2026-10-01T00:50:00Z" }, { "id": "c9", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Funding rates reset: what the derivatives market says about the next leg", "publishedAt": "2026-09-30T23:20:00Z" }, { "id": "c10", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Crypto treasuries at listed companies now hold 4% of all bitcoin", "publishedAt": "2026-09-30T22:10:00Z" }, { "id": "c11", "source": "Chain Daily", "sourceLogo": { "kind": "text", "text": "CD", "bg": "#f7931a" }, "headline": "Layer-2 fees drop 80% after the latest data-availability upgrade", "publishedAt": "2026-09-30T21:00:00Z" }, { "id": "c12", "source": "Token Brief", "sourceLogo": { "kind": "text", "text": "TB", "bg": "#0f0f0f" }, "headline": "DEX volumes hit a monthly record as perpetuals move on-chain", "publishedAt": "2026-09-30T20:00:00Z" } ], "futures": [ { "id": "f1", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Brent holds near $66 as traders weigh OPEC+ supply against softer Chinese imports", "publishedAt": "2026-10-01T06:00:00Z" }, { "id": "f2", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Gold's record run draws the biggest ETF inflows in three years", "publishedAt": "2026-10-01T05:10:00Z" }, { "id": "f3", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Wheat slides to a five-year low on bumper Black Sea harvests", "publishedAt": "2026-10-01T04:20:00Z" }, { "id": "f4", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Natural gas futures jump 4% as early cold forecasts hit the Midwest", "publishedAt": "2026-10-01T03:30:00Z" }, { "id": "f5", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Copper's six-week high: supply disruptions meet a restocking cycle", "publishedAt": "2026-10-01T02:40:00Z" }, { "id": "f6", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Silver outpaces gold this quarter as industrial demand adds to the bid", "publishedAt": "2026-10-01T01:50:00Z" }, { "id": "f7", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Coffee futures spike as Brazil's frost damage comes into focus", "publishedAt": "2026-10-01T01:00:00Z" }, { "id": "f8", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "S&P futures flat before the open as the market waits on ISM services", "publishedAt": "2026-10-01T00:10:00Z" }, { "id": "f9", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Cocoa retreats from records as West African weather improves", "publishedAt": "2026-09-30T23:00:00Z" }, { "id": "f10", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Aluminum rises as European smelters curb output on power costs", "publishedAt": "2026-09-30T22:00:00Z" }, { "id": "f11", "source": "Delta Journal", "sourceLogo": { "kind": "text", "text": "DJ", "bg": "#1f1f1f" }, "headline": "Soybeans gain on fresh Chinese purchases after trade talks resume", "publishedAt": "2026-09-30T21:00:00Z" }, { "id": "f12", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "VIX futures curve flattens: hedging demand fades into quarter-end", "publishedAt": "2026-09-30T20:00:00Z" } ], "forex": [ { "id": "x1", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Dollar firms for a fourth day as traders trim bets on an October rate cut", "publishedAt": "2026-10-01T06:05:00Z" }, { "id": "x2", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Yen slides past 149 as BOJ holds and signals patience on the next hike", "publishedAt": "2026-10-01T05:15:00Z" }, { "id": "x3", "source": "FX Pulse", "sourceLogo": { "kind": "text", "text": "FX", "bg": "#1a9c5a" }, "headline": "EUR/USD tests 1.16 as eurozone inflation cools to 1.9%", "publishedAt": "2026-10-01T04:25:00Z" }, { "id": "x4", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "GBP/USD steadies after a volatile week for gilts", "publishedAt": "2026-10-01T03:35:00Z" }, { "id": "x5", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Aussie dips despite RBA hike as iron ore slumps", "publishedAt": "2026-10-01T02:45:00Z" }, { "id": "x6", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Swiss franc hits a record on safe-haven flows; SNB warns on strength", "publishedAt": "2026-10-01T01:55:00Z" }, { "id": "x7", "source": "FX Pulse", "sourceLogo": { "kind": "text", "text": "FX", "bg": "#1a9c5a" }, "headline": "USD/CAD climbs as oil weakens and Canadian GDP misses", "publishedAt": "2026-10-01T01:05:00Z" }, { "id": "x8", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Emerging-market currencies: who benefits from a softer Fed path", "publishedAt": "2026-10-01T00:15:00Z" }, { "id": "x9", "source": "Ridgeway", "sourceLogo": { "kind": "text", "text": "R", "bg": "#ff8000" }, "headline": "Yuan strengthens to a one-year high on export data and PBOC fixings", "publishedAt": "2026-09-30T23:05:00Z" }, { "id": "x10", "source": "Baystone", "sourceLogo": { "kind": "text", "text": "B", "bg": "#0f0f0f" }, "headline": "Kiwi outperforms as New Zealand's dairy prices rebound", "publishedAt": "2026-09-30T22:05:00Z" }, { "id": "x11", "source": "FX Pulse", "sourceLogo": { "kind": "text", "text": "FX", "bg": "#1a9c5a" }, "headline": "Options market prices the busiest week for USD/JPY since July", "publishedAt": "2026-09-30T21:05:00Z" }, { "id": "x12", "source": "Marketly", "sourceLogo": { "kind": "text", "text": "M", "bg": "#2962ff" }, "headline": "Why the dollar smile is back: a quick guide to the current regime", "publishedAt": "2026-09-30T20:05:00Z" } ] }; // data/plans.json export const plans = { "plans": [ { "id": "starter", "name": "Starter", "monthly": 12.49, "yearly": 10.49, "tagline": "For the trader who is getting serious.", "features": ["2 charts per layout", "5 indicators per chart", "25 price alerts", "5K historical bars", "Volume profile", "Ad-free experience"] }, { "id": "trader", "name": "Trader", "monthly": 24.99, "yearly": 20.99, "tagline": "More screens, more signals, more speed.", "features": ["4 charts per layout", "12 indicators per chart", "150 price alerts", "15K historical bars", "Custom timeframes", "Market replay on intraday", "Multiple watchlists"], "highlighted": true }, { "id": "pro", "name": "Pro", "monthly": 49.99, "yearly": 41.99, "tagline": "The full terminal for professionals.", "features": ["6 charts per layout", "30 indicators per chart", "500 price alerts", "30K historical bars", "Seconds charts", "Alerts that never expire", "Priority support"] }, { "id": "elite", "name": "Elite", "monthly": 149.99, "yearly": 125.99, "tagline": "Every tool, no limits.", "features": ["12 charts per layout", "60 indicators per chart", "1500 price alerts", "50K historical bars", "Tick charts", "Dedicated servers", "Early access to features"] } ], "comparison": [ { "feature": "Charts per layout", "values": ["2", "4", "6", "12"] }, { "feature": "Indicators per chart", "values": ["5", "12", "30", "60"] }, { "feature": "Price alerts", "values": ["25", "150", "500", "1500"] }, { "feature": "Historical bars", "values": ["5K", "15K", "30K", "50K"] }, { "feature": "Custom timeframes", "values": ["—", "✓", "✓", "✓"] }, { "feature": "Seconds charts", "values": ["—", "—", "✓", "✓"] }, { "feature": "Tick charts", "values": ["—", "—", "—", "✓"] }, { "feature": "Market replay", "values": ["Daily", "Intraday", "Intraday", "Intraday"] }, { "feature": "Volume profile", "values": ["✓", "✓", "✓", "✓"] }, { "feature": "Export chart data", "values": ["—", "✓", "✓", "✓"] }, { "feature": "Priority support", "values": ["—", "—", "✓", "✓"] }, { "feature": "Dedicated servers", "values": ["—", "—", "—", "✓"] } ], "faq": [ { "q": "Can I try a plan before paying?", "a": "Yes. Every paid plan starts with a 30-day free trial. You can cancel at any time during the trial and you won't be charged." }, { "q": "What happens when I downgrade?", "a": "Your plan changes at the end of the current billing period. Charts, alerts and layouts above the new plan's limits are kept but become read-only until you remove some." }, { "q": "Do you offer refunds?", "a": "Yearly plans can be refunded within 14 days of purchase. Monthly plans are not refundable, but you keep access until the period ends." }, { "q": "Is market data included?", "a": "Delayed data for every exchange is included in all plans. Real-time data for specific exchanges is sold separately, priced by the exchange." }, { "q": "Can I pay with crypto?", "a": "Yearly plans can be paid in USDT and USDC. Monthly plans require a card." } ] }; // data/search.json export const search = { "tabs": ["All", "Stocks", "Funds", "Futures", "Forex", "Crypto", "Indices", "Bonds", "Economy"], "recent": [ { "ticker": "SPX", "name": "S&P 500", "exchange": "SP", "logo": { "kind": "text", "text": "500", "bg": "#cc2f3c" } }, { "ticker": "BTCUSD", "name": "Bitcoin / U.S. Dollar", "exchange": "BITSTAMP", "logo": { "kind": "text", "text": "₿", "bg": "#f7931a" } }, { "ticker": "EURUSD", "name": "Euro / U.S. Dollar", "exchange": "FX", "logo": { "kind": "flags", "countries": ["eu", "us"] } } ], "trending": [ { "ticker": "NVDA", "name": "NVIDIA Corporation", "exchange": "NASDAQ", "logo": { "kind": "text", "text": "N", "bg": "#76b900" } }, { "ticker": "MU", "name": "Micron Technology, Inc.", "exchange": "NASDAQ", "logo": { "kind": "text", "text": "MU", "bg": "#1f3a7a" } }, { "ticker": "TSLA", "name": "Tesla, Inc.", "exchange": "NASDAQ", "logo": { "kind": "text", "text": "T", "bg": "#e82127" } }, { "ticker": "GC1!", "name": "Gold Futures", "exchange": "COMEX", "logo": { "kind": "icon", "icon": "gold", "bg": "#e0a200" } }, { "ticker": "ETHUSD", "name": "Ethereum / U.S. Dollar", "exchange": "COINBASE", "logo": { "kind": "text", "text": "Ξ", "bg": "#5b6ad0" } }, { "ticker": "USDJPY", "name": "U.S. Dollar / Japanese Yen", "exchange": "FX", "logo": { "kind": "flags", "countries": ["us", "jp"] } }, { "ticker": "US10Y", "name": "US Government Bonds 10 YR Yield", "exchange": "TVC", "logo": { "kind": "flag", "country": "us" } }, { "ticker": "AAPL", "name": "Apple Inc.", "exchange": "NASDAQ", "logo": { "kind": "text", "text": "A", "bg": "#0f0f0f" } } ] }; d2:T2840,/** * The header's menus, the languages, the mobile drawer and the footer's columns. Icons are names resolved in * `components/ui/Icon.tsx`, so a menu row never imports an icon itself. */ import { brand } from "./copy"; export type IconName = | "shield" | "trophy" | "globe" | "star" | "help" | "scan" | "calendar" | "newspaper" | "briefcase" | "trending" | "options" | "map" | "bag" | "lightbulb" | "layers" | "users" | "flag" | "download" | "building" | "compare" | "plus-square" | "award" | "more" | "user" | "search" | "menu" | "close" | "chevron-right" | "chevron-left" | "chevron-down" | "sun" | "moon" | "check" | "external" | "star-filled" | "verified" | "bookmark" | "comment" | "boost" | "features" | "circle-dot"; export interface MenuRow { label: string; href: string; icon?: IconName; sub?: string; highlighted?: boolean; children?: { label: string; href: string }[]; } export interface MenuSection { label?: string; rows: MenuRow[]; } export interface FeaturedBroker { name: string; rating: number; logo: { text: string; bg: string; fg?: string }; } export interface NavItem { label: string; /** Read by screen readers (and search engines) after the visible label, when the label alone says little. */ srSuffix?: string; href: string; sections: MenuSection[]; featuredBrokers?: { label: string; brokers: FeaturedBroker[] }; } const m = (label: string, href = "/markets") => ({ label, href }); export const nav: NavItem[] = [ { label: "Products", href: "/features", sections: [ { rows: [{ label: `${brand.name} Charts`, href: "/features", icon: "shield", sub: "Charts, analysis and trading in one place", highlighted: true }] }, { label: "Individual tools", rows: [ { label: "Screeners", href: "/markets", icon: "scan", children: [m("Stock screener"), m("ETF screener"), m("Crypto screener"), m("Forex screener"), m("Bond screener")] }, { label: "Calendars", href: "/markets", icon: "calendar", children: [m("Economic"), m("Earnings"), m("Dividends"), m("IPOs")] }, { label: "Live news", href: "/news", icon: "newspaper" }, { label: "Portfolios", href: "/features", icon: "briefcase" }, { label: "Yield Curves", href: "/markets", icon: "trending" }, { label: "Options", href: "/features", icon: "options" }, { label: "Economy maps", href: "/markets", icon: "map" }, ], }, { label: "About", rows: [m("Pricing", "/pricing"), m("Features", "/features"), m("What's new", "/news"), m("Market data")] }, ], }, { label: "Community", href: "/ideas", sections: [ { rows: [ { label: "Trading cup", href: "/ideas", icon: "trophy", sub: "Monthly contests with real prizes", highlighted: true }, { label: "Script library", href: "/ideas", icon: "bag", sub: "Indicators from verified authors" }, ], }, { label: "Created by traders", rows: [ { label: "Trading ideas", href: "/ideas", icon: "lightbulb" }, { label: "Indicators and strategies", href: "/ideas", icon: "layers" }, { label: "Community contests", href: "/ideas", icon: "users" }, ], }, { label: "About", rows: [m("Community guide", "/ideas")] }, ], }, { label: "Markets", href: "/markets", sections: [ { rows: [ { label: "Entire world", href: "/markets", icon: "globe", highlighted: true }, { label: "Countries", href: "/markets", icon: "flag", children: [m("United States"), m("United Kingdom"), m("Germany"), m("Japan"), m("India"), m("Brazil"), m("All countries")] }, { label: "News", href: "/news", icon: "newspaper", children: [m("Top stories", "/news"), m("Stocks", "/news"), m("Crypto", "/news"), m("Forex", "/news"), m("Economy", "/news")] }, ], }, { label: "Assets", rows: [ { label: "Indices", href: "/markets", children: [m("Major indices"), m("US indices"), m("European indices"), m("Asian indices")] }, { label: "Stocks", href: "/markets", children: [m("Most active"), m("Gainers"), m("Losers"), m("Large caps"), m("Dividend stocks")] }, { label: "Crypto", href: "/markets", children: [m("Coins"), m("CEX pairs"), m("DEX pairs"), m("Market cap")] }, { label: "Futures", href: "/markets", children: [m("Energy"), m("Metals"), m("Agricultural"), m("Index futures")] }, { label: "Forex", href: "/markets", children: [m("Major pairs"), m("Minor pairs"), m("Exotic pairs"), m("Currency indices")] }, { label: "Government bonds", href: "/markets", children: [m("US Treasuries"), m("Eurozone"), m("Yield curves")] }, { label: "Corporate bonds", href: "/markets", children: [m("Investment grade"), m("High yield")] }, { label: "ETFs", href: "/markets", children: [m("Largest ETFs"), m("Sector ETFs"), m("Bond ETFs")] }, { label: "Economy", href: "/markets", children: [m("Inflation"), m("Interest rates"), m("GDP"), m("Unemployment")] }, ], }, ], }, { label: "Brokers", href: "/brokers", sections: [ { rows: [ { label: "Top brokers", href: "/brokers", icon: "star", highlighted: true }, { label: "Compare brokers", href: "/brokers", icon: "compare" }, { label: "Open an account", href: "/brokers", icon: "plus-square" }, { label: "Awarded brokers", href: "/brokers", icon: "award" }, ], }, { label: "About", rows: [m("How trading works", "/brokers")] }, ], featuredBrokers: { label: "Featured brokers", brokers: [ { name: "OANDA", rating: 4.5, logo: { text: "O", bg: "#1b2a4a" } }, { name: "NinjaTrader", rating: 4.5, logo: { text: "N", bg: "#ff5a1f" } }, { name: "FOREX.com", rating: 4.5, logo: { text: "F", bg: "#1a9c5a" } }, { name: "OKX", rating: 4.4, logo: { text: "X", bg: "#000000" } }, { name: "TradeStation", rating: 4.3, logo: { text: "T", bg: "#0f3f8a" } }, ], }, }, { label: "More", srSuffix: `about ${brand.name}`, href: "/features", sections: [ { rows: [ { label: "Help Center", href: "/features", icon: "help", highlighted: true }, { label: "Downloads", href: "/features", icon: "download", children: [m("Desktop app", "/features"), m("iOS app", "/features"), m("Android app", "/features")] }, { label: "For business", href: "/features", icon: "building", children: [m("Widgets", "/features"), m("Charting libraries", "/features"), m("Advertising", "/features")] }, ], }, { label: "Company", rows: [ m("About", "/features"), m(`#${brand.name}`, "/ideas"), m("Our mission", "/features"), m("Careers", "/features"), m("Blog and news", "/news"), m("Media kit", "/features"), m("Accessibility statement", "/features"), { label: "Merch", href: "/features", children: [m("Store", "/features"), m("Gift cards", "/features")] }, ], }, ], }, ]; export const languages = [ "English", "English (India)", "Deutsch", "Français", "Español", "Italiano", "Polski", "Türkçe", "Русский", "Português", "Bahasa Indonesia", "Bahasa Melayu", "ภาษาไทย", "Tiếng Việt", "日本語", "한국어", "简体中文", "繁體中文", "العربية", "فارسی", ]; export interface FooterGroup { label: string; links: { label: string; href: string }[]; } const l = (label: string, href = "#") => ({ label, href }); export const footerColumns: FooterGroup[][] = [ [ { label: "Platform", links: [l(`${brand.name} Charts`, "/features")] }, { label: "Screeners", links: [l("Stocks", "/markets"), l("ETFs", "/markets"), l("Bonds", "/markets"), l("Crypto coins", "/markets"), l("CEX pairs", "/markets"), l("DEX pairs", "/markets"), l("Custom")] }, { label: "Heatmaps", links: [l("Stocks", "/markets"), l("ETFs", "/markets"), l("Crypto coins", "/markets")] }, { label: "Calendars", links: [l("Economic", "/markets"), l("Earnings", "/markets"), l("Dividends", "/markets"), l("IPOs", "/markets")] }, { label: "More products", links: [l("Live news", "/news"), l("Portfolios"), l("Fundamentals"), l("Yield Curves", "/markets"), l("Options"), l("Economy maps", "/markets"), l("Scripting"), l("Developer API")] }, { label: "Apps", links: [l("Mobile"), l("Desktop")] }, ], [ { label: "Tools & subscriptions", links: [l("Features", "/features"), l("Pricing", "/pricing"), l("Market data", "/markets"), l("Gift plans", "/pricing")] }, { label: "Trading", links: [l("Overview", "/brokers"), l("Brokers", "/brokers"), l("Brokers comparison", "/brokers"), l("Trading cup", "/ideas")] }, { label: "Special offers", links: [l("Futures data"), l("European markets"), l("US stocks bundle")] }, { label: "About company", links: [l("Who we are"), l("Our mission"), l("Blog", "/news"), l("Help Center"), l("Careers"), l("Media kit")] }, { label: "Merch", links: [l("Store"), l("Gift cards"), l("Limited editions")] }, { label: "Policies & security", links: [l("Terms of Use"), l("Disclaimer"), l("Privacy Policy"), l("Cookies Policy"), l("Accessibility Statement"), l("Security tips"), l("Bug Bounty program"), l("Status page")] }, ], [ { label: "Community", links: [l("Social network", "/ideas"), l("Member stories"), l("Refer a friend"), l("Creator program"), l("Community rules"), l("Moderators")] }, { label: "Ideas", links: [l("Trading", "/ideas"), l("Education", "/ideas"), l("Editors' picks", "/ideas")] }, { label: "Scripts", links: [l("Indicators & strategies", "/ideas"), l("Script experts"), l("Freelancers"), l("Marketplace")] }, ], [ { label: "Business solutions", links: [l("Widgets"), l("Charting libraries"), l("Embeddable charts"), l("Charting SDK"), l("White-label platform")] }, { label: "Growth opportunities", links: [l("Advertising"), l("Brokerage integration"), l("Partner program"), l("Education program")] }, ], ]; export const socials = ["x", "facebook", "youtube", "instagram", "linkedin", "telegram", "tiktok", "reddit"] as const; export type Social = (typeof socials)[number]; d3:T11fe,/** * The shapes every section is fed with. Mock data lives in the JSON files next to this file; `lib/api.ts` * returns it with the signatures a real backend would have, so wiring real endpoints never touches a component. */ /** A logo: an image URL, or a disc with a short text (an index number, a currency glyph) or a named icon on it. */ export type Logo = | { kind: "image"; src: string } | { kind: "text"; text: string; bg: string; fg?: string } | { kind: "icon"; icon: LogoIcon; bg: string; fg?: string } | { kind: "flag"; country: string } | { kind: "flags"; countries: [string, string] }; export type LogoIcon = "droplet" | "flame" | "gold" | "copper" | "globe" | "barrel" | "bitcoin" | "chart" | "dollar" | "percent"; export interface Symbol { ticker: string; name: string; logo?: Logo; price?: number; changePct?: number; exchange?: string; /** Spark points (closes), oldest first. */ spark?: number[]; /** When the spark is one trading day: the time of the first point ("16:30") and the minutes between points. */ session?: { start: string; stepMinutes: number }; /** Fraction digits of the price, when the default (2, or 4 under 1) is not what the market quotes. */ digits?: number; /** The unit shown after the price in small type: "POINT" for an index, a currency code, or "USD / barrel". */ unit?: string; /** Delayed data (the small orange "D" after the name). */ delayed?: boolean; /** Whether the market is trading now (the green dot on the big card). */ marketOpen?: boolean; currency?: string; href?: string; } export interface Idea { id: string; title: string; excerpt: string; author: string; thumb: string; symbols: Logo[]; kind: "idea" | "indicator" | "strategy"; editorsPick: boolean; boosts: number; comments: number; publishedAt: string; direction?: "long" | "short"; } export interface NewsItem { id: string; source: string; sourceLogo?: Logo; headline: string; publishedAt: string; href?: string; } export interface EarningsEvent { symbol: Symbol; when: "Today" | "Tomorrow" | string; session: "pre" | "after"; actual: number | null; estimate: number | null; currency: string; } export interface IpoEvent { symbol: Symbol; exchange: string; offerPrice: string | null; date?: string; } export interface Broker { id: string; name: string; logo: Logo; category: string; rating: number; ratingLabel: string; verified: boolean; featured: boolean; badge?: string; markets?: string[]; minDeposit?: string; href?: string; } export interface PerfRow { symbol: Symbol; /** Change in percent for each period, keyed by the PillTabs label ("1D", "1W" …). */ byPeriod: Record; } export interface CountryInflation { /** ISO 3166-1 numeric id as a string, the way world-atlas names countries. */ id: string; name: string; inflationPct: number; } export interface CalendarEvent { id: string; day: "Today" | "Tomorrow" | string; time: string; country: string; event: string; importance: 1 | 2 | 3; actual: string | null; forecast: string | null; prior: string | null; } export interface Plan { id: string; name: string; monthly: number; yearly: number; tagline: string; features: string[]; highlighted?: boolean; } export interface MarketCategoryData { id: string; title: string; href: string; icon: Logo; trends: Symbol[]; ideas: Idea[]; lists: { title: string; href: string; rows: Symbol[]; seeAll: { label: string; href: string } }[]; gainers?: { regular: Symbol[]; preMarket: Symbol[] }; losers?: { regular: Symbol[]; preMarket: Symbol[] }; earnings?: EarningsEvent[]; ipos?: IpoEvent[]; performance?: PerfRow[]; news: NewsItem[]; newsTitle: string; } export interface MarketSummaryData { hero: Symbol; majorIndices: Symbol[]; /** The symbols whose one-month chart heads the three cards under the big chart: crypto, futures, economy. */ trio: Symbol[]; dominance: { label: string; pct: number; color: "bitcoin" | "ethereum" | "others" }[]; crypto: Symbol[]; commodities: Symbol[]; inflation: { symbol: Symbol; /** One value per month, oldest first. */ bars: number[]; /** The value at the top gridline, and the labels of the gridlines from top to bottom. */ yMax: number; yTicks: string[]; /** Labels under the bars: `at` is the bar's index; `strong` marks a year. */ xTicks: { at: number; label: string; strong?: boolean }[]; rateLabel: string; stats: { label: string; value: string }[]; }; } d4:T786,/** Number formatting the way market UIs do it: a real minus sign, tabular digits in CSS, colors by sign. */ const MINUS = "−"; export function formatPct(value: number, digits = 2): string { if (!Number.isFinite(value)) return "—"; const abs = Math.abs(value).toFixed(digits); if (Number(abs) === 0) return `${Number(0).toFixed(digits)}%`; return `${value > 0 ? "+" : MINUS}${abs}%`; } export function formatPrice(value: number | null | undefined, digits?: number): string { if (value === null || value === undefined || !Number.isFinite(value)) return "—"; const d = digits ?? (Math.abs(value) >= 1000 ? 2 : Math.abs(value) >= 1 ? 2 : 4); const s = Math.abs(value).toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d }); return value < 0 ? `${MINUS}${s}` : s; } export function formatCompact(value: number): string { return Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value); } /** `text-up` / `text-down` / neutral — a class name, never a color value. */ export function signClass(value: number | null | undefined): string { if (value === null || value === undefined || !Number.isFinite(value) || value === 0) return "text-fg-primary"; return value > 0 ? "text-up" : "text-down"; } export function timeAgo(iso: string, now = new Date()): string { const diff = Math.max(0, now.getTime() - new Date(iso).getTime()); const m = Math.floor(diff / 60000); if (m < 1) return "just now"; if (m < 60) return `${m} minute${m === 1 ? "" : "s"} ago`; const h = Math.floor(m / 60); if (h < 24) return `${h} hour${h === 1 ? "" : "s"} ago`; const d = Math.floor(h / 24); if (d < 30) return `${d} day${d === 1 ? "" : "s"} ago`; return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric" }); } export function initials(name: string): string { return name.trim().charAt(0).toUpperCase() || "?"; } d5:T8ea,"use client"; import { useCallback, useEffect, useState, useSyncExternalStore, type RefObject } from "react"; /** True when the media query matches; false on the server and during hydration. */ export function useMediaQuery(query: string): boolean { const subscribe = useCallback( (listener: () => void) => { const mql = window.matchMedia(query); mql.addEventListener("change", listener); return () => mql.removeEventListener("change", listener); }, [query], ); return useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); } /** The user's reduced-motion preference (false until mounted). */ export function usePrefersReducedMotion(): boolean { return useMediaQuery("(prefers-reduced-motion: reduce)"); } /** Whether the element is in the viewport (by the given fraction), through one IntersectionObserver. */ export function useInView(ref: RefObject, threshold = 0, rootMargin = "0px"): boolean { const [inView, setInView] = useState(true); useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === "undefined") return; const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { threshold, rootMargin }); observer.observe(el); return () => observer.disconnect(); }, [ref, threshold, rootMargin]); return inView; } /** The element's size, kept current with a ResizeObserver. */ export function useElementSize(ref: RefObject): { width: number; height: number } { const [size, setSize] = useState({ width: 0, height: 0 }); useEffect(() => { const el = ref.current; if (!el) return; const observer = new ResizeObserver(([entry]) => { const { width, height } = entry.contentRect; setSize((s) => (s.width === width && s.height === height ? s : { width, height })); }); observer.observe(el); return () => observer.disconnect(); }, [ref]); return size; } /** True once the component has mounted on the client (for things that must not render on the server). */ export function useMounted(): boolean { return useSyncExternalStore(subscribeNever, () => true, () => false); } function subscribeNever() { return () => {}; } 6b:["$","$L8f",null,{"files":[{"path":"app/brokers/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { BrokersPage } from \"@/components/marketly/routes/brokers\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Brokers\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/brokers/page.tsx"},{"path":"app/features/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { FeaturesPage } from \"@/components/marketly/routes/features\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Features\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/features/page.tsx"},{"path":"app/ideas/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { IdeasPage } from \"@/components/marketly/routes/ideas\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Community ideas\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/ideas/page.tsx"},{"path":"app/markets/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { MarketsPage } from \"@/components/marketly/routes/markets\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Markets\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/markets/page.tsx"},{"path":"app/news/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { NewsPage } from \"@/components/marketly/routes/news\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"News\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/news/page.tsx"},{"path":"app/page.tsx","content":"import { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { Home } from \"@/components/marketly/routes/home\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/page.tsx"},{"path":"app/pricing/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { PricingPage } from \"@/components/marketly/routes/pricing\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Pricing\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/pricing/page.tsx"},{"path":"app/signin/page.tsx","content":"import type { Metadata } from \"next\";\nimport { MarketlyShell } from \"@/components/marketly/layout/MarketlyShell\";\nimport { SignInPage } from \"@/components/marketly/routes/signin\";\nimport { getSearchData } from \"@/lib/marketly/api\";\n\nexport const metadata: Metadata = { title: \"Sign in\" };\n\nexport default async function Page() {\n return (\n \n \n \n );\n}\n","type":"registry:page","target":"app/signin/page.tsx"},{"path":"components/marketly/hero/EarthFallbackVideo.tsx","content":"import Image from \"next/image\";\nimport { hero } from \"@/lib/marketly/data/copy\";\n\n/**\n * What stands in for the 3D Earth without WebGL or on a low-memory device: a looping clip when one is supplied in\n * data/copy.ts (`hero.earthFallback`), otherwise the rendered still.\n */\nexport function EarthFallbackVideo({ className }: { className?: string }) {\n const { poster, mp4, webm } = hero.earthFallback;\n if (!mp4 && !webm) {\n return (\n

\n $\"\"$ \n

\n );\n }\n return (\n

\n );\n}\n","type":"registry:component","target":"@components/marketly/hero/EarthFallbackVideo.tsx"},{"path":"components/marketly/hero/EarthScene.tsx","content":"$90","type":"registry:component","target":"@components/marketly/hero/EarthScene.tsx"},{"path":"components/marketly/hero/EarthSceneLazy.tsx","content":"$91","type":"registry:component","target":"@components/marketly/hero/EarthSceneLazy.tsx"},{"path":"components/marketly/hero/FloatingPill.tsx","content":"$92","type":"registry:component","target":"@components/marketly/hero/FloatingPill.tsx"},{"path":"components/marketly/hero/HeroCopy.tsx","content":"import { SlashButton } from \"@/components/marketly/ui/SlashButton\";\nimport { hero } from \"@/lib/marketly/data/copy\";\nimport { cn } from \"@/lib/utils\";\n\n/** Scene 1's copy: headline, subhead, the light slash CTA and the small note. */\nexport function HeroCopy({ className }: { className?: string }) {\n return (\n

{hero.title}

{hero.subtitle}

\n \n {hero.cta}\n \n

{hero.note}

\n );\n}\n","type":"registry:component","target":"@components/marketly/hero/HeroCopy.tsx"},{"path":"components/marketly/hero/HeroScroller.tsx","content":"$93","type":"registry:component","target":"@components/marketly/hero/HeroScroller.tsx"},{"path":"components/marketly/hero/PlatformVideo.tsx","content":"$94","type":"registry:component","target":"@components/marketly/hero/PlatformVideo.tsx"},{"path":"components/marketly/hero/ShowcaseScene.tsx","content":"$95","type":"registry:component","target":"@components/marketly/hero/ShowcaseScene.tsx"},{"path":"components/marketly/hero/Starfield.tsx","content":"$96","type":"registry:component","target":"@components/marketly/hero/Starfield.tsx"},{"path":"components/marketly/layout/DarkTop.tsx","content":"\"use client\";\n\nimport { useEffect } from \"react\";\n\n/**\n * Marks the document as starting dark (the hero, a sub-page's black band), so the area above the page when the\n * browser overscrolls is black too. Renders nothing.\n */\nexport function DarkTop() {\n useEffect(() => {\n document.documentElement.setAttribute(\"data-dark-top\", \"\");\n return () => document.documentElement.removeAttribute(\"data-dark-top\");\n }, []);\n return null;\n}\n","type":"registry:component","target":"@components/marketly/layout/DarkTop.tsx"},{"path":"components/marketly/layout/Footer.tsx","content":"$97","type":"registry:component","target":"@components/marketly/layout/Footer.tsx"},{"path":"components/marketly/layout/FooterTagline.tsx","content":"import { brand } from \"@/lib/marketly/data/copy\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The full-width tagline band: the brand's line as SVG text stretched to the band's width, in the display font and\n * the current color (so it turns light in the dark theme by itself).\n */\nexport function FooterTagline({ className }: { className?: string }) {\n const text = brand.tagline.join(\" \");\n return (\n

\n \n

\n );\n}\n","type":"registry:component","target":"@components/marketly/layout/FooterTagline.tsx"},{"path":"components/marketly/layout/Header.tsx","content":"$98","type":"registry:component","target":"@components/marketly/layout/Header.tsx"},{"path":"components/marketly/layout/HeaderBackdrop.tsx","content":"/**\n * The 120px dark-to-transparent gradient behind the header. It travels with the sticky header and keeps the white\n * text readable over the hero and the dark bands; the header hides it once it has turned white over the sheet.\n */\nexport function HeaderBackdrop() {\n return

;\n}\n","type":"registry:component","target":"@components/marketly/layout/HeaderBackdrop.tsx"},{"path":"components/marketly/layout/LangMenu.tsx","content":"$99","type":"registry:component","target":"@components/marketly/layout/LangMenu.tsx"},{"path":"components/marketly/layout/Logo.tsx","content":"$9a","type":"registry:component","target":"@components/marketly/layout/Logo.tsx"},{"path":"components/marketly/layout/MarketlyShell.tsx","content":"$9b","type":"registry:component","target":"@components/marketly/layout/MarketlyShell.tsx"},{"path":"components/marketly/layout/MegaMenu.tsx","content":"$9c","type":"registry:component","target":"@components/marketly/layout/MegaMenu.tsx"},{"path":"components/marketly/layout/MobileDrawer.tsx","content":"$9d","type":"registry:component","target":"@components/marketly/layout/MobileDrawer.tsx"},{"path":"components/marketly/layout/RocketIllustration.tsx","content":"$9e","type":"registry:component","target":"@components/marketly/layout/RocketIllustration.tsx"},{"path":"components/marketly/layout/SearchDialog.tsx","content":"$9f","type":"registry:component","target":"@components/marketly/layout/SearchDialog.tsx"},{"path":"components/marketly/layout/SearchTrigger.tsx","content":"$a0","type":"registry:component","target":"@components/marketly/layout/SearchTrigger.tsx"},{"path":"components/marketly/layout/Sheet.tsx","content":"import { cn } from \"@/lib/utils\";\n\n/**\n * The white \"sheet\" the page content sits on: rounded top corners that overlap the dark stage above it by 32px.\n * The header watches for it (`data-sheet`) and turns white the moment the sheet reaches it.\n */\nexport function Sheet({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n

\n {children}\n

\n );\n}\n","type":"registry:component","target":"@components/marketly/layout/Sheet.tsx"},{"path":"components/marketly/layout/ThemeProvider.tsx","content":"$a1","type":"registry:component","target":"@components/marketly/layout/ThemeProvider.tsx"},{"path":"components/marketly/layout/UserMenu.tsx","content":"$a2","type":"registry:component","target":"@components/marketly/layout/UserMenu.tsx"},{"path":"components/marketly/pages/BrokersContent.tsx","content":"$a3","type":"registry:component","target":"@components/marketly/pages/BrokersContent.tsx"},{"path":"components/marketly/pages/IdeasGrid.tsx","content":"$a4","type":"registry:component","target":"@components/marketly/pages/IdeasGrid.tsx"},{"path":"components/marketly/pages/MarketsNav.tsx","content":"$a5","type":"registry:component","target":"@components/marketly/pages/MarketsNav.tsx"},{"path":"components/marketly/pages/NewsContent.tsx","content":"$a6","type":"registry:component","target":"@components/marketly/pages/NewsContent.tsx"},{"path":"components/marketly/pages/PricingContent.tsx","content":"$a7","type":"registry:component","target":"@components/marketly/pages/PricingContent.tsx"},{"path":"components/marketly/routes/brokers.tsx","content":"import { Sheet } from \"@/components/marketly/layout/Sheet\";\nimport { BrokersContent } from \"@/components/marketly/pages/BrokersContent\";\nimport { PageHeader } from \"@/components/marketly/ui/PageHeader\";\nimport { pages } from \"@/lib/marketly/data/copy\";\nimport { getBrokers } from \"@/lib/marketly/api\";\n\nexport async function BrokersPage() {\n const brokers = await getBrokers();\n return (\n <>\n \n \n \n \n \n );\n}\n","type":"registry:component","target":"@components/marketly/routes/brokers.tsx"},{"path":"components/marketly/routes/features.tsx","content":"$a8","type":"registry:component","target":"@components/marketly/routes/features.tsx"},{"path":"components/marketly/routes/home.tsx","content":"$a9","type":"registry:component","target":"@components/marketly/routes/home.tsx"},{"path":"components/marketly/routes/ideas.tsx","content":"import { Sheet } from \"@/components/marketly/layout/Sheet\";\nimport { IdeasGrid } from \"@/components/marketly/pages/IdeasGrid\";\nimport { PageHeader } from \"@/components/marketly/ui/PageHeader\";\nimport { pages } from \"@/lib/marketly/data/copy\";\nimport { getAllIdeas } from \"@/lib/marketly/api\";\n\nexport async function IdeasPage() {\n const ideas = await getAllIdeas();\n return (\n <>\n \n \n \n \n \n );\n}\n","type":"registry:component","target":"@components/marketly/routes/ideas.tsx"},{"path":"components/marketly/routes/markets.tsx","content":"$aa","type":"registry:component","target":"@components/marketly/routes/markets.tsx"},{"path":"components/marketly/routes/news.tsx","content":"import { Sheet } from \"@/components/marketly/layout/Sheet\";\nimport { NewsContent } from \"@/components/marketly/pages/NewsContent\";\nimport { PageHeader } from \"@/components/marketly/ui/PageHeader\";\nimport { pages } from \"@/lib/marketly/data/copy\";\nimport { getNews } from \"@/lib/marketly/api\";\n\nexport async function NewsPage() {\n const [top, stocks, crypto, forex, futures] = await Promise.all([getNews(\"top\"), getNews(\"stocks\"), getNews(\"crypto\"), getNews(\"forex\"), getNews(\"futures\")]);\n const byCategory = { Top: top, Stocks: stocks, Crypto: crypto, Forex: forex, Economy: futures, Earnings: stocks.slice(3) };\n return (\n <>\n \n \n \n \n \n );\n}\n","type":"registry:component","target":"@components/marketly/routes/news.tsx"},{"path":"components/marketly/routes/not-found.tsx","content":"$ab","type":"registry:component","target":"@components/marketly/routes/not-found.tsx"},{"path":"components/marketly/routes/pricing.tsx","content":"import { Sheet } from \"@/components/marketly/layout/Sheet\";\nimport { PricingContent } from \"@/components/marketly/pages/PricingContent\";\nimport { PageHeader } from \"@/components/marketly/ui/PageHeader\";\nimport { pages } from \"@/lib/marketly/data/copy\";\nimport { getPlans } from \"@/lib/marketly/api\";\n\nexport async function PricingPage() {\n const { plans, comparison, faq } = await getPlans();\n return (\n <>\n \n \n \n \n \n );\n}\n","type":"registry:component","target":"@components/marketly/routes/pricing.tsx"},{"path":"components/marketly/routes/signin.tsx","content":"$ac","type":"registry:component","target":"@components/marketly/routes/signin.tsx"},{"path":"components/marketly/sections/BrokerCard.tsx","content":"$ad","type":"registry:component","target":"@components/marketly/sections/BrokerCard.tsx"},{"path":"components/marketly/sections/EarningsCalendar.tsx","content":"$ae","type":"registry:component","target":"@components/marketly/sections/EarningsCalendar.tsx"},{"path":"components/marketly/sections/EconomicCalendar.tsx","content":"$af","type":"registry:component","target":"@components/marketly/sections/EconomicCalendar.tsx"},{"path":"components/marketly/sections/Economy.tsx","content":"$b0","type":"registry:component","target":"@components/marketly/sections/Economy.tsx"},{"path":"components/marketly/sections/FeaturedIpos.tsx","content":"$b1","type":"registry:component","target":"@components/marketly/sections/FeaturedIpos.tsx"},{"path":"components/marketly/sections/GainersLosers.tsx","content":"$b2","type":"registry:component","target":"@components/marketly/sections/GainersLosers.tsx"},{"path":"components/marketly/sections/IdeaCard.tsx","content":"$b3","type":"registry:component","target":"@components/marketly/sections/IdeaCard.tsx"},{"path":"components/marketly/sections/IdeasSection.tsx","content":"$b4","type":"registry:component","target":"@components/marketly/sections/IdeasSection.tsx"},{"path":"components/marketly/sections/IpoCard.tsx","content":"$b5","type":"registry:component","target":"@components/marketly/sections/IpoCard.tsx"},{"path":"components/marketly/sections/MarketCategory.tsx","content":"$b6","type":"registry:component","target":"@components/marketly/sections/MarketCategory.tsx"},{"path":"components/marketly/sections/MarketSummary.tsx","content":"$b7","type":"registry:component","target":"@components/marketly/sections/MarketSummary.tsx"},{"path":"components/marketly/sections/NewsList.tsx","content":"$b8","type":"registry:component","target":"@components/marketly/sections/NewsList.tsx"},{"path":"components/marketly/sections/PerformanceBars.tsx","content":"$b9","type":"registry:component","target":"@components/marketly/sections/PerformanceBars.tsx"},{"path":"components/marketly/sections/TradingBrokers.tsx","content":"$ba","type":"registry:component","target":"@components/marketly/sections/TradingBrokers.tsx"},{"path":"components/marketly/sections/WorldMap.tsx","content":"$bb","type":"registry:component","target":"@components/marketly/sections/WorldMap.tsx"},{"path":"components/marketly/ui/accordion.tsx","content":"$bc","type":"registry:component","target":"@components/marketly/ui/accordion.tsx"},{"path":"components/marketly/ui/BrandIcon.tsx","content":"$bd","type":"registry:component","target":"@components/marketly/ui/BrandIcon.tsx"},{"path":"components/marketly/ui/button.tsx","content":"$be","type":"registry:component","target":"@components/marketly/ui/button.tsx"},{"path":"components/marketly/ui/Card.tsx","content":"import Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n children: React.ReactNode;\n className?: string;\n /** Makes the card a link; its border darkens on hover. */\n href?: string;\n title?: string;\n as?: \"div\" | \"article\" | \"section\" | \"li\";\n};\n\n/** The white card: hairline border, 16px radius, 16px padding, no shadow. */\nexport function Card({ children, className, href, title, as: Tag = \"div\" }: Props) {\n if (href) {\n return (\n \n {children}\n \n );\n }\n return (\n \n {title &&

{title}

}\n {children}\n \n );\n}\n","type":"registry:component","target":"@components/marketly/ui/Card.tsx"},{"path":"components/marketly/ui/Carousel.tsx","content":"$bf","type":"registry:component","target":"@components/marketly/ui/Carousel.tsx"},{"path":"components/marketly/ui/CarouselArrow.tsx","content":"$c0","type":"registry:component","target":"@components/marketly/ui/CarouselArrow.tsx"},{"path":"components/marketly/ui/Change.tsx","content":"import { cn } from \"@/lib/utils\";\nimport { formatPct, signClass } from \"@/lib/marketly/format\";\n\n/** A percentage change, green when positive, red when negative, plain at zero; always a real minus sign. */\nexport function Change({ value, digits = 2, className }: { value: number; digits?: number; className?: string }) {\n return (\n \n {formatPct(value, digits)}\n \n );\n}\n","type":"registry:component","target":"@components/marketly/ui/Change.tsx"},{"path":"components/marketly/ui/dialog.tsx","content":"$c1","type":"registry:component","target":"@components/marketly/ui/dialog.tsx"},{"path":"components/marketly/ui/Empty.tsx","content":"import { sections } from \"@/lib/marketly/data/copy\";\nimport { cn } from \"@/lib/utils\";\n\n/** The empty state every list shares: a quiet centered line. */\nexport function Empty({ className, children = sections.empty }: { className?: string; children?: React.ReactNode }) {\n return (\n

{children}

\n );\n}\n","type":"registry:component","target":"@components/marketly/ui/Empty.tsx"},{"path":"components/marketly/ui/Flag.tsx","content":"$c2","type":"registry:component","target":"@components/marketly/ui/Flag.tsx"},{"path":"components/marketly/ui/Icon.tsx","content":"$c3","type":"registry:component","target":"@components/marketly/ui/Icon.tsx"},{"path":"components/marketly/ui/PageHeader.tsx","content":"import { DarkTop } from \"@/components/marketly/layout/DarkTop\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A sub-page's opening: a black band under the dark header with the H1 at 36/44 and a 20px subtitle, left-aligned\n * or centered. The page's content follows on a `Sheet`, whose rounded corners overlap the band.\n */\nexport function PageHeader({ title, subtitle, centered = false, className, children }: { title: string; subtitle?: string; centered?: boolean; className?: string; children?: React.ReactNode }) {\n return (\n

\n \n

{title}

\n {subtitle &&

{subtitle}

}\n {children}\n

\n );\n}\n","type":"registry:component","target":"@components/marketly/ui/PageHeader.tsx"},{"path":"components/marketly/ui/PillTabs.tsx","content":"$c4","type":"registry:component","target":"@components/marketly/ui/PillTabs.tsx"},{"path":"components/marketly/ui/popover.tsx","content":"$c5","type":"registry:component","target":"@components/marketly/ui/popover.tsx"},{"path":"components/marketly/ui/ProgressBar.tsx","content":"$c6","type":"registry:component","target":"@components/marketly/ui/ProgressBar.tsx"},{"path":"components/marketly/ui/SectionHeading.tsx","content":"$c7","type":"registry:component","target":"@components/marketly/ui/SectionHeading.tsx"},{"path":"components/marketly/ui/SeeAllLink.tsx","content":"import Link from \"next/link\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/** \"See all major indices ›\": 16px semibold blue with a 16px chevron, darker on hover. Wraps on narrow screens. */\nexport function SeeAllLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {\n return (\n \n {children}\n \n \n );\n}\n","type":"registry:component","target":"@components/marketly/ui/SeeAllLink.tsx"},{"path":"components/marketly/ui/sheet.tsx","content":"$c8","type":"registry:component","target":"@components/marketly/ui/sheet.tsx"},{"path":"components/marketly/ui/Skeleton.tsx","content":"$c9","type":"registry:component","target":"@components/marketly/ui/Skeleton.tsx"},{"path":"components/marketly/ui/SlashButton.tsx","content":"$ca","type":"registry:component","target":"@components/marketly/ui/SlashButton.tsx"},{"path":"components/marketly/ui/Sparkline.tsx","content":"$cb","type":"registry:component","target":"@components/marketly/ui/Sparkline.tsx"},{"path":"components/marketly/ui/switch.tsx","content":"$cc","type":"registry:component","target":"@components/marketly/ui/switch.tsx"},{"path":"components/marketly/ui/SymbolLogo.tsx","content":"$cd","type":"registry:component","target":"@components/marketly/ui/SymbolLogo.tsx"},{"path":"components/marketly/ui/SymbolRow.tsx","content":"$ce","type":"registry:component","target":"@components/marketly/ui/SymbolRow.tsx"},{"path":"components/marketly/ui/TickerChip.tsx","content":"import { cn } from \"@/lib/utils\";\n\n/** `NDX`-style ticker chip: 12px bold uppercase on the chip background, 4px radius. */\nexport function TickerChip({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"@components/marketly/ui/TickerChip.tsx"},{"path":"lib/marketly/api.ts","content":"$cf","type":"registry:lib","target":"@lib/marketly/api.ts"},{"path":"lib/marketly/data/copy.ts","content":"$d0","type":"registry:lib","target":"@lib/marketly/data/copy.ts"},{"path":"lib/marketly/data/mock.ts","content":"$d1","type":"registry:lib","target":"@lib/marketly/data/mock.ts"},{"path":"lib/marketly/data/nav.ts","content":"$d2","type":"registry:lib","target":"@lib/marketly/data/nav.ts"},{"path":"lib/marketly/data/types.ts","content":"$d3","type":"registry:lib","target":"@lib/marketly/data/types.ts"},{"path":"lib/marketly/format.ts","content":"$d4","type":"registry:lib","target":"@lib/marketly/format.ts"},{"path":"lib/marketly/hooks.ts","content":"$d5","type":"registry:lib","target":"@lib/marketly/hooks.ts"}],"className":"h-[70svh] min-h-80"}]