Merge pull request #16 from gabrielduete/feat/create-section-depoiments

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>

src/components/Depoiments/Arrows/index.tsx

@@ -0,0 +1,42 @@
+import { useContext } from 'react'
+import { DepoimentsContext } from '../context'
+
+import { ArrowBack, ArrowForward } from '@mui/icons-material'
+import { DEPOIMENTS } from '../Depoiments.data'
+
+const Arrows = () => {
+  const { goToStep, nextStep, prevStep, step, firstStep, lastStep } =
+    useContext(DepoimentsContext)
+
+  return (
+    <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>
+  )
+}
+
+export default Arrows

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

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: 0,
+  },
+  {
+    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: 1,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151700802914746428/natalino.jpg',
+    name: 'Gabriel Duete Natalino',
+    jobRole: 'Cosplayer de papai noel',
+    depoiment: 'Ho Ho Ho',
+    id: 2,
+  },
+  {
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1151700151149277235/oscar.png?width=684&height=671',
+    name: 'Gabriel Duete',
+    jobRole: 'Melhor ator',
+    depoiment: 'Como um bom ator, declaro que esse serviço é bom mesmo!',
+    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: 4,
+  },
+]

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')
+})

src/components/Depoiments/context.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+  createContext,
+  useState,
+  ReactNode,
+  Dispatch,
+  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>({
+  step: 0,
+  setStep: () => {},
+  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 = () => {
+    !firstStep && setStep(step - 1)
+  }
+
+  const nextStep = () => {
+    !lastStep && setStep(step + 1)
+  }
+
+  const goToStep = (index: number) => {
+    setStep(index)
+  }
+
+  return (
+    <DepoimentsContext.Provider
+      value={{
+        setStep,
+        step,
+        prevStep,
+        nextStep,
+        goToStep,
+        firstStep,
+        lastStep,
+      }}
+    >
+      {children}
+    </DepoimentsContext.Provider>
+  )
+}

src/components/Depoiments/index.tsx

@@ -0,0 +1,17 @@
+import Arrows from './Arrows'
+import Cards from './Cards'
+
+import { DepoimentsStorage } from './context'
+
+const Depoiments = () => {
+  return (
+    <DepoimentsStorage>
+      <section className='flex flex-col items-center justify-center px-9 mb-56'>
+        <Cards />
+        <Arrows />
+      </section>
+    </DepoimentsStorage>
+  )
+}
+
+export default Depoiments

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 (

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>
         )
       })}

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>