간단한 첫 페이지 제작

src/pages/IndexPage.vue

@@ -2,14 +2,49 @@
   <q-page class="row items-center justify-center" padding>
     <!-- //대충 아무 내용 -->
     <!-- <h1>로그인 하면 보임</h1> -->
-    <q-card>
-      동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화
-      삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을
-      두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람
-      대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리
-      가슴 일편단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
-      이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화
-      삼천리 화려강산 대한사람 대한으로 길이 보전하세
+    <q-card class="q-pa-md" style="width: 700px; max-width: 80vw">
+      <q-card-section class="text-center">
+        <div class="text-h4">Mocil 시스템에 오신 것을 환영합니다.</div>
+        <div class="text-subtitle1 q-mt-sm">
+          장애인 자립생활센터 운영 관리 시스템
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <p class="text-body1">
+          Mocil은 장애인 자립생활센터의 운영 및 관리 업무를 효율적으로 지원하기
+          위해 개발되었습니다.
+        </p>
+        <p class="text-body1">
+          아래 바로가기 메뉴를 통해 주요 기능을 이용하실 수 있습니다.
+        </p>
+      </q-card-section>
+
+      <q-card-actions align="around" class="q-gutter-md">
+        <q-btn
+          to="/notice"
+          label="공지사항 확인"
+          color="primary"
+          icon="campaign"
+          unelevated
+        />
+        <q-btn
+          to="/management/member"
+          label="이용자 관리"
+          color="secondary"
+          icon="people"
+          unelevated
+        />
+        <q-btn
+          to="/management/activity"
+          label="활동가 관리"
+          color="info"
+          icon="work"
+          unelevated
+        />
+      </q-card-actions>
     </q-card>
   </q-page>
 </template>