feat(481): Embed Tailcall Introduction Video on the Home Page

src/components/home/IntroductionVideo/index.tsx

@@ -0,0 +1,24 @@
+import React, {useRef} from "react"
+import "./style.css"
+
+const IntroductionVideo: React.FC = () => {
+  const videoId = "1011521201"
+  const videoRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className="video-wrapper" ref={videoRef}>
+      <div className="video-container">
+        <iframe
+          src={`https://player.vimeo.com/video/${videoId}?autoplay=0&badge=0&autopause=0&player_id=0&app_id=58479`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="absolute top-0 left-0 w-full h-full"
+          title="Tailcall Introduction Video"
+          loading="lazy"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default IntroductionVideo

src/components/home/IntroductionVideo/style.css

@@ -0,0 +1,72 @@
+.video-wrapper {
+  padding: 1.75rem;
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.video-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(90deg, #c5c5c5 1px, transparent 1px), linear-gradient(#c5c5c5 1px, transparent 1px);
+  background-size: 100px 50px;
+  background-position: -1px -1px;
+  opacity: 0.5;
+  max-width: 1595px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  border-radius: 0.375rem;
+  z-index: 10;
+  box-shadow: 0px 4px 32px 0px #ffe933;
+  background-image: url("/static/images/video-thumbnail.webp");
+  background-size: 100%;
+}
+
+.video-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+@media (min-width: 768px) {
+  .video-wrapper {
+    padding: 7rem /* 112px */;
+  }
+  .video-container {
+    border-radius: 1.5rem /* 24px */;
+  }
+}
+
+@media (min-width: 1536px) {
+  .video-container {
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
+    aspect-ratio: 16/9;
+    padding-bottom: 0;
+  }
+  .video-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(ellipse at center, transparent 50%, white 85%);
+  }
+}

src/components/home/index.tsx

@@ -7,11 +7,13 @@ import Discover from "../shared/Discover"
 import Configuration from "./Configuration"
 import Testimonials from "./Testimonials"
 import Announcement from "../shared/Announcement"
+import IntroductionVideo from "./IntroductionVideo"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Banner />
       <Configuration />
+      <IntroductionVideo />
       <Testimonials />
       <Benefits />
       <Graph />

tailwind.config.ts

@@ -66,6 +66,9 @@ module.exports = {
         SPACE_20: "80px",
         SPACE_21: "160px",
       },
+      screens: {
+        "3xl": "2200px",
+      },
     },
     fontFamily: {
       "space-grotesk": ["Space Grotesk", "sans-serif"],