create-strayl-landing 1.0.0

package/dist/index.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+
+// src/index.ts
+import { Command } from "commander";
+import pc from "picocolors";
+import { cpSync, existsSync, readFileSync, renameSync, writeFileSync } from "fs";
+import { resolve, dirname, join } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var templateDir = resolve(__dirname, "..", "template");
+var program = new Command();
+program.name("create-strayl-landing").description("Scaffold a new Strayl landing page").requiredOption("--name <name>", "Name of the new project").action((opts) => {
+  const name = opts.name.trim();
+  if (!name) {
+    console.error(pc.red("Error: --name must not be empty."));
+    process.exit(1);
+  }
+  if (!/^[a-zA-Z0-9_@\/-][a-zA-Z0-9_.\-@\/]*$/.test(name)) {
+    console.error(
+      pc.red(
+        "Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes."
+      )
+    );
+    process.exit(1);
+  }
+  const targetDir = resolve(process.cwd(), name);
+  if (existsSync(targetDir)) {
+    console.error(
+      pc.red(`Error: Directory "${name}" already exists.`)
+    );
+    process.exit(1);
+  }
+  if (!existsSync(templateDir)) {
+    console.error(
+      pc.red("Error: Template directory not found. The package may be corrupted.")
+    );
+    process.exit(1);
+  }
+  console.log(pc.cyan(`Creating project "${name}"...`));
+  cpSync(templateDir, targetDir, { recursive: true });
+  const gitignorePath = join(targetDir, "gitignore");
+  if (existsSync(gitignorePath)) {
+    renameSync(gitignorePath, join(targetDir, ".gitignore"));
+  }
+  const pkgJsonPath = join(targetDir, "package.json");
+  if (existsSync(pkgJsonPath)) {
+    const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+    pkgJson.name = name;
+    delete pkgJson.private;
+    writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + "\n");
+  }
+  console.log(pc.green(`
+Project "${name}" created successfully!
+`));
+  console.log("Next steps:");
+  console.log(pc.cyan(`  cd ${name}`));
+  console.log(pc.cyan("  npm install"));
+  console.log(pc.cyan("  npm run dev"));
+  console.log();
+});
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport pc from \"picocolors\";\nimport { cpSync, existsSync, readFileSync, renameSync, writeFileSync } from \"node:fs\";\nimport { resolve, dirname, join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\nconst templateDir = resolve(__dirname, \"..\", \"template\");\n\nconst program = new Command();\n\nprogram\n  .name(\"create-strayl-landing\")\n  .description(\"Scaffold a new Strayl landing page\")\n  .requiredOption(\"--name <name>\", \"Name of the new project\")\n  .action((opts: { name: string }) => {\n    const name = opts.name.trim();\n\n    if (!name) {\n      console.error(pc.red(\"Error: --name must not be empty.\"));\n      process.exit(1);\n    }\n\n    if (!/^[a-zA-Z0-9_@\\/-][a-zA-Z0-9_.\\-@\\/]*$/.test(name)) {\n      console.error(\n        pc.red(\n          \"Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes.\"\n        )\n      );\n      process.exit(1);\n    }\n\n    const targetDir = resolve(process.cwd(), name);\n\n    if (existsSync(targetDir)) {\n      console.error(\n        pc.red(`Error: Directory \"${name}\" already exists.`)\n      );\n      process.exit(1);\n    }\n\n    if (!existsSync(templateDir)) {\n      console.error(\n        pc.red(\"Error: Template directory not found. The package may be corrupted.\")\n      );\n      process.exit(1);\n    }\n\n    console.log(pc.cyan(`Creating project \"${name}\"...`));\n\n    cpSync(templateDir, targetDir, { recursive: true });\n\n    // npm publish strips .gitignore, so we ship it as \"gitignore\" and rename here\n    const gitignorePath = join(targetDir, \"gitignore\");\n    if (existsSync(gitignorePath)) {\n      renameSync(gitignorePath, join(targetDir, \".gitignore\"));\n    }\n\n    const pkgJsonPath = join(targetDir, \"package.json\");\n    if (existsSync(pkgJsonPath)) {\n      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, \"utf-8\"));\n      pkgJson.name = name;\n      delete pkgJson.private;\n      writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + \"\\n\");\n    }\n\n    console.log(pc.green(`\\nProject \"${name}\" created successfully!\\n`));\n    console.log(\"Next steps:\");\n    console.log(pc.cyan(`  cd ${name}`));\n    console.log(pc.cyan(\"  npm install\"));\n    console.log(pc.cyan(\"  npm run dev\"));\n    console.log();\n  });\n\nprogram.parse();\n"],"mappings":";;;;AAAA,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,QAAQ,YAAY,cAAc,YAAY,qBAAqB;AAC5E,SAAS,SAAS,SAAS,YAAY;AACvC,SAAS,qBAAqB;AAE9B,IAAM,YAAY,QAAQ,cAAc,YAAY,GAAG,CAAC;AACxD,IAAM,cAAc,QAAQ,WAAW,MAAM,UAAU;AAEvD,IAAM,UAAU,IAAI,QAAQ;AAE5B,QACG,KAAK,uBAAuB,EAC5B,YAAY,oCAAoC,EAChD,eAAe,iBAAiB,yBAAyB,EACzD,OAAO,CAAC,SAA2B;AAClC,QAAM,OAAO,KAAK,KAAK,KAAK;AAE5B,MAAI,CAAC,MAAM;AACT,YAAQ,MAAM,GAAG,IAAI,kCAAkC,CAAC;AACxD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,wCAAwC,KAAK,IAAI,GAAG;AACvD,YAAQ;AAAA,MACN,GAAG;AAAA,QACD;AAAA,MACF;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,YAAY,QAAQ,QAAQ,IAAI,GAAG,IAAI;AAE7C,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ;AAAA,MACN,GAAG,IAAI,qBAAqB,IAAI,mBAAmB;AAAA,IACrD;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,WAAW,WAAW,GAAG;AAC5B,YAAQ;AAAA,MACN,GAAG,IAAI,oEAAoE;AAAA,IAC7E;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,UAAQ,IAAI,GAAG,KAAK,qBAAqB,IAAI,MAAM,CAAC;AAEpD,SAAO,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;AAGlD,QAAM,gBAAgB,KAAK,WAAW,WAAW;AACjD,MAAI,WAAW,aAAa,GAAG;AAC7B,eAAW,eAAe,KAAK,WAAW,YAAY,CAAC;AAAA,EACzD;AAEA,QAAM,cAAc,KAAK,WAAW,cAAc;AAClD,MAAI,WAAW,WAAW,GAAG;AAC3B,UAAM,UAAU,KAAK,MAAM,aAAa,aAAa,OAAO,CAAC;AAC7D,YAAQ,OAAO;AACf,WAAO,QAAQ;AACf,kBAAc,aAAa,KAAK,UAAU,SAAS,MAAM,CAAC,IAAI,IAAI;AAAA,EACpE;AAEA,UAAQ,IAAI,GAAG,MAAM;AAAA,WAAc,IAAI;AAAA,CAA2B,CAAC;AACnE,UAAQ,IAAI,aAAa;AACzB,UAAQ,IAAI,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC;AACnC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI;AACd,CAAC;AAEH,QAAQ,MAAM;","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "create-strayl-landing",
+  "version": "1.0.0",
+  "description": "Scaffold a new Strayl landing page",
+  "type": "module",
+  "bin": {
+    "create-strayl-landing": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "strayl",
+    "create",
+    "landing",
+    "scaffold"
+  ],
+  "author": "Strayl Inc",
+  "license": "MIT"
+}

