Cloudtech-web-dev · santgeek · Jun 30, 2025 · Jun 30, 2025
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello Rigo</title>
+    <title>CloudTech</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/front/components/Services/Card.jsx b/src/front/components/Services/Card.jsx
@@ -1,9 +1,15 @@
-export const Card = ({ title, description }) => {
+import { Link } from "react-router-dom"
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
+
+export const Card = ({ title, icon, description, link }) => {
     return (
-        <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>
+        <div className="card container card-background rounded-5 px-4 py-3 h-100">
+            <div className="card-body row text-start ">
+                <h5 className="card-title fs-4 text-ct-secondary">{icon} {title}</h5>
+                <p className="card-text text-white mb-4">{description}</p>
+                <div className="col align-self-end">
+                    <Link to={"/contact"} className="animated-link text-decoration-none text-ct-secondary">{link}</Link>
+                </div>
             </div>
         </div>
     )

diff --git a/src/front/components/Services/Services.jsx b/src/front/components/Services/Services.jsx
@@ -10,28 +10,34 @@ export const Services = () => {
             <div className="container py-5">
                 <div className="d-flex flex-column text-center justify-content-center">
                     <h2 className="section-title">Conoce nuestros servicios</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>
+                    <p className="text-white ct-description-p">Cada uno de nuestros servicios está diseñado para construir y amplificar tu presencia digital, convirtiendo tus ideas en productos y resultados medibles. Explora cómo podemos dar forma a tu universo online. </p>
                 </div>
 
                 <div className="row my-3">
-                    <h3 className="section-title mb-4">Desarrollo Web</h3>
+                    <h3 className="section-title mb-0">Desarrollo Web</h3>
+                    <h5 className="text-white mb-4 fw-normal fst-italic">Construyendo tu universo digital</h5>
                     {servicesContent.filter(service => service.id < 5).map(service => (
                         <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
                             <Card
                                 title={service.title}
+                                icon={service.icon}
                                 description={service.description}
+                                link={service.link}
                             />
                         </div>
                     ))
                     }
                 </div>
                 <div className="row">
-                    <h3 className="section-title mb-4">Comunicación</h3>
+                    <h3 className="section-title mb-0">Comunicación</h3>
+                    <h5 className="text-white mb-4 fw-normal fst-italic">Reunimos tus audiencias</h5>
                     {servicesContent.filter(service => service.id > 4).map(service => (
                         <div key={service.id} className="col-md-6 col-lg-4 col-xl-3 mb-4">
                             <Card
                                 title={service.title}
+                                icon={service.icon}
                                 description={service.description}
+                                link={service.link}
                             />
                         </div>
                     ))

diff --git a/src/front/components/Team/AboutUs.jsx b/src/front/components/Team/AboutUs.jsx
@@ -0,0 +1,14 @@
+export const AboutUs = () => {
+    return (
+        <section>
+            <div className="container py-5">
+                <div className="row mx-3">
+                    <div className="col d-flex flex-column text-center justify-content-center">
+                        <h2 className="section-title">¿Quiénes somos?</h2>
+                        <p className="text-white ct-description-p">“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 sit sed quis elementum. Turpis facilisi convallis”.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/src/front/index.css b/src/front/index.css
@@ -80,3 +80,31 @@ body {
     margin: auto;
   }
 }
+
+.animated-link {
+  position: relative;
+  text-decoration: none;
+  color: #60e0a5;
+  transition: color 0.3s ease-in-out;
+}
+
+.animated-link::after {
+  content: "\f061";
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 100%;
+  opacity: 0;
+  transform: translateX(-20px);
+  transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
+  margin-left: 5px;
+}
+
+.animated-link:hover {
+  color: #88ffc8;  
+}
+
+.animated-link:hover::after {
+  opacity: 1;
+  transform: translateX(0);
+}
diff --git a/src/front/pages/About.jsx b/src/front/pages/About.jsx
@@ -1,9 +1,11 @@
+import { AboutUs } from "../components/Team/AboutUs"
 import { Team } from "../components/Team/Team"
 import { Process } from "../components/Process"
 
 export const About = () => {
     return (
         <>
+            <AboutUs />
             <Team />
             <Process />
         </>

diff --git a/src/front/pages/Contact.jsx b/src/front/pages/Contact.jsx
@@ -1,7 +1,13 @@
 export const Contact = () => {
     return (
         <section>
-            <h1>Contact Test</h1>
+            <div className="container">
+                <div className="row">
+                    <div className="col">
+
+                    </div>
+                </div>
+            </div>
         </section>
     )
 }
diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx
@@ -44,7 +44,7 @@ export const Home = () => {
 			<Process />
 			<Projects />
 			<Testimonials />
-			<Team />
+
 		</>
 	);
 }; 
diff --git a/src/front/utils/servicesContent.jsx b/src/front/utils/servicesContent.jsx
@@ -1,42 +1,68 @@
+import { faWordpressSimple } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
+import { faWebflow } from "@fortawesome/free-brands-svg-icons";
+import { faHexagonNodes } from "@fortawesome/free-solid-svg-icons";
+import { faPenNib } from "@fortawesome/free-solid-svg-icons";
+import { faComments } from "@fortawesome/free-solid-svg-icons";
+import { faChessBishop } from "@fortawesome/free-solid-svg-icons";
+
 export const servicesContent = [
     {
         id: 1,
+        icon: <FontAwesomeIcon icon={faWordpressSimple} />,
         title: "Wordpress",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Tu web con WordPress"
     },
     {
         id: 2,
+        icon: <FontAwesomeIcon icon={faCode} />,
         title: "Web Dev",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Explora el desarrollo a medida"
     },
     {
         id: 3,
+        icon: <FontAwesomeIcon icon={faCartShopping} />,
         title: "E-commerce",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Impulsa tu E-commerce"
     },
     {
         id: 4,
+        icon: <FontAwesomeIcon icon={faWebflow} />,
         title: "WebFlow",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Descubre Webflow"
     },
     {
         id: 5,
+        icon: <FontAwesomeIcon icon={faHexagonNodes} />,
         title: "Manejo de redes",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Impulsa tu marca en redes"
     },
     {
         id: 6,
+        icon: <FontAwesomeIcon icon={faPenNib} />,
         title: "Copywriting",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Escríbenos"
     },
     {
         id: 7,
+        icon: <FontAwesomeIcon icon={faComments} />,
         title: "Producción de contenido",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Crea con nosotros"
     },
     {
         id: 8,
+        icon: <FontAwesomeIcon icon={faChessBishop} />,
         title: "Estrategia de comunicación",
-        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm."
+        description: "Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalaracc lacus vel facilisis volutpat est velitolm.",
+        link: "Descubre tu potencial"
     }
 ];