svelte and nx rewrite

2025-08-03 18:24:31 +02:00
parent e0a743056f
commit cb47cbc620
85 changed files with 1769 additions and 5202 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -15,14 +15,7 @@ node_modules
 # Testing
 coverage

-# Turbo
-.turbo
-
-# Vercel
-.vercel
-
 # Build Outputs
-.next/
 out/
 build
 dist
@@ -36,3 +29,9 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# NX
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # ✨ Lumify Sanity Template

-Official CLI and starter template for building modern web apps with Next.js, Sanity, Bun, and Shadcn UI — bundled into a single monorepo.
+Official CLI and starter template for building modern web apps with Sveltekit, Sanity, Bun, and Shadcn UI — bundled into a single monorepo.

 ---

@@ -8,9 +8,9 @@ Official CLI and starter template for building modern web apps with Next.js, San

 The `@lumify-systems/template-sanity` CLI sets up a fully functional monorepo with:

-* ⚡ **Next.js App Router** for the frontend
+* ⚡ **Sveltekit** for the frontend
 * 📝 **Sanity Studio** CMS with custom schemas
-* 🏗️ **TurboRepo** structure (client, studio, shared packages)
+* 🏗️ **NX Monorepo** structure (client, studio, shared packages)
 * 🎨 **Shadcn UI** components and theming pre-installed
 * 🧪 Preconfigured dev tools (Tailwind, TypeScript, ESLint, Prettier)

@@ -51,7 +51,7 @@ After that:

 ```
 apps/
-  client/             # Next.js frontend
+  client/             # Svelte frontend
  studio/             # Sanity Studio CMS
 packages/
  ui/                 # Shadcn components & design system
@@ -59,7 +59,7 @@ packages/
  typescript-config/  # Shared TypeScript presets
 ```

-All apps and packages are connected with TurboRepo workspaces.
+All apps and packages are connected with NX workspaces.

 You can run commands from the root:

--- a/debug.js
+++ b/debug.js
@@ -1,17 +0,0 @@
-#!/usr/bin/env node
-
-import * as p from '@clack/prompts';
-
-async function demoSpinner() {
-  await p.tasks([
-    {
-      title: 'Running demo task',
-      task: async () => {
-        await new Promise((r) => setTimeout(r, 1500));
-        return 'Demo completed!';
-      },
-    },
-  ]);
-}
-
-demoSpinner().catch(console.error);
--- a/index.js
+++ b/index.js
@@ -201,6 +201,14 @@ async function main() {
        connFile = connFile.replace(/projectId: "[^"]+"/, `projectId: "${sanityJson.projectId}"`);
        await fs.writeFile(connPath, connFile);

+        // Update wrangler.jsonc with project name
+        const wranglerPath = path.join(rootDir, "apps/client/wrangler.jsonc");
+        if (await fs.pathExists(wranglerPath)) {
+          let wranglerFile = await fs.readFile(wranglerPath, "utf8");
+          wranglerFile = wranglerFile.replace(/"name": "[^"]+"/, `"name": "${kebabName}"`);
+          await fs.writeFile(wranglerPath, wranglerFile);
+        }
+
        return `Sanity project created with ID: ${sanityJson.projectId}`;
      },
    },
@@ -246,7 +254,7 @@ async function main() {
  }

  const corsOrigins = [
-    'http://localhost:3000',
+    'http://localhost:5173',
    'https://*.api.sanity.io',
    'wss://*.api.sanity.io',
    `https://${kebabName}.sanity.studio`,
@@ -321,7 +329,7 @@ async function main() {
    `  ${color.bold(color.green(pmRun))} ${color.dim('# Start your local dev server')} ${color.yellow('🖥️')}\n` +
    `  ${color.bold(color.green(pmDeploy))} ${color.dim('# Deploy your Sanity Studio')} ${color.yellow('🚀')}\n\n` +
    color.dim('Local development:\n') +
-    `  • App: ${color.cyan('http://localhost:3000')} ${color.yellow('🌐')}\n` +
+    `  • App: ${color.cyan('http://localhost:5173')} ${color.yellow('🌐')}\n` +
    `  • Studio: ${color.cyan('http://localhost:3333')} ${color.yellow('🛠️')}\n\n` +
    color.dim('After deploying:\n') +
    `  • Studio: ${color.cyan(`https://${kebabName}.sanity.studio`)} ${color.yellow('✨')}`
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
    "access": "restricted",
    "registry": "https://npm.pkg.github.com"
  },
-  "description": "Template for Lumify Sanity and Next.js monorepo setup.",
+  "description": "Template for Lumify Sanity and Svelte monorepo setup.",
  "bin": {
    "template-sanity": "./index.js"
  },
--- a/template/.gitignore
+++ b/template/.gitignore
@@ -15,19 +15,11 @@ node_modules
 # Testing
 coverage

-# Turbo
-.turbo
-
-# Vercel
-.vercel
-
 # Build Outputs
-.next/
 out/
 build
 dist

-
 # Debug
 npm-debug.log*
 yarn-debug.log*
@@ -36,3 +28,9 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# NX
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
--- a/template/apps/client/.gitignore
+++ b/template/apps/client/.gitignore
@@ -1,41 +1,22 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+node_modules

-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
+# Output
+.output
+.netlify
+.wrangler
+/.svelte-kit
 /build

-# misc
+# OS
 .DS_Store
-*.pem
+Thumbs.db

-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
+# Env
+.env
+.env.*
+!.env.example
+!.env.test

-# env files (can opt-in for committing if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/template/apps/client/.npmrc
+++ b/template/apps/client/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/template/apps/client/.prettierignore
+++ b/template/apps/client/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/template/apps/client/.prettierrc
+++ b/template/apps/client/.prettierrc
@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/app.css"
+}
--- a/template/apps/client/README.md
+++ b/template/apps/client/README.md
@@ -1,36 +1,38 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# sv

-## Getting Started
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

-First, run the development server:
+## Creating a project

-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Developing

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```sh
+npm run dev

-## Learn More
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```

-To learn more about Next.js, take a look at the following resources:
+## Building

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+To create a production version of your app:

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```sh
+npm run build
+```

-## Deploy on Vercel
+You can preview the production build with `npm run preview`.

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/template/apps/client/components.json
+++ b/template/apps/client/components.json
@@ -1,21 +1,16 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}
--- a/template/apps/client/next.config.ts
+++ b/template/apps/client/next.config.ts
@@ -1,34 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  eslint: { ignoreDuringBuilds: true },
-  images: {
-    remotePatterns: [
-      {
-        hostname: "cdn.sanity.io",
-        pathname: "/images/**",
-        protocol: "https",
-      },
-      {
-        hostname: "lh3.googleusercontent.com",
-        pathname: "**",
-        protocol: "https",
-      },
-    ],
-  },
-  headers: async () => {
-    return [
-      {
-        source: "/:path*",
-        headers: [
-          {
-            key: "X-Frame-Options",
-            value: "ALLOWALL",
-          },
-        ],
-      },
-    ];
-  },
-};
-
-export default nextConfig;
--- a/template/apps/client/package.json
+++ b/template/apps/client/package.json
@@ -1,45 +1,47 @@
 {
-  "name": "client",
-  "version": "0.1.0",
-  "private": true,
-  "engines": {
-    "bun": ">=1.2.12"
-  },
-  "type": "module",
-  "packageManager": "bun@1.2.12",
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@sanity/client": "^7.8.1",
-    "@repo/sanity-connection": "*",
-    "@repo/typescript-config": "*",
-    "@repo/ui": "*",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.23.9",
-    "lucide-react": "^0.525.0",
-    "next": "15.4.3",
-    "next-sanity": "^10.0.4",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "tailwind-merge": "^3.3.1"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/node": "^24.1.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "eslint": "^9.31.0",
-    "eslint-config-next": "15.4.3",
-    "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.5",
-    "typescript": "^5.8.3"
-  }
+	"name": "client",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"dependencies": {
+		"@portabletext/svelte": "^3.0.0",
+		"@repo/sanity-connection": "*",
+		"@repo/typescript-config": "*",
+		"@repo/ui": "*",
+		"@sanity/asset-utils": "^2.2.1",
+		"@sanity/client": "^7.8.1",
+		"@sanity/svelte-loader": "^1.13.47",
+		"@sanity/visual-editing": "^3.0.1",
+		"@sveltejs/adapter-cloudflare-workers": "^2.9.0"
+	},
+	"devDependencies": {
+		"@lucide/svelte": "^0.536.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0",
+		"clsx": "^2.1.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwind-merge": "^3.3.1",
+		"tailwind-variants": "^1.0.0",
+		"tailwindcss": "^4.0.0",
+		"tw-animate-css": "^1.3.6",
+		"typescript": "^5.0.0",
+		"vite": "^7.0.4"
+	}
 }
