Add initial project setup with static files and configuration

- Create robots.txt to allow all user agents and specify sitemap location
- Add site.webmanifest for PWA support with app details
- Initialize sitemap.xml with the homepage URL and metadata
- Set up svelte.config.js for SvelteKit with static adapter and prerendering
- Configure TypeScript with tsconfig.json for strict type checking and module resolution
- Establish Vite configuration in vite.config.ts for SvelteKit integration

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+.svelte-kit
+.vercel
+.netlify
+build
+dist
+coverage
+.env
+.env.*
+!.env.example
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "squiggleverse",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "overrides": {
+    "cookie": "0.7.2"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.69.2",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.2.1",
+    "typescript": "^5.8.3",
+    "vite": "^8.1.4"
+  }
+}

src/app.css

@@ -0,0 +1,253 @@
+:root {
+  color-scheme: dark;
+  --color-bg-deep: #070014;
+  --color-bg-space: #160030;
+  --color-purple-dark: #2a0f56;
+  --color-purple: #6b3fb3;
+  --color-purple-light: #b58cff;
+  --color-lavender: #f1e7ff;
+  --color-white: #ffffff;
+  --color-cyan-accent: #43d8ff;
+  --glow-purple: 0 0 32px rgba(159, 95, 255, 0.45);
+  --border-purple: rgba(190, 143, 255, 0.42);
+  font-family:
+    Atkinson Hyperlegible,
+    Lexend,
+    Nunito Sans,
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-bg-deep);
+  color: var(--color-white);
+  text-rendering: optimizeLegibility;
+}
+
+img,
+video {
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+.landing-page {
+  min-height: 100svh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(181, 140, 255, 0.22), transparent 34rem),
+    linear-gradient(to bottom, rgba(7, 0, 20, 0.18), rgba(54, 0, 95, 0.38)),
+    url('/assets/squiggleverse-bg.webp');
+  background-attachment: fixed;
+  background-position: center top;
+  background-size: cover;
+}
+
+.hero {
+  width: min(1120px, 100%);
+  min-height: 100svh;
+  margin-inline: auto;
+  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 6vw, 4rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hero-logo {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.hero-logo img {
+  width: min(720px, 88vw);
+  height: auto;
+  filter: drop-shadow(0 0 28px rgba(159, 95, 255, 0.45));
+}
+
+.video-card {
+  width: min(940px, 92vw);
+  margin: clamp(0.75rem, 2vw, 1.35rem) auto clamp(1.6rem, 3vw, 2.25rem);
+  padding: clamp(0.45rem, 1vw, 0.75rem);
+  border: 1px solid var(--border-purple);
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(28, 10, 72, 0.78), rgba(12, 4, 38, 0.84));
+  box-shadow:
+    var(--glow-purple),
+    inset 0 0 38px rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(8px);
+}
+
+.video-card video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 16px;
+  background: #090019;
+}
+
+.intro {
+  width: min(820px, 88vw);
+  margin: 0 auto;
+  text-align: center;
+}
+
+.intro p {
+  margin: 0;
+  color: var(--color-lavender);
+  font-size: clamp(1.2rem, 2.2vw, 2rem);
+  line-height: 1.45;
+  letter-spacing: 0;
+  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
+}
+
+.cta-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.8rem;
+  margin-top: clamp(1.4rem, 3vw, 2rem);
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.8rem;
+  padding: 0.78rem 1.15rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 1rem;
+  font-weight: 750;
+  line-height: 1;
+  letter-spacing: 0;
+  text-decoration: none;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+}
+
+.button-primary {
+  color: #06121a;
+  background: var(--color-cyan-accent);
+  box-shadow: 0 0 24px rgba(67, 216, 255, 0.28);
+}
+
+.button-secondary {
+  color: var(--color-lavender);
+  border-color: rgba(241, 231, 255, 0.34);
+  background: rgba(10, 0, 28, 0.46);
+}
+
+.button-secondary:hover {
+  border-color: rgba(241, 231, 255, 0.6);
+  background: rgba(42, 15, 86, 0.62);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+:focus-visible {
+  outline: 3px solid var(--color-cyan-accent);
+  outline-offset: 4px;
+}
+
+.error-page {
+  min-height: 100svh;
+  display: grid;
+  place-content: center;
+  gap: 1rem;
+  padding: 2rem;
+  text-align: center;
+  background: var(--color-bg-space);
+}
+
+.error-page h1,
+.error-page p {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .landing-page {
+    background-attachment: scroll;
+  }
+
+  .hero {
+    padding-top: 1rem;
+  }
+
+  .hero-logo img {
+    width: min(86vw, 520px);
+  }
+
+  .video-card {
+    width: 92vw;
+    border-radius: 18px;
+  }
+
+  .video-card video {
+    border-radius: 12px;
+  }
+
+  .intro {
+    width: min(34rem, 88vw);
+  }
+
+  .intro p {
+    font-size: clamp(1.12rem, 5vw, 1.5rem);
+  }
+}
+
+@media (max-width: 440px) {
+  .cta-row {
+    width: min(19rem, 92vw);
+  }
+
+  .button {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.001ms !important;
+  }
+}

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>

src/lib/components/CTAButtons.svelte

@@ -0,0 +1,4 @@
+<div class="cta-row" aria-label="Squiggleverse actions">
+  <a class="button button-primary" href="#demo">Watch Demo</a>
+  <a class="button button-secondary" href="mailto:hello@squiggleverse.com">Contact Us</a>
+</div>

src/lib/components/HeroLogo.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import logo from '$lib/assets/squiggleverse-logo.webp';
+</script>
+
+<div class="hero-logo">
+  <img src={logo} alt="Squiggleverse" width="1145" height="697" decoding="async" />
+</div>

src/lib/components/IntroText.svelte

@@ -0,0 +1,8 @@
+<section class="intro" aria-labelledby="intro-title">
+  <h2 id="intro-title" class="sr-only">About Squiggleverse</h2>
+  <p>
+    Squiggleverse is a modular, multi-platform, game-based “stealth” learning system that teaches
+    grammar, usage, and style through innovative gameplay, whimsical characters, and creative
+    narratives co-authored by the player.
+  </p>
+</section>

src/lib/components/VideoCard.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import poster from '$lib/assets/squiggleverse-poster.webp';
+  import video from '$lib/assets/squiggleverse-demo.mp4';
+</script>
+
+<section id="demo" class="video-card" aria-label="Squiggleverse demo video">
+  <video controls preload="metadata" poster={poster} playsinline>
+    <source src={video} type="video/mp4" />
+    Your browser does not support the video tag.
+  </video>
+</section>

src/routes/+error.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { page } from '$app/state';
+</script>
+
+<svelte:head>
+  <title>{page.status} | Squiggleverse</title>
+</svelte:head>
+
+<main class="error-page">
+  <h1>{page.status}</h1>
+  <p>{page.error?.message ?? 'This page is floating somewhere else.'}</p>
+  <a href="/">Return home</a>
+</main>

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import '../app.css';
+
+  let { children } = $props();
+</script>
+
+{@render children()}

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = true;

src/routes/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import CTAButtons from '$lib/components/CTAButtons.svelte';
+  import HeroLogo from '$lib/components/HeroLogo.svelte';
+  import IntroText from '$lib/components/IntroText.svelte';
+  import VideoCard from '$lib/components/VideoCard.svelte';
+  import logo from '$lib/assets/squiggleverse-logo.webp';
+
+  const description =
+    'Squiggleverse is a modular, multi-platform, game-based stealth learning system that teaches grammar, usage, and style through whimsical gameplay.';
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: 'Squiggleverse',
+    url: 'https://squiggleverse.com/',
+    description,
+    sameAs: []
+  };
+</script>
+
+<svelte:head>
+  <title>Squiggleverse | Game-Based Grammar, Usage, and Style Learning</title>
+  <meta name="description" content={description} />
+  <link rel="canonical" href="https://squiggleverse.com/" />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Squiggleverse" />
+  <meta property="og:description" content="A whimsical game-based learning system for grammar, usage, and style." />
+  <meta property="og:image" content="https://squiggleverse.com/og-image.webp" />
+  <meta property="og:url" content="https://squiggleverse.com/" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Squiggleverse" />
+  <meta name="twitter:description" content="A whimsical game-based learning system for grammar, usage, and style." />
+  <meta name="twitter:image" content="https://squiggleverse.com/og-image.webp" />
+
+  <link rel="preload" as="image" href={logo} type="image/webp" />
+  {@html `<script type="application/ld+json">${JSON.stringify(structuredData)}</script>`}
+</svelte:head>
+
+<main class="landing-page">
+  <h1 class="sr-only">Squiggleverse</h1>
+
+  <section class="hero" aria-label="Squiggleverse landing page">
+    <HeroLogo />
+    <VideoCard />
+    <IntroText />
+    <CTAButtons />
+  </section>
+</main>

src/routes/+page.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = true;

static/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Squiggleverse">
+  <rect width="64" height="64" rx="14" fill="#160030" />
+  <path d="M15 34c0-10 7-18 17-18 8 0 14 5 14 12 0 8-6 13-14 13h-4" fill="none" stroke="#f1e7ff" stroke-width="7" stroke-linecap="round" />
+  <circle cx="44" cy="18" r="4" fill="#43d8ff" />
+  <circle cx="21" cy="48" r="4" fill="#b58cff" />
+</svg>

static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://squiggleverse.com/sitemap.xml

static/site.webmanifest

@@ -0,0 +1,15 @@
+{
+  "name": "Squiggleverse",
+  "short_name": "Squiggleverse",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#070014",
+  "theme_color": "#160030",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "64x64",
+      "type": "image/svg+xml"
+    }
+  ]
+}

static/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://squiggleverse.com/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      fallback: undefined
+    }),
+    prerender: {
+      entries: ['*']
+    }
+  }
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()]
+});