thirdweb connect landing page updates (#1779)

* Use video instead of lottie

* show video on mobile too

* Video improvements

---------

Co-authored-by: Jonas Daniels <[email protected]>

components/landing-pages/desktop-mobile-image.tsx

@@ -1,14 +1,13 @@
 import { Box } from "@chakra-ui/react";
 import { LandingDesktopMobileImageProps } from "./types";
 import { ChakraNextImage } from "components/Image";
-import Lottie from "lottie-react";
 
 export const LandingDesktopMobileImage: React.FC<
   LandingDesktopMobileImageProps
-> = ({ lottie, image, mobileImage, ...props }) => {
+> = ({ image, mobileImage, ...props }) => {
   return (
     <>
-      {mobileImage && (
+      {!props.video && mobileImage && (
         <ChakraNextImage
           {...props}
           display={{ base: "block", md: "none" }}
@@ -16,7 +15,8 @@ export const LandingDesktopMobileImage: React.FC<
           alt=""
         />
       )}
-      {!lottie && image && (
+
+      {!props.video && image && (
         <ChakraNextImage
           {...props}
           src={image}
@@ -24,14 +24,21 @@ export const LandingDesktopMobileImage: React.FC<
           display={{ base: mobileImage ? "none" : "block", md: "block" }}
         />
       )}
-      {lottie && (
+
+      {props.video && (
         <Box
-          w="100%"
-          h="100%"
-          display={{ base: mobileImage ? "none" : "block", md: "block" }}
-        >
-          <Lottie animationData={lottie} loop={true} />
-        </Box>
+          as="video"
+          loop
+          playsInline
+          preload="auto"
+          width="550"
+          height="400"
+          autoPlay
+          src={props.video}
+          muted
+          boxShadow="0 0 50px #0e0d0f"
+          borderRadius="50px"
+        />
       )}
     </>
   );

components/landing-pages/hero-with-side-image.tsx

@@ -17,7 +17,7 @@ interface LandingHeroWithSideImageProps {
   gradient: string;
   image?: StaticImageData;
   mobileImage?: StaticImageData;
-  lottie?: {};
+  video?: string;
 }
 
 export const LandingHeroWithSideImage: React.FC<
@@ -35,7 +35,7 @@ export const LandingHeroWithSideImage: React.FC<
   gradient,
   image,
   mobileImage,
-  lottie,
+  video,
 }) => {
   return (
     <SimpleGrid
@@ -71,7 +71,7 @@ export const LandingHeroWithSideImage: React.FC<
       </Flex>
       <Flex maxH="500px">
         <LandingDesktopMobileImage
-          lottie={lottie}
+          video={video}
           image={image}
           mobileImage={mobileImage}
         />

components/landing-pages/types.tsx

@@ -11,7 +11,7 @@ export type Guide = {
 export type LandingDesktopMobileImageProps = ChakraNextImageProps & {
   image?: StaticImageData;
   mobileImage?: StaticImageData;
-  lottie?: {};
+  video?: string;
 };
 
 export interface LandingSectionHeadingProps {

package.json

@@ -52,7 +52,6 @@
     "framer-motion": "^10.16.4",
     "fuse.js": "^6.6.2",
     "idb-keyval": "^6.2.0",
-    "lottie-react": "^2.4.0",
     "next": "^13.5.4",
     "next-plausible": "^3.9.1",
     "next-seo": "^5.15.0",

pages/connect.tsx

@@ -12,7 +12,6 @@ import { getAbsoluteUrl } from "lib/vercel-utils";
 import { PageId } from "page-id";
 import { Heading, TrackedLink, Text } from "tw-components";
 import { ThirdwebNextPage } from "utils/types";
-import connectLottie from "../public/assets/product-pages/connect/connect-lottie.json";
 
 const TRACKING_CATEGORY = "connect-wallet-landing";
 
@@ -71,7 +70,7 @@ const ConnectLanding: ThirdwebNextPage = () => {
           ctaLink="/dashboard/wallets/connect"
           contactUsTitle="Book Demo"
           gradient="linear(to-r, #3385FF, #7BB0FF)"
-          lottie={connectLottie}
+          video={"/assets/connect/connect-wallet-hero.mp4"}
           image={require("public/assets/product-pages/hero/desktop-hero-connect-wallet.png")}
           mobileImage={require("public/assets/product-pages/hero/mobile-hero-connect-wallet.png")}
         />

yarn.lock

@@ -7784,18 +7784,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-react@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
-  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
-  dependencies:
-    lottie-web "^5.10.2"
-
-lottie-web@^5.10.2:
-  version "5.12.2"
-  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
-  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
-
 loupe@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.6.tgz#76e4af498103c532d1ecc9be102036a21f787b53"