site

2025-09-07 20:43:41 +03:00
parent b588a61998
commit f4fd000322
43 changed files with 4015 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Issues:
 3. Certain properties like `scale` and `rotate` don't apply to the `active` pseudo-class because they rely on mouse_enter and mouse_exit events
 4. `<div style="bg-[#3b82f6] w-[100px] h-[100px] flex hover:scale-110 transition hover:rotate-45">Box</div>` something like this has the "Box" text (presumably the PanelContainer) as the target of the hover, not the div itself (which has the w/h size)
 5. font in button doesn't comply with CSS, its the projects default
+6. The HTML, or Lua, doesn't support non-UTF8 characters. The HTML parser relies on `PackedByteArray` (for the XMLParser, from my memory).

 Notes:
 - **< input />** is sort-of inline in normal web. We render it as a block element (new-line).
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/site/.npmrc
+++ b/site/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/site/.prettierignore
+++ b/site/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/site/.prettierrc
+++ b/site/.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/site/README.md
+++ b/site/README.md
@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+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
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/site/components.json
+++ b/site/components.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src\\app.css",
+		"baseColor": "gray"
+	},
+	"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/site/package-lock.json
+++ b/site/package-lock.json
--- a/site/package.json
+++ b/site/package.json
@@ -0,0 +1,42 @@
+{
+	"name": "site",
+	"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 ."
+	},
+	"devDependencies": {
+		"@internationalized/date": "^3.9.0",
+		"@lucide/svelte": "^0.542.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0",
+		"bits-ui": "^2.9.6",
+		"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.8",
+		"typescript": "^5.0.0",
+		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"@fontsource/instrument-serif": "^5.2.7",
+		"lucide-svelte": "^0.542.0"
+	}
+}
--- a/site/src/app.css
+++ b/site/src/app.css
@@ -0,0 +1,141 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import '@fontsource/instrument-serif';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+
+  --gurted-red: oklch(0.65 0.22 15); /* Bright red */
+  --gurted-red-hover: oklch(0.60 0.25 15); /* Darker red hover */
+  --gurted-yellow: oklch(0.80 0.15 85); /* Bright yellow */
+  --gurted-yellow-hover: oklch(0.75 0.18 85); /* Darker yellow hover */
+  --gurted-gray-dark: oklch(0.18 0 0); /* Dark gray #1b1b1b */
+  --gurted-gray-medium: oklch(0.25 0 0); /* Medium gray #2b2b2b */
+  
+  --background: oklch(0.98 0.002 240);
+  --foreground: oklch(0.20 0.020 240);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.20 0.020 240);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.20 0.020 240);
+  --primary: var(--gurted-red);
+  --primary-foreground: oklch(0.985 0.002 240);
+  --secondary: oklch(0.96 0.003 240);
+  --secondary-foreground: oklch(0.20 0.020 240);
+  --muted: oklch(0.96 0.003 240);
+  --muted-foreground: oklch(0.55 0.027 240);
+  --accent: oklch(0.96 0.003 240);
+  --accent-foreground: oklch(0.20 0.020 240);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 240);
+  --input: oklch(0.928 0.006 240);
+  --ring: var(--gurted-red);
+  --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.002 240);
+  --sidebar-foreground: oklch(0.20 0.020 240);
+  --sidebar-primary: var(--gurted-red);
+  --sidebar-primary-foreground: oklch(0.985 0.002 240);
+  --sidebar-accent: oklch(0.96 0.003 240);
+  --sidebar-accent-foreground: oklch(0.20 0.020 240);
+  --sidebar-border: oklch(0.928 0.006 240);
+  --sidebar-ring: var(--gurted-red);
+}
+
+.dark {
+  --background: var(--gurted-gray-dark);
+  --foreground: oklch(0.985 0.002 240);
+  --card: var(--gurted-gray-medium);
+  --card-foreground: oklch(0.985 0.002 240);
+  --popover: var(--gurted-gray-medium);
+  --popover-foreground: oklch(0.985 0.002 240);
+  --primary: var(--gurted-red);
+  --primary-foreground: oklch(0.985 0.002 240);
+  --secondary: oklch(0.35 0.01 240);
+  --secondary-foreground: oklch(0.985 0.002 240);
+  --muted: oklch(0.35 0.01 240);
+  --muted-foreground: oklch(0.70 0.022 240);
+  --accent: oklch(0.35 0.01 240);
+  --accent-foreground: oklch(0.985 0.002 240);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--gurted-red);
+}
+
+@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(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Gurted specific styles */
+.font-gurted {
+  font-family: 'Instrument Serif', serif;
+}
+
+.text-gurted-gradient {
+  background: linear-gradient(135deg, var(--gurted-red) 0%, var(--gurted-yellow) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.hero-gradient {
+  background: linear-gradient(135deg, var(--gurted-gray-dark) 0%, var(--gurted-gray-medium) 50%, oklch(0.30 0.02 240) 100%);
+}
--- a/site/src/app.d.ts
+++ b/site/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/site/src/app.html
+++ b/site/src/app.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Gurted - A New Web Ecosystem</title>
+		<meta name="description" content="Gurted introduces a new web ecosystem with the gurt:// protocol, custom browser Flumi, and revolutionary HTML/CSS/Lua standards." />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="dark bg-background text-foreground">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/site/src/lib/assets/favicon.svg
+++ b/site/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/site/src/lib/components/Navbar.svelte
+++ b/site/src/lib/components/Navbar.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import { Download, FileText, Info } from 'lucide-svelte';
+</script>
+
+<nav class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-2xl px-4">
+    <div class="bg-background backdrop-blur-xl border border-border/50 rounded-3xl px-6 py-3 shadow-2xl">
+    <div class="flex items-center justify-between">
+      <!-- Logo and Brand -->
+      <a href="/" class="flex items-center space-x-3">
+        <div class="w-8 h-8 flex items-center justify-center">
+          <img src="/favicon.svg" alt="Gurted Logo" class="w-8 h-8" />
+        </div>
+        <span class="font-gurted font-bold text-xl text-gurted-gradient">Gurted</span>
+      </a>
+
+      <!-- Navigation Links -->
+      <div class="hidden md:flex items-center space-x-1">
+        <Button variant="ghost" size="sm" class="text-muted-foreground hover:text-foreground" href="https://docs.gurted.com">
+          Docs
+        </Button>
+        <Button variant="ghost" size="sm" class="text-muted-foreground hover:text-foreground" href="https://github.com/outpoot/gurted">
+          GitHub
+        </Button>
+        <a href="/download">
+          <Button size="sm" class="bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg">
+            Download
+          </Button>
+        </a>
+      </div>
+
+      <!-- Mobile Menu Button -->
+      <div class="md:hidden">
+        <a href="/download">
+          <Button size="sm" class="bg-primary hover:bg-primary/90 text-primary-foreground">
+            <Download class="w-4 h-4" />
+          </Button>
+        </a>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<style>
+  nav {
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+  }
+</style>
--- a/site/src/lib/components/ui/badge/badge.svelte
+++ b/site/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = 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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
--- a/site/src/lib/components/ui/badge/index.ts
+++ b/site/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
--- a/site/src/lib/components/ui/button/button.svelte
+++ b/site/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 cursor-pointer",
+		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/site/src/lib/components/ui/button/index.ts
+++ b/site/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/site/src/lib/components/ui/card/card-action.svelte
+++ b/site/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/card-content.svelte
+++ b/site/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/card-description.svelte
+++ b/site/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
--- a/site/src/lib/components/ui/card/card-footer.svelte
+++ b/site/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/card-header.svelte
+++ b/site/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/card-title.svelte
+++ b/site/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("font-semibold leading-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/card.svelte
+++ b/site/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/site/src/lib/components/ui/card/index.ts
+++ b/site/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
--- a/site/src/lib/components/ui/separator/index.ts
+++ b/site/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
--- a/site/src/lib/components/ui/separator/separator.svelte
+++ b/site/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator"
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		className
+	)}
+	{...restProps}
+/>
--- a/site/src/lib/index.ts
+++ b/site/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/site/src/lib/utils.ts
+++ b/site/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	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/site/src/routes/+layout.svelte
+++ b/site/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import '../app.css';
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+{@render children?.()}
--- a/site/src/routes/+page.svelte
+++ b/site/src/routes/+page.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import {
+		Download,
+		Shield,
+		Zap,
+		Palette,
+		Globe,
+		Wrench,
+		Rocket,
+		ExternalLink,
+		Search,
+		KeyRound,
+		Terminal,
+		Server
+	} from 'lucide-svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+</script>
+
+<svelte:head>
+	<title>Gurted</title>
+	<meta
+		name="description"
+		content="A web ecosystem with the gurt:// protocol, custom browser Flumi, DNS system, and modern HTML/CSS/Lua standards."
+	/>
+
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+</svelte:head>
+
+<main class="bg-background text-foreground min-h-screen">
+	<Navbar />
+
+	<!-- Hero Section -->
+	<section class="px-4 py-20 pt-40">
+		<div class="container mx-auto max-w-6xl text-center">
+			<div class="animate-fade-in-up">
+				<h1 class="text-6xl md:text-9xl lg:text-[8rem] font-bold mb-6 animate-fade-in font-gurted text-gurted-gradient">
+					Gurted
+				</h1>
+				<p class="text-muted-foreground mx-auto mb-4 max-w-3xl text-xl md:text-2xl">
+					A web ecosystem introducing the <code
+						class="bg-muted text-primary rounded px-2 py-1 font-mono">gurt://</code
+					> protocol
+				</p>
+
+				<div class="flex flex-col justify-center gap-4 sm:flex-row">
+					<Button size="lg" class="px-8 py-6 text-lg">
+						<Download class="h-5 w-5" />
+						Download
+					</Button>
+					<Button variant="outline" size="lg" class="px-8 py-6 text-lg">
+						<ExternalLink class="h-5 w-5" />
+						Documentation
+					</Button>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- Ecosystem -->
+	<section class="px-4 py-20">
+		<div class="container mx-auto max-w-6xl">
+			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/crt.gif"
+								alt="Flumi wayfinder"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">Flumi</CardTitle>
+						<CardDescription>The wayfinder (browser)</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							Built with the Godot game engine for native performance and features across all platforms, Flumi will light the way.
+						</p>
+					</CardContent>
+				</Card>
+
+				<!-- GURT Protocol -->
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0.1s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/gurtprotocol.jpg"
+								alt="GURT Protocol"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">GURT Protocol</CardTitle>
+						<CardDescription>The protocol</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							HTTP-like protocol with mandatory TLS 1.3 encryption, built specifically for Gurted.
+						</p>
+					</CardContent>
+				</Card>
+
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0.2s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/domains.png"
+								alt="GurtDNS"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">GurtDNS</CardTitle>
+						<CardDescription>The DNS server</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							Custom DNS system on GURT with encryption similar to DoH (DNS over HTTPS) and downloadable records.
+						</p>
+					</CardContent>
+				</Card>
+
+				<!-- Ringle Search Engine -->
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0.3s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/ringle-preview.png"
+								alt="Ringle Search Engine"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">Ringle</CardTitle>
+						<CardDescription>The search engine</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							Powerful search engine designed specifically for the GURT ecosystem with privacy-first
+							approach.
+						</p>
+					</CardContent>
+				</Card>
+
+				<!-- GurtCA -->
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0.4s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/gurtca.png"
+								alt="GurtCA Certificate Authority"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">GurtCA</CardTitle>
+						<CardDescription>The certificate authority</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							Certificate authority providing TLS certificates for GURT domains with automated
+							validation.
+						</p>
+					</CardContent>
+				</Card>
+
+				<!-- Gurty CLI -->
+				<Card
+					class="animate-float border-border/50 text-center transition-all duration-300 hover:shadow-xl"
+					style="animation-delay: 0.5s;"
+				>
+					<CardHeader>
+						<div
+							class="from-primary/20 to-secondary/20 mb-6 flex h-48 w-full items-center justify-center rounded-xl bg-gradient-to-br"
+						>
+							<img
+								src="/gurty.png"
+								alt="Gurty CLI Tool"
+								class="h-full w-full rounded-xl object-cover"
+							/>
+						</div>
+						<CardTitle class="text-2xl">Gurty</CardTitle>
+						<CardDescription>The CLI tool</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<p class="text-muted-foreground">
+							Command-line interface for setting up and managing GURT protocol servers with ease.
+						</p>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+
+	<!-- Code Examples -->
+	<section class="bg-muted/30 px-4 py-20">
+		<div class="container mx-auto max-w-6xl">
+			<div class="mb-16 text-center">
+				<h2 class="font-gurted mb-4 text-4xl font-bold md:text-5xl">See It In Action</h2>
+				<p class="text-muted-foreground text-xl">
+					An example of a simple GURT site
+				</p>
+			</div>
+
+			<div class="grid gap-8 md:grid-cols-2">
+				<!-- HTML Example -->
+				<Card>
+					<CardHeader>
+						<CardTitle>HTML</CardTitle>
+						<CardDescription>HTML with utility-first styling</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<pre class="bg-muted text-foreground overflow-x-auto rounded-lg p-4 text-sm"><code
+								class="language-html"
+								>{`<head>
+    <title>My Gurt Site</title>
+    <icon src="gurt://example.real/icon.png">
+</head>
+
+<body>
+    <h1 style="text-3xl font-bold text-center">
+        Welcome to Gurted!
+    </h1>
+    <div style="flex flex-col gap-4 p-4 bg-[#f8fafc]">
+        <p style="text-lg text-[#64748b]">
+            The future of web development
+        </p>
+    </div>
+</body>`}</code
+							></pre>
+					</CardContent>
+				</Card>
+
+				<!-- Lua Example -->
+				<Card>
+					<CardHeader>
+						<CardTitle>Lua</CardTitle>
+						<CardDescription>Dynamic content with Lua scripting</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<pre class="bg-muted text-foreground overflow-x-auto rounded-lg p-4 text-sm"><code class="language-lua">{`<script>
+local heading = gurt.select('h1')
+heading:text('Dynamic Content!')
+
+local new_div = gurt.create('div', {
+    style = 'bg-blue-500 p-4 rounded'
+})
+
+new_div.text = 'Created with Lua!'
+gurt.select('body'):append(new_div)
+
+gurt.select('button'):on('click', function()
+    trace.log('Button clicked!')
+end)
+</script>`}</code></pre>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+
+	<!-- Downloads Section -->
+	<section class="bg-muted/30 px-4 py-10">
+		<div class="container mx-auto max-w-4xl text-center">
+			<h2 class="font-gurted mb-6 text-4xl font-bold md:text-5xl">Get Started Today</h2>
+
+			<div class="mb-8 grid gap-6 md:grid-cols-2 max-w-2xl mx-auto">
+				<Card class="bg-card border-border/50">
+					<CardHeader>
+						<CardTitle>1. Download</CardTitle>
+						<CardDescription>Get the Flumi wayfinder for your platform</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Button class="w-full">
+							<Download class="h-4 w-4" />
+							Download
+						</Button>
+					</CardContent>
+				</Card>
+
+				<Card class="bg-card border-border/50">
+					<CardHeader>
+						<CardTitle>2. Start Building</CardTitle>
+						<CardDescription>Create your first GURT site</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Button variant="outline" class="w-full">
+							<ExternalLink class="h-4 w-4" />
+							Documentation
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+</main>
+
+<style>
+	@keyframes fadeInUp {
+		from {
+			opacity: 0;
+			transform: translateY(30px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fade-in-up {
+		animation: fadeInUp 0.8s ease-out;
+	}
+
+	code {
+		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+	}
+
+	pre {
+		font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+		line-height: 1.4;
+	}
+</style>
--- a/site/src/routes/download/+page.svelte
+++ b/site/src/routes/download/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import {
+		Download,
+		Shield,
+		Globe,
+		Search,
+		KeyRound,
+		Terminal,
+		ExternalLink,
+		Github,
+		Monitor,
+		AppWindow,
+	} from 'lucide-svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
+
+    const version = '1.0.0';
+</script>
+
+<svelte:head>
+	<title>Download - Gurted</title>
+	<meta
+		name="description"
+		content="Download Flumi browser and other Gurted ecosystem components for your platform."
+	/>
+</svelte:head>
+
+<main class="bg-background text-foreground min-h-screen">
+	<Navbar />
+
+	<!-- Main Downloads -->
+	<section class="px-4 pt-40">
+		<div class="container mx-auto max-w-6xl">
+			<div class="mb-16 text-center">
+				<h2 class="font-gurted mb-4 inline-block align-middle text-4xl font-bold md:text-5xl">
+					Flumi
+				</h2>
+				<Badge variant="secondary" class="ml-2 align-middle">v{version}</Badge>
+				<p class="text-muted-foreground mx-auto max-w-3xl text-xl">
+					The official wayfinder (browser) for the GURT ecosystem
+				</p>
+			</div>
+
+			<div class="mb-16 grid gap-8 md:grid-cols-3">
+				<!-- Windows -->
+				<Card class="text-center transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div
+							class="bg-primary/10 mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl"
+						>
+							<AppWindow class="text-primary h-12 w-12" />
+						</div>
+						<CardTitle class="text-2xl">Windows</CardTitle>
+						<CardDescription>Windows 10/11 (x64)</CardDescription>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<Button class="w-full" size="lg" href="https://github.com/outpoot/gurted/releases/download/v{version}/Flumi_Setup_Windows.exe" target="_blank" rel="noopener noreferrer">
+							<Download class="h-4 w-4 " />
+							Download
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- macOS -->
+				<Card class="text-center transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div
+							class="bg-primary/10 mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl"
+						>
+							<Monitor class="text-primary h-12 w-12" />
+						</div>
+						<CardTitle class="text-2xl">macOS</CardTitle>
+						<CardDescription>macOS 11+ (Universal)</CardDescription>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<Button class="w-full" size="lg" disabled>
+							<Download class="h-4 w-4 "/>
+							Download (soon)
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- Linux -->
+				<Card class="text-center transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div
+							class="bg-primary/10 mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl"
+						>
+							<Terminal class="text-primary h-12 w-12" />
+						</div>
+						<CardTitle class="text-2xl">Linux</CardTitle>
+						<CardDescription>Ubuntu 20.04+ / Fedora 35+</CardDescription>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<Button class="w-full" size="lg" onclick={() => alert('oh my god bruh')}>
+							<Download class="h-4 w-4 " />
+							Download
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+
+	<!-- Ecosystem Tools -->
+	<section class="bg-muted/30 px-4 py-10">
+		<div class="container mx-auto max-w-6xl">
+			<div class="mb-16 text-center">
+				<h2 class="font-gurted mb-4 text-4xl font-bold md:text-5xl">Ecosystem Tools</h2>
+				<p class="text-muted-foreground mx-auto max-w-3xl text-xl">
+					Additional tools and services for developers and server administrators
+				</p>
+			</div>
+
+			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+				<!-- GURT Protocol Library -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<Shield class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>GURT Protocol</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							Implementation libraries for the GURT protocol in multiple languages
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View on GitHub
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- GurtDNS Server -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<Globe class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>GurtDNS</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							Self-hosted DNS server with encrypted queries and domain management
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View Repository
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- Ringle Search -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<Search class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>Ringle</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							Privacy-focused search engine designed for the GURT ecosystem
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View Repository
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- GurtCA -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<KeyRound class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>GurtCA</CardTitle>
+					</CardHeader>
+                    <CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							Automated certificate authority for GURT domains with DNS validation
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View Repository
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- Gurty CLI -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<Terminal class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>Gurty CLI</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							CLI tool for setting up and managing GURT protocol servers
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View Repository
+						</Button>
+					</CardContent>
+				</Card>
+
+				<!-- Source Code -->
+				<Card class="transition-all duration-300 hover:shadow-xl">
+					<CardHeader>
+						<div class="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-2xl">
+							<Github class="text-primary h-8 w-8" />
+						</div>
+						<CardTitle>Source Code</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<p class="text-muted-foreground text-sm">
+							All Gurted components are open source and available on GitHub
+						</p>
+						<Button variant="outline" class="w-full" href="https://github.com/outpoot/gurted">
+							<ExternalLink class="h-4 w-4 " />
+							View Repository
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	</section>
+</main>
+
+<style>
+	@keyframes fadeInUp {
+		from {
+			opacity: 0;
+			transform: translateY(30px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fade-in-up {
+		animation: fadeInUp 0.8s ease-out;
+	}
+</style>
--- a/site/static/crt.gif
+++ b/site/static/crt.gif
--- a/site/static/domains.png
+++ b/site/static/domains.png
--- a/site/static/favicon.svg
+++ b/site/static/favicon.svg
--- a/site/static/gurtca.png
+++ b/site/static/gurtca.png
--- a/site/static/gurtprotocol.jpg
+++ b/site/static/gurtprotocol.jpg
--- a/site/static/gurty.png
+++ b/site/static/gurty.png
--- a/site/static/robots.txt
+++ b/site/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
--- a/site/svelte.config.js
+++ b/site/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+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-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"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
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}
--- a/site/vite.config.ts
+++ b/site/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()]
+});
				`@@ -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.