Skip to content
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

[DO NOT MERGE] P/PS: New Landing Page Proposal #1032

Closed
wants to merge 1 commit into from
Closed

[DO NOT MERGE] P/PS: New Landing Page Proposal #1032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
195 changes: 195 additions & 0 deletions site/docs/pages/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
---
title: OnchainKit
description: React components and TypeScript utilities for top-tier onchain apps.
content:
width: 100%
showOutline: false
---

<div className="w-full flex justify-center items-center">
<div className="w-6/12 py-16">
<div className=" flex justify-center items-center">
<img src="/assets/onchainkit-logomark.svg" />
</div>
<h1 className="text-center pt-6 pb-8 text-lg text-zinc-950">
Build your onchain apps with ready-to-use React components and Typescript utilities.
</h1>
:::code-group

```bash [npm]
npm install @coinbase/onchainkit
```

```bash [yarn]
yarn add @coinbase/onchainkit
```

```bash [pnpm]
pnpm add @coinbase/onchainkit
```

```bash [bun]
bun add @coinbase/onchainkit
```

:::
</div>
</div>

<div className="w-10/12 mx-20">
<h1 className="pt-4 pb-4 text-lg font-bold text-zinc-950 mx-44">
Ready-to-use-components
</h1>
<div className="flex space-x-6 items-center justify-center">
<a href="/wallet/wallet" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/wallet-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Wallet
</h4>
<p className="text-zinc-950 text-sm">
Create or connect wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
</p>
</div>
</a>
<a href="/transaction/transaction" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/transaction-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Transaction
</h4>
<p className="text-zinc-950 text-sm">
Trigger any onchain operation and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
</p>
</div>
</a>
</div>
<div className="flex space-x-6 items-center justify-center mt-4">
<a href="/swap/swap" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/swap-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Swap
</h4>
<p className="text-zinc-950 text-sm">
Create or connect wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
</p>
</div>
</a>
<a href="/token/token-chip" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/token-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Token
</h4>
<p className="text-zinc-950 text-sm">
Trigger any onchain operation and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
</p>
</div>
</a>
</div>
<div className="flex space-x-6 items-center justify-center mt-4">
<a href="/identity/address" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/identity-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Identity
</h4>
<p className="text-zinc-950 text-sm">
Create or connect wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
</p>
</div>
</a>
<a href="/frame-metadata" target="_blank" className="w-4/12 hover:bg-gray-50 p-4 rounded-lg">
<img src="/assets/frame-icon.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Frame
</h4>
<p className="text-zinc-950 text-sm">
Trigger any onchain operation and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
</p>
</div>
</a>
</div>
</div>

<div className="w-10/12 mx-20 my-20">
<h1 className="pt-4 pb-4 text-lg font-bold text-zinc-950 mx-44">
Builders ship faster with OnchainKit
</h1>
<div className="flex space-x-6 items-center justify-center">
<div className="w-4/12 p-4 rounded-lg">
<img src="/assets/party-logo.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Party App
</h4>
<p className="text-zinc-950 text-sm">
“These components will change how easy it is to build stable, reliable components for use onchain”
</p>
<div className="pt-2 text-sm">
[See it live](https://www.party.app/)
</div>
</div>
</div>
<div className="w-4/12 p-4 rounded-lg">
<img src="/assets/cattown-logo.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Cat.town
</h4>
<p className="text-zinc-950 text-sm">
“These components will change how easy it is to build stable, reliable components for use onchain”
</p>
<div className="pt-2 text-sm">
[See it live](https://cat.town/)
</div>
</div>
</div>
</div>
<div className="flex space-x-6 mt-4 items-center justify-center">
<div className="w-4/12 p-4 rounded-lg">
<img src="/assets/mochi-logo.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Mochi
</h4>
<p className="text-zinc-950 text-sm">
“These components will change how easy it is to build stable, reliable components for use onchain”
</p>
<div className="pt-2 text-sm">
[See it live](https://mochithecatcoin.com/)
</div>
</div>
</div>
<div className="w-4/12 p-4 rounded-lg">
<img src="/assets/cattown-logo.svg" className="w-16px" />
<div className="pt-3">
<h4 className="text-zinc-950 text-base font-bold">
Cat.town
</h4>
<p className="text-zinc-950 text-sm">
“These components will change how easy it is to build stable, reliable components for use onchain”
</p>
<div className="pt-2 text-sm">
[See it live](https://mochithecatcoin.com/)
</div>
</div>
</div>
</div>
</div>

<div className="px-6 py-4 bg-gray-50 rounded-xl mx-64">
<a href="/transaction/transaction" title="Start with Transaction Component" className="float-right md:m-0 flex justify-center items-center border border-indigo-600 text-indigo-600 font-bold px-2 py-2 rounded-lg border-solid w-[160px]">
Get featured
</a>
<h4 className="text-zinc-950 text-base font-bold">
Build with OnchainKit and want to get featured?
</h4>
<p className="text-zinc-950 text-sm">
Create a pull request to get featured and reach more people.
</p>

</div>

9 changes: 9 additions & 0 deletions site/docs/public/assets/X.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions site/docs/public/assets/cattown-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions site/docs/public/assets/frame-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading