fix: landing visual improvements

nuxt · Jun 29, 2023 · fb8bafa · fb8bafa
1 parent 412bc2e
commit fb8bafa
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/docs/components/content/V1DocsLinks.vue b/docs/components/content/V1DocsLinks.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="wrapper">
-    <h4>Looking for v1 documentation ?</h4>
+    <h4>Looking for v1 documentation?</h4>
     <div class="links-wrapper">
-      <button-link href="/v1/getting-started/introduction" :transparent="true" size="large">
+      <button-link href="/v1/getting-started/introduction" size="small">
         English
       </button-link>
-      <button-link href="/fr/v1/getting-started/introduction" :transparent="true" class="ml-2" size="large">
+      <button-link href="/fr/v1/getting-started/introduction" size="small">
         French
       </button-link>
-      <button-link href="/ja/v1/getting-started/introduction" :transparent="true" class="ml-2" size="large">
+      <button-link href="/ja/v1/getting-started/introduction" size="small">
         Japanese
       </button-link>
     </div>
@@ -36,11 +36,5 @@ css({
     gap: '2rem',
     justifyContent: 'center'
   },
-  '.links-wrapper a': {
-    color: '{color.black}',
-    '@dark': {
-      color: '{color.white}'
-    }
-  }
 })
 </style>
diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -51,7 +51,7 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::
 
   #support
-  :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" .border-2 .u-border-gray-100 .shadow-lg .h-64}
+  :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" style="max-width: 640px; margin: 0 auto;"}
   ::
 
 ::
@@ -61,12 +61,16 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
 #default
   :section-header{title="What's included" subtitle="Features"}
 
-  ::card-grid
+  ::card-grid{cols=6}
 
   #default
     ::card
     ---
     icon: simple-icons:nuxtdotjs
+    col: 
+      initial: 6
+      sm: 4
+    row: 1
     ---
     #title
     Built for Nuxt 3
@@ -77,6 +81,9 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::card
     ---
     icon: ph:file
+    col: 
+      initial: 6
+      sm: 2
     ---
     #title
     File-based CMS
@@ -87,6 +94,10 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::card
     ---
     icon: ph:funnel
+    col: 
+      initial: 6
+      sm: 2
+    row: 1
     ---
     #title
     Query Builder
@@ -97,6 +108,10 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::card
     ---
     icon: IconMarkdown
+    col: 
+      initial: 6
+      sm: 2
+    row: 1
     ---
     #title
     MDC Syntax
@@ -107,6 +122,10 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::card
     ---
     icon: ph:scan
+    col: 
+      initial: 6
+      sm: 2
+    row: 2
     ---
     #title
     Code highlighting
@@ -117,6 +136,10 @@ backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
     ::card
     ---
     icon: ph:rocket-launch
+    col: 
+      initial: 6
+      sm: 4
+    row: 1
     ---
     #title
     Deploy everywhere.