feat(HomePage): add Header UI

src/components/Header.tsx

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react'
+import cn from 'utils/cn'
+
+export default function Header(): ReactElement {
+	return (
+		<div className={cn('h-[145px]', 'bg-circles bg-center bg-no-repeat')}>
+			<div
+				className={cn(
+					'-translate-x-px sm:-translate-y-px sm:translate-x-0',
+					'flex h-full flex-col items-center justify-center'
+				)}
+			>
+				<h2 className='text-[20px]/[27px] font-extrabold text-dark-desaturated-blue sm:text-[28px]/[38px]'>
+					Simple, traffic-based pricing
+				</h2>
+				<span
+					className={cn(
+						'pt-2 sm:pt-3',
+						'whitespace-pre-line text-center sm:whitespace-normal',
+						'text-[13px]/[23px] sm:text-[15px]/[20px]'
+					)}
+				>{`Sign-up for our 30-day trial.\nNo credit card required.`}</span>
+			</div>
+		</div>
+	)
+}

src/pages/HomePage.tsx

@@ -1,5 +1,19 @@
+import Header from 'components/Header'
 import type { ReactElement } from 'react'
+import cn from 'utils/cn'
 
 export default function HomePage(): ReactElement {
-	return <div>Home Page</div>
+	return (
+		<div
+			className={cn(
+				'min-h-screen px-6',
+				'bg-background bg-[length:auto_400px] bg-no-repeat sm:bg-very-pale-blue sm:bg-auto',
+				'font-semibold text-grayish-blue'
+			)}
+		>
+			<div className='pt-[57px] sm:pt-[67px]'>
+				<Header />
+			</div>
+		</div>
+	)
 }

tailwind.config.js

@@ -36,8 +36,8 @@ const config = {
 				divider: '#EEF1FA'
 			},
 			backgroundImage: {
-				circles: 'url("img/circles.svg")',
-				background: 'url("img/background.svg")'
+				circles: 'url("/img/circles.svg")',
+				background: 'url("/img/background.svg")'
 			},
 			keyframes: {
 				'accordion-down': {