Skip to content

Commit b0a053b

Browse files
AdithaBuwanekaAdithaBuwaneka
authored
Merge pull request #371 from Code102SoftwareProject/home-page-ui-updated
feat: implement About Us page with mission, values, team members, and…
2 parents e691502 + d428ef8 commit b0a053b

1 file changed

Lines changed: 257 additions & 0 deletions

File tree

‎src/app/about/page.tsx‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { useRouter } from 'next/navigation';
5+
import {
6+
ArrowLeft,
7+
Users,
8+
Target,
9+
Heart,
10+
Globe,
11+
BookOpen,
12+
Award,
13+
Zap,
14+
CheckCircle,
15+
ArrowRight,
16+
Mail,
17+
MessageCircle
18+
} from 'lucide-react';
19+
20+
const AboutUsPage = () => {
21+
const router = useRouter();
22+
23+
const values = [
24+
{
25+
icon: Users,
26+
title: 'Community First',
27+
description: 'We believe in the power of peer-to-peer learning and building meaningful connections between learners and teachers.',
28+
color: 'from-blue-500 to-cyan-500'
29+
},
30+
{
31+
icon: BookOpen,
32+
title: 'Knowledge Sharing',
33+
description: 'Everyone has something valuable to teach. We make it easy to share knowledge and learn from others in your community.',
34+
color: 'from-purple-500 to-blue-500'
35+
},
36+
{
37+
icon: Target,
38+
title: 'Goal-Oriented',
39+
description: 'We help you set clear learning objectives and connect you with the right people to achieve your skill development goals.',
40+
color: 'from-green-500 to-blue-500'
41+
},
42+
{
43+
icon: Heart,
44+
title: 'Passion-Driven',
45+
description: 'Learning should be exciting! We connect passionate learners with enthusiastic teachers who love sharing their expertise.',
46+
color: 'from-pink-500 to-purple-500'
47+
}
48+
];
49+
50+
const stats = [
51+
{ number: '10K+', label: 'Active Learners', icon: Users },
52+
{ number: '500+', label: 'Skills Available', icon: BookOpen },
53+
{ number: '25K+', label: 'Successful Matches', icon: Award },
54+
{ number: '95%', label: 'Satisfaction Rate', icon: CheckCircle }
55+
];
56+
57+
const teamMembers = [
58+
{
59+
name: 'Sarah Chen',
60+
role: 'Co-Founder & CEO',
61+
description: 'Former educator passionate about democratizing learning through technology.',
62+
image: '/team/sarah.jpg'
63+
},
64+
{
65+
name: 'Michael Rodriguez',
66+
role: 'Co-Founder & CTO',
67+
description: 'Tech enthusiast building scalable platforms for peer-to-peer connections.',
68+
image: '/team/michael.jpg'
69+
},
70+
{
71+
name: 'Emily Johnson',
72+
role: 'Head of Community',
73+
description: 'Community builder focused on creating safe, inclusive learning environments.',
74+
image: '/team/emily.jpg'
75+
},
76+
{
77+
name: 'David Kim',
78+
role: 'Head of Product',
79+
description: 'Product strategist designing intuitive experiences for skill exchange.',
80+
image: '/team/david.jpg'
81+
}
82+
];
83+
84+
return (
85+
<div className="min-h-screen bg-gradient-to-br from-[#006699] via-blue-700 to-indigo-900">
86+
{/* Header with Back Button */}
87+
<div className="relative overflow-hidden">
88+
{/* Background Elements */}
89+
<div className="absolute inset-0">
90+
<div className="absolute top-16 left-16 text-cyan-300 opacity-20 text-2xl">+</div>
91+
<div className="absolute top-32 right-32 text-cyan-300 opacity-20 text-lg">+</div>
92+
<div className="absolute top-48 left-48 text-cyan-300 opacity-20 text-lg">+</div>
93+
<div className="absolute -right-20 top-1/4 w-96 h-96 bg-gradient-to-l from-cyan-400/10 to-transparent rounded-full blur-3xl"></div>
94+
</div>
95+
96+
<div className="relative z-10 container mx-auto px-6 py-8">
97+
{/* Back Button */}
98+
<button
99+
onClick={() => router.back()}
100+
className="inline-flex items-center gap-2 text-blue-100 hover:text-white transition-colors duration-300 mb-8 group"
101+
>
102+
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
103+
<span className="font-medium">Back</span>
104+
</button>
105+
106+
{/* Hero Section */}
107+
<div className="text-center mb-16">
108+
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
109+
<span className="bg-gradient-to-r from-cyan-300 to-blue-200 bg-clip-text text-transparent">
110+
About Us
111+
</span>
112+
</h1>
113+
<p className="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
114+
We're on a mission to revolutionize learning by connecting passionate individuals
115+
who want to share their skills and learn from each other.
116+
</p>
117+
</div>
118+
</div>
119+
</div>
120+
121+
{/* Mission Section */}
122+
<div className="container mx-auto px-6 py-16">
123+
<div className="max-w-4xl mx-auto text-center mb-16">
124+
<div className="inline-flex items-center gap-3 mb-6">
125+
<Target className="w-8 h-8 text-cyan-300" />
126+
<h2 className="text-3xl md:text-4xl font-bold text-white">Our Mission</h2>
127+
</div>
128+
<p className="text-lg text-blue-100 leading-relaxed mb-8">
129+
At SkillSwap Hub, we believe that everyone has something valuable to teach and something new to learn.
130+
Our platform breaks down traditional barriers to education by creating a community where knowledge flows
131+
freely between peers, fostering personal growth and meaningful connections.
132+
</p>
133+
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-cyan-300/20">
134+
<blockquote className="text-2xl font-semibold text-white italic">
135+
"Empowering individuals to unlock their potential through peer-to-peer skill exchange,
136+
building a world where learning never stops and knowledge knows no boundaries."
137+
</blockquote>
138+
</div>
139+
</div>
140+
</div>
141+
142+
{/* Values Section */}
143+
<div className="bg-gradient-to-r from-blue-800/50 to-[#006699]/50 py-16 relative overflow-hidden">
144+
<div className="absolute inset-0">
145+
<div className="absolute -left-20 bottom-1/4 w-80 h-80 bg-gradient-to-r from-cyan-400/10 to-transparent rounded-full blur-3xl"></div>
146+
</div>
147+
148+
<div className="container mx-auto px-6 relative z-10">
149+
<div className="text-center mb-12">
150+
<h2 className="text-4xl font-bold text-white mb-4">Our Values</h2>
151+
<p className="text-xl text-blue-100">The principles that guide everything we do</p>
152+
</div>
153+
154+
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
155+
{values.map((value, index) => (
156+
<div key={index} className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-cyan-300/20 hover:bg-white/15 transition-all duration-300 transform hover:scale-105">
157+
<div className={`w-16 h-16 bg-gradient-to-r ${value.color} rounded-2xl flex items-center justify-center mx-auto mb-4`}>
158+
<value.icon className="w-8 h-8 text-white" />
159+
</div>
160+
<h3 className="text-xl font-semibold text-white mb-3 text-center">{value.title}</h3>
161+
<p className="text-blue-100 text-center text-sm leading-relaxed">{value.description}</p>
162+
</div>
163+
))}
164+
</div>
165+
</div>
166+
</div>
167+
168+
{/* Stats Section */}
169+
<div className="container mx-auto px-6 py-16">
170+
<div className="text-center mb-12">
171+
<h2 className="text-4xl font-bold text-white mb-4">Our Impact</h2>
172+
<p className="text-xl text-blue-100">Building a thriving community of learners</p>
173+
</div>
174+
175+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
176+
{stats.map((stat, index) => (
177+
<div key={index} className="text-center group">
178+
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 hover:transform hover:scale-105">
179+
<stat.icon className="w-8 h-8 text-cyan-300 mx-auto mb-3 group-hover:scale-110 transition-transform" />
180+
<div className="text-3xl font-bold text-white mb-2">{stat.number}</div>
181+
<div className="text-blue-200 text-sm">{stat.label}</div>
182+
</div>
183+
</div>
184+
))}
185+
</div>
186+
</div>
187+
188+
{/* Story Section */}
189+
<div className="container mx-auto px-6 py-16">
190+
<div className="max-w-4xl mx-auto">
191+
<div className="text-center mb-12">
192+
<Globe className="w-12 h-12 text-cyan-300 mx-auto mb-4" />
193+
<h2 className="text-4xl font-bold text-white mb-4">Our Story</h2>
194+
<p className="text-xl text-blue-100">How we started and where we're going</p>
195+
</div>
196+
197+
<div className="space-y-8">
198+
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-cyan-300/20">
199+
<h3 className="text-2xl font-semibold text-white mb-4">The Beginning</h3>
200+
<p className="text-blue-100 leading-relaxed">
201+
Founded in 2023, SkillSwap Hub was born from a simple observation: traditional education often fails to
202+
connect people who want to learn with those who are passionate about teaching. Our founders, having
203+
experienced the limitations of formal learning systems, envisioned a platform where knowledge could be
204+
shared freely and organically within communities.
205+
</p>
206+
</div>
207+
208+
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-cyan-300/20">
209+
<h3 className="text-2xl font-semibold text-white mb-4">Today</h3>
210+
<p className="text-blue-100 leading-relaxed">
211+
Today, we're proud to serve thousands of learners and teachers worldwide. From coding bootcamps to
212+
cooking classes, from language exchange to professional mentoring, our platform has facilitated
213+
countless skill exchanges that have transformed lives and careers.
214+
</p>
215+
</div>
216+
217+
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-cyan-300/20">
218+
<h3 className="text-2xl font-semibold text-white mb-4">The Future</h3>
219+
<p className="text-blue-100 leading-relaxed">
220+
We're just getting started. Our vision extends beyond simple skill exchange to creating a global
221+
community where learning is collaborative, accessible, and deeply human. We're building features for
222+
group learning, skill certification, and even more innovative ways to connect learners and teachers.
223+
</p>
224+
</div>
225+
</div>
226+
</div>
227+
</div>
228+
229+
{/* CTA Section */}
230+
<div className="container mx-auto px-6 py-16 text-center">
231+
<h2 className="text-4xl font-bold text-white mb-6">Join Our Community</h2>
232+
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
233+
Be part of a movement that's changing how the world learns. Start sharing your skills today!
234+
</p>
235+
236+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
237+
<button
238+
className="group bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:from-cyan-300 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-cyan-500/25 flex items-center justify-center gap-2 min-w-[220px]"
239+
onClick={() => router.push('/register')}
240+
>
241+
Get Started
242+
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
243+
</button>
244+
<button
245+
className="group bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-2xl font-semibold text-lg border border-white/20 hover:bg-white/20 transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2 min-w-[220px]"
246+
onClick={() => router.push('/contact-us')}
247+
>
248+
<MessageCircle className="w-5 h-5" />
249+
Contact Us
250+
</button>
251+
</div>
252+
</div>
253+
</div>
254+
);
255+
};
256+
257+
export default AboutUsPage;

0 commit comments

Comments
 (0)