Skip to content

Commit d21f383

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
Add Projects and Teams sections to Home page
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent 43f9d8b commit d21f383

3 files changed

Lines changed: 485 additions & 69 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 79 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,80 +4,90 @@ import { Typography } from "@/components/ui/typography"
44
import { Grid } from "@/components/ui/grid"
55
import { Stack } from "@/components/ui/stack"
66
import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
7+
import ProjectsSection from "@/components/home/projects-section"
8+
import TeamsSection from "@/components/home/teams-section"
79

810
export default function Home() {
911
return (
10-
<div className="bg-gradient-to-br from-background to-muted">
11-
{/* Hero Section */}
12-
<Container className="py-16 sm:py-24">
13-
<Stack align="center" gap={8} className="text-center">
14-
{/* Logo/Brand */}
15-
<Stack gap={4} align="center">
16-
<Typography variant="h1">
17-
<span className="text-foreground">Code</span>
18-
<span className="text-primary">Storm</span>
19-
<span className="text-foreground"> Hub</span>
20-
</Typography>
21-
<Typography variant="lead" className="max-w-3xl">
22-
A vibrant community of open source enthusiasts, researchers, and creators.
23-
We collaborate on powerful open-source solutions.
24-
</Typography>
25-
</Stack>
12+
<>
13+
<div className="bg-gradient-to-br from-background to-muted">
14+
{/* Hero Section */}
15+
<Container className="py-16 sm:py-24">
16+
<Stack align="center" gap={8} className="text-center">
17+
{/* Logo/Brand */}
18+
<Stack gap={4} align="center">
19+
<Typography variant="h1">
20+
<span className="text-foreground">Code</span>
21+
<span className="text-primary">Storm</span>
22+
<span className="text-foreground"> Hub</span>
23+
</Typography>
24+
<Typography variant="lead" className="max-w-3xl">
25+
A vibrant community of open source enthusiasts, researchers, and creators.
26+
We collaborate on powerful open-source solutions.
27+
</Typography>
28+
</Stack>
29+
30+
{/* CTA Buttons */}
31+
<Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
32+
<Button size="lg" className="w-full sm:w-auto" asChild>
33+
<a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
34+
<GitHubLogoIcon className="mr-2 h-4 w-4" />
35+
View Projects
36+
<ArrowRightIcon className="ml-2 h-4 w-4" />
37+
</a>
38+
</Button>
39+
<Button variant="outline" size="lg" className="w-full sm:w-auto">
40+
Join Community
41+
</Button>
42+
</Stack>
2643

27-
{/* CTA Buttons */}
28-
<Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
29-
<Button size="lg" className="w-full sm:w-auto" asChild>
30-
<a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
31-
<GitHubLogoIcon className="mr-2 h-4 w-4" />
32-
View Projects
33-
<ArrowRightIcon className="ml-2 h-4 w-4" />
34-
</a>
35-
</Button>
36-
<Button variant="outline" size="lg" className="w-full sm:w-auto">
37-
Join Community
38-
</Button>
44+
{/* Features Grid */}
45+
<div className="mt-16 w-full max-w-5xl">
46+
<Grid cols={3} gap={8}>
47+
<Stack align="center" gap={3} className="text-center">
48+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
49+
<GitHubLogoIcon className="h-6 w-6 text-primary" />
50+
</div>
51+
<Typography variant="h5">Open Source</Typography>
52+
<Typography variant="muted">
53+
Building transparent, accessible solutions for the community
54+
</Typography>
55+
</Stack>
56+
57+
<Stack align="center" gap={3} className="text-center">
58+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
59+
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
60+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
61+
</svg>
62+
</div>
63+
<Typography variant="h5">Community</Typography>
64+
<Typography variant="muted">
65+
Connecting passionate developers and researchers worldwide
66+
</Typography>
67+
</Stack>
68+
69+
<Stack align="center" gap={3} className="text-center">
70+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
71+
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
72+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
73+
</svg>
74+
</div>
75+
<Typography variant="h5">Innovation</Typography>
76+
<Typography variant="muted">
77+
Pushing boundaries with cutting-edge research and development
78+
</Typography>
79+
</Stack>
80+
</Grid>
81+
</div>
3982
</Stack>
83+
</Container>
84+
</div>
85+
86+
{/* Projects Section */}
87+
<ProjectsSection className="bg-background" />
4088

41-
{/* Features Grid */}
42-
<div className="mt-16 w-full max-w-5xl">
43-
<Grid cols={3} gap={8}>
44-
<Stack align="center" gap={3} className="text-center">
45-
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
46-
<GitHubLogoIcon className="h-6 w-6 text-primary" />
47-
</div>
48-
<Typography variant="h5">Open Source</Typography>
49-
<Typography variant="muted">
50-
Building transparent, accessible solutions for the community
51-
</Typography>
52-
</Stack>
53-
54-
<Stack align="center" gap={3} className="text-center">
55-
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
56-
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
57-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
58-
</svg>
59-
</div>
60-
<Typography variant="h5">Community</Typography>
61-
<Typography variant="muted">
62-
Connecting passionate developers and researchers worldwide
63-
</Typography>
64-
</Stack>
65-
66-
<Stack align="center" gap={3} className="text-center">
67-
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
68-
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
69-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
70-
</svg>
71-
</div>
72-
<Typography variant="h5">Innovation</Typography>
73-
<Typography variant="muted">
74-
Pushing boundaries with cutting-edge research and development
75-
</Typography>
76-
</Stack>
77-
</Grid>
78-
</div>
79-
</Stack>
80-
</Container>
81-
</div>
89+
{/* Teams Section */}
90+
<TeamsSection className="bg-muted/30" />
91+
</>
8292
)
8393
}

