Fix team image loading and integrate real project/team data

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

src/app/team/page.tsx

@@ -39,12 +39,13 @@ export default function TeamPage() {
                   <CardHeader className="pb-4">
                     <div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted border-2 border-primary/20">
                       <Image
-                        src={member.image.startsWith('/') ? member.image : `/team-members/${member.image}`}
+                        src={member.image}
                         alt={`${member.name} avatar`}
                         width={96}
                         height={96}
                         className="w-full h-full object-cover"
                         unoptimized={true}
+                        priority={index < 3}
                       />
                     </div>
                     <CardTitle className="text-lg">{member.name}</CardTitle>

src/components/home/projects-section.tsx

@@ -4,95 +4,16 @@ 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"
-  }
-]
+import { GitHubLogoIcon, StarIcon, PersonIcon, ExternalLinkIcon } from "@radix-ui/react-icons"
+import { getFeaturedProjects } from "@/lib/project-data"
 
 interface ProjectsSectionProps {
   className?: string
 }
 
 export default function ProjectsSection({ className }: ProjectsSectionProps) {
+  const featuredProjects = getFeaturedProjects(6)
+
   return (
     <section className={className} aria-labelledby="projects-heading">
       <Container className="py-16 sm:py-24">
@@ -109,63 +30,78 @@ export default function ProjectsSection({ className }: ProjectsSectionProps) {
 
           {/* 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">
+            {featuredProjects.map((project) => (
+              <Card key={project.slug} 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>
+                      {project.primaryLanguage && (
+                        <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+                          {project.primaryLanguage}
+                        </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>
+                    {project.techStack && project.techStack.length > 0 && (
+                      <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground w-fit">
+                        {project.techStack[0]}
+                      </span>
+                    )}
                   </Stack>
                 </CardHeader>
                 <CardContent>
                   <Stack gap={4}>
                     <CardDescription className="line-clamp-2">
-                      {project.description}
+                      {project.overview || project.description || "No description available."}
                     </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>
+                      {project.stars !== undefined && (
+                        <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>
+                      )}
+                      {project.forks !== undefined && (
+                        <div className="flex items-center gap-1">
+                          <PersonIcon className="h-4 w-4" aria-hidden="true" />
+                          <span aria-label={`${project.forks} forks`}>
+                            {project.forks}
+                          </span>
+                        </div>
+                      )}
                     </div>
 
                     {/* Action Buttons */}
                     <div className="flex gap-2 pt-2">
-                      {project.projectUrl ? (
+                      {project.liveDemo && (
+                        <Button variant="outline" size="sm" className="flex-1" asChild>
+                          <a 
+                            href={project.liveDemo}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <ExternalLinkIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+                            Live Demo
+                          </a>
+                        </Button>
+                      )}
+                      {project.github && (
                         <Button variant="outline" size="sm" className="flex-1" asChild>
-                          <a href={project.projectUrl}>
-                            View Project
+                          <a 
+                            href={project.github} 
+                            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>
-                      ) : 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>