Design: 홈페이지 디자인 변경

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="flex h-full w-full flex-col items-center justify-center bg-gray-50">
-      <div className="mb-6 max-w-xl rounded-lg bg-white p-6 shadow-lg">
+      <div className="text-center">
-        <h2 className="mb-4 text-2xl font-bold text-gray-900">서비스 설명</h2>
+        <p className="text-5xl font-semibold leading-[60px] text-black">
-        <p className="mb-4 text-base text-gray-700">
+          <span className="text-primary">Worlabel</span>에 오신 것을 환영합니다
-          본 서비스는 인공 지능(AI) 모델의 학습을 지원하기 위해 웹 기반의 자동 라벨링 도구를 개발하는 것을 목표로
+          <br />
-          합니다.
+          <span className="text-primary">웹 기반 오토 레이블링</span> 플랫폼
         </p>
-        <p className="mb-4 text-base text-gray-700">
+      </div>
-          기존의 수동적인 방법으로는 대량의 학습 데이터를 처리하는데 시간과 비용이 많이 소모되었습니다. 그러나 본
+      <div className="mt-4 text-center">
-          서비스의 결과물인 Auto Labeler를 사용하면, 이러한 문제를 해결할 수 있을 것으로 기대됩니다.
+        <p className="text-xl font-light leading-[28px] text-black">
-        </p>
+          Worlabel로 레이블링 작업을 간소화하세요.
-        <p className="mb-4 text-base text-gray-700">
+          <br />
-          Auto Labeler는 웹 기반으로 동작하므로, 별도의 설치 과정 없이 인터넷 연결 환경에서 쉽게 사용할 수 있습니다.
+          브라우저에서 직접 레이블링을 자동화하여 빠르고 효율적인 워크플로우를 경험하세요.
-          또한, 사용자 친화적인 인터페이스를 제공하여 비전문가도 손쉽게 이용할 수 있도록 설계될 예정입니다.
-        </p>
-        <p className="text-base text-gray-700">
-          본 서비스는 특히 학습 데이터 구축 과정의 효율성과 정확도를 향상시키는 데 중점을 두고 있습니다.
         </p>
       </div>
 
+      <div className="mt-8">
         {!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"
+            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> // 404 에러 방지
+          </a>
         ) : (
-        <>
           <Button
             asChild
             variant="blue"
             size="lg"
+            className="mt-8"
           >
             <Link to="/browse">시작하기</Link>
           </Button>
-        </>
         )}
       </div>
+    </div>
   );
 }