Skip to content

Commit 3e23984

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Add comprehensive Flutter SDK promotion and dedicated webpage with navigation
Co-authored-by: 0xrinegade <[email protected]>
1 parent b34ad64 commit 3e23984

File tree

6 files changed

+788
-4
lines changed

6 files changed

+788
-4
lines changed

‎website/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { AboutPage } from './pages/AboutPage'
1414
import { CareersPage } from './pages/CareersPage'
1515
import { PrivacyPage } from './pages/PrivacyPage'
1616
import { TermsPage } from './pages/TermsPage'
17+
import { FlutterPage } from './pages/FlutterPage'
1718
import { Navigation } from './components/Navigation'
1819
import { Footer } from './components/Footer'
1920

@@ -37,6 +38,7 @@ function App() {
3738
<Route path="/careers" element={<CareersPage />} />
3839
<Route path="/privacy" element={<PrivacyPage />} />
3940
<Route path="/terms" element={<TermsPage />} />
41+
<Route path="/flutter" element={<FlutterPage />} />
4042
</Routes>
4143
<Footer />
4244
</div>

‎website/src/components/Features.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
Coins,
99
Clock,
1010
ArrowRight,
11-
Terminal
11+
Terminal,
12+
Smartphone
1213
} from 'lucide-react'
1314

