Add src/app/community/page.tsx
This commit is contained in:
169
src/app/community/page.tsx
Normal file
169
src/app/community/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { MessageCircle, Users, Globe } from 'lucide-react';
|
||||
|
||||
export default function CommunityPage() {
|
||||
const communityChannels = [
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: "Discussion Forum", description: "Ask questions, share insights, and connect with other learners about financial topics.", link: "#", members: "5,234"
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Study Groups", description: "Join topic-specific study groups to learn together with peers on your level.", link: "#", members: "1,892"
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Events", description: "Participate in live webinars, challenges, and networking events with the FinHub community.", link: "#", members: "8,456"
|
||||
},
|
||||
];
|
||||
|
||||
const leaderboardData = [
|
||||
{ rank: 1, name: "Alex Chen", points: 2840, streak: "45 days" },
|
||||
{ rank: 2, name: "Sarah Williams", points: 2720, streak: "38 days" },
|
||||
{ rank: 3, name: "Marcus Johnson", points: 2590, streak: "32 days" },
|
||||
{ rank: 4, name: "Emma Rodriguez", points: 2410, streak: "28 days" },
|
||||
{ rank: 5, name: "James Park", points: 2280, streak: "24 days" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Learn", id: "/" },
|
||||
{ name: "Courses", id: "/courses" },
|
||||
{ name: "Community", id: "/community" },
|
||||
{ name: "FAQ", id: "/" },
|
||||
{ name: "Login", id: "/login" },
|
||||
]}
|
||||
button={{
|
||||
text: "Join Community", href: "/signup"
|
||||
}}
|
||||
brandName="FinHub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background pt-20 pb-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">FinHub Community</h1>
|
||||
<p className="text-lg text-foreground opacity-75 max-w-2xl mx-auto">
|
||||
Connect with thousands of learners, share experiences, and grow together in our supportive financial education community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Community Channels */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
{communityChannels.map((channel, index) => {
|
||||
const Icon = channel.icon;
|
||||
return (
|
||||
<div key={index} className="bg-card rounded-lg shadow-md p-8 hover:shadow-lg transition-shadow">
|
||||
<Icon className="text-primary-cta mb-4" size={40} />
|
||||
<h3 className="text-xl font-bold text-foreground mb-3">{channel.title}</h3>
|
||||
<p className="text-foreground opacity-75 mb-4">{channel.description}</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-foreground opacity-60">{channel.members} members</span>
|
||||
<a
|
||||
href={channel.link}
|
||||
className="text-primary-cta hover:underline font-semibold"
|
||||
>
|
||||
Join →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Leaderboard */}
|
||||
<div className="bg-card rounded-lg shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Top Learners Leaderboard</h2>
|
||||
<div className="space-y-4">
|
||||
{leaderboardData.map((user) => (
|
||||
<div key={user.rank} className="flex items-center justify-between p-4 bg-background rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-primary-cta text-white rounded-full flex items-center justify-center font-bold">
|
||||
{user.rank}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">{user.name}</p>
|
||||
<p className="text-sm text-foreground opacity-60">Streak: {user.streak}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg font-bold text-primary-cta">{user.points} pts</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
|
||||
<div className="bg-card rounded-lg p-8 text-center shadow-md">
|
||||
<p className="text-4xl font-bold text-primary-cta mb-2">15K+</p>
|
||||
<p className="text-foreground opacity-75">Active Members</p>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-8 text-center shadow-md">
|
||||
<p className="text-4xl font-bold text-primary-cta mb-2">500+</p>
|
||||
<p className="text-foreground opacity-75">Daily Discussions</p>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-8 text-center shadow-md">
|
||||
<p className="text-4xl font-bold text-primary-cta mb-2">50+</p>
|
||||
<p className="text-foreground opacity-75">Weekly Events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
|
||||
imageAlt="FinHub gradient background"
|
||||
logoText="FinHub"
|
||||
copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
|
||||
columns={[
|
||||
{
|
||||
title: "Learning", items: [
|
||||
{ label: "Courses", href: "/courses" },
|
||||
{ label: "Lessons", href: "/" },
|
||||
{ label: "Challenges", href: "#" },
|
||||
{ label: "Resources", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Forum", href: "#" },
|
||||
{ label: "Discord", href: "#" },
|
||||
{ label: "Leaderboard", href: "#" },
|
||||
{ label: "Events", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user