build(teamSection): card for team members with buttons and dynamic co…

src/front/components/Services/Services.jsx

@@ -5,7 +5,7 @@ import serviceBg from "../../assets/img/servicesBackground.png"
 export const Services = () => {
     return (
         <section className="d-flex justify-content-center mx-3 position-relative">
-            <img src={serviceBg} alt="" className="mx-auto ct-services-bg position-absolute w-100 h-100 object-fit-cover d-none d-sm-block" />
+            <img src={serviceBg} alt="CloudTech services background image" className="mx-auto ct-services-bg position-absolute w-100 h-100 object-fit-cover d-none d-sm-block" />
 
             <div className="container py-5">
                 <div className="d-flex flex-column text-center justify-content-center">

src/front/components/Team/Card.jsx

@@ -0,0 +1,23 @@
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons"
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons"
+import { faGithubSquare } from "@fortawesome/free-brands-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+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>
+                <p className="card-text">{description}</p>
+                <div className="d-flex justify-content-center 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>
+                </div>
+            </div>
+        </div>
+    )
+}

src/front/components/Team/Team.jsx

@@ -0,0 +1,33 @@
+import { teamContent } from "../../utils/teamContent"
+import { Card } from "./Card"
+import teamBg from "../../assets/img/teamBackground.png"
+
+export const Team = () => {
+    return (
+        <section className="d-flex justify-content-center mx-3 position-relative">
+            <img src={teamBg} alt="CloudTech team background section" className="mx-auto ct-services-bg position-absolute w-100 h-100 object-fit-cover d-none d-sm-block" />
+            < div className="container py-5">
+                <div className="d-flex flex-column text-center justify-content-center">
+                    <h2 className="section-title">Conoce a nuestro equipo</h2>
+                    <p className="text-white ct-description-p">Lorem ipsum dolor sit amet consectetur adipiscing elit semper dalar elementum tempus hac tellus libero accumsan. </p>
+                </div>
+                <div className="row my-3">
+                    {teamContent.map(teamMember => (
+                        <div key={teamMember.id} className="col-4">
+                            <Card
+                                name={teamMember.name}
+                                position={teamMember.position}
+                                description={teamMember.description}
+                                image={teamMember.image}
+                                mailLink={teamMember.mailLink}
+                                linkedinLink={teamMember.linkedinLink}
+                                githubLink={teamMember.githubLink}
+                            />
+                        </div>
+                    ))
+                    }
+                </div>
+            </div >
+        </section >
+    )
+}

src/front/pages/Home.jsx

@@ -4,6 +4,7 @@ import { Services } from "../components/Services/Services.jsx";
 import { Process } from "../components/Process.jsx";
 import { Projects } from "../components/Projects.jsx";
 import { Testimonials } from "../components/Testimonial/Testimonials.jsx";
+import { Team } from "../components/Team/Team.jsx";
 
 
 export const Home = () => {
@@ -43,6 +44,7 @@ export const Home = () => {
 			<Process />
 			<Projects />
 			<Testimonials />
+			<Team />
 		</>
 	);
 }; 

src/front/utils/teamContent.jsx

@@ -0,0 +1,36 @@
+import devProfile1 from '../assets/img/Team/teammember1.jpg'
+import devProfile2 from '../assets/img/Team/teammember2.jpg'
+import devProfile3 from '../assets/img/Team/teammember3.png'
+
+export const teamContent = [
+    {
+        id: 0,
+        name: "David Pinto",
+        position: "Comunicador y Desarrollador",
+        description: "Lorem ipsum dolor sit amet consecte adipiscing elit amet hendrerit pretium nulla sed enim iaculis mi. ",
+        image: devProfile1,
+        mailLink: 'dpinto@cloudtech.com.ec',
+        linkedinLink: 'https://www.linkedin.com/in/davidpinto6/',
+        githubLink: ''
+    },
+    {
+        id: 1,
+        name: "José Pinto",
+        position: "Fullstack Developer",
+        description: "Lorem ipsum dolor sit amet consecte adipiscing elit amet hendrerit pretium nulla sed enim iaculis mi. ",
+        image: devProfile2,
+        mailLink: 'jmpinto@cloudtech.com.ec',
+        linkedinLink: 'https://www.linkedin.com/in/jm-pinto/',
+        githubLink: 'https://github.com/UkuJoeMP'
+    },
+    {
+        id: 2,
+        name: "David Pinto",
+        position: "Fullstack Developer",
+        description: "Lorem ipsum dolor sit amet consecte adipiscing elit amet hendrerit pretium nulla sed enim iaculis mi. ",
+        image: devProfile3,
+        mailLink: 'smontoya@cloudtech.com.ec',
+        linkedinLink: 'https://www.linkedin.com/in/santiago-montoya-ord%C3%B3%C3%B1ez-nk7/',
+        githubLink: 'https://github.com/santgeek'
+    }
+]