Skip to content

Commit e09826e

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
Add Phase 1 core navigation pages: team, contact, contributing, community
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent 31e1f73 commit e09826e

4 files changed

Lines changed: 926 additions & 0 deletions

File tree

‎src/app/community/page.tsx‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
import { Container } from "@/components/ui/container"
2+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
3+
import { Button } from "@/components/ui/button"
4+
import { GitHubLogoIcon, ChatBubbleIcon, HeartIcon, RocketIcon, CheckIcon } from "@radix-ui/react-icons"
5+
import type { Metadata } from "next"
6+
7+
export const metadata: Metadata = {
8+
title: "Community",
9+
description: "Join the CodeStorm Hub community. Learn about our values, guidelines, and how to participate.",
10+
openGraph: {
11+
title: "Community | CodeStorm Hub",
12+
description: "Join the CodeStorm Hub community. Learn about our values, guidelines, and how to participate.",
13+
},
14+
}
15+
16+
const communityValues = [
17+
{
18+
title: "Inclusivity",
19+
description: "We welcome contributors from all backgrounds and experience levels.",
20+
icon: HeartIcon,
21+
},
22+
{
23+
title: "Collaboration",
24+
description: "Great things happen when we work together toward common goals.",
25+
icon: ChatBubbleIcon,
26+
},
27+
{
28+
title: "Innovation",
29+
description: "We encourage creative thinking and exploring new possibilities.",
30+
icon: RocketIcon,
31+
},
32+
{
33+
title: "Quality",
34+
description: "We strive for excellence in everything we create and maintain.",
35+
icon: CheckIcon,
36+
},
37+
]
38+
39+
const guidelines = [
40+
{
41+
title: "Be Respectful",
42+
items: [
43+
"Treat all community members with kindness and respect",
44+
"Use inclusive language that welcomes everyone",
45+
"Respect different opinions and perspectives",
46+
"Give constructive feedback rather than criticism",
47+
],
48+
},
49+
{
50+
title: "Be Helpful",
51+
items: [
52+
"Support other community members when they ask for help",
53+
"Share your knowledge and experience",
54+
"Mentor newcomers and help them get started",
55+
"Celebrate others' achievements and contributions",
56+
],
57+
},
58+
{
59+
title: "Be Professional",
60+
items: [
61+
"Keep discussions relevant to the project or community",
62+
"Avoid spam, self-promotion, or off-topic content",
63+
"Use appropriate channels for different types of communication",
64+
"Respect project maintainers' decisions and guidelines",
65+
],
66+
},
67+
{
68+
title: "Be Collaborative",
69+
items: [
70+
"Work together to solve problems and build great software",
71+
"Be open to feedback and different approaches",
72+
"Share credit and acknowledge contributions",
73+
"Focus on what's best for the community and projects",
74+
],
75+
},
76+
]
77+
78+
const participationWays = [
79+
{
80+
title: "Join Discussions",
81+
description: "Participate in GitHub Discussions to share ideas and ask questions",
82+
action: "Visit Discussions",
83+
href: "https://github.com/orgs/CodeStorm-Hub/discussions",
84+
},
85+
{
86+
title: "Contribute Code",
87+
description: "Submit pull requests with bug fixes, features, or improvements",
88+
action: "View Contributing Guide",
89+
href: "/contributing",
90+
},
91+
{
92+
title: "Report Issues",
93+
description: "Help improve our projects by reporting bugs or suggesting enhancements",
94+
action: "Browse Repositories",
95+
href: "https://github.com/CodeStorm-Hub",
96+
},
97+
{
98+
title: "Spread the Word",
99+
description: "Share our projects and help grow the community",
100+
action: "Follow on GitHub",
101+
href: "https://github.com/CodeStorm-Hub",
102+
},
103+
]
104+
105+
export default function CommunityPage() {
106+
return (
107+
<div className="py-12">
108+
<Container>
109+
<div className="space-y-12">
110+
{/* Hero */}
111+
<div className="text-center space-y-4">
112+
<h1 className="text-4xl font-bold tracking-tight">Welcome to Our Community</h1>
113+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
114+
CodeStorm Hub is more than just code—it&apos;s a community of passionate individuals
115+
working together to create amazing open source projects. We believe in the power
116+
of collaboration, learning, and mutual support.
117+
</p>
118+
</div>
119+
120+
{/* Community Values */}
121+
<div>
122+
<div className="text-center mb-8">
123+
<h2 className="text-3xl font-bold tracking-tight mb-4">Our Values</h2>
124+
<p className="text-muted-foreground max-w-2xl mx-auto">
125+
These values guide everything we do and help create a positive environment for everyone.
126+
</p>
127+
</div>
128+
129+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
130+
{communityValues.map((value, index) => {
131+
const Icon = value.icon
132+
return (
133+
<Card key={index} className="text-center">
134+
<CardHeader>
135+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
136+
<Icon className="h-6 w-6 text-primary" />
137+
</div>
138+
<CardTitle className="text-lg">{value.title}</CardTitle>
139+
</CardHeader>
140+
<CardContent>
141+
<p className="text-sm text-muted-foreground">{value.description}</p>
142+
</CardContent>
143+
</Card>
144+
)
145+
})}
146+
</div>
147+
</div>
148+
149+
{/* Community Guidelines */}
150+
<div>
151+
<div className="text-center mb-8">
152+
<h2 className="text-3xl font-bold tracking-tight mb-4">Community Guidelines</h2>
153+
<p className="text-muted-foreground max-w-2xl mx-auto">
154+
To maintain a welcoming and productive environment, we ask all community members
155+
to follow these guidelines.
156+
</p>
157+
</div>
158+
159+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
160+
{guidelines.map((guideline, index) => (
161+
<Card key={index}>
162+
<CardHeader>
163+
<CardTitle className="text-lg">{guideline.title}</CardTitle>
164+
</CardHeader>
165+
<CardContent>
166+
<ul className="space-y-2">
167+
{guideline.items.map((item, itemIndex) => (
168+
<li key={itemIndex} className="flex items-start gap-2 text-sm">
169+
<CheckIcon className="h-4 w-4 text-green-600 flex-shrink-0 mt-0.5" />
170+
<span className="text-muted-foreground">{item}</span>
171+
</li>
172+
))}
173+
</ul>
174+
</CardContent>
175+
</Card>
176+
))}
177+
</div>
178+
</div>
179+
180+
{/* How to Participate */}
181+
<div>
182+
<div className="text-center mb-8">
183+
<h2 className="text-3xl font-bold tracking-tight mb-4">How to Participate</h2>
184+
<p className="text-muted-foreground max-w-2xl mx-auto">
185+
There are many ways to get involved in our community. Choose what works best for you!
186+
</p>
187+
</div>
188+
189+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
190+
{participationWays.map((way, index) => (
191+
<Card key={index}>
192+
<CardHeader>
193+
<CardTitle className="text-lg">{way.title}</CardTitle>
194+
<CardDescription>{way.description}</CardDescription>
195+
</CardHeader>
196+
<CardContent>
197+
<Button className="w-full" asChild>
198+
<a
199+
href={way.href}
200+
target={way.href.startsWith('http') ? "_blank" : undefined}
201+
rel={way.href.startsWith('http') ? "noopener noreferrer" : undefined}
202+
>
203+
{way.href.startsWith('http') && <GitHubLogoIcon className="mr-2 h-4 w-4" />}
204+
{way.action}
205+
</a>
206+
</Button>
207+
</CardContent>
208+
</Card>
209+
))}
210+
</div>
211+
</div>
212+
213+
{/* Code of Conduct */}
214+
<Card className="bg-muted/50">
215+
<CardHeader className="text-center">
216+
<CardTitle className="text-2xl">Code of Conduct</CardTitle>
217+
<CardDescription className="text-base">
218+
Our commitment to creating a safe and inclusive environment
219+
</CardDescription>
220+
</CardHeader>
221+
<CardContent className="text-center space-y-4">
222+
<p className="text-muted-foreground max-w-2xl mx-auto">
223+
We are committed to providing a friendly, safe, and welcoming environment for all,
224+
regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status,
225+
and religion (or lack thereof).
226+
</p>
227+
<p className="text-muted-foreground max-w-2xl mx-auto">
228+
By participating in our community, you agree to abide by our Code of Conduct.
229+
Violations may result in temporary or permanent bans from community spaces.
230+
</p>
231+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
232+
<Button asChild>
233+
<a href="/code-of-conduct">
234+
Read Full Code of Conduct
235+
</a>
236+
</Button>
237+
<Button variant="outline" asChild>
238+
<a href="/contact">
239+
Report an Issue
240+
</a>
241+
</Button>
242+
</div>
243+
</CardContent>
244+
</Card>
245+
246+
{/* Recognition */}
247+
<Card className="bg-gradient-to-r from-primary/5 to-blue-500/5 border-primary/20">
248+
<CardHeader className="text-center">
249+
<CardTitle className="text-2xl">Community Recognition</CardTitle>
250+
<CardDescription className="text-base">
251+
Celebrating our amazing community members
252+
</CardDescription>
253+
</CardHeader>
254+
<CardContent className="text-center space-y-4">
255+
<p className="text-muted-foreground max-w-2xl mx-auto">
256+
We regularly recognize outstanding contributions and community members who go above
257+
and beyond to help others and improve our projects. Every contribution, big or small,
258+
makes a difference!
259+
</p>
260+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
261+
<Button variant="outline" asChild>
262+
<a href="/team">
263+
Meet Our Contributors
264+
</a>
265+
</Button>
266+
<Button variant="outline" asChild>
267+
<a href="/contributing">
268+
Start Contributing
269+
</a>
270+
</Button>
271+
</div>
272+
</CardContent>
273+
</Card>
274+
</div>
275+
</Container>
276+
</div>
277+
)
278+
}

0 commit comments

Comments
 (0)