vlozi.app — Marketing Website: Complete Plan

vlozi.app/
├── / ................................. Homepage
├── /products ........................ Products Hub
│   ├── /products/blog ............... Blog Engine
│   ├── /products/ai-brain ........... AI Brain
│   ├── /products/content-engine ..... Content Engine
│   ├── /products/chatbot ............ Chatbot
│   ├── /products/contact-intelligence Contact Intelligence
│   └── /products/ai-teammate ........ AI Teammate (Vision)
├── /pricing ......................... Pricing & Plans
├── /about ........................... About Us
├── /blog ............................ Company Blog
├── /changelog ....................... Product Changelog
├── /early-access .................... Waitlist Signup
├── /docs ............................ → Redirect to docs site
├── /legal/privacy ................... Privacy Policy
├── /legal/terms ..................... Terms of Service
└── /404 ............................. Custom 404

Background
  --bg-primary:    #050505     (near-black base)
  --bg-surface:    #0a0a0a     (cards, raised elements)
  --bg-elevated:   #111111     (hover states, active cards)
 
Text
  --text-primary:  #fafafa     (headlines, important)
  --text-secondary:#71717a     (body text, descriptions — zinc-500)
  --text-tertiary: #3f3f46     (captions, trust lines — zinc-700)
  --text-muted:    #27272a     (disabled, barely visible — zinc-800)
 
Borders
  --border-subtle: rgba(255,255,255,0.06)   (section dividers, card borders)
  --border-medium: rgba(255,255,255,0.10)   (hover states, active elements)
  --border-strong: rgba(255,255,255,0.15)   (buttons, inputs)
 
Brand Accent (TBD — decide before build)
  Option A: Teal    #06b6d4 → pairs well with dark, feels technical
  Option B: Violet  #8b5cf6 → feels premium, modern
  Option C: Both as gradient → teal-to-violet, used sparingly
  → Used ONLY for: primary CTA hover glow, circuit pulse, active states
  → NOT used for: headline text, backgrounds, cards

Font Stack:
  Headings:  Geist Sans, weight 700 (bold)
  Body:      Geist Sans, weight 400 (regular)
  Code:      Geist Mono
  Fallback:  Inter → system-ui → sans-serif
 
Scale (Desktop / Mobile):
  Hero headline:     72px / 44px   line-height 1.05   tracking -0.03em
  Page headline:     56px / 36px   line-height 1.1    tracking -0.02em
  Section title:     36px / 28px   line-height 1.2    tracking -0.01em
  Section subtitle:  20px / 17px   line-height 1.6    tracking  0
  Body:              17px / 15px   line-height 1.7    tracking  0
  Caption/small:     13px / 12px   line-height 1.5    tracking  0.01em
  Code:              14px / 13px   line-height 1.6    tracking  0

Max content width:  1200px
Section padding:    120px vertical (desktop) / 64px (mobile)
Component gap:      64px between major elements, 32px between related items
Card padding:       24px
Card border-radius: 12px
Button radius:      8px
Grid:               8px base unit

background-image: radial-gradient(
  circle, rgba(255,255,255,0.04) 1px, transparent 1px
);
background-size: 24px 24px;

Load behavior:    Content is PRESENT on load. No staggered fade-ins.
                  Only the signature visual per page fades in (1s opacity).
Ambient:          Slow, continuous, barely noticeable. 15-30s loops.
Hover:            150ms ease transitions. Scale max 1.02. Opacity changes.
Scroll:           No scroll-triggered animations on the homepage hero.
                  Below-fold sections may use subtle intersection observer
                  fade (opacity 0→1, translateY 8px, 400ms) — restrained.
Page transitions: None for v1. Instant navigation.

Layout:
  ┌──────────────────────────────────────────────────────────────────┐
  │  Vlozi        Products ▾    Pricing    Blog    Docs    [btn]     │
  └──────────────────────────────────────────────────────────────────┘
 