package/template/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/template/gitignore

@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi

package/template/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "strayl-landing",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "@fontsource-variable/bitcount-prop-single": "^5.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-start": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "next-themes": "^0.4.6",
+    "nitro": "npm:nitro-nightly@latest",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.4.0",
+    "vite-tsconfig-paths": "^6.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}

package/template/src/components/theme-provider.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}

package/template/src/components/themed-logo.tsx

@@ -0,0 +1,44 @@
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+interface ThemedLogoProps {
+  width?: number
+  height?: number
+  className?: string
+  alt?: string
+  inverted?: boolean
+}
+
+export function ThemedLogo({
+  width = 24,
+  height = 24,
+  className = "",
+  alt = "Strayl Logo",
+  inverted = false,
+}: ThemedLogoProps) {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div style={{ width, height }} className={className} />
+  }
+
+  const isDark = resolvedTheme === "dark"
+  const logoSrc = inverted
+    ? (isDark ? "/logo-dark.webp" : "/logo-light.webp")
+    : (isDark ? "/logo-light.webp" : "/logo-dark.webp")
+
+  return (
+    <img
+      src={logoSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+    />
+  )
+}

package/template/src/components/ui/button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+        icon: "size-9 sm:size-8",
+        "icon-lg": "size-10 sm:size-9",
+        "icon-sm": "size-8 sm:size-7",
+        "icon-xl":
+          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xs":
+          "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+      },
+      variant: {
+        default:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
+        destructive:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
+        "destructive-outline":
+          "border-input bg-transparent not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
+        ghost:
+          "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
+        link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+        outline:
+          "border-input bg-background not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
+      },
+    },
+  },
+);
+
+interface ButtonProps extends useRender.ComponentProps<"button"> {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+}
+
+function Button({ className, variant, size, render, ...props }: ButtonProps) {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    className: cn(buttonVariants({ className, size, variant })),
+    "data-slot": "button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export { Button, buttonVariants };

package/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/src/routeTree.gen.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/template/src/router.tsx

@@ -0,0 +1,14 @@
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen'
+
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    context: {},
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}

