Skip to content

Commit

Permalink
Improvements to about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@luloxi
luloxi committed Dec 13, 2024
1 parent ccd08c0 commit 340a98d
Showing 1 changed file with 103 additions and 116 deletions.
219 changes: 103 additions & 116 deletions packages/nextjs/app/about/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,129 +35,50 @@ export const About = () => {
height={150}
/> */}
<div className="flex flex-col items-center justify-center">
<h1
className="text-4xl font-bold text-center
font-mono "
>
WTF is <strong>PunkSociety? 🤘</strong>
</h1>

<div className="flex flex-col gap-3 text-center w-[600px]">
<span>
PunkSociety is an <strong>open source framework</strong> for building EVM compatible dapps that interact
with{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className=" text-blue-600 font-bold underline underline-offset-2">ERC20</span>
</Link>{" "}
and{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className=" text-pink-600 font-bold underline underline-offset-2">ERC721</span>
</Link>{" "}
tokens (<span className=" text-blue-600 font-bold">fungible</span> and{" "}
<span className=" text-pink-600 font-bold">non-fungible</span>).
</span>

<span>
Instructions on{" "}
<Link href="https://github.com/luloxi/PunkSociety" target="_blank">
<span className="pr-1 text-orange-600 font-bold underline underline-offset-2">
{" "}
PunkSociety&apos;s GitHub repo
</span>
</Link>
explain how to deploy the project on any{" "}
<Link
href="https://blog.thirdweb.com/evm-compatible-blockchains-and-ethereum-virtual-machine/"
target="_blank"
>
<span className=" text-green-600 font-bold underline underline-offset-2">
EVM compatible blockchain.
</span>
</Link>
</span>

<span>
If you want to{" "}
<strong>
deploy it as an{" "}
<Link
href="https://www.coingecko.com/learn/what-are-appchains-application-specific-blockchains"
target="_blank"
>
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">appchain</span>
</Link>
</strong>
, there are also instructions to test with an{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image
src="/avalanche-logo.png"
alt="Avalanche logo"
width={20}
height={20}
className="inline-block"
/>
</Link>{" "}
, which allows features such as these:
</span>
</div>

<div className="hero bg-base-200 flex flex-wrap justify-around gap-3 py-4 lg:p-4">
<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between bg-base-100 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<span className="text-6xl">⛽</span>
<h2 className="card-title text-2xl font-mono">USDC = native gas! </h2>
<p>
<Link href="https://circle.com/" target="_blank">
<span className="pr-1 text-blue-600 font-bold underline underline-offset-2">USDC</span>
<Image src="/usdc-logo.png" alt="USDC logo" width={20} height={20} className="inline-block" />
</Link>{" "}
is used to pay for transactions and interactions on our{" "}
<div className="hero bg-base-200">
<div className="hero-content flex-col lg:flex-row-reverse text-2xl">
<img
src="https://www.rawshorts.com/blog/wp-content/uploads/2019/08/instagram-ads.gif"
className="max-w-sm rounded-lg shadow-2xl mx-3"
/>
<div>
<h1 className="text-5xl font-bold">WTF is PunkSociety? 🤘</h1>
<p className="pt-6">
It is an <strong>open source framework</strong> for building dapps that interact with{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image
src="/avalanche-logo.png"
alt="Avalanche logo"
width={20}
height={20}
className="inline-block"
/>
</Link>{" "}
.
</p>
</div>
</div>
<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between items-center bg-base-100 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<span className="text-6xl">🫰</span>
<h2 className="card-title text-2xl font-mono">Earn USDC yield! </h2>
<p>
Your{" "}
<Link href="https://circle.com/" target="_blank">
<span className="pr-1 text-blue-600 font-bold underline underline-offset-2">USDC</span>
<Image src="/usdc-logo.png" alt="USDC logo" width={20} height={20} className="inline-block" />
<span className=" text-blue-600 font-bold underline underline-offset-2">ERC20</span>
</Link>{" "}
generates interest on{" "}
<Link href="https://aave.com/" target="_blank">
<span className="pr-1 text-indigo-600 font-bold underline underline-offset-2">AAVE</span>
<Image src="/aave-logo.png" alt="AAVE logo" width={20} height={20} className="inline-block" />
</Link>{" "}
while bridged to our{" "}
and{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image
src="/avalanche-logo.png"
alt="Avalanche logo"
width={20}
height={20}
className="inline-block"
/>
<span className=" text-pink-600 font-bold underline underline-offset-2">ERC721</span>
</Link>{" "}
!
tokens (<span className=" text-blue-600 font-bold">fungible</span> and{" "}
<span className=" text-pink-600 font-bold">non-fungible</span>).
</p>
<p className="">
Instructions on{" "}
<Link href="https://github.com/luloxi/PunkSociety" target="_blank">
<span className="pr-1 text-orange-600 font-bold underline underline-offset-2">
{" "}
PunkSociety&apos;s GitHub repo
</span>
</Link>
explain how to deploy the project on any{" "}
<Link
href="https://blog.thirdweb.com/evm-compatible-blockchains-and-ethereum-virtual-machine/"
target="_blank"
>
<span className=" text-green-600 font-bold underline underline-offset-2">
EVM compatible blockchain.
</span>
</Link>
</p>
{/* <button className="btn btn-primary">Get Started</button> */}
</div>
</div>
</div>

{/* <hr className="w-full border-2 border-white mb-6" /> */}
</div>
</div>
</div>
Expand Down Expand Up @@ -186,7 +107,7 @@ export const About = () => {
Users earn while engaging with their community 🫂
</span>

<span className="pt-4 text-center">
<span className="pt-4 text-center italic">
This website is a social network where posts are NFTs and likes send USDC to post creators.{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<br />
Expand Down Expand Up @@ -439,6 +360,72 @@ export const About = () => {
</div>
</div>

<div className="hero-content flex-col lg:flex-row-reverse lg:px-14">
<span className="text-xl">
If you want to{" "}
<strong>
deploy it as an{" "}
<Link
href="https://www.coingecko.com/learn/what-are-appchains-application-specific-blockchains"
target="_blank"
>
<span className=" text-red-600 font-bold underline underline-offset-2">appchain</span>
</Link>
</strong>
, there are instructions to test with an{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image src="/avalanche-logo.png" alt="Avalanche logo" width={20} height={20} className="inline-block" />
</Link>
, which allows more customization of the experience with features such as:
</span>
</div>

<div className="hero bg-base-200 flex flex-wrap justify-around gap-3 py-4 lg:p-4">
<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between bg-base-100 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<span className="text-6xl">⛽</span>
<h2 className="card-title text-2xl font-mono">USDC = native gas! </h2>
<p>
<Link href="https://circle.com/" target="_blank">
<span className="pr-1 text-blue-600 font-bold underline underline-offset-2">USDC</span>
<Image src="/usdc-logo.png" alt="USDC logo" width={20} height={20} className="inline-block" />
</Link>{" "}
is used to pay for transactions and interactions on our{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image src="/avalanche-logo.png" alt="Avalanche logo" width={20} height={20} className="inline-block" />
</Link>{" "}
.
</p>
</div>
</div>
<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between items-center bg-base-100 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<span className="text-6xl">🫰</span>
<h2 className="card-title text-2xl font-mono">Earn USDC yield! </h2>
<p>
Your{" "}
<Link href="https://circle.com/" target="_blank">
<span className="pr-1 text-blue-600 font-bold underline underline-offset-2">USDC</span>
<Image src="/usdc-logo.png" alt="USDC logo" width={20} height={20} className="inline-block" />
</Link>{" "}
generates interest on{" "}
<Link href="https://aave.com/" target="_blank">
<span className="pr-1 text-indigo-600 font-bold underline underline-offset-2">AAVE</span>
<Image src="/aave-logo.png" alt="AAVE logo" width={20} height={20} className="inline-block" />
</Link>{" "}
while bridged to our{" "}
<Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
<span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
<Image src="/avalanche-logo.png" alt="Avalanche logo" width={20} height={20} className="inline-block" />
</Link>{" "}
!
</p>
</div>
</div>
</div>

<div className="w-full bg-yellow-500">
<div className="flex flex-col p-6 justify-center items-center bg-yellow-500 text-black">
<h1 className="text-4xl font-mono text-center">Wanna know how we&apos;re doing?</h1>
Expand Down

0 comments on commit 340a98d

Please sign in to comment.