diff --git a/readme.md b/readme.md index e45e9e1..2e9947a 100644 --- a/readme.md +++ b/readme.md @@ -1,1246 +1,93 @@ -# Squiggleverse Landing Page Design Document / Spec Sheet +# Squiggleverse -## 1. Project Summary +Squiggleverse is a whimsical, game-based learning project focused on grammar, usage, and style. This repository contains the public landing page for the project: a fast, static SvelteKit site with brand artwork, a demo video, introductory copy, and production metadata. -**Project:** Squiggleverse landing page -**Primary goal:** Present Squiggleverse as a whimsical, polished, education-through-play platform using a simple, high-performing homepage structure. +The page is built to present Squiggleverse clearly as a polished education-through-play experience while keeping the implementation small, accessible, and easy to deploy. -**Recommended layout:** +![Squiggleverse landing page screenshot](static/screenshot.png) -1. Logo / hero branding -2. Embedded or self-hosted promo video -3. Short explanatory text -4. Optional CTA row: “Watch Demo,” “Join Mailing List,” “Contact Us” +## What Is Included -**Core positioning text:** +- Static SvelteKit landing page at `/` +- Responsive hero logo, demo video, and project introduction +- SEO, Open Graph, Twitter card, and JSON-LD metadata +- Web manifest, icons, favicon, robots file, sitemap, and social preview image +- Self-hosted video and image assets +- Static adapter configuration for prerendered output +- Docker and CapRover deployment files -> 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. +## Tech Stack -The page should feel like a lightweight marketing splash page rather than a heavy SaaS homepage. +- SvelteKit +- Svelte 5 +- TypeScript +- Vite +- `@sveltejs/adapter-static` +- `@fontsource/nunito` +- Docker with nginx for containerized static hosting ---- - -## 2. Recommended Web Stack - -### Framework - -Use **SvelteKit** as the primary framework. - -SvelteKit is appropriate here because the landing page can be statically rendered, very fast, SEO-friendly, and simple to deploy. SvelteKit supports prerendering/static generation and server-side rendering options per route, which is ideal for a marketing page that may later grow into a larger app or dashboard. - -### Suggested stack - -```txt -SvelteKit -TypeScript -Vite -CSS / SCSS / PostCSS -Static adapter or platform adapter -PNPM -ESLint + Prettier -``` - -### Deployment targets - -Good options: - -```txt -Cloudflare Pages -Netlify -Vercel -Static hosting behind nginx/Caddy -CapRover container deployment -``` - -For this page, **static generation is preferred** unless the site needs dynamic personalization, server-side forms, authentication, or CMS previews. - -Recommended SvelteKit page config: - -```ts -// src/routes/+page.ts -export const prerender = true; -export const ssr = true; -``` - -For a landing page, keep SSR/prerendering enabled so the logo, text, metadata, and canonical content are present in the initial HTML. - ---- - -## 3. Page Structure - -### Route - -```txt -/ -``` - -### File layout +## Project Structure ```txt src/ lib/ - assets/ - squiggleverse-logo.webp - squiggleverse-bg.webp - squiggleverse-poster.webp - squiggleverse-demo.mp4 - components/ - HeroLogo.svelte - VideoCard.svelte - IntroText.svelte - CTAButtons.svelte - StarBackground.svelte - routes/ - +layout.svelte - +layout.ts - +page.svelte - +page.ts - +error.svelte - app.html - app.css -static/ - favicon.svg - robots.txt - site.webmanifest - og-image.webp + assets/ Static media imported by Svelte components + components/ Hero logo, video, and intro sections + routes/ SvelteKit routes, layout, page metadata, and error page + app.css Global styling + app.html HTML shell +static/ Public assets copied directly into the build +Dockerfile Static production image +captain-definition CapRover deployment definition ``` ---- +## Getting Started -## 4. Visual Design Direction +Install dependencies: -### Overall style - -The landing page should use: - -```txt -Whimsical -Space-themed -Purple/violet palette -Soft glow effects -Rounded cards -Centered single-column layout -Large readable text -Minimal navigation -``` - -### Layout wireframe - -```txt -┌─────────────────────────────────────┐ -│ │ -│ Logo │ -│ │ -│ ┌───────────────────┐ │ -│ │ │ │ -│ │ Video │ │ -│ │ │ │ -│ └───────────────────┘ │ -│ │ -│ Short description text │ -│ │ -│ [ Watch Demo ] [ Contact ] │ -│ │ -└─────────────────────────────────────┘ -``` - -### Responsive behavior - -#### Desktop - -```txt -Max content width: 960–1100px -Logo width: 520–720px -Video width: 800–960px -Text width: 680–820px -``` - -#### Tablet - -```txt -Content width: 90vw -Logo width: 70–80vw -Video width: 90vw -Text width: 80–90vw -``` - -#### Mobile - -```txt -Single column -Logo width: 86vw -Video width: 92vw -Text centered or slightly left-aligned if readability suffers -Font size reduced carefully -``` - ---- - -## 5. Color System - -Use a constrained purple palette. - -```css -:root { - --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.38); -} -``` - -### Background - -Use the provided starry background as a fullscreen visual layer. - -Recommended CSS: - -```css -.page { - min-height: 100svh; - background: - linear-gradient( - to bottom, - rgba(7, 0, 20, 0.2), - rgba(54, 0, 95, 0.35) - ), - url('/assets/squiggleverse-bg.webp'); - background-size: cover; - background-position: center top; - background-attachment: fixed; -} -``` - -For mobile, avoid `background-attachment: fixed` because it can cause jank. - -```css -@media (max-width: 768px) { - .page { - background-attachment: scroll; - } -} -``` - ---- - -## 6. Typography - -### Primary recommendation - -Use a highly readable sans-serif for body copy. - -Good options: - -```txt -Atkinson Hyperlegible -Nunito Sans -Inter -Lexend -Source Sans 3 -``` - -For an educational product, **Atkinson Hyperlegible** or **Lexend** would fit well because they emphasize readability. - -### Font loading - -Prefer self-hosted fonts using `@font-face`. - -```css -@font-face { - font-family: 'Atkinson Hyperlegible'; - src: url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2'); - font-weight: 400; - font-display: swap; -} -``` - -Use `font-display: swap` to avoid invisible text during load. - ---- - -## 7. Component Specification - -### `HeroLogo.svelte` - -Purpose: - -```txt -Displays the Squiggleverse logo centered at the top. -``` - -Requirements: - -```txt -Use actual provided logo asset. -Do not recreate the logo in text. -Use responsive sizing. -Include alt text. -Avoid layout shift by declaring width/height or aspect ratio. -``` - -Example: - -```svelte - - - -``` - -CSS: - -```css -.hero-logo { - display: flex; - justify-content: center; - margin-inline: auto; -} - -.hero-logo img { - width: min(720px, 88vw); - height: auto; - filter: drop-shadow(0 0 28px rgba(159, 95, 255, 0.45)); -} -``` - ---- - -### `VideoCard.svelte` - -Purpose: - -```txt -Displays the main Squiggleverse video or poster/video preview. -``` - -Preferred implementation: - -```txt -Use native