feat(docs): add demo to landing

apps/docs/docs/pages/index.mdx

@@ -4,12 +4,31 @@ layout: landing
 
 import { HomePage } from 'vocs/components'
 
-<HomePage.Root>
-  <img src="/logo.svg" className="w-24" />
-  <HomePage.Tagline>The TypeScript interface for Mina Protocol.</HomePage.Tagline>
-  <HomePage.Description>MinaJS is the missing piece for your smooth zkApp development on Mina.</HomePage.Description>
-  <HomePage.Buttons>
-    <HomePage.Button href="/getting-started" variant="accent">Get started</HomePage.Button>
-    <HomePage.Button href="https://github.com/palladians/mina-js">GitHub</HomePage.Button>
-  </HomePage.Buttons>
-</HomePage.Root>
+<div className="flex flex-col mt-16 gap-16">
+  <header className="flex flex-col gap-8">
+    <img src="/logo.svg" className="w-24 hidden dark:flex" />
+    <img src="/logo.svg" className="w-24 flex dark:hidden" />
+    <h1 className="font-bold text-6xl leading-[5rem]">The TypeScript interface for Mina Protocol.</h1>
+    <p className="text-xl">MinaJS is the missing piece for your smooth zkApp development on Mina.</p>
+    <div className="flex gap-2">
+      <a href="/getting-started" className="btn btn-lg btn-primary rounded-full">Get Started</a>
+      <a href="https://github.com/palladians/mina-js" target="_blank" rel="noopener noreferrer" className="btn btn-lg btn-outline rounded-full">GitHub</a>
+    </div>
+  </header>
+  <section>
+    <iframe src="https://stackblitz.com/edit/minajs?embed=1&file=index.ts&hideExplorer=1&theme=dark&view=editor" className="w-full h-[500px] border-0 rounded-lg overflow-hidden" />
+  </section>
+  <section className="card bg-neutral">
+    <div className="card-body gap-8">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-semibold">Sponsors</h2>
+        <a target="_blank" href="https://github.com/sponsors/palladians" rel="noopener noreferrer" className="btn btn-outline rounded-full">Become a sponsor</a>
+      </div>
+      <div className="grid grid-cols-4 gap8">
+        <a href="https://palladians.xyz" target="_blank" rel="noopener noreferrer">
+          <img src="/palladians.svg" />
+        </a>
+      </div>
+    </div>
+  </section>
+</div>

apps/docs/package.json

@@ -13,5 +13,8 @@
 		"react-dom": "latest",
 		"typescript": "latest",
 		"vocs": "latest"
+	},
+	"devDependencies": {
+		"daisyui": "^4.12.10"
 	}
 }

apps/docs/tailwind.config.cjs

@@ -1,8 +1,48 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+	darkMode: ["class"],
+	daisyui: {
+		themes: [
+			{
+				rosepine: {
+					primary: "#c4a7e7",
+					secondary: "#ebbcba",
+					accent: "#f6c177",
+					neutral: "#191724",
+					"base-100": "#1f1d2e",
+					info: "#31748f",
+					success: "#9ccfd8",
+					warning: "#f6c177",
+					error: "#eb6f92",
+				},
+				"rosepine-moon": {
+					primary: "#c4a7e7",
+					secondary: "#ea9a97",
+					accent: "#c4a7e7",
+					neutral: "#2a273f",
+					"base-100": "#232136",
+					info: "#3e8fb0",
+					success: "#9ccfd8",
+					warning: "#f6c177",
+					error: "#eb6f92",
+				},
+				"rosepine-dawn": {
+					primary: "#907aa9",
+					secondary: "#d7827e",
+					accent: "#907aa9",
+					neutral: "#faf4ed",
+					"base-100": "#fffaf3",
+					info: "#286983",
+					success: "#56949f",
+					warning: "#ea9d34",
+					error: "#b4637a",
+				},
+			},
+		],
+	},
 	content: ["./docs/**/*.{html,md,mdx,tsx,js,jsx}"],
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [require("daisyui")],
 };

apps/docs/vocs.config.ts

@@ -41,6 +41,7 @@ export default defineConfig({
 		{ icon: "github", link: "https://github.com/palladians/mina-js" },
 		{ icon: "discord", link: "https://get.pallad.co/discord" },
 	],
+	topNav: [{ text: "Pallad", link: "https://get.pallad.co/website" }],
 	sidebar: [
 		{
 			text: "Getting Started",