chore: rewrite docs

vuestorefront · Mar 28, 2024 · 882a189 · 882a189
1 parent 17d8f2a
commit 882a189
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/apps/docs/components/blocks/Banners.md b/apps/docs/components/blocks/Banners.md
@@ -51,8 +51,8 @@ Four vertical displays in row on desktop.
 
 Hero acts like a layout for your hero section. You can add a main image and any content you want, along with background images for both mobile and desktop. To make the background images look better and load faster, it's best to use images that:
 
-- are 3840px wide with a 16:9 aspect ratio for desktop,
-- are 768px wide with a 1:2 aspect ratio for mobile.
+- are at least 3840px wide with a 4:1.5 aspect ratio for desktop, e.g. 3840px x 1440px,
+- are at least 768px wide with a 3:4 aspect ratio for mobile, e.g. 768px x 1024px.
 
 <Showcase showcase-name="Banners/Hero" style="min-height:620px">
 

diff --git a/apps/preview/next/pages/showcases/Banners/Hero.tsx b/apps/preview/next/pages/showcases/Banners/Hero.tsx
@@ -5,7 +5,7 @@ import { SfButton } from '@storefront-ui/react';
 
 export default function Hero() {
   return (
-    <div className="relative min-h-[600px]">
+    <div className="relative min-h-[576px]">
       <picture>
         <source srcSet="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
         <img

diff --git a/apps/preview/nuxt/pages/showcases/Banners/Hero.vue b/apps/preview/nuxt/pages/showcases/Banners/Hero.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative min-h-[600px]">
+  <div class="relative min-h-[576px]">
     <picture>
       <source srcset="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
       <img