Merge pull request #15 from gabrielduete/feat/create-footer

pages/index.tsx

@@ -4,6 +4,7 @@ import SectionServices from '~/src/components/SectionServices'
 import SectionProviders from '~/src/components/SectionProviders'
 import SectionApps from '~/src/components/SectionApps'
 import Articles from '~/src/components/Articles'
+import Footer from '~/src/components/Footer'
 
 const Home = () => {
   return (
@@ -14,6 +15,7 @@ const Home = () => {
       <SectionProviders />
       <SectionApps />
       <Articles />
+      <Footer />
     </main>
   )
 }

src/components/Articles/Cards/Cards.data.ts

@@ -4,20 +4,23 @@ export const infosCards = [
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1149875946233528400/image_2.png',
+    alt: 'Illustrative image of a blood test',
     title: 'Disease detection, check up in the laboratory',
     text: 'In this case, the role of the health laboratory is very important to do a disease detection...',
     buttonText,
   },
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1149875945977683978/image_2_1.png',
+    alt: 'Doctors analyzing blood test',
     title: 'Herbal medicines that are safe for consumption',
     text: 'Herbal medicine is very widely used at this time because of its very good for your health...',
     buttonText,
   },
   {
     image:
       'https://media.discordapp.net/attachments/778024116140769331/1149875945679884379/image_3.png',
+    alt: 'Woman in spa doing skin care',
     title: 'Natural care for healthy facial skin',
     text: 'A healthy lifestyle should start from now and also for your skin health. There are some...',
     buttonText,

src/components/Articles/Cards/index.tsx

@@ -6,13 +6,13 @@ import TrendingFlatIcon from '@mui/icons-material/TrendingFlat'
 const Cards = () => {
   return (
     <div className='flex flex-wrap items-center justify-center gap-9 mt-20'>
-      {infosCards.map(({ image, buttonText, text, title }) => {
+      {infosCards.map(({ image, buttonText, text, title, alt }) => {
         return (
           <div
             className='max-w-[320px] h-[480px] flex flex-col rounded-2xl bg-white drop-shadow-xl'
             key={text}
           >
-            <img src={image} alt='a' className='rounded-t-2xl' />
+            <img src={image} alt={alt} className='rounded-t-2xl' />
             <div className='px-8 mt-6'>
               <Title fontSize='text-xl'>{title}</Title>
               <p className='text-gray-500 text-base mt-3'>{text}</p>

src/components/Footer/Footer.data.ts

@@ -0,0 +1,16 @@
+const items = [
+  {
+    title: 'Company',
+    texts: ['About', 'Testimonials', 'Find a doctor', 'Apps'],
+  },
+  {
+    title: 'Region',
+    texts: ['Idonesia', 'Singapore', 'Hongkong', 'Canada'],
+  },
+  {
+    title: 'Help',
+    texts: ['Help center', 'Contact support', 'Instructions', 'How it works'],
+  },
+]
+
+export default items

src/components/Footer/Footer.spec.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react'
+
+import items from './Footer.data'
+
+import Footer from '.'
+
+describe('<Footer />', () => {
+  beforeEach(() => {
+    render(<Footer />)
+  })
+
+  const itemsTexts = items.map(item => item.title)
+
+  it('should section about correctly', () => {
+    expect(
+      screen.getByText(
+        /Trafalgar provides progressive, and affordable healthcare, accessible on mobile and online for everyone/i
+      )
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(/Trafalgar PTY LTD 2020. All rights reserved/i)
+    ).toBeInTheDocument()
+  })
+
+  it.each(itemsTexts)('shold render %s section items correctly', title => {
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/Footer/Item/Item.spec.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+
+import Item from '.'
+
+describe('<Item />', () => {
+  const mockItems = ['Cazuza', 'Titãs', 'Mamonas Assassinas']
+
+  beforeEach(() => {
+    render(<Item title='Raul Seixas' items={mockItems} />)
+  })
+
+  it('should render title correctly', () => {
+    screen.getByText('Raul Seixas')
+  })
+
+  it.each(mockItems)('shold render %s texts correctly', title => {
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/Footer/Item/index.tsx

@@ -0,0 +1,25 @@
+import Title from '../../Title'
+
+type ItemProps = {
+  title: string
+  items: string[]
+}
+
+const Item = ({ title, items }: ItemProps) => {
+  return (
+    <div>
+      <Title>{title}</Title>
+      <div className='mt-6'>
+        {items.map(text => {
+          return (
+            <p className='mt-2' key={text}>
+              {text}
+            </p>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Item

src/components/Footer/index.tsx

@@ -0,0 +1,44 @@
+import Logo from '../Logo'
+import Item from './Item'
+
+import items from './Footer.data'
+
+const Footer = () => {
+  return (
+    <footer
+      className='
+        flex
+        max-lg:flex-col
+        items-center
+        max-lg:items-start
+        justify-center
+        gap-48
+        max-lg:gap-20
+        py-28
+        px-14
+        bg-gradient-to-b
+        from-sky-300
+        to-blue-500
+        text-white
+      '
+    >
+      <div className='max-w-[330px]'>
+        <Logo type='white' />
+        <p className='mt-5'>
+          Trafalgar provides progressive, and affordable healthcare, accessible
+          on mobile and online for everyone
+        </p>
+        <p className='mt-7'>
+          &copy; Trafalgar PTY LTD 2020. All rights reserved
+        </p>
+      </div>
+      <div className='flex max-lg:flex-col gap-40 max-lg:gap-14'>
+        {items.map(({ title, texts }) => {
+          return <Item title={title} items={texts} key={title} />
+        })}
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Logo from './Logo'
+import Logo from '../Logo'
 import Texts from './Texts'
 import SideBar from './Siderbar'
 
@@ -14,7 +14,7 @@ const Header = () => {
     <>
       <SideBar isOpen={isOpen} onClose={() => setIsOpen(false)} />
       <header className='flex justify-between items-center p-4 xl:px-48 xl:py-16'>
-        <Logo />
+        <Logo type='black' />
         <nav className='hidden xl:block'>
           <Texts items={TEXTS_SIDEBAR} />
         </nav>

src/components/Logo/index.tsx

@@ -0,0 +1,28 @@
+type LogoProps = {
+  type: 'black' | 'white'
+}
+
+const Logo = ({ type }: LogoProps) => {
+  const isBlack = type === 'black'
+
+  return (
+    <div className='flex items-center justify-center gap-3 w-40'>
+      <p
+        className={`text-3xl font-semibold p-1 rounded-full w-11 flex justify-center ${
+          isBlack ? 'text-white bg-blue-500' : 'text-sky-300 bg-white'
+        }`}
+      >
+        T
+      </p>
+      <h1
+        className={`text-2xl font-semibold ${
+          isBlack ? 'text-slate-950' : 'text-white'
+        }`}
+      >
+        Trafalgar
+      </h1>
+    </div>
+  )
+}
+
+export default Logo

src/components/Title/index.tsx

@@ -16,7 +16,7 @@ const Title = ({
   linePositionCenter,
 }: TitleProps) => {
   return (
-    <h1 className={`font-bold break-all ${width} ${fontSize}`}>
+    <h1 className={`font-bold break-normal ${width} ${fontSize}`}>
       <span className='flex flex-col gap-6'>
         {children}
         {hasLine && (