From 6a4163b914c0e0193ce45ec4f3ed6727ef762904 Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Mon, 18 Sep 2023 01:37:01 -0300
Subject: [PATCH 1/2] feat: create structure

---
 pages/index.tsx                               |  2 +
 src/components/Depoiments/Arrows/index.tsx    | 27 ++++++++++
 src/components/Depoiments/Card/index.tsx      | 45 ++++++++++++++++
 src/components/Depoiments/Depoiments.data.ts  | 43 ++++++++++++++++
 src/components/Depoiments/Depoiments.spec.tsx |  0
 src/components/Depoiments/context.tsx         | 51 +++++++++++++++++++
 src/components/Depoiments/index.tsx           | 22 ++++++++
 src/components/Title/index.tsx                | 19 +++++--
 8 files changed, 204 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Depoiments/Arrows/index.tsx
 create mode 100644 src/components/Depoiments/Card/index.tsx
 create mode 100644 src/components/Depoiments/Depoiments.data.ts
 create mode 100644 src/components/Depoiments/Depoiments.spec.tsx
 create mode 100644 src/components/Depoiments/context.tsx
 create mode 100644 src/components/Depoiments/index.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index 5717122..b622bc6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import SectionProviders from '~/src/components/SectionProviders'
 import SectionApps from '~/src/components/SectionApps'
 import Articles from '~/src/components/Articles'
 import Footer from '~/src/components/Footer'
