From 48193743b62a0fcd09a01643d6116a786fc89a26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Tue, 8 Oct 2024 08:48:24 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Home.tsx | 59 ++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 0e2131e..80a5784 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -9,48 +9,45 @@ export default function Home() {
   const { accessToken } = useAuthStore();
 
   return (
-    <div className="flex h-full flex-col items-center justify-center bg-gray-50 p-8">
-      <div className="mb-6 max-w-xl rounded-lg bg-white p-6 shadow-lg">
-        <h2 className="mb-4 text-2xl font-bold text-gray-900">서비스 설명</h2>
-        <p className="mb-4 text-base text-gray-700">
-          본 서비스는 인공 지능(AI) 모델의 학습을 지원하기 위해 웹 기반의 자동 라벨링 도구를 개발하는 것을 목표로
-          합니다.
+    <div className="flex h-full w-full flex-col items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <p className="text-5xl font-semibold leading-[60px] text-black">
+          <span className="text-primary">Worlabel</span>에 오신 것을 환영합니다
+          <br />
+          <span className="text-primary">웹 기반 오토 레이블링</span> 플랫폼
         </p>
-        <p className="mb-4 text-base text-gray-700">
-          기존의 수동적인 방법으로는 대량의 학습 데이터를 처리하는데 시간과 비용이 많이 소모되었습니다. 그러나 본
-          서비스의 결과물인 Auto Labeler를 사용하면, 이러한 문제를 해결할 수 있을 것으로 기대됩니다.
-        </p>
-        <p className="mb-4 text-base text-gray-700">
-          Auto Labeler는 웹 기반으로 동작하므로, 별도의 설치 과정 없이 인터넷 연결 환경에서 쉽게 사용할 수 있습니다.
-          또한, 사용자 친화적인 인터페이스를 제공하여 비전문가도 손쉽게 이용할 수 있도록 설계될 예정입니다.
-        </p>
-        <p className="text-base text-gray-700">
-          본 서비스는 특히 학습 데이터 구축 과정의 효율성과 정확도를 향상시키는 데 중점을 두고 있습니다.
+      </div>
+      <div className="mt-4 text-center">
+        <p className="text-xl font-light leading-[28px] text-black">
+          Worlabel로 레이블링 작업을 간소화하세요.
+          <br />
+          브라우저에서 직접 레이블링을 자동화하여 빠르고 효율적인 워크플로우를 경험하세요.
         </p>
       </div>
 
-      {!accessToken ? (
-        <a
-          href={`${BASE_URL}/login/oauth2/authorization/google`}
-          className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
-        >
-          <img
-            src={GoogleLogo}
-            alt="Sign in with Google"
-            className="h-auto w-full"
-          />
-        </a> // 404 에러 방지
-      ) : (
-        <>
+      <div className="mt-8">
+        {!accessToken ? (
+          <a
+            href={`${BASE_URL}/login/oauth2/authorization/google`}
+            className="flex items-center justify-center transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
+          >
+            <img
+              src={GoogleLogo}
+              alt="Sign in with Google"
+              className="h-auto w-full"
+            />
+          </a>
+        ) : (
           <Button
             asChild
             variant="blue"
             size="lg"
+            className="mt-8"
           >
             <Link to="/browse">시작하기</Link>
           </Button>
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 }