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.