# Landing Pages

# Drop Frontend — Landing Pages

> Covers the static marketing site (`landing/`) and the standalone web prototype (`src/drop-web/`).

---

## Marketing Landing Page

**File:** `landing/index.html` (~646 lines)

### Tech Stack
- Pure HTML/CSS/JS (no framework)
- Fonts: Fraunces + DM Sans (Google Fonts CDN)
- CSS custom properties matching brand system
- Responsive (mobile-first)

### Page Sections

| # | Section | Description |
|---|---------|-------------|
| 1 | **Nav** | DropLogoFull SVG + links (Tjenester, Priser, Om oss) + Logg inn / Kom i gang buttons |
| 2 | **Hero** | Headline "Enklere betalinger for alle i Norge", subtext, 2 CTA buttons, phone mockup placeholder |
| 3 | **Trust Bar** | 3 stats: "0.5% gebyr", "<2 timer leveringstid", "30+ land" |
| 4 | **Features** | 3 cards: Send penger (globe icon), QR-betaling (QR icon), Virtuelt kort (card icon) |
| 5 | **Calculator** | Transfer calculator with amount input, country dropdown, live conversion display |
| 6 | **How It Works** | 4 steps: Last ned → Koble bank → Velg mottaker → Send |
| 7 | **Social Proof / Early Access** | Waitlist signup form with email input |
| 8 | **CTA** | Final call-to-action with app store buttons (placeholder) |
| 9 | **Footer** | Logo, company info (ALAI Holding AS, Org.nr 932 516 136), nav links to sub-pages |

### CSS Animations
```css
@keyframes fadeUp    /* Scroll-triggered fade in from below */
@keyframes float     /* Gentle floating on phone mockup */
@keyframes shimmer   /* Shimmer effect on CTA buttons */
@keyframes pulse     /* Subtle pulse on trust badges */
```

### Colors Used
```css
--drop-green: #0B6E35;
--drop-gold: #D4A017;
--drop-dark: #1A1A1A;
--drop-light: #FAFCF8;
--drop-gray: #6B7280;
--drop-border: #E5E7EB;
```

### Responsive Breakpoints
- Mobile: default (single column)
- Tablet: `@media (min-width: 768px)` — 2-column grids
- Desktop: `@media (min-width: 1024px)` — 3-column grids, wider hero

---

## Sub-Pages

**Directory:** `landing/pages/`

12 static HTML pages linked from the footer:

| File | Route (relative) | Content |
|------|-------------------|---------|
| `cookies.html` | /pages/cookies | Cookie policy |
| `karriere.html` | /pages/karriere | Careers page |
| `kontakt.html` | /pages/kontakt | Contact form / info |
| `lisenser.html` | /pages/lisenser | Licenses and regulatory info |
| `om-drop.html` | /pages/om-drop | About Drop |
| `personvern.html` | /pages/personvern | Privacy policy |
| `presse.html` | /pages/presse | Press / media kit |
| `priser.html` | /pages/priser | Pricing |
| `qr-betaling.html` | /pages/qr-betaling | QR payment feature page |
| `send-penger.html` | /pages/send-penger | Send money feature page |
| `sikkerhet.html` | /pages/sikkerhet | Security overview |
| `vilkar.html` | /pages/vilkar | Terms and conditions |

### Waitlist Script
**File:** `landing/pages/waitlist.js`
- Handles email collection for early access signup
- Connected to the waitlist form in the landing page hero/social proof section

---

## Standalone Web Prototype (`drop-web`)

**File:** `src/drop-web/index.html` (~1305 lines)

### Overview
This is an **older/alternative prototype** with a different design system. It predates the main Next.js app and serves as a standalone demo.

### Key Differences from Main App

| Aspect | Main App (`drop-app`) | Web Prototype (`drop-web`) |
|--------|----------------------|---------------------------|
| Framework | Next.js (React) | Vanilla JS (single file) |
| Theme | Light (#FAFCF8 bg) | Dark (#0D1117 bg) |
| Primary green | `#0B6E35` (Forest Green) | `#00C853` (Bright Green) |
| Fonts | Fraunces + DM Sans | Outfit + Plus Jakarta Sans |
| API port | localhost:3000 | localhost:3001 |
| Routing | File-based (App Router) | JS function `showScreen()` |

### Screens

| Screen | Description |
|--------|-------------|
| Welcome | Dark bg, "drop." wordmark, "Penger uten grenser" tagline, login/register buttons |
| Login | Email + password form, BankID/Vipps buttons, validation |
| App (Dashboard) | 4 tabs: Hjem, Send, QR, Profil |
| Hjem tab | Balance card (dark green gradient), recent transactions |
| Send tab | Recipient selection, amount input, country/currency picker |
| QR tab | Scanner placeholder with merchant list |
| Profil tab | User info, contacts, settings, logout |

### Architecture
- Single HTML file with embedded CSS and JS
- `showScreen(name)` function handles "routing" by showing/hiding divs
- `switchTab(name)` for tab navigation within the app screen
- API calls to `localhost:3001/api` with Bearer token auth
- Functions: `doLogin()`, `doRegister()`, `doSend()`, `doQRPay()`, `renderTransactions()`

### Status
This prototype appears to be an **earlier iteration** or **demo showcase**. The main `drop-app` (Next.js) is the production codebase. The `drop-web` prototype uses different colors, fonts, and a dark theme that does not match the current brand guide.