Page: Landing

Page Spec: Landing

Route

/

Architecture Status

Core

Figma Reference

NO FIGMA — design needed. Designed from architecture document + design system reference.

Visual Description (Design Direction)

No Figma screenshot exists. This is a public marketing/landing page for unauthenticated users. It should follow the design system's visual language (green primary, white cards, DM Sans body font, Fraunces for brand text) and present Drop's value proposition: simple remittance and QR payments for everyone in Norway/Scandinavia. Desktop max-width 1200px, responsive down to 375px mobile.

Page Layout

Full-width page (no bottom nav, public page)
├── Hero Section
│   ├── Drop logo (green square + $ icon + gold dot)
│   ├── "drop" wordmark (Fraunces serif bold)
│   ├── Tagline: "Enklere betalinger. Lavere gebyrer."
│   ├── Subtitle text explaining value proposition
│   ├── CTA: "Kom i gang" → /register
│   └── Secondary CTA: "Logg inn" → /login
├── Hero Section (with ambient glow background)
│   ├── Drop logo (green square + $ icon + gold dot)
│   ├── "drop" wordmark (Fraunces serif bold)
│   ├── Headline: "Enklere betalinger. Lavere gebyrer." (split, second line green)
│   ├── Subtitle text explaining value proposition
│   ├── Primary CTA: "Opprett konto — gratis" → /register
│   ├── Secondary CTA: "Logg inn" → /login
│   └── Stats card (3 columns): "0,5%" gebyr, "<2t" leveringstid, "30+" land
├── Features Section
│   ├── Heading: "Alt du trenger i en app"
│   ├── Feature card 1: Send penger (remittance icon + description)
│   ├── Feature card 2: Betal med QR (QR icon + description)
│   └── Feature card 3: Virtuelt kort (card icon + description) **NOT "Bankkontoer"**
├── Trust Section
│   ├── BankID-verifisert badge (shield icon)
│   ├── Rask overføring badge (fast transfer icon)
│   └── 30+ land badge (corridors icon)
├── Merchant CTA Section
│   ├── "Er du butikkeier?" heading
│   ├── Description: "Ta imot betalinger via QR. 1% gebyr..."
│   └── "Kom i gang" button
└── Footer
    └── "Drop — et produkt av ALAI Holding AS" copyright

Components

Hero Section

<div className="flex min-h-screen flex-col items-center justify-center bg-[#EEEEEE] px-6">
  <div className="w-full max-w-sm space-y-6 text-center">
    <Image src="/drop-icon.png" alt="Drop" width={80} height={80} />
    <h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
    <p className="text-sm italic text-[#0B6E35]">Enklere betalinger. Lavere gebyrer.</p>
    <!-- CTA buttons -->
  </div>
</div>

Feature Cards

<div className="rounded-2xl bg-white p-6 shadow-sm">
  <Icon className="h-8 w-8 text-[#0B6E35] mb-3" />
  <h3 className="text-lg font-bold text-[#1A1A1A]">Feature Title</h3>
  <p className="text-sm text-[#374151]">Description</p>
</div>

Hero Headline

<h1 className="font-[family-name:var(--font-fraunces)] text-5xl font-extrabold tracking-tight mb-4 leading-[1.08] text-[#1A1A1A]">
  Enklere betalinger.
  <br />
  <span className="text-[#0B6E35]">Lavere gebyrer.</span>
</h1>

Primary CTA Button

<Link href="/register" className="group flex h-14 items-center justify-center gap-2 rounded-xl bg-[#0B6E35] text-white font-semibold text-base hover:bg-[#095C2C]">
  Opprett konto — gratis
  <ArrowRight className="h-4 w-4 group-hover:translate-x-0.5" />
</Link>

Secondary CTA

<Link href="/login" className="flex h-14 items-center justify-center rounded-xl border border-[#E5E7EB] bg-white text-[#1A1A1A] font-semibold text-base hover:bg-[#F9FAFB]">
  Logg inn
</Link>

Stats Card

<div className="grid grid-cols-3 gap-4 rounded-2xl bg-white border border-[#E5E7EB] shadow-sm p-5">
  <div className="text-center">
    <p className="text-2xl font-bold text-[#0B6E35]">0,5%</p>
    <p className="text-xs text-[#6B7280] mt-1">Gebyr</p>
  </div>
  <!-- repeat for other stats -->
</div>

Data Displayed

• Static marketing content only
• No API calls
• No authentication required

User Interactions

Element	Action	Result
"Opprett konto — gratis" button	Click	Navigate to /register
"Logg inn" button	Click	Navigate to /login
Merchant "Kom i gang" button	Click	NOT IMPLEMENTED (placeholder, href="#")

Norwegian Labels

Element	Norwegian Text
Brand wordmark	drop
Hero headline line 1	Enklere betalinger.
Hero headline line 2	Lavere gebyrer.
Hero subtitle	Send penger, betal med QR, administrer kort — alt på ett sted. Laget for alle i Skandinavia.
Primary CTA	Opprett konto — gratis
Secondary CTA	Logg inn
Stats label 1	Gebyr
Stats label 2	Leveringstid
Stats label 3	Land
Features heading	Alt du trenger i en app
Feature 1 title	Send penger
Feature 1 desc	Overfør penger internasjonalt. 0,5% gebyr — billigere enn banken.
Feature 2 title	Betal med QR
Feature 2 desc	Skann og betal i butikken. Raskere og billigere enn kort.
Feature 3 title	Virtuelt kort
Feature 3 desc	Få et virtuelt kort for netthandel. Bestill fysisk kort hjem.
Trust badge 1	BankID-verifisert
Trust badge 2	Rask overføring
Trust badge 3	30+ land
Merchant CTA heading	Er du butikkeier?
Merchant CTA desc	Ta imot betalinger via QR. 1% gebyr — billigere enn kortterminalen.
Merchant CTA button	Kom i gang
Footer copyright	Drop — et produkt av ALAI Holding AS

Design Tokens

Token	Value
Page bg	#EEEEEE
Card bg	#FFFFFF
Primary	#0B6E35
Primary hover	#095C2C
Text primary	#1A1A1A
Text body	#374151
Text muted	#6B7280
Brand font	font-[family-name:var(--font-fraunces)]
Body font	DM Sans (default)
Card radius	rounded-2xl
Button radius	rounded-xl
Button height	h-12
Shadow	shadow-sm

Bottom Navigation

No — this is a public page, no bottom nav.