Skip to content

Commit

Permalink
nav update
Browse files Browse the repository at this point in the history
  • Loading branch information
mitchpolygon committed Nov 26, 2024
1 parent 9408bf6 commit 2848688
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 103 deletions.
File renamed without changes.
File renamed without changes.
219 changes: 116 additions & 103 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,20 @@ hide:
.hero-content-flex {
bottom: 5px;
}

.feature-paragraph {
margin-top: 0.5rem;
line-height: 1.5;
}

.card-header {
display: flex;
align-items: center;
}

.card-header img {
margin-right: 10px;
}
</style>

<div class="main">
Expand All @@ -21,129 +35,128 @@ hide:
<div class="hero-content-flex">
<div class="hero-left">
<h1 class="hero-heading">The Polygon Knowledge Layer</h1>
<p class="hero-subtext">Welcome to the technical documentation and knowledge resources for Polygon protocols and scaling technologies.</p>
<p class="hero-subtext">Learn how to build and deploy dApps, launch ZK rollups and validiums as Layer 2s on Ethereum, spin up nodes, and find out about the latest in zero-knowledge research.</p>
<p class="hero-subtext">
Welcome to the technical documentation and knowledge resources for Polygon protocols and scaling technologies.
</p>
<p class="hero-subtext">
Learn how to build and deploy dApps, launch ZK rollups and validiums as Layer 2s on Ethereum, spin up nodes, and find out about the latest in zero-knowledge research.
</p>
</div>
<div class="hero-right">
<img src="img/home/main-img.svg" loading="lazy" alt="Main Illustration" class="hero-image">
<img src="img/home/main-img.svg" alt="Main Graphic" class="hero-image" loading="lazy">
</div>
</div>
</div>
</div>
</header>

<!-- Build Section -->
<section class="section">
<div class="container-global">
<div class="section-wrapper">
<div class="flexbox-2-col">
<div class="flex-card-child">
<div class="flex-card-item header-item">
<div class="product-list-header">
<img width="24px" src="img/home/build-icon.svg" loading="lazy" alt="Build Icon">
<h3 class="heading-h3 margin-none">BUILD</h3>
</div>
<p class="feature-paragraph">Build today using Polygon technology. Select the protocol that best fits your needs.</p>

<!-- AggLayer Section -->
<a href="agglayer/overview" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">AggLayer</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
</div>
<p class="feature-paragraph">Introducing the multi-chain, multi-transaction Polygon AggLayer: what it is and how it works.</p>
</a>
</div>

<!-- Polygon PoS Section -->
<a href="pos" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Polygon PoS</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
<div class="status-tag">LIVE</div>
</div>
<p class="feature-paragraph">Deploy a dApp on the widely adopted Polygon Proof-of-Stake protocol, an EVM-compatible environment optimized for high throughput and low transaction fees.</p>
</a>

<!-- zkEVM Section -->
<a href="zkEVM" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Polygon zkEVM</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
<div class="status-tag">LIVE</div>
</div>
<p class="feature-paragraph">Deploy a dApp or build infrastructure on zkEVM, an EVM-equivalent ZK rollup designed for security.</p>
</a>
<div class="card">
<h3 class="card-header">
<img src="img/home/build-icon.svg" alt="Build Icon" width="24">
BUILD
</h3>
<p class="feature-paragraph">
Build today using Polygon technology. Select the protocol that best fits your needs.
</p>
<ul>
<li>
<a href="agglayer/overview">
AggLayer
</a> - Introducing the multi-chain, multi-transaction Polygon AggLayer: what it is and how it works.
</li>
<li>
<a href="pos">
Polygon PoS
</a> - Deploy a dApp on the widely adopted Polygon Proof-of-Stake protocol, optimized for high throughput and low fees.
</li>
<li>
<a href="zkEVM">
Polygon zkEVM
</a> - Build on an EVM-equivalent ZK rollup designed for security and scalability.
</li>
<li>
<a href="cdk">
Polygon CDK
</a> - Build a zero-knowledge Layer 2 blockchain on Ethereum. Learn about validium, rollup modes, and more.
</li>
</ul>
</div>
</div>
</div>
</section>

