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 Nov 19, 2024
1 parent 361b968 commit 7e176e6
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 42 deletions.
90 changes: 48 additions & 42 deletions packages/nextjs/app/about/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,58 +16,46 @@ export const About = () => {
<div className="hero bg-base-200 ">
<div className="hero-content flex-col lg:flex-row-reverse lg:p-14">
{/* INSERT HERE A GIF SHOWING HOW A LIKE BECOMES MONEY */}
{/* <Image
src="/socialmonetization.jpg"
<Image
src="/like-dollar.png"
alt="Animation clicking a like button and increasing USDC balance"
className="max-w-sm rounded-lg shadow-2xl border-2"
width={500}
height={500}
/> */}
className="max-w-sm rounded-lg"
width={300}
height={300}
/>
<div>
<h1 className="text-6xl font-mono text-center">What if you earned 💸 money from using social media?</h1>
<p className="py-6">
<h1 className="text-6xl font-mono text-center">
What if you <strong className="text-green-600">earned</strong> 💸 from using social media? 🤔
</h1>
<p className="pt-6">
<div className="flex justify-center items-center gap-1 flex-wrap">
<span className="text-xl text-center">
What if <span className="text-orange-600 font-bold">every like, comment, and share</span> changed the
<span className="text-3xl text-center">
What if <span className="text-orange-600 font-bold">every like, comment, and share</span>{" "}
<span className="text-green-600">changed the</span>
</span>
<span className="text-xl text-blue-600 font-bold">USDC</span>
<Image src="/usdc-logo.png" alt="USDC" width={20} height={20} />
<span className="text-xl">balance of your life?</span>
<span className="text-3xl text-blue-600 font-bold">USDC</span>
<Image src="/usdc-logo.png" alt="USDC" width={30} height={30} />
<span className="text-3xl">balance of your life? 🤔</span>
</div>
<br />
<div className="flex text-xl italic justify-center text-center">
We&apos;re building a social protocol that transforms how you interact, earn, and connect!
</div>
</p>
<div className="flex justify-around gap-3">
{/* <div className="flex justify-around gap-3">
<button className="w-1/3 h-16 text-xl btn btn-primary text-white bg-orange-600 border-0 hover:bg-orange-700">
See some posts!
</button>
<button className="w-1/3 h-16 text-xl btn btn-primary text-white bg-blue-600 border-0 hover:bg-blue-700">
Create a profile!
</button>
</div>
</div> */}
</div>
</div>
</div>
<div className="w-full pt-2 bg-base-300">
<h1 className="text-6xl font-mono text-center">Features! 🤘</h1>
</div>
<div className="hero bg-base-300 flex flex-wrap justify-around gap-3 lg:p-4">
<div className="card lg:h-[500px] max-w-[600px] flex flex-col justify-between bg-base-100 shadow-xl">
<figure className="px-10 pt-10 flex-shrink-0">
<Image src="/post-types.png" alt="Post types" className="" width={500} height={500} />
</figure>
<div className="card-body items-center text-center flex-grow overflow-hidden">
<h2 className="card-title text-3xl font-mono">Several post types!</h2>
<p>
Posts can have text, image, audio, video, links and polls.
<br /> And yeah, they&apos;re all NFTs! 🤯
</p>
</div>
</div>
<div className="card lg:h-[500px] max-w-[600px] flex flex-col justify-between rounded-none lg:rounded-xl bg-base-100 shadow-xl">
<div className="card lg:h-[500px] max-w-[600px] flex flex-col justify-between lg:rounded-xl bg-base-100 shadow-xl">
<figure className=" h-[250px] mt-10 flex-shrink-0">
<Image src="/socialmonetization.jpg" alt="Social monetization" className="" width={500} height={500} />
</figure>
Expand All @@ -86,7 +74,7 @@ export const About = () => {
</figure>
</div>
<div className="card-body items-center text-center flex-grow overflow-hidden">
<h2 className="card-title text-3xl font-mono">Earn USDC yield while using PunkSociety!</h2>
<h2 className="card-title text-3xl font-mono">Earn USDC yield!</h2>
<p>When bridged to our Avalanche L1, USDC gets invested and generates interest on the home blockchain. </p>
</div>
</div>
Expand All @@ -97,7 +85,7 @@ export const About = () => {
</figure>
<div className="card-body items-center text-center flex-grow overflow-hidden">
<h2 className="card-title text-3xl font-mono">USDC is the native gas here!</h2>
<p>1 USD = 1 USDC = native gas! And that pays for transactions and interactions within PunkSociety L1.</p>
<p>1 USD = 1 USDC = native gas! Nothing else is needed to pay for transactions and interactions.</p>
</div>
</div>

Expand All @@ -122,7 +110,18 @@ export const About = () => {
<p>Access with your wallet or your social accounts!</p>
</div>
</div>

<div className="card lg:h-[500px] max-w-[600px] flex flex-col justify-between bg-base-100 shadow-xl">
<figure className="px-10 pt-10 flex-shrink-0">
<Image src="/post-types.png" alt="Post types" className="" width={500} height={500} />
</figure>
<div className="card-body items-center text-center flex-grow overflow-hidden">
<h2 className="card-title text-3xl font-mono">Several post types!</h2>
<p>
Posts can have text, image, audio, video, links and polls.
<br /> And yeah, they&apos;re all NFTs! 🤯
</p>
</div>
</div>
<div className="card lg:h-[500px] max-w-[600px] flex flex-col justify-between bg-base-100 shadow-xl">
<div className="lg:h-[300px] mt-10 w-full overflow-hidden flex justify-center items-center">
<figure className="px-10 pt-10 flex-shrink-0">
Expand Down Expand Up @@ -174,15 +173,22 @@ export const About = () => {
</div>
<div className="hero bg-base-200 ">
<div className="hero-content flex-col lg:flex-row-reverse ">
<div className="flex flex-col items-center gap-3">
<figure className="px-10 pt-10 flex-shrink-0">
<Image src="/lulox.jpg" alt="Lulox" className="rounded-xl" width={300} height={300} />
</figure>
<div className="flex flex-col items-center justify-center">
<h2 className="text-3xl">Lulox</h2>
<span className="italic">founder, builder</span>
<a
className="flex justify-center items-center gap-1"
href="https://linktr.ee/lulox"
target="_blank"
rel="noreferrer"
>
<div className="flex flex-col items-center gap-3 bg-base-100">
<figure className="px-10 pt-5 flex-shrink-0">
<Image src="/lulox.jpg" alt="Lulox" className="rounded-xl" width={300} height={300} />
</figure>
<div className="flex pb-5 flex-col items-center justify-center">
<h2 className="text-3xl">Lulox</h2>
<span className="italic">founder, builder</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Expand Down
Binary file added packages/nextjs/public/like-dollar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7e176e6

Please sign in to comment.