Feat/added videos to specific sections

src/app/(landing-routes)/faqs/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { getFaqs } from "~/actions/externalPages";
 import FaqAccordion from "~/components/layouts/accordion/FaqAccordion";
@@ -19,6 +19,14 @@ const Faq = () => {
   const [faqs, setFaqs] = useState<FaqItem[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const videoReference = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (videoReference.current) {
+      videoReference.current.play();
+    }
+  }, []);
+
   // Get FAQs
   useEffect(() => {
     const fetchFaqs = async () => {
@@ -61,6 +69,22 @@ const Faq = () => {
           )}
         </div>
 
+        <div className="aspect-w-5 aspect-h-5 border-primary-70 mx-auto mt-3 w-[80%] border">
+          <video
+            ref={videoReference}
+            className="h-[80%] w-full object-cover"
+            loop
+            playsInline
+            controls
+          >
+            <source
+              src="/videos/freecompress-copy_C1FFA9B1-6325-4D47-83FC-232E47D8EE10.mp4"
+              type="video/mp4"
+            />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+
         <AdditionalInquiriesForm />
       </main>
     </div>

src/components/layouts/homepage/HowItWorks.tsx

@@ -1,12 +1,50 @@
+"use client";
+
 import { useTranslations } from "next-intl";
+import React, { useEffect, useRef, useState } from "react";
 
 import { Easy, Prebuilt, Scalable } from "./svgs";
 
-const HowItWorks = () => {
+const HowItWorks: React.FC = () => {
   const t = useTranslations("howItWorks");
+  const [showVideo, setShowVideo] = useState(true);
+  const timeoutReference = useRef<NodeJS.Timeout | null>(null);
+
+  const handleCloseVideo = () => {
+    setShowVideo(false);
+    timeoutReference.current = setTimeout(() => setShowVideo(true), 9000);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutReference.current) {
+        clearTimeout(timeoutReference.current);
+      }
+    };
+  }, []);
+
   return (
-    <div className="bg-[#ffffff] py-20">
+    <div className="relative bg-[#ffffff] py-20">
+      {showVideo && (
+        <div className="fixed right-0 top-3/4 z-50 -translate-y-1/2 transform bg-white p-4 shadow-lg transition-all duration-300 ease-in-out">
+          <button
+            onClick={handleCloseVideo}
+            className="absolute right-2 top-2 z-30 h-5 w-5 items-center justify-center rounded-full bg-black text-[12px] text-white hover:text-gray-200"
+          >
+            X
+          </button>
+          <video className="h-auto w-72" loop autoPlay muted playsInline>
+            <source
+              src="/videos/freecompress-Boilerplate Ad Video.mp4"
+              type="video/mp4"
+            />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      )}
+
       <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
+        {/* Rest of your existing code */}
         <div className="flex flex-col items-center lg:flex-row">
           <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
             <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">