feat: crete structure introduction component and title component

next.config.js

@@ -2,6 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  images: { domains: ['media.discordapp.net'] },
 }
 
 module.exports = nextConfig

pages/index.tsx

@@ -1,5 +1,7 @@
+import Introduction from '~/src/components/Introduction'
+
 const Home = () => {
-  return <h1 className='text-3xl font-bold underline'>HELLO WORLD!</h1>
+  return <Introduction />
 }
 
 export default Home

src/components/Introduction/index.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+
+import Title from '../Title'
+
+const Introduction = () => {
+  return (
+    <section className='px-48 flex justify-center items-center gap-28'>
+      <div>
+        <Title content='Virtual healthcare for you' width='w-[427px]' />
+        <p className='text-gray-500 text-xl mt-6 w-[410px]'>
+          Trafalgar provides progressive, and affordable healthcare, accessible
+          on mobile and online for everyone
+        </p>
+      </div>
+      <Image
+        src='https://media.discordapp.net/attachments/778024116140769331/1137638119047446629/trafalgar-header_illustration_1.png'
+        alt='decorative image'
+        width={700}
+        height={600}
+      />
+    </section>
+  )
+}
+
+export default Introduction

src/components/Title/Title.spec.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react'
+
+import Title from '.'
+
+describe('<Title />', () => {
+  it('should render title correctly', () => {
+    const title = 'Shiryu amigo'
+
+    render(<Title content={title} />)
+
+    expect(screen.getByText(title)).toBeInTheDocument()
+  })
+})

src/components/Title/index.tsx

@@ -0,0 +1,10 @@
+type TitleProps = {
+  content: string
+  width?: string
+}
+
+const Title = ({ content, width }: TitleProps) => {
+  return <h1 className={`text-5xl font-bold ${width}`}>{content}</h1>
+}
+
+export default Title