Skip to main content

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 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.

Back to top