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/(home)/layout.tsx

@@ -19,9 +19,17 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://opplens.com"),
   title: "Opp lens - AI-Powered Tender Management",
   description:
     "Democratizing Tender Access for SMEs with AI-Powered Tender Management.",
+  alternates: {
+    canonical: "/",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
   icons: {
     icon: "/fav-icon.svg",
   },
@@ -151,7 +159,6 @@ export default async function RootLayout({
                   alt="Opp lens logo"
                   width={180}
                   height={30}
-                  priority
                 />
                 <div>
                   <p className="text-black my-2">

app/(home)/page.tsx

@@ -11,10 +11,24 @@ export const metadata: Metadata = {
   openGraph: {
     title: "Opp lens - AI-Powered Tender Management",
     description: "Win more tenders automatically with our AI-powered platform",
+    url: "https://opplens.com/",
     type: "website",
     locale: "en_US",
     siteName: "Opp lens",
   },
+  twitter: {
+    card: "summary_large_image",
+    title: "Opp lens - AI-Powered Tender Management",
+    description: "Win more tenders automatically with our AI-powered platform",
+    images: ["/images/opp-lens-mobile.jpg"],
+  },
+  alternates: {
+    canonical: "https://opplens.com/",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
   icons: {
     icon: "/fav-icon.svg",
   },
@@ -60,7 +74,7 @@ export default function Home() {
             </p>
           </div>
         </div>
-        <div className="mx-12 md:mx-52 lg:mx-28 -z-20 relative flex justify-center h-[650px] lg:h-[505px]">
+        <div className="mx-12 md:mx-52 lg:mx-28 -z-20 relative flex justify-center h-[650px] lg:h-[510px]">
           <span className="opacity-0 lg:opacity-100">
             <Image
               src={"/dynamic-island.svg"}
@@ -79,14 +93,34 @@ export default function Home() {
               className="absolute top-4 left-1/2 -translate-x-1/2"
             />
           </span>
-          <Image
+          {/* <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"
-          />
+            sizes="(max-width: 1024px) 60vw, 300px"
+            priority
+            alt="Opp lens application preview on a mobile phone"
+          /> */}
+          <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>
         </div>
       </section>
       <section className="flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative py-13 px-14 -mt-36 z-20 md:grid lg:grid-cols-3 lg:flex-row">

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 ">

app/marketing/page.tsx

@@ -157,14 +157,33 @@ export default function Home() {
               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>