diff --git a/src/front/assets/img/Portfolio/bestfriend1.png b/src/front/assets/img/Portfolio/bestfriend1.png new file mode 100644 index 0000000000..bfac0b47b7 Binary files /dev/null and b/src/front/assets/img/Portfolio/bestfriend1.png differ diff --git a/src/front/assets/img/Portfolio/bestfriend2.png b/src/front/assets/img/Portfolio/bestfriend2.png new file mode 100644 index 0000000000..7f69471b33 Binary files /dev/null and b/src/front/assets/img/Portfolio/bestfriend2.png differ diff --git a/src/front/assets/img/Portfolio/bestfriend3.png b/src/front/assets/img/Portfolio/bestfriend3.png new file mode 100644 index 0000000000..ce972a31cc Binary files /dev/null and b/src/front/assets/img/Portfolio/bestfriend3.png differ diff --git a/src/front/assets/img/Portfolio/comparadise1.png b/src/front/assets/img/Portfolio/comparadise1.png new file mode 100644 index 0000000000..cb26fc9e00 Binary files /dev/null and b/src/front/assets/img/Portfolio/comparadise1.png differ diff --git a/src/front/assets/img/Portfolio/comparadise2.png b/src/front/assets/img/Portfolio/comparadise2.png new file mode 100644 index 0000000000..bd328b4d68 Binary files /dev/null and b/src/front/assets/img/Portfolio/comparadise2.png differ diff --git a/src/front/assets/img/Portfolio/elipsis1.png b/src/front/assets/img/Portfolio/elipsis1.png new file mode 100644 index 0000000000..1053ff725c Binary files /dev/null and b/src/front/assets/img/Portfolio/elipsis1.png differ diff --git a/src/front/assets/img/Portfolio/elipsis2.png b/src/front/assets/img/Portfolio/elipsis2.png new file mode 100644 index 0000000000..efd340215c Binary files /dev/null and b/src/front/assets/img/Portfolio/elipsis2.png differ diff --git a/src/front/assets/img/Portfolio/elipsis3.png b/src/front/assets/img/Portfolio/elipsis3.png new file mode 100644 index 0000000000..3ef73a320d Binary files /dev/null and b/src/front/assets/img/Portfolio/elipsis3.png differ diff --git a/src/front/assets/img/Portfolio/elipsis4.png b/src/front/assets/img/Portfolio/elipsis4.png new file mode 100644 index 0000000000..2b9c754d58 Binary files /dev/null and b/src/front/assets/img/Portfolio/elipsis4.png differ diff --git a/src/front/assets/img/Portfolio/mura1.png b/src/front/assets/img/Portfolio/mura1.png new file mode 100644 index 0000000000..a7df342f96 Binary files /dev/null and b/src/front/assets/img/Portfolio/mura1.png differ diff --git a/src/front/assets/img/Portfolio/mura2.png b/src/front/assets/img/Portfolio/mura2.png new file mode 100644 index 0000000000..e3001e922f Binary files /dev/null and b/src/front/assets/img/Portfolio/mura2.png differ diff --git a/src/front/assets/img/Portfolio/mura3.png b/src/front/assets/img/Portfolio/mura3.png new file mode 100644 index 0000000000..dbd460bb8d Binary files /dev/null and b/src/front/assets/img/Portfolio/mura3.png differ diff --git a/src/front/assets/img/Portfolio/mura4.png b/src/front/assets/img/Portfolio/mura4.png new file mode 100644 index 0000000000..fec1aeacf6 Binary files /dev/null and b/src/front/assets/img/Portfolio/mura4.png differ diff --git a/src/front/assets/img/Portfolio/vocaltech1.png b/src/front/assets/img/Portfolio/vocaltech1.png new file mode 100644 index 0000000000..57129ed8db Binary files /dev/null and b/src/front/assets/img/Portfolio/vocaltech1.png differ diff --git a/src/front/assets/img/Portfolio/vocaltech2.png b/src/front/assets/img/Portfolio/vocaltech2.png new file mode 100644 index 0000000000..72e21d9f22 Binary files /dev/null and b/src/front/assets/img/Portfolio/vocaltech2.png differ diff --git a/src/front/assets/img/Portfolio/vocaltech3.png b/src/front/assets/img/Portfolio/vocaltech3.png new file mode 100644 index 0000000000..c7996e9600 Binary files /dev/null and b/src/front/assets/img/Portfolio/vocaltech3.png differ diff --git a/src/front/assets/img/Portfolio/vocaltech4.png b/src/front/assets/img/Portfolio/vocaltech4.png new file mode 100644 index 0000000000..df2575c337 Binary files /dev/null and b/src/front/assets/img/Portfolio/vocaltech4.png differ diff --git a/src/front/assets/img/Testimonials/clientprofile1.jpg b/src/front/assets/img/Testimonials/clientprofile1.jpg new file mode 100644 index 0000000000..733053f981 Binary files /dev/null and b/src/front/assets/img/Testimonials/clientprofile1.jpg differ diff --git a/src/front/assets/img/Testimonials/clientprofile2.png b/src/front/assets/img/Testimonials/clientprofile2.png new file mode 100644 index 0000000000..2b063d65f0 Binary files /dev/null and b/src/front/assets/img/Testimonials/clientprofile2.png differ diff --git a/src/front/assets/img/Testimonials/companylogo1.png b/src/front/assets/img/Testimonials/companylogo1.png new file mode 100644 index 0000000000..1be6f3baac Binary files /dev/null and b/src/front/assets/img/Testimonials/companylogo1.png differ diff --git a/src/front/assets/img/Testimonials/companylogo2.png b/src/front/assets/img/Testimonials/companylogo2.png new file mode 100644 index 0000000000..8f6306b1a4 Binary files /dev/null and b/src/front/assets/img/Testimonials/companylogo2.png differ diff --git a/src/front/components/Projects.jsx b/src/front/components/Projects.jsx new file mode 100644 index 0000000000..73df9aec93 --- /dev/null +++ b/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 ( +
+
+
+

Nuestros proyectos

+

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

+
+
+
+
+ cloudtech portfolio image 1 + cloudtech portfolio image 2 +
+ +
+
+
+ cloudtech portfolio image 4 + cloudtech portfolio image 3 +
+
+
+
+
+ Explora nuestro portafolio +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/front/components/Services/Card.jsx b/src/front/components/Services/Card.jsx index f269b32126..5ce797aa15 100644 --- a/src/front/components/Services/Card.jsx +++ b/src/front/components/Services/Card.jsx @@ -1,6 +1,6 @@ export const Card = ({ title, description }) => { return ( -
+
{title}

{description}

diff --git a/src/front/components/Testimonial/Card.jsx b/src/front/components/Testimonial/Card.jsx index e69de29bb2..c655f04fc9 100644 --- a/src/front/components/Testimonial/Card.jsx +++ b/src/front/components/Testimonial/Card.jsx @@ -0,0 +1,24 @@ +export const Card = ({ name, position, review, profilePicture, logo }) => { + return ( +
+
+

{review}

+
+
+
+
+ CloudTech client profile picture +
+
{name}
+
{position}
+
+
+
+ CloudTech client company logo +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/front/components/Testimonial/Testimonials.jsx b/src/front/components/Testimonial/Testimonials.jsx index e69de29bb2..2ee859339d 100644 --- a/src/front/components/Testimonial/Testimonials.jsx +++ b/src/front/components/Testimonial/Testimonials.jsx @@ -0,0 +1,42 @@ +import { Card } from "./Card"; +import { testimonialsContent } from "../../utils/testimonialsContent"; + +export const Testimonials = () => { + return ( +
+
+
+

Nuestros clientes

+
+
+
+
+
+ {testimonialsContent.map((card, index) => +
+ +
+ )} +
+ + +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/front/index.css b/src/front/index.css index 8328fa3999..dc650427b5 100644 --- a/src/front/index.css +++ b/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); diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx index 719d31f6eb..4b3afb09d4 100644 --- a/src/front/pages/Home.jsx +++ b/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 = () => {
Hero Header Home
- + + ); }; \ No newline at end of file diff --git a/src/front/utils/testimonialsContent.jsx b/src/front/utils/testimonialsContent.jsx index e69de29bb2..4a7089bac6 100644 --- a/src/front/utils/testimonialsContent.jsx +++ b/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 + + } +] \ No newline at end of file