update landing page video (#1722)

SigNoz · May 11, 2024 · a3a138f · a3a138f
1 parent 5c3ad4e
commit a3a138f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@docusaurus/plugin-pwa": "2.4.3",
     "@docusaurus/preset-classic": "2.4.3",
     "@mdx-js/react": "^1.6.21",
+    "@vimeo/player": "2.23.0",
     "antd": "^4.10.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-image-zoom": "^0.1.1",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -866,7 +866,7 @@ a.no-underline {
 }
 
 .new-doc .menu__link:after {
-  content: 'NEW';
+  content: "NEW";
   display: inline-block;
   margin-left: 0.5rem;
   background-color: #1d9e82; /* Your desired background color */
@@ -882,4 +882,23 @@ a.no-underline {
 .new-doc.collapsed .menu__link:after {
   transform: rotate(0); /* Adjust rotation if needed */
   /* Additional styles if required when collapsed */
-}
+}
+
+.embed-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.embed-container iframe,
+.embed-container object,
+.embed-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/modules/index-header/index.tsx b/src/modules/index-header/index.tsx
@@ -1,13 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import Player from "@vimeo/player";
 import SubHeading from "../../components/ui/SubHeading";
 import Hero from "../../components/ui/Hero";
 import Button from "../../components/ui/Button";
 import ReactModal from "react-modal";
 import { LiteYoutubeEmbed } from "react-lite-yt-embed";
 
 export const Header = () => {
-  const [showVideo, setShowVideo] = useState(false);
-
   return (
     <header className="my-16">
       <div className="flex flex-col items-center mb-5 text-center px-5">
@@ -17,9 +16,9 @@ export const Header = () => {
           Metrics, and Logs in a single pane
         </Hero>
         <SubHeading>
-          A single tool for all your observability 
-          needs - APM, logs, metrics, exceptions, <br className="hidden lg:inline" /> alerts, and dashboards powered
-          by a powerful query builder. 
+          A single tool for all your observability needs - APM, logs, metrics,
+          exceptions, <br className="hidden lg:inline" /> alerts, and dashboards
+          powered by a powerful query builder.
         </SubHeading>
       </div>
       <div className="flex flex-col md:flex-row gap-5 justify-center mb-12 mx-5">
@@ -42,40 +41,20 @@ export const Header = () => {
         </Button>
       </div>
       <div className="container">
-        <div className="flex justify-center items-center relative after:-z-[2] after:absolute after:content-[''] after:w-[300px] after:h-[300px] lg:after:w-[600px] lg:after:h-[600px] after:bg-primary-500 after:rounded-full after:opacity-50 after:blur-3xl">
-          <div className="p-2 rounded-lg flex justify-center items-center hero-figure max-w-4xl">
-            <img
-              className="rounded-lg"
-              src="/img/landing/signoz-landing-snap.webp"
-            />
-            <div
-              onClick={() => setShowVideo(true)}
-              className="cursor-pointer play-container w-16 h-16 md:w-24 md:h-24 rounded-full bg-primary-500 flex justify-center items-center focus-visible:outline-none"
-            >
-              <img
-                src="/img/landing/play-icon.webp"
-                className="w-6 h-6 md:w-10 md:h-10"
-              />
+        <div className="w-100 relative mx-auto">
+          <div className="hero-figure p-3 rounded-lg">
+            <div className="embed-container max-w-4xl">
+              <iframe
+                src="https://player.vimeo.com/video/944340217"
+                frameborder="0"
+                webkitAllowFullScreen
+                mozallowfullscreen
+                allowFullScreen
+              ></iframe>
             </div>
           </div>
         </div>
       </div>
-      <ReactModal
-        isOpen={showVideo}
-        contentLabel=""
-        onRequestClose={() => setShowVideo(false)}
-        className="Modal play-video-container"
-        overlayClassName="Overlay"
-      >
-        <div>
-          <LiteYoutubeEmbed
-            id={"jD36hjfL1x0"}
-            defaultPlay={true}
-            mute={false}
-            params={{ autoplay: "true", mute: "false" }}
-          />
-        </div>
-      </ReactModal>
     </header>
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2549,6 +2549,14 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@vimeo/[email protected]":
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/@vimeo/player/-/player-2.23.0.tgz#0ffcae773f8eec8bdd943b3c72aed30477797001"
+  integrity sha512-WiLSyoioHdf8TFcSp8ptt8aW1WWEkFJNtZCZgiCopDS11UecGtwRib/OAf0uF7uDlVueeV4ru0AL4QsPD1Y2GA==
+  dependencies:
+    native-promise-only "0.8.1"
+    weakmap-polyfill "2.0.4"
+
 "@webassemblyjs/[email protected]", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -6251,6 +6259,11 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
+[email protected]:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/native-promise-only/-/native-promise-only-0.8.1.tgz#20a318c30cb45f71fe7adfbf7b21c99c1472ef11"
+  integrity sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==
+
 [email protected]:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -9475,6 +9488,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+[email protected]:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz#bcc301e4c8eb4eda3e406f08f1a691093e407884"
+  integrity sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==
+
 web-namespaces@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"