Style:
  Height: 64px
  Position: fixed, z-index 50
  On hero: transparent background, no border
  On scroll: backdrop-blur 12px, bg rgba(5,5,5,0.8), bottom border --border-subtle
  Transition: background 300ms ease
 
Logo:
  "Vlozi" — typographic, Geist Sans bold, 18px, white
  No icon/symbol for now — text mark only
  Links to /
 
Links:
  Font: 14px, weight 400
  Color: --text-secondary (#71717a)
  Hover: --text-primary (#fafafa), 150ms transition
  Active page: --text-primary with no underline
 
"Products" Dropdown:
  Trigger: hover (desktop), tap (mobile)
  Panel: bg --bg-surface, border --border-subtle, border-radius 12px
  Content: 2-column grid of product cards (icon + name + one-liner)
  Each product has a status dot: green (Live), yellow (Building), gray (Planned)
  Shadow: 0 8px 32px rgba(0,0,0,0.5)
 
CTA Button — "Early Access":
  Style: ghost — border 1px --border-strong, bg transparent
  Text: white, 14px, weight 500
  Padding: 8px 20px
  Hover: bg rgba(255,255,255,0.05)
  Border-radius: 8px
 
Mobile (< 768px):
  Hamburger icon (right side), opens full-screen overlay
  Dark overlay with nav links stacked vertically, centered
  CTA button full-width at bottom
  Close with X or swipe

Layout: 4-column grid (collapses to 2 on tablet, stacked on mobile)
Background: --bg-primary with top border --border-subtle
Padding: 64px vertical
 
Columns:
  Product           Resources          Company           Legal
  ─────────         ─────────          ───────           ─────
  Blog Engine       Documentation      About             Privacy
  AI Brain          Blog               Careers (soon)    Terms
  Content Engine    Changelog          Contact
  Chatbot           API Reference
  Contacts          Status
  Pricing
 
Column titles: 13px, weight 600, --text-tertiary, uppercase, tracking 0.05em
Links: 14px, weight 400, --text-secondary, hover → --text-primary
 
Bottom Bar:
  Left: © 2026 Vlozi
  Right: Social icons (Twitter/X, GitHub, LinkedIn) — 18px, --text-tertiary, hover → --text-primary
  Divider: top border --border-subtle, padding-top 24px, margin-top 48px
 
No newsletter signup in footer — keep it clean. Newsletter lives on /early-access.

Height: 100vh (100svh on mobile)
Layout: Left-aligned text, signature visual in lower-right
Text alignment: Left on desktop, left on mobile (not centered)

Style: Inline pill, max-width fit-content
  Background: rgba(255,255,255,0.04)
  Border: 1px --border-subtle
  Border-radius: 999px
  Padding: 6px 16px
  Font: 13px, weight 500
  Color: --text-secondary
  Hover: border --border-medium, color --text-primary
 
Content: "Blog Engine is live — start writing today →"
Links to: /products/blog
Position: margin-top 96px (navbar 64px + 32px gap)

Text:
  Build faster.
  Automate more.
  Scale smarter.
 
Each phrase on a SEPARATE line (not a paragraph — three <span> or <div> elements).
 
Font: 72px, weight 700, line-height 1.05, tracking -0.03em
Color: --text-primary (#fafafa)
 
Accent treatment — WEIGHT CONTRAST (not gradient text):
  "Build"     → weight 700 (bold)
  "faster."   → weight 300 (light)
  "Automate"  → weight 700
  "more."     → weight 300
  "Scale"     → weight 700
  "smarter."  → weight 300
 
This creates typographic rhythm — the action verbs punch, the qualifiers breathe.
No gradient text. No color on keywords. Just weight.
 
Margin-top: 48px from announcement pill

Text: "An all-in-one platform where everything is connected,
       everything is automated, and nothing falls through the cracks."
 
Font: 17px, weight 400, line-height 1.7
Color: --text-secondary (#71717a)
Max-width: 480px
Margin-top: 24px

Margin-top: 32px
Gap: 16px between buttons
Flex row (stacks on mobile)
 
Primary — "Get Early Access"
  Background: #fafafa (white)
  Text: #050505 (black), 14px, weight 600
  Padding: 12px 28px
  Border-radius: 8px
  Hover: opacity 0.85
  Transition: 150ms ease
  (White on dark = maximum contrast. Like Vapi. No gradients on the CTA.)
 
Secondary — "Read the docs →"
  Background: none
  Border: none
  Text: --text-secondary, 14px, weight 400
  Hover: --text-primary
  The → arrow nudges right 4px on hover (translateX)

Text: "Built for agencies, startups & creators"
Font: 13px, weight 400
Color: --text-tertiary (#3f3f46)
Margin-top: 48px

Position: Lower-right quadrant of the hero (desktop)
          Below text, full-width (mobile)
Size: ~500px wide, ~350px tall (desktop)
Opacity: fades in over 1000ms on load — the ONLY entrance animation
 
What it is:
  A network of small square nodes (8px, rounded 2px) connected by
  thin straight lines (horizontal + vertical only, like a circuit board).
 
  8-10 nodes in a structured geometric arrangement.
  NOT random scatter — clean, intentional, like architecture diagrams.
 
Nodes:
  Default: stroke only, rgba(255,255,255,0.12), no fill
  Active: same stroke + faint fill (brand accent color at 15% opacity)
  2-3 nodes are "active" at any time, rotating which ones
 
Connections:
  1px lines, rgba(255,255,255,0.06)
  Only horizontal and vertical — no diagonals. Circuit board aesthetic.
 
The Pulse Animation (the magic):
  Every 3 seconds, a small bright dot (3px diameter, brand accent at 80%)
  travels along a connection line from one node to the next.
  
  When the dot arrives at a node → that node's border brightens to
  rgba(255,255,255,0.3) and a faint glow appears (box-shadow 0 0 12px
  brand-accent at 15%) for 600ms, then fades back.
  
  Multiple pulses active simultaneously on different paths, staggered.
  Speed: ~200px/second (moderate, calm).
  Paths vary — sometimes 2 nodes, sometimes 4. Not a fixed loop.
 
Edge treatment:
  The entire circuit fades at the edges (CSS mask with radial gradient)
  so it feels like it extends beyond the viewport.
 
Mouse interaction (desktop only, optional):
  Subtle parallax — the circuit shifts 4-6px opposite to mouse direction.
  Creates depth. Very subtle.
 
Mobile:
  Simplified to 5-6 nodes. Still animated.
  Positioned below text, centered, 280px wide.
  OR: skip circuit on mobile, just show the background glow orbs.
 
What the circuit communicates:
  → Connected systems
  → Data flowing between services
  → The platform is alive and working
  → "Integration" as a visual, not a bullet point

Two soft radial gradients, positioned near the circuit:
  Glow 1: brand-teal at 6% opacity, 400px radius, top-right of circuit area
  Glow 2: brand-violet at 4% opacity, 500px radius, bottom-left of circuit area
Both drift slowly: translateX/Y 20px over 25s, ease-in-out, infinite alternate

┌─────────────────────────────────────────────────────────────────────┐
│ · · · · · · · · · · · · · · · · · · · · · · · · · · · · (dot grid) │
│                                                                     │
│   [✨ Blog Engine is live — start writing today →]                   │
│                                                                     │
│                                                                     │
│   Build faster.                            ◻ ── ◻ ── ◻             │
│   Automate more.                           │         │             │
│   Scale smarter.                           ◻    ◻ ── ◻             │
│                                            │    │                   │
│   An all-in-one platform where             ◻ ── ◻ ── ◻             │
│   everything is connected, everything           │                   │
│   is automated, and nothing falls               ◻      ◉ (glow)   │
│   through the cracks.                                               │
│                                                                     │
│   [Get Early Access]  Read the docs →                               │
│                                                                     │
│   Built for agencies, startups & creators                           │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

┌───────────────────────────┐
│ Vlozi              [≡]    │
│                           │
│ [✨ Blog Engine is live →] │
│                           │
│ Build faster.             │
│ Automate more.            │
│ Scale smarter.            │
│                           │
│ An all-in-one platform    │
│ where everything is       │
│ connected, everything     │
│ is automated, and         │
│ nothing falls through     │
│ the cracks.               │
│                           │
│ [  Get Early Access   ]   │
│ Read the docs →           │
│                           │
│ Built for agencies,       │
│ startups & creators       │
│                           │
│      ◻ ── ◻               │
│      │    │               │
│      ◻ ── ◻ ── ◻          │
│           │               │
│           ◻               │
│   (simplified circuit)    │
│                           │
└───────────────────────────┘

Layout: Full-width, 3-column grid (stacks on mobile)
Background: --bg-primary (same as hero — no color shift)
Separator: thin top border --border-subtle
Padding: 120px vertical

Text: "THE PROBLEM"
Font: 13px, weight 600, uppercase, tracking 0.05em
Color: --text-tertiary
Margin-bottom: 16px

Text: "Your tools don't talk to each other."
Font: 36px, weight 700, tracking -0.01em
Color: --text-primary
Margin-bottom: 64px
Max-width: 600px

Card style:
  Background: rgba(255,255,255,0.02)
  Border: 1px --border-subtle
  Border-radius: 12px
  Padding: 32px
  Hover: border --border-medium, bg rgba(255,255,255,0.03)
 
Card 1:
  Number: "01" — 48px, weight 700, --text-muted
  Title: "Fragmented stack" — 18px, weight 600, --text-primary
  Body: "Your blog is on WordPress. Scheduling is on Buffer.
         Chat is on Intercom. CRM is on HubSpot. None of them
         share a single byte of data." — 15px, --text-secondary
 
Card 2:
  Number: "02"
  Title: "Manual glue work"
  Body: "You spend hours wiring Zapier automations, copying data
         between dashboards, and praying nothing breaks when one
         tool updates their API."
 
Card 3:
  Number: "03"
  Title: "Blind AI"
  Body: "Your AI assistant knows nothing about your business.
         Every conversation starts from zero. It can't access
         your blog, your customers, or your calendar."

Text: "Vlozi fixes this."
Font: 17px, weight 400
Color: --text-secondary
Margin-top: 48px

Layout: Bento grid — 6 cards, asymmetric sizes
Background: --bg-primary
Separator: thin top border --border-subtle
Padding: 120px vertical

┌──────────────────────┬──────────────────────┬──────────────┐
│                      │                      │              │
│    Blog Engine       │     AI Brain         │   Content    │
│    (large card)      │     (large card)     │   Engine     │
│                      │                      │  (standard)  │
│                      │                      │              │
├──────────────┬───────┴──────────────────────┼──────────────┤
│              │                              │              │
│   Chatbot    │   Contact Intelligence       │ AI Teammate  │
│  (standard)  │   (wide card)                │  (standard)  │
│              │                              │              │
└──────────────┴──────────────────────────────┴──────────────┘

Background: rgba(255,255,255,0.02)
Border: 1px --border-subtle
Border-radius: 12px
Padding: 32px
Hover: border --border-medium, subtle translate Y -2px
 
Inside each card:
  Status dot: 6px circle
    Green (#22c55e) = Live
    Yellow (#eab308) = Building
    Gray  (#52525b) = Planned / Vision
  
  Status label: next to dot, 12px, weight 500, same color as dot
    "Live" / "Building" / "Planned" / "Vision"
 
  Product name: 22px, weight 700, --text-primary
  One-liner: 15px, weight 400, --text-secondary, margin-top 8px
 
  Mini visual (per card — NOT icons/emojis, actual visual elements):
    Blog Engine: tiny editor mockup — dark rectangle with faint text lines
    AI Brain: small pulse/wave line animation (like a heartbeat)
    Content Engine: mini calendar grid (just colored dots on a grid)
    Chatbot: chat bubble shapes, one with typing dots
    Contact Intelligence: small node graph (3-4 connected dots)
    AI Teammate: terminal cursor blinking
 
  "Learn more →" link at bottom: 14px, --text-secondary, hover → --text-primary
 
Card content:
 
  Blog Engine (Live):
    "A headless blog system with a Notion-grade editor,
     WordPress-level management, and a Stripe-simple API.
     Ready in 10 minutes."
 
  AI Brain (Building):
    "A cross-product intelligence layer that learns from
     every service in your workspace — then thinks, suggests,
     and acts on what it knows."
 
  Content Engine (Planned):
    "Visual content calendar with automated multi-platform
     publishing. Plan once, publish everywhere."
 
  Chatbot (Planned):
    "AI-powered support trained on your actual business
     knowledge. Not generic. Not scripted."
 
  Contact Intelligence (Building):
    "A living profile for every person who touches your business.
     Memory, mood, engagement patterns, proactive outreach."
 
  AI Teammate (Vision):
    "Not a copilot — a colleague. Owns responsibilities,
     executes autonomously, reports back, earns trust."

Layout: Full-width horizontal scrolling flow (desktop)
        Vertical stack (mobile)
Background: --bg-primary
Separator: thin top border --border-subtle
Padding: 120px vertical

Desktop:
  [Trigger]──→[Process]──→[Schedule]──→[Respond]──→[Learn]──→[Act]
 
  Below each node, a description card fades in as you scroll horizontally:
 
  Trigger:   "You publish a blog post"
  Process:   "AI reads it, understands the topic, generates social copies"
  Schedule:  "Content Engine queues them across Twitter, LinkedIn, Instagram"
  Respond:   "Chatbot answers visitor questions about the post"
  Learn:     "Contact Intelligence tracks who engaged and what they care about"
  Act:       "AI Teammate sends a personalized follow-up to warm leads"

Each node: 12px square, same style as hero circuit nodes
Connection lines: 1px, --border-subtle
Pulse dot: brand accent, travels along the chain continuously
Description cards: appear below each node
  Background: transparent
  Title: 15px, weight 600, --text-primary
  Body: 14px, --text-secondary
  Max-width: 200px per card

Layout: Split — left text (50%), right code block (50%)
Background: --bg-primary
Separator: thin top border --border-subtle
Padding: 120px vertical

Feature list (no bullet icons, just text with spacing):
 
  "Full REST API"
  Every endpoint documented, versioned, predictable.
 
  "JavaScript SDK"
  npm install @logicspike/blog-sdk — type-safe, zero config.
 
  "React Components"
  Full blog UI in 3 lines of JSX. Themeable.
 
  "Edge-Deployed"
  Cloudflare Workers. Fast everywhere. Zero cold starts.
 
  "Multi-Tenant Native"
  RS256 PBAC, per-tenant isolation. Enterprise-grade from day one.
 
Style per item:
  Title: 16px, weight 600, --text-primary
  Description: 14px, weight 400, --text-secondary
  Gap: 24px between items

Style:
  Background: #0a0a0a
  Border: 1px --border-subtle
  Border-radius: 12px
  Padding: 24px
  Font: Geist Mono, 14px
 
Tab bar at top:
  Three tabs: "React" | "SDK" | "API"
  Active tab: --text-primary, border-bottom 2px white
  Inactive: --text-tertiary
  Clicking switches the code shown below
 
Tab: React
  import { BlogList } from '@logicspike/blog-react'
 
  export default function Blog() {
    return (
      <BlogList
        apiKey="vz_live_abc123"
        theme="minimal"
        postsPerPage={12}
      />
    )
  }
 
Tab: SDK
  import { Vlozi } from '@logicspike/blog-sdk'
 
  const vlozi = new Vlozi({ apiKey: 'vz_live_abc123' })
 
  const { posts } = await vlozi.posts.list({ limit: 10 })
  const post = await vlozi.posts.getBySlug('hello-world')
  const categories = await vlozi.categories.list()
 
Tab: API
  curl https://api.vlozi.app/blog/public/posts \
    -H "Authorization: Bearer vz_live_abc123" \
    -H "Content-Type: application/json"
 
  # Response
  {
    "posts": [...],
    "meta": { "total": 42, "page": 1, "limit": 10 }
  }
 
Syntax highlighting: muted colors
  Keywords: teal/cyan
  Strings: amber/yellow
  Comments: --text-tertiary
  Punctuation: --text-muted

Text: "Read the documentation →"
Style: 14px, --text-secondary, hover → --text-primary

Layout: Centered, single column, narrow (max-width 640px)
Background: --bg-primary
Separator: thin top border --border-subtle
Padding: 120px vertical

Section label: "FROM THE FOUNDER"
 
Quote:
  "I started building Vlozi because every client project at our agency
   began with the same ritual — set up 10 tools, wire them together
   with Zapier, and pray nothing breaks. I wanted one platform where
   everything just works. That's what we're building."
 
  — Dipanshu Vishwakarma, Founder
 
Style:
  Quote text: 20px, weight 400, --text-primary, line-height 1.7
  Italic style (font-style: italic)
  Attribution: 15px, weight 400, --text-secondary, margin-top 24px
  Optional: small founder photo (32px circle) next to attribution
 
No border. No quote marks. No card. Just text on the dark background.
The restraint IS the design.

Layout: Full-width, centered text
Background: subtle shift — --bg-surface (#0a0a0a) instead of --bg-primary
  This is the only background color change on the entire homepage.
  The subtle shift signals "this is the end, take action."
Padding: 120px vertical
Border-top: --border-subtle

Headline: "Build faster. Start today."
Font: 48px, weight 700, tracking -0.02em, --text-primary
 
Subheadline: "Free to start. No credit card. Scale when you're ready."
Font: 17px, weight 400, --text-secondary
Margin-top: 16px
 
CTA: [Get Early Access] — same white button as hero
Margin-top: 32px
 
Secondary: "or talk to the founder →" — links to email/cal
Font: 14px, --text-tertiary
Margin-top: 16px

Layout: Left-aligned (consistent with homepage)
Height: 60vh

Layout: Full-width SVG diagram, centered
Style: Uses circuit aesthetic from hero — square nodes, straight lines, pulses

Layout: Two-column split
Left column: "Without Vlozi" — stacked tool names with prices, faded/muted
Right column: "With Vlozi" — single clean block

Without Vlozi:
  WordPress .............. $30/mo
  Buffer ................. $30/mo
  Intercom ............... $89/mo
  HubSpot ................ $45/mo
  ChatGPT API ............ $60/mo
  Zapier ................. $20/mo
  ────────────────────────
  Total: ~$274/mo + integration hell
 
With Vlozi:
  Everything. Connected. One price.
  [See Pricing →]

Layout: Horizontal tab bar + content area below
Tabs: "Editor" | "Management" | "Integration"
Active tab: --text-primary, bottom border white 2px
Content switches without page reload

Left: Feature list
  - Slash commands — type / to insert any block
  - Drag & drop blocks — reorder by dragging
  - Full markdown shortcuts — auto-convert as you type
  - Code blocks with 20+ language highlighting
  - Tables — resizable, mergeable, header toggle
  - Media library — drag & drop, paste, or browse
  - Focus mode — dims everything except current paragraph
  - Autosave every 30 seconds + unsaved changes guard
  - Live word count + reading time
 
Right: Editor screenshot/GIF (dark mode)

Left: Feature list
  - Post list with search, filters, status badges
  - Workflow: Draft → In Review → Published → Archived
  - Categories (hierarchical) + Tags
  - Scheduled publishing with calendar view
  - Post versioning — diff view, restore any version
  - Soft delete + 30-day trash
  - Full SEO toolkit — title, description, OG image, canonical, score
  - Auto-generated JSON-LD structured data
  - RSS/Atom feeds + XML sitemap
 
Right: Dashboard screenshot (when available)

Left: Feature list
  - REST API — full CRUD, public + admin endpoints
  - JavaScript SDK — type-safe, documented
  - React components — drop-in blog UI
  - 5 pre-built themes
  - Webhooks for downstream automation
 
Right: Code block (same tabbed component as homepage dev section)

Layout: Horizontal scroll carousel
Each theme: dark card with browser-frame mockup showing the theme
On hover: slight scale up, name label appears

Layout: Full-width table, --bg-surface background
Scroll horizontal on mobile
Vlozi column highlighted with subtle background tint

Layout: Two-column — endpoint list (left), example response (right)
Style: same code block component used elsewhere

Layout: Vertical, each step is a full-width row
Each row: number (left) + title + description (left) + visual (right)

Layout: Horizontal connected nodes (like a progression bar)
Four stages, each with expanding description on hover/click

Layout: Dark cards styled like actual chat interfaces
3 cards for 3 personas: Agency Owner, Creator, Founder
Each shows a question + AI Brain response

Layout: 3-column (stacks on mobile)
Middle card (Pro) slightly elevated with "Most Popular" badge

Vertical timeline, newest first
Each entry separated by --border-subtle
Left: date (sticky on scroll)
Right: content

Date: April 10, 2026 — 14px, weight 600, --text-tertiary
 
Badges: [Feature] [Improvement] [Fix]
  Feature: teal bg at 10%, teal text
  Improvement: violet bg at 10%, violet text
  Fix: gray bg at 10%, gray text
  Font: 12px, weight 500, border-radius 4px, padding 2px 8px
 
Title: 18px, weight 600, --text-primary
Body: 15px, --text-secondary, max-width 640px
Screenshots/GIFs inline where relevant

Layout: Centered, max-width 480px
Style: Dark inputs, --border-subtle borders, 16px padding
 
Fields:
  Email (required) — text input
  Name (optional) — text input
  Role (required) — radio: Agency / Startup / Creator / Developer / Other
  Interests (optional) — checkbox: Blog / AI Brain / Content / Chat / Contacts / Teammate
  Use case (optional) — textarea, 2 rows, placeholder: "What would you use Vlozi for?"
 
Submit: "Join the Waitlist" — white button (same as hero CTA)
 
Input style:
  Background: rgba(255,255,255,0.03)
  Border: 1px --border-subtle
  Border-radius: 8px
  Focus: border --border-strong, subtle glow
  Text: --text-primary
  Placeholder: --text-muted
  Font: 15px

"You're in."
"You're #[position] on the waitlist. We'll email you when it's your turn."
 
Share buttons: Twitter + LinkedIn with pre-filled text
"Follow us: @vlozi" — social links

Layout: Left-aligned, max-width 720px, centered on page
Font: 15px body, 24px headings
Style: clean, readable, no special design treatment
Last updated date at top
Table of contents with anchor links

Layout: Centered, minimal
 
Headline: "This page doesn't exist."
Font: 36px, weight 700, --text-primary
 
Body: "The page you're looking for was moved, deleted, or never existed."
Font: 17px, --text-secondary
 
Links:
  "Go home" → /
  "Browse products" → /products
  "Read the blog" → /blog
 
Style: text links, --text-secondary, hover → --text-primary
No illustrations. No jokes. Just helpful.