Skip to content

fix: update home page style and content #1862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
it09 wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

fix: update home page style and content #1862

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b05721d
reviewed homepage"
it09 Feb 9, 2026
f228af4
fix
it09 Feb 17, 2026
1c95e69
fix
it09 Feb 17, 2026
67c9213
Merge branch 'main' into it09-home-fix
it09 Feb 17, 2026
2472a21
empty, to rerun mintlify checks
novusnota Feb 18, 2026
5b5ad0a
Merge branch 'main' into it09-home-fix
novusnota Feb 18, 2026
c6784ef
fix alignement
it09 Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
270 changes: 123 additions & 147 deletions index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
title: "Welcome to TON Blockchain documentation"
description: "Meet the next generation of TON documentation. AI-native, beautiful out-of-the-box, and built for developers."
title: "TON documentation"
description: "TON is a blockchain platform designed for scalable smart contracts, applications, and payments at consumer scale."
mode: "custom"
"og:image": "resources/logo/og-image.png"
"twitter:image": "resources/logo/og-image.png"
---

export const Journey = ({ title, description, children }) => {
return (
<div className="card block font-normal group mt-4 px-8 pt-8 pb-6 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 w-full">
<h3 className="mb-2 text-balance text-xl sm:text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
<div className="card block font-normal group mt-2 px-6 pt-5 pb-4 ring-2 ring-transparent rounded-2xl !bg-transparent border border-gray-950/10 dark:border-white/10 w-full max-full">
<h3 className="mb-1 text-balance text-base sm:text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
{title}
</h3>
<p className="text-pretty text-lg prose prose-gray dark:prose-invert">
<p className="text-pretty text-base prose prose-gray dark:prose-invert">
{description}
</p>
{children && (
<div className="mt-4 overflow-x-auto no-scrollbar">
<div className="flex flex-row gap-4 py-2 first:ml-2">
<div className="mt-2 overflow-x-auto no-scrollbar">
<div className="flex flex-row gap-4 py-1">
{children}
</div>
</div>
Expand All @@ -30,7 +30,7 @@ export const JourneyStep = ({ title, icon, iconType, href, cta, children }) => {
return (
<div className="flex-none w-52 max-h-64">
<a
className="card block font-normal group ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full h-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light"
className="card block font-normal group ring-2 ring-transparent rounded-2xl !bg-transparent border border-gray-950/10 dark:border-white/10 overflow-hidden w-full h-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light"
{...(href && { href: href })}
>
<div className="px-6 py-5 h-full flex flex-col" data-component-part="card-content-container">
Expand Down Expand Up @@ -68,40 +68,34 @@ export const JourneyStep = ({ title, icon, iconType, href, cta, children }) => {
/>
</div>
{/* content */}
<div className="py-16 sm:py-24 lg:py-32 flex flex-col lg:flex-row lg:items-center lg:gap-16 xl:gap-24">
<div className="py-8 sm:py-12 lg:py-16 flex flex-col lg:flex-row lg:items-start lg:gap-0 xl:gap-0">
<div className="w-full lg:flex-[2] mx-auto lg:mx-0 lg:max-w-2xl">
<div className="text-left">
<h1
className="text-balance text-4xl sm:mt-16 sm:text-7xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
className="text-balance text-4xl sm:text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
>
Welcome to<br />TON&nbsp;Blockchain<br />documentation
TON documentation
</h1>
<p
className="mt-8 max-w-xl text-pretty text-xl sm:text-2xl prose prose-gray dark:prose-invert"
className="mt-8 max-w-xl text-pretty text-xl sm:text-xl prose prose-gray dark:prose-invert"
>
Meet the AI-native, beautiful and comprehensive documentation covering foundations, tools, languages, and APIs.
TON is a blockchain platform designed for scalable smart contracts, applications, and payments at consumer scale.
</p>
<div className="mt-8 flex items-center gap-x-6">
<a
<div className="mt-8 flex items-center gap-x-6">
{/* <a
href="/start-here"
className="rounded-md bg-primary hover:bg-primary/60 px-3.5 py-2.5 text-base sm:text-lg font-semibold text-white shadow-sm"
className="rounded-md bg-primary hover:bg-primary/60 px-3.5 py-2.5 text-base sm:text-base font-semibold text-white shadow-sm"
>
Learn TON in Y minutes
</a>
<a
href="#journeys"
className="font-semibold text-base sm:text-lg prose-gray dark:prose-invert"
>
Or choose a path <span aria-hidden="true">→</span>
</a>
Learn TON
</a> */}
</div>
</div>
</div>
<div className="hidden lg:flex w-full" >
<div className="hidden lg:flex justify-end" >
<img
src="/resources/logo/ton.svg"
alt="TON logo"
className="w-full"
className="h-32 w-auto"
noZoom="true"
/>
</div>
Expand All @@ -119,142 +113,124 @@ export const JourneyStep = ({ title, icon, iconType, href, cta, children }) => {
</div>

{/* journeys */}
<section
id="journeys"
tabIndex={-1}
className="relative mt-16 py-12 sm:py-24 flex flex-col gap-8 focus:outline-none dark:focus:outline-none"
>
<div className="text-left">
<h2
className="text-balance text-2xl sm:text-5xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
>
Choose your path
</h2>
<p className="mt-4 text-pretty text-lg sm:text-xl prose prose-gray dark:prose-invert">
Embark on a journey tailored to your role, experience, and intent.
</p>
</div>
<Journey
title="Freshman"
description="Learn the fundamentals of TON Blockchain. Perfectly suited for newcomers who explore the web3 world through TON."
<section
id="journeys"
tabIndex={-1}
className="relative mt-0 py-0 sm:py-2 flex flex-col gap-4 focus:outline-none dark:focus:outline-none"
>
<JourneyStep
title="How to read this documentation?"
icon="1"
iconType="solid"
href="/start-here"
cta="Start here"
/>
<JourneyStep
title="What is blockchain?"
icon="2"
iconType="solid"
href="/foundations/glossary#blockchain"
/>
<JourneyStep
title="What is a smart contract on TON?"
icon="3"
iconType="solid"
href="/foundations/glossary#smart-contract"
/>
<JourneyStep
title="Writing your first smart contract"
icon="4"
iconType="solid"
href="/contract-dev/first-smart-contract"
/>
{/* <JourneyStep
title="What is a dApp?"
icon="5"
iconType="solid"
href="/foundations/glossary#decentralized-application-dapp"
/>
<JourneyStep
title="Your first dApp on TON"
icon="6"
iconType="solid"
href="/guides/first-dapp"
/> */}
</Journey>
<Journey
title="Nomad"
description="For those coming from another blockchain. Study how things work on TON in comparison and go through hands-on guides for migration."
>
<JourneyStep
title="Coming from Ethereum"
icon="ethereum"
iconType="solid"
href="/from-ethereum"
>
Compare the execution model and the ecosystem of TON
</JourneyStep>
<JourneyStep
title="Your first smart contract"
icon="file"
iconType="solid"
href="/contract-dev/first-smart-contract"
>
Write and deploy a contract that can be interacted with
</JourneyStep>
</Journey>
<Journey
title="Ace"
description="For amateurs, experts, and learners alike. Take a deep dive into the low-level details, or do a quick reference check and return to your project."
>
<JourneyStep
title="Blueprint"
href="/contract-dev/blueprint/overview"
>
Development environment
</JourneyStep>
<JourneyStep
title="TVM Exit codes"
href="/tvm/exit-codes"
>
Complete list of compute phase exit codes
</JourneyStep>
<JourneyStep
title="TVM Instructions"
href="/tvm/instructions"
<div className="flex flex-col gap-4">
<div className="text-left">
<h2
className="text-balance text-xl sm:text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
>
Choose your path
</h2>
</div>
<Journey
title="Beginner"
description="TON fundamentals for newcomers entering Web3 through TON."
>
Complete list of instructions and opcodes
</JourneyStep>
<JourneyStep
title="API providers"
href="/ecosystem/api/overview"
<JourneyStep
title="How to read this documentation?"
iconType="solid"
href="/start-here"
/>
<JourneyStep
title="Writing your first smart contract"
iconType="solid"
href="/contract-dev/first-smart-contract"
/>
<JourneyStep
title="Using a TON wallet"
iconType="solid"
href="/ecosystem/wallet-apps/tonkeeper"
/>
<JourneyStep
title="Introduction to Tolk"
iconType="solid"
href="/languages/tolk/overview"
/>
</Journey>
<Journey
title="Apps"
description="Everything you need to build applications on TON."
>
TON Center v2 and v3, and others
</JourneyStep>
<JourneyStep
title="TON Connect"
href="/ecosystem/ton-connect"
<JourneyStep
title="Connect wallets to your app"
iconType="solid"
href="/ecosystem/ton-connect/overview"
>
</JourneyStep>
<JourneyStep
title="Access the blockchain via APIs"
iconType="solid"
href="/ecosystem/api/overview"
>
</JourneyStep>
<JourneyStep
title="Build apps using SDKs"
iconType="solid"
href="/ecosystem/sdks"
>
</JourneyStep>
</Journey>
<Journey
title="Smart Contracts"
description="Build, debug, and deploy smart contracts on TON."
>
Integrate TON into dApps and wallets
</JourneyStep>
<JourneyStep
title="Blockchain nodes"
href="/ecosystem/nodes/overview"
<JourneyStep
title="Tools to build"
href="/contract-dev/blueprint/overview"
>
</JourneyStep>
<JourneyStep
title="TVM Exit codes"
href="/tvm/exit-codes"
>
</JourneyStep>
<JourneyStep
title="TVM Instructions"
href="/tvm/instructions"
>
</JourneyStep>
<JourneyStep
title="Debugging smart contracts"
href="/contract-dev/debug"
>
</JourneyStep>
</Journey>
<Journey
title="Nodes"
description="Run, manage TON blockchain nodes."
>
Pick the right kind and setup your node
</JourneyStep>
</Journey>
<div className="text-left sm:text-center">
<p className="mt-4 text-pretty text-base sm:text-lg prose prose-gray dark:prose-invert">
Looking for something else? Search documentation with <kbd>Ctrl&nbsp;+&nbsp;K</kbd> and ask AI right there,
or open the assistant panel by pressing <kbd>Ctrl&nbsp;+&nbsp;I</kbd>. If nothing was found, <a href="#community" className="font-normal text-base sm:text-lg">ask the community</a> of TON developers, builders and enthusiasts.
</p>
<JourneyStep
title="Validator node"
href="/ecosystem/node/overview"
>
</JourneyStep>
<JourneyStep
title="MyTonCtrl"
href="/ecosystem/node/setup-mytonctrl"
>
</JourneyStep>
</Journey>
<div className="text-left">
<p className="mt-4 text-pretty text-base sm:text-lg prose prose-gray dark:prose-invert">
Can’t find what you need? Use <kbd>Ctrl + K</kbd> to search and ask AI, or <kbd>Ctrl + I</kbd> to open the assistant panel. Still stuck? <a href="#community" className="font-normal text-base sm:text-lg">Ask the TON community</a>
</p>
</div>
</div>
</section>

{/* community */}
<section
id="community"
tabIndex={-1}
className="relative mt-16 py-12 sm:py-24 flex flex-col gap-8 focus:outline-none dark:focus:outline-none"
className="relative mt-1 py-1 sm:py-6 flex flex-col gap-8 focus:outline-none dark:focus:outline-none"
>
<div className="text-left">
<h2
className="text-balance text-2xl sm:text-5xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
className="text-balance text-2xl sm:text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-200"
>
Join the community
</h2>
Expand Down