From 1966cbb479ee3bc247bc14e5538f56e317f231ca Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sun, 28 Apr 2024 17:26:31 +0800
Subject: [PATCH 1/2] feat(HomePage): add Header UI

---
 public/img/background.svg |  2 +-
 src/components/Header.tsx | 26 ++++++++++++++++++++++++++
 src/pages/HomePage.tsx    | 16 +++++++++++++++-
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/public/img/background.svg b/public/img/background.svg
index f14bf7b..00d52e6 100644
--- a/public/img/background.svg
+++ b/public/img/background.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="449"><path fill="#F1F5FE" fill-rule="evenodd" d="M0 0h1440v449H191.5C85.737 449 0 363.263 0 257.5V0z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="7200" height="449"><path fill="#F1F5FE" fill-rule="evenodd" d="M0 0h7200v449H191.5C85.737 449 0 363.263 0 257.5V0z"/></svg>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..2c25767
--- /dev/null
+++ b/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>
+	)
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 8b29219..e168869 100644
--- a/src/pages/HomePage.tsx
+++ b/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>
+	)
 }

From c72170f5b02c318197bbf815239d9b05ee0823ca Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sun, 28 Apr 2024 18:21:14 +0800
Subject: [PATCH 2/2] fix(tailwind): background image not shown when deploy

---
 tailwind.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 9d4ee82..3bf5a25 100644
--- a/tailwind.config.js
+++ b/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': {