Skip to content

Commit e2ce3d3

Browse files
tpSpacetpSpace
authored
Merge pull request #8 from TaskOpenSystem/landing
feat(ui): update CardsSection with sliding layout and new content
2 parents 995f3bf + f9ef784 commit e2ce3d3

2 files changed

Lines changed: 118 additions & 56 deletions

File tree

‎components/CardsSection.tsx‎

Lines changed: 111 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,125 @@
1+
import Marquee from "@/components/ui/Marquee";
2+
13
export default function CardsSection() {
24
return (
3-
<section className="py-10 px-4 max-w-7xl mx-auto text-center">
5+
<section className="py-10 px-0 max-w-full overflow-hidden text-center">
46
<h2 className="font-display text-5xl md:text-7xl mb-6 uppercase">
57
Data for humans.
68
<br />
79
Not just bots.
810
</h2>
9-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
10-
<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">
11-
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-black">
12-
Frictionless
13-
<br />
14-
Onboarding
15-
</h3>
16-
<div className="mt-4 mb-16">
17-
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
18-
Learn More
19-
</button>
11+
12+
{/* Cards Marquee */}
13+
<div className="mt-16">
14+
<Marquee pauseOnHover className="[--duration:40s]">
15+
{/* Card 1: Monetize Data */}
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 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
17+
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
18+
Monetize
19+
<br />
20+
Your Data
21+
</h3>
22+
<div className="mt-4 flex-grow">
23+
<p className="text-black text-lg leading-tight font-medium">
24+
Marketplace to sell your data securely.
25+
</p>
26+
</div>
27+
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
28+
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
29+
Start Selling
30+
</button>
31+
<div className="transform rotate-12 group-hover:rotate-0 transition-transform">
32+
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
33+
monetization_on
34+
</span>
35+
</div>
36+
</div>
2037
</div>
21-
<div className="absolute bottom-4 right-4 transform rotate-12 group-hover:rotate-0 transition-transform">
22-
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
23-
swipe
24-
</span>
38+
39+
{/* Card 2: Fraud Prevention */}
40+
<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">
41+
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
42+
Fraud
43+
<br />
44+
Prevention
45+
</h3>
46+
<div className="mt-4 flex-grow">
47+
<p className="text-black text-lg leading-tight font-medium">
48+
Random subset verification for buyers to prevent scams.
49+
</p>
50+
</div>
51+
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
52+
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
53+
Learn More
54+
</button>
55+
<div className="transform -rotate-12 group-hover:rotate-0 transition-transform">
56+
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
57+
security
58+
</span>
59+
</div>
60+
</div>
2561
</div>
26-
</div>
27-
<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">
28-
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
29-
For Data
30-
<br />
31-
Power Users
32-
</h3>
33-
<div className="mt-4 mb-16">
34-
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
35-
Earn +
36-
</button>
62+
63+
{/* Card 3: SDK & Agents */}
64+
<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">
65+
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
66+
SDK &
67+
<br />
68+
Agents
69+
</h3>
70+
<div className="mt-4 flex-grow">
71+
<p className="text-black text-lg leading-tight font-medium">
72+
Full SDK support and MCP integration for x402.
73+
</p>
74+
</div>
75+
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
76+
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
77+
Docs
78+
</button>
79+
<div className="transform rotate-6 group-hover:rotate-0 transition-transform">
80+
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
81+
code
82+
</span>
83+
</div>
84+
</div>
3785
</div>
38-
<div className="absolute bottom-4 right-4 transform -rotate-12 group-hover:rotate-0 transition-transform">
39-
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
40-
analytics
41-
</span>
86+
87+
{/* Card 4: Enoki */}
88+
<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">
89+
<h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
90+
Frictionless
91+
<br />
92+
UX
93+
</h3>
94+
<div className="mt-4 flex-grow">
95+
<p className="text-black text-lg leading-tight font-medium">
96+
Auto-sign transactions powered by Enoki.
97+
</p>
98+
</div>
99+
<div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
100+
<button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
101+
Try It
102+
</button>
103+
<div className="transform -rotate-6 group-hover:rotate-0 transition-transform">
104+
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
105+
bolt
106+
</span>
107+
</div>
108+
</div>
42109
</div>
43-
</div>
44-
<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">
45-
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
46-
For
47-
<br />
48-
Developers
49-
</h3>
50-
<div className="mt-4 mb-16">
51-
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
52-
Our Discord
53-
</button>
54-
</div>
55-
<div className="absolute bottom-4 right-4 transform rotate-6 group-hover:rotate-0 transition-transform">
56-
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
57-
code
58-
</span>
59-
</div>
60-
</div>
110+
</Marquee>
111+
</div>
112+
113+
{/* Moving Text Line */}
114+
<div className="mt-16 bg-white text-black py-4 border-y-4 border-black">
115+
<Marquee reverse className="[--duration:20s]">
116+
<span className="text-4xl md:text-5xl font-display uppercase mx-8">
117+
Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
118+
</span>
119+
<span className="text-4xl md:text-5xl font-display uppercase mx-8">
120+
Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
121+
</span>
122+
</Marquee>
61123
</div>
62124
</section>
63125
);

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@
3232
"tw-animate-css": "^1.4.0"
3333
},
3434
"devDependencies": {
35-
"@tailwindcss/postcss": "^4",
36-
"@types/node": "^20",
37-
"@types/react": "^19",
38-
"@types/react-dom": "^19",
39-
"eslint": "^9",
35+
"@tailwindcss/postcss": "^4.1.18",
36+
"@types/node": "^20.19.30",
37+
"@types/react": "^19.2.8",
38+
"@types/react-dom": "^19.2.3",
39+
"eslint": "^9.39.2",
4040
"eslint-config-next": "16.1.3",
41-
"tailwindcss": "^4",
42-
"typescript": "^5"
41+
"tailwindcss": "^4.1.18",
42+
"typescript": "^5.9.3"
4343
},
4444
"ignoreScripts": [
4545
"sharp",

0 commit comments

Comments
 (0)