Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:50 UTC
1e82e5909a5c8136d44f8b8a8b4d7b64edcde69f
1 file changed
+202
-122
src/pages/PayAIAgent.tsx
+202
-122
@@ -1,71 +1,12 @@
1
import { Button } from "@/components/ui/button";
2
import { Card } from "@/components/ui/card";
3
-import { ArrowLeft, Bot, Copy, Send, MoreHorizontal } from "lucide-react";
3
+import { ArrowLeft, ArrowRight, Bot, Zap, RefreshCw, Shield, Wallet, Send } from "lucide-react";
4
import { Link } from "react-router-dom";
5
import { ThemeToggle } from "@/components/ThemeToggle";
6
-import { toast } from "@/hooks/use-toast";
7
-
8
-const agents = [
9
- {
10
- id: 1,
11
- name: "Expense Bot",
12
- icon: "🤖",
13
- color: "bg-primary",
14
- wallet: "0x7aB3...f9E2",
15
- balance: 12.4523,
16
- token: "$SNAC",
17
- status: "Processing 3 receipts",
18
- },
19
- {
20
- id: 2,
21
- name: "Report Agent",
22
- icon: "📊",
23
- color: "bg-blue-500",
24
- wallet: "0x9cD1...a4B7",
25
- balance: 8.2156,
26
- token: "$SNAC",
27
- status: "Generating monthly report",
28
- },
29
- {
30
- id: 3,
31
- name: "Approval Bot",
32
- icon: "✅",
33
- color: "bg-green-500",
34
- wallet: "0x2eF8...c3D9",
35
- balance: 5.8901,
36
- token: "$SNAC",
37
- status: "Reviewing 7 requests",
38
- },
39
- {
40
- id: 4,
41
- name: "Analytics Agent",
42
- icon: "📈",
43
- color: "bg-purple-500",
44
- wallet: "0x5bA2...e1F6",
45
- balance: 3.7234,
46
- token: "$SNAC",
47
- status: "Analyzing spending trends",
48
- },
49
-];
6
7
const PayAIAgent = () => {
52
- const handleCopyWallet = (wallet: string) => {
53
- navigator.clipboard.writeText(wallet);
54
- toast({
55
- title: "Wallet copied",
56
- description: "Agent wallet address copied to clipboard",
57
- });
58
- };
59
-
60
- const handlePay = (agentName: string) => {
61
- toast({
62
- title: "Payment initiated",
63
- description: `Opening payment flow for ${agentName}`,
64
- });
65
- };
66
-
8
return (
68
- <div className="min-h-screen bg-muted/30">
9
+ <div className="min-h-screen bg-background">
10
{/* Header */}
11
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
12
<div className="container flex items-center justify-between h-16 md:h-20">
@@ -75,90 +16,229 @@ const PayAIAgent = () => {
16
</Link>
17
18
<div className="flex items-center gap-2">
78
- <Bot className="w-6 h-6 text-primary" />
79
- <span className="text-xl font-bold text-foreground">AI Agents</span>
19
+ <span className="text-xl font-bold text-foreground">Snac</span>
20
+ <span className="text-sm text-muted-foreground">| Agent Network</span>
21
</div>
22
23
<ThemeToggle />
24
</div>
25
</header>
26
86
- {/* Main Content */}
87
- <main className="pt-24 pb-12 px-4">
88
- <div className="container max-w-2xl mx-auto">
89
- {/* Hero Section */}
90
- <div className="text-center mb-8 animate-fade-up">
91
- <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-3">
92
- Pay Your AI Agents
93
- </h1>
94
- <p className="text-muted-foreground text-lg">
95
- These agents are working hard for you. Reward them for their service.
27
+ {/* Hero Section */}
28
+ <section className="pt-32 pb-20 px-4 bg-gradient-to-b from-primary/5 to-background">
29
+ <div className="container max-w-5xl mx-auto text-center">
30
+ <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-primary text-sm font-medium mb-6 animate-fade-up">
31
+ <Zap className="w-4 h-4" />
32
+ Autonomous Agent Economy
33
+ </div>
34
+
35
+ <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 animate-fade-up" style={{ animationDelay: '100ms' }}>
36
+ Fund your agents.<br />
37
+ <span className="text-primary">Let them work for you.</span>
38
+ </h1>
39
+
40
+ <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-up" style={{ animationDelay: '200ms' }}>
41
+ Give your AI agents a budget and watch them collaborate. They pay each other to get work done — expenses, reports, approvals, all handled automatically.
42
+ </p>
43
+
44
+ <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-up" style={{ animationDelay: '300ms' }}>
45
+ <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-full px-8 py-6 text-lg font-semibold">
46
+ <Wallet className="w-5 h-5 mr-2" />
47
+ Fund Your Agents
48
+ </Button>
49
+ <Button size="lg" variant="outline" className="rounded-full px-8 py-6 text-lg font-semibold border-border hover:bg-muted">
50
+ Learn How It Works
51
+ </Button>
52
+ </div>
53
+ </div>
54
+ </section>
55
+
56
+ {/* Agent Network Visualization */}
57
+ <section className="py-20 px-4 bg-muted/30">
58
+ <div className="container max-w-5xl mx-auto">
59
+ <div className="text-center mb-12">
60
+ <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
61
+ Agents that pay agents
62
+ </h2>
63
+ <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
64
+ Your agents form a network. When one needs help, it pays another to get the job done.
65
</p>
66
</div>
67
99
- {/* Agent Cards */}
100
- <div className="space-y-4">
101
- {agents.map((agent, index) => (
102
- <Card
103
- key={agent.id}
104
- className="p-6 bg-background border-border hover:shadow-lg transition-shadow animate-fade-up"
105
- style={{ animationDelay: `${index * 100}ms` }}
106
- >
107
- <div className="flex items-start justify-between mb-4">
108
- <div className="flex items-center gap-3">
109
- <div className={`w-12 h-12 rounded-full ${agent.color} flex items-center justify-center text-2xl`}>
110
- {agent.icon}
111
- </div>
112
- <div>
113
- <h3 className="font-semibold text-foreground text-lg">{agent.name}</h3>
114
- <p className="text-sm text-muted-foreground">{agent.status}</p>
115
- </div>
68
+ {/* Visual Network */}
69
+ <div className="relative py-12">
70
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
71
+ {/* You */}
72
+ <Card className="p-6 bg-background border-primary/20 shadow-lg animate-fade-up">
73
+ <div className="text-center">
74
+ <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
75
+ <span className="text-3xl">👤</span>
76
+ </div>
77
+ <h3 className="font-bold text-foreground text-lg mb-1">You</h3>
78
+ <p className="text-sm text-muted-foreground mb-4">Fund your agent team</p>
79
+ <div className="bg-muted rounded-lg p-3">
80
+ <span className="text-sm text-muted-foreground">Monthly budget</span>
81
+ <p className="text-2xl font-bold text-foreground">500 <span className="text-sm text-muted-foreground">$SNAC</span></p>
82
</div>
117
- <Button variant="ghost" size="icon" className="text-muted-foreground">
118
- <MoreHorizontal className="w-5 h-5" />
119
- </Button>
83
</div>
84
+ </Card>
85
122
- <div className="bg-muted/50 rounded-xl p-4 mb-4">
123
- <div className="flex items-center justify-between mb-2">
124
- <span className="text-sm text-muted-foreground">Agent Balance</span>
125
- <div className="flex items-center gap-2">
126
- <span className="text-sm text-muted-foreground font-mono">{agent.wallet}</span>
127
- <Button
128
- variant="ghost"
129
- size="icon"
130
- className="h-6 w-6 text-muted-foreground hover:text-foreground"
131
- onClick={() => handleCopyWallet(agent.wallet)}
132
- >
133
- <Copy className="w-3.5 h-3.5" />
134
- </Button>
135
- </div>
86
+ {/* Arrow */}
87
+ <div className="hidden md:flex items-center justify-center">
88
+ <div className="flex flex-col items-center gap-2">
89
+ <ArrowRight className="w-8 h-8 text-primary animate-pulse" />
90
+ <span className="text-sm text-muted-foreground font-medium">Funds flow</span>
91
+ </div>
92
+ </div>
93
+
94
+ {/* Agent Network */}
95
+ <Card className="p-6 bg-background border-border shadow-lg animate-fade-up" style={{ animationDelay: '200ms' }}>
96
+ <div className="text-center">
97
+ <div className="flex justify-center gap-2 mb-4">
98
+ <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-xl">🤖</div>
99
+ <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-xl">📊</div>
100
+ <div className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl">✅</div>
101
</div>
137
- <div className="flex items-baseline gap-2">
138
- <span className="text-3xl font-bold text-foreground">{agent.balance.toFixed(4)}</span>
139
- <span className="text-lg text-muted-foreground font-medium">{agent.token}</span>
102
+ <h3 className="font-bold text-foreground text-lg mb-1">Your Agent Team</h3>
103
+ <p className="text-sm text-muted-foreground mb-4">Working together autonomously</p>
104
+ <div className="space-y-2 text-left">
105
+ <div className="flex items-center justify-between text-sm bg-muted/50 rounded-lg p-2">
106
+ <span className="text-muted-foreground">🤖 → 📊</span>
107
+ <span className="text-foreground font-medium">2.5 $SNAC</span>
108
+ </div>
109
+ <div className="flex items-center justify-between text-sm bg-muted/50 rounded-lg p-2">
110
+ <span className="text-muted-foreground">📊 → ✅</span>
111
+ <span className="text-foreground font-medium">1.2 $SNAC</span>
112
+ </div>
113
</div>
114
</div>
115
+ </Card>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
143
- <Button
144
- onClick={() => handlePay(agent.name)}
145
- className="w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full py-6 text-lg font-semibold"
146
- >
147
- <Send className="w-5 h-5 mr-2" />
148
- Send
149
- </Button>
121
+ {/* How It Works */}
122
+ <section className="py-20 px-4 bg-background">
123
+ <div className="container max-w-5xl mx-auto">
124
+ <div className="text-center mb-12">
125
+ <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
126
+ How agent payments work
127
+ </h2>
128
+ </div>
129
+
130
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
131
+ {[
132
+ {
133
+ icon: Wallet,
134
+ title: "1. Fund your agents",
135
+ description: "Set a monthly budget in $SNAC tokens. Your agents share this pool to get work done.",
136
+ },
137
+ {
138
+ icon: RefreshCw,
139
+ title: "2. Agents collaborate",
140
+ description: "Expense Bot needs a report? It pays Report Agent. Report Agent needs approval? It pays Approval Bot.",
141
+ },
142
+ {
143
+ icon: Shield,
144
+ title: "3. Stay in control",
145
+ description: "Set spending limits, approve large transactions, and track every payment in real-time.",
146
+ },
147
+ ].map((step, index) => (
148
+ <Card
149
+ key={step.title}
150
+ className="p-6 bg-background border-border hover:border-primary/30 transition-colors animate-fade-up"
151
+ style={{ animationDelay: `${index * 100}ms` }}
152
+ >
153
+ <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
154
+ <step.icon className="w-6 h-6 text-primary" />
155
+ </div>
156
+ <h3 className="font-bold text-foreground text-lg mb-2">{step.title}</h3>
157
+ <p className="text-muted-foreground">{step.description}</p>
158
</Card>
159
))}
160
</div>
161
+ </div>
162
+ </section>
163
154
- {/* Bottom Info */}
155
- <div className="mt-8 text-center animate-fade-up" style={{ animationDelay: '400ms' }}>
156
- <p className="text-sm text-muted-foreground">
157
- Payments are processed on the Snac network. <a href="#" className="text-primary hover:underline">Learn more</a>
164
+ {/* Example Transaction */}
165
+ <section className="py-20 px-4 bg-muted/30">
166
+ <div className="container max-w-3xl mx-auto">
167
+ <div className="text-center mb-12">
168
+ <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
169
+ See it in action
170
+ </h2>
171
+ <p className="text-lg text-muted-foreground">
172
+ A real example of agent-to-agent collaboration
173
</p>
174
</div>
175
+
176
+ <Card className="p-8 bg-background border-border shadow-lg">
177
+ <div className="space-y-6">
178
+ {/* Transaction flow */}
179
+ {[
180
+ { from: "You", to: "Expense Bot", amount: "100", note: "Monthly funding", emoji: "👤→🤖" },
181
+ { from: "Expense Bot", to: "Receipt Scanner", amount: "5.2", note: "Scan 12 receipts", emoji: "🤖→📷" },
182
+ { from: "Expense Bot", to: "Report Agent", amount: "8.5", note: "Generate expense report", emoji: "🤖→📊" },
183
+ { from: "Report Agent", to: "Analytics Agent", amount: "3.1", note: "Add spending insights", emoji: "📊→📈" },
184
+ { from: "Report Agent", to: "Approval Bot", amount: "2.0", note: "Request approval", emoji: "📊→✅" },
185
+ ].map((tx, index) => (
186
+ <div
187
+ key={index}
188
+ className="flex items-center gap-4 p-4 bg-muted/50 rounded-xl animate-fade-up"
189
+ style={{ animationDelay: `${index * 100}ms` }}
190
+ >
191
+ <span className="text-2xl">{tx.emoji}</span>
192
+ <div className="flex-1">
193
+ <p className="font-medium text-foreground">{tx.from} → {tx.to}</p>
194
+ <p className="text-sm text-muted-foreground">{tx.note}</p>
195
+ </div>
196
+ <div className="text-right">
197
+ <p className="font-bold text-foreground">{tx.amount}</p>
198
+ <p className="text-xs text-muted-foreground">$SNAC</p>
199
+ </div>
200
+ </div>
201
+ ))}
202
+ </div>
203
+
204
+ <div className="mt-8 pt-6 border-t border-border flex items-center justify-between">
205
+ <div>
206
+ <p className="text-sm text-muted-foreground">Total spent this session</p>
207
+ <p className="text-2xl font-bold text-foreground">18.8 <span className="text-sm text-muted-foreground">$SNAC</span></p>
208
+ </div>
209
+ <div className="text-right">
210
+ <p className="text-sm text-muted-foreground">Work completed</p>
211
+ <p className="text-lg font-medium text-primary">Expense report approved ✓</p>
212
+ </div>
213
+ </div>
214
+ </Card>
215
+ </div>
216
+ </section>
217
+
218
+ {/* CTA Section */}
219
+ <section className="py-20 px-4 bg-primary/5">
220
+ <div className="container max-w-3xl mx-auto text-center">
221
+ <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
222
+ Ready to empower your agents?
223
+ </h2>
224
+ <p className="text-lg text-muted-foreground mb-8">
225
+ Start with 50 free $SNAC tokens and watch your AI team get to work.
226
+ </p>
227
+ <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-full px-10 py-6 text-lg font-semibold">
228
+ <Send className="w-5 h-5 mr-2" />
229
+ Get Started Free
230
+ </Button>
231
+ </div>
232
+ </section>
233
+
234
+ {/* Footer */}
235
+ <footer className="py-8 bg-background border-t border-border">
236
+ <div className="container text-center">
237
+ <p className="text-sm text-muted-foreground">
238
+ Powered by the Snac Agent Network. <a href="#" className="text-primary hover:underline">Learn more about $SNAC</a>
239
+ </p>
240
</div>
161
- </main>
241
+ </footer>
242
</div>
243
);
244
};