style: main 페이지 디자인

frontend/my-svelte-app/src/App.svelte

@@ -15,16 +15,38 @@
 </div>
 
 <div class="main-content">
-  <Router {routes} />
+  <div class="hero-section">
+    <div class="hero-logo">
+      <img src="src/assets/images.png" alt="Smart PDF Logo" />
+    </div>
+    <div class="hero-text">
+      <h1>Find answers<br>through precision</h1>
+      <p>We provide a precise and secure<br>document search solution.</p>
+    </div>
+    <div class="hero-icons">
+      <div class="icon">
+        <p>Better Security</p>
+      </div>
+      <div class="icon">
+        <p>Better Flexibility</p>
+      </div>
+      <div class="icon">
+        <p>Better Precision</p>
+      </div>
+    </div>
+  </div>
 </div>
 
 <style>
+  /* Google Fonts - Allerta */
+  @import url('https://fonts.googleapis.com/css2?family=Allerta&display=swap');
+
   body {
-    font-family: Arial, sans-serif;
+    font-family: 'Allerta', sans-serif; /* 글씨체 변경 */
     margin: 0;
     background-color: #f0f2f5;
     color: #333;
-    font-size: 30px;
+    font-size: 18px;
   }
 
   .sidebar {
@@ -43,10 +65,9 @@
   }
 
   .sidebar h2 {
-    color: #fff;
-    font-size:25px;
+    font-size: 25px;
     margin-bottom: 20px;
-    font-weight: 600;
+    font-weight: 400;
     padding-bottom: 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   }
@@ -55,7 +76,7 @@
     color: rgba(255, 255, 255, 0.9);
     padding: 12px 15px;
     text-decoration: none;
-    font-size:25px;
+    font-size: 20px;
     display: block;
     border-radius: 10px;
     margin-bottom: 5px;
@@ -69,10 +90,50 @@
   }
 
   .main-content {
-    margin-left: 270px;
-    padding: 20px;
-    overflow-y: auto;
-    flex: 1;
-    min-height: calc(100vh - 40px);
+    margin-left: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* 세로 가운데 정렬 */
+    background-color: #fff;
+  }
+
+  .hero-section {
+    text-align: center;
+  }
+
+  .hero-logo img {
+    width: 300px; /* 로고 크기 */
+    height: auto;
+    margin-bottom: 40px; /* 로고와 텍스트 간격 */
+  }
+
+  .hero-text h1 {
+    font-size: 5rem; /* 글씨 크기 */
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .hero-text p {
+    font-size: 2rem; /* 글씨 크기 */
+    margin: 30px 0;
+    color: #555;
+  }
+
+  .hero-icons {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+    margin-top: 50px;
+  }
+
+  .icon {
+    text-align: center;
+    max-width: 150px;
+  }
+
+  .icon p {
+    font-size: 1.5rem; /* 글씨 크기 */
+    color: #333;
   }
-</style>
+</style>