# Marketly – Trading platform landing page

> A trading-platform landing page with a scroll-pinned 3D Earth, market charts, ideas, news and brokers, plus 8 more pages (pricing, markets, sign-in…). Next.js 16, Tailwind CSS 4, shadcn/ui, light and dark themes.

- Kind: Landing page
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: trading, fintech, stock-market, crypto, 3d-globe, nextjs, threejs, dark-mode
- Latest release: 1.0.0 (Any system)
- Published: 2026-10-02
- Updated: 2026-10-02
- Page: https://upfork.dev/products/marketly

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/marketly
```

Every install uses the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

## What it is

Marketly is a landing page for a trading or market-data product, with the pages that come with it. Its hero is a scroll-pinned 3D Earth turning from the evening light into the night: land and clouds show through a blue veil of air, towns light up one by one as they cross into darkness, and price charts rise off one city's lights and land on another's. As you scroll, the headline drifts away and a product showcase pins in its place.

Everything is built to be re-skinned: every color, size, radius and shadow is a design token, every section is fed by typed mock data, and all the copy lives in one file.

## What's included

- **The landing page:** the 3D Earth hero, a market summary with an intraday chart, featured IPOs, community ideas, indicators and strategies, top stories, market blocks for US stocks, crypto, futures and forex, the economy with a global inflation map and an economic calendar, and brokers
- **8 more pages:** Pricing (monthly and yearly), Markets, Ideas, Brokers, Features, News, Sign in and a 404
- **The header:** transparent over dark surfaces and white over the page, with mega menus, search (Ctrl+K), a language menu and a full-screen menu on phones
- **Light and dark themes**, with no flash on load
- **A data layer** (`lib/api.ts`) over typed mock JSON, ready to point at a real market API
- **A README** on running it, re-skinning it, and replacing the data and media

## Stack

Next.js 16 (App Router, TypeScript), React 19, Tailwind CSS 4, shadcn/ui (Base UI), framer-motion, three.js with React Three Fiber and drei, Embla Carousel, d3-geo and lucide-react.

## Requirements

- Node.js 20.9 or later (22 recommended) and pnpm
- WebGL for the 3D Earth; without it, or on low-memory devices, a still picture of the Earth takes its place

## How to use it

1. Download the ZIP and unzip it.
2. Run `pnpm install`, then `pnpm dev`, and open http://localhost:3000.
3. Make it yours: the name and all the text in `data/copy.ts`, the colors in `styles/themes.css`, the logo in `components/layout/Logo.tsx`.
4. Plug in real data: replace the functions in `lib/api.ts` with calls to your market API, keeping their types.

## Good to know

- Responsive from 390px phones to 1920px screens.
- Accessible: keyboard-friendly menus and carousels, visible focus, and reduced motion respected (no parallax, no rotation).
- Ready for right-to-left languages: set `dir="rtl"` on `<html>`.
- The name "Marketly", its logo, the mock data and the generated pictures are placeholders for your own. The Earth textures come from NASA (public domain) and the three.js examples (MIT).

## Screenshots

![Marketly – Trading platform landing page, 1](https://upfork.dev/media/01a0fd13-0ba6-7c29-bfde-f00eb28f2f59)
![Marketly – Trading platform landing page, 2](https://upfork.dev/media/01a0fd13-24c7-7b7f-941a-c9f4ae2601c1)
![Marketly – Trading platform landing page, 3](https://upfork.dev/media/01a0fd13-481f-7f42-a8d2-15aaed3a239b)
![Marketly – Trading platform landing page, 4](https://upfork.dev/media/01a0fd13-7664-73b3-a390-33917be05d00)
![Marketly – Trading platform landing page, 5](https://upfork.dev/media/01a0fd13-afc7-7e1d-a465-6efc8cae968a)
![Marketly – Trading platform landing page, 6](https://upfork.dev/media/01a0fd13-d8ca-7294-8f02-a29e90b126d2)
![Marketly – Trading platform landing page, 7](https://upfork.dev/media/01a0fd13-e9e2-7fa7-8ddb-cb794b10bcb3)