Include missing scripts and fix Card prop

Author: samkim

app/layout.tsx

@@ -8,6 +8,7 @@ import LogoIcon from "@/components/icons/logo-icon.svg";
 import BannerContents from "@/components/banner";
 import Providers from "@/components/providers";
 import { TocCTA } from "@/components/cta";
+import Scripts from "@/components/scripts";
 import type { Metadata, ResolvingMetadata } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import "./globals.css";
@@ -101,6 +102,7 @@ export default async function RootLayout({ children }) {
           <OurLayout>
             <SpeedInsights />
             <Providers>{children}</Providers>
+            <Scripts />
           </OurLayout>
         </Layout>
       </body>

app/page.mdx

@@ -8,7 +8,6 @@ import { Cards } from "nextra/components";
 
 <Cards num={2}>
   <Cards.Card
-    image
     arrow
     title="View"
     href="/spicedb/getting-started/discovering-spicedb"
@@ -17,7 +16,7 @@ import { Cards } from "nextra/components";
       <h3>SpiceDB Documentation</h3>
     </div>
   </Cards.Card>
-  <Cards.Card image arrow title="View" href="/authzed/guides/picking-a-product">
+  <Cards.Card arrow title="View" href="/authzed/guides/picking-a-product">
     <div className="p-4">
       <h3>AuthZed Products Documentation</h3>
     </div>

components/scripts.tsx

@@ -5,7 +5,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { Router } from "next/router";
 import Script from "next/script";
 import posthog from "posthog-js";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === "production";
 const baseDir = process.env.NEXT_PUBLIC_BASE_DIR || "";
@@ -112,10 +112,10 @@ function Posthog() {
 
 export default function Scripts() {
   return (
-    <div>
+    <Suspense fallback={<></>}>
       <Reo />
       <HubSpot />
       <Posthog />
-    </div>
+    </Suspense>
   );
 }