feat: Adding missing Projects in project page with proper categorised tabs and sorting

src/app/projects/page.jsx

@@ -29,7 +29,7 @@ function LinkIcon(props) {
   )
 }
 
-// Define the Cards component here
+// Cards grid
 const Cards = ({ projectList }) => {
   return (
     <Grid container spacing={{ xs: 2, md: 4 }} sx={{ paddingTop: '40px', justifyContent: 'center' }}>
@@ -51,23 +51,28 @@ const Cards = ({ projectList }) => {
               backdropFilter: 'blur(4px) brightness(100%)',
               display: 'flex',
               flexDirection: 'column',
+              justifyContent: 'space-between',
+
             }}
           >
-            <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
-              <Image
-                src={project.logo}
-                alt={`${project.title} image`}
-                width={80}
-                height={80}
-                style={{ margin: '0 auto 16px', objectFit: 'contain' }}
-              />
+            <CardContent sx={{ textAlign: 'center', pt: 4 }}>
+              {project.logo && (
+                <div className="flex justify-center mb-4">
+                  <Image
+                    src={project.logo}
+                    alt={project.name}
+                    width={60}
+                    height={60}
+                    className="object-contain"
+                  />
+                </div>
+              )}
               <Typography
-                variant="h5"
-                className="mt-6 font-mono text-green-600 dark:text-yellow-400"
-                sx={{
-                  fontFamily: 'Nunito-Bold',
-                  color: '#3c982c',
-                  textAlign: 'center',
+                variant="h6"
+                className="font-mono font-bold text-zinc-800 dark:text-zinc-100 mb-2"
+                sx={{ 
+                  fontFamily: 'Nunito', 
+                  mb: 1 
                 }}
               >
                 {project.name}
@@ -76,16 +81,10 @@ const Cards = ({ projectList }) => {
               <Typography
                 variant="body1"
                 className="text-zinc-600  dark:text-zinc-400 text-lg font-mono leading-7 text-center"
-                sx={{
-                  fontFamily: 'Nunito-Light',
-                  color: 'black',
-                  mt: 2,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  display: '-webkit-box',
-                  WebkitBoxOrient: 'vertical',
-                  WebkitLineClamp: 4,
-                }}
+                sx={{ fontFamily: 'Nunito-Light',
+                   color: 'black',
+                    fontSize: '0.85rem' 
+                  }}
               >
                 {project.description}
               </Typography>
@@ -112,6 +111,8 @@ const Cards = ({ projectList }) => {
   );
 };
 
+//Page header
+
 const ProjectSection = () => {
   return (
     <motion.div 
@@ -120,47 +121,35 @@ const ProjectSection = () => {
       transition={{ duration: 0.8 }}
       className="ideas-text flex items-center justify-center mb-8 relative"
     >
-      <div
-        className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center dark:bg-[url('/logo.png')] bg-[url('/logo.png')] absolute left-10"
-        alt="GSOC Logo"
-      ></div>
 
       <h1 className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl text-center">
         PROJECTS
       </h1>
 
-      <div
-        className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center absolute right-10"
-        style={{ backgroundImage: "url('/logo.png')" }}
-        aria-label="Logo"
-      ></div>
-
     </motion.div>
   );
 };
 
-const styles = {
-  bannerWrapper: {
-    width: '100%',
-    position: 'relative',
-    overflow: 'hidden',
-  },
-};
 
-export default function Projects() {
-  const readyToDownload = projects.filter(p => p.category === 'Ready to download');
-  const productionReady = projects.filter(p => p.category === 'Production ready');
-  const ongoing = projects.filter(p => p.category === 'Ongoing');
+// Main page component
 
+export default function Projects() {
   return (
     <>
       <Container className="mt-20 mb-28">
         <Container.Inner>
-          <div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3 mb-16">
-            {projects.sort(() => 0.5 - Math.random()).map((product) => (
-              <CardProduct key={product.slug} product={product} />
-            ))}
-          </div>
+            <ProjectSection />
+            <motion.div
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+              >
+              <div className="mb-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
+                 {projects.map((product) => (
+                  <CardProduct key={product.slug || product.name} product={product} />
+                ))}
+              </div>
+            </motion.div>
 
           {/* 
           <div className="mb-20">
@@ -183,12 +172,6 @@ export default function Projects() {
 
         </Container.Inner>
       </Container>
-
-      <div style={styles.bannerWrapper}>
-        <Container.Outer className="mt-28">
-          <Banner />
-        </Container.Outer>
-      </div>
     </>
   );
 }