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

Author: MananTank

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

@@ -93,6 +93,15 @@ html {
   }
 }
 
+/* If no data-theme is added in body, its in dark theme  */
+body:not([data-theme="light"]) .light-only {
+  display: none;
+}
+
+[data-theme="light"] .dark-only {
+  display: none;
+}
+
 code span {
   color: var(--code-dark-color);
 }

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>
   );