Skip to content

Commit 1e7114b

Browse files
rezwana-karimrezwana-karim
authored
Add Projects, Team Members, and Teams sections to Home page with comprehensive UI/UX improvements (#14)
2 parents 8ff30cc + aa4156a commit 1e7114b

6 files changed

Lines changed: 923 additions & 85 deletions

File tree

‎package-lock.json‎

Lines changed: 0 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/page.tsx‎

Lines changed: 83 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,80 +4,94 @@ 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 TeamMembersSection from "@/components/home/team-members-section"
9+
import TeamsSection from "@/components/home/teams-section"
710

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

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>
45+
{/* Features Grid */}
46+
<div className="mt-16 w-full max-w-5xl">
47+
<Grid cols={3} gap={8}>
48+
<Stack align="center" gap={3} className="text-center">
49+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
50+
<GitHubLogoIcon className="h-6 w-6 text-primary" />
51+
</div>
52+
<Typography variant="h5">Open Source</Typography>
53+
<Typography variant="muted">
54+
Building transparent, accessible solutions for the community
55+
</Typography>
56+
</Stack>
57+
58+
<Stack align="center" gap={3} className="text-center">
59+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
60+
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
61+
<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" />
62+
</svg>
63+
</div>
64+
<Typography variant="h5">Community</Typography>
65+
<Typography variant="muted">
66+
Connecting passionate developers and researchers worldwide
67+
</Typography>
68+
</Stack>
69+
70+
<Stack align="center" gap={3} className="text-center">
71+
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
72+
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
73+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
74+
</svg>
75+
</div>
76+
<Typography variant="h5">Innovation</Typography>
77+
<Typography variant="muted">
78+
Pushing boundaries with cutting-edge research and development
79+
</Typography>
80+
</Stack>
81+
</Grid>
82+
</div>
3983
</Stack>
84+
</Container>
85+
</div>
86+
87+
{/* Projects Section */}
88+
<ProjectsSection className="bg-background" />
89+
90+
{/* Team Members Section */}
91+
<TeamMembersSection className="bg-muted/20" />
4092

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>
93+
{/* Teams Section */}
94+
<TeamsSection className="bg-background" />
95+
</>
8296
)
8397
}

‎src/app/team/page.tsx‎

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,62 @@ export const metadata: Metadata = {
1515
}
1616

1717
const teamMembers = [
18+
{
19+
name: "Alex Chen",
20+
role: "Lead Engineer & Founder",
21+
bio: "Passionate about building scalable systems and fostering open source communities. Leading the technical direction of CodeStorm Hub with expertise in full-stack development and cloud architecture.",
22+
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
23+
github: "https://github.com/alexchen-dev",
24+
linkedin: "https://linkedin.com/in/alexchen-dev",
25+
},
26+
{
27+
name: "Dr. Priya Patel",
28+
role: "Research Lead",
29+
bio: "PhD in Computer Science with expertise in machine learning algorithms. Driving research initiatives and ML infrastructure development across multiple open source projects.",
30+
avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face",
31+
github: "https://github.com/priyapatel-research",
32+
linkedin: "https://linkedin.com/in/priya-patel-ai",
33+
},
34+
{
35+
name: "Sarah Kim",
36+
role: "DevOps Engineer",
37+
bio: "Expert in cloud infrastructure and CI/CD pipelines. Ensuring reliable deployments and scalable architecture for all CodeStorm Hub projects with focus on automation.",
38+
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
39+
github: "https://github.com/sarahkim-dev",
40+
linkedin: "https://linkedin.com/in/sarah-kim-devops",
41+
},
42+
{
43+
name: "Marcus Johnson",
44+
role: "Security Engineer",
45+
bio: "Cybersecurity specialist focused on secure coding practices and vulnerability assessment. Protecting our community and codebases with comprehensive security audits.",
46+
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
47+
github: "https://github.com/marcusj-security",
48+
linkedin: "https://linkedin.com/in/marcus-johnson-security",
49+
},
50+
{
51+
name: "Taylor Morgan",
52+
role: "UX Designer",
53+
bio: "User experience designer with a passion for accessible and inclusive design. Creating intuitive interfaces that serve our diverse community with focus on usability research.",
54+
avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=150&h=150&fit=crop&crop=face",
55+
github: "https://github.com/taylormorgan-design",
56+
linkedin: "https://linkedin.com/in/taylor-morgan-ux",
57+
},
58+
{
59+
name: "James Liu",
60+
role: "Frontend Developer",
61+
bio: "Frontend specialist with expertise in modern React patterns and web performance optimization. Building fast, accessible user interfaces for open source projects.",
62+
avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face",
63+
github: "https://github.com/jamesliu-frontend",
64+
linkedin: "https://linkedin.com/in/james-liu-frontend",
65+
},
1866
{
1967
name: "Community Contributors",
2068
role: "Open Source Enthusiasts",
21-
bio: "Our team is made up of passionate contributors from around the world who believe in the power of open source collaboration.",
69+
bio: "Our extended team includes passionate contributors from around the world who believe in the power of open source collaboration and continuously contribute to our projects.",
2270
avatar: "https://github.com/CodeStorm-Hub.png",
2371
github: "https://github.com/CodeStorm-Hub",
2472
linkedin: null,
2573
},
26-
// Add more team members as they join
2774
]
2875

2976
export default function TeamPage() {
@@ -43,22 +90,23 @@ export default function TeamPage() {
4390
{/* Team Members */}
4491
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
4592
{teamMembers.map((member, index) => (
46-
<Card key={index} className="text-center">
93+
<Card key={index} className="text-center h-full">
4794
<CardHeader className="pb-4">
48-
<div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted">
95+
<div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted border-2 border-primary/20">
4996
<Image
5097
src={member.avatar}
5198
alt={`${member.name} avatar`}
5299
width={96}
53100
height={96}
54101
className="w-full h-full object-cover"
102+
unoptimized={true}
55103
/>
56104
</div>
57105
<CardTitle className="text-lg">{member.name}</CardTitle>
58-
<CardDescription>{member.role}</CardDescription>
106+
<CardDescription className="font-medium text-primary">{member.role}</CardDescription>
59107
</CardHeader>
60108
<CardContent className="space-y-4">
61-
<p className="text-sm text-muted-foreground">{member.bio}</p>
109+
<p className="text-sm text-muted-foreground leading-relaxed">{member.bio}</p>
62110
<div className="flex justify-center gap-2">
63111
{member.github && (
64112
<Button variant="outline" size="sm" asChild>

0 commit comments

Comments
 (0)