From 7ccd0884afaeaea2809d6ac3a3ef61cb71dcb1c5 Mon Sep 17 00:00:00 2001
From: lee-ji-hong <zhffktkdlekghksxk@naver.com>
Date: Thu, 9 May 2024 15:34:20 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20"=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/HomePage/index.tsx | 102 ++++++++++++++++-------------------
 tailwind.config.js           |   2 +
 2 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
index a1c79ce..6169a1f 100644
--- a/src/pages/HomePage/index.tsx
+++ b/src/pages/HomePage/index.tsx
@@ -14,40 +14,36 @@ interface ButtonProps {
 
 function HomePage() {
   return (
-    <div className="dark:bg-gradient-dark w-full h-[calc(100vh-80px)] flex flex-col items-center justify-center gap-[20px]">
-      <div className="flex-Center flex-col" data-testid="home">
-        <img alt="로고" src="/images/rm-logo.png" width="150" height="150" data-testid="logo" />
-        <span className="text-textPrimary  dark:text-textWhite text-3xl md:text-6xl sm:text-5xl font-bold line-lg" data-testid="title">
-          README-MONSTER
-        </span>
-        <p
-          className="max-w-md mx-auto mt-3 text-textSecondary display-contents sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
-          data-testid="description"
-        >
-          <span>당신의 프로젝트 README를</span>
-          <span>자동으로 만들 수 있는 가장 빠르고 쉬운 방법</span>
+    <div className="bg-gradient-test dark:bg-gradient-dark w-full h-[calc(100vh-80px)]  mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
+      <div className="mx-auto max-w-xl text-center" data-testid="home">
+        <h1 className="text-3xl font-extrabold sm:text-5xl text-textPrimary  dark:text-textWhite" data-testid="title">
+          README-MONSTER<br/>
+          <strong className="font-extrabold text-textBlue sm:block">Builder & Generator</strong>
+        </h1>
+        <p className="mt-4 sm:text-xl/relaxed text-textSecondary" data-testid="description">
+        사용자가 직관적인 인터페이스를 통해 README 파일을 쉽게 구성할 수 있게 도와주고, 생성형 AI를 이용해 적절한 README 구성을 추천합니다
         </p>
-      </div>
-      <div className="flex flex-row gap-[20px]" data-testid="button">
-        <Button
-          url="/editor"
-          color="text-white"
-          backgroundColor="bg-textBlue"
-          dark="bg-darkSecondary"
-          hover="hover:bg-textBlueHover"
-          description="시작하기"
-          testId="firstButton"
-        />
-        <Button
-          url="/signup"
-          color="text-textPrimary"
-          backgroundColor="bg-gray-200"
-          dark="bg-gray-200"
-          hover="hover:bg-textgreyHover"
-          description="더 알아보기"
-          testId="secondButton"
-        />
-        <AiGenerator />
+        <div className="mt-8 flex flex-wrap justify-center gap-4" data-testid="button">
+          <Button
+            url="/editor"
+            color="text-white"
+            backgroundColor="bg-textBlue"
+            dark="bg-darkPrimary"
+            hover="hover:bg-textBlueHover"
+            description="시작하기"
+            testId="firstButton"
+          />
+          <Button
+            url="/signup"
+            color="text-textPrimary"
+            backgroundColor="bg-gray-200"
+            dark="bg-gray-200"
+            hover="hover:bg-textgreyHover"
+            description="더 알아보기"
+            testId="secondButton"
+          />
+          <AiGenerator />
+        </div>
       </div>
     </div>
   );
@@ -62,27 +58,23 @@ export function Button({ url, color, backgroundColor, description, hover, dark,
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <span className="inline-flex rounded-md shadow">
-        <div
-          className={`
-          inline-flex items-center px-4 py-2 
-          font-medium text-xl 
-          ${backgroundColor} 
-          ${hover} 
-          border-transparent rounded-lg 
-          dark:${dark}
-          ${color} 
-          w-[250px] h-[54px] 
-          justify-center
-          cursor-pointer
-          `}
-          onClick={handleClick}
-          data-testid={testId}
-        >
-          {description}
-        </div>
-      </span>
+    <div
+      className={`
+        block w-full rounded shadow 
+        inline-flex items-center px-12 py-3 
+        ${backgroundColor} dark:${dark}
+        ${color} ${hover} 
+        font-medium text-sm 
+        cursor-pointer
+        focus:outline-none focus:ring sm:w-auto
+        w-[270px] h-[54px] 
+        justify-center
+        
+      `}
+      onClick={handleClick}
+      data-testid={testId}
+    >
+      {description}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 91cf718..7b56d4a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,9 +15,11 @@ module.exports = {
         textBlack: "#000000",
         darkPrimary: "#1e2937",
         darkSecondary: "#374152",
+        darkTertiary:"#222222",
       },
       backgroundImage: {
         'gradient-dark': 'linear-gradient(#1e2937, #556274) !important', // 새 그라데이션 추가
+        'gradient-test': 'linear-gradient(white, #4B88FF) !important',
       },
       screens: {
         mobile: "768px",