# Design Guidelines: InsanBMS Reward Claim Landing Page

## Design Approach
**Reference-Based**: Drawing inspiration from modern Islamic banking and fintech platforms (e.g., Bank Muamalat digital platforms, Alami, Islamic fintech apps) that balance trust, professionalism, and contemporary design. Focus on credibility while maintaining warmth and accessibility for Indonesian Muslim audience.

## Core Brand Identity

### Color Palette
**Primary Colors (Dark Mode)**:
- Brand Purple: 280 65% 55% (from Bank Mega Syariah logo)
- Deep Purple: 280 55% 25% (dark backgrounds)
- Accent Gold: 45 90% 60% (sparingly for highlights and CTAs)
- Success Green: 150 60% 50% (confirmation states)

**Neutrals**:
- Background: 280 15% 12%
- Surface: 280 10% 18%
- Text Primary: 0 0% 95%
- Text Secondary: 0 0% 70%

**Light Mode Alternative**:
- Background: 280 5% 98%
- Surface: 0 0% 100%
- Primary: 280 65% 45%
- Text: 280 20% 15%

### Typography
**Font Families**:
- Headings: 'Plus Jakarta Sans' (modern, professional, excellent for Arabic/Latin mix)
- Body: 'Inter' (high readability, neutral)
- Accent: 'Poppins' for numbers/stats (bold, impactful)

**Scale**:
- Hero Headline: text-5xl md:text-6xl lg:text-7xl, font-bold
- Section Headings: text-3xl md:text-4xl, font-semibold
- Body: text-base md:text-lg, font-normal
- Form Labels: text-sm, font-medium

### Layout System
**Spacing Primitives**: Consistently use Tailwind units of 4, 6, 8, 12, 16, 20, 24 for harmonious rhythm
- Section Padding: py-16 md:py-24 lg:py-32
- Component Spacing: space-y-8 to space-y-12
- Card Padding: p-6 to p-8
- Max Widths: max-w-7xl for sections, max-w-2xl for form

## Page Structure & Components

### Hero Section (Full-Width, 85vh on Desktop)
**Layout**: Two-column on desktop (60/40 split), stacked on mobile
- **Left Column**: 
  - Bank Mega Syariah logo (h-12 to h-16)
  - Islamic greeting: "Assalamu'alaikum InsanBMS" in elegant typography
  - Main headline emphasizing Rp25.000 reward with gold accent
  - Subheading explaining program briefly
  - Trust indicators: "Periode: 25 Sep - 10 Okt 2025" badge
  - Scroll indicator or down arrow
- **Right Column**: 
  - Decorative Islamic geometric pattern overlay (subtle, low opacity)
  - Illustration or abstract representation of mobile banking/rewards
  - Use gradients: purple to deep purple with gold accents

### Program Details Section
**Layout**: Three-column grid on desktop (grid-cols-1 md:grid-cols-3)
- **Column 1**: Eligibility criteria with icon
- **Column 2**: Reward amount with large number display
- **Column 3**: Deadline/urgency indicator

**Card Design**: 
- Rounded-2xl corners
- Subtle gradient borders (purple to gold)
- p-8 spacing
- hover:scale-105 transition
- Icons: Use Heroicons in stroke-2 style

### Form Section (Centered, max-w-2xl)
**Container Design**:
- Elevated card with shadow-2xl
- Background: Surface color with subtle gradient
- Rounded-3xl with p-10 md:p-12
- Headline: "Klaim Reward Anda" 

**Form Inputs**:
- Full-width stacked layout (space-y-6)
- Labels above inputs with required indicators
- Input fields: h-12, rounded-xl, bg-surface/50, border-2
- Focus states: border-purple with ring-4 ring-purple/20
- Placeholder text: Indonesian with helpful format hints
- WhatsApp field: Include country code prefix (+62)
- Email: Include validation icon on valid entry

**Submit Button**:
- Full-width, h-12, rounded-xl
- Gradient background: purple to gold
- Bold text: "Klaim Sekarang Rp25.000"
- Loading state with spinner
- Success state transforms to checkmark with animation

### Trust & Social Proof Section
**Layout**: Two-column alternating (zigzag pattern)
- Left: "Mudah & Aman" - Security badges, encryption icons
- Right: "Proses Cepat" - Timeline visualization
- Include small testimonial cards if available

### Footer
**Multi-column Layout** (grid-cols-2 md:grid-cols-4):
- Logo + tagline: #EasyShariaLife
- Quick links: FAQ, Syarat & Ketentuan
- Contact: Email Tim Loyalty
- Social media icons (if applicable)
- Copyright with Islamic calendar year option

## Interactive Elements

### Animations (Minimal & Purposeful)
- Hero elements: Fade in with subtle slide-up (delay between elements)
- Form focus: Smooth scale and border transitions
- Submit button: Pulse effect when enabled
- Success confirmation: Confetti or subtle celebration
- NO: Continuous animations, parallax effects, or distracting movements

### Form Validation
- Real-time validation with green checkmarks
- Error states: Red border with shake animation
- Helper text appears below invalid fields
- WhatsApp format: Validate Indonesian mobile format
- Email: Standard email regex validation

## Accessibility & Localization

### Language Considerations
- Primary: Bahasa Indonesia
- Islamic terminology: Proper Arabic greetings and terms
- Formal but warm tone throughout
- Clear CTAs in simple Indonesian

### Mobile Optimization (Priority)
- Touch targets: Minimum 44px height
- Form inputs: Large enough for mobile keyboards
- Stack all columns to single column below md breakpoint
- Sticky header with logo on scroll
- Bottom-fixed CTA button on mobile for conversion

### Dark Mode Default
- All form inputs maintain contrast in dark mode
- Input backgrounds: Slightly lighter than surface
- Placeholder text: 50% opacity
- No pure white text (use 95% lightness)

## Images

### Hero Background Image
**Description**: Abstract illustration combining Islamic geometric patterns with modern fintech elements - perhaps a stylized mobile phone with M-Syariah app interface overlaid with subtle arabesque patterns. Color palette: Purple gradients with gold accents, semi-transparent. Should convey trust, modernity, and Islamic identity.

**Placement**: Right side of hero section (40% width on desktop), full-width background on mobile with content overlay.

**Alternative**: Use gradient-based geometric pattern if image unavailable - sharp angular shapes (triangles, hexagons) in brand purple shades creating depth.

### Supporting Graphics
- Icon set: Custom icons for program details (transaction, reward, calendar)
- Trust badges: Security, verified, fast processing indicators
- Pattern overlays: Subtle Islamic geometric patterns at section transitions

---

**Critical Success Factors**: This landing page must establish immediate trust while creating urgency. The design should feel professional yet approachable, modern yet respectful of Islamic values. Form completion is the primary metric - every design decision should reduce friction and build confidence toward that goal.