feat(routes): define and testing of web routes

src/front/components/Team/Card.jsx

@@ -6,13 +6,13 @@ import { Link } from "react-router-dom"
 
 export const Card = ({ name, position, description, image, mailLink, linkedinLink, githubLink }) => {
     return (
-        <div className="card h-100 card-background rounded-5">
-            <img src={image} className="card-img-top rounded-top-5" alt="CloudTech Team member profile picture" />
-            <div className="card-body text-center text-white">
-                <h3 className="card-title section-title">{name}</h3>
-                <h5>{position}</h5>
+        <div className="card h-100 card-background rounded-5 pb-3">
+            <img src={image} className="card-img-to overflow-hidden w-100 h-100 object-fit-cover rounded-top-5" alt="CloudTech Team member profile picture" />
+            <div className="card-body text-center text-white pt-4">
+                <h3 className="card-title section-title mb-1">{name}</h3>
+                <h5 className="mt-0 mb-3">{position}</h5>
                 <p className="card-text">{description}</p>
-                <div className="d-flex justify-content-center gap-3">
+                <div className="d-flex justify-content-center fs-1 gap-3">
                     <Link to={mailLink} className="text-white"><FontAwesomeIcon icon={faEnvelope} /></Link>
                     <Link to={linkedinLink} className="text-white"><FontAwesomeIcon icon={faLinkedin} /></Link>
                     <Link to={githubLink} className="text-white"><FontAwesomeIcon icon={faGithubSquare} /> </Link>

src/front/components/Team/Team.jsx

@@ -13,7 +13,7 @@ export const Team = () => {
                 </div>
                 <div className="row my-3">
                     {teamContent.map(teamMember => (
-                        <div key={teamMember.id} className="col-4">
+                        <div key={teamMember.id} className="col-md-6 col-lg-4 mb-4">
                             <Card
                                 name={teamMember.name}
                                 position={teamMember.position}

src/front/pages/About.jsx

@@ -0,0 +1,12 @@
+import { Team } from "../components/Team/Team"
+import { Process } from "../components/Process"
+
+export const About = () => {
+    return (
+        <>
+            <Team />
+            <Process />
+        </>
+
+    )
+}

src/front/pages/Contact.jsx

@@ -0,0 +1,7 @@
+export const Contact = () => {
+    return (
+        <section>
+            <h1>Contact Test</h1>
+        </section>
+    )
+}

src/front/pages/Projects.jsx

@@ -0,0 +1,9 @@
+import { Projects } from "../components/Projects";
+
+export const Portfolio = () => {
+    return (
+        <>
+            <Projects />
+        </>
+    )
+}

src/front/pages/Services.jsx

@@ -0,0 +1,11 @@
+import { Services } from "../components/Services/Services"
+import { Process } from "../components/Process"
+
+export const ServicesPage = () => {
+    return (
+        <>
+            <Services />
+            <Process />
+        </>
+    )
+}

src/front/routes.jsx

@@ -1,30 +1,34 @@
 // Import necessary components and functions from react-router-dom.
 
 import {
-    createBrowserRouter,
-    createRoutesFromElements,
-    Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
 } from "react-router-dom";
 import { Layout } from "./pages/Layout";
 import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
+import { About } from "./pages/About";
+import { ServicesPage } from "./pages/Services";
+import { Portfolio } from "./pages/Projects";
+import { Contact } from "./pages/Contact";
 
 export const router = createBrowserRouter(
-    createRoutesFromElements(
+  createRoutesFromElements(
     // CreateRoutesFromElements function allows you to build route elements declaratively.
     // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
     // Root, on the contrary, create a sister Route, if you have doubts, try it!
     // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
     // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
 
-      // Root Route: All navigation will start from here.
-      <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
+    // Root Route: All navigation will start from here.
+    <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
 
-        {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
-        <Route path= "/" element={<Home />} />
-        <Route path="/single/:theId" element={ <Single />} />  {/* Dynamic route for single items */}
-        <Route path="/demo" element={<Demo />} />
-      </Route>
-    )
+      {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="/services" element={<ServicesPage />} />
+      <Route path="/projects" element={<Portfolio />} />
+      <Route path="/contact" element={<Contact />} />
+    </Route>
+  )
 );