--- a/template/apps/client/postcss.config.mjs
+++ b/template/apps/client/postcss.config.mjs
@@ -1,5 +0,0 @@
-const config = {
-  plugins: ["@tailwindcss/postcss"],
-};
-
-export default config;
--- a/template/apps/client/public/manifest.webmanifest
+++ b/template/apps/client/public/manifest.webmanifest
@@ -1,14 +0,0 @@
-{
-  "icons": [
-    {
-      "src": "/favicon-192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "/favicon-512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ]
-}
--- a/template/apps/client/src/app/globals.css
+++ b/template/apps/client/src/app/globals.css
@@ -1,16 +1,94 @@
@import "tailwindcss";
+
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

-@config "../../tailwind.config.ts";
+@layer base {
+  :root {
+    --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+  
+  body {
+    font-family: var(--font-sans);
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--bg-primary);
+  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
@@ -43,62 +121,11 @@
  --color-sidebar-ring: var(--sidebar-ring);
 }

-:root {
-  --radius: 0.625rem;
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
-    @apply font-sans bg-background text-foreground text-lg;
+    @apply bg-background text-foreground;
  }
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-serif;
-  }
-
-  h1 {
-    @apply text-4xl md:text-6xl uppercase font-bold;
-  }
-
-  h2 {
-    @apply text-3xl font-bold;
-  }
-
-  h3 {
-    @apply text-xl;
-  }
-  h4 {
-    @apply text-lg;
-  }
-}
+}
--- a/template/apps/client/src/app.d.ts
+++ b/template/apps/client/src/app.d.ts
@@ -0,0 +1,9 @@
+import type {LoaderLocals} from '@sanity/svelte-loader'
+
+declare global {
+  namespace App {
+    interface Locals extends LoaderLocals {}
+  }
+}
+
+export {}
--- a/template/apps/client/src/app.html
+++ b/template/apps/client/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/template/apps/client/src/app/[slug]/page.tsx
+++ b/template/apps/client/src/app/[slug]/page.tsx
@@ -1,92 +0,0 @@
-import { defineQuery } from "next-sanity";
-import { sanityFetch } from "@/sanity/live";
-import type { Custom } from "@/sanity/sanity.types";
-import type { Metadata } from "next";
-import SanityBlock from "@/components/sanity-block";
-import { notFound } from "next/navigation";
-import { fetchSettings } from "@/sanity/settings";
-
-const CUSTOMS_QUERY = defineQuery(`*[_type == "custom"]{ slug }`);
-const CUSTOM_QUERY = defineQuery(
-  `*[_type == "custom" && slug.current == $slug][0]`,
-);
-
-type PageParams = Promise<{
-  slug: string;
-}>;
-
-export async function generateStaticParams() {
-  const customs: Custom[] = (
-    await sanityFetch({
-      query: CUSTOMS_QUERY,
-      stega: false,
-      perspective: "published",
-    })
-  ).data;
-  return customs.map((custom) => ({
-    slug: custom.slug?.current ?? "",
-  }));
-}
-
-export async function generateMetadata(props: {
-  params: Promise<PageParams>;
-}): Promise<Metadata> {
-  const params = await props.params;
-  if (!params.slug) {
-    return notFound();
-  }
-  const settings: { title: string } = await fetchSettings("title");
-  const custom: Custom = (
-    await sanityFetch({
-      query: CUSTOM_QUERY,
-      params,
-      stega: false,
-      perspective: "published",
-    })
-  ).data;
-  const firstBlock = custom?.body ? custom.body[0] : undefined;
-  let description: string | undefined = undefined;
-  if (firstBlock && firstBlock._type === "block" && firstBlock.children) {
-    description = firstBlock.children.map((child) => child.text).join(" ");
-  }
-
-  const firstWord = custom.title ? custom.title.split(" ")[0] : "";
-  return {
-    title: `${firstWord} | ${settings.title}`,
-    description,
-    openGraph: {
-      title: `${firstWord} | ${settings.title}`,
-      description,
-      type: "article",
-      url: `/${custom.slug}`,
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: `${firstWord} | ${settings.title}`,
-      description,
-    },
-  };
-}
-
-export default async function CustomPage(props: {
-  params: Promise<PageParams>;
-}) {
-  const params = await props.params;
-  const custom: Custom = (await sanityFetch({ query: CUSTOM_QUERY, params }))
-    .data;
-  if (!custom) {
-    return notFound();
-  }
-
-  return (
-    <main className="container mx-auto min-h-screen max-w-3xl md:max-w-4xl p-8 flex flex-col gap-4">
-      <h2>{custom.title}</h2>
-      <div
-        className="items-start mt-2 mb-8 text-left"
-        style={{ maxWidth: "100%" }}
-      >
-        {custom.body && <SanityBlock body={custom.body} />}
-      </div>
-    </main>
-  );
-}
--- a/template/apps/client/src/app/actions.ts
+++ b/template/apps/client/src/app/actions.ts
@@ -1,10 +0,0 @@
-'use server'
-
-import {draftMode} from 'next/headers'
-
-export async function disableDraftMode() {
-  const disable = (await draftMode()).disable()
-  const delay = new Promise((resolve) => setTimeout(resolve, 1000))
-
-  await Promise.allSettled([disable, delay]);
-}
--- a/template/apps/client/src/app/api/draft-mode/enable/route.ts
+++ b/template/apps/client/src/app/api/draft-mode/enable/route.ts
@@ -1,9 +0,0 @@
-import { client } from "@/sanity/client";
-import { sanityConnection } from "@repo/sanity-connection";
-import { defineEnableDraftMode } from "next-sanity/draft-mode";
-
-export const { GET } = defineEnableDraftMode({
-  client: client.withConfig({
-    token: sanityConnection.publicViewerToken,
-  }),
-});
--- a/template/apps/client/src/app/layout.tsx
+++ b/template/apps/client/src/app/layout.tsx
@@ -1,61 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Noto_Sans } from "next/font/google";
-import "./globals.css";
-import { VisualEditing } from "next-sanity";
-import { draftMode } from "next/headers";
-import { SanityLive } from "@/sanity/live";
-import { fetchSettings } from "@/sanity/settings";
-import { getImage } from "@/lib/asset-to-url";
-import Footer from "@/components/footer";
-
-const sans = Geist({
-  variable: "--font-sans",
-  subsets: ["latin"],
-});
-
-export async function generateMetadata(): Promise<Metadata> {
-  const settings = await fetchSettings();
-  const logo = await getImage(settings?.logo?.asset?._ref);
-
-  return {
-    title: settings.title,
-    description: settings.description,
-    openGraph: {
-      title: settings.longTitle,
-      description: settings.description
-    },
-    twitter: {
-      title: settings.longTitle,
-      description: settings.description,
-    },
-    robots: {
-      index: true,
-      follow: true,
-    },
-    icons: {
-      icon: logo.url,
-      apple: logo.url,
-    },
-    manifest: "/manifest.webmanifest",
-  };
-}
-
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const settings = await fetchSettings();
-  return (
-    <html lang="en" className="scroll-smooth">
-      <body
-        className={`${sans.variable} antialiased text-text`}
-      >
-        {children}
-        <Footer settings={settings} />
-        {(await draftMode()).isEnabled && <VisualEditing />}
-        <SanityLive />
-      </body>
-    </html>
-  );
-}
--- a/template/apps/client/src/app/page.tsx
+++ b/template/apps/client/src/app/page.tsx
@@ -1,26 +0,0 @@
-import { sanityFetch } from "@/sanity/live";
-import CTA from "@/components/section/cta";
-import { getImage, getImages } from "@/lib/asset-to-url";
-import { Home } from "@/sanity/sanity.types";
-
-const HOME_QUERY = `*[_type == "home"][0]`;
-
-export default async function IndexPage() {
-  const { data: home }: { data: Home } = await sanityFetch({
-    query: HOME_QUERY,
-  });
-
-  const background = await getImage(
-    home.headerSection?.backgroundImage?.asset?._ref
-  );
-
-  return (
-    <>
-      <CTA
-        cta={home.headerSection}
-        background={background}
-        textColor="text-white"
-      />
-    </>
-  );
-}
--- a/template/apps/client/src/components/ColorTest.tsx
+++ b/template/apps/client/src/components/ColorTest.tsx
@@ -1,30 +0,0 @@
-import React from 'react';
-
-export default function ColorTest() {
-  return (
-    <div className="p-8 space-y-4">
-      <h1 className="text-2xl font-bold mb-6">Color Test</h1>
-      
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">Primitives (should work):</h2>
-        <div className="bg-primary1-500 text-white p-2 rounded">bg-primary1-500</div>
-        <div className="bg-primary2-500 text-white p-2 rounded">bg-primary2-500</div>
-        <div className="bg-secondary1-100 p-2 rounded border">bg-secondary1-100</div>
-      </div>
-
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">Variables (should work now):</h2>
-        <div className="bg-olive-green text-white p-2 rounded">bg-olive-green</div>
-        <div className="bg-pine-green text-white p-2 rounded">bg-pine-green</div>
-        <div className="bg-light-sage p-2 rounded border">bg-light-sage</div>
-      </div>
-
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">Brand Colors (should work now):</h2>
-        <div className="bg-bg-primary p-2 rounded border">bg-bg-primary</div>
-        <div className="bg-bg-secondary p-2 rounded border">bg-bg-secondary</div>
-        <div className="text-text p-2 rounded border">text-text (blue text)</div>
-      </div>
-    </div>
-  );
-}
--- a/template/apps/client/src/components/footer.tsx
+++ b/template/apps/client/src/components/footer.tsx
@@ -1,15 +0,0 @@
-import React from "react";
-import { Settings } from "@/sanity/sanity.types";
-
-export default function Footer({ settings }: { settings: Settings }) {
-  return (
-    <div className="flex flex-col gap-4">
-      <label className="text-sm pb-4 px-8">
-        {settings.footer?.replace(
-          "{YEAR}",
-          new Date().getFullYear().toString()
-        )}
-      </label>
-    </div>
-  );
-}
--- a/template/apps/client/src/components/link-button.tsx
+++ b/template/apps/client/src/components/link-button.tsx
@@ -1,87 +0,0 @@
-import Link from "next/link";
-import { ArrowRight, ExternalLink, type LucideIcon } from "lucide-react";
-import React, { createElement } from "react";
-import { Button } from "./ui/button";
-import { cn } from "@/lib/utils";
-
-export default function LinkButton({
-  text,
-  linkData,
-  variant = "default",
-  radius = "sm",
-  size = "default",
-  extraIcon,
-  showIcon = true,
-  className,
-  onPress,
-  ...props
-}: {
-  text: string;
-  linkData: { href: string; target: string } | null;
-  variant?:
-    | "ghost"
-    | "default"
-    | "secondary"
-    | "link"
-    | "destructive"
-    | "outline";
-  size?: "default" | "sm" | "lg" | "icon";
-  extraIcon?: LucideIcon;
-  showIcon?: boolean;
-  className?: string;
-  onPress?: () => void;
-  [key: string]: any;
-}) {
-  const isExternal = linkData?.href?.startsWith("http");
-
-  return (
-    <Button
-      asChild
-      variant={variant}
-      size={size}
-      rel={isExternal ? "noopener noreferrer" : undefined}
-      onClick={onPress}
-      className={cn(
-        className,
-        `
-        group
-        rounded-full
-        font-semibold
-        transition-all
-        duration-300
-        no-underline
-        flex
-        items-center
-        gap-2
-        ${showIcon ? "pr-4" : "px-6"}
-        active:transform
-        active:translate-y-[1px]
-      `
-      )}
-      {...props}
-    >
-      <Link
-        href={linkData?.href ?? ""}
-        target={linkData?.target ?? "_self"}
-      >
-        {extraIcon && (
-          <span className="transition-transform duration-300 group-hover:scale-110">
-            {createElement(extraIcon, { size: size === "lg" ? 24 : 20 })}
-          </span>
-        )}
-
-        <span>{text}</span>
-
-        {showIcon && (
-          <span className="transition-all duration-300 group-hover:transform group-hover:translate-x-1">
-            {isExternal ? (
-              <ExternalLink size={size === "lg" ? 24 : 20} />
-            ) : (
-              <ArrowRight strokeWidth={3} size={size === "lg" ? 24 : 20} />
-            )}
-          </span>
-        )}
-      </Link>
-    </Button>
-  );
-}
--- a/template/apps/client/src/components/sanity-block.tsx
+++ b/template/apps/client/src/components/sanity-block.tsx
@@ -1,243 +0,0 @@
-"use client";
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { PortableText, createDataAttribute, stegaClean } from "next-sanity";
-import {
-  getFileAsset,
-  getImageAsset,
-  getImageDimensions,
-  SanityFileAsset,
-} from "@sanity/asset-utils";
-import type {
-  BlockContent,
-  Button as SanityButton,
-  SanityImageAsset,
-} from "@/sanity/sanity.types";
-import { client } from "@/sanity/client";
-import LinkButton from "./link-button";
-import Image from "next/image";
-import Link from "next/link";
-import { DownloadIcon } from "lucide-react";
-import { useDeconstructLink } from "@/lib/link-client";
-import { dynamicHeight, generateImageUrl } from "@/lib/image-url";
-import { Button } from "./ui/button";
-import { sanityConnection } from "@repo/sanity-connection";
-
-const { projectId, dataset } = client.config();
-
-export function Callout(props: any) {
-  if (!props) {
-    return null;
-  }
-  return (
-    <div className="bg-secondary-500 text-secondary-50 shadow-lg rounded-md p-6 border my-6 border-gray-200">
-      <PortableText
-        value={props.value.content}
-        components={{
-          block: {
-            h1: ({ children }: any) => <h1>{children}</h1>,
-            h2: ({ children }: any) => <h2>{children}</h2>,
-            h3: ({ children }: any) => <h3>{children}</h3>,
-            h4: ({ children }: any) => <h4>{children}</h4>,
-            h5: ({ children }: any) => <h5>{children}</h5>,
-            h6: ({ children }: any) => <h6>{children}</h6>,
-          },
-        }}
-      />
-    </div>
-  );
-}
-
-export function PortableButton(value: { value: SanityButton }) {
-  const linkData = useDeconstructLink(value.value.link);
-  return (
-    <div className="flex justify-left">
-      <LinkButton
-        className="px-5"
-        text={value.value.text ?? ""}
-        color={"default"}
-        linkData={linkData}
-      />
-    </div>
-  );
-}
-
-export function PortableImage({
-  value,
-  isInline,
-}: {
-  value: SanityImageAsset;
-  isInline: boolean;
-}) {
-  const { width, height } = getImageDimensions(value);
-  const imageAsset = getImageAsset(value, {
-    projectId: sanityConnection.projectId ?? "",
-    dataset: sanityConnection.dataset ?? "",
-  });
-  const attr = createDataAttribute({
-    id: imageAsset._id,
-    type: imageAsset._type,
-    workspace: "production",
-  });
-
-  return (
-    <Image
-      data-sanity={attr("body")}
-      src={generateImageUrl(value)}
-      width={
-        isInline ? (width >= 100 ? 100 : width) : width >= 1200 ? 1200 : width
-      }
-      height={dynamicHeight(height, width, isInline)}
-      alt={value.altText || " "}
-      loading="lazy"
-      className="border rounded-md shadow-md"
-      style={{
-        display: isInline ? "inline-block" : "block",
-        aspectRatio: width / height,
-        maxHeight: "400px",
-        maxWidth: "100%",
-        width: "auto",
-      }}
-    />
-  );
-}
-
-export function PortableFile({ value }: { value: SanityFileAsset }) {
-  const fileAsset = getFileAsset(value, {
-    projectId: projectId ?? "",
-    dataset: dataset ?? "",
-  });
-  const attr = createDataAttribute({
-    id: fileAsset._id,
-    type: fileAsset._type,
-    workspace: "production",
-  });
-
-  const filename: string =
-    fileAsset?.originalFilename ||
-    `${fileAsset.extension.charAt(0).toUpperCase() + fileAsset.extension?.slice(1)} herunterladen`;
-
-  return (
-    <div className="flex justify-left">
-      <LinkButton
-        linkData={{ href: fileAsset.url, target: "" }}
-        data-sanity={attr("body")}
-        target="_blank"
-        rel="noopener noreferrer"
-        download
-        showIcon={false}
-        extraIcon={DownloadIcon}
-        text={
-          filename.length > 20
-            ? `${filename.slice(0, 10)}...${filename.slice(-10)}`
-            : filename
-        }
-      />
-    </div>
-  );
-}
-
-function CustomLink(props: { children: React.ReactNode; value?: any }) {
-  const { value, children } = props;
-
-  let linkUrl = null;
-  let target = "_self";
-
-  if (value?.href) {
-    const href = value.href;
-
-    if (href.type === "external" && href.url) {
-      linkUrl = href.url;
-      target = href.blank ? "_blank" : "_self";
-    } else if (href.type === "internal" || href._type === "reference") {
-      const resolved = useDeconstructLink(href);
-      if (resolved) {
-        const ButtonComponent = Button as any;
-        return (
-          <ButtonComponent variant="link" className="p-0 h-auto font-normal" asChild>
-            <Link href={resolved}>
-              {children}
-            </Link>
-          </ButtonComponent>
-        );
-      }
-    } else if (typeof href === "string") {
-      linkUrl = href;
-    }
-  }
-
-  if (linkUrl) {
-    const ButtonComponent = Button as any;
-    return (
-      <ButtonComponent variant="link" className="p-0 h-auto font-normal" asChild>
-        <Link
-          href={linkUrl}
-          target={target}
-          rel={target === "_blank" ? "noopener noreferrer" : undefined}
-        >
-          {children}
-        </Link>
-      </ButtonComponent>
-    );
-  }
-
-  return <>{children}</>;
-}
-
-const components = {
-  types: {
-    image: PortableImage,
-    button: PortableButton,
-    callout: Callout,
-    file: PortableFile,
-  },
-  block: {
-    h1: ({ children }: any) => <h1>{children}</h1>,
-    h2: ({ children }: any) => <h2>{children}</h2>,
-    h3: ({ children }: any) => <h3>{children}</h3>,
-    h4: ({ children }: any) => <h4>{children}</h4>,
-    h5: ({ children }: any) => <h5>{children}</h5>,
-    h6: ({ children }: any) => <h6>{children}</h6>,
-  },
-  marks: {
-    left: ({ children }: { children: React.ReactNode }) => (
-      <span style={{ textAlign: "left", width: "100%", display: "block" }}>
-        {children}
-      </span>
-    ),
-    center: ({ children }: { children: React.ReactNode }) => (
-      <span style={{ textAlign: "center", width: "100%", display: "block" }}>
-        {children}
-      </span>
-    ),
-    right: ({ children }: { children: React.ReactNode }) => (
-      <span style={{ textAlign: "right", width: "100%", display: "block" }}>
-        {children}
-      </span>
-    ),
-    textColor: ({
-      children,
-      value = { value: "" },
-    }: {
-      children: React.ReactNode;
-      value?: { value: string };
-    }) => <span style={{ color: stegaClean(value.value) }}>{children}</span>,
-    highlightColor: ({
-      children,
-      value = { value: "" },
-    }: {
-      children: React.ReactNode;
-      value?: { value: string };
-    }) => (
-      <span style={{ background: stegaClean(value.value) }}>{children}</span>
-    ),
-    link: CustomLink,
-  },
-};
-
-export default function SanityBlock({ body }: { body: BlockContent }) {
-  if (!body) {
-    return null;
-  }
-  return <PortableText value={body} components={components} />;
-}
--- a/template/apps/client/src/components/section/cta.tsx
+++ b/template/apps/client/src/components/section/cta.tsx
@@ -1,126 +0,0 @@
-"use client";
-
-import LinkButton from "../link-button";
-import { motion } from "framer-motion";
-import { CtaSection } from "@/sanity/sanity.types";
-import { useDeconstructLink } from "@/lib/link-client";
-import { SimpleImage } from "@/lib/asset-to-url";
-import { cn } from "@/lib/utils";
-import { generateImageUrl } from "@/lib/image-url";
-import SanityBlock from "../sanity-block";
-
-interface CTAProps {
-  cta?: CtaSection;
-  sectionTitle?: string;
-  background: SimpleImage | any;
-  backgroundColor?: string;
-  textColor?: string;
-}
-
-export default function CTA({
-  cta,
-  background,
-  sectionTitle,
-  backgroundColor = "bg-gray/80",
-  textColor,
-}: CTAProps) {
-  const linkData = useDeconstructLink(cta?.button?.link);
-
-  const backgroundImageUrl = background
-    ? (() => {
-        if (background.url) {
-          return generateImageUrl(
-            background,
-            background.dimensions?.width,
-            background.dimensions?.height
-          );
-        } else if (background.asset) {
-          const assetId = background.asset._ref || background.asset;
-          const match = assetId.match(/-(\d+)x(\d+)$/);
-          const width = match ? parseInt(match[1]) : 1920;
-          const height = match ? parseInt(match[2]) : 1080;
-          return generateImageUrl(background, width, height);
-        }
-        return undefined;
-      })()
-    : undefined;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      style={{
-        backgroundImage: backgroundImageUrl
-          ? `url(${backgroundImageUrl})`
-          : undefined,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
-      aria-label={background?.alt}
-      className={cn(
-        "md:min-h-screen flex flex-col md:flex-row w-full overflow-hidden relative",
-        textColor
-      )}
-    >
-      <div className={cn("absolute inset-0 z-0", backgroundColor)} />
-
-      <motion.div
-        initial={{ opacity: 0, x: -20 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.6, ease: "easeOut" }}
-        className="z-10 flex flex-col items-center md:items-start justify-center md:justify-start mt-20 px-6 md:px-20 md:py-32 md:flex-1 space-y-12 min-h-screen md:min-h-0"
-      >
-        <motion.div>
-          <motion.label
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.5 }}
-            className="text-sm"
-          >
-            {sectionTitle}
-          </motion.label>
-          <motion.h1
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.5 }}
-            className="md:max-w-[60rem] text-6xl md:text-8xl"
-          >
-            {cta?.title}
-          </motion.h1>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.4, duration: 0.5 }}
-          className="flex flex-col items-start space-y-20 md:space-y-14 w-full max-w-xl"
-        >
-          {cta?.description && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.6, duration: 0.5 }}
-            >
-              <SanityBlock body={cta.description} />
-            </motion.div>
-          )}
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.8, duration: 0.5 }}
-          >
-            <LinkButton
-              className="mb-20"
-              text={cta?.button?.text ?? ""}
-              color="primary"
-              linkData={linkData}
-              size="lg"
-              variant="default"
-            />
-          </motion.div>
-        </motion.div>
-      </motion.div>
-    </motion.div>
-  );
-}
--- a/template/apps/client/src/components/ui/button.tsx
+++ b/template/apps/client/src/components/ui/button.tsx
@@ -1,66 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    if (asChild) {
-      return (
-        <Slot
-          className={cn(buttonVariants({ variant, size, className }))}
-          {...(props as any)}
-        />
-      )
-    }
-    
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
--- a/template/apps/client/src/hooks.server.ts
+++ b/template/apps/client/src/hooks.server.ts
@@ -0,0 +1,6 @@
+import {createRequestHandler, setServerClient} from '@sanity/svelte-loader'
+import {serverClient} from '$lib/server/sanity'
+
+setServerClient(serverClient)
+
+export const handle = createRequestHandler()
--- a/template/apps/client/src/lib/asset-to-url-client.ts
+++ b/template/apps/client/src/lib/asset-to-url-client.ts
@@ -0,0 +1,51 @@
+import { getImageDimensions, type SanityImageDimensions } from '@sanity/asset-utils';
+import type { ImageWithAlt } from './sanity.types';
+import { generateImageUrl } from './image-url';
+import { client } from './sanity';
+
+export type SimpleImage = {
+	url: string;
+	alt: string;
+	dimensions: SanityImageDimensions;
+};
+
+// Internal helper to fetch image data from Sanity (client-side)
+async function fetchImage(assetRef: string | undefined): Promise<ImageWithAlt | null> {
+	if (!assetRef) return null;
+
+	const image = await client.fetch(`*[_id == $id][0]`, { id: assetRef });
+	return image;
+}
+
+// Internal helper to get dimensions safely
+function getDimensions(image: ImageWithAlt | any): SanityImageDimensions {
+	try {
+		if (image._type === 'imageWithAlt') {
+			const compatibleImage = { ...image, asset: image.asset };
+			return getImageDimensions(compatibleImage as any);
+		}
+		return getImageDimensions(image);
+	} catch {
+		return { width: 1200, height: 800, aspectRatio: 1.5 };
+	}
+}
+
+// Convert a single asset reference to SimpleImage (client-side)
+export async function getImageClient(assetRef: string | undefined): Promise<SimpleImage> {
+	const image = await fetchImage(assetRef);
+	if (!image)
+		return { url: '', alt: '', dimensions: { width: 0, height: 0, aspectRatio: 1 } };
+
+	const dimensions = getDimensions(image);
+
+	return {
+		url: generateImageUrl(image),
+		alt: image.alt || '',
+		dimensions
+	};
+}
+
+// Convert multiple asset references to SimpleImage array (client-side)
+export async function getImagesClient(assetRefs: (string | undefined)[]): Promise<SimpleImage[]> {
+	return Promise.all(assetRefs.map((ref) => getImageClient(ref)));
+}
--- a/template/apps/client/src/lib/asset-to-url.ts
+++ b/template/apps/client/src/lib/asset-to-url.ts
@@ -1,54 +1,51 @@
-import { sanityFetch } from "@/sanity/live";
-import { getImageDimensions, SanityImageDimensions } from "@sanity/asset-utils";
-import { ImageWithAlt } from "@/sanity/sanity.types";
-import { generateImageUrl } from "./image-url";
+import { getImageDimensions, type SanityImageDimensions } from '@sanity/asset-utils';
+import type { ImageWithAlt } from './sanity.types';
+import { generateImageUrl } from './image-url';
+import { serverClient } from './server/sanity';

 export type SimpleImage = {
-  url: string;
-  alt: string;
-  dimensions: SanityImageDimensions;
+	url: string;
+	alt: string;
+	dimensions: SanityImageDimensions;
 };

 // Internal helper to fetch image data from Sanity
 async function fetchImage(assetRef: string | undefined): Promise<ImageWithAlt | null> {
-  if (!assetRef) return null;
-  
-  const { data: image } = await sanityFetch({
-    query: `*[_id == $id][0]`,
-    params: { id: assetRef },
-  });
-  return image;
+	if (!assetRef) return null;
+
+	const image = await serverClient.fetch(`*[_id == $id][0]`, { id: assetRef });
+	return image;
 }

 // Internal helper to get dimensions safely
 function getDimensions(image: ImageWithAlt | any): SanityImageDimensions {
-  try {
-    if (image._type === "imageWithAlt") {
-      const compatibleImage = { ...image, asset: image.asset };
-      return getImageDimensions(compatibleImage as any);
-    }
-    return getImageDimensions(image);
-  } catch {
-    return { width: 1200, height: 800, aspectRatio: 1.5 };
-  }
+	try {
+		if (image._type === 'imageWithAlt') {
+			const compatibleImage = { ...image, asset: image.asset };
+			return getImageDimensions(compatibleImage as any);
+		}
+		return getImageDimensions(image);
+	} catch {
+		return { width: 1200, height: 800, aspectRatio: 1.5 };
+	}
 }

