fixed directory name that was causing errors during cloning

1Application-frontend/src/components/Cards.jsx

@@ -1,23 +1,26 @@
-import React from 'react'
+import React from 'react';
 import { red } from '@mui/material/colors';
-import { Avatar, Card, CardActions, CardContent, CardHeader, CardMedia, IconButton, Typography } from '@mui/material';
+import { Avatar, Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material';
 
+export default function Cards({ projectName = 'NA', imageUrl, altname = 'Project Image', description = 'No description available' }) {
+  // Safely handle the match and join logic
+  const projectCodeArray = projectName ? projectName.match(/[0-9 A-Z]/g) : null;
+  const projectCode = projectCodeArray ? projectCodeArray.join('').slice(0, 2) : 'NA'; // Default if match is null
 
-export default function Cards( {projectName, imageUrl, altname, description} ) {
-    return (
-        <Card sx={{ maxWidth: 345 }}>
-      <CardContent sx={{display: 'flex', justifyContent:'start'}}>
-          <Avatar sx={{ bgcolor: red[500], mr: 2}} aria-label="leter">
-            {projectName.match(/[0-9 A-Z]/g).join('').slice(0,2)}
-          </Avatar>
+  return (
+    <Card sx={{ maxWidth: 345 }}>
+      <CardContent sx={{ display: 'flex', justifyContent: 'start' }}>
+        <Avatar sx={{ bgcolor: red[500], mr: 2 }} aria-label="letter">
+          {projectCode}
+        </Avatar>
         <Typography color="text.secondary" variant="h5">
-            {projectName}
+          {projectName}
         </Typography>
       </CardContent>
       <CardMedia
         component="img"
         height="200"
-        image={imageUrl}
+        image={imageUrl || 'defaultImageUrl.jpg'}
         alt={altname}
       />
       <CardContent>
@@ -28,5 +31,5 @@ export default function Cards( {projectName, imageUrl, altname, description} ) {
       <CardActions disableSpacing>
       </CardActions>
     </Card>
-    )
+  );
 }

1Application-frontend/src/components/Footer.jsx

@@ -31,9 +31,9 @@ const Footer = () => {
 
         <div className="section">
           <h2>About Us</h2>
-          <z>Our github</z>
-          <z>Github stars</z>
-          <z>Repositories</z>
+          <p>Our github</p>
+          <p>Github stars</p>
+          <p>Repositories</p>
         </div>
 
         <div className="section">

1Application-frontend/src/css/Home.css

@@ -5,6 +5,57 @@
     background: linear-gradient(to left, var(--color-4), var(--color-5));
     padding: 6rem 3.5rem;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    overflow: hidden;
+    text-align: center;
     background-color: rgb(4, 150, 164);
-    max-height:200vh;
+}
+
+.home-container h1 {
+    font-size: 5rem; 
+    font-weight: bold;
+    margin-bottom: 20px;
+    opacity: 0;
+    transform: translateY(-20px);
+    animation: fadeInUp 1s forwards 0.3s;
+}
+
+.home-container p {
+    font-size: 1.5rem;
+    line-height: 1.8;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 1s forwards 0.6s;
+}
+
+.see-projects-button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+}
+
+.see-projects-button:hover {
+    background-color: #0056b3;
+}
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.home-container p:hover {
+    color: #ffcc00;
+    transition: color 0.3s ease;
 }

1Application-frontend/src/css/Navbar.css

@@ -39,7 +39,7 @@
 .head-main h3 {
   display: inline-flex;
   color: white;
-  font-size: 2rem;
+  font-size: 1.7rem;
   /* text-shadow: 1px 1px 1px #919191; */
   /* font-family: var(--font-1); */
   font-family: 'Courier New', Courier, monospace;

1Application-frontend/src/pages/Home.jsx

@@ -1,14 +1,20 @@
-import { Fragment } from "react"
-import "../css/Home.css"
+import { Fragment } from "react";
+import { Link } from "react-router-dom"; // Import Link from react-router-dom
+import "../css/Home.css";
 
 const Home = () => {
   return (
     <Fragment>
       <div className="home-container">
-
+        <h1>Welcome to Thinks Well Javascript Projects</h1>
+        <p>Explore the projects and learn more about the team</p>
+        {/* Button to navigate to /projects */}
+        <Link to="/projects" className="see-projects-button">
+          See Projects
+        </Link>
       </div>
     </Fragment>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

1Application-frontend/src/pages/Projects.jsx

@@ -26,7 +26,7 @@ const Projects = () => {
       <Navbar />
 
         <Container size="sm" sx={{ mt: "7rem", mb: 4 }}>
-            <Grid container spacing={2} gutterBottom>
+            <Grid container spacing={2}>
                 {names.map((name) => (
                    <Grid item xs={12} sm={6} md={4} key={name}>
                         <Cards