feat(metadata): Update page metadata and enhance video presentation

- Set metadataBase for consistent URL structure across pages
- Add Open Graph and Twitter metadata for improved social sharing
- Implement canonical links and robots directives for SEO optimization
- Replace static image with video previews for a more dynamic user experience

app/marketing/[id]/page.tsx

@@ -81,14 +81,33 @@ export default async function Home({ params }: IProps) {
               height={22}
               className="absolute top-4 left-1/2 -translate-x-1/2"
             />
-            <Image
+            <div className="-z-10 border-8 border-black rounded-4xl overflow-hidden h-full w-full">
+              <video
+                className="max-h-full w-full object-cover"
+                autoPlay
+                loop
+                muted
+                playsInline
+                preload="auto"
+                aria-label="Opp lens application preview on a mobile phone">
+                <source
+                  src="/mobile.webm"
+                  type="video/webm"
+                />
+                <source
+                  src="/mobile.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+            {/* <Image
               className="-z-10 border-8 border-black rounded-4xl overflow-hidden h-full w-full"
               src="/mobile.gif"
               width={300}
               height={920}
               loading="lazy"
               alt="phone"
-            />
+            /> */}
           </div>
         </section>
         <section className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative p-6 lg:p-14 -mt-16 z-20 lg:ml-28 ">