Landing Page

Landing Page

Overview

URL: https://getdrop.no
Purpose: Multi-language marketing landing page for Drop — fintech payment app
Target users: All residents in Norway/Scandinavia (not diaspora-only)

Architecture

• Hosting: Cloudflare Pages
• Zone ID: 0e4476892bfc1eaace41a80d6d060607
• Stack: Static HTML + CSS (no build process)
• Deployment: wrangler pages deploy via GitHub Actions (landing-deploy.yml)
• Database: Cloudflare D1 (SQLite) for waitlist signups

File Structure

landing/
├── index.html              # Main entry point (Norwegian default)
├── locales/                # 12 language JSON files (nb, en, sv, da, fi, bs, sr, hr, de, tr, sq, pl)
├── functions/
│   └── api/waitlist.js     # CF Function — waitlist signup endpoint
├── _headers                # Security headers (CSP, HSTS, X-Frame-Options)
├── wrangler.toml           # CF Pages + D1 config
├── package.json            # Dependencies (wrangler only)
├── manifest.json           # PWA manifest
├── sw.js                   # Service worker
├── favicon.svg             # Drop logo favicon
└── pages/                  # Static sub-pages (send-penger, qr-betaling, priser, etc.)

Hero Design Decision (2026-04-22)

Problem: CEO feedback — landing page showed fake app demo mockup (SpareBank balance, fake transactions, "Mama Jasmina") instead of actual product information.

Solution: Replaced demo mockup with info-first corridor card showing:

• Flow: Norge 🇳🇴 → 30+ land 🌐
• Destination grid: Bosnia, Serbia, Croatia, Albania, Poland + 25 more
• Key stats: 0.5% fee / <1 min transfer / BankID auth

Code change: Commit dfa0b3b3 on main
MC task: #8729
Files changed: landing/index.html (155 insertions, 110 deletions)

Visual proof:

• Desktop: /tmp/drop-screenshots/getdropno-desktop-waited.png
• Mobile: /tmp/drop-screenshots/getdropno-mobile-waited.png

Verification:

curl https://getdrop.no | grep -c 'ps-balance'           # 0 (removed)
curl https://getdrop.no | grep -c 'phone-screen'         # 0 (removed)
curl https://getdrop.no | grep -c 'SpareBank'            # 0 (removed)
curl https://getdrop.no | grep -c 'Mama Jasmina'         # 0 (removed)
curl https://getdrop.no | grep -c 'corridor-card'        # 3 (present)

Waitlist Flow

1. User submits email via form at #cta section
2. POST /api/waitlist → CF Function at functions/api/waitlist.js
3. Validation: Email regex + honeypot field (website)
4. Storage: CF D1 database (drop-waitlist, binding DB)
5. Schema: waitlist_signups table (id, email, source, created_at)
6. Response: JSON {ok: true, message: 'Registrert!'}

Admin access: GET /api/waitlist?key=<WAITLIST_ADMIN_KEY> returns all signups (rate-limited, 5 attempts per 15 min)

Internationalization (i18n)

Languages: 12 supported

Implementation: Language switcher dropdown in nav, preference stored in localStorage

Deployment

Method: GitHub Actions workflow (.github/workflows/landing-deploy.yml)

Trigger: Push to main with changes in landing/** path

Process:

1. Checkout repo
2. Setup Node.js 20
3. Install dependencies (npm ci)
4. Deploy via Wrangler: wrangler pages deploy . --project-name=$CF_LANDING_PROJECT_NAME --branch=main

Secrets required:

• CLOUDFLARE_API_TOKEN (CF Global API Key)
• CLOUDFLARE_ACCOUNT_ID
• CF_LANDING_PROJECT_NAME (project name in CF Pages)

DNS:

• getdrop.no → CF Pages (CNAME)
• www.getdrop.no → CF Pages (CNAME)
• app.getdrop.no → Azure Caddy reverse proxy (app backend)

Security Headers

File: _headers

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
X-XSS-Protection: 1; mode=block

Related Tasks

• MC #8485 — CF Pages migration (completed)
• MC #8537 — Waitlist PostgreSQL wire-up (completed)
• MC #8729 — Info-first hero redesign (ready for review)
• MC #8731 — Proveo validation (pending)
• MC #8732 — Git config fix (completed)

Key Metrics

• Total locales: 12 language files
• Waitlist database: CF D1 SQLite (auto-created table)
• Current signups: Query via admin endpoint
• Deploy target: Cloudflare Pages (CDN-backed, global edge)

Future Improvements

• Add A/B testing for hero variants
• Integrate analytics (Plausible or CF Web Analytics)
• Expand corridor card with real-time exchange rates
• Add language auto-detection based on IP geolocation