DOC-215:Add react page

src/components/shared/MarkdownContainer.astro

@@ -41,7 +41,7 @@ const { class: className } = Astro.props;
         }
 
         & :global(p) {
-            @apply mb-8 text-text/80 dark:text-text/60;
+            @apply mb-4 text-text/80 dark:text-text/60;
 
             &:last-child {
                 @apply mb-0;

src/content/doc-sdk-java/components/JavaVersion.astro

@@ -1,3 +1,9 @@
+<!-- ---
+const result = await fetch(
+    'https://search.maven.org/solrsearch/select?q=g:%22com.surrealdb%22+AND+a:%22surrealdb%22&wt=json'
+);
+const data = await result.json();
+const version = data?.response?.docs[0]?.latestVersion ?? 'Unknown';
 ---
 let version = 'Unknown';
 try {

src/content/doc-sdk-javascript/frameworks/_category_.json

@@ -0,0 +1,4 @@
+{
+    "sidebar_label": "Frameworks",
+    "sidebar_position": 7
+}

src/content/doc-sdk-javascript/frameworks/index.mdx

@@ -0,0 +1,77 @@
+---
+sidebar_position: 1
+sidebar_label: Frameworks
+title: JavaScript | SDK | Frameworks
+description: The SurrealDB SDK for JavaScript can run in memory using the Node.js engine or in a browser using the WebAssembly engine.
+---
+import Boxes from "@components/boxes/Boxes.astro";
+import IconBox from "@components/boxes/IconBox.astro";
+import LightReact from "@img/icon/light/reactjs.png";
+import LightNext from "@img/icon/light/nextjs.png";
+import LightVue from "@img/icon/light/vuejs.png";
+import LightAngular from "@img/icon/light/angular.png";
+import LightSolid from "@img/icon/light/solidjs.png";
+import LightSvelte from "@img/icon/light/svelte.png";
+import DarkReact from "@img/icon/dark/reactjs.png";
+import DarkNext from "@img/icon/dark/nextjs.png";
+import DarkVue from "@img/icon/dark/vuejs.png";
+import DarkAngular from "@img/icon/dark/angular.png";
+import DarkSolid from "@img/icon/dark/solidjs.png";
+import DarkSvelte from "@img/icon/dark/sveltejs.png";
+import Version from '@components/Version.astro';
+
+# Frameworks 
+
+The SurrealDB JavaScript SDK can be used with your favorite frameworks depending on your use case.  Utilising support from TanStack Query, with support for data caching and syncing, and authentication.
+
+<Boxes>
+    <IconBox
+        title="React"
+        href="/docs/sdk/javascript/frameworks/react"
+        status="available"
+        icon={{
+            light: LightReact,
+            dark: DarkReact,
+        }}
+    />
+    <IconBox
+        title="Next.js"
+        status="coming soon"
+        icon={{
+            light: LightNext,
+            dark: DarkNext,
+        }}
+    />
+    <IconBox
+        title="Vue.js"
+        status="coming soon"
+        icon={{
+            light: LightVue,
+            dark: DarkVue,
+        }}
+    />
+    <IconBox
+        title="Angular"
+        status="coming soon"
+        icon={{
+            light: LightAngular,
+            dark: DarkAngular,
+        }}
+    />
+    <IconBox
+        title="Solid.js"
+        status="coming soon"
+        icon={{
+            light: LightSolid,
+            dark: DarkSolid,
+        }}
+    />
+    <IconBox
+        title="Svelte"
+        status="coming soon"
+        icon={{
+            light: LightSvelte,
+            dark: DarkSvelte,
+        }}
+    />
+</Boxes>