style: tweak hero (#1576)

src/pages/index.js

@@ -420,9 +420,9 @@ function Logo(props) {
       <img
         src={useBaseUrl(
           logoDir +
-            (isDarkMode
-              ? props.brand.logoColorDark
-              : props.brand.logoColorLight)
+          (isDarkMode
+            ? props.brand.logoColorDark
+            : props.brand.logoColorLight)
         )}
         alt={props.brand.name}
       />
@@ -474,25 +474,12 @@ export default function App() {
       })}
     >
       <header className={classNames('hero', styles.hero)}>
-        <div className={classNames(styles.heroBefore)}>
-          <div className={classNames(styles.loopsContainer)}>
-            <img
-              className={classNames(styles.heroLoops)}
-              src="/img/index/blue_loops.svg"
-            />
-          </div>
-          <img
-            className={classNames(styles.heroPackage)}
-            src="/img/index/orange_package.svg"
-          />
-        </div>
+
         <div className={classNames(styles.heroContainer)}>
-          <p className={classNames(styles.heroSubtitle, 'hero__subtitle')}>
-            <Translate>Announcing the release of</Translate>
-          </p>
           <span className={classNames(styles.heroImage)}>
             <DynamicHeaderImage />
           </span>
+          <br />
           <div className={classNames(styles.heroSubtitle, 'hero__subtitle')}>
             <Translate>
               Build an optimized, secure, and frontend-independent application
@@ -511,18 +498,6 @@ export default function App() {
             <Translate>Quick Start</Translate>
           </Link>
         </div>
-        <div className={classNames(styles.heroAfter)}>
-          <img
-            className={classNames(styles.heroPackage)}
-            src="/img/index/blue_package.svg"
-          />
-          <div className={classNames(styles.loopsContainer)}>
-            <img
-              className={classNames(styles.heroLoops)}
-              src="/img/index/orange_loops.svg"
-            />
-          </div>
-        </div>
       </header>
 
       <main>

src/pages/index.module.css

@@ -244,3 +244,22 @@
     text-align: center;
   }
 }
+
+.hero {
+  animation: hero-intro 2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
+  background:
+    linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(#6d6d6d25 1px, transparent 1px), linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(#6d6d6d25 1px, transparent 1px), linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px), linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px), linear-gradient(#6d6d6d25 1px, transparent 1px), transparent;
+  background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px, 256px 256px, 256px 256px, 256px 256px, 256px 256px
+}
+
+@keyframes hero-intro {
+  0% {
+    background-position: 0px 50px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero {
+    animation: none;
+  }
+}