package/template/src/routes/__root.tsx

@@ -0,0 +1,69 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+
+import '@fontsource-variable/bitcount-prop-single'
+
+import { ThemeProvider } from '../components/theme-provider'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Strayl',
+      },
+      {
+        name: 'description',
+        content: 'Build end to end',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+      {
+        rel: 'icon',
+        href: '/favicon.ico',
+      },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+      },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossOrigin: 'anonymous',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap',
+      },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/template/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { ThemedLogo } from '@/components/themed-logo'
+
+export const Route = createFileRoute('/')({ component: App })
+
+function App() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center px-6">
+      <div className="text-center max-w-2xl">
+        <h1 className="text-6xl md:text-8xl font-normal text-foreground font-[family-name:var(--font-bitcount)]">
+          STRAYL
+        </h1>
+        <p className="text-lg md:text-xl text-muted-foreground mt-4">
+          Landing page template
+        </p>
+        <div className="mt-8">
+          <Button size="lg" render={<a href="https://strayl.dev" target="_blank" rel="noopener noreferrer" />}>
+            <ThemedLogo width={20} height={20} inverted />
+            Get Started
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/styles.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+@variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  /* Color mappings */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-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-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Semantic colors */
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  /* Fonts — Geist via Google Fonts, Bitcount via fontsource */
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --font-bitcount: "Bitcount Prop Single Variable", sans-serif;
+
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+/* Light theme (default) */
+:root {
+  --radius: 0.625rem;
+  --background: #f5f5f5;
+  --foreground: #262626;
+  --card: #ffffff;
+  --card-foreground: #262626;
+  --popover: #ffffff;
+  --popover-foreground: #262626;
+  --primary: #262626;
+  --primary-foreground: #fafafa;
+  --secondary: rgba(0, 0, 0, 0.04);
+  --secondary-foreground: #262626;
+  --muted: rgba(0, 0, 0, 0.04);
+  --muted-foreground: #737373;
+  --accent: rgba(0, 0, 0, 0.04);
+  --accent-foreground: #262626;
+  --destructive: #ef4444;
+  --destructive-foreground: #b91c1c;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.1);
+  --ring: #a3a3a3;
+  --info: #3b82f6;
+  --info-foreground: #1d4ed8;
+  --success: #10b981;
+  --success-foreground: #047857;
+  --warning: #f59e0b;
+  --warning-foreground: #b45309;
+}
+
+/* Dark theme */
+.dark {
+  --background: #171717;
+  --foreground: #f5f5f5;
+  --card: #262626;
+  --card-foreground: #f5f5f5;
+  --popover: #262626;
+  --popover-foreground: #f5f5f5;
+  --primary: #f5f5f5;
+  --primary-foreground: #262626;
+  --secondary: rgba(255, 255, 255, 0.04);
+  --secondary-foreground: #f5f5f5;
+  --muted: rgba(255, 255, 255, 0.04);
+  --muted-foreground: #a3a3a3;
+  --accent: rgba(255, 255, 255, 0.04);
+  --accent-foreground: #f5f5f5;
+  --destructive: #f87171;
+  --destructive-foreground: #fca5a5;
+  --border: rgba(255, 255, 255, 0.06);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #737373;
+  --info: #3b82f6;
+  --info-foreground: #60a5fa;
+  --success: #10b981;
+  --success-foreground: #34d399;
+  --warning: #f59e0b;
+  --warning-foreground: #fbbf24;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import { fileURLToPath, URL } from 'url'
+
+import tailwindcss from '@tailwindcss/vite'
+import { nitro } from 'nitro/vite'
+
+const config = defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  plugins: [
+    nitro(),
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+
+export default config