‎src/components/home/projects-section.tsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
2+
import { Container } from "@/components/ui/container"
3+
import { Typography } from "@/components/ui/typography"
4+
import { Grid } from "@/components/ui/grid"
5+
import { Stack } from "@/components/ui/stack"
6+
import { Button } from "@/components/ui/button"
7+
import { GitHubLogoIcon, StarIcon, PersonIcon } from "@radix-ui/react-icons"
8+
9+
interface Project {
10+
id: string
11+
name: string
12+
description: string
13+
stars: number
14+
contributors: number
15+
primaryTech: string
16+
category: string
17+
repoUrl: string
18+
projectUrl?: string
19+
}
20+
21+
// Mock data for projects
22+
const projects: Project[] = [
23+
{
24+
id: "1",
25+
name: "DataStorm Analytics",
26+
description: "Real-time data processing and visualization platform built for scalability",
27+
stars: 2847,
28+
contributors: 18,
29+
primaryTech: "Python",
30+
category: "Data Science",
31+
repoUrl: "https://github.com/CodeStorm-Hub/datastorm-analytics",
32+
projectUrl: "/projects/datastorm-analytics"
33+
},
34+
{
35+
id: "2",
36+
name: "CloudNative Toolkit",
37+
description: "Container orchestration and microservices deployment automation tools",
38+
stars: 1523,
39+
contributors: 12,
40+
primaryTech: "Go",
41+
category: "Infrastructure",
42+
repoUrl: "https://github.com/CodeStorm-Hub/cloudnative-toolkit",
43+
projectUrl: "/projects/cloudnative-toolkit"
44+
},
45+
{
46+
id: "3",
47+
name: "ML Research Hub",
48+
description: "Open source machine learning algorithms and research implementations",
49+
stars: 3241,
50+
contributors: 25,
51+
primaryTech: "Python",
52+
category: "Research",
53+
repoUrl: "https://github.com/CodeStorm-Hub/ml-research-hub",
54+
projectUrl: "/projects/ml-research-hub"
55+
},
56+
{
57+
id: "4",
58+
name: "DevTools Suite",
59+
description: "Developer productivity tools and utilities for modern web development",
60+
stars: 892,
61+
contributors: 8,
62+
primaryTech: "TypeScript",
63+
category: "Dev Tools",
64+
repoUrl: "https://github.com/CodeStorm-Hub/devtools-suite",
65+
projectUrl: "/projects/devtools-suite"
66+
},
67+
{
68+
id: "5",
69+
name: "Security Scanner",
70+
description: "Automated security vulnerability scanner for open source dependencies",
71+
stars: 1687,
72+
contributors: 14,
73+
primaryTech: "Rust",
74+
category: "Security",
75+
repoUrl: "https://github.com/CodeStorm-Hub/security-scanner",
76+
projectUrl: "/projects/security-scanner"
77+
},
78+
{
79+
id: "6",
80+
name: "API Gateway",
81+
description: "High-performance API gateway with rate limiting and authentication",
82+
stars: 2156,
83+
contributors: 16,
84+
primaryTech: "Node.js",
85+
category: "Infrastructure",
86+
repoUrl: "https://github.com/CodeStorm-Hub/api-gateway",
87+
projectUrl: "/projects/api-gateway"
88+
}
89+
]
90+
91+
interface ProjectsSectionProps {
92+
className?: string
93+
}
94+
95+
export default function ProjectsSection({ className }: ProjectsSectionProps) {
96+
return (
97+
<section className={className} aria-labelledby="projects-heading">
98+
<Container className="py-16 sm:py-24">
99+
<Stack gap={8}>
100+
{/* Section Header */}
101+
<Stack gap={4} align="center" className="text-center">
102+
<Typography variant="h2" id="projects-heading">
103+
Featured Projects
104+
</Typography>
105+
<Typography variant="lead" className="max-w-2xl">
106+
Explore our open source initiatives that are making a real impact in the developer community
107+
</Typography>
108+
</Stack>
109+
110+
{/* Projects Grid */}
111+
<Grid cols={3} gap={6} className="w-full">
112+
{projects.map((project) => (
113+
<Card key={project.id} className="h-full hover:shadow-lg transition-shadow duration-200">
114+
<CardHeader>
115+
<Stack gap={2}>
116+
<div className="flex items-center justify-between">
117+
<CardTitle className="text-lg">{project.name}</CardTitle>
118+
<span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
119+
{project.primaryTech}
120+
</span>
121+
</div>
122+
<span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground w-fit">
123+
{project.category}
124+
</span>
125+
</Stack>
126+
</CardHeader>
127+
<CardContent>
128+
<Stack gap={4}>
129+
<CardDescription className="line-clamp-2">
130+
{project.description}
131+
</CardDescription>
132+
133+
{/* Project Stats */}
134+
<div className="flex items-center gap-4 text-sm text-muted-foreground">
135+
<div className="flex items-center gap-1">
136+
<StarIcon className="h-4 w-4" aria-hidden="true" />
137+
<span aria-label={`${project.stars} stars`}>
138+
{project.stars.toLocaleString()}
139+
</span>
140+
</div>
141+
<div className="flex items-center gap-1">
142+
<PersonIcon className="h-4 w-4" aria-hidden="true" />
143+
<span aria-label={`${project.contributors} contributors`}>
144+
{project.contributors}
145+
</span>
146+
</div>
147+
</div>
148+
149+
{/* Action Buttons */}
150+
<div className="flex gap-2 pt-2">
151+
{project.projectUrl ? (
152+
<Button variant="outline" size="sm" className="flex-1" asChild>
153+
<a href={project.projectUrl}>
154+
View Project
155+
</a>
156+
</Button>
157+
) : null}
158+
<Button variant="outline" size="sm" className="flex-1" asChild>
159+
<a
160+
href={project.repoUrl}
161+
target="_blank"
162+
rel="noopener noreferrer"
163+
aria-label={`View ${project.name} on GitHub`}
164+
>
165+
<GitHubLogoIcon className="mr-2 h-4 w-4" aria-hidden="true" />
166+
GitHub
167+
</a>
168+
</Button>
169+
</div>
170+
</Stack>
171+
</CardContent>
172+
</Card>
173+
))}
174+
</Grid>
175+
176+
{/* View All Projects CTA */}
177+
<div className="flex justify-center">
178+
<Button size="lg" asChild>
179+
<a href="/projects">
180+
View All Projects
181+
<svg
182+
className="ml-2 h-4 w-4"
183+
fill="none"
184+
viewBox="0 0 24 24"
185+
stroke="currentColor"
186+
aria-hidden="true"
187+
>
188+
<path
189+
strokeLinecap="round"
190+
strokeLinejoin="round"
191+
strokeWidth={2}
192+
d="M9 5l7 7-7 7"
193+
/>
194+
</svg>
195+
</a>
196+
</Button>
197+
</div>
198+
</Stack>
199+
</Container>
200+
</section>
201+
)
202+
}
203+
204+
export type { ProjectsSectionProps }

0 commit comments

Comments
 (0)