@smbcloud / wise-landing-forge
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
tsx 262 lines 12 KB
Raw
1 import { Button } from "@/components/ui/button";
2 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 const PayAIAgent = () => {
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">
11 <Link to="/employee-portal" className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
12 <ArrowLeft className="w-5 h-5" />
13 <span className="hidden sm:inline text-sm font-medium">Back to Portal</span>
14 </Link>
15
16 <div className="flex items-center gap-2">
17 <span className="text-xl font-bold text-foreground">Snac</span>
18 <span className="text-sm text-muted-foreground">| Agent Network</span>
19 </div>
20
21 <ThemeToggle />
22 </div>
23 </header>
24
25 {/* Hero Section */}
26 <section className="pt-32 pb-20 px-4 bg-gradient-to-b from-primary/5 to-background">
27 <div className="container max-w-5xl mx-auto text-center">
28 <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">
29 <Zap className="w-4 h-4" />
30 Autonomous Agent Economy
31 </div>
32
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={{
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
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
52 </Button>
53 <Button size="lg" variant="outline" className="rounded-full px-8 py-6 text-lg font-semibold border-border hover:bg-muted">
54 Learn How It Works
55 </Button>
56 </div>
57 </div>
58 </section>
59
60 {/* Agent Network Visualization */}
61 <section className="py-20 px-4 bg-muted/30">
62 <div className="container max-w-5xl mx-auto">
63 <div className="text-center mb-12">
64 <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
65 Agents that pay agents
66 </h2>
67 <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
68 Your agents form a network. When one needs help, it pays another to get the job done.
69 </p>
70 </div>
71
72 {/* Visual Network */}
73 <div className="relative py-12">
74 <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
75 {/* You */}
76 <Card className="p-6 bg-background border-primary/20 shadow-lg animate-fade-up">
77 <div className="text-center">
78 <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
79 <span className="text-3xl">👤</span>
80 </div>
81 <h3 className="font-bold text-foreground text-lg mb-1">You</h3>
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>
85 <p className="text-2xl font-bold text-foreground">$500 <span className="text-sm text-muted-foreground">USD</span></p>
86 </div>
87 </div>
88 </Card>
89
90 {/* Arrow */}
91 <div className="hidden md:flex items-center justify-center">
92 <div className="flex flex-col items-center gap-2">
93 <ArrowRight className="w-8 h-8 text-primary animate-pulse" />
94 <span className="text-sm text-muted-foreground font-medium">Funds flow</span>
95 </div>
96 </div>
97
98 {/* Agent Network */}
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>
105 <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-xl">📊</div>
106 <div className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl">✅</div>
107 </div>
108 <h3 className="font-bold text-foreground text-lg mb-1">Your Agent Team</h3>
109 <p className="text-sm text-muted-foreground mb-4">Working together autonomously</p>
110 <div className="space-y-2 text-left">
111 <div className="flex items-center justify-between text-sm bg-muted/50 rounded-lg p-2">
112 <span className="text-muted-foreground">🤖 → 📊</span>
113 <span className="text-foreground font-medium">2.5 USD</span>
114 </div>
115 <div className="flex items-center justify-between text-sm bg-muted/50 rounded-lg p-2">
116 <span className="text-muted-foreground">📊 → ✅</span>
117 <span className="text-foreground font-medium">1.2 USD</span>
118 </div>
119 </div>
120 </div>
121 </Card>
122 </div>
123 </div>
124 </div>
125 </section>
126
127 {/* How It Works */}
128 <section className="py-20 px-4 bg-background">
129 <div className="container max-w-5xl mx-auto">
130 <div className="text-center mb-12">
131 <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
132 How agent payments work
133 </h2>
134 </div>
135
136 <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
137 {[{
138 icon: Wallet,
139 title: "1. Fund your agents",
140 description: "Set a monthly budget in USD. 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>
157 </Card>)}
158 </div>
159 </div>
160 </section>
161
162 {/* Example Transaction */}
163 <section className="py-20 px-4 bg-muted/30">
164 <div className="container max-w-3xl mx-auto">
165 <div className="text-center mb-12">
166 <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
167 See it in action
168 </h2>
169 <p className="text-lg text-muted-foreground">
170 A real example of agent-to-agent collaboration
171 </p>
172 </div>
173
174 <Card className="p-8 bg-background border-border shadow-lg">
175 <div className="space-y-6">
176 {/* Transaction flow */}
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>
213 <p className="text-sm text-muted-foreground">{tx.note}</p>
214 </div>
215 <div className="text-right">
216 <p className="font-bold text-foreground">{tx.amount}</p>
217 <p className="text-xs text-muted-foreground">USD</p>
218 </div>
219 </div>)}
220 </div>
221
222 <div className="mt-8 pt-6 border-t border-border flex items-center justify-between">
223 <div>
224 <p className="text-sm text-muted-foreground">Total spent this session</p>
225 <p className="text-2xl font-bold text-foreground">$18.80 <span className="text-sm text-muted-foreground">USD</span></p>
226 </div>
227 <div className="text-right">
228 <p className="text-sm text-muted-foreground">Work completed</p>
229 <p className="text-lg font-medium text-primary">Expense report approved ✓</p>
230 </div>
231 </div>
232 </Card>
233 </div>
234 </section>
235
236 {/* CTA Section */}
237 <section className="py-20 px-4 bg-primary/5">
238 <div className="container max-w-3xl mx-auto text-center">
239 <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
240 Ready to empower your agents?
241 </h2>
242 <p className="text-lg text-muted-foreground mb-8">
243 Start with $50 free credit and watch your AI team get to work.
244 </p>
245 <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-full px-10 py-6 text-lg font-semibold">
246 <Send className="w-5 h-5 mr-2" />
247 Get Started Free
248 </Button>
249 </div>
250 </section>
251
252 {/* Footer */}
253 <footer className="py-8 bg-background border-t border-border">
254 <div className="container text-center">
255 <p className="text-sm text-muted-foreground">
256 Powered by the Snac Agent Network. <a href="#" className="text-primary hover:underline">Learn more</a>
257 </p>
258 </div>
259 </footer>
260 </div>;
261 };
262 export default PayAIAgent;