build(testimonials)

src/front/components/Projects.jsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+import vocaltechProject from "../assets/img/Portfolio/vocaltech2.png"
+import vocaltechProject2 from "../assets/img/Portfolio/vocaltech1.png"
+import vocaltechProject3 from "../assets/img/Portfolio/vocaltech4.png"
+import vocaltechProject4 from "../assets/img/Portfolio/vocaltech3.png"
+import muraProject1 from "../assets/img/Portfolio/mura1.png"
+import bestfriendProject1 from "../assets/img/Portfolio/bestfriend1.png"
+import comparadiseProject1 from "../assets/img/Portfolio/comparadise2.png"
+
+export const Projects = () => {
+    return (
+        <section className="mx-3">
+            <div className="container py-5">
+                <div className="d-flex flex-column text-center justify-content-center mb-5">
+                    <h2 className="section-title">Nuestros proyectos</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 g-2 g-lg-3 h-100">
+                    <div className="col col-lg-6">
+                        <div className="d-flex flex-column h-100">
+                            <img src={muraProject1} className="mb-3 rounded-5 object-fit-cover flex-grow-1" alt="cloudtech portfolio image 1" />
+                            <img src={bestfriendProject1} className="mb-3 rounded-5 object-cover" alt="cloudtech portfolio image 2" />
+                        </div>
+
+                    </div>
+                    <div className="col col-lg-6">
+                        <div className="d-flex flex-column h-100">
+                            <img src={comparadiseProject1} className="mb-3 rounded-5 object-fit-cover" alt="cloudtech portfolio image 4" />
+                            <img src={vocaltechProject} className="mb-3 rounded-5 flex-grow-1 object-fit-cover" alt="cloudtech portfolio image 3" />
+                        </div>
+                    </div>
+                </div>
+                <div className="row text-center mt-5">
+                    <div className="col">
+                        <Link to={"/projects"} className="ct-btn-outline-accent text-decoration-none py-2 px-5">Explora nuestro portafolio</Link>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

src/front/components/Services/Card.jsx

@@ -1,6 +1,6 @@
 export const Card = ({ title, description }) => {
     return (
-        <div className="card card-background rounded-5 p-3" style={{ minHeight: '220px' }}>
+        <div className="card card-background rounded-5 px-4 py-3 h-100">
             <div className="card-body text-start ">
                 <h5 className="card-title text-ct-secondary">{title}</h5>
                 <p className="card-text text-white">{description}</p>

src/front/components/Testimonial/Card.jsx

@@ -0,0 +1,24 @@
+export const Card = ({ name, position, review, profilePicture, logo }) => {
+    return (
+        <div className="d-flex flex-column card bg-transparent border-0 px-4 py-3 h-100">
+            <div className="card-body ct-description-p mb-4 flex-grow-1">
+                <p className="card-text text-center text-white">{review}</p>
+            </div>
+            <div className="container mt-auto flex-shrink-1">
+                <div className="row d-flex align-items-center gap-3">
+                    <div className="col justify-content-center d-flex justify-content-md-end gap-3">
+                        <img src={profilePicture} className="rounded-circle overflow-hidden object-fit-cover" alt="CloudTech client profile picture" style={{ maxWidth: "100px" }} />
+                        <div className="d-flex align-self-center flex-column text-start text-white">
+                            <h5 className="mb-0 ">{name}</h5>
+                            <h6 className="fw-normal">{position}</h6>
+                        </div>
+                    </div>
+                    <div className="col d-flex justify-content-center justify-content-md-start">
+                        <img src={logo} className="" alt="CloudTech client company logo" />
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}

src/front/components/Testimonial/Testimonials.jsx

@@ -0,0 +1,42 @@
+import { Card } from "./Card";
+import { testimonialsContent } from "../../utils/testimonialsContent";
+
+export const Testimonials = () => {
+    return (
+        <section className="py-5">
+            <div className="container">
+                <div className="d-flex flex-column text-center justify-content-center">
+                    <h2 className="section-title">Nuestros clientes</h2>
+                </div>
+                <div className="row">
+                    <div className="col">
+                        <div id="testimonialsCarousel" className="carousel slide">
+                            <div className="carousel-inner">
+                                {testimonialsContent.map((card, index) =>
+                                    <div key={card.id}
+                                        className={`carousel-item ${index === 0 ? 'active' : ''}`}>
+                                        <Card
+                                            name={card.name}
+                                            position={card.position}
+                                            review={card.review}
+                                            profilePicture={card.profilePicture}
+                                            logo={card.logo}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                            <button className="carousel-control-prev" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="prev">
+                                <span className="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span className="visually-hidden">Previous</span>
+                            </button>
+                            <button className="carousel-control-next" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="next">
+                                <span className="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span className="visually-hidden">Next</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

src/front/index.css

@@ -2,6 +2,8 @@ body {
   background-image: linear-gradient(0deg, #124652, #199ab7);
 }
 
+/* Button styles */
+
 .ct-btn-outline-accent {
   border: 0.15rem #fbff06 solid;
   border-radius: 2rem;
@@ -17,6 +19,18 @@ body {
   font-weight: bolder;
 }
 
+/* Carousel next and prev buttons color style */
+
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fbff06'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+/* Titles & text styles */
+
 .text-ct-secondary {
   color: #60e0a5;
 }
@@ -42,6 +56,8 @@ body {
   font-size: 2.08rem;
 }
 
+/* Services cards, components & background */
+
 .card-background {
   background-color: rgba(255, 255, 255, 16%);
   backdrop-filter: blur(3px);

src/front/pages/Home.jsx

@@ -2,6 +2,8 @@ import React, { useEffect } from "react"
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 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";
 
 
 export const Home = () => {
@@ -39,7 +41,8 @@ export const Home = () => {
 			<div className="bg-secondary-subtle" style={{ height: "600px" }}>Hero Header Home</div>
 			<Services />
 			<Process />
-
+			<Projects />
+			<Testimonials />
 		</>
 	);
 }; 

src/front/utils/testimonialsContent.jsx

@@ -0,0 +1,34 @@
+import client1 from "../assets/img/Testimonials/clientprofile1.jpg"
+import company1 from "../assets/img/Testimonials/companylogo1.png"
+import client2 from "../assets/img/Testimonials/clientprofile2.png"
+import company2 from "../assets/img/Testimonials/companylogo2.png"
+
+export const testimonialsContent = [
+    {
+        id: 0,
+        name: "Abril Altamirano",
+        position: "Editora General",
+        review: '“Lorem ipsum dolor sit amet consectetur. Sed adipiscing cursus sed ipsum pellentesque pulvinar. Diam lectus non posuere urna porta dolor. Aliquet sed in eleifend arcu”.',
+        profilePicture: client1,
+        logo: company1
+
+    },
+    {
+        id: 1,
+        name: "Leandro Buzeta",
+        position: "Founder & CEO",
+        review: '“Lorem ipsum dolor sit amet consectetur. Sed adipiscing cursus sed ipsum pellentesque pulvinar. Diam lectus non posuere urna porta dolor. Aliquet sed in eleifend arcu”.',
+        profilePicture: client2,
+        logo: company2
+
+    },
+    {
+        id: 2,
+        name: "Abril Altamirano",
+        position: "Editora General",
+        review: '“Lorem ipsum dolor sit amet consectetur. Sed adipiscing cursus sed ipsum pellentesque pulvinar. Diam lectus non posuere urna porta dolor. Aliquet sed in eleifend arcu”.',
+        profilePicture: client1,
+        logo: company1
+
+    }
+]