Merge pull request #12 from gabrielduete/feat/create-section-service

pages/index.tsx

@@ -1,11 +1,13 @@
 import Introduction from '~/src/components/Introduction'
 import Header from '~/src/components/Header'
+import SectionServices from '~/src/components/SectionServices'
 
 const Home = () => {
   return (
     <main>
       <Header />
       <Introduction />
+      <SectionServices />
     </main>
   )
 }

src/components/Introduction/index.tsx

@@ -7,7 +7,9 @@ const Introduction = () => {
   return (
     <section className='max-md:px-4 px-48 flex justify-center items-center gap-28'>
       <div>
-        <Title content='Virtual healthcare for you' width='max-w-[427px]' />
+        <Title fontSize='text-5xl' width='max-w-[427px]'>
+          Virtual healthcare for you
+        </Title>
         <p className='text-gray-500 text-xl mt-6 mb-11 max-w-[410px]'>
           Trafalgar provides progressive, and affordable healthcare, accessible
           on mobile and online for everyone

src/components/SectionServices/SectionServices.data.ts

@@ -0,0 +1,43 @@
+export const CARDS = [
+  {
+    title: 'Search doctor',
+    subtitle:
+      'Choose your doctor from thousands of specialist, general, and trusted hospitals',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892291909390346/img-search.png',
+  },
+  {
+    title: 'Online pharmacy',
+    subtitle:
+      'Buy  your medicines with our mobile application with a simple delivery system',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892384364441700/img-pharmacy.png',
+  },
+  {
+    title: 'Consultation',
+    subtitle:
+      'Free consultation with our trusted doctors and get the best recomendations ',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892245730119710/img-consultation.png',
+  },
+  {
+    title: 'Details info',
+    subtitle:
+      'Free consultation with our trusted doctors and get the best recomendations',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892496864071780/img-details.png',
+  },
+  {
+    title: 'Emergency care',
+    subtitle:
+      'You can get 24/7 urgent care for yourself or your children and your lovely family',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892465088020511/img-emergency.png',
+  },
+  {
+    title: 'Tracking',
+    subtitle: 'Track and save your medical history and health data ',
+    image:
+      'https://media.discordapp.net/attachments/778024116140769331/1141892429650350081/img-tracking.png',
+  },
+]

src/components/SectionServices/SectionServices.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+
+import { CARDS } from './SectionServices.data'
+
+import SectionServices from '.'
+
+describe('<SectionServices />', () => {
+  beforeEach(() => {
+    render(<SectionServices />)
+  })
+
+  const items = CARDS.map(card => card.title)
+
+  it('should render title, subtitle and button correctly', () => {
+    expect(screen.getByText(/Our services/i)).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        /We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health/i
+      )
+    ).toBeInTheDocument()
+    expect(screen.getByText(/Learn more/i)).toBeInTheDocument()
+  })
+
+  it.each(items)('shold render %s title card correctly', title => {
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/SectionServices/index.tsx

@@ -0,0 +1,56 @@
+import Title from '../Title'
+import { CARDS } from './SectionServices.data'
+import Image from 'next/image'
+import Button from '../Button'
+
+const SectionServices = () => {
+  return (
+    <section className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'>
+      <Title fontSize='text-3xl' hasLine={true}>
+        Our Services
+      </Title>
+      <p className='text-gray-500 text-xl text-center mt-6 max-w-[1050px] '>
+        We provide to you the best choiches for you. Adjust it to your health
+        needs and make sure your undergo treatment with our highly qualified
+        doctors you can consult with us which type of service is suitable for
+        your health
+      </p>
+      <div className='flex flex-wrap items-center justify-center gap-9 mt-20 '>
+        {CARDS.map(({ title, subtitle, image }) => {
+          return (
+            <div
+              key={title}
+              className='flex flex-col justify-center p-10 pr-16 max-w-full rounded-2xl bg-white drop-shadow-xl h-[350px]'
+            >
+              <div className='mb-6'>
+                <Image
+                  src={image}
+                  alt={image}
+                  width={
+                    title === CARDS[0].title || title === CARDS[4].title
+                      ? 85
+                      : 70
+                  }
+                  height={title === CARDS[4].title ? 70 : 93}
+                  quality={100}
+                />
+              </div>
+              <Title fontSize='text-2xl'>{title}</Title>
+              <p className='w-64 mt-3 text-gray-500'>{subtitle}</p>
+            </div>
+          )
+        })}
+      </div>
+      <div className='mt-20'>
+        <Button
+          style='outlined'
+          content='Learn more'
+          padding='px-9'
+          textColor='text-blue-500'
+        />
+      </div>
+    </section>
+  )
+}
+
+export default SectionServices

src/components/Title/Title.spec.tsx

@@ -6,7 +6,7 @@ describe('<Title />', () => {
   it('should render title correctly', () => {
     const title = 'Shiryu amigo'
 
-    render(<Title content={title} />)
+    render(<Title>{title}</Title>)
 
     expect(screen.getByText(title)).toBeInTheDocument()
   })

src/components/Title/index.tsx

@@ -1,10 +1,21 @@
+import React from 'react'
+
 type TitleProps = {
-  content: string
+  children: string | React.ReactElement
+  fontSize?: string
   width?: string
+  hasLine?: boolean
 }
 
-const Title = ({ content, width }: TitleProps) => {
-  return <h1 className={`text-5xl font-bold break-all ${width}`}>{content}</h1>
+const Title = ({ children, fontSize, width, hasLine }: TitleProps) => {
+  return (
+    <h1 className={`font-bold break-all ${width} ${fontSize}`}>
+      <span className='flex flex-col gap-6'>
+        {children}
+        {hasLine && <span className='self-center block w-14 h-0.5 bg-black' />}
+      </span>
+    </h1>
+  )
 }
 
 export default Title