docs: use latest and update banner examples

Author: jscottsmith

documentation/docs/examples/banners.mdx

@@ -29,7 +29,7 @@ const Component = () => {
         { image: '/static/banner-background.jpg', speed: -20 },
         { image: '/static/banner-foreground.png', speed: -10 },
       ]}
-      className="ratio-2/1"
+      className="aspect-[2/1]"
     />
   );
 };
@@ -57,7 +57,7 @@ const Component = () => {
         { image: '/static/banner-background.jpg', speed: -20 },
         { image: '/static/banner-foreground.png', speed: -10 },
       ]}
-      className="ratio-2/1"
+      className="aspect-[2/1]"
     >
       <div className="absolute inset-0 flex items-center justify-center">
         <h1 className="text-8xl text-white font-thin">Hello World!</h1>
@@ -82,7 +82,7 @@ const Component = () => {
       layers={[
         { image: '/static/banner-background.jpg', speed: -20 },
         {
-          speed: -12,
+          speed: -15,
           children: (
             <div className="absolute inset-0 flex items-center justify-center">
               <h1 className="text-8xl text-white font-thin">Hello World!</h1>
@@ -91,7 +91,7 @@ const Component = () => {
         },
         { image: '/static/banner-foreground.png', speed: -10 },
       ]}
-      className="ratio-2/1"
+      className="aspect-[2/1]"
     >
       <div className="absolute inset-0 flex items-center justify-center">
         <h1 className="text-8xl text-white font-thin">Hello World!</h1>

documentation/package.json

@@ -22,7 +22,7 @@
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scroll-parallax": "^3.0.0-beta.9"
+    "react-scroll-parallax": "^3.0.0-beta.13"
   },
   "browserslist": {
     "production": [

documentation/src/components/parallax-banner-embed-headline/index.tsx

@@ -12,10 +12,12 @@ export const ParallaxBannerEmbedHeadline = () => {
           shouldAlwaysCompleteAnimation: true,
         },
         {
-          speed: -12,
+          speed: -20,
           children: (
             <div className="absolute inset-0 flex items-center justify-center">
-              <h1 className="text-8xl text-white font-thin">Hello World!</h1>
+              <h1 className="text-6xl md:text-8xl text-white font-thin">
+                Hello World!
+              </h1>
             </div>
           ),
           shouldAlwaysCompleteAnimation: true,
@@ -27,7 +29,7 @@ export const ParallaxBannerEmbedHeadline = () => {
           shouldAlwaysCompleteAnimation: true,
         },
       ]}
-      className="h-48"
+      className="aspect-[2/1]"
     />
   );
 };

documentation/src/components/parallax-banner-images/index.tsx

@@ -18,7 +18,7 @@ export const ParallaxBannerImages = () => {
           shouldAlwaysCompleteAnimation: true,
         },
       ]}
-      className="h-48"
+      className="aspect-[2/1]"
     />
   );
 };

documentation/src/components/parallax-banner-with-headline/index.tsx

@@ -18,10 +18,12 @@ export const ParallaxBannerWithHeadline = () => {
           shouldAlwaysCompleteAnimation: true,
         },
       ]}
-      className="h-48"
+      className="aspect-[2/1]"
     >
       <div className="absolute inset-0 flex items-center justify-center">
-        <h1 className="text-8xl text-white font-thin">Hello World!</h1>
+        <h1 className="text-6xl md:text-8xl  text-white font-thin">
+          Hello World!
+        </h1>
       </div>
     </ParallaxBanner>
   );

documentation/yarn.lock

@@ -5402,10 +5402,10 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
-parallax-controller@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-1.2.0.tgz#c6358302f4111bb975fa94409595c309dccd99e8"
-  integrity sha512-o3tbh7tHw5pYKA+29aiQ2zsb5EtYIqED3oGoloLzezMvSTC9FAGwxpWzAyZ9A7529FTo2Q7xNgGtfvU1jF78+Q==
+parallax-controller@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-1.3.0.tgz#13da9f62de778ddba2fe6e96682b6c0815140516"
+  integrity sha512-0rY8r5+bxE2+Gr1nShCKQuMAOHUgEGIXb8ne3TmotplOBA75AnTXjyPnnoTcdKeapcA4yLG8K0xQoRCRlXZluQ==
   dependencies:
     bezier-easing "^2.1.0"
 
@@ -6179,12 +6179,12 @@ react-router@5.2.1, react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-scroll-parallax@^3.0.0-beta.9:
-  version "3.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/react-scroll-parallax/-/react-scroll-parallax-3.0.0-beta.9.tgz#324b59a2876aa28dc852a832efe42410cddddecf"
-  integrity sha512-n8KpI4myAu1hUC/lypt+3wDZTqMM868KNcbjKSMLWpgVdJoZhgqORcO95N+cGKquBU7tjSUk2jMub/pBYEC3FQ==
+react-scroll-parallax@^3.0.0-beta.13:
+  version "3.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/react-scroll-parallax/-/react-scroll-parallax-3.0.0-beta.13.tgz#2572f6e4012097d44f82221cdbfc84f4619f0d1d"
+  integrity sha512-G18AVKqaTL9xGTVbM0edMp221NRPudy4ZKdJ19O3ZUKfG7RPXg2C0njrj5tiiFOkQUJQO4mTOo/zoo+EwVlpuA==
   dependencies:
-    parallax-controller "^1.2.0"
+    parallax-controller "^1.3.0"
 
 react-side-effect@^2.1.0:
   version "2.1.1"