# KBC Mobile Login Screen Layout

Exact layout recipe for replicating the KBC Mobile banking app login screen from screenshots.

## Visual Structure (top to bottom)

```
[Status bar area] — gradient extends under status bar

[Top bar]           — flex row, justify: space-between
  [Menu button]       — white circle, 3 dots
  [KBC badge]         — blue pill, K logo + "Moving forward together."

[Hero image]        — full-width, full-height within hero container, with gradient mask fade
  [Hero text overlay] — positioned relative inside hero, top-left area
  [Check who's there] — pill button inside hero flow, above action cards

[Action cards]      — horizontal scroll directly below hero, no overlap
  Pay by QR code | Receive payment | Hide amounts | Kate Coins | Add service

[Blue space]        — solid gradient continues below cards

[Login button]      — centered, NOT full-width, pill shape, at bottom of page flow
```

## Color Palette

| Element | Color |
|---------|-------|
| Top gradient | `#7ec8e3` → `#4db8e8` → `#1a9fd8` → `#0d8bc9` |
| KBC badge | `#00a0e3` |
| Action cards | `#ffffff` |
| Login button | `#ffffff` (text `#00a0e3`) |
| Text on gradient | `#ffffff` |

## Action Card Icons

| Card | Icon |
|------|------|
| Pay by QR code | 4-squares grid |
| Receive payment | Phone with arrow |
| Hide amounts | Crossed-out eye |
| Kate Coins | Blue circle with white "K" |
| Add service | Plus in circle |

## Key CSS

```css
body {
  background: linear-gradient(to bottom, #7ec8e3 0%, #4db8e8 30%, #1a9fd8 60%, #0d8bc9 100%);
  min-height: 100vh;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}

.hero {
  position: relative;
  margin: -50px 0 0;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 240px);
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

.hero-text {
  position: relative;
  z-index: 5;
  padding: 80px 16px 0;
  margin-bottom: auto;
}

.check-btn {
  position: relative;
  z-index: 5;
  align-self: flex-start;
  margin: auto 16px 20px;
}

.login-section {
  padding: 16px 16px 40px;
  text-align: center;
}

.login-btn {
  display: inline-block;
  width: auto;
  min-width: 220px;
  padding: 16px 40px;
  border-radius: 28px;
  background: #fff;
  color: #00a0e3;
}
```

## Common Mistakes

1. Making the login button `position: fixed` — the screenshot shows it scrolling with content
2. Making the button full-width — it's a centered pill
3. Forgetting `viewport-fit=cover` in the viewport meta tag
4. Overlapping action cards onto the hero image — cards sit below the masked fade
5. Positioning the hero text absolute without a relative hero container — breaks scrolling