diff --git a/package-lock.json b/package-lock.json
index 52599a3..562f3c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2047,7 +2047,6 @@
       "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2058,7 +2057,6 @@
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -2109,7 +2107,6 @@
       "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.44.1",
         "@typescript-eslint/types": "8.44.1",
@@ -2627,7 +2624,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3517,7 +3513,6 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3692,7 +3687,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5822,7 +5816,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5832,7 +5825,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6605,7 +6597,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6755,7 +6746,6 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 51bdb06..d92fdca 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,80 +4,94 @@ import { Typography } from "@/components/ui/typography"
 import { Grid } from "@/components/ui/grid"
 import { Stack } from "@/components/ui/stack"
 import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
+import ProjectsSection from "@/components/home/projects-section"
+import TeamMembersSection from "@/components/home/team-members-section"
+import TeamsSection from "@/components/home/teams-section"
 
 export default function Home() {
   return (
-    <div className="bg-gradient-to-br from-background to-muted">
-      {/* Hero Section */}
-      <Container className="py-16 sm:py-24">
-        <Stack align="center" gap={8} className="text-center">
-          {/* Logo/Brand */}
-          <Stack gap={4} align="center">
-            <Typography variant="h1">
-              <span className="text-foreground">Code</span>
-              <span className="text-primary">Storm</span>
-              <span className="text-foreground"> Hub</span>
-            </Typography>
-            <Typography variant="lead" className="max-w-3xl">
-              A vibrant community of open source enthusiasts, researchers, and creators. 
-              We collaborate on powerful open-source solutions.
-            </Typography>
-          </Stack>
+    <>
+      <div className="bg-gradient-to-br from-background to-muted">
+        {/* Hero Section */}
+        <Container className="py-16 sm:py-24">
+          <Stack align="center" gap={8} className="text-center">
+            {/* Logo/Brand */}
+            <Stack gap={4} align="center">
+              <Typography variant="h1">
+                <span className="text-foreground">Code</span>
+                <span className="text-primary">Storm</span>
+                <span className="text-foreground"> Hub</span>
+              </Typography>
+              <Typography variant="lead" className="max-w-3xl">
+                A vibrant community of open source enthusiasts, researchers, and creators. 
+                We collaborate on powerful open-source solutions.
+              </Typography>
+            </Stack>
+
+            {/* CTA Buttons */}
+            <Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
+              <Button size="lg" className="w-full sm:w-auto" asChild>
+                <a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
+                  <GitHubLogoIcon className="mr-2 h-4 w-4" />
+                  View Projects
+                  <ArrowRightIcon className="ml-2 h-4 w-4" />
+                </a>
+              </Button>
+              <Button variant="outline" size="lg" className="w-full sm:w-auto">
+                Join Community
+              </Button>
+            </Stack>
 
-          {/* CTA Buttons */}
-          <Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
-            <Button size="lg" className="w-full sm:w-auto" asChild>
-              <a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
-                <GitHubLogoIcon className="mr-2 h-4 w-4" />
-                View Projects
-                <ArrowRightIcon className="ml-2 h-4 w-4" />
-              </a>
-            </Button>
-            <Button variant="outline" size="lg" className="w-full sm:w-auto">
-              Join Community
-            </Button>
+            {/* Features Grid */}
+            <div className="mt-16 w-full max-w-5xl">
+              <Grid cols={3} gap={8}>
+                <Stack align="center" gap={3} className="text-center">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <GitHubLogoIcon className="h-6 w-6 text-primary" />
+                  </div>
+                  <Typography variant="h5">Open Source</Typography>
+                  <Typography variant="muted">
+                    Building transparent, accessible solutions for the community
+                  </Typography>
+                </Stack>
+                
+                <Stack align="center" gap={3} className="text-center">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <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" />
+                    </svg>
+                  </div>
+                  <Typography variant="h5">Community</Typography>
+                  <Typography variant="muted">
+                    Connecting passionate developers and researchers worldwide
+                  </Typography>
+                </Stack>
+                
+                <Stack align="center" gap={3} className="text-center">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <Typography variant="h5">Innovation</Typography>
+                  <Typography variant="muted">
+                    Pushing boundaries with cutting-edge research and development
+                  </Typography>
+                </Stack>
+              </Grid>
+            </div>
           </Stack>
+        </Container>
+      </div>
+
+      {/* Projects Section */}
+      <ProjectsSection className="bg-background" />
+
+      {/* Team Members Section */}
+      <TeamMembersSection className="bg-muted/20" />
 
-          {/* Features Grid */}
-          <div className="mt-16 w-full max-w-5xl">
-            <Grid cols={3} gap={8}>
-              <Stack align="center" gap={3} className="text-center">
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                  <GitHubLogoIcon className="h-6 w-6 text-primary" />
-                </div>
-                <Typography variant="h5">Open Source</Typography>
-                <Typography variant="muted">
-                  Building transparent, accessible solutions for the community
-                </Typography>
-              </Stack>
-              
-              <Stack align="center" gap={3} className="text-center">
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                  <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <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" />
-                  </svg>
-                </div>
-                <Typography variant="h5">Community</Typography>
-                <Typography variant="muted">
-                  Connecting passionate developers and researchers worldwide
-                </Typography>
-              </Stack>
-              
-              <Stack align="center" gap={3} className="text-center">
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                  <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                  </svg>
-                </div>
-                <Typography variant="h5">Innovation</Typography>
-                <Typography variant="muted">
-                  Pushing boundaries with cutting-edge research and development
-                </Typography>
-              </Stack>
-            </Grid>
-          </div>
-        </Stack>
-      </Container>
-    </div>
+      {/* Teams Section */}
+      <TeamsSection className="bg-background" />
+    </>
   )
 }
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 6c22707..3ae70a0 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -15,15 +15,62 @@ export const metadata: Metadata = {
 }
 
 const teamMembers = [
+  {
+    name: "Alex Chen",
+    role: "Lead Engineer & Founder",
+    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.",
+    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/alexchen-dev",
+    linkedin: "https://linkedin.com/in/alexchen-dev",
+  },
+  {
+    name: "Dr. Priya Patel",
+    role: "Research Lead",
+    bio: "PhD in Computer Science with expertise in machine learning algorithms. Driving research initiatives and ML infrastructure development across multiple open source projects.",
+    avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/priyapatel-research",
+    linkedin: "https://linkedin.com/in/priya-patel-ai",
+  },
+  {
+    name: "Sarah Kim",
+    role: "DevOps Engineer", 
+    bio: "Expert in cloud infrastructure and CI/CD pipelines. Ensuring reliable deployments and scalable architecture for all CodeStorm Hub projects with focus on automation.",
+    avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/sarahkim-dev",
+    linkedin: "https://linkedin.com/in/sarah-kim-devops",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Security Engineer",
+    bio: "Cybersecurity specialist focused on secure coding practices and vulnerability assessment. Protecting our community and codebases with comprehensive security audits.",
+    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/marcusj-security",
+    linkedin: "https://linkedin.com/in/marcus-johnson-security",
+  },
+  {
+    name: "Taylor Morgan",
+    role: "UX Designer",
+    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.",
+    avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/taylormorgan-design",
+    linkedin: "https://linkedin.com/in/taylor-morgan-ux",
+  },
+  {
+    name: "James Liu",
+    role: "Frontend Developer",
+    bio: "Frontend specialist with expertise in modern React patterns and web performance optimization. Building fast, accessible user interfaces for open source projects.",
+    avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face",
+    github: "https://github.com/jamesliu-frontend",
+    linkedin: "https://linkedin.com/in/james-liu-frontend",
+  },
   {
     name: "Community Contributors",
     role: "Open Source Enthusiasts",
-    bio: "Our team is made up of passionate contributors from around the world who believe in the power of open source collaboration.",
+    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.",
     avatar: "https://github.com/CodeStorm-Hub.png",
     github: "https://github.com/CodeStorm-Hub",
     linkedin: null,
   },
-  // Add more team members as they join
 ]
 
 export default function TeamPage() {
@@ -43,22 +90,23 @@ export default function TeamPage() {
           {/* Team Members */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {teamMembers.map((member, index) => (
-              <Card key={index} className="text-center">
+              <Card key={index} className="text-center h-full">
                 <CardHeader className="pb-4">
-                  <div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted">
+                  <div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted border-2 border-primary/20">
                     <Image
                       src={member.avatar}
                       alt={`${member.name} avatar`}
                       width={96}
                       height={96}
                       className="w-full h-full object-cover"
+                      unoptimized={true}
                     />
                   </div>
                   <CardTitle className="text-lg">{member.name}</CardTitle>
-                  <CardDescription>{member.role}</CardDescription>
+                  <CardDescription className="font-medium text-primary">{member.role}</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                  <p className="text-sm text-muted-foreground">{member.bio}</p>
+                  <p className="text-sm text-muted-foreground leading-relaxed">{member.bio}</p>
                   <div className="flex justify-center gap-2">
                     {member.github && (
                       <Button variant="outline" size="sm" asChild>
diff --git a/src/components/home/projects-section.tsx b/src/components/home/projects-section.tsx
new file mode 100644
index 0000000..9371e0b
--- /dev/null
+++ b/src/components/home/projects-section.tsx
@@ -0,0 +1,204 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Container } from "@/components/ui/container"
+import { Typography } from "@/components/ui/typography"
+import { Grid } from "@/components/ui/grid"
+import { Stack } from "@/components/ui/stack"
+import { Button } from "@/components/ui/button"
+import { GitHubLogoIcon, StarIcon, PersonIcon } from "@radix-ui/react-icons"
+
+interface Project {
+  id: string
+  name: string
+  description: string
+  stars: number
+  contributors: number
+  primaryTech: string
+  category: string
+  repoUrl: string
+  projectUrl?: string
+}
+
+// Mock data for projects
+const projects: Project[] = [
+  {
+    id: "1",
+    name: "DataStorm Analytics",
+    description: "Real-time data processing and visualization platform built for scalability",
+    stars: 2847,
+    contributors: 18,
+    primaryTech: "Python",
+    category: "Data Science",
+    repoUrl: "https://github.com/CodeStorm-Hub/datastorm-analytics",
+    projectUrl: "/projects/datastorm-analytics"
+  },
+  {
+    id: "2", 
+    name: "CloudNative Toolkit",
+    description: "Container orchestration and microservices deployment automation tools",
+    stars: 1523,
+    contributors: 12,
+    primaryTech: "Go",
+    category: "Infrastructure",
+    repoUrl: "https://github.com/CodeStorm-Hub/cloudnative-toolkit",
+    projectUrl: "/projects/cloudnative-toolkit"
+  },
+  {
+    id: "3",
+    name: "ML Research Hub",
+    description: "Open source machine learning algorithms and research implementations", 
+    stars: 3241,
+    contributors: 25,
+    primaryTech: "Python",
+    category: "Research",
+    repoUrl: "https://github.com/CodeStorm-Hub/ml-research-hub",
+    projectUrl: "/projects/ml-research-hub"
+  },
+  {
+    id: "4",
+    name: "DevTools Suite",
+    description: "Developer productivity tools and utilities for modern web development",
+    stars: 892,
+    contributors: 8,
+    primaryTech: "TypeScript",
+    category: "Dev Tools", 
+    repoUrl: "https://github.com/CodeStorm-Hub/devtools-suite",
+    projectUrl: "/projects/devtools-suite"
+  },
+  {
+    id: "5",
+    name: "Security Scanner",
+    description: "Automated security vulnerability scanner for open source dependencies",
+    stars: 1687,
+    contributors: 14,
+    primaryTech: "Rust",
+    category: "Security",
+    repoUrl: "https://github.com/CodeStorm-Hub/security-scanner", 
+    projectUrl: "/projects/security-scanner"
+  },
+  {
+    id: "6",
+    name: "API Gateway",
+    description: "High-performance API gateway with rate limiting and authentication",
+    stars: 2156,
+    contributors: 16,
+    primaryTech: "Node.js",
+    category: "Infrastructure",
+    repoUrl: "https://github.com/CodeStorm-Hub/api-gateway",
+    projectUrl: "/projects/api-gateway"
+  }
+]
+
+interface ProjectsSectionProps {
+  className?: string
+}
+
+export default function ProjectsSection({ className }: ProjectsSectionProps) {
+  return (
+    <section className={className} aria-labelledby="projects-heading">
+      <Container className="py-16 sm:py-24">
+        <Stack gap={8}>
+          {/* Section Header */}
+          <Stack gap={4} align="center" className="text-center">
+            <Typography variant="h2" id="projects-heading">
+              Featured Projects
+            </Typography>
+            <Typography variant="lead" className="max-w-2xl">
+              Explore our open source initiatives that are making a real impact in the developer community
+            </Typography>
+          </Stack>
+
+          {/* Projects Grid */}
+          <Grid cols={3} gap={6} className="w-full">
+            {projects.map((project) => (
+              <Card key={project.id} className="h-full hover:shadow-lg transition-shadow duration-200">
+                <CardHeader>
+                  <Stack gap={2}>
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-lg">{project.name}</CardTitle>
+                      <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+                        {project.primaryTech}
+                      </span>
+                    </div>
+                    <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground w-fit">
+                      {project.category}
+                    </span>
+                  </Stack>
+                </CardHeader>
+                <CardContent>
+                  <Stack gap={4}>
+                    <CardDescription className="line-clamp-2">
+                      {project.description}
+                    </CardDescription>
+                    
+                    {/* Project Stats */}
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                      <div className="flex items-center gap-1">
+                        <StarIcon className="h-4 w-4" aria-hidden="true" />
+                        <span aria-label={`${project.stars} stars`}>
+                          {project.stars.toLocaleString()}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <PersonIcon className="h-4 w-4" aria-hidden="true" />
+                        <span aria-label={`${project.contributors} contributors`}>
+                          {project.contributors}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action Buttons */}
+                    <div className="flex gap-2 pt-2">
+                      {project.projectUrl ? (
+                        <Button variant="outline" size="sm" className="flex-1" asChild>
+                          <a href={project.projectUrl}>
+                            View Project
+                          </a>
+                        </Button>
+                      ) : null}
+                      <Button variant="outline" size="sm" className="flex-1" asChild>
+                        <a 
+                          href={project.repoUrl} 
+                          target="_blank" 
+                          rel="noopener noreferrer"
+                          aria-label={`View ${project.name} on GitHub`}
+                        >
+                          <GitHubLogoIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+                          GitHub
+                        </a>
+                      </Button>
+                    </div>
+                  </Stack>
+                </CardContent>
+              </Card>
+            ))}
+          </Grid>
+
+          {/* View All Projects CTA */}
+          <div className="flex justify-center">
+            <Button size="lg" asChild>
+              <a href="/projects">
+                View All Projects
+                <svg
+                  className="ml-2 h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+            </Button>
+          </div>
+        </Stack>
+      </Container>
+    </section>
+  )
+}
+
+export type { ProjectsSectionProps }
\ No newline at end of file
diff --git a/src/components/home/team-members-section.tsx b/src/components/home/team-members-section.tsx
new file mode 100644
index 0000000..b6f7a89
--- /dev/null
+++ b/src/components/home/team-members-section.tsx
@@ -0,0 +1,287 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Container } from "@/components/ui/container"
+import { Typography } from "@/components/ui/typography"
+import { Grid } from "@/components/ui/grid"
+import { Stack } from "@/components/ui/stack"
+import { Button } from "@/components/ui/button"
+import { GitHubLogoIcon, LinkedInLogoIcon } from "@radix-ui/react-icons"
+import Image from "next/image"
+
+interface TeamMember {
+  id: string
+  name: string
+  role: string
+  specialization: string
+  avatar: string
+  bio: string
+  github?: string
+  linkedin?: string
+  skills: string[]
+  contributions: {
+    commits: number
+    prs: number
+    reviews: number
+  }
+}
+
+// Core team members and contributors
+const teamMembers: TeamMember[] = [
+  {
+    id: "1",
+    name: "Alex Chen",
+    role: "Lead Engineer & Founder",
+    specialization: "Full-Stack Development",
+    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+    bio: "Passionate about building scalable systems and fostering open source communities. Leading the technical direction of CodeStorm Hub.",
+    github: "https://github.com/alexchen-dev",
+    linkedin: "https://linkedin.com/in/alexchen-dev",
+    skills: ["TypeScript", "React", "Node.js", "Docker", "AWS"],
+    contributions: {
+      commits: 1247,
+      prs: 89,
+      reviews: 156
+    }
+  },
+  {
+    id: "2",
+    name: "Dr. Priya Patel",
+    role: "Research Lead",
+    specialization: "Machine Learning & AI",
+    avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face",
+    bio: "PhD in Computer Science with expertise in machine learning algorithms. Driving research initiatives and ML infrastructure development.",
+    github: "https://github.com/priyapatel-research",
+    linkedin: "https://linkedin.com/in/priya-patel-ai",
+    skills: ["Python", "TensorFlow", "PyTorch", "MLOps", "Research"],
+    contributions: {
+      commits: 892,
+      prs: 67,
+      reviews: 134
+    }
+  },
+  {
+    id: "3",
+    name: "Sarah Kim",
+    role: "DevOps Engineer",
+    specialization: "Infrastructure & Automation",
+    avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
+    bio: "Expert in cloud infrastructure and CI/CD pipelines. Ensuring reliable deployments and scalable architecture for all projects.",
+    github: "https://github.com/sarahkim-dev",
+    linkedin: "https://linkedin.com/in/sarah-kim-devops",
+    skills: ["Kubernetes", "Terraform", "GitHub Actions", "AWS", "Monitoring"],
+    contributions: {
+      commits: 743,
+      prs: 52,
+      reviews: 98
+    }
+  },
+  {
+    id: "4",
+    name: "Marcus Johnson",
+    role: "Security Engineer",
+    specialization: "Application Security",
+    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+    bio: "Cybersecurity specialist focused on secure coding practices and vulnerability assessment. Protecting our community and codebases.",
+    github: "https://github.com/marcusj-security",
+    linkedin: "https://linkedin.com/in/marcus-johnson-security",
+    skills: ["Security Auditing", "Penetration Testing", "Rust", "Go", "OWASP"],
+    contributions: {
+      commits: 456,
+      prs: 34,
+      reviews: 87
+    }
+  },
+  {
+    id: "5",
+    name: "Taylor Morgan",
+    role: "UX Designer",
+    specialization: "Product Design & Research",
+    avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=150&h=150&fit=crop&crop=face",
+    bio: "User experience designer with a passion for accessible and inclusive design. Creating intuitive interfaces that serve our diverse community.",
+    github: "https://github.com/taylormorgan-design",
+    linkedin: "https://linkedin.com/in/taylor-morgan-ux",
+    skills: ["Figma", "User Research", "Accessibility", "Prototyping", "Design Systems"],
+    contributions: {
+      commits: 234,
+      prs: 28,
+      reviews: 45
+    }
+  },
+  {
+    id: "6",
+    name: "James Liu",
+    role: "Frontend Developer",
+    specialization: "React & Performance",
+    avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face",
+    bio: "Frontend specialist with expertise in modern React patterns and web performance optimization. Building fast, accessible user interfaces.",
+    github: "https://github.com/jamesliu-frontend",
+    linkedin: "https://linkedin.com/in/james-liu-frontend",
+    skills: ["React", "Next.js", "TypeScript", "Performance", "Testing"],
+    contributions: {
+      commits: 687,
+      prs: 45,
+      reviews: 78
+    }
+  }
+]
+
+interface TeamMembersSectionProps {
+  className?: string
+}
+
+export default function TeamMembersSection({ className }: TeamMembersSectionProps) {
+  return (
+    <section className={className} aria-labelledby="team-members-heading">
+      <Container className="py-16 sm:py-24">
+        <Stack gap={8}>
+          {/* Section Header */}
+          <Stack gap={4} align="center" className="text-center">
+            <Typography variant="h2" id="team-members-heading">
+              Meet Our Contributors
+            </Typography>
+            <Typography variant="lead" className="max-w-2xl">
+              Talented individuals from around the world who are building the future of open source collaboration
+            </Typography>
+          </Stack>
+
+          {/* Team Members Grid */}
+          <Grid cols={3} gap={8} className="w-full">
+            {teamMembers.map((member) => (
+              <Card key={member.id} className="h-full hover:shadow-lg transition-shadow duration-200">
+                <CardHeader className="text-center pb-4">
+                  <div className="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden bg-muted border-2 border-primary/20">
+                    <Image
+                      src={member.avatar}
+                      alt={`${member.name} profile picture`}
+                      width={80}
+                      height={80}
+                      className="w-full h-full object-cover"
+                      unoptimized={true}
+                    />
+                  </div>
+                  <CardTitle className="text-lg">{member.name}</CardTitle>
+                  <CardDescription className="font-medium text-primary">
+                    {member.role}
+                  </CardDescription>
+                  <Typography variant="small" className="text-muted-foreground">
+                    {member.specialization}
+                  </Typography>
+                </CardHeader>
+                
+                <CardContent>
+                  <Stack gap={4}>
+                    {/* Bio */}
+                    <Typography variant="small" className="text-center leading-relaxed">
+                      {member.bio}
+                    </Typography>
+
+                    {/* Skills */}
+                    <div>
+                      <Typography variant="small" className="font-medium mb-2 text-foreground">
+                        Skills
+                      </Typography>
+                      <div className="flex flex-wrap gap-1">
+                        {member.skills.slice(0, 3).map((skill) => (
+                          <span
+                            key={skill}
+                            className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground"
+                          >
+                            {skill}
+                          </span>
+                        ))}
+                        {member.skills.length > 3 && (
+                          <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+                            +{member.skills.length - 3} more
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Contributions Stats */}
+                    <div>
+                      <Typography variant="small" className="font-medium mb-2 text-foreground">
+                        Contributions
+                      </Typography>
+                      <div className="grid grid-cols-3 gap-2 text-center">
+                        <div className="bg-muted/50 rounded-md px-2 py-1">
+                          <div className="text-sm font-semibold text-foreground">
+                            {member.contributions.commits}
+                          </div>
+                          <div className="text-xs text-muted-foreground">Commits</div>
+                        </div>
+                        <div className="bg-muted/50 rounded-md px-2 py-1">
+                          <div className="text-sm font-semibold text-foreground">
+                            {member.contributions.prs}
+                          </div>
+                          <div className="text-xs text-muted-foreground">PRs</div>
+                        </div>
+                        <div className="bg-muted/50 rounded-md px-2 py-1">
+                          <div className="text-sm font-semibold text-foreground">
+                            {member.contributions.reviews}
+                          </div>
+                          <div className="text-xs text-muted-foreground">Reviews</div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Social Links */}
+                    <div className="flex justify-center gap-2 pt-2">
+                      {member.github && (
+                        <Button variant="outline" size="sm" asChild>
+                          <a
+                            href={member.github}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label={`${member.name} GitHub profile`}
+                          >
+                            <GitHubLogoIcon className="h-4 w-4" />
+                          </a>
+                        </Button>
+                      )}
+                      {member.linkedin && (
+                        <Button variant="outline" size="sm" asChild>
+                          <a
+                            href={member.linkedin}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label={`${member.name} LinkedIn profile`}
+                          >
+                            <LinkedInLogoIcon className="h-4 w-4" />
+                          </a>
+                        </Button>
+                      )}
+                    </div>
+                  </Stack>
+                </CardContent>
+              </Card>
+            ))}
+          </Grid>
+
+          {/* View All Team CTA */}
+          <div className="flex justify-center">
+            <Button size="lg" variant="outline" asChild>
+              <a href="/team">
+                View All Team Members
+                <svg
+                  className="ml-2 h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+            </Button>
+          </div>
+        </Stack>
+      </Container>
+    </section>
+  )
+}
+
+export type { TeamMembersSectionProps }
\ No newline at end of file
diff --git a/src/components/home/teams-section.tsx b/src/components/home/teams-section.tsx
new file mode 100644
index 0000000..f08a25c
--- /dev/null
+++ b/src/components/home/teams-section.tsx
@@ -0,0 +1,295 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Container } from "@/components/ui/container"
+import { Typography } from "@/components/ui/typography"
+import { Grid } from "@/components/ui/grid"
+import { Stack } from "@/components/ui/stack"
+import { Button } from "@/components/ui/button"
+import Image from "next/image"
+
+interface TeamMember {
+  id: string
+  name: string
+  avatar: string
+  role?: string
+  github?: string
+}
+
+interface Team {
+  id: string
+  name: string
+  focusArea: string
+  mission: string
+  members: TeamMember[]
+  joinUrl?: string
+  learnMoreUrl?: string
+}
+
+// Mock data for teams with @CodeStorm-Hub/dev team members
+const teams: Team[] = [
+  {
+    id: "1",
+    name: "Core Infrastructure",
+    focusArea: "Platform & DevOps",
+    mission: "Building and maintaining scalable infrastructure, CI/CD pipelines, and deployment automation for all CodeStorm Hub projects.",
+    members: [
+      { 
+        id: "1", 
+        name: "Alex Chen", 
+        avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", 
+        role: "Lead Engineer",
+        github: "alexchen-dev"
+      },
+      { 
+        id: "2", 
+        name: "Sarah Kim", 
+        avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face", 
+        role: "DevOps Specialist",
+        github: "sarahkim-dev"
+      },
+      { 
+        id: "3", 
+        name: "Marcus Johnson", 
+        avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face", 
+        role: "Cloud Architect",
+        github: "marcusj-dev"
+      },
+      { 
+        id: "4", 
+        name: "Elena Rodriguez", 
+        avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face", 
+        role: "Security Engineer",
+        github: "elenarod-dev"
+      }
+    ],
+    joinUrl: "/teams/infrastructure/join",
+    learnMoreUrl: "/teams/infrastructure"
+  },
+  {
+    id: "2", 
+    name: "Research & Innovation",
+    focusArea: "ML/AI & Data Science",
+    mission: "Conducting cutting-edge research in machine learning, artificial intelligence, and data science to push the boundaries of open source innovation.",
+    members: [
+      { 
+        id: "5", 
+        name: "Dr. Priya Patel", 
+        avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face", 
+        role: "Research Lead",
+        github: "priyapatel-research"
+      },
+      { 
+        id: "6", 
+        name: "James Liu", 
+        avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face", 
+        role: "ML Engineer",
+        github: "jamesliu-ml"
+      },
+      { 
+        id: "7", 
+        name: "Sofia Andersson", 
+        avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face", 
+        role: "Data Scientist",
+        github: "sofiaand-data"
+      },
+      { 
+        id: "8", 
+        name: "Ahmad Hassan", 
+        avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150&h=150&fit=crop&crop=face", 
+        role: "Research Assistant",
+        github: "ahmadh-research"
+      }
+    ],
+    joinUrl: "/teams/research/join",
+    learnMoreUrl: "/teams/research"
+  },
+  {
+    id: "3",
+    name: "Developer Experience", 
+    focusArea: "Tools & Documentation",
+    mission: "Creating exceptional developer tools, comprehensive documentation, and smooth onboarding experiences for our open source community.",
+    members: [
+      { 
+        id: "9", 
+        name: "Taylor Morgan", 
+        avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=150&h=150&fit=crop&crop=face", 
+        role: "DX Lead",
+        github: "taylormorgan-dx"
+      },
+      { 
+        id: "10", 
+        name: "Kai Nakamura", 
+        avatar: "https://images.unsplash.com/photo-1507591064344-4c6ce005b128?w=150&h=150&fit=crop&crop=face", 
+        role: "Technical Writer",
+        github: "kainakamura-docs"
+      },
+      { 
+        id: "11", 
+        name: "Zoe Williams", 
+        avatar: "https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?w=150&h=150&fit=crop&crop=face", 
+        role: "Developer Advocate",
+        github: "zoew-advocate"
+      }
+    ],
+    joinUrl: "/teams/dx/join",
+    learnMoreUrl: "/teams/dx"
+  },
+  {
+    id: "4",
+    name: "Community Growth",
+    focusArea: "Outreach & Engagement", 
+    mission: "Growing our global community through events, partnerships, mentorship programs, and inclusive engagement initiatives.",
+    members: [
+      { 
+        id: "12", 
+        name: "Maya Thompson", 
+        avatar: "https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=150&h=150&fit=crop&crop=face", 
+        role: "Community Manager",
+        github: "mayat-community"
+      },
+      { 
+        id: "13", 
+        name: "Luis Garcia", 
+        avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face", 
+        role: "Event Coordinator",
+        github: "luisgarcia-events"
+      },
+      { 
+        id: "14", 
+        name: "Aisha Okonkwo", 
+        avatar: "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=150&h=150&fit=crop&crop=face", 
+        role: "Diversity & Inclusion Lead",
+        github: "aishaoko-inclusion"
+      }
+    ],
+    joinUrl: "/teams/community/join",
+    learnMoreUrl: "/teams/community"
+  }
+]
+
+interface TeamsSectionProps {
+  className?: string
+}
+
+export default function TeamsSection({ className }: TeamsSectionProps) {
+  return (
+    <section className={className} aria-labelledby="teams-heading">
+      <Container className="py-16 sm:py-24">
+        <Stack gap={8}>
+          {/* Section Header */}
+          <Stack gap={4} align="center" className="text-center">
+            <Typography variant="h2" id="teams-heading">
+              Our Teams
+            </Typography>
+            <Typography variant="lead" className="max-w-2xl">
+              Meet the passionate teams driving innovation and building the future of open source collaboration
+            </Typography>
+          </Stack>
+
+          {/* Teams Grid */}
+          <Grid cols={2} gap={8} className="w-full">
+            {teams.map((team) => (
+              <Card key={team.id} className="h-full hover:shadow-lg transition-shadow duration-200">
+                <CardHeader>
+                  <Stack gap={2}>
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <CardTitle className="text-xl">{team.name}</CardTitle>
+                        <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary mt-1">
+                          {team.focusArea}
+                        </span>
+                      </div>
+                    </div>
+                  </Stack>
+                </CardHeader>
+                <CardContent>
+                  <Stack gap={6}>
+                    <CardDescription className="text-sm leading-relaxed">
+                      {team.mission}
+                    </CardDescription>
+                    
+                    {/* Team Members */}
+                    <div>
+                      <Typography variant="small" className="font-medium mb-3 text-foreground">
+                        Team Members ({team.members.length})
+                      </Typography>
+                      <div className="flex -space-x-2">
+                        {team.members.slice(0, 6).map((member, index) => (
+                          <div
+                            key={member.id}
+                            className="relative inline-flex items-center justify-center w-10 h-10 rounded-full border-2 border-background hover:z-10 focus:z-10 transition-transform hover:scale-110 overflow-hidden bg-muted"
+                            title={`${member.name}${member.role ? ` - ${member.role}` : ''}`}
+                            style={{ zIndex: team.members.length - index }}
+                          >
+                            <Image
+                              src={member.avatar}
+                              alt={member.name}
+                              width={40}
+                              height={40}
+                              className="w-full h-full object-cover"
+                              unoptimized={true}
+                            />
+                          </div>
+                        ))}
+                        {team.members.length > 6 && (
+                          <div
+                            className="relative inline-flex items-center justify-center w-10 h-10 text-xs font-medium text-primary bg-muted rounded-full border-2 border-background"
+                            title={`+${team.members.length - 6} more members`}
+                          >
+                            <span>+{team.members.length - 6}</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Action Buttons */}
+                    <div className="flex gap-2 pt-2">
+                      {team.learnMoreUrl && (
+                        <Button variant="outline" size="sm" className="flex-1" asChild>
+                          <a href={team.learnMoreUrl}>
+                            Learn More
+                          </a>
+                        </Button>
+                      )}
+                      {team.joinUrl && (
+                        <Button size="sm" className="flex-1" asChild>
+                          <a href={team.joinUrl}>
+                            Join Team
+                          </a>
+                        </Button>
+                      )}
+                    </div>
+                  </Stack>
+                </CardContent>
+              </Card>
+            ))}
+          </Grid>
+
+          {/* View All Teams CTA */}
+          <div className="flex justify-center">
+            <Button size="lg" variant="outline" asChild>
+              <a href="/team">
+                View All Teams & Contributors
+                <svg
+                  className="ml-2 h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </a>
+            </Button>
+          </div>
+        </Stack>
+      </Container>
+    </section>
+  )
+}
+
+export type { TeamsSectionProps }
\ No newline at end of file