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
@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
--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 divsswitchTab(name)for tab navigation within the app screen- API calls to
localhost:3001/apiwith 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.