feat: sections providers and mobile apps

pages/index.tsx

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

src/components/Button/index.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react'
+
 import { conditionsStyle } from './Button.data'
 
 type ButtonProps = {
-  content: string
+  content: string | ReactElement
   style: 'filled' | 'outlined'
   bgColor?: 'bg-blue-500'
   textColor: 'text-white' | 'text-blue-500'

src/components/SectionApps/SectionApps.spec.tsx

@@ -0,0 +1,37 @@
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+
+import SectionApps from '.'
+
+describe('<SectionApps />', () => {
+  beforeEach(() => {
+    render(<SectionApps />)
+  })
+
+  it('should render texts and buttons correctly', () => {
+    expect(screen.getByText(/Download our mobile apps/i)).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely'
+      )
+    ).toBeInTheDocument()
+    expect(screen.getByText(/Download /i)).toBeInTheDocument()
+  })
+
+  it('should render image in desktop correctly', () => {
+    expect(
+      screen.getByAltText('Decorative healthcare apps')
+    ).toBeInTheDocument()
+  })
+
+  it('should dont render image in mobile', () => {
+    window.innerWidth = 500
+
+    fireEvent(window, new Event('resize'))
+
+    waitFor(() => {
+      expect(
+        screen.getByAltText('Decorative healthcare apps')
+      ).not.toBeInTheDocument()
+    })
+  })
+})

src/components/SectionApps/index.tsx

@@ -0,0 +1,44 @@
+import Button from '../Button'
+import Title from '../Title'
+
+import Image from 'next/image'
+
+import DownloadIcon from '@mui/icons-material/Download'
+
+const SectionApps = () => {
+  return (
+    <section className='flex gap-36 items-center justify-center px-9 mb-56'>
+      <div>
+        <Title hasLine={true} fontSize='text-4xl' width='max-w-[250px]'>
+          Download our mobile apps
+        </Title>
+        <p className='text-gray-500 text-xl mt-8 mb-11 max-w-[400px]'>
+          Our dedicated patient engagement app and web portal allow you to
+          access information instantaneously (no tedeous form, long calls, or
+          administrative hassle) and securely
+        </p>
+        <Button
+          style='outlined'
+          content={
+            <span className='flex gap-3 items-end'>
+              Download <DownloadIcon />
+            </span>
+          }
+          padding='px-11'
+          textColor='text-blue-500'
+        />
+      </div>
+      <div className='hidden lg:block'>
+        <Image
+          src='https://media.discordapp.net/attachments/778024116140769331/1142600605924335797/mobile-apps.png'
+          alt='Decorative healthcare apps'
+          width={650}
+          height={480}
+          quality={100}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default SectionApps

src/components/SectionProviders/SectioonProviders.spec.tsx

@@ -0,0 +1,39 @@
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+
+import SectionProviders from '.'
+
+describe('<SectionProviders />', () => {
+  beforeEach(() => {
+    render(<SectionProviders />)
+  })
+
+  it('should render texts and buttons correctly', () => {
+    expect(
+      screen.getByText(/Leading healthcare providers/i)
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        /Trafalgar provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it’s not just work. We take pride in the solutions we deliver/i
+      )
+    ).toBeInTheDocument()
+    expect(screen.getByText(/Learn more/i)).toBeInTheDocument()
+  })
+
+  it('should render image in desktop correctly', () => {
+    expect(
+      screen.getByAltText('Decorative healthcare providers')
+    ).toBeInTheDocument()
+  })
+
+  it('should dont render image in mobile', () => {
+    window.innerWidth = 500
+
+    fireEvent(window, new Event('resize'))
+
+    waitFor(() => {
+      expect(
+        screen.getByAltText('Decorative healthcare providers')
+      ).not.toBeInTheDocument()
+    })
+  })
+})

src/components/SectionProviders/index.tsx

@@ -0,0 +1,38 @@
+import Button from '../Button'
+import Title from '../Title'
+
+import Image from 'next/image'
+
+const SectionProviders = () => {
+  return (
+    <section className='flex gap-36 items-center justify-center px-9 mb-56'>
+      <div className='hidden lg:block'>
+        <Image
+          src='https://media.discordapp.net/attachments/778024116140769331/1142600606234718321/providers.png'
+          alt='Decorative healthcare providers'
+          width={650}
+          height={480}
+          quality={100}
+        />
+      </div>
+      <div>
+        <Title hasLine={true} fontSize='text-4xl' width='max-w-[330px]'>
+          Leading healthcare providers
+        </Title>
+        <p className='text-gray-500 text-xl mt-8 mb-9 max-w-[440px]'>
+          Trafalgar provides progressive, and affordable healthcare, accessible
+          on mobile and online for everyone. To us, it’s not just work. We take
+          pride in the solutions we deliver
+        </p>
+        <Button
+          style='outlined'
+          content='Learn more'
+          padding='px-11'
+          textColor='text-blue-500'
+        />
+      </div>
+    </section>
+  )
+}
+
+export default SectionProviders

src/components/SectionServices/index.tsx

@@ -6,16 +6,16 @@ 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}>
+      <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
         Our Services
       </Title>
-      <p className='text-gray-500 text-xl text-center mt-6 max-w-[1050px] '>
+      <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 '>
+      <div className='flex flex-wrap items-center justify-center gap-9 mt-20'>
         {CARDS.map(({ title, subtitle, image }) => {
           return (
             <div

src/components/Title/index.tsx

@@ -5,14 +5,27 @@ type TitleProps = {
   fontSize?: string
   width?: string
   hasLine?: boolean
+  linePositionCenter?: boolean
 }
 
-const Title = ({ children, fontSize, width, hasLine }: TitleProps) => {
+const Title = ({
+  children,
+  fontSize,
+  width,
+  hasLine,
+  linePositionCenter,
+}: 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' />}
+        {hasLine && (
+          <span
+            className={`
+            ${linePositionCenter ? 'self-center' : 'self-start'} 
+            block w-14 h-0.5 bg-black`}
+          />
+        )}
       </span>
     </h1>
   )