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