-
 // Convert a single asset reference to SimpleImage
 export async function getImage(assetRef: string | undefined): Promise<SimpleImage> {
-  const image = await fetchImage(assetRef);
-  if (!image) return { url: "", alt: "", dimensions: { width: 0, height: 0, aspectRatio: 1 } };
+	const image = await fetchImage(assetRef);
+	if (!image)
+		return { url: '', alt: '', dimensions: { width: 0, height: 0, aspectRatio: 1 } };

-  const dimensions = getDimensions(image);
-  
-  return {
-    url: generateImageUrl(image),
-    alt: image.alt || "",
-    dimensions,
-  };
+	const dimensions = getDimensions(image);
+
+	return {
+		url: generateImageUrl(image),
+		alt: image.alt || '',
+		dimensions
+	};
 }

 // Convert multiple asset references to SimpleImage array
 export async function getImages(assetRefs: (string | undefined)[]): Promise<SimpleImage[]> {
-  return Promise.all(assetRefs.map(ref => getImage(ref)));
+	return Promise.all(assetRefs.map((ref) => getImage(ref)));
 }
--- a/template/apps/client/src/lib/assets/favicon.svg
+++ b/template/apps/client/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
--- a/template/apps/client/src/lib/components/blocks/callout.svelte
+++ b/template/apps/client/src/lib/components/blocks/callout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { PortableText } from '@portabletext/svelte';
+
+	let { portableText } = $props();
+	const { value } = portableText;
+</script>
+
+{#if value?.content}
+	<div class="bg-secondary text-secondary-foreground shadow-lg rounded-md p-6 border my-6 border-gray-200">
+		<PortableText value={value.content} />
+	</div>
+{/if}
--- a/template/apps/client/src/lib/components/blocks/link-mark.svelte
+++ b/template/apps/client/src/lib/components/blocks/link-mark.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	let { portableText, children } = $props();
+	const { value } = portableText;
+</script>
+
+<a 
+	href={value.href} 
+	target={value.blank ? '_blank' : '_self'}
+	rel={value.blank ? 'noopener noreferrer' : undefined}
+	class="text-primary hover:underline"
+>
+	{@render children()}
+</a>
--- a/template/apps/client/src/lib/components/blocks/sanity-button.svelte
+++ b/template/apps/client/src/lib/components/blocks/sanity-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { deconstructLink } from '$lib/link-helper';
+	import LinkButton from '../link-button.svelte';
+	import { onMount } from 'svelte';
+
+	let { portableText } = $props();
+	const { value: button } = portableText;
+	
+	let linkData: { href: string; target: string } | null = $state(null);
+	let mounted = $state(false);
+
+	onMount(async () => {
+		if (button?.link) {
+			linkData = await deconstructLink(button.link);
+		}
+		mounted = true;
+	});
+</script>
+
+{#if mounted && linkData}
+	<LinkButton
+		text={button?.text || ''}
+		{linkData}
+		variant="default"
+		size="default"
+	/>
+{/if}
--- a/template/apps/client/src/lib/components/blocks/sanity-file.svelte
+++ b/template/apps/client/src/lib/components/blocks/sanity-file.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getFileAsset } from '@sanity/asset-utils';
+	import { Download } from '@lucide/svelte';
+	import { client } from '$lib/sanity';
+
+	let { portableText } = $props();
+	const { value } = portableText;
+	const { projectId, dataset } = client.config();
+</script>
+
+{#if value?.asset}
+	{@const file = getFileAsset(value, { projectId, dataset })}
+	<a href={file.url} download class="inline-flex items-center gap-2 text-primary hover:underline">
+		<Download size={16} />
+		{value.title || 'Download file'}
+	</a>
+{/if}
--- a/template/apps/client/src/lib/components/blocks/sanity-image.svelte
+++ b/template/apps/client/src/lib/components/blocks/sanity-image.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getImageDimensions } from '@sanity/asset-utils';
+	import { generateImageUrl, dynamicHeight } from '$lib/image-url';
+
+	let { portableText } = $props();
+	const { value, isInline } = portableText;
+</script>
+
+{#if value?.asset}
+	{@const image = value}
+	{@const dimensions = getImageDimensions(image)}
+	{@const calculatedHeight = dynamicHeight(dimensions.height, dimensions.width, isInline ?? false)}
+	{@const imageUrl = generateImageUrl(image, dimensions.width, dimensions.height)}
+	
+	<img
+		src={imageUrl}
+		alt={image.alt || ''}
+		width={isInline ? 100 : Math.min(dimensions.width, 1200)}
+		height={calculatedHeight}
+		loading="lazy"
+		class={isInline ? 'inline-block' : 'block mx-auto my-4'}
+	/>
+{/if}
--- a/template/apps/client/src/lib/components/footer.svelte
+++ b/template/apps/client/src/lib/components/footer.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Settings } from '$lib/sanity.types';
+
+	let { settings }: { settings: Settings } = $props();
+</script>
+
+<div class="flex flex-col gap-4">
+	<p class="text-sm pb-4 px-8">
+		{settings?.footer?.replace('{YEAR}', new Date().getFullYear().toString())}
+	</p>
+</div>
--- a/template/apps/client/src/lib/components/link-button.svelte
+++ b/template/apps/client/src/lib/components/link-button.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { ArrowRight, ExternalLink } from '@lucide/svelte';
+
+	let {
+		text,
+		linkData,
+		variant = 'default',
+		size = 'default',
+		extraIcon,
+		showIcon = true,
+		className,
+		onPress,
+		...restProps
+	}: {
+		text: string;
+		linkData: { href: string; target: string } | null;
+		variant?: 'ghost' | 'default' | 'secondary' | 'link' | 'destructive' | 'outline';
+		size?: 'default' | 'sm' | 'lg' | 'icon';
+		extraIcon?: any;
+		showIcon?: boolean;
+		className?: string;
+		onPress?: () => void;
+		[key: string]: any;
+	} = $props();
+
+	const isExternal = linkData?.href?.startsWith('http');
+
+	const baseClasses = cn(
+		'group',
+		'rounded-full',
+		'font-semibold',
+		'transition-all',
+		'duration-300',
+		'no-underline',
+		'flex',
+		'items-center',
+		'gap-2',
+		'inline-flex',
+		'justify-center',
+		'whitespace-nowrap',
+		'text-sm',
+		'font-medium',
+		'ring-offset-background',
+		'transition-colors',
+		'focus-visible:outline-none',
+		'focus-visible:ring-2',
+		'focus-visible:ring-ring',
+		'focus-visible:ring-offset-2',
+		'disabled:pointer-events-none',
+		'disabled:opacity-50',
+		showIcon ? 'pr-4' : 'px-6',
+		'active:transform',
+		'active:translate-y-[1px]',
+		{
+			// Variant styles
+			'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+			'bg-destructive text-destructive-foreground hover:bg-destructive/90':
+				variant === 'destructive',
+			'border border-input bg-background hover:bg-accent hover:text-accent-foreground':
+				variant === 'outline',
+			'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+			'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
+			'text-primary underline-offset-4 hover:underline': variant === 'link'
+		},
+		{
+			// Size styles
+			'h-10 px-4 py-2': size === 'default',
+			'h-9 rounded-md px-3': size === 'sm',
+			'h-11 rounded-md px-8': size === 'lg',
+			'h-10 w-10': size === 'icon'
+		},
+		className
+	);
+</script>
+
+{#if linkData}
+	<a
+		href={linkData.href}
+		target={linkData?.target ?? '_self'}
+		rel={isExternal ? 'noopener noreferrer' : undefined}
+		onclick={onPress}
+		class={baseClasses}
+		{...restProps}
+	>
+		{#if extraIcon}
+			<span class="transition-transform duration-300 group-hover:scale-110">
+				{@render extraIcon({ size: size === 'lg' ? 24 : 20 })}
+			</span>
+		{/if}
+
+		<span>{text}</span>
+
+		{#if showIcon}
+			<span
+				class="transition-all duration-300 group-hover:transform group-hover:translate-x-1"
+			>
+				{#if isExternal}
+					<ExternalLink size={size === 'lg' ? 24 : 20} />
+				{:else}
+					<ArrowRight strokeWidth={3} size={size === 'lg' ? 24 : 20} />
+				{/if}
+			</span>
+		{/if}
+	</a>
+{/if}
--- a/template/apps/client/src/lib/components/sanity-block.svelte
+++ b/template/apps/client/src/lib/components/sanity-block.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { PortableText } from '@portabletext/svelte';
+	import type { BlockContent } from '$lib/sanity.types';
+	import SanityImage from './blocks/sanity-image.svelte';
+	import SanityFile from './blocks/sanity-file.svelte';
+	import SanityButton from './blocks/sanity-button.svelte';
+	import Callout from './blocks/callout.svelte';
+	import LinkMark from './blocks/link-mark.svelte';
+
+	let { body }: { body: BlockContent } = $props();
+</script>
+
+<div class="prose prose-lg max-w-none">
+	<PortableText 
+		value={body} 
+		components={{
+			types: {
+				callout: Callout,
+				image: SanityImage,
+				imageWithAlt: SanityImage,
+				file: SanityFile,
+				button: SanityButton
+			},
+			marks: {
+				link: LinkMark
+			}
+		}} 
+	/>
+</div>
--- a/template/apps/client/src/lib/components/section/cta.svelte
+++ b/template/apps/client/src/lib/components/section/cta.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import LinkButton from '../link-button.svelte';
+	import type { CtaSection } from '$lib/sanity.types';
+	import { deconstructLink } from '$lib/link-helper';
+	import type { SimpleImage } from '$lib/asset-to-url';
+	import { cn } from '$lib/utils';
+	import { generateImageUrl } from '$lib/image-url';
+	import SanityBlock from '../sanity-block.svelte';
+	import { onMount } from 'svelte';
+
+	interface CTAProps {
+		cta?: CtaSection;
+		sectionTitle?: string;
+		background: SimpleImage | any;
+		backgroundColor?: string;
+		textColor?: string;
+	}
+
+	let {
+		cta,
+		background,
+		sectionTitle,
+		backgroundColor = 'bg-gray-900/80',
+		textColor = 'text-white'
+	}: CTAProps = $props();
+
+	let linkData: { href: string; target: string } | null = $state(null);
+	let mounted = $state(false);
+
+	onMount(async () => {
+		if (cta?.button?.link) {
+			linkData = await deconstructLink(cta.button.link);
+		}
+		mounted = true;
+	});
+
+</script>
+
+<section
+	class={cn(
+		'min-h-screen flex flex-col md:flex-row w-full overflow-hidden relative',
+		textColor
+	)}
+	style:background-image={background?.url ? `url(${background.url})` : undefined}
+	style:background-size="cover"
+	style:background-position="center"
+	style:background-repeat="no-repeat"
+	aria-label={background?.alt}
+>
+	<div class={cn('absolute inset-0 z-0', backgroundColor)}></div>
+
+	<div
+		class="z-10 flex flex-col items-center md:items-start justify-center md:justify-start mt-20 px-6 md:px-20 md:py-32 md:flex-1 space-y-12 min-h-screen md:min-h-0"
+	>
+		<div>
+			{#if sectionTitle}
+				<p class="text-sm mb-4">
+					{sectionTitle}
+				</p>
+			{/if}
+			<h1 class="md:max-w-[60rem] text-6xl md:text-8xl font-bold leading-tight">
+				{cta?.title}
+			</h1>
+		</div>
+
+		<div class="flex flex-col items-start space-y-8 md:space-y-14 w-full max-w-xl">
+			{#if cta?.description}
+				<div class="text-lg">
+					<SanityBlock body={cta.description} />
+				</div>
+			{/if}
+			{#if mounted && linkData}
+				<div class="mb-20">
+					<LinkButton
+						text={cta?.button?.text ?? ''}
+						{linkData}
+						size="lg"
+						variant="default"
+					/>
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
--- a/template/apps/client/src/lib/components/ui/button/button.svelte
+++ b/template/apps/client/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
--- a/template/apps/client/src/lib/components/ui/button/index.ts
+++ b/template/apps/client/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
--- a/template/apps/client/src/lib/image-helper.ts
+++ b/template/apps/client/src/lib/image-helper.ts
@@ -0,0 +1,21 @@
+import type { SanityImageDimensions } from '@sanity/asset-utils';
+
+export type SimpleImage = {
+	url: string;
+	alt: string;
+	dimensions: SanityImageDimensions;
+};
+
+export function getImageFromAsset(imageData: any): SimpleImage | null {
+	if (!imageData?.asset) return null;
+	
+	if ('url' in imageData.asset) {
+		return {
+			url: imageData.asset.url,
+			alt: imageData.alt || '',
+			dimensions: imageData.asset.metadata?.dimensions || { width: 1920, height: 1080, aspectRatio: 1.78 }
+		};
+	}
+	
+	return null;
+}
--- a/template/apps/client/src/lib/image-url.ts
+++ b/template/apps/client/src/lib/image-url.ts
@@ -1,85 +1,65 @@
-import { client } from "@/sanity/client";
-import { ImageWithAlt, SanityImageAsset } from "@/sanity/sanity.types";
+import { client } from './sanity';
+import type { ImageWithAlt, SanityImageAsset } from './sanity.types';
+import imageUrlBuilder from '@sanity/image-url';

-import imageUrlBuilder from "@sanity/image-url";
 const { projectId, dataset } = client.config();
-const builder = imageUrlBuilder({ projectId: projectId ?? "", dataset: dataset ?? "" });
+const builder = imageUrlBuilder({ projectId: projectId ?? '', dataset: dataset ?? '' });
+
+console.log('Image URL Builder initialized with:', { projectId, dataset });

 export function generateImageUrl(image: ImageWithAlt | any, width?: number, height?: number): string {
-  if (!image || !projectId || !dataset) return "";
-  if (image.url && image.crop && image.dimensions && width && height) {
-    const imageRef = image.asset?._ref || image.asset;
-    
-    if (imageRef) {
-      const crop = image.crop;
-      
-      let imageBuilder = builder
-        .image(imageRef)
-        .fit("max")
-        .width(1920)
-        .format("webp")
-        .auto("format");
-      
-      if (crop && (crop.top || crop.bottom || crop.left || crop.right)) {
-        const croppedWidth = Math.floor(width * (1 - (crop.right + crop.left)));
-        const croppedHeight = Math.floor(height * (1 - (crop.top + crop.bottom)));
-        
-        const left = Math.floor(width * crop.left);
-        const top = Math.floor(height * crop.top);
-        
-        imageBuilder = imageBuilder.rect(left, top, croppedWidth, croppedHeight);
-      } else {
-      }
-      
-      const url = imageBuilder.url();
-      return url;
-    }
-  }
-  
-  if (image.url && !image.crop) {
-    return image.url;
-  }
-  
-  if (image._type === "imageWithAlt" || image.asset) {
-    const imageRef = image.asset?._ref || image.asset;
-    const crop = image.crop;
-    
-    let imageBuilder = builder
-      .image(imageRef)
-      .fit("max")
-      .width(1920)
-      .format("webp")
-      .auto("format");
-    
-    if (crop && (crop.top || crop.bottom || crop.left || crop.right) && width && height) {
-      const croppedWidth = Math.floor(width * (1 - (crop.right + crop.left)));
-      const croppedHeight = Math.floor(height * (1 - (crop.top + crop.bottom)));
-      
-      const left = Math.floor(width * crop.left);
-      const top = Math.floor(height * crop.top);
-      
-      imageBuilder = imageBuilder.rect(left, top, croppedWidth, croppedHeight);
-    }
-    const url = imageBuilder.url();
-    return url;
-  }
-  
-  if (image._type === "imageWithAlt" && !image.asset) return "";
-  
-  return builder
-    .image(image as any)
-    .fit("max")
-    .width(1920)
-    .format("webp")
-    .auto("format")
-    .url();
+	if (!image || !projectId || !dataset) {
+		console.log('No image, projectId, or dataset:', { image, projectId, dataset });
+		return '';
+	}
+
+	// Handle direct URL
+	if (image.url && !image.asset) {
+		return image.url;
+	}
+
+	// Handle Sanity image object
+	const imageRef = image.asset?._ref || image.asset?._id || image.asset;
+	
+	if (!imageRef) {
+		console.log('No imageRef found:', image);
+		return '';
+	}
+
+	try {
+		let imageBuilder = builder
+			.image(imageRef)
+			.fit('max')
+			.width(width || 1920)
+			.format('webp')
+			.auto('format');
+
+		// Apply cropping if available
+		if (image.crop && width && height) {
+			const crop = image.crop;
+			if (crop.top || crop.bottom || crop.left || crop.right) {
+				const croppedWidth = Math.floor(width * (1 - (crop.right + crop.left)));
+				const croppedHeight = Math.floor(height * (1 - (crop.top + crop.bottom)));
+				const left = Math.floor(width * crop.left);
+				const top = Math.floor(height * crop.top);
+				imageBuilder = imageBuilder.rect(left, top, croppedWidth, croppedHeight);
+			}
+		}
+
+		const url = imageBuilder.url();
+		console.log('Generated URL:', url);
+		return url;
+	} catch (error) {
+		console.error('Error generating image URL:', error);
+		return '';
+	}
 }

 export function dynamicHeight(
-  originalHeight: number,
-  originalWidth: number,
-  isInline: boolean
+	originalHeight: number,
+	originalWidth: number,
+	isInline: boolean
 ) {
-  const targetWidth = isInline ? 100 : Math.min(originalWidth, 1200);
-  return (targetWidth * originalHeight) / originalWidth;
-}
+	const targetWidth = isInline ? 100 : Math.min(originalWidth, 1200);
+	return (targetWidth * originalHeight) / originalWidth;
+}
--- a/template/apps/client/src/lib/index.ts
+++ b/template/apps/client/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/template/apps/client/src/lib/link-client.ts
+++ b/template/apps/client/src/lib/link-client.ts
@@ -1,51 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { deconstructLink, resolveHref } from "./link-helper";
-import { Link } from "@/sanity/sanity.types";
-
-interface InternalLink {
-  _ref: string;
-  _type: string;
-  _weak?: boolean;
-}
-
-const useResolveHref = (internalLink: InternalLink) => {
-  const [href, setHref] = useState<{ type: string; slug?: string } | null>(null);
-
-  useEffect(() => {
-    const fetchHref = async () => {
-      const resolvedHref = await resolveHref(internalLink);
-      setHref(resolvedHref);
-    };
-
-    fetchHref();
-  }, [internalLink]);
-
-  return href;
-};
-
-
-
-const useDeconstructLink = (link?: Link) => {
-  const [deconstLink, setdeconstLink] = useState<{
-    href: string;
-    target: string;
-  } | null>(null);
-
-  useEffect(() => {
-    if (!link) return;
-
-    const fetchHref = async () => {
-      const resolvedLink = await deconstructLink(link);
-      setdeconstLink(resolvedLink);
-    };
-
-    fetchHref();
-  }, [link]);
-
-  return deconstLink;
-}
-
-
-export { useResolveHref, useDeconstructLink };
--- a/template/apps/client/src/lib/link-helper.ts
+++ b/template/apps/client/src/lib/link-helper.ts
@@ -1,62 +1,62 @@
-import type { Link } from "@/sanity/sanity.types";
-import { client } from "@/sanity/client";
-import { defineQuery } from "next-sanity";
+import type { Link } from './sanity.types';
+import { client } from './sanity';

 interface InternalLink {
-  _ref: string;
-  _type: string;
-  _weak?: boolean;
+	_ref: string;
+	_type: string;
+	_weak?: boolean;
 }

 export const resolveHref = async (internalLink: InternalLink) => {
-  if (!internalLink || !internalLink._ref) return null;
+	if (!internalLink || !internalLink._ref) return null;

-  const QUERY = defineQuery('*[_id == $ref][0]{ _type, slug }');
+	const QUERY = '*[_id == $ref][0]{ _type, slug }';

-  try {
-    const result: any = await client.fetch(QUERY, { ref: internalLink._ref });
-    return result ? { type: result._type, slug: result.slug?.current } : null;
-  } catch (error) {
-    console.error("Sanity query failed:", error);
-    return null;
-  }
+	try {
+		const result: any = await client.fetch(QUERY, { ref: internalLink._ref });
+		return result ? { type: result._type, slug: result.slug?.current } : null;
+	} catch (error) {
+		console.error('Sanity query failed:', error);
+		return null;
+	}
 };

 export async function deconstructLink(
-  link?: Link,
+	link?: Link
 ): Promise<{ href: string; target: string } | null> {
-  if (!link) return null;
+	if (!link) return null;

-  const { type, value, anchor, parameters, blank, url, email, phone, internalLink } = link;
-  const target = blank ? "_blank" : "";
-  let href = "";
+	const { type, value, anchor, parameters, blank, url, email, phone, internalLink } = link;
+	const target = blank ? '_blank' : '';
+	let href: string | null = null;

-  switch (type) {
-    case "static":
-      href = `${value || ""}${anchor || ""}${parameters || ""}`;
-      break;
-    case "external":
-      href = `${url || ""}${anchor || ""}${parameters || ""}`;
-      break;
-    case "email":
-      href = `mailto:${email || ""}`;
-      break;
-    case "phone":
-      href = `tel:${phone || ""}`;
-      break;
-    case "internal":
-      if (internalLink) {
-        const resolved = await resolveHref(internalLink)
-        if (resolved) {
-          href = resolved.type === "custom"
-            ? `/${resolved.slug || ""}`
-            : `/${resolved.type}/${resolved.slug || ""}`;
-        }
-      }
-      break;
-    default:
-      return null;
-  }
-
-  return { href, target };
-}
+	switch (type) {
+		case 'static':
+			href = `${value || ''}${anchor || ''}${parameters || ''}`;
+			break;
+		case 'external':
+			href = `${url || ''}${anchor || ''}${parameters || ''}`;
+			break;
+		case 'email':
+			href = `mailto:${email || ''}`;
+			break;
+		case 'phone':
+			href = `tel:${phone || ''}`;
+			break;
+		case 'internal':
+			if (internalLink) {
+				const resolved = await resolveHref(internalLink);
+				if (resolved) {
+					href =
+						resolved.type === 'custom'
+							? `/${resolved.slug || ''}`
+							: `/${resolved.type}/${resolved.slug || ''}`;
+				}
+			}
+			break;
+		default:
+			return null;
+	}
+	if (!href) return null;
+	return { href, target };
+}
--- a/template/apps/client/src/lib/queries.ts
+++ b/template/apps/client/src/lib/queries.ts
@@ -0,0 +1,53 @@
+import type { Home } from './sanity.types'
+
+export type HomeResult = Home
+
+export const homeQuery = `*[_type == "home"][0]{
+  _id,
+  _type,
+  _createdAt,
+  _updatedAt,
+  _rev,
+  title,
+  headerSection{
+    _type,
+    title,
+    description,
+    backgroundImage{
+      asset->{
+        _id,
+        _ref,
+        _type,
+        url,
+        metadata {
+          dimensions {
+            width,
+            height
+          }
+        }
+      },
+      crop,
+      hotspot,
+      alt
+    },
+    button{
+      _type,
+      text,
+      link{
+        _type,
+        type,
+        value,
+        anchor,
+        parameters,
+        blank,
+        url,
+        email,
+        phone,
+        internalLink->{
+          _ref,
+          _type
+        }
+      }
+    }
+  }
+}`
--- a/template/apps/client/src/lib/sanity.ts
+++ b/template/apps/client/src/lib/sanity.ts
@@ -0,0 +1,15 @@
+import { sanityConnection } from '@repo/sanity-connection';
+import { createClient } from '@sanity/client';
+
+export const client = createClient({
+	projectId: sanityConnection.projectId,
+	dataset: sanityConnection.dataset,
+	apiVersion: '2024-12-01',
+	useCdn: false,
+	token: sanityConnection.publicViewerToken,
+	ignoreBrowserTokenWarning: true,
+	stega: {
+		enabled: true,
+		studioUrl: sanityConnection.studioUrl
+	}
+});
--- a/template/apps/client/src/lib/sanity.types.ts
+++ b/template/apps/client/src/lib/sanity.types.ts
@@ -0,0 +1,575 @@
+/**
+ * ---------------------------------------------------------------------------------
+ * This file has been generated by Sanity TypeGen.
+ * Command: `sanity typegen generate`
+ *
+ * Any modifications made directly to this file will be overwritten the next time
+ * the TypeScript definitions are generated. Please make changes to the Sanity
+ * schema definitions and/or GROQ queries if you need to update these types.
+ *
+ * For more information on how to use Sanity TypeGen, visit the official documentation:
+ * https://www.sanity.io/docs/sanity-typegen
+ * ---------------------------------------------------------------------------------
+ */
+
+// Source: schema.json
+export type Home = {
+	_id: string;
+	_type: 'home';
+	_createdAt: string;
+	_updatedAt: string;
+	_rev: string;
+	title?: string;
+	headerSection?: CtaSection;
+};
+
+export type FaqSection = {
+	_type: 'faqSection';
+	sectionTitle?: string;
+	title?: string;
+	faqs?: Array<
+		{
+			_key: string;
+		} & Faq
+	>;
+};
+
+export type CtaSection = {
+	_type: 'ctaSection';
+	backgroundImage?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		alt?: string;
+		_type: 'imageWithAlt';
+	};
+	title?: string;
+	description?: Array<
+		| {
+				children?: Array<{
+					marks?: Array<string>;
+					text?: string;
+					_type: 'span';
+					_key: string;
+				}>;
+				style?: 'normal' | 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote';
+				listItem?: 'bullet';
+				markDefs?: Array<
+					| {
+							href?: Link;
+							_type: 'link';
+							_key: string;
+					  }
+					| ({
+							_key: string;
+					  } & TextColor)
+					| ({
+							_key: string;
+					  } & HighlightColor)
+				>;
+				level?: number;
+				_type: 'block';
+				_key: string;
+		  }
+		| ({
+				_key: string;
+		  } & Button)
+		| {
+				asset?: {
+					_ref: string;
+					_type: 'reference';
+					_weak?: boolean;
+					[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+				};
+				media?: unknown;
+				hotspot?: SanityImageHotspot;
+				crop?: SanityImageCrop;
+				_type: 'image';
+				_key: string;
+		  }
+		| {
+				asset?: {
+					_ref: string;
+					_type: 'reference';
+					_weak?: boolean;
+					[internalGroqTypeReferenceTo]?: 'sanity.fileAsset';
+				};
+				media?: unknown;
+				_type: 'file';
+				_key: string;
+		  }
+	>;
+	button?: Button;
+};
+
+export type ContactSection = {
+	_type: 'contactSection';
+	title?: string;
+	contactMethods?: Array<{
+		type?: 'email' | 'phone' | 'address' | 'social';
+		label?: string;
+		value?: string;
+		link?: Link;
+		_key: string;
+	}>;
+};
+
+export type ImageWithAlt = {
+	_type: 'imageWithAlt';
+	asset?: {
+		_ref: string;
+		_type: 'reference';
+		_weak?: boolean;
+		[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+	};
+	media?: unknown;
+	hotspot?: SanityImageHotspot;
+	crop?: SanityImageCrop;
+	alt?: string;
+};
+
+export type Faq = {
+	_type: 'faq';
+	question?: string;
+	answer?: Array<
+		| {
+				children?: Array<{
+					marks?: Array<string>;
+					text?: string;
+					_type: 'span';
+					_key: string;
+				}>;
+				style?: 'normal' | 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote';
+				listItem?: 'bullet';
+				markDefs?: Array<
+					| {
+							href?: Link;
+							_type: 'link';
+							_key: string;
+					  }
+					| ({
+							_key: string;
+					  } & TextColor)
+					| ({
+							_key: string;
+					  } & HighlightColor)
+				>;
+				level?: number;
+				_type: 'block';
+				_key: string;
+		  }
+		| ({
+				_key: string;
+		  } & Button)
+		| {
+				asset?: {
+					_ref: string;
+					_type: 'reference';
+					_weak?: boolean;
+					[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+				};
+				media?: unknown;
+				hotspot?: SanityImageHotspot;
+				crop?: SanityImageCrop;
+				_type: 'image';
+				_key: string;
+		  }
+		| {
+				asset?: {
+					_ref: string;
+					_type: 'reference';
+					_weak?: boolean;
+					[internalGroqTypeReferenceTo]?: 'sanity.fileAsset';
+				};
+				media?: unknown;
+				_type: 'file';
+				_key: string;
+		  }
+	>;
+};
+
+export type Button = {
+	_type: 'button';
+	text?: string;
+	link?: Link;
+};
+
+export type Settings = {
+	_id: string;
+	_type: 'settings';
+	_createdAt: string;
+	_updatedAt: string;
+	_rev: string;
+	title?: string;
+	longTitle?: string;
+	description?: string;
+	logo?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		_type: 'image';
+	};
+	favicon?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		_type: 'image';
+	};
+	footer?: string;
+};
+
+export type BlockContent = Array<
+	| {
+			children?: Array<{
+				marks?: Array<string>;
+				text?: string;
+				_type: 'span';
+				_key: string;
+			}>;
+			style?: 'normal' | 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote';
+			listItem?: 'bullet';
+			markDefs?: Array<
+				| {
+						href?: Link;
+						_type: 'link';
+						_key: string;
+				  }
+				| ({
+						_key: string;
+				  } & TextColor)
+				| ({
+						_key: string;
+				  } & HighlightColor)
+			>;
+			level?: number;
+			_type: 'block';
+			_key: string;
+	  }
+	| ({
+			_key: string;
+	  } & Button)
+	| {
+			asset?: {
+				_ref: string;
+				_type: 'reference';
+				_weak?: boolean;
+				[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+			};
+			media?: unknown;
+			hotspot?: SanityImageHotspot;
+			crop?: SanityImageCrop;
+			_type: 'image';
+			_key: string;
+	  }
+	| {
+			asset?: {
+				_ref: string;
+				_type: 'reference';
+				_weak?: boolean;
+				[internalGroqTypeReferenceTo]?: 'sanity.fileAsset';
+			};
+			media?: unknown;
+			_type: 'file';
+			_key: string;
+	  }
+>;
+
+export type HighlightColor = {
+	_type: 'highlightColor';
+	label?: string;
+	value?: string;
+};
+
+export type TextColor = {
+	_type: 'textColor';
+	label?: string;
+	value?: string;
+};
+
+export type SimplerColor = {
+	_type: 'simplerColor';
+	label?: string;
+	value?: string;
+};
+
+export type MetaTag = {
+	_type: 'metaTag';
+	metaAttributes?: Array<
+		{
+			_key: string;
+		} & MetaAttribute
+	>;
+};
+
+export type MetaAttribute = {
+	_type: 'metaAttribute';
+	attributeKey?: string;
+	attributeType?: 'string' | 'image';
+	attributeValueImage?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		_type: 'image';
+	};
+	attributeValueString?: string;
+};
+
+export type SeoMetaFields = {
+	_type: 'seoMetaFields';
+	nofollowAttributes?: boolean;
+	metaTitle?: string;
+	metaDescription?: string;
+	metaImage?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		_type: 'image';
+	};
+	seoKeywords?: Array<string>;
+	openGraph?: OpenGraph;
+	additionalMetaTags?: Array<
+		{
+			_key: string;
+		} & MetaTag
+	>;
+	twitter?: Twitter;
+};
+
+export type Twitter = {
+	_type: 'twitter';
+	cardType?: string;
+	creator?: string;
+	site?: string;
+	handle?: string;
+};
+
+export type OpenGraph = {
+	_type: 'openGraph';
+	url?: string;
+	image?: {
+		asset?: {
+			_ref: string;
+			_type: 'reference';
+			_weak?: boolean;
+			[internalGroqTypeReferenceTo]?: 'sanity.imageAsset';
+		};
+		media?: unknown;
+		hotspot?: SanityImageHotspot;
+		crop?: SanityImageCrop;
+		_type: 'image';
+	};
+	title?: string;
+	description?: string;
+	siteName?: string;
+};
+
+export type Custom = {
+	_id: string;
+	_type: 'custom';
+	_createdAt: string;
+	_updatedAt: string;
+	_rev: string;
+	title?: string;
+	slug?: Slug;
+	body?: BlockContent;
+};
+
+export type Link = {
+	_type: 'link';
+	text?: string;
+	type?: string;
+	internalLink?: {
+		_ref: string;
+		_type: 'reference';
+		_weak?: boolean;
+		[internalGroqTypeReferenceTo]?: 'custom';
+	};
+	url?: string;
+	email?: string;
+	phone?: string;
+	value?: string;
+	blank?: boolean;
+	parameters?: string;
+	anchor?: string;
+};
+
+export type SanityImagePaletteSwatch = {
+	_type: 'sanity.imagePaletteSwatch';
+	background?: string;
+	foreground?: string;
+	population?: number;
+	title?: string;
+};
+
+export type SanityImagePalette = {
+	_type: 'sanity.imagePalette';
+	darkMuted?: SanityImagePaletteSwatch;
+	lightVibrant?: SanityImagePaletteSwatch;
+	darkVibrant?: SanityImagePaletteSwatch;
+	vibrant?: SanityImagePaletteSwatch;
+	dominant?: SanityImagePaletteSwatch;
+	lightMuted?: SanityImagePaletteSwatch;
+	muted?: SanityImagePaletteSwatch;
+};
+
+export type SanityImageDimensions = {
+	_type: 'sanity.imageDimensions';
+	height?: number;
+	width?: number;
+	aspectRatio?: number;
+};
+
+export type SanityImageHotspot = {
+	_type: 'sanity.imageHotspot';
+	x?: number;
+	y?: number;
+	height?: number;
+	width?: number;
+};
+
+export type SanityImageCrop = {
+	_type: 'sanity.imageCrop';
+	top?: number;
+	bottom?: number;
+	left?: number;
+	right?: number;
+};
+
+export type SanityFileAsset = {
+	_id: string;
+	_type: 'sanity.fileAsset';
+	_createdAt: string;
+	_updatedAt: string;
+	_rev: string;
+	originalFilename?: string;
+	label?: string;
+	title?: string;
+	description?: string;
+	altText?: string;
+	sha1hash?: string;
+	extension?: string;
+	mimeType?: string;
+	size?: number;
+	assetId?: string;
+	uploadId?: string;
+	path?: string;
+	url?: string;
+	source?: SanityAssetSourceData;
+};
+
+export type SanityImageAsset = {
+	_id: string;
+	_type: 'sanity.imageAsset';
+	_createdAt: string;
+	_updatedAt: string;
+	_rev: string;
+	originalFilename?: string;
+	label?: string;
+	title?: string;
+	description?: string;
+	altText?: string;
+	sha1hash?: string;
+	extension?: string;
+	mimeType?: string;
+	size?: number;
+	assetId?: string;
+	uploadId?: string;
+	path?: string;
+	url?: string;
+	metadata?: SanityImageMetadata;
+	source?: SanityAssetSourceData;
+};
+
+export type SanityImageMetadata = {
+	_type: 'sanity.imageMetadata';
+	location?: Geopoint;
+	dimensions?: SanityImageDimensions;
+	palette?: SanityImagePalette;
+	lqip?: string;
+	blurHash?: string;
+	hasAlpha?: boolean;
+	isOpaque?: boolean;
+};
+
+export type Geopoint = {
+	_type: 'geopoint';
+	lat?: number;
+	lng?: number;
+	alt?: number;
+};
+
+export type Slug = {
+	_type: 'slug';
+	current?: string;
+	source?: string;
+};
+
+export type SanityAssetSourceData = {
+	_type: 'sanity.assetSourceData';
+	name?: string;
+	id?: string;
+	url?: string;
+};
+
+export type AllSanitySchemaTypes =
+	| Home
+	| FaqSection
+	| CtaSection
+	| ContactSection
+	| ImageWithAlt
+	| Faq
+	| Button
+	| Settings
+	| BlockContent
+	| HighlightColor
+	| TextColor
+	| SimplerColor
+	| MetaTag
+	| MetaAttribute
+	| SeoMetaFields
+	| Twitter
+	| OpenGraph
+	| Custom
+	| Link
+	| SanityImagePaletteSwatch
+	| SanityImagePalette
+	| SanityImageDimensions
+	| SanityImageHotspot
+	| SanityImageCrop
+	| SanityFileAsset
+	| SanityImageAsset
+	| SanityImageMetadata
+	| Geopoint
+	| Slug
+	| SanityAssetSourceData;
+export declare const internalGroqTypeReferenceTo: unique symbol;
--- a/template/apps/client/src/lib/server/sanity.ts
+++ b/template/apps/client/src/lib/server/sanity.ts
@@ -0,0 +1,6 @@
+import {client} from '$lib/sanity'
+import { sanityConnection } from '@repo/sanity-connection'
+
+export const serverClient = client.withConfig({
+  token: sanityConnection.publicViewerToken,
+})
--- a/template/apps/client/src/lib/settings.ts
+++ b/template/apps/client/src/lib/settings.ts
@@ -0,0 +1,16 @@
+import { serverClient } from './server/sanity';
+
+export async function fetchSettings(prop?: string | undefined) {
+	const settings = await serverClient.fetch(`*[_type == "settings"][0]{
+		${
+			prop ||
+			`title,
+			 longTitle,
+			 footer,
+			 description,
+			  logo,
+			  favicon`
+		}
+	  }`);
+	return settings;
+}
--- a/template/apps/client/src/lib/utils.ts
+++ b/template/apps/client/src/lib/utils.ts
@@ -1,6 +1,13 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
--- a/template/apps/client/src/routes/+layout.server.ts
+++ b/template/apps/client/src/routes/+layout.server.ts
@@ -0,0 +1,14 @@
+import type {LayoutServerLoad} from './$types'
+import { fetchSettings } from '$lib/settings'
+import { getImage } from '$lib/asset-to-url'
+
+export const load: LayoutServerLoad = async ({locals: {preview}}) => {
+  const settings = await fetchSettings()
+  const logo = settings?.logo?.asset?._ref ? await getImage(settings.logo.asset._ref) : null
+  
+  return {
+    preview,
+    settings,
+    logo
+  }
+}
--- a/template/apps/client/src/routes/+layout.svelte
+++ b/template/apps/client/src/routes/+layout.svelte
@@ -0,0 +1,35 @@
+  <script lang="ts">
+    import {VisualEditing} from '@sanity/visual-editing/svelte'
+    import {LiveMode} from '@sanity/svelte-loader'
+    import {client} from '$lib/sanity'
+    import Footer from '$lib/components/footer.svelte'
+    import '../app.css'
+
+    let {children, data} = $props();
+  
+</script>
+
+  <svelte:head>
+    <title>{data.settings?.title || 'Website'}</title>
+    <meta name="description" content={data.settings?.description || ''} />
+    <meta property="og:title" content={data.settings?.longTitle || data.settings?.title || ''} />
+    <meta property="og:description" content={data.settings?.description || ''} />
+    <meta name="twitter:title" content={data.settings?.longTitle || data.settings?.title || ''} />
+    <meta name="twitter:description" content={data.settings?.description || ''} />
+    <meta name="robots" content="index, follow" />
+    {#if data.logo}
+      <link rel="icon" href={data.logo.url} />
+      <link rel="apple-touch-icon" href={data.logo.url} />
+    {/if}
+    <link rel="manifest" href="/manifest.webmanifest" />
+  </svelte:head>
+
+  <div class="scroll-smooth antialiased font-sans">
+    {@render children()}
+    {#if data.settings}
+      <Footer settings={data.settings} />
+    {/if}
+    {#if data.preview}
+      <VisualEditing />
+      <LiveMode {client} />
+    {/if}
--- a/template/apps/client/src/routes/+page.server.ts
+++ b/template/apps/client/src/routes/+page.server.ts
@@ -0,0 +1,11 @@
+import {homeQuery as query, type HomeResult} from '$lib/queries'
+import type {PageServerLoad} from './$types'
+
+export const load: PageServerLoad = async ({locals: {loadQuery}}) => {
+  const initial = await loadQuery<HomeResult>(query)
+  
+  return {
+    query, 
+    options: {initial}
+  }
+}
--- a/template/apps/client/src/routes/+page.svelte
+++ b/template/apps/client/src/routes/+page.svelte
@@ -0,0 +1,20 @@
+
+<script lang="ts">
+  import {useQuery} from '@sanity/svelte-loader'
+	import type { PageData } from './$types';
+  import CTA from '$lib/components/section/cta.svelte';
+  import { getImageFromAsset } from '$lib/image-helper';
+
+  export let data: PageData
+  const query = useQuery(data)
+  $: ({data: home} = $query)
+
+  $: ctaBackground = getImageFromAsset(home?.headerSection?.backgroundImage);
+</script>
+
+{#if home?.headerSection}
+  <CTA
+    cta={home.headerSection}
+    background={ctaBackground}
+  />
+{/if}
--- a/template/apps/client/src/sanity/client.ts
+++ b/template/apps/client/src/sanity/client.ts
@@ -1,14 +0,0 @@
-import { sanityConnection } from "@repo/sanity-connection";
-import { createClient } from "next-sanity";
-
-export const client = createClient({
-  projectId: sanityConnection.projectId,
-  dataset: sanityConnection.dataset,
-  apiVersion: "2024-12-01",
-  useCdn: false,
-  token: sanityConnection.publicViewerToken,
-  ignoreBrowserTokenWarning: true,
-  stega: {
-    studioUrl: sanityConnection.studioUrl,
-  },
-});
--- a/template/apps/client/src/sanity/live.ts
+++ b/template/apps/client/src/sanity/live.ts
@@ -1,9 +0,0 @@
-import { defineLive } from "next-sanity";
-import { client } from "./client";
-import { sanityConnection } from "@repo/sanity-connection";
-
-export const { sanityFetch, SanityLive } = defineLive({
-  client,
-  serverToken: sanityConnection.publicViewerToken,
-  browserToken: sanityConnection.publicViewerToken,
-});
--- a/template/apps/client/src/sanity/sanity.types.ts
+++ b/template/apps/client/src/sanity/sanity.types.ts
@@ -1,512 +0,0 @@
-/**
- * ---------------------------------------------------------------------------------
- * This file has been generated by Sanity TypeGen.
- * Command: `sanity typegen generate`
- *
- * Any modifications made directly to this file will be overwritten the next time
- * the TypeScript definitions are generated. Please make changes to the Sanity
- * schema definitions and/or GROQ queries if you need to update these types.
- *
- * For more information on how to use Sanity TypeGen, visit the official documentation:
- * https://www.sanity.io/docs/sanity-typegen
- * ---------------------------------------------------------------------------------
- */
-
-// Source: schema.json
-export type Home = {
-  _id: string;
-  _type: "home";
-  _createdAt: string;
-  _updatedAt: string;
-  _rev: string;
-  title?: string;
-  headerSection?: CtaSection;
-};
-
-export type FaqSection = {
-  _type: "faqSection";
-  sectionTitle?: string;
-  title?: string;
-  faqs?: Array<{
-    _key: string;
-  } & Faq>;
-};
-
-export type CtaSection = {
-  _type: "ctaSection";
-  backgroundImage?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    alt?: string;
-    _type: "imageWithAlt";
-  };
-  title?: string;
-  description?: Array<{
-    children?: Array<{
-      marks?: Array<string>;
-      text?: string;
-      _type: "span";
-      _key: string;
-    }>;
-    style?: "normal" | "h1" | "h2" | "h3" | "h4" | "blockquote";
-    listItem?: "bullet";
-    markDefs?: Array<{
-      href?: Link;
-      _type: "link";
-      _key: string;
-    } | {
-      _key: string;
-    } & TextColor | {
-      _key: string;
-    } & HighlightColor>;
-    level?: number;
-    _type: "block";
-    _key: string;
-  } | {
-    _key: string;
-  } & Button | {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-    _key: string;
-  } | {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.fileAsset";
-    };
-    media?: unknown;
-    _type: "file";
-    _key: string;
-  }>;
-  button?: Button;
-};
-
-export type ContactSection = {
-  _type: "contactSection";
-  title?: string;
-  contactMethods?: Array<{
-    type?: "email" | "phone" | "address" | "social";
-    label?: string;
-    value?: string;
-    link?: Link;
-    _key: string;
-  }>;
-};
-
-export type ImageWithAlt = {
-  _type: "imageWithAlt";
-  asset?: {
-    _ref: string;
-    _type: "reference";
-    _weak?: boolean;
-    [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-  };
-  media?: unknown;
-  hotspot?: SanityImageHotspot;
-  crop?: SanityImageCrop;
-  alt?: string;
-};
-
-export type Faq = {
-  _type: "faq";
-  question?: string;
-  answer?: Array<{
-    children?: Array<{
-      marks?: Array<string>;
-      text?: string;
-      _type: "span";
-      _key: string;
-    }>;
-    style?: "normal" | "h1" | "h2" | "h3" | "h4" | "blockquote";
-    listItem?: "bullet";
-    markDefs?: Array<{
-      href?: Link;
-      _type: "link";
-      _key: string;
-    } | {
-      _key: string;
-    } & TextColor | {
-      _key: string;
-    } & HighlightColor>;
-    level?: number;
-    _type: "block";
-    _key: string;
-  } | {
-    _key: string;
-  } & Button | {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-    _key: string;
-  } | {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.fileAsset";
-    };
-    media?: unknown;
-    _type: "file";
-    _key: string;
-  }>;
-};
-
-export type Button = {
-  _type: "button";
-  text?: string;
-  link?: Link;
-};
-
-export type Settings = {
-  _id: string;
-  _type: "settings";
-  _createdAt: string;
-  _updatedAt: string;
-  _rev: string;
-  title?: string;
-  longTitle?: string;
-  description?: string;
-  logo?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-  };
-  favicon?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-  };
-  footer?: string;
-};
-
-export type BlockContent = Array<{
-  children?: Array<{
-    marks?: Array<string>;
-    text?: string;
-    _type: "span";
-    _key: string;
-  }>;
-  style?: "normal" | "h1" | "h2" | "h3" | "h4" | "blockquote";
-  listItem?: "bullet";
-  markDefs?: Array<{
-    href?: Link;
-    _type: "link";
-    _key: string;
-  } | {
-    _key: string;
-  } & TextColor | {
-    _key: string;
-  } & HighlightColor>;
-  level?: number;
-  _type: "block";
-  _key: string;
-} | {
-  _key: string;
-} & Button | {
-  asset?: {
-    _ref: string;
-    _type: "reference";
-    _weak?: boolean;
-    [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-  };
-  media?: unknown;
-  hotspot?: SanityImageHotspot;
-  crop?: SanityImageCrop;
-  _type: "image";
-  _key: string;
-} | {
-  asset?: {
-    _ref: string;
-    _type: "reference";
-    _weak?: boolean;
-    [internalGroqTypeReferenceTo]?: "sanity.fileAsset";
-  };
-  media?: unknown;
-  _type: "file";
-  _key: string;
-}>;
-
-export type HighlightColor = {
-  _type: "highlightColor";
-  label?: string;
-  value?: string;
-};
-
-export type TextColor = {
-  _type: "textColor";
-  label?: string;
-  value?: string;
-};
-
-export type SimplerColor = {
-  _type: "simplerColor";
-  label?: string;
-  value?: string;
-};
-
-export type MetaTag = {
-  _type: "metaTag";
-  metaAttributes?: Array<{
-    _key: string;
-  } & MetaAttribute>;
-};
-
-export type MetaAttribute = {
-  _type: "metaAttribute";
-  attributeKey?: string;
-  attributeType?: "string" | "image";
-  attributeValueImage?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-  };
-  attributeValueString?: string;
-};
-
-export type SeoMetaFields = {
-  _type: "seoMetaFields";
-  nofollowAttributes?: boolean;
-  metaTitle?: string;
-  metaDescription?: string;
-  metaImage?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-  };
-  seoKeywords?: Array<string>;
-  openGraph?: OpenGraph;
-  additionalMetaTags?: Array<{
-    _key: string;
-  } & MetaTag>;
-  twitter?: Twitter;
-};
-
-export type Twitter = {
-  _type: "twitter";
-  cardType?: string;
-  creator?: string;
-  site?: string;
-  handle?: string;
-};
-
-export type OpenGraph = {
-  _type: "openGraph";
-  url?: string;
-  image?: {
-    asset?: {
-      _ref: string;
-      _type: "reference";
-      _weak?: boolean;
-      [internalGroqTypeReferenceTo]?: "sanity.imageAsset";
-    };
-    media?: unknown;
-    hotspot?: SanityImageHotspot;
-    crop?: SanityImageCrop;
-    _type: "image";
-  };
-  title?: string;
-  description?: string;
-  siteName?: string;
-};
-
-export type Custom = {
-  _id: string;
-  _type: "custom";
-  _createdAt: string;
-  _updatedAt: string;
-  _rev: string;
-  title?: string;
-  slug?: Slug;
-  body?: BlockContent;
-};
-
-export type Link = {
-  _type: "link";
-  text?: string;
-  type?: string;
-  internalLink?: {
-    _ref: string;
-    _type: "reference";
-    _weak?: boolean;
-    [internalGroqTypeReferenceTo]?: "custom";
-  };
-  url?: string;
-  email?: string;
-  phone?: string;
-  value?: string;
-  blank?: boolean;
-  parameters?: string;
-  anchor?: string;
-};
-
-export type SanityImagePaletteSwatch = {
-  _type: "sanity.imagePaletteSwatch";
-  background?: string;
-  foreground?: string;
-  population?: number;
-  title?: string;
-};
-
-export type SanityImagePalette = {
-  _type: "sanity.imagePalette";
-  darkMuted?: SanityImagePaletteSwatch;
-  lightVibrant?: SanityImagePaletteSwatch;
-  darkVibrant?: SanityImagePaletteSwatch;
-  vibrant?: SanityImagePaletteSwatch;
-  dominant?: SanityImagePaletteSwatch;
-  lightMuted?: SanityImagePaletteSwatch;
-  muted?: SanityImagePaletteSwatch;
-};
-
-export type SanityImageDimensions = {
-  _type: "sanity.imageDimensions";
-  height?: number;
-  width?: number;
-  aspectRatio?: number;
-};
-
-export type SanityImageHotspot = {
-  _type: "sanity.imageHotspot";
-  x?: number;
-  y?: number;
-  height?: number;
-  width?: number;
-};
-
-export type SanityImageCrop = {
-  _type: "sanity.imageCrop";
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-};
-
-export type SanityFileAsset = {
-  _id: string;
-  _type: "sanity.fileAsset";
-  _createdAt: string;
-  _updatedAt: string;
-  _rev: string;
-  originalFilename?: string;
-  label?: string;
-  title?: string;
-  description?: string;
-  altText?: string;
-  sha1hash?: string;
-  extension?: string;
-  mimeType?: string;
-  size?: number;
-  assetId?: string;
-  uploadId?: string;
-  path?: string;
-  url?: string;
-  source?: SanityAssetSourceData;
-};
-
-export type SanityImageAsset = {
-  _id: string;
-  _type: "sanity.imageAsset";
-  _createdAt: string;
-  _updatedAt: string;
-  _rev: string;
-  originalFilename?: string;
-  label?: string;
-  title?: string;
-  description?: string;
-  altText?: string;
-  sha1hash?: string;
-  extension?: string;
-  mimeType?: string;
-  size?: number;
-  assetId?: string;
-  uploadId?: string;
-  path?: string;
-  url?: string;
-  metadata?: SanityImageMetadata;
-  source?: SanityAssetSourceData;
-};
-
-export type SanityImageMetadata = {
-  _type: "sanity.imageMetadata";
-  location?: Geopoint;
-  dimensions?: SanityImageDimensions;
-  palette?: SanityImagePalette;
-  lqip?: string;
-  blurHash?: string;
-  hasAlpha?: boolean;
-  isOpaque?: boolean;
-};
-
-export type Geopoint = {
-  _type: "geopoint";
-  lat?: number;
-  lng?: number;
-  alt?: number;
-};
-
-export type Slug = {
-  _type: "slug";
-  current?: string;
-  source?: string;
-};
-
-export type SanityAssetSourceData = {
-  _type: "sanity.assetSourceData";
-  name?: string;
-  id?: string;
-  url?: string;
-};
-
-export type AllSanitySchemaTypes = Home | FaqSection | CtaSection | ContactSection | ImageWithAlt | Faq | Button | Settings | BlockContent | HighlightColor | TextColor | SimplerColor | MetaTag | MetaAttribute | SeoMetaFields | Twitter | OpenGraph | Custom | Link | SanityImagePaletteSwatch | SanityImagePalette | SanityImageDimensions | SanityImageHotspot | SanityImageCrop | SanityFileAsset | SanityImageAsset | SanityImageMetadata | Geopoint | Slug | SanityAssetSourceData;
-export declare const internalGroqTypeReferenceTo: unique symbol;
--- a/template/apps/client/src/sanity/settings.ts
+++ b/template/apps/client/src/sanity/settings.ts
@@ -1,18 +0,0 @@
-import { sanityFetch } from "./live";
-
-export async function fetchSettings(prop?: string | undefined) {
-  const settingsFetch = await sanityFetch({
-    query: `*[_type == "settings"][0]{
-            ${
-              prop ||
-              `title,
-               longTitle,
-               footer,
-               description,
-                logo,
-                favicon`
-            }
-          }`,
-  });
-  return settingsFetch.data;
-}
--- a/template/apps/client/static/robots.txt
+++ b/template/apps/client/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
--- a/template/apps/client/svelte.config.js
+++ b/template/apps/client/svelte.config.js
@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-cloudflare-workers';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+	kit: { adapter: adapter() }
+};
+
+export default config;
--- a/template/apps/client/tailwind.config.ts
+++ b/template/apps/client/tailwind.config.ts
@@ -1,3 +0,0 @@
-import { config } from "@repo/ui";
-
-export default config;
--- a/template/apps/client/tsconfig.json
+++ b/template/apps/client/tsconfig.json
@@ -1,20 +1,19 @@
 {
-  "extends": "@repo/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    },
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "../../packages/ui/src/tailwind.config.ts"
-, "../../packages/ui/src/components/logo.tsx"  ],
-  "exclude": [
-    "node_modules"
-  ]
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
--- a/template/apps/client/vite.config.ts
+++ b/template/apps/client/vite.config.ts
@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});
--- a/template/apps/client/wrangler.jsonc
+++ b/template/apps/client/wrangler.jsonc
@@ -0,0 +1,13 @@
+{
+	"name": "template-sanity",
+	"account_id": "7709703dd5c5923bd03a32fefb04f32d", // vaporvee
+	"main": "./.cloudflare/worker.js",
+	"site": {
+		"bucket": "./.cloudflare/public"
+	},
+	"build": {
+		"command": "bun run build"
+	},
+	"compatibility_date": "2021-11-12",
+    "compatibility_flags": ["nodejs_compat"]
+}
--- a/template/apps/studio/README.md
+++ b/template/apps/studio/README.md
@@ -5,7 +5,5 @@ Congratulations, you have now installed the Sanity Content Studio, an open-sourc
 Now you can do the following things:

 - [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
- Check out the example frontend: [React/Next.js](https://github.com/sanity-io/tutorial-sanity-blog-react-next)
- [Read the blog post about this template](https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js?utm_source=readme)
 - [Join the Sanity community](https://www.sanity.io/community/join?utm_source=readme)
 - [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)
--- a/template/apps/studio/package.json
+++ b/template/apps/studio/package.json
@@ -19,10 +19,10 @@
    "@repo/sanity-connection": "*",
    "@repo/ui": "*",
    "@sanity/document-internationalization": "^3.3.3",
-    "@sanity/vision": "^4.1.1",
+    "@sanity/vision": "^4.2.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
-    "sanity": "^4.1.1",
+    "sanity": "^4.2.0",
    "sanity-plugin-link-field": "^1.4.0",
    "sanity-plugin-media": "^3.0.4",
    "sanity-plugin-seo": "^1.3.1",
--- a/template/apps/studio/sanity-typegen.json
+++ b/template/apps/studio/sanity-typegen.json
@@ -1,4 +1,4 @@
 {
-    "generates": "../client/src/sanity/sanity.types.ts",
+    "generates": "../client-svelte/src/lib/sanity.types.ts",
    "path": "./schemaTypes/*.ts"
 }
--- a/template/apps/studio/sanity.config.ts
+++ b/template/apps/studio/sanity.config.ts
@@ -39,15 +39,17 @@ export default defineConfig({
              .child(S.document().schemaType('settings').documentId('settings').title('Settings')),
          ]),
    }),
+    // @ts-ignore
    linkField({
      linkableSchemaTypes: ['custom'],
    }),
    presentationTool({
      previewUrl: {
-        origin: sanityConnection.previewUrl ?? 'http://localhost:3000',
+        origin: sanityConnection.previewUrl ?? 'http://localhost:5173',
        preview: '/',
        previewMode: {
-          enable: '/api/draft-mode/enable',
+          enable: '/preview/enable',
+          disable: '/preview/disable',
        },
      },
    }),
--- a/template/apps/studio/schemaTypes/objects/imageWithAlt.ts
+++ b/template/apps/studio/schemaTypes/objects/imageWithAlt.ts
@@ -10,11 +10,10 @@ export default defineField({
      title: 'Alt Text',
      type: 'string',
      description: 'Important for SEO and accessibility',
-      validation: (Rule) => Rule.required().min(1).max(100),
+      validation: (Rule) => Rule.max(100),
    }),
  ],
  options: {
    hotspot: true,
  },
-  validation: (Rule) => Rule.required()
 })
