Skip to content

Commit

Permalink
Improvements to About
Browse files Browse the repository at this point in the history
  • Loading branch information
@luloxi
luloxi committed Nov 25, 2024
1 parent 2adc89a commit 7e29467
Showing 1 changed file with 51 additions and 53 deletions.
104 changes: 51 additions & 53 deletions packages/nextjs/app/about/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,28 @@ export const About = () => {
</div>

<div className="hero bg-base-300 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">Pics with captions!</h2>
<p>Posts can have one image 🖼️ and up to 140 characters of text ✍️</p>
</div>
</div>

<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">Posts are NFTs! </h2>
<p>
If you didn&apos;t know,{" "}
<Link href="https://opensea.io/learn/nft/what-are-nfts" target="_blank">
<span className="pr-1 text-emerald-600 font-bold underline underline-offset-2">NFTs</span>
</Link>
are digital collectibles that can be resold ! 🤯
</p>
</div>
</div>

<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between lg:rounded-xl bg-base-100 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<span className="text-6xl">🫂</span>
Expand All @@ -73,45 +95,7 @@ export const About = () => {
</div>
</div>

<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">Pics with captions!</h2>
<p>Posts can have one image 🖼️ and up to 140 characters of text ✍️</p>
</div>
</div>

<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between lg:rounded-xl bg-black border-2 text-yellow-300 shadow-xl">
<div className="card-body items-center text-center flex-grow overflow-hidden">
<div className="flex flex-row items-center gap-2">
<span className="text-6xl">🗳️</span>
<div className="flex flex-col items-center justify-center gap-2">
<h2 className="card-title text-2xl font-mono">Survey! </h2>
<span>
How much{" "}
<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" width={20} height={20} className="inline-block" />
</Link>{" "}
would you pay for a like?
</span>
<div className="max-w-28">
<input
type="number"
value={usdcPrice}
onChange={handleUsdcPriceChange}
placeholder="0"
className="input mt-2 input-ghost focus-within:border-transparent outline-blue-500 focus:outline-green-500 focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border-2 border-blue-500 w-full font-medium placeholder:text-accent/50 text-green-500"
/>
</div>
</div>
</div>

<div className="flex flex-row gap-2"></div>
</div>
</div>

<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between lg:rounded-xl bg-base-100 shadow-xl">
{/* <div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between lg:rounded-xl 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">Sharing incentives! </h2>
Expand All @@ -124,7 +108,7 @@ export const About = () => {
earnings.
</p>
</div>
</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">
Expand Down Expand Up @@ -170,17 +154,31 @@ export const About = () => {
</div>
</div> */}

<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between bg-base-100 shadow-xl">
<div className="card lg:h-[240px] max-w-[400px] flex flex-col justify-between lg:rounded-xl bg-black border-2 text-yellow-300 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">Posts are NFTs! </h2>
<p>
If you didn&apos;t know,{" "}
<Link href="https://opensea.io/learn/nft/what-are-nfts" target="_blank">
<span className="pr-1 text-emerald-600 font-bold underline underline-offset-2">NFTs</span>
</Link>
are digital collectibles that can be resold ! 🤯
</p>
<div className="flex flex-row items-center gap-2">
<span className="text-6xl">🗳️</span>
<div className="flex flex-col items-center justify-center gap-2">
<h2 className="card-title text-2xl font-mono">Survey! </h2>
<span>
How much{" "}
<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" width={20} height={20} className="inline-block" />
</Link>{" "}
would you pay for a like?
</span>
<div className="max-w-28">
<input
type="number"
value={usdcPrice}
onChange={handleUsdcPriceChange}
placeholder="0"
className="input mt-2 input-ghost focus-within:border-transparent outline-blue-500 focus:outline-green-500 focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border-2 border-blue-500 w-full font-medium placeholder:text-accent/50 text-green-500"
/>
</div>
</div>
</div>
</div>
</div>

Expand All @@ -189,9 +187,6 @@ export const About = () => {
<span className="text-6xl">🤹</span>
{/* <h2 className="card-title text-2xl font-mono">More features! </h2> */}
<ul className="list-disc list-inside mt-4">
<li>
<span aria-label="revenue">💹</span> Analyze your revenue
</li>
<li>
<span aria-label="messaging">💬</span> Private and group chats
</li>
Expand All @@ -201,6 +196,9 @@ export const About = () => {
<li>
<span aria-label="customization">🎨</span> Customize your profile
</li>
<li>
<span aria-label="revenue">💹</span> Analyze your revenue
</li>
</ul>
</div>
</div>
Expand Down

0 comments on commit 7e29467

Please sign in to comment.