Update Testimonials component

dedaldino3d · Nov 8, 2020 · e8a60b3 · e8a60b3
1 parent cbf2faa
commit e8a60b3
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 10 deletions.
diff --git a/src/components/Testimonials/index.js b/src/components/Testimonials/index.js
@@ -1,12 +1,83 @@
-// import React from "react";
-// import { Carousel } from 'antd'
+import React from "react";
 
-// import { Testimonial } from "./styles";
+import ScrollAnimation from "../ScrollAnimation";
+import {
+  Container,
+  Testimonial,
+  AvatarMonial,
+  HeaderMonial,
+  Text,
+  Header,
+} from "./styles";
 
-// export const Testimonials = (_props: any) => {
-//   return <Carousel autoplay>
-//     <Testimonial></Testimonial>
-//   </Carousel>;
-// };
+export const Testimonials = (props) => {
+  return (
+    <Container>
+      <Header>
+        AJUDAMOS EMPRESAS COMO A SUA A ORGANIZAR A CONTABILIDADE TODOS OS DIAS
+      </Header>
+      <ScrollAnimation
+        animateIn="animate__zoomInUp"
+        animateOut="animate__zoomOutDown"
+      >
+        <Testimonial>
+          <AvatarMonial src={require("../../images/sky-logo.jpg")} />
+          <HeaderMonial>Skyline Tecnologies</HeaderMonial>
+          <Text>
+            A parceria com a Valiant foi uma das melhores decisões que já
+            tomamos. Com o financiamento que obtivemos, agora temos
+            flexibilidade para fazer a empresa crescer exatamente da maneira que
+            desejamos.
+          </Text>
+        </Testimonial>
+      </ScrollAnimation>
+      <ScrollAnimation
+        animateIn="animate__zoomInUp"
+        animateOut="animate__zoomOutDown"
+      >
+        <Testimonial>
+          <AvatarMonial src={require("../../images/renee_lowe.jpg")} />
+          <HeaderMonial>Renee Lowe</HeaderMonial>
+          <Text>
+            A parceria com a Valiant foi uma das melhores decisões que já
+            tomamos. Com o financiamento que obtivemos, agora temos
+            flexibilidade para fazer a empresa crescer exatamente da maneira que
+            desejamos.
+          </Text>
+        </Testimonial>
+      </ScrollAnimation>
+      <ScrollAnimation
+        animateIn="animate__zoomInUp"
+        animateOut="animate__zoomOutDown"
+      >
+        <Testimonial>
+          <AvatarMonial src={require("../../images/3D.jpg")} />
+          <HeaderMonial>Big Programmer</HeaderMonial>
+          <Text>
+            A parceria com a Valiant foi uma das melhores decisões que já
+            tomamos. Com o financiamento que obtivemos, agora temos
+            flexibilidade para fazer a empresa crescer exatamente da maneira que
+            desejamos.
+          </Text>
+        </Testimonial>
+      </ScrollAnimation>
+      <ScrollAnimation
+        animateIn="animate__zoomInUp"
+        animateOut="animate__zoomOutDown"
+      >
+        <Testimonial>
+          <AvatarMonial src={require("../../images/jonathan_rowley.jpg")} />
+          <HeaderMonial>Jonathan Rowley</HeaderMonial>
+          <Text>
+            A parceria com a Valiant foi uma das melhores decisões que já
+            tomamos. Com o financiamento que obtivemos, agora temos
+            flexibilidade para fazer a empresa crescer exatamente da maneira que
+            desejamos.
+          </Text>
+        </Testimonial>
+      </ScrollAnimation>
+    </Container>
+  );
+};
 
-// export default Testimonials;
+export default Testimonials;
diff --git a/src/components/Testimonials/styles.js b/src/components/Testimonials/styles.js
@@ -1,3 +1,68 @@
 import styled from "styled-components";
 
-export const Testimonial = styled.div``;
+export const Container = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  max-width: 100%;
+  min-height: 600px;
+  padding: 20px;
+  background: var(--blue-bolder);
+  & > div:last-of-type {
+    margin-right: 0;
+  }
+`;
+
+export const Header = styled.div`
+  font-size: 1.4em;
+  font-weight: 600;
+  word-spacing: 1.5;
+  line-height: 1.4;
+  width: 100%;
+  color: var(--white);
+  text-align: center;
+`;
+
+export const Testimonial = styled.div`
+  position: relative;
+  box-shadow: var(--bs-post);
+  border-radius: 8px;
+  padding: 40px;
+  text-align: center;
+  color: var(--blue-bold);
+  background: var(--white);
+  margin-bottom: 10px;
+  margin-right: 10px;
+  flex: 1 1 200px;
+  max-height: 400px;
+  max-width: 300px;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const AvatarMonial = styled.img`
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  border-radius: 50%;
+  top: -40px;
+  z-index: 10px;
+`;
+
+export const HeaderMonial = styled.header`
+  background: var(--black);
+  border-radius: 8px;
+  height: 60px;
+  color: var(--white-100);
+  width: calc(100% - 50px);
+  padding: 25px;
+`;
+
+export const Text = styled.p`
+  font-style: italic;
+  font-family: var(--font-streched);
+  word-wrap: break-word;
+`;