Skip to content

Commit dbc4269

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
Add Phase 2 content pages: blog, roadmap, changelog, resources, events
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent e09826e commit dbc4269

5 files changed

Lines changed: 1599 additions & 0 deletions

File tree

‎src/app/blog/page.tsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
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 { CalendarIcon, PersonIcon, ArrowRightIcon } from "@radix-ui/react-icons"
5+
import type { Metadata } from "next"
6+
7+
export const metadata: Metadata = {
8+
title: "Blog",
9+
description: "Stay up to date with CodeStorm Hub news, updates, and technical articles from our community.",
10+
openGraph: {
11+
title: "Blog | CodeStorm Hub",
12+
description: "Stay up to date with CodeStorm Hub news, updates, and technical articles from our community.",
13+
},
14+
}
15+
16+
const blogPosts = [
17+
{
18+
title: "Welcome to CodeStorm Hub",
19+
description: "Introducing our new community platform and what we're building together.",
20+
author: "CodeStorm Hub Team",
21+
date: "2024-01-15",
22+
readTime: "3 min read",
23+
category: "Announcement",
24+
slug: "welcome-to-codestorm-hub",
25+
featured: true,
26+
},
27+
{
28+
title: "Building with Next.js 15 and Radix UI",
29+
description: "A deep dive into our tech stack choices and why we chose these technologies.",
30+
author: "Development Team",
31+
date: "2024-01-10",
32+
readTime: "8 min read",
33+
category: "Technical",
34+
slug: "building-with-nextjs-radix",
35+
featured: false,
36+
},
37+
{
38+
title: "Community Guidelines and Best Practices",
39+
description: "How to participate in our community and make meaningful contributions.",
40+
author: "Community Team",
41+
date: "2024-01-05",
42+
readTime: "5 min read",
43+
category: "Community",
44+
slug: "community-guidelines",
45+
featured: false,
46+
},
47+
]
48+
49+
const categories = ["All", "Announcement", "Technical", "Community", "Tutorial", "News"]
50+
51+
export default function BlogPage() {
52+
return (
53+
<div className="py-12">
54+
<Container>
55+
<div className="space-y-12">
56+
{/* Hero */}
57+
<div className="text-center space-y-4">
58+
<h1 className="text-4xl font-bold tracking-tight">Blog & News</h1>
59+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
60+
Stay up to date with the latest news, updates, and insights from the CodeStorm Hub community.
61+
Discover technical articles, project announcements, and community highlights.
62+
</p>
63+
</div>
64+
65+
{/* Categories */}
66+
<div className="flex flex-wrap justify-center gap-2">
67+
{categories.map((category) => (
68+
<Button
69+
key={category}
70+
variant={category === "All" ? "default" : "outline"}
71+
size="sm"
72+
>
73+
{category}
74+
</Button>
75+
))}
76+
</div>
77+
78+
{/* Featured Post */}
79+
{blogPosts
80+
.filter(post => post.featured)
81+
.map((post, index) => (
82+
<Card key={index} className="border-2 border-primary/20 bg-primary/5">
83+
<CardHeader>
84+
<div className="flex items-center justify-between mb-2">
85+
<span className="bg-primary text-primary-foreground text-xs font-medium px-2 py-1 rounded">
86+
Featured
87+
</span>
88+
<span className="bg-secondary text-secondary-foreground text-xs px-2 py-1 rounded">
89+
{post.category}
90+
</span>
91+
</div>
92+
<CardTitle className="text-2xl">{post.title}</CardTitle>
93+
<CardDescription className="text-base">{post.description}</CardDescription>
94+
</CardHeader>
95+
<CardContent className="space-y-4">
96+
<div className="flex items-center gap-6 text-sm text-muted-foreground">
97+
<div className="flex items-center gap-1">
98+
<PersonIcon className="h-4 w-4" />
99+
{post.author}
100+
</div>
101+
<div className="flex items-center gap-1">
102+
<CalendarIcon className="h-4 w-4" />
103+
{new Date(post.date).toLocaleDateString()}
104+
</div>
105+
<span>{post.readTime}</span>
106+
</div>
107+
<Button asChild>
108+
<a href={`/blog/${post.slug}`}>
109+
Read Article
110+
<ArrowRightIcon className="ml-2 h-4 w-4" />
111+
</a>
112+
</Button>
113+
</CardContent>
114+
</Card>
115+
))}
116+
117+
{/* Recent Posts */}
118+
<div>
119+
<h2 className="text-2xl font-bold mb-6">Recent Articles</h2>
120+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
121+
{blogPosts
122+
.filter(post => !post.featured)
123+
.map((post, index) => (
124+
<Card key={index}>
125+
<CardHeader>
126+
<div className="flex items-center justify-between mb-2">
127+
<span className="bg-secondary text-secondary-foreground text-xs px-2 py-1 rounded">
128+
{post.category}
129+
</span>
130+
</div>
131+
<CardTitle className="text-lg">{post.title}</CardTitle>
132+
<CardDescription>{post.description}</CardDescription>
133+
</CardHeader>
134+
<CardContent className="space-y-4">
135+
<div className="flex items-center gap-4 text-sm text-muted-foreground">
136+
<div className="flex items-center gap-1">
137+
<PersonIcon className="h-3 w-3" />
138+
{post.author}
139+
</div>
140+
<div className="flex items-center gap-1">
141+
<CalendarIcon className="h-3 w-3" />
142+
{new Date(post.date).toLocaleDateString()}
143+
</div>
144+
</div>
145+
<div className="text-sm text-muted-foreground">
146+
{post.readTime}
147+
</div>
148+
<Button variant="outline" size="sm" asChild>
149+
<a href={`/blog/${post.slug}`}>
150+
Read More
151+
<ArrowRightIcon className="ml-2 h-3 w-3" />
152+
</a>
153+
</Button>
154+
</CardContent>
155+
</Card>
156+
))}
157+
</div>
158+
</div>
159+
160+
{/* Newsletter Signup */}
161+
<Card className="bg-gradient-to-r from-primary/5 to-blue-500/5 border-primary/20">
162+
<CardHeader className="text-center">
163+
<CardTitle className="text-2xl">Stay Updated</CardTitle>
164+
<CardDescription className="text-base">
165+
Subscribe to our newsletter for the latest updates and articles
166+
</CardDescription>
167+
</CardHeader>
168+
<CardContent className="text-center space-y-4">
169+
<p className="text-muted-foreground max-w-2xl mx-auto">
170+
Get notified when we publish new articles, announce major updates,
171+
or share interesting insights from our community.
172+
</p>
173+
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
174+
<input
175+
type="email"
176+
placeholder="Enter your email"
177+
className="flex-1 px-3 py-2 rounded-md border border-input bg-background text-sm"
178+
/>
179+
<Button>
180+
Subscribe
181+
</Button>
182+
</div>
183+
<p className="text-xs text-muted-foreground">
184+
No spam, unsubscribe at any time.
185+
</p>
186+
</CardContent>
187+
</Card>
188+
189+
{/* Archive & RSS */}
190+
<div className="text-center space-y-4">
191+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
192+
<Button variant="outline" asChild>
193+
<a href="/blog/archive">
194+
View Archive
195+
</a>
196+
</Button>
197+
<Button variant="outline" asChild>
198+
<a href="/rss.xml">
199+
RSS Feed
200+
</a>
201+
</Button>
202+
</div>
203+
<p className="text-sm text-muted-foreground">
204+
Looking for older posts? Check out our archive or subscribe to our RSS feed.
205+
</p>
206+
</div>
207+
</div>
208+
</Container>
209+
</div>
210+
)
211+
}

0 commit comments

Comments
 (0)