Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:52 UTC
b1e6e877744c92719a9f01fa9ed14de6db3b3e36
1 file changed
+66
-50
src/pages/PayAIAgent.tsx
+66
-50
@@ -3,10 +3,8 @@ import { Card } from "@/components/ui/card";
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
-
6
const PayAIAgent = () => {
8
- return (
9
- <div className="min-h-screen bg-background">
7
+ return <div className="min-h-screen bg-background">
8
{/* Header */}
9
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
10
<div className="container flex items-center justify-between h-16 md:h-20">
@@ -32,16 +30,22 @@ const PayAIAgent = () => {
30
Autonomous Agent Economy
31
</div>
32
35
- <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 animate-fade-up" style={{ animationDelay: '100ms' }}>
33
+ <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 animate-fade-up" style={{
34
+ animationDelay: '100ms'
35
+ }}>
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' }}>
40
+ <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-up" style={{
41
+ animationDelay: '200ms'
42
+ }}>
43
Give your AI agents a budget and watch them collaborate. They pay each other to get work done — expenses, reports, approvals, all handled automatically.
44
</p>
45
44
- <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-up" style={{ animationDelay: '300ms' }}>
46
+ <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-up" style={{
47
+ animationDelay: '300ms'
48
+ }}>
49
<Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-full px-8 py-6 text-lg font-semibold">
50
<Wallet className="w-5 h-5 mr-2" />
51
Fund Your Agents
@@ -78,7 +82,7 @@ const PayAIAgent = () => {
82
<p className="text-sm text-muted-foreground mb-4">Fund your agent team</p>
83
<div className="bg-muted rounded-lg p-3">
84
<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>
85
+ <p className="text-2xl font-bold text-foreground">500 $USD<span className="text-sm text-muted-foreground">$SNAC</span></p>
86
</div>
87
</div>
88
</Card>
@@ -92,7 +96,9 @@ const PayAIAgent = () => {
96
</div>
97
98
{/* Agent Network */}
95
- <Card className="p-6 bg-background border-border shadow-lg animate-fade-up" style={{ animationDelay: '200ms' }}>
99
+ <Card className="p-6 bg-background border-border shadow-lg animate-fade-up" style={{
100
+ animationDelay: '200ms'
101
+ }}>
102
<div className="text-center">
103
<div className="flex justify-center gap-2 mb-4">
104
<div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-xl">🤖</div>
@@ -128,35 +134,27 @@ const PayAIAgent = () => {
134
</div>
135
136
<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
- >
137
+ {[{
138
+ icon: Wallet,
139
+ title: "1. Fund your agents",
140
+ description: "Set a monthly budget in $SNAC tokens. Your agents share this pool to get work done."
141
+ }, {
142
+ icon: RefreshCw,
143
+ title: "2. Agents collaborate",
144
+ description: "Expense Bot needs a report? It pays Report Agent. Report Agent needs approval? It pays Approval Bot."
145
+ }, {
146
+ icon: Shield,
147
+ title: "3. Stay in control",
148
+ description: "Set spending limits, approve large transactions, and track every payment in real-time."
149
+ }].map((step, index) => <Card key={step.title} className="p-6 bg-background border-border hover:border-primary/30 transition-colors animate-fade-up" style={{
150
+ animationDelay: `${index * 100}ms`
151
+ }}>
152
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
153
<step.icon className="w-6 h-6 text-primary" />
154
</div>
155
<h3 className="font-bold text-foreground text-lg mb-2">{step.title}</h3>
156
<p className="text-muted-foreground">{step.description}</p>
158
- </Card>
159
- ))}
157
+ </Card>)}
158
</div>
159
</div>
160
</section>
@@ -176,18 +174,39 @@ const PayAIAgent = () => {
174
<Card className="p-8 bg-background border-border shadow-lg">
175
<div className="space-y-6">
176
{/* 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
- >
177
+ {[{
178
+ from: "You",
179
+ to: "Expense Bot",
180
+ amount: "100",
181
+ note: "Monthly funding",
182
+ emoji: "👤→🤖"
183
+ }, {
184
+ from: "Expense Bot",
185
+ to: "Receipt Scanner",
186
+ amount: "5.2",
187
+ note: "Scan 12 receipts",
188
+ emoji: "🤖→📷"
189
+ }, {
190
+ from: "Expense Bot",
191
+ to: "Report Agent",
192
+ amount: "8.5",
193
+ note: "Generate expense report",
194
+ emoji: "🤖→📊"
195
+ }, {
196
+ from: "Report Agent",
197
+ to: "Analytics Agent",
198
+ amount: "3.1",
199
+ note: "Add spending insights",
200
+ emoji: "📊→📈"
201
+ }, {
202
+ from: "Report Agent",
203
+ to: "Approval Bot",
204
+ amount: "2.0",
205
+ note: "Request approval",
206
+ emoji: "📊→✅"
207
+ }].map((tx, index) => <div key={index} className="flex items-center gap-4 p-4 bg-muted/50 rounded-xl animate-fade-up" style={{
208
+ animationDelay: `${index * 100}ms`
209
+ }}>
210
<span className="text-2xl">{tx.emoji}</span>
211
<div className="flex-1">
212
<p className="font-medium text-foreground">{tx.from} → {tx.to}</p>
@@ -197,8 +216,7 @@ const PayAIAgent = () => {
216
<p className="font-bold text-foreground">{tx.amount}</p>
217
<p className="text-xs text-muted-foreground">$SNAC</p>
218
</div>
200
- </div>
201
- ))}
219
+ </div>)}
220
</div>
221
222
<div className="mt-8 pt-6 border-t border-border flex items-center justify-between">
@@ -239,8 +257,6 @@ const PayAIAgent = () => {
257
</p>
258
</div>
259
</footer>
242
- </div>
243
- );
260
+ </div>;
261
};
245
-
246
-export default PayAIAgent;
262
+export default PayAIAgent;
\ No newline at end of file