Skip to content

feat(ui): update CardsSection with sliding layout and new content #8

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

Merged
tpSpace merged 2 commits into from
Jan 17, 2026
Merged

feat(ui): update CardsSection with sliding layout and new content #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f22c07
add cards
tpSpace Jan 17, 2026
f9ef784
Merge branch 'main' into landing
tpSpace Jan 17, 2026
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
160 changes: 111 additions & 49 deletions components/CardsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,125 @@
import Marquee from "@/components/ui/Marquee";

export default function CardsSection() {
return (
<section className="py-10 px-4 max-w-7xl mx-auto text-center">
<section className="py-10 px-0 max-w-full overflow-hidden text-center">
<h2 className="font-display text-5xl md:text-7xl mb-6 uppercase">
Data for humans.
<br />
Not just bots.
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
<div className="bg-slush-yellow p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-black">
Frictionless
<br />
Onboarding
</h3>
<div className="mt-4 mb-16">
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
Learn More
</button>

{/* Cards Marquee */}
<div className="mt-16">
<Marquee pauseOnHover className="[--duration:40s]">
{/* Card 1: Monetize Data */}
<div className="bg-slush-yellow p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
Monetize
<br />
Your Data
</h3>
<div className="mt-4 flex-grow">
<p className="text-black text-lg leading-tight font-medium">
Marketplace to sell your data securely.
</p>
</div>
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
Start Selling
</button>
<div className="transform rotate-12 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
monetization_on
</span>
</div>
</div>
</div>
<div className="absolute bottom-4 right-4 transform rotate-12 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
swipe
</span>

{/* Card 2: Fraud Prevention */}
<div className="bg-slush-purple p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
Fraud
<br />
Prevention
</h3>
<div className="mt-4 flex-grow">
<p className="text-black text-lg leading-tight font-medium">
Random subset verification for buyers to prevent scams.
</p>
</div>
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
Learn More
</button>
<div className="transform -rotate-12 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
security
</span>
</div>
</div>
</div>
</div>
<div className="bg-slush-purple p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
For Data
<br />
Power Users
</h3>
<div className="mt-4 mb-16">
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
Earn +
</button>

{/* Card 3: SDK & Agents */}
<div className="bg-primary p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
SDK &
<br />
Agents
</h3>
<div className="mt-4 flex-grow">
<p className="text-black text-lg leading-tight font-medium">
Full SDK support and MCP integration for x402.
</p>
</div>
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
Docs
</button>
<div className="transform rotate-6 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
code
</span>
</div>
</div>
</div>
<div className="absolute bottom-4 right-4 transform -rotate-12 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
analytics
</span>

{/* Card 4: Enoki */}
<div className="bg-slush-red p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
Frictionless
<br />
UX
</h3>
<div className="mt-4 flex-grow">
<p className="text-black text-lg leading-tight font-medium">
Auto-sign transactions powered by Enoki.
</p>
</div>
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
Try It
</button>
<div className="transform -rotate-6 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
bolt
</span>
</div>
</div>
</div>
</div>
<div className="bg-primary p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
For
<br />
Developers
</h3>
<div className="mt-4 mb-16">
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
Our Discord
</button>
</div>
<div className="absolute bottom-4 right-4 transform rotate-6 group-hover:rotate-0 transition-transform">
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
code
</span>
</div>
</div>
</Marquee>
</div>

{/* Moving Text Line */}
<div className="mt-16 bg-white text-black py-4 border-y-4 border-black">
<Marquee reverse className="[--duration:20s]">
<span className="text-4xl md:text-5xl font-display uppercase mx-8">
Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
</span>
<span className="text-4xl md:text-5xl font-display uppercase mx-8">
Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
</span>
</Marquee>
</div>
</section>
);
Expand Down
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@
"tw-animate-css": "^1.4.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "^20.19.30",
"@types/react": "^19.2.8",
"@types/react-dom": "^19.2.3",
"eslint": "^9.39.2",
"eslint-config-next": "16.1.3",
"tailwindcss": "^4",
"typescript": "^5"
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3"
},
"ignoreScripts": [
"sharp",
Expand Down