<!-- Polygon CDK Section -->
<a href="cdk" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Polygon CDK</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
<div class="status-tag">LIVE</div>
</div>
<p class="feature-paragraph">Build and test a zero-knowledge Layer 2 blockchain on Ethereum. Learn about validium and rollup modes, custom native gas tokens, and more.</p>
</a>
</div>
<!-- Learn Section -->
<section class="section">
<div class="container-global">
<div class="section-wrapper">
<div class="card">
<h3 class="card-header">
<img src="img/home/learn-icon.svg" alt="Learn Icon" width="24">
LEARN
</h3>
<p class="feature-paragraph">
Deep dives into Polygon scaling technologies and innovations.
</p>
<ul>
<li>
<a href="innovation-design">
Innovation & Design
</a> - Explore foundational concepts and previews of upcoming Polygon innovations.
</li>
<li>
<a href="cdk/architecture/type-1-prover/intro-t1-prover">
Type 1 Prover
</a> - Understand the Type 1 proving component used for ZK-EVM chains.
</li>
<li>
<a href="./innovation-design/plonky">
Plonky 2 & 3
</a> - Learn about Polygon’s latest cryptographic advancements.
</li>
<li>
<a href="innovation-design/polygon-protocols">
Polygon Protocols
</a> - Detailed guides and decision matrices for navigating the Polygon ecosystem.
</li>
</ul>
</div>
</div>
</div>
</section>

<!-- Additional Resources Section -->
<!-- Developer Resources Section -->
<section class="section">
<div class="container-global">
<div class="section-wrapper">
<div class="home-dev-resources">
<div class="section-header-wrapper">
<h2 class="heading-h2">Developer Resources</h2>
<p class="home-section-subtext">For developers who know what they want to build and are ready to go.</p>
</div>
<div class="flexbox">
<a href="/tools/" class="home-feature-card w-inline-block">
<img src="img/home/build.svg" loading="lazy" alt="Developer Tools" class="feature-icon">
<div class="feature-content">
<div class="feature-content-wrapper">
<div class="feature-content-name">Developer Tools</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
</div>
<p class="paragraph-small">RPC providers, faucets, data indexing, Web3 dApp development SDKs, block explorers, storage, and more.</p>
</div>
</a>
<a href="https://ecosystem.polygon.technology/spn/explore/" class="home-feature-card w-inline-block">
<img src="img/home/network.svg" loading="lazy" alt="Solution Provider Network" class="feature-icon">
<div class="feature-content">
<div class="feature-content-wrapper">
<div class="feature-content-name">Solution Provider Network</div>
<div class="arrow-embed w-embed">
<svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewBox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg>
</div>
</div>
<p class="paragraph-small">Searchable catalog of tooling and infrastructure for developers.</p>
</div>
</a>
</div>
<div class="card">
<h3 class="card-header">
<img src="img/home/resources-icon.svg" alt="Resources Icon" width="24">
DEVELOPER RESOURCES
</h3>
<p class="feature-paragraph">
For developers ready to build, featuring essential tools and documentation.
</p>
<ul>
<li>
<a href="/tools/">
Developer Tools
</a> - Access RPC providers, faucets, SDKs, block explorers, and more.
</li>
<li>
<a href="./zkEVM/how-to/write-contract">
Write a zkEVM Contract
</a> - Step-by-step guidance for writing contracts on zkEVM.
</li>
<li>
<a href="https://ecosystem.polygon.technology/spn/explore/">
Solution Provider Network
</a> - Explore tooling and infrastructure in a searchable catalog.
</li>
</ul>
</div>
</div>
</div>
Expand Down

0 comments on commit 2848688

Please sign in to comment.