+import Depoiments from '~/src/components/Depoiments'
 
 const Home = () => {
   return (
@@ -14,6 +15,7 @@ const Home = () => {
       <SectionServices />
       <SectionProviders />
       <SectionApps />
+      <Depoiments />
       <Articles />
       <Footer />
     </main>
diff --git a/src/components/Depoiments/Arrows/index.tsx b/src/components/Depoiments/Arrows/index.tsx
new file mode 100644
index 0000000..f8863d6
--- /dev/null
+++ b/src/components/Depoiments/Arrows/index.tsx
@@ -0,0 +1,27 @@
+import { useContext } from 'react'
+import { DepoimentsContext } from '../context'
+
+import { ArrowBack, ArrowForward } from '@mui/icons-material'
+import { DEPOIMENTS } from '../Depoiments.data'
+
+const Arrows = () => {
+  const { goToStep } = useContext(DepoimentsContext)
+
+  return (
+    <div className='flex items-center gap-4'>
+      <ArrowBack className='cursor-pointer' />
+      {DEPOIMENTS.map(({ id }) => {
+        return (
+          <div
+            className='w-2.5	h-2.5 rounded-full cursor-pointer bg-sky-300 bg-blue-500'
+            onClick={() => goToStep(id)}
+            key={id}
+          />
+        )
+      })}
+      <ArrowForward className='cursor-pointer' />
+    </div>
+  )
+}
+
+export default Arrows
diff --git a/src/components/Depoiments/Card/index.tsx b/src/components/Depoiments/Card/index.tsx
new file mode 100644
index 0000000..dba8359
--- /dev/null
+++ b/src/components/Depoiments/Card/index.tsx
@@ -0,0 +1,45 @@
+import Title from '~/src/components/Title'
+
+type CardProps = {
+  image: string
+  name: string
+  jobRole: string
+  depoiment: string
+}
+
+const Card = ({ image, name, jobRole, depoiment }: CardProps) => {
+  return (
+    <div
+      className='
+        flex
+        flex-col
+        items-center
+        justify-center
+        px-9
+        mb-10'
+    >
+      <div className='bg-gradient-to-b from-sky-300 to-blue-500 p-16 rounded-3xl'>
+        <Title
+          color='white'
+          fontSize='text-4xl'
+          hasLine={true}
+          linePositionCenter={true}
+        >
+          What our customer are saying
+        </Title>
+        <div className='flex mt-20'>
+          <div className='flex'>
+            <img src={image} alt={`Profile pic for ${name}`} />
+            <div className='flex flex-col'>
+              <p>{name}</p>
+              <p>{jobRole}</p>
+            </div>
+          </div>
+          <p>{depoiment}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Card
diff --git a/src/components/Depoiments/Depoiments.data.ts b/src/components/Depoiments/Depoiments.data.ts
new file mode 100644
index 0000000..b521978
--- /dev/null
+++ b/src/components/Depoiments/Depoiments.data.ts
@@ -0,0 +1,43 @@
+export const DEPOIMENTS = [
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151694177978023976/image_1.png',
+    name: 'Edward Newgate',
+    jobRole: 'Founder Circle',
+    depoiment:
+      'Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely',
+    id: 1,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151700614275936326/presidente.png?width=671&height=671',
+    name: 'Gabriel Duete',
+    jobRole: 'Presidente da república',
+    depoiment: 'Eu como presidente, Digo: Esse site é bala demais!',
+    id: 2,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151700802914746428/natalino.jpg',
+    name: 'Gabriel Duete Natalino',
+    jobRole: 'Cosplayer de papai noel',
+    depoiment: 'Ho Ho Ho *risada do papai noel',
+    id: 3,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151700151149277235/oscar.png?width=684&height=671',
+    name: 'Gabriel Duete',
+    jobRole: 'Ganhador do oscar - Melhor ator',
+    depoiment: 'Como um bom ator, declaro que esse serviço é bom mesmo!',
+    id: 4,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151701062760267856/awards.png?width=684&height=671',
+    name: 'Gabriel Duete',
+    jobRole: 'Gamer do ano',
+    depoiment: 'Jogar vídeo game é massa',
+    id: 5,
+  },
+]
diff --git a/src/components/Depoiments/Depoiments.spec.tsx b/src/components/Depoiments/Depoiments.spec.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Depoiments/context.tsx b/src/components/Depoiments/context.tsx
new file mode 100644
index 0000000..36a6bf1
--- /dev/null
+++ b/src/components/Depoiments/context.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+  createContext,
+  useState,
+  ReactNode,
+  Dispatch,
+  SetStateAction,
+} from 'react'
+
+type DepoimentsParams = {
+  step: number
+  setStep: Dispatch<SetStateAction<number>>
+  prevStep: () => void
+  nextStep: () => void
+  goToStep: (index: number) => void
+}
+
+export const DepoimentsContext = createContext<DepoimentsParams>({
+  step: 0,
+  setStep: () => {},
+  prevStep: () => {},
+  nextStep: () => {},
+  goToStep: (index: number) => {},
+})
+
+export const DepoimentsStorage = ({ children }: { children: ReactNode }) => {
+  const [step, setStep] = useState(0)
+
+  const prevStep = () => {
+    setStep(step - 1)
+  }
+
+  const nextStep = () => {
+    setStep(step + 1)
+  }
+
+  const goToStep = (index: number) => {
+    setStep(index)
+  }
+
+  console.log(step)
+
+  return (
+    <DepoimentsContext.Provider
+      value={{ setStep, step, prevStep, nextStep, goToStep }}
+    >
+      {children}
+    </DepoimentsContext.Provider>
+  )
+}
diff --git a/src/components/Depoiments/index.tsx b/src/components/Depoiments/index.tsx
new file mode 100644
index 0000000..3b39ac2
--- /dev/null
+++ b/src/components/Depoiments/index.tsx
@@ -0,0 +1,22 @@
+import Arrows from './Arrows'
+import Card from './Card'
+
+import { DepoimentsStorage } from './context'
+
+const Depoiments = () => {
+  return (
+    <DepoimentsStorage>
+      <section className='flex flex-col items-center justify-center px-9 mb-56'>
+        <Card
+          image='image'
+          depoiment='depoiments'
+          jobRole='jobRole'
+          name='name'
+        />
+        <Arrows />
+      </section>
+    </DepoimentsStorage>
+  )
+}
+
+export default Depoiments
diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx
index c29778d..8e7daa6 100644
--- a/src/components/Title/index.tsx
+++ b/src/components/Title/index.tsx
@@ -1,29 +1,38 @@
 import React from 'react'
 
 type TitleProps = {
-  children: string | React.ReactElement
   fontSize?: string
+  color?: 'black' | 'white'
   width?: string
   hasLine?: boolean
   linePositionCenter?: boolean
+  children: string | React.ReactElement
 }
 
 const Title = ({
-  children,
   fontSize,
+  color = 'black',
   width,
   hasLine,
   linePositionCenter,
+  children,
 }: TitleProps) => {
+  const isBlack = color === 'black'
+
   return (
-    <h1 className={`font-bold break-normal ${width} ${fontSize}`}>
+    <h1
+      className={`font-bold break-normal ${width} ${fontSize} ${
+        isBlack ? 'text-black' : 'text-white'
+      }`}
+    >
       <span className='flex flex-col gap-6'>
         {children}
         {hasLine && (
           <span
             className={`
-            ${linePositionCenter ? 'self-center' : 'self-start'} 
-            block w-14 h-0.5 bg-black`}
+            ${linePositionCenter ? 'self-center' : 'self-start'}
+            ${isBlack ? 'bg-black' : 'bg-white'}
+            block w-14 h-0.5`}
           />
         )}
       </span>

From 603490bebd1738260273564227615361742c3084 Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Mon, 18 Sep 2023 20:15:07 -0300
Subject: [PATCH 2/2] feat: create component

---
 src/components/Depoiments/Arrows/index.tsx    | 41 ++++++++++-----
 src/components/Depoiments/Card/index.tsx      | 45 ----------------
 src/components/Depoiments/Cards/index.tsx     | 51 +++++++++++++++++++
 src/components/Depoiments/Depoiments.data.ts  | 16 +++---
 src/components/Depoiments/Depoiments.spec.tsx | 20 ++++++++
 src/components/Depoiments/context.tsx         | 25 +++++++--
 src/components/Depoiments/index.tsx           |  9 +---
 src/components/Footer/Item/index.tsx          |  2 +-
 .../SectionServices/Cards/Cards.tsx           |  4 +-
 9 files changed, 133 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/Depoiments/Card/index.tsx
 create mode 100644 src/components/Depoiments/Cards/index.tsx

diff --git a/src/components/Depoiments/Arrows/index.tsx b/src/components/Depoiments/Arrows/index.tsx
index f8863d6..d2480f4 100644
--- a/src/components/Depoiments/Arrows/index.tsx
+++ b/src/components/Depoiments/Arrows/index.tsx
@@ -5,21 +5,36 @@ import { ArrowBack, ArrowForward } from '@mui/icons-material'
 import { DEPOIMENTS } from '../Depoiments.data'
 
 const Arrows = () => {
-  const { goToStep } = useContext(DepoimentsContext)
+  const { goToStep, nextStep, prevStep, step, firstStep, lastStep } =
+    useContext(DepoimentsContext)
 
   return (
-    <div className='flex items-center gap-4'>
-      <ArrowBack className='cursor-pointer' />
-      {DEPOIMENTS.map(({ id }) => {
-        return (
-          <div
-            className='w-2.5	h-2.5 rounded-full cursor-pointer bg-sky-300 bg-blue-500'
-            onClick={() => goToStep(id)}
-            key={id}
-          />
-        )
-      })}
-      <ArrowForward className='cursor-pointer' />
+    <div className='flex items-center gap-20 max-sm:gap-12'>
+      <ArrowBack
+        className={`cursor-pointer ${
+          firstStep ? 'text-sky-300' : 'text-blue-500'
+        }`}
+        onClick={() => prevStep()}
+      />
+      <div className='flex gap-4'>
+        {DEPOIMENTS.map(({ id }) => {
+          return (
+            <div
+              className={`w-2.5	h-2.5 rounded-full cursor-pointer ${
+                id === step ? 'bg-blue-500' : 'bg-sky-300'
+              }`}
+              onClick={() => goToStep(id)}
+              key={id}
+            />
+          )
+        })}
+      </div>
+      <ArrowForward
+        className={`cursor-pointer ${
+          lastStep ? 'text-sky-300' : 'text-blue-500'
+        }`}
+        onClick={() => nextStep()}
+      />
     </div>
   )
 }
diff --git a/src/components/Depoiments/Card/index.tsx b/src/components/Depoiments/Card/index.tsx
deleted file mode 100644
index dba8359..0000000
--- a/src/components/Depoiments/Card/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import Title from '~/src/components/Title'
-
-type CardProps = {
-  image: string
-  name: string
-  jobRole: string
-  depoiment: string
-}
-
-const Card = ({ image, name, jobRole, depoiment }: CardProps) => {
-  return (
-    <div
-      className='
-        flex
-        flex-col
-        items-center
-        justify-center
-        px-9
-        mb-10'
-    >
-      <div className='bg-gradient-to-b from-sky-300 to-blue-500 p-16 rounded-3xl'>
-        <Title
-          color='white'
-          fontSize='text-4xl'
-          hasLine={true}
-          linePositionCenter={true}
-        >
-          What our customer are saying
-        </Title>
-        <div className='flex mt-20'>
-          <div className='flex'>
-            <img src={image} alt={`Profile pic for ${name}`} />
-            <div className='flex flex-col'>
-              <p>{name}</p>
-              <p>{jobRole}</p>
-            </div>
-          </div>
-          <p>{depoiment}</p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Card
diff --git a/src/components/Depoiments/Cards/index.tsx b/src/components/Depoiments/Cards/index.tsx
new file mode 100644
index 0000000..34da22f
--- /dev/null
+++ b/src/components/Depoiments/Cards/index.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable @next/next/no-img-element */
+import { useContext } from 'react'
+import { DepoimentsContext } from '../context'
+import Title from '../../Title'
+import { DEPOIMENTS } from '../Depoiments.data'
+
+const Card = () => {
+  const { step } = useContext(DepoimentsContext)
+  const { image, name, jobRole, depoiment } = DEPOIMENTS[step]
+
+  return (
+    <div
+      className='
+        flex
+        flex-col
+        items-center
+        justify-center
+        mb-10
+        text-white
+        transition delay-150 duration-300 ease-in-out
+      '
+    >
+      <div className='flex flex-col items-center justify-center bg-gradient-to-b from-sky-300 to-blue-500 p-16 rounded-3xl '>
+        <Title
+          color='white'
+          fontSize='text-4xl'
+          hasLine={true}
+          linePositionCenter={true}
+        >
+          What our customer are saying
+        </Title>
+        <div className='flex max-md:flex-col items-center justify-center mt-16 gap-24 max-sm:gap-16'>
+          <div className='flex max-sm:flex-col items-center justify-center gap-7'>
+            <img
+              src={image}
+              alt={`Profile pic for ${name}`}
+              className='w-32 rounded-full border-solid border-2 border-white'
+            />
+            <div className='flex flex-col justify-center max-sm:items-center w-44 m-sm:m-w-44'>
+              <Title color='white'>{name}</Title>
+              <p className='font-thin'>{jobRole}</p>
+            </div>
+          </div>
+          <p className='sm:w-[318px] m-w-[318px]'>&quot;{depoiment}&quot;</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Card
diff --git a/src/components/Depoiments/Depoiments.data.ts b/src/components/Depoiments/Depoiments.data.ts
index b521978..3206cb7 100644
--- a/src/components/Depoiments/Depoiments.data.ts
+++ b/src/components/Depoiments/Depoiments.data.ts
@@ -6,7 +6,7 @@ export const DEPOIMENTS = [
     jobRole: 'Founder Circle',
     depoiment:
       'Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely',
-    id: 1,
+    id: 0,
   },
   {
     image:
@@ -14,30 +14,30 @@ export const DEPOIMENTS = [
     name: 'Gabriel Duete',
     jobRole: 'Presidente da república',
     depoiment: 'Eu como presidente, Digo: Esse site é bala demais!',
-    id: 2,
+    id: 1,
   },
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1151700802914746428/natalino.jpg',
     name: 'Gabriel Duete Natalino',
     jobRole: 'Cosplayer de papai noel',
-    depoiment: 'Ho Ho Ho *risada do papai noel',
-    id: 3,
+    depoiment: 'Ho Ho Ho',
+    id: 2,
   },
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1151700151149277235/oscar.png?width=684&height=671',
     name: 'Gabriel Duete',
-    jobRole: 'Ganhador do oscar - Melhor ator',
+    jobRole: 'Melhor ator',
     depoiment: 'Como um bom ator, declaro que esse serviço é bom mesmo!',
-    id: 4,
+    id: 3,
   },
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1151701062760267856/awards.png?width=684&height=671',
     name: 'Gabriel Duete',
     jobRole: 'Gamer do ano',
-    depoiment: 'Jogar vídeo game é massa',
-    id: 5,
+    depoiment: 'Jogar vídeo game é massa!',
+    id: 4,
   },
 ]
diff --git a/src/components/Depoiments/Depoiments.spec.tsx b/src/components/Depoiments/Depoiments.spec.tsx
index e69de29..95d9f4c 100644
--- a/src/components/Depoiments/Depoiments.spec.tsx
+++ b/src/components/Depoiments/Depoiments.spec.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+
+import Depoiments from '.'
+import { DepoimentsStorage } from './context'
+
+describe('<Depoiments />', () => {
+  beforeEach(() => {
+    render(
+      <DepoimentsStorage>
+        <Depoiments />
+      </DepoimentsStorage>
+    )
+  })
+
+  it('should render title correctly', () => {
+    screen.getByText('What our customer are saying')
+  })
+
+  it.todo('test slide')
+})
diff --git a/src/components/Depoiments/context.tsx b/src/components/Depoiments/context.tsx
index 36a6bf1..32392c9 100644
--- a/src/components/Depoiments/context.tsx
+++ b/src/components/Depoiments/context.tsx
@@ -8,12 +8,16 @@ import {
   SetStateAction,
 } from 'react'
 
+import { DEPOIMENTS } from './Depoiments.data'
+
 type DepoimentsParams = {
   step: number
   setStep: Dispatch<SetStateAction<number>>
   prevStep: () => void
   nextStep: () => void
   goToStep: (index: number) => void
+  firstStep: boolean
+  lastStep: boolean
 }
 
 export const DepoimentsContext = createContext<DepoimentsParams>({
@@ -22,28 +26,39 @@ export const DepoimentsContext = createContext<DepoimentsParams>({
   prevStep: () => {},
   nextStep: () => {},
   goToStep: (index: number) => {},
+  firstStep: true,
+  lastStep: false,
 })
 
 export const DepoimentsStorage = ({ children }: { children: ReactNode }) => {
   const [step, setStep] = useState(0)
 
+  const firstStep = step === 0
+  const lastStep = step + 1 > DEPOIMENTS.length - 1
+
   const prevStep = () => {
-    setStep(step - 1)
+    !firstStep && setStep(step - 1)
   }
 
   const nextStep = () => {
-    setStep(step + 1)
+    !lastStep && setStep(step + 1)
   }
 
   const goToStep = (index: number) => {
     setStep(index)
   }
 
-  console.log(step)
-
   return (
     <DepoimentsContext.Provider
-      value={{ setStep, step, prevStep, nextStep, goToStep }}
+      value={{
+        setStep,
+        step,
+        prevStep,
+        nextStep,
+        goToStep,
+        firstStep,
+        lastStep,
+      }}
     >
       {children}
     </DepoimentsContext.Provider>
diff --git a/src/components/Depoiments/index.tsx b/src/components/Depoiments/index.tsx
index 3b39ac2..f791a5b 100644
--- a/src/components/Depoiments/index.tsx
+++ b/src/components/Depoiments/index.tsx
@@ -1,5 +1,5 @@
 import Arrows from './Arrows'
-import Card from './Card'
+import Cards from './Cards'
 
 import { DepoimentsStorage } from './context'
 
@@ -7,12 +7,7 @@ const Depoiments = () => {
   return (
     <DepoimentsStorage>
       <section className='flex flex-col items-center justify-center px-9 mb-56'>
-        <Card
-          image='image'
-          depoiment='depoiments'
-          jobRole='jobRole'
-          name='name'
-        />
+        <Cards />
         <Arrows />
       </section>
     </DepoimentsStorage>
diff --git a/src/components/Footer/Item/index.tsx b/src/components/Footer/Item/index.tsx
index 1312132..d144ccc 100644
--- a/src/components/Footer/Item/index.tsx
+++ b/src/components/Footer/Item/index.tsx
@@ -8,7 +8,7 @@ type ItemProps = {
 const Item = ({ title, items }: ItemProps) => {
   return (
     <div>
-      <Title>{title}</Title>
+      <Title color='white'>{title}</Title>
       <div className='mt-6'>
         {items.map(text => {
           return (
diff --git a/src/components/SectionServices/Cards/Cards.tsx b/src/components/SectionServices/Cards/Cards.tsx
index 624c1aa..1313cc5 100644
--- a/src/components/SectionServices/Cards/Cards.tsx
+++ b/src/components/SectionServices/Cards/Cards.tsx
@@ -23,7 +23,9 @@ const Cards = () => {
               />
             </div>
             <Title fontSize='text-2xl'>{title}</Title>
-            <p className='w-64 mt-3 text-gray-500'>{subtitle}</p>
+            <p className='max-sm:max-w-64 sm:w-64 mt-3 text-gray-500'>
+              {subtitle}
+            </p>
           </div>
         )
       })}