ProComes with the Pro plan and every plan after it.UpFork Standard LicenseUse it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.NewFeatured
Marketly – Trading platform landing page
A market-data landing page template with its dependent pages, built to be re-skinned: every color, type size, radius and shadow is a design token, every section is a data-driven component fed by typed mock JSON, and all copy lives in one file.
by UpFork, built by Ramin Valadan·Landing page·Updated 15 Oct 2026
WatchSign in to hear of its updates0Sign in to like itCopy the link to this product
How this landing page gets from the preview into your project, and what buyers ask most.
How to use it
From the preview to your project
01
Try it in the preview
Switch between light and dark, and resize it to phone and tablet widths, before you decide.
02
Get it
Free products are yours with a free account. Paid ones settle in USDT on TRON, sent straight to the wallet on your order.
03
Install it
Components go into your project with one shadcn command, dependencies included. Everything else downloads with a checksum.
04
Make it yours
It's your code now: rename it, restyle it and wire in your real data.
05
Or hand it to your AI
Copy the prompt and let your coding assistant place it in your project, following your conventions.
Yes, a free one: it keeps your order, every payment you make for it and the files together. Free products need it too: without an account you can look and try the live preview, but not download, install or copy anything.
Send the price as a USDT transfer on TRON (TRC-20) to the wallet on your order, shown with its QR code, then paste the transaction ID on the order. It's checked on-chain, and the files unlock once it's confirmed. Paid less? You're asked for the rest.
Yes. The Standard License covers unlimited personal and commercial projects, client work included; just don't resell it on its own. Open-source licenses say so on the product.
Create a CLI token on your account page, put it in your project's .env.local, add UpFork to components.json once, and install with npx shadcn add: free and paid components alike.
Onto your order, in your account. Download links last ten minutes and can be made again.
Releases are scanned for malware and reviewed before anyone can download them, and every file shows its SHA-256 so you can check what you got.
Building with an AI assistant?
Copy a ready-made prompt with the code, its dependencies and a demo, and your assistant can put it in place for you.
Comes with the Pro plan
Selling your own work?
Get approved once, then publish components, templates and mobile components, paid in USDT straight to your own wallet.
A market-data landing page template with its dependent pages, built to be re-skinned: every color,
type size, radius and shadow is a design token, every section is a data-driven component fed by typed mock JSON,
and all copy lives in one file.
A pinned scrollytelling block: a procedurally rendered Earth (day/night textures, city lights, sunrise flare, atmosphere, stars, animated "price lines"), the headline scene parallaxing away while the Earth blurs into a warm bokeh and the showcase title and a glass video frame pin
Header
Transparent with white text over dark surfaces (the hero, the sub-pages' black bands); turns white with dark text the moment the page's white sheet scrolls under it
Themes
Light and dark (data-theme on <html>, persisted, no flash); the hero stays black in both
Responsive
390px phones to 1920px desktops; header collapses to a full-screen drawer below 1024px
A11y
Keyboard-navigable menus and carousels, aria-expanded/role="menu", visible focus rings, prefers-reduced-motion honoured (no parallax, no rotation), RTL-ready logical properties
Node.js 20.9+ (22 recommended) and pnpm. The build fetches the Plus Jakarta Sans font from Google Fonts once; to
go fully offline, switch app/layout.tsx to next/font/local.
Project layout
Reviews and bugs
0 reviews · 0 bugs
Ship it0With fixes0Skip0· 0 reviews
0 bugs0 open0 fixed
Members who have it review it and report its bugs. Sign in
No reviews or bugs yet.
app/ routes: layout (fonts, theme, header, footer), the landing, the sub-pages, not-found
components/
layout/ Header, HeaderBackdrop, MegaMenu, MobileDrawer, LangMenu, UserMenu, Search*, Footer, Logo, ThemeProvider
hero/ HeroScroller (scroll choreography), EarthScene (R3F), Starfield, FloatingPill, PlatformVideo, …
ui/ the kit: SlashButton, Card, SymbolRow, SymbolLogo, TickerChip, PillTabs, Carousel, Sparkline, bars, Skeleton, Empty, …
sections/ MarketSummary, FeaturedIpos, IdeasSection, NewsList, MarketCategory, GainersLosers, EarningsCalendar,
PerformanceBars, Economy (WorldMap, EconomicCalendar), TradingBrokers
pages/ the sub-pages' interactive parts (pricing toggle, ideas grid, brokers filters, news tabs, markets anchors)
data/ types.ts, copy.ts (all text), nav.ts (menus, languages, footer), *.json (mock data), markets/*.json
lib/ api.ts (data layer stubs), format.ts (numbers, %, time ago), hooks.ts, cn.ts
styles/ globals.css (tokens + utilities + the slash button), themes.css (light/dark aliases)
scripts/ generators for the idea thumbnails, the platform poster and the market summary's series
public/ textures/, ideas/, hero/, avatars/
Re-skin it
Brand.data/copy.ts → brand (name, tagline, legal name). The logo mark is components/layout/Logo.tsx
(LogoMark); the browser icon is app/icon.svg.
Palette.styles/globals.css → the @theme block holds the raw scales (--color-cold-gray-*,
--color-brand-*, market greens and reds). styles/themes.css maps them onto roles (--bg-page,
--fg-primary, --link, --border-subtle …) for light and dark. Change the roles to re-color the whole site;
change a scale to swap the brand hue. Components never carry a hex.
Fonts.app/layout.tsx loads the display font (--font-plus-jakarta); the body stack is --font-body in
globals.css. Type sizes are --text-* tokens (text-display, text-h1, text-h2, text-body, text-meta …).
Spacing and shape. Radii (--radius-card, --radius-chip, --radius-pill …), the gutter
(--spacing-gutter, 40px desktop / 16px phones) and shadows are tokens too.
Copy. Everything a visitor reads is in data/copy.ts; menus, languages and footer columns in data/nav.ts.
The footer's legal lines (footer.legal) are placeholders: name your own data providers there.
Direction. The layout uses logical properties (ps-, pe-, start-, end-): set dir="rtl" on <html>
in app/layout.tsx for a right-to-left language.
Replace the mock data
lib/api.ts exposes the data the way a backend would (getMarketSummary(), getMarketCategory("crypto"),
getNews("top"), getBrokers() …) and currently returns the JSON under data/. Replace the function bodies
with fetches (CoinGecko, Binance, Finnhub …) and keep the return types from data/types.ts; no component changes.
The Market summary's charts read plain number lists: the big one is a trading day (hero.spark with
hero.session: the time of the first point and the minutes between points, from which the hourly axis and the
tooltip times are derived), the three small ones a month each. node scripts/gen-market-series.mjs regenerates the
mock curves. Every section also takes a loading prop that renders its skeleton at the same height, and shows "No data here
yet" when a list is empty.
public/hero/platform-poster.png (rendered from the SVG scripts/gen-platform-poster.mjs writes)
Your platform.mp4 / .webm + poster: set the paths in data/copy.ts → hero.platformDemo
Earth fallback (no WebGL / low memory)
public/hero/earth-poster.jpg (a render of the 3D scene)
Any earth-from-orbit clip: hero.earthFallback
Story pill portrait
public/avatars/placeholder.svg
A 44×44 photo: hero.avatar
Idea thumbnails
public/ideas/idea-0*.png (generated by scripts/gen-idea-thumbs.mjs)
Real chart screenshots, referenced from the ideas JSON
The Earth
components/hero/EarthScene.tsx. Camera, sun direction, the spin (axis latitude, speed, starting point), atmosphere
colors, flare size and the line colors are constants at the top of the file. The planet turns about its own axis,
laid 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 the evening light (land, deserts and clouds showing through a blue
veil of air), runs down the frame, crosses the terminator, and its towns light up one by one as they pass into the
night: each cell of NASA's Black Marble switches on at its own moment in the dusk, and up close the lights break
into points of different brightness. Along 37°N the frame sweeps the Mediterranean, Europe, the United States, Japan,
China, India and the Middle East; it starts over the Middle East. The sun sits just behind the horizon with rays all
round, two sets turning slowly against each other.
The "price lines" are charts standing up from the planet: each leaves one lit town, climbs in a jagged rising run
and drops onto another town's lights, which flare up as it lands. The lit spots are read from the night texture
itself; pairs are picked on the visible night side and across the frame, two lines at a time, clear of each other;
each draws in, holds, fades and starts again between two other towns. The scene pauses when the hero leaves the
viewport, renders a single still with prefers-reduced-motion, and hands over to EarthFallbackVideo when WebGL is
unavailable or navigator.deviceMemory < 4. Textures are in public/textures/ (day at 2k, clouds at 1k, night
lights at 4k). EarthSceneLazy loads the three.js chunk separately and mounts the scene after the first idle moment,
so the headline and the rest of the page come first.
Licenses
Earth textures (public/textures/): the day and clouds maps from the
three.js examples (MIT), themselves derived from NASA's Blue Marble; the
night lights downscaled from NASA's Black Marble 2016
(public domain).
World map: world-atlas (ISC), Natural Earth data (public domain).
Font: Plus Jakarta Sans (SIL Open Font License), via next/font/google.
Everything else in this folder is the template itself. The brand name "Marketly", its mark, the mock data and the
generated images are placeholders for you to replace.
The mock data names real companies, tickers and brokers only as sample content; it implies no affiliation or
endorsement, and its prices, ratings, headlines and ideas are made up.