--- a/template/apps/studio/schemaTypes/pages/home.ts
+++ b/template/apps/studio/schemaTypes/pages/home.ts
@@ -16,6 +16,7 @@ export default defineType({
    defineField({
      name: 'title',
      title: 'Page Title',
+      initialValue: 'Home',
      type: 'string',
      validation: (Rule) => Rule.required(),
      group: 'header',
--- a/template/apps/studio/schemaTypes/sections/cta.ts
+++ b/template/apps/studio/schemaTypes/sections/cta.ts
@@ -10,24 +10,26 @@ export default defineType({
    defineField({
      name: 'backgroundImage',
      title: 'Background Image',
-      type: 'imageWithAlt',
-      validation: (Rule) => Rule.required(),
+      type: 'imageWithAlt'
    }),
    defineField({
      name: 'title',
      title: 'Title',
+      initialValue: 'Welcome to Our Site',
      type: 'string',
      validation: (Rule) => Rule.required().min(1).max(100),
    }),
    defineField({
      name: 'description',
      title: 'Description',
-      type: 'blockContent',
-      validation: (Rule) => Rule.required(),
+      type: 'blockContent'
    }),
    defineField({
      name: 'button',
      title: 'Button',
+      initialValue: {
+        text: 'Get Started',
+      },
      type: 'button',
      validation: (Rule) => Rule.required(),
    }),
--- a/template/bun.lock
+++ b/template/bun.lock
--- a/template/nx.json
+++ b/template/nx.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "targetDefaults": {
+    "build": {
+      "dependsOn": [
+        "^build",
+        "^generate"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*",
+        "{projectRoot}/.env*"
+      ],
+      "outputs": [
+        "{projectRoot}/dist/**"
+      ],
+      "cache": true
+    },
+    "lint": {
+      "dependsOn": [
+        "^lint"
+      ],
+      "cache": true
+    },
+    "check-types": {
+      "dependsOn": [
+        "^check-types"
+      ],
+      "cache": true
+    },
+    "deploy": {
+      "cache": true
+    },
+    "generate": {
+      "cache": true
+    },
+    "dev": {
+      "cache": true
+    }
+  }
+}
--- a/template/package.json
+++ b/template/package.json
@@ -2,18 +2,18 @@
  "name": "web",
  "private": true,
  "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "deploy": "turbo run deploy",
-    "generate": "turbo run generate",
+    "build": "nx run-many -t build",
+    "dev": "nx run-many -t dev",
+    "lint": "nx run-many -t lint",
+    "deploy": "nx run-many -t deploy",
+    "generate": "nx run-many -t generate",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "check-types": "turbo run check-types"
+    "check-types": "nx run-many -t check-types"
  },
  "devDependencies": {
    "prettier": "^3.6.2",
-    "turbo": "^2.5.5",
-    "typescript": "5.8.3"
+    "typescript": "5.8.3",
+    "nx": "21.3.11"
  },
  "engines": {
    "bun": ">=1.2.12"
@@ -28,4 +28,4 @@
    "colorette": "^2.0.20",
    "fs-extra": "^11.3.0"
  }
-}
+}
--- a/template/packages/sanity-connection/index.ts
+++ b/template/packages/sanity-connection/index.ts
@@ -1,9 +1,9 @@
 export const sanityConnection = {
  pageTitle: "lumify template",
-  publicViewerToken: "skX06BHIWzgWfkt52091aJgLmYEwFJ7ufghsXi0wRXRkW2Nom8mzfYnFpSVJH1toNy0e34Hot2yTwjLxHCjhsWLZiC0qjR19WI6b9WEFj04shHMZCiS09LgRuzd9BnEgewAQpJUAbhdSwg3NOg8rOhZXpHyciAoYwLqhaTHP6g0FDpiZFrb5",
-  studioHost: "vaporvee",
-  studioUrl: "https://vaporvee.sanity.studio", // normaly https://<studioHost>.sanity.studio
-  projectId: "ax04yw0e",
-  previewUrl: "http://localhost:3000",
+  publicViewerToken: "skIwDMWqhZ3YBpwVE4abnq3JsW0Ncru5rTbYbE1Qwa5aSIOT0mzktYHUKAowoneBQix1fxuAB9yYzQFkKuhA4tByjELI0i9pRCko8cxnseXOW36hWFwUnY57GKyhCQnWCB5Ky4YlwXRJWnXfygfk0by87R7hTQigMy0bNs0gDgwCu2a4JoEl",
+  studioHost: "web-svelte",
+  studioUrl: "https://web-svelte.sanity.studio", // normaly https://<studioHost>.sanity.studio
+  projectId: "mp2psn1f",
+  previewUrl: "http://localhost:5173",
  dataset: "production", // leave as "production" for the main dataset
 };
--- a/template/packages/typescript-config/nextjs.json
+++ b/template/packages/typescript-config/nextjs.json
@@ -1,14 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./base.json",
-  "compilerOptions": {
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "allowJs": true,
-    "noEmit": true,
-    "jsx": "preserve"
-  },
-}
--- a/template/packages/typescript-config/react-library.json
+++ b/template/packages/typescript-config/react-library.json
@@ -1,7 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  }
-}
--- a/template/packages/ui/package.json
+++ b/template/packages/ui/package.json
@@ -9,7 +9,6 @@
  },
  "scripts": {
    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component",
    "check-types": "tsc --noEmit"
  },
  "devDependencies": {
--- a/template/turbo.json
+++ b/template/turbo.json
@@ -1,37 +0,0 @@
-{
-  "$schema": "https://turborepo.com/schema.json",
-  "ui": "tui",
-  "tasks": {
-    "build": {
-      "dependsOn": [
-        "^build",
-        "^generate"
-      ],
-      "inputs": [
-        "$TURBO_DEFAULT$",
-        ".env*"
-      ],
-      "outputs": [
-        ".next/**",
-        "!.next/cache/**",
-        "dist/**"
-      ]
-    },
-    "lint": {
-      "dependsOn": [
-        "^lint"
-      ]
-    },
-    "check-types": {
-      "dependsOn": [
-        "^check-types"
-      ]
-    },
-    "deploy": {},
-    "generate": {},
-    "dev": {
-      "cache": false,
-      "persistent": true
-    }
-  }
-}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.