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.