# Bank Daerah Lamongan - Website Specification

## 1. Concept & Vision

Website banking modern yang memancarkan kepercayaan, profesionalisme, dan kedekatan dengan masyarakat Lamongan. BPR Bank Daerah Lamongan telah melayani sejak 1952, dan website ini harus mencerminkan pengalaman 74 tahun dengan sentuhan modern yang clean dan sophisticated. Terasa premium namun tetap approachable seperti bank daerah yang dekat dengan rakyat.

## 2. Design Language

### Aesthetic Direction
Modern corporate banking dengan sentuhan lokal Jawa — clean lines, generous whitespace, subtle gradients, dan micro-interactions yang halus. Memperkenalkan warna gold/coral sebagai aksen untuk membedakan dari bank-bank besar.

### Color Palette
```
Primary:        #1E3A5F (Deep Navy Blue - Trust, Stability)
Secondary:      #C9A227 (Gold - Premium, Prosperity, Local identity)
Accent:         #E85A4F (Warm Coral - Warmth, Attention)
Background:     #FAFBFC (Off-white - Clean, Professional)
Surface:        #FFFFFF (Pure White - Cards, Sections)
Text Primary:   #1A1A2E (Almost Black)
Text Secondary: #6B7280 (Muted Gray)
Success:        #10B981 (Green)
```

### Typography
- **Headings**: "DM Serif Display" — elegant, authoritative, Jawa-inspired curves
- **Body**: "Plus Jakarta Sans" — modern, highly readable, professional
- **Accent/Labels**: "Plus Jakarta Sans" semi-bold

### Spatial System
- Base unit: 8px
- Section padding: 80px-120px vertical
- Card padding: 24px-32px
- Container max-width: 1200px
- Border radius: 16px (cards), 8px (buttons), 24px (hero elements)

### Motion Philosophy
- Smooth, professional transitions (300-400ms)
- Fade-up on scroll reveal (staggered 100ms)
- Subtle hover lifts on cards (translateY -4px, shadow increase)
- Counter animation from 0 to value on scroll
- Button hover: slight scale + glow

### Visual Assets
- **Icons**: Lucide icons (consistent 1.5px stroke)
- **Images**: Unsplash for hero/background images (Lamongan-themed)
- **Decorative**: Subtle geometric shapes, gradient orbs, modern abstract patterns

## 3. Layout & Structure

### Navigation (Fixed)
- Logo "BDL" + "Bank Daerah Lamongan"
- Nav links: Beranda, Layanan, Tentang, Lokasi, Kontak
- CTA Button: "Buka Rekening"
- Mobile: Hamburger menu with slide-in drawer

### Hero Section
- Large headline with gradient text accent
- Subheadline tentang layanan dan sejarah sejak 1952
- Two CTAs: "Pelajari Lebih Lanjut" + "Buka Rekening"
- Floating decorative gradient orbs
- Background: Subtle gradient overlay

### Stats Bar
- 4 metrics: Nasabah, Total Aset, Cabang, Tahun Melayani
- Animated counter on scroll

### Layanan Section
- Section heading
- 6 service cards in 3x2 grid
- Services: Tabungan, Deposito, Kredit, Transfer, Mobile Banking, Deposito
- Each card: icon, title, description, "Pelajari" link

### Tentang Kami Section
- Two-column layout: image + text
- Brief history (since 1952) and mission
- Link to full about page

### Keunggulan Section
- Why choose Bank Daerah Lamongan
- 4 feature items with icons
- Emphasis on local banking advantage

### Testimonial Section
- Customer testimonials
- Photo, quote, name, location

### Lokasi Section
- Map or office locations
- Address and contact info

### Footer
- Logo, description
- Quick links, Layanan links, Kontak info
- Social media icons
- Copyright + regulatory badges (OJK, LPS)

## 4. Features & Interactions

### Navigation
- Sticky on scroll with backdrop blur
- Active link indicator
- Mobile: slide-in drawer from right
- Smooth scroll to sections

### Service Cards
- Default: White background, subtle shadow
- Hover: Lift up (translateY -4px), shadow increase, accent border-left appears
- Icon animates slightly on hover

### Stats Counter
- Numbers animate from 0 to value when scrolled into view
- Duration: 2 seconds, ease-out
- Only triggers once

### CTA Buttons
- Primary: Filled with primary color, white text
- Hover: Lighten background, subtle scale
- Active: Slight press effect

### Testimonial Carousel
- Auto-rotate every 5 seconds
- Manual navigation dots
- Fade transition between slides

## 5. Technical Approach

- **Framework**: Next.js 15 with App Router
- **Styling**: Tailwind CSS
- **JavaScript**: Vanilla JS for interactions
- **Fonts**: Google Fonts (DM Serif Display, Plus Jakarta Sans)
- **Icons**: Lucide React
- **Images**: Unsplash for hero/background
- **Animations**: CSS transitions + Intersection Observer
- **Output**: Static export for Rumahweb hosting

## 6. Company Information

**PT. BPR BANK DAERAH LAMONGAN PERSERODA**

- Founded: 1952
- Address: Jl. Panglima Sudirman No.56, Banjar Anyar, Banjarmendalan, Kec. Lamongan, Kabupaten Lamongan, Jawa Timur 62212
- Phone: (0322) 321181
- Email: info@bdl.co.id
- Social Media: Instagram @bankdaerahlamongan

### Products
**Tabungan:**
- Tabungan Umum
- Tabungan Simapan
- Tabungan Utama
- Tabunganku

**Deposito:**
- Deposito Berjangka (min > Rp 7.500.000)
- Deposito Delima (≤ Rp 7.500.000)
- Tenor: 1, 3, 6, 12 bulan

**Kredit:**
- Kredit Modal Kerja
- Kredit Konsumtif
- Kredit Program

### Key Features
- Competitive interest rates
- Fast processing
- LPS guaranteed deposits
- Professional service
- Supervised by OJK