Corrige erros de responsividade e altera o tamanho da ClientSection

KaiqueNoronha · KaiqueNoronha · commit 22b32a73be36 · 2024-10-25T11:24:27.000-03:00
diff --git a/src/components/Clients/clients.tsx b/src/components/Clients/clients.tsx
@@ -1,5 +1,7 @@
 'use client'
 import { Trans } from 'react-i18next';
+import styled from 'styled-components';
+import {Styles} from '@/styles';
 import { Carousel } from '../Carousel';
 import {
   ComponentContainer,
@@ -21,15 +23,25 @@ import scouthubLogo from '../../../public/clients/scouthubLogo.svg';
 import workStory from '../../../public/clients/workStory.svg';
 import synergyLogo from '../../../public/clients/synergyLogo.svg';
 
+const ResponsiveImage = styled(Image) `
+width: 200px;
+height: 200px;
+
+@media (${Styles.devices.tablet}) {
+    width: 150px;
+    height: 150px
+  } 
+`;
+
 export const Clients = () => {
   const clients: Record<string, JSX.Element> = {
-    client1: <Image src={novoLogo} alt='client1' width={200} height={200} />,
-    client2: <Image src={autonomyLogo} alt='client2' width={200} height={200} />,
-    client3: <Image src={ethicsNetLogo} alt='client3' width={200} height={200} />,
-    client4: <Image src={falconsLogo} alt='client4' width={200} height={200} />,
-    client5: <Image src={scouthubLogo} alt='client5' width={200} height={200} />,
-    client6: <Image src={workStory} alt='client6' width={200} height={200} />,
-    client7: <Image src={synergyLogo} alt='client7' width={200} height={200} />,
+    client1: <ResponsiveImage src={novoLogo} alt="client1" />,
+    client2: <ResponsiveImage src={autonomyLogo} alt="client2" />,
+    client3: <ResponsiveImage src={ethicsNetLogo} alt="client3" />,
+    client4: <ResponsiveImage src={falconsLogo} alt="client4" />,
+    client5: <ResponsiveImage src={scouthubLogo} alt="client5" />,
+    client6: <ResponsiveImage src={workStory} alt="client6" />,
+    client7: <ResponsiveImage src={synergyLogo} alt="client7" />,
   };
 
 
diff --git a/src/components/Clients/styles.tsx b/src/components/Clients/styles.tsx
@@ -9,6 +9,9 @@ export const ComponentContainer = styled.div`
   align-items: center;
   padding-top: 8rem;
   background-color: ${({ theme }) => theme.colors.gray};
+  @media (${Styles.devices.tablet}) {
+    padding-top: 4rem;
+  }
 `;
 
 export const TitleContainer = styled.div`
@@ -34,7 +37,6 @@ export const ClientsContainer = styled.div`
   max-width: 1200px;
   padding: 48px 101px 25px 48px;
   gap: 59px;
-
   @media (${Styles.devices.tablet}) {
     display: none;
   }
@@ -43,7 +45,6 @@ export const ClientsContainer = styled.div`
 export const ClientsCarouselContainer = styled.div`
   padding: 48px 101px 101px 48px;
   display: none;
-
   @media (${Styles.devices.tablet}) {
     display: block;
   }
@@ -54,4 +55,8 @@ export const ClientCard = styled.div`
   height: 200px;
   border-radius: 50%;
   background-color: #D6D6D6;
+  @media (${Styles.devices.tablet}) {
+    width: 150px;
+    height: 150px
+  } 
 `;
diff --git a/src/components/Form/styles.tsx b/src/components/Form/styles.tsx
@@ -14,6 +14,9 @@ export const Container = styled.div`
   padding-top: 8rem; // 128px
   padding-bottom: 2rem; // 10px
   background: ${({ theme }) => theme.colors.white};
+  @media (${Styles.devices.tablet}) {
+    padding-top: 0rem;
+  }
 `;
 
 export const FormContainer = styled.div`
diff --git a/src/components/HeroSection/styles.tsx b/src/components/HeroSection/styles.tsx
@@ -242,6 +242,7 @@ export const CardsContainer = styled(motion.div)`
     flex-direction: column;
     align-items: center;
     top: 0;
+    padding-bottom: 40px;
   }
 `;
 

Original file line number	Diff line number	Diff line change
@@ -242,6 +242,7 @@ export const CardsContainer = styled(motion.div)`
`242`	`242`	`flex-direction: column;`
`243`	`243`	`align-items: center;`
`244`	`244`	`top: 0;`
	`245`	`+ padding-bottom: 40px;`
`245`	`246`	`}`
`246`	`247`	`;
`247`	`248`