The eTrolly.design dossier

Concept

• 01A scrollytelling-first single-page experience for a premium web design agency.
• 02One core question: 'What is your budget for your website?'
• 03User scrolls through 10 cinematic scenes — no traditional forms, ZAR payments via PayFast & iKhokha.
• 04Brand assets are captured upfront and analysed by AI before the scope is generated.

Features

• 01Liquid-morph budget input, holographic confirmation orb
• 02Magnetic path selection (Changes/Updates vs New Web Site)
• 03Drag-and-drop Brand Assets upload (PDF, DOCX, PPTX, AI, EPS, SVG, PNG, JPG, ZIP)
• 04AI Brand Analysis — palette, typography, imagery, layout, services, pages, SEO keywords & content ideas
• 05AI-generated scope cards (Claude Sonnet 4.5) — density scales with budget tier
• 06Animated payment tiles with simulated provider redirects + webhook confirmation
• 07AI Concierge onboarding via sliders & visual selectors
• 08Authenticated client portal (Google sign-in via Emergent Auth)
• 09Admin mission control with live revenue & lead pipeline

UI System

• 01Dark-mode only. Pure black canvas (#030014).
• 02Glassmorphism surfaces with neon edges (electric blue → purple → cyan).
• 03Typography: Unbounded (display) + Outfit (body) + JetBrains Mono (overlines).
• 04Motion: framer-motion + Lenis smooth scroll.

User Journey (Scroll States)

```mermaid
flowchart TD
  A[01 · Entry: Budget input] --> B[02 · Confirmation orb]
  B --> C[03 · Path selection]
  C --> D[04 · AI scope generation]
  D --> E[05 · Scope reveal]
  E --> F[06 · Summary capsule]
  F --> G[07 · Checkout · PayFast & iKhokha]
  G --> H[08 · Holographic success]
  H --> I[09 · Concierge onboarding]
```

Tech Architecture

```mermaid
flowchart LR
  U[Browser · React + framer-motion + Lenis] -- /api/quote/preview --> B[FastAPI]
  U -- /api/payment_intents --> B
  U -- /api/webhooks/{provider} --> B
  U -- /api/auth/session --> B
  B -- LLM call --> AI[Claude Sonnet 4.5 via Emergent LLM]
  B --> M[(MongoDB · quotes / payment_intents / projects / users)]
  U <-- /auth/v1/env/oauth/session-data --> A[Emergent Auth]
```

Branding

• 01Name: eTrolly.design
• 02Voice: cinematic, premium, calm-confident.
• 03Palette: #030014 / #06B6D4 / #FF6700 / #22D3EE / #10B981

Launch Plan

• 01Phase 1 — MVP: public scroll journey + simulated payments + portal stub (this build).
• 02Phase 2 — Live payments: wire PayFast & iKhokha merchant accounts + webhook signatures.
• 03Phase 3 — Files/Approvals/Messages CRUD inside portal.
• 04Phase 4 — Workflow automation in admin, scope template editor, email + SMS triggers.