chore: og image (#1481)

* chore: og image

* chore: description

apps/status-page/src/app/(public)/client.tsx

···
           <p>
             You can contribute your own theme by creating a new file in the{" "}
             <code>@openstatus.theme-store</code> package. You&apos;ll only need
-            to override css variables. Make sure your object is satisfiying the{" "}
-            <code>Theme</code> interface.
+            to override css variables. If you are familiar with shadcn, you'll
+            know the trick (it also allows you to override `--radius`). Make
+            sure your object is satisfying the <code>Theme</code> interface.
           </p>
           <p>
             Go to the{" "}

apps/status-page/src/app/(public)/layout.tsx

···
 import { Link } from "@/components/common/link";
 import { ThemeProvider } from "@/components/themes/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import type { Metadata } from "next";
 import PlausibleProvider from "next-plausible";
-
-export const metadata: Metadata = {
-  title: "Theme Explorer",
-};
 
 export default async function Layout({
   children,

apps/status-page/src/app/metadata.ts

···
 
 export const TITLE = "openstatus";
 export const DESCRIPTION =
-  "Easily customize your status page using our built-in themes. Explore our themes and contribute new ones to the community.";
+  "Easily customize your status page using our built-in themes. Explore all themes and contribute new ones to the community.";
 
-const OG_TITLE = "Theme explorer";
+const OG_TITLE = "Theme Explorer";
 const OG_DESCRIPTION =
-  "Explore our themes for your status page and contribute new ones to the community.";
+  "Explore all themes for your status page and contribute new ones to the community.";
 const FOOTER = "themes.openstatus.dev";
-const IMAGE = "assets/og/dashboard-v2.png";
+const IMAGE = "assets/og/theme-explorer.png";
 
 export const defaultMetadata: Metadata = {
   title: {