1415
const features = [
@@ -60,6 +61,14 @@ const features = [
6061
bgColor: 'bg-orange-100',
6162
borderColor: 'border-orange-200'
6263
},
64+
{
65+
icon: Smartphone,
66+
title: 'Flutter SDK',
67+
description: 'Cross-platform mobile apps with native performance, enterprise security, and ready-to-use widgets.',
68+
color: 'text-blue-600',
69+
bgColor: 'bg-blue-100',
70+
borderColor: 'border-blue-200'
71+
},
6372
{
6473
icon: Terminal,
6574
title: 'Assembly-BPF SDK',

‎website/src/components/FlutterPromo.tsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { motion } from 'framer-motion'
2+
import { Link } from 'react-router-dom'
3+
import {
4+
Smartphone,
5+
Zap,
6+
Shield,
7+
Code,
8+
ArrowRight,
9+
Download,
10+
CheckCircle
11+
} from 'lucide-react'
12+
13+
export function FlutterPromo() {
14+
return (
15+
<section className="py-32 bg-gradient-to-br from-blue-50 via-white to-purple-50">
16+
<div className="max-w-7xl mx-auto px-6 sm:px-8">
17+
<motion.div
18+
initial={{ opacity: 0, y: 20 }}
19+
whileInView={{ opacity: 1, y: 0 }}
20+
viewport={{ once: true }}
21+
transition={{ duration: 0.8 }}
22+
className="text-center mb-20"
23+
>
24+
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-black text-slate-900 mb-8">
25+
Now Available for
26+
<br />
27+
<span className="gradient-text inline-flex items-center">
28+
<Smartphone className="w-16 h-16 mr-4" />
29+
Flutter
30+
</span>
31+
</h2>
32+
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
33+
Build cross-platform mobile payment apps with our new Flutter SDK. Native performance,
34+
enterprise security, and all the power of SVM-Pay in your Flutter applications.
35+
</p>
36+
</motion.div>
37+
38+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
39+
{/* Left side - Features */}
40+
<motion.div
41+
initial={{ opacity: 0, x: -20 }}
42+
whileInView={{ opacity: 1, x: 0 }}
43+
viewport={{ once: true }}
44+
transition={{ duration: 0.8 }}
45+
>
46+
<div className="space-y-8">
47+
<div className="flex items-start">
48+
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
49+
<Smartphone className="w-6 h-6 text-blue-600" />
50+
</div>
51+
<div>
52+
<h3 className="text-xl font-bold text-slate-900 mb-2">Cross-Platform Native</h3>
53+
<p className="text-slate-600">Single Dart codebase runs natively on both iOS and Android with platform-specific optimizations.</p>
54+
</div>
55+
</div>
56+
57+
<div className="flex items-start">
58+
<div className="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
59+
<Zap className="w-6 h-6 text-yellow-600" />
60+
</div>
61+
<div>
62+
<h3 className="text-xl font-bold text-slate-900 mb-2">Lightning Performance</h3>
63+
<p className="text-slate-600">70% faster address validation with native method channels and optimized network adapters.</p>
64+
</div>
65+
</div>
66+
67+
<div className="flex items-start">
68+
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
69+
<Shield className="w-6 h-6 text-green-600" />
70+
</div>
71+
<div>
72+
<h3 className="text-xl font-bold text-slate-900 mb-2">Enterprise Security</h3>
73+
<p className="text-slate-600">OWASP Mobile Security compliant with comprehensive security audits and 73+ passing tests.</p>
74+
</div>
75+
</div>
76+
77+
<div className="flex items-start">
78+
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
79+
<Code className="w-6 h-6 text-purple-600" />
80+
</div>
81+
<div>
82+
<h3 className="text-xl font-bold text-slate-900 mb-2">Ready-to-Use Widgets</h3>
83+
<p className="text-slate-600">Drop-in PaymentButton, PaymentForm, and PaymentQRCode widgets with built-in validation.</p>
84+
</div>
85+
</div>
86+
</div>
87+
</motion.div>
88+
89+
{/* Right side - Code Example */}
90+
<motion.div
91+
initial={{ opacity: 0, x: 20 }}
92+
whileInView={{ opacity: 1, x: 0 }}
93+
viewport={{ once: true }}
94+
transition={{ duration: 0.8, delay: 0.2 }}
95+
>
96+
<div className="bg-slate-900 rounded-3xl p-8 shadow-2xl">
97+
<div className="flex items-center justify-between mb-6">
98+
<div className="flex items-center">
99+
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
100+
<div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
101+
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
102+
</div>
103+
<span className="text-slate-400 text-sm font-mono">main.dart</span>
104+
</div>
105+
<pre className="text-blue-300 font-mono text-sm leading-relaxed overflow-x-auto">
106+
{`// Initialize Flutter SDK
107+
final svmPay = SVMPay(
108+
config: SVMPayConfig(
109+
defaultNetwork: SVMNetwork.solana,
110+
),
111+
);
112+
113+
// Ready-to-use payment widget
114+
PaymentButton(
115+
recipient: 'recipient_address',
116+
amount: '1.0',
117+
label: 'Pay 1.0 SOL',
118+
onPayment: (result) async {
119+
if (result.status == PaymentStatus.confirmed) {
120+
print('Payment successful!');
121+
}
122+
},
123+
)`}
124+
</pre>
125+
</div>
126+
</motion.div>
127+
</div>
128+
129+
{/* Stats Row */}
130+
<motion.div
131+
initial={{ opacity: 0, y: 20 }}
132+
whileInView={{ opacity: 1, y: 0 }}
133+
viewport={{ once: true }}
134+
transition={{ duration: 0.8, delay: 0.4 }}
135+
className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16"
136+
>
137+
<div className="text-center">
138+
<div className="text-3xl font-black text-slate-900 mb-2">73+</div>
139+
<div className="text-slate-600">Security Tests</div>
140+
</div>
141+
<div className="text-center">
142+
<div className="text-3xl font-black text-slate-900 mb-2">70%</div>
143+
<div className="text-slate-600">Faster Performance</div>
144+
</div>
145+
<div className="text-center">
146+
<div className="text-3xl font-black text-slate-900 mb-2">10+</div>
147+
<div className="text-slate-600">SVM Networks</div>
148+
</div>
149+
<div className="text-center">
150+
<div className="text-3xl font-black text-slate-900 mb-2">100%</div>
151+
<div className="text-slate-600">Type Safe</div>
152+
</div>
153+
</motion.div>
154+
155+
{/* CTA Buttons */}
156+
<motion.div
157+
initial={{ opacity: 0, y: 20 }}
158+
whileInView={{ opacity: 1, y: 0 }}
159+
viewport={{ once: true }}
160+
transition={{ duration: 0.8, delay: 0.6 }}
161+
className="text-center"
162+
>
163+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
164+
<Link
165+
to="/flutter"
166+
className="bg-slate-900 text-white hover:bg-slate-800 px-8 py-4 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 inline-flex items-center"
167+
>
168+
<Smartphone className="w-5 h-5 mr-3" />
169+
Explore Flutter SDK
170+
<ArrowRight className="w-5 h-5 ml-3" />
171+
</Link>
172+
<button className="border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 inline-flex items-center">
173+
<Download className="w-5 h-5 mr-3" />
174+
Quick Install
175+
</button>
176+
</div>
177+
178+
<p className="text-sm text-slate-500 mt-4">
179+
<code className="bg-slate-100 px-2 py-1 rounded font-mono">flutter pub add svm_pay</code>
180+
</p>
181+
</motion.div>
182+
183+
{/* Trust Indicators */}
184+
<motion.div
185+
initial={{ opacity: 0, y: 20 }}
186+
whileInView={{ opacity: 1, y: 0 }}
187+
viewport={{ once: true }}
188+
transition={{ duration: 0.8, delay: 0.8 }}
189+
className="flex flex-wrap items-center justify-center gap-8 mt-16 pt-16 border-t border-slate-200"
190+
>
191+
<div className="flex items-center text-slate-600">
192+
<CheckCircle className="w-5 h-5 text-green-600 mr-2" />
193+
<span>Production Ready</span>
194+
</div>
195+
<div className="flex items-center text-slate-600">
196+
<CheckCircle className="w-5 h-5 text-green-600 mr-2" />
197+
<span>Security Audited</span>
198+
</div>
199+
<div className="flex items-center text-slate-600">
200+
<CheckCircle className="w-5 h-5 text-green-600 mr-2" />
201+
<span>Open Source</span>
202+
</div>
203+
<div className="flex items-center text-slate-600">
204+
<CheckCircle className="w-5 h-5 text-green-600 mr-2" />
205+
<span>Enterprise Support</span>
206+
</div>
207+
</motion.div>
208+
</div>
209+
</section>
210+
)
211+
}

‎website/src/components/Navigation.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Link, useLocation } from 'react-router-dom'
22
import { motion } from 'framer-motion'
3-
import { Book, PlayCircle, Home, Menu, X, Code } from 'lucide-react'
3+
import { Book, PlayCircle, Home, Menu, X, Code, Smartphone } from 'lucide-react'
44
import { useState } from 'react'
55

66
export function Navigation() {
@@ -11,6 +11,7 @@ export function Navigation() {
1111
{ name: 'Home', href: '/', icon: Home },
1212
{ name: 'Documentation', href: '/docs', icon: Code },
1313
{ name: 'Tutorials', href: '/tutorials', icon: Book },
14+
{ name: 'Flutter SDK', href: '/flutter', icon: Smartphone },
1415
{ name: 'Demo', href: '/demo', icon: PlayCircle },
1516
]
1617

@@ -31,7 +32,8 @@ export function Navigation() {
3132
{navigation.map((item) => {
3233
const isActive = location.pathname === item.href ||
3334
(item.href === '/docs' && location.pathname.startsWith('/docs')) ||
34-
(item.href === '/tutorials' && location.pathname.startsWith('/tutorials'))
35+
(item.href === '/tutorials' && location.pathname.startsWith('/tutorials')) ||
36+
(item.href === '/flutter' && location.pathname.startsWith('/flutter'))
3537
return (
3638
<Link
3739
key={item.name}
@@ -79,7 +81,8 @@ export function Navigation() {
7981
{navigation.map((item) => {
8082
const isActive = location.pathname === item.href ||
8183
(item.href === '/docs' && location.pathname.startsWith('/docs')) ||
82-
(item.href === '/tutorials' && location.pathname.startsWith('/tutorials'))
84+
(item.href === '/tutorials' && location.pathname.startsWith('/tutorials')) ||
85+
(item.href === '/flutter' && location.pathname.startsWith('/flutter'))
8386
return (
8487
<Link
8588
key={item.name}

0 commit comments

Comments
 (0)