updated: layout

MusilyApp · Nov 13, 2024 · b19a1b3 · b19a1b3
1 parent 0c18661
commit b19a1b3
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -5,30 +5,33 @@ definePageMeta({
 </script>
 
 <template>
-  <div style="height: calc(100vh - 420px)" class="d-flex align-center pa-12">
-    <div class="d-flex justify-center align-center" style="width: 100vw">
-      <div class="text-align-center text-align-md-left">
+  <div
+    style="height: calc(100vh - 100px)"
+    class="d-flex flex-col align-center justify-center px-5"
+  >
+    <nav class="d-flex justify-center">
+      <MusilyLogo width="150px" height="150px" />
+    </nav>
+    <div class="d-flex justify-center align-center">
+      <div class="text-align-center">
         <LyText font="display-small-200"> Enjoy your music with </LyText>
-        <div class="text-align-center text-align-md-left">
+        <div class="text-align-center">
           <LyText font="display-small-600"> A great music app. </LyText>
         </div>
-        <div class="mt-2 text-align-center text-align-md-left">
+        <div class="mt-2 text-align-center">
           <LyText font="label-small-300" :opacity="0.5">
             Simple and free music app with no distractions, no ads. Esfficient
             and easy to use.
           </LyText>
         </div>
         <div
-          class="d-flex justify-start mt-3 flex-col flex-md-row"
+          class="d-flex justify-center mt-3 flex-col flex-md-row"
           style="gap: 4px"
         >
           <LyFilledButton>Download</LyFilledButton>
           <LyFilledButton>Download via Telegram</LyFilledButton>
         </div>
       </div>
-      <div class="d-none d-lg-inline-block">
-        <AppScreenshot class="ml-12" />
-      </div>
     </div>
   </div>
 </template>