Skip to content

Commit 6b93758

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Implement all footer pages: examples, pricing, community, blog, changelog, support, about, careers, privacy, terms
Co-authored-by: 0xrinegade <[email protected]>
1 parent 93097ea commit 6b93758

File tree

11 files changed

+3893
-0
lines changed

11 files changed

+3893
-0
lines changed

‎website/src/App.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
33
import { LandingPage } from './pages/LandingPage'
44
import { DocsPage } from './pages/DocsPage'
55
import { DemoPage } from './pages/DemoPage'
6+
import { ExamplesPage } from './pages/ExamplesPage'
7+
import { PricingPage } from './pages/PricingPage'
8+
import { CommunityPage } from './pages/CommunityPage'
9+
import { BlogPage } from './pages/BlogPage'
10+
import { ChangelogPage } from './pages/ChangelogPage'
11+
import { SupportPage } from './pages/SupportPage'
12+
import { AboutPage } from './pages/AboutPage'
13+
import { CareersPage } from './pages/CareersPage'
14+
import { PrivacyPage } from './pages/PrivacyPage'
15+
import { TermsPage } from './pages/TermsPage'
616
import { Navigation } from './components/Navigation'
717
import { Footer } from './components/Footer'
818

@@ -15,6 +25,16 @@ function App() {
1525
<Route path="/" element={<LandingPage />} />
1626
<Route path="/docs/*" element={<DocsPage />} />
1727
<Route path="/demo" element={<DemoPage />} />
28+
<Route path="/examples" element={<ExamplesPage />} />
29+
<Route path="/pricing" element={<PricingPage />} />
30+
<Route path="/community" element={<CommunityPage />} />
31+
<Route path="/blog" element={<BlogPage />} />
32+
<Route path="/changelog" element={<ChangelogPage />} />
33+
<Route path="/support" element={<SupportPage />} />
34+
<Route path="/about" element={<AboutPage />} />
35+
<Route path="/careers" element={<CareersPage />} />
36+
<Route path="/privacy" element={<PrivacyPage />} />
37+
<Route path="/terms" element={<TermsPage />} />
1838
</Routes>
1939
<Footer />
2040
</div>

‎website/src/pages/AboutPage.tsx‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
import { motion } from 'framer-motion'
2+
import { Users, Target, Zap, Globe, Heart, Award, ArrowRight } from 'lucide-react'
3+
4+
const stats = [
5+
{ label: 'Developers Served', value: '10,000+', icon: Users },
6+
{ label: 'Transactions Processed', value: '$50M+', icon: Zap },
7+
{ label: 'Networks Supported', value: '10+', icon: Globe },
8+
{ label: 'Uptime', value: '99.9%', icon: Award }
9+
]
10+
11+
const team = [
12+
{
13+
name: 'Sarah Rodriguez',
14+
role: 'Co-founder & CEO',
15+
bio: 'Former VP of Engineering at Stripe, led payment infrastructure for 100M+ users',
16+
image: 'https://images.unsplash.com/photo-1494790108755-2616b612b9c3?w=300&h=300&fit=crop&crop=face',
17+
linkedin: 'https://linkedin.com/in/sarah-rodriguez'
18+
},
19+
{
20+
name: 'Alex Chen',
21+
role: 'Co-founder & CTO',
22+
bio: 'Ex-Facebook blockchain engineer, built cross-chain protocols for Meta\'s crypto projects',
23+
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face',
24+
linkedin: 'https://linkedin.com/in/alex-chen'
25+
},
26+
{
27+
name: 'Priya Patel',
28+
role: 'Head of Engineering',
29+
bio: 'Former Coinbase senior engineer, expert in bridge protocols and DeFi infrastructure',
30+
image: 'https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=300&h=300&fit=crop&crop=face',
31+
linkedin: 'https://linkedin.com/in/priya-patel'
32+
},
33+
{
34+
name: 'Mike Johnson',
35+
role: 'Head of Security',
36+
bio: 'Previously at Trail of Bits, specialized in smart contract auditing and security research',
37+
image: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=300&h=300&fit=crop&crop=face',
38+
linkedin: 'https://linkedin.com/in/mike-johnson'
39+
},
40+
{
41+
name: 'Emily Watson',
42+
role: 'Head of Product',
43+
bio: 'Former Figma product lead, designed developer tools used by millions of creators',
44+
image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop&crop=face',
45+
linkedin: 'https://linkedin.com/in/emily-watson'
46+
},
47+
{
48+
name: 'David Kim',
49+
role: 'Blockchain Engineer',
50+
bio: 'Ex-Solana Labs engineer, contributed to Solana core protocol and developer tooling',
51+
image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?w=300&h=300&fit=crop&crop=face',
52+
linkedin: 'https://linkedin.com/in/david-kim'
53+
}
54+
]
55+
56+
const values = [
57+
{
58+
title: 'Developer First',
59+
description: 'Every decision is made with developers in mind. We build tools we would want to use.',
60+
icon: Heart
61+
},
62+
{
63+
title: 'Interoperability',
64+
description: 'Breaking down silos between blockchains to create a unified payment experience.',
65+
icon: Globe
66+
},
67+
{
68+
title: 'Security',
69+
description: 'Security is not an afterthought. It\'s built into every layer of our infrastructure.',
70+
icon: Award
71+
},
72+
{
73+
title: 'Performance',
74+
description: 'Fast, reliable, and scalable. We optimize for both developer and user experience.',
75+
icon: Zap
76+
}
77+
]
78+
79+
const milestones = [
80+
{
81+
year: '2023',
82+
quarter: 'Q1',
83+
title: 'Company Founded',
84+
description: 'Started by blockchain veterans from Stripe, Facebook, and Coinbase'
85+
},
86+
{
87+
year: '2023',
88+
quarter: 'Q2',
89+
title: 'Solana Payments Launch',
90+
description: 'First payment infrastructure focusing on Solana ecosystem'
91+
},
92+
{
93+
year: '2023',
94+
quarter: 'Q4',
95+
title: 'Series A Funding',
96+
description: 'Raised $5M led by Andreessen Horowitz and Solana Ventures'
97+
},
98+
{
99+
year: '2024',
100+
quarter: 'Q2',
101+
title: 'Multi-Network Support',
102+
description: 'Expanded to support 4 SVM networks: Solana, Sonic, Eclipse, s00n'
103+
},
104+
{
105+
year: '2024',
106+
quarter: 'Q4',
107+
title: 'Cross-Chain Launch',
108+
description: 'Revolutionary cross-chain payments from 6 EVM networks to SVM'
109+
},
110+
{
111+
year: '2025',
112+
quarter: 'Q1',
113+
title: 'Global Expansion',
114+
description: 'Opening offices in Singapore and London to serve global developers'
115+
}
116+
]
117+
118+
export function AboutPage() {
119+
return (
120+
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
121+
{/* Hero Section */}
122+
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white py-24">
123+
<div className="max-w-7xl mx-auto px-6 sm:px-8">
124+
<motion.div
125+
initial={{ opacity: 0, y: 20 }}
126+
animate={{ opacity: 1, y: 0 }}
127+
transition={{ duration: 0.8 }}
128+
className="text-center"
129+
>
130+
<h1 className="text-5xl md:text-6xl font-black mb-6">
131+
About SVM-Pay
132+
</h1>
133+
<p className="text-xl md:text-2xl text-purple-100 max-w-4xl mx-auto mb-8">
134+
We're building the future of cross-chain payments, making it easy for developers
135+
to accept payments across any blockchain network.
136+
</p>
137+
</motion.div>
138+
</div>
139+
</div>
140+
141+
<div className="max-w-7xl mx-auto px-6 sm:px-8 py-16">
142+
{/* Stats */}
143+
<motion.div
144+
initial={{ opacity: 0, y: 20 }}
145+
animate={{ opacity: 1, y: 0 }}
146+
transition={{ duration: 0.8, delay: 0.2 }}
147+
className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-20"
148+
>
149+
{stats.map((stat, index) => (
150+
<motion.div
151+
key={stat.label}
152+
initial={{ opacity: 0, y: 20 }}
153+
animate={{ opacity: 1, y: 0 }}
154+
transition={{ duration: 0.8, delay: index * 0.1 }}
155+
className="text-center"
156+
>
157+
<div className="w-16 h-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
158+
<stat.icon className="w-8 h-8 text-white" />
159+
</div>
160+
<div className="text-3xl font-bold text-slate-900 mb-2">{stat.value}</div>
161+
<div className="text-slate-600">{stat.label}</div>
162+
</motion.div>
163+
))}
164+
</motion.div>
165+
166+
{/* Mission */}
167+
<motion.div
168+
initial={{ opacity: 0, y: 20 }}
169+
whileInView={{ opacity: 1, y: 0 }}
170+
viewport={{ once: true }}
171+
transition={{ duration: 0.8 }}
172+
className="mb-20"
173+
>
174+
<div className="text-center mb-12">
175+
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Our Mission</h2>
176+
<div className="max-w-4xl mx-auto">
177+
<p className="text-xl text-slate-600 mb-8 leading-relaxed">
178+
Blockchain technology has created powerful networks, but they remain isolated islands.
179+
We believe the future of payments is cross-chain, where users can pay from any network
180+
to any network seamlessly.
181+
</p>
182+
<p className="text-xl text-slate-600 leading-relaxed">
183+
SVM-Pay breaks down these barriers, enabling developers to build payment experiences
184+
that work across the entire blockchain ecosystem. Whether your users have ETH on Ethereum
185+
or SOL on Solana, they should be able to pay you without friction.
186+
</p>
187+
</div>
188+
</div>
189+
</motion.div>
190+
191+
{/* Values */}
192+
<motion.div
193+
initial={{ opacity: 0, y: 20 }}
194+
whileInView={{ opacity: 1, y: 0 }}
195+
viewport={{ once: true }}
196+
transition={{ duration: 0.8 }}
197+
className="mb-20"
198+
>
199+
<div className="text-center mb-12">
200+
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our Values</h2>
201+
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
202+
The principles that guide everything we build
203+
</p>
204+
</div>
205+
206+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
207+
{values.map((value, index) => (
208+
<motion.div
209+
key={value.title}
210+
initial={{ opacity: 0, y: 20 }}
211+
whileInView={{ opacity: 1, y: 0 }}
212+
viewport={{ once: true }}
213+
transition={{ duration: 0.8, delay: index * 0.1 }}
214+
className="bg-white rounded-2xl p-8 shadow-sm border"
215+
>
216+
<div className="flex items-start gap-4">
217+
<div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
218+
<value.icon className="w-6 h-6 text-white" />
219+
</div>
220+
<div>
221+
<h3 className="text-xl font-bold text-slate-900 mb-3">{value.title}</h3>
222+
<p className="text-slate-600 leading-relaxed">{value.description}</p>
223+
</div>
224+
</div>
225+
</motion.div>
226+
))}
227+
</div>
228+
</motion.div>
229+
230+
{/* Team */}
231+
<motion.div
232+
initial={{ opacity: 0, y: 20 }}
233+
whileInView={{ opacity: 1, y: 0 }}
234+
viewport={{ once: true }}
235+
transition={{ duration: 0.8 }}
236+
className="mb-20"
237+
>
238+
<div className="text-center mb-12">
239+
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Meet Our Team</h2>
240+
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
241+
Experienced engineers and product leaders from the world's top tech companies
242+
</p>
243+
</div>
244+
245+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
246+
{team.map((member, index) => (
247+
<motion.div
248+
key={member.name}
249+
initial={{ opacity: 0, y: 20 }}
250+
whileInView={{ opacity: 1, y: 0 }}
251+
viewport={{ once: true }}
252+
transition={{ duration: 0.8, delay: index * 0.1 }}
253+
className="bg-white rounded-2xl p-6 shadow-sm border text-center hover:shadow-lg transition-all duration-300"
254+
>
255+
<img
256+
src={member.image}
257+
alt={member.name}
258+
className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
259+
/>
260+
<h3 className="text-xl font-bold text-slate-900 mb-1">{member.name}</h3>
261+
<p className="text-purple-600 font-medium mb-3">{member.role}</p>
262+
<p className="text-slate-600 text-sm mb-4 leading-relaxed">{member.bio}</p>
263+
<a
264+
href={member.linkedin}
265+
target="_blank"
266+
rel="noopener noreferrer"
267+
className="text-blue-600 hover:text-blue-700 font-medium"
268+
>
269+
Connect on LinkedIn
270+
</a>
271+
</motion.div>
272+
))}
273+
</div>
274+
</motion.div>
275+
276+
{/* Timeline */}
277+
<motion.div
278+
initial={{ opacity: 0, y: 20 }}
279+
whileInView={{ opacity: 1, y: 0 }}
280+
viewport={{ once: true }}
281+
transition={{ duration: 0.8 }}
282+
className="mb-20"
283+
>
284+
<div className="text-center mb-12">
285+
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Our Journey</h2>
286+
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
287+
From startup to industry leader in cross-chain payments
288+
</p>
289+
</div>
290+
291+
<div className="relative">
292+
{/* Timeline line */}
293+
<div className="absolute left-1/2 transform -translate-x-1/2 w-1 bg-gradient-to-b from-purple-600 to-blue-600 h-full rounded-full"></div>
294+
295+
<div className="space-y-12">
296+
{milestones.map((milestone, index) => (
297+
<motion.div
298+
key={`${milestone.year}-${milestone.quarter}`}
299+
initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
300+
whileInView={{ opacity: 1, x: 0 }}
301+
viewport={{ once: true }}
302+
transition={{ duration: 0.8, delay: index * 0.1 }}
303+
className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
304+
>
305+
<div className={`w-5/12 ${index % 2 === 0 ? 'text-right pr-8' : 'text-left pl-8'}`}>
306+
<div className="bg-white rounded-2xl p-6 shadow-sm border">
307+
<div className="text-sm font-medium text-purple-600 mb-2">{milestone.year} {milestone.quarter}</div>
308+
<h3 className="text-xl font-bold text-slate-900 mb-2">{milestone.title}</h3>
309+
<p className="text-slate-600">{milestone.description}</p>
310+
</div>
311+
</div>
312+
313+
{/* Timeline dot */}
314+
<div className="w-2/12 flex justify-center">
315+
<div className="w-4 h-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full border-4 border-white shadow-lg"></div>
316+
</div>
317+
318+
<div className="w-5/12"></div>
319+
</motion.div>
320+
))}
321+
</div>
322+
</div>
323+
</motion.div>
324+
325+
{/* CTA */}
326+
<motion.div
327+
initial={{ opacity: 0, y: 20 }}
328+
whileInView={{ opacity: 1, y: 0 }}
329+
viewport={{ once: true }}
330+
transition={{ duration: 0.8 }}
331+
className="text-center"
332+
>
333+
<div className="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-white">
334+
<Target className="w-16 h-16 mx-auto mb-6 text-purple-200" />
335+
<h2 className="text-3xl font-bold mb-4">Join Our Mission</h2>
336+
<p className="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">
337+
We're always looking for talented individuals who share our vision of a connected blockchain future.
338+
</p>
339+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
340+
<a
341+
href="/careers"
342+
className="bg-white text-purple-600 px-8 py-4 rounded-lg font-semibold hover:bg-slate-50 transition-all duration-300 hover:scale-105 flex items-center justify-center gap-2"
343+
>
344+
View Open Positions
345+
<ArrowRight className="w-5 h-5" />
346+
</a>
347+
<a
348+
href="mailto:[email protected]"
349+
className="bg-purple-500/20 backdrop-blur-sm border border-white/20 text-white px-8 py-4 rounded-lg font-semibold hover:bg-purple-500/30 transition-all duration-300 hover:scale-105"
350+
>
351+
Get in Touch
352+
</a>
353+
</div>
354+
</div>
355+
</motion.div>
356+
</div>
357+
</div>
358+
)
359+
}

0 commit comments

Comments
 (0)