[TOOL-3173] Portal: Update hero iamge, OG image on landing page (#6017)

Author: MananTank

apps/portal/src/app/_images/docs-hero-dark.png

@@ -91,6 +91,14 @@ html {
     --input: 0 0% 85%;
     --ring: 0 0% 80%;
   }
+
+  [data-theme="light"] .dark-only {
+    display: none;
+  }
+
+  [data-theme="dark"] .light-only {
+    display: none;
+  }
 }
 
 code span {

apps/portal/src/app/_images/docs-hero-light.png

@@ -26,10 +26,6 @@ const monoFont = Fira_Code({
 export const metadata = createMetadata({
   title: "thirdweb docs",
   description: "thirdweb developer portal",
-  image: {
-    title: "Build apps and games on any EVM chain",
-    icon: "thirdweb",
-  },
 });
 
 export default function RootLayout({

apps/portal/src/app/_images/docs-hero.png

@@ -1,7 +1,8 @@
 import { Heading } from "@/components/Document";
 import Image from "next/image";
 import Link from "next/link";
-import DocsHero from "./_images/docs-hero.png";
+import DocsHeroDark from "./_images/docs-hero-dark.png";
+import DocsHeroLight from "./_images/docs-hero-light.png";
 
 export default function Page() {
   return (
@@ -34,7 +35,8 @@ function Hero() {
 
       {/* right */}
       <div className="hidden justify-center lg:flex">
-        <Image src={DocsHero} alt="" className="w-full" />
+        <Image src={DocsHeroDark} alt="" className="dark-only w-full" />
+        <Image src={DocsHeroLight} alt="" className="light-only w-full" />
       </div>
     </section>
   );