feat: redesign hero block (#3288)

upgrade vueuse
redesign hero block
add second hero example
change copy

Author: FRSgit

apps/docs/components/content/_blocks/Banners.md

@@ -79,17 +79,15 @@ Display block with image filling all of its background area.
 
 ## Hero
 
-The Hero component simplifies the process of creating stunning hero sections for your website. With Hero, you have the flexibility to seamlessly integrate a main image and customize your content to suit your needs. Additionally, Hero allows adding background images tailored for both mobile and desktop devices. To ensure an optimal blend of performance and visual appeal, we recommend adhering to the following image guidelines:
+The Hero block simplifies the process of creating stunning hero sections for your website. With Hero, you have the flexibility to seamlessly integrate a main image and customize your content to suit your needs. Additionally, Hero allows adding background images tailored for both mobile and desktop devices. To ensure an optimal blend of performance and visual appeal, we recommend adhering to the following image guidelines:
 
 Desktop Background Images:
-Minimum width: 3840px
-Aspect ratio: 4:1.5
-Example size: 3840px x 1440px
+Aspect ratio: 2:1
+Example size: 2160 x 1080px
 
 Mobile Background Images:
-Minimum width: 768px
-Aspect ratio: 3:4
-Example size: 768px x 1024px
+Aspect ratio: 2:5
+Example size: 420 x 1050px
 
 <Showcase showcase-name="Banners/Hero" style="min-height:620px">
 
@@ -101,3 +99,18 @@ Example size: 768px x 1024px
 ::
 
 </Showcase>
+
+## Hero With Side Image
+
+Enhance your Hero section with a contextual image on the side.
+
+<Showcase showcase-name="Banners/HeroWithImage" style="min-height:620px">
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Banners/HeroWithImage.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Banners/HeroWithImage.tsx
+::
+
+</Showcase>

apps/preview/next/pages/showcases/Banners/Hero.tsx

@@ -5,38 +5,26 @@ import { SfButton } from '@storefront-ui/react';
 
 export default function Hero() {
   return (
-    <div className="relative min-h-[576px]">
-      <picture>
-        <source srcSet="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
+    <div className="relative h-dvh w-dvh">
+      <picture className="before:absolute before:inset-0 before:bg-primary-900 before:-z-10">
+        <source srcSet="http://localhost:3100/@assets/hero-bg-2.png" media="(min-width: 768px)" />
         <img
-          src="http://localhost:3100/@assets/hero-bg-mobile.png"
-          className="absolute w-full h-full z-[-1] object-cover"
+          src="http://localhost:3100/@assets/hero-bg-mobile-2.png"
+          className="absolute w-full h-full z-[-1] object-cover opacity-50"
+          alt="hero"
         />
       </picture>
-      <div className="md:flex md:flex-row-reverse md:justify-center min-h-[576px] max-w-[1536px] mx-auto">
-        <div className="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
-          <img
-            src="http://localhost:3100/@assets/hero-headphones.png"
-            alt="Headphones"
-            className="h-full object-cover object-left"
-          />
-        </div>
-        <div className="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
-          <p className="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
-            Feel the music
-          </p>
-          <h1 className="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
-            New Wireless Pro
-          </h1>
-          <p className="typography-text-base md:typography-text-lg">
-            Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
-          </p>
-          <div className="flex flex-col md:flex-row gap-4 mt-6">
-            <SfButton size="lg"> Order now </SfButton>
-            <SfButton size="lg" className="bg-white" variant="secondary">
-              Show more
-            </SfButton>
-          </div>
+      <div className="h-full w-full max-w-[1536px] mx-auto p-4 md:px-10 flex flex-col justify-end md:justify-center text-white">
+        <p className="typography-text-xs md:typography-text-sm font-bold tracking-widest uppercase">New collection</p>
+        <h1 className="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+          Made to move. Built to win.
+        </h1>
+        <p className="typography-text-base md:typography-text-lg">The new sport collection is now in store.</p>
+        <div className="flex flex-col md:flex-row gap-4 mt-6">
+          <SfButton size="lg" className="bg-white" variant="secondary">
+            Order now
+          </SfButton>
+          <SfButton size="lg">Show more</SfButton>
         </div>
       </div>
     </div>

apps/preview/next/pages/showcases/Banners/HeroWithImage.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { SfButton } from '@storefront-ui/react';
+
+export default function Hero() {
+  return (
+    <div className="relative min-h-[576px]">
+      <picture>
+        <source srcSet="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
+        <img
+          src="http://localhost:3100/@assets/hero-bg-mobile.png"
+          className="absolute w-full h-full z-[-1] object-cover"
+        />
+      </picture>
+      <div className="md:flex md:flex-row-reverse md:justify-center min-h-[576px] max-w-[1536px] mx-auto">
+        <div className="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
+          <img
+            src="http://localhost:3100/@assets/hero-headphones.png"
+            alt="Headphones"
+            className="h-full object-cover object-left"
+          />
+        </div>
+        <div className="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
+          <p className="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-900 uppercase">
+            Feel the music
+          </p>
+          <h1 className="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+            New Wireless Pro
+          </h1>
+          <p className="typography-text-base md:typography-text-lg">
+            Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
+          </p>
+          <div className="flex flex-col md:flex-row gap-4 mt-6">
+            <SfButton size="lg"> Order now </SfButton>
+            <SfButton size="lg" className="bg-white" variant="secondary">
+              Show more
+            </SfButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+// #endregion source
+Hero.getLayout = ShowcasePageLayout;

apps/preview/nuxt/pages/showcases/Banners/Hero.vue

@@ -1,35 +1,24 @@
 <template>
-  <div class="relative min-h-[576px]">
-    <picture>
-      <source srcset="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
+  <div class="relative h-dvh w-dvh">
+    <picture class="before:absolute before:inset-0 before:bg-primary-900 before:-z-10">
+      <source srcset="http://localhost:3100/@assets/hero-bg-2.png" media="(min-width: 768px)" />
       <img
-        src="http://localhost:3100/@assets/hero-bg-mobile.png"
-        class="absolute w-full h-full z-[-1] object-cover"
+        src="http://localhost:3100/@assets/hero-bg-mobile-2.png"
+        class="absolute w-full h-full z-[-1] object-cover opacity-50"
         alt="hero"
       />
     </picture>
-    <div class="md:flex md:flex-row-reverse md:justify-center max-w[1536px] mx-auto min-h-[576px]">
-      <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
-        <img
-          src="http://localhost:3100/@assets/hero-headphones.png"
-          alt="Headphones"
-          class="h-full w-full object-cover object-left"
-        />
-      </div>
-      <div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
-        <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
-          Feel the music
-        </p>
-        <h1 class="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
-          New Wireless Pro
-        </h1>
-        <p class="typography-text-base md:typography-text-lg">
-          Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
-        </p>
-        <div class="flex flex-col md:flex-row gap-4 mt-6">
-          <SfButton size="lg"> Order now </SfButton>
-          <SfButton size="lg" variant="secondary" class="bg-white"> Show more </SfButton>
-        </div>
+    <div
+      class="h-full w-full max-w-[1536px] mx-auto p-4 md:px-10 flex flex-col justify-end md:justify-center text-white"
+    >
+      <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest uppercase">New collection</p>
+      <h1 class="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+        Made to move. Built to win.
+      </h1>
+      <p class="typography-text-base md:typography-text-lg">The new sport collection is now in store.</p>
+      <div class="flex flex-col md:flex-row gap-4 mt-6">
+        <SfButton size="lg" variant="secondary" class="bg-white"> Order now </SfButton>
+        <SfButton size="lg"> Show more </SfButton>
       </div>
     </div>
   </div>

apps/preview/nuxt/pages/showcases/Banners/HeroWithImage.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative min-h-[576px]">
+    <picture>
+      <source srcset="http://localhost:3100/@assets/hero-bg.png" media="(min-width: 768px)" />
+      <img
+        src="http://localhost:3100/@assets/hero-bg-mobile.png"
+        class="absolute w-full h-full z-[-1] object-cover"
+        alt="hero"
+      />
+    </picture>
+    <div class="md:flex md:flex-row-reverse md:justify-center max-w-[1536px] mx-auto min-h-[576px]">
+      <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
+        <img
+          src="http://localhost:3100/@assets/hero-headphones.png"
+          alt="Headphones"
+          class="h-full w-full object-cover object-left"
+        />
+      </div>
+      <div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
+        <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-900 uppercase">
+          Feel the music
+        </p>
+        <h1 class="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+          New Wireless Pro
+        </h1>
+        <p class="typography-text-base md:typography-text-lg">
+          Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
+        </p>
+        <div class="flex flex-col md:flex-row gap-4 mt-6">
+          <SfButton size="lg"> Order now </SfButton>
+          <SfButton size="lg" variant="secondary" class="bg-white"> Show more </SfButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SfButton } from '@storefront-ui/vue';
+</script>