diff --git a/index.html b/index.html index 27a99f796e..951da99cab 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Hello Rigo + CloudTech
diff --git a/src/front/components/Services/Card.jsx b/src/front/components/Services/Card.jsx index 5ce797aa15..54d4959cb8 100644 --- 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 ( -
-
-
{title}
-

{description}

+
+
+
{icon} {title}
+

{description}

+
+ {link} +
) diff --git a/src/front/components/Services/Services.jsx b/src/front/components/Services/Services.jsx index 40faa1564b..5e47b08a95 100644 --- a/src/front/components/Services/Services.jsx +++ b/src/front/components/Services/Services.jsx @@ -10,28 +10,34 @@ export const Services = () => {

Conoce nuestros servicios

-

Lorem ipsum dolor sit amet consectetur adipiscing elit semper dalar elementum tempus hac tellus libero accumsan.

+

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.

-

Desarrollo Web

+

Desarrollo Web

+
Construyendo tu universo digital
{servicesContent.filter(service => service.id < 5).map(service => (
)) }
-

Comunicación

+

Comunicación

+
Reunimos tus audiencias
{servicesContent.filter(service => service.id > 4).map(service => (
)) diff --git a/src/front/components/Team/AboutUs.jsx b/src/front/components/Team/AboutUs.jsx new file mode 100644 index 0000000000..efccb1d128 --- /dev/null +++ b/src/front/components/Team/AboutUs.jsx @@ -0,0 +1,14 @@ +export const AboutUs = () => { + return ( +
+
+
+
+

¿Quiénes somos?

+

“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”.

+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/front/index.css b/src/front/index.css index dc650427b5..d05c15c5cd 100644 --- 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 index a84f1abd4b..0017092352 100644 --- 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 ( <> + diff --git a/src/front/pages/Contact.jsx b/src/front/pages/Contact.jsx index e423b74e9c..9565a01ca2 100644 --- a/src/front/pages/Contact.jsx +++ b/src/front/pages/Contact.jsx @@ -1,7 +1,13 @@ export const Contact = () => { return (
-

Contact Test

+
+
+
+ +
+
+
) } \ No newline at end of file diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx index 1c972161e2..7f8ce02280 100644 --- a/src/front/pages/Home.jsx +++ b/src/front/pages/Home.jsx @@ -44,7 +44,7 @@ export const Home = () => { - + ); }; \ No newline at end of file diff --git a/src/front/utils/servicesContent.jsx b/src/front/utils/servicesContent.jsx index 4d1c3ebe8c..fa162739eb 100644 --- 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: , 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: , 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: , 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: , 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: , 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: , 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: , 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: , 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" } ]; \ No newline at end of file