337 lines
8.9 KiB
Markdown
337 lines
8.9 KiB
Markdown
# 🎨 EzSepa Landing Page - Design Summary
|
||
|
||
## Overview
|
||
|
||
A modern, production-ready landing page built with TailwindCSS featuring a clean Shopify-esque design. The page prioritizes accessibility, performance, and conversion optimization for EU merchants looking to accept SEPA bank payments.
|
||
|
||
---
|
||
|
||
## Visual Design
|
||
|
||
### Color Palette
|
||
|
||
**Primary (Brand Blue)**
|
||
- `#0A66C2` - Main brand color (LinkedIn blue, professional & trustworthy)
|
||
- `#085299` - Hover state
|
||
- `#063e73` - Darkest variant
|
||
- `#e6f1ff` - Light background tint
|
||
|
||
**Accent Colors**
|
||
- Success Green: `#00875A` - Confirmations, positive metrics
|
||
- Warning Yellow: `#FFAB00` - Alerts, popular badges
|
||
- Error Red: `#DE350B` - Errors, critical warnings
|
||
|
||
**Neutrals**
|
||
- Gray scale from `#111827` (almost black) to `#f9fafb` (almost white)
|
||
- White (`#ffffff`) for cards and content areas
|
||
|
||
### Typography
|
||
|
||
**Font Stack**: System fonts for maximum performance and native feel
|
||
```css
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont,
|
||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
|
||
```
|
||
|
||
**Type Scale**:
|
||
- Hero title: 2.5rem–4rem (responsive)
|
||
- Section titles: 2rem–3rem
|
||
- Body text: 1rem (16px)
|
||
- Small text: 0.875rem (14px)
|
||
|
||
**Font Weights**:
|
||
- Regular (400) - Body copy
|
||
- Semibold (600) - Subheadings, buttons
|
||
- Bold (700) - Headlines, emphasis
|
||
|
||
---
|
||
|
||
## Layout Structure
|
||
|
||
### 1. Navigation Bar (Fixed)
|
||
- **Position**: Sticky top navigation
|
||
- **Height**: 64px (4rem)
|
||
- **Background**: White with subtle shadow on scroll
|
||
- **Content**: Logo, nav links, primary CTA
|
||
- **Mobile**: Hamburger menu with slide-down
|
||
|
||
### 2. Hero Section
|
||
- **Height**: ~600px viewport
|
||
- **Layout**: 2-column grid (text left, image right)
|
||
- **Background**: Gradient from brand-50 to white
|
||
- **CTA**: Large primary button + secondary outline button
|
||
- **Trust badges**: GDPR, SEPA, Multi-language icons below CTAs
|
||
|
||
### 3. Features Section
|
||
- **Layout**: 3-column grid (6 cards total)
|
||
- **Card style**: Light gradient background, icon top-left, hover shadow
|
||
- **Icons**: Outlined style, brand-colored backgrounds
|
||
- **Spacing**: Generous whitespace for scanability
|
||
|
||
### 4. How It Works Section
|
||
- **Layout**: 3-step horizontal flow with numbered circles
|
||
- **Background**: Light gray gradient
|
||
- **Connectors**: Arrow SVGs between steps (hidden on mobile)
|
||
- **Screenshot**: Full-width checkout example below steps
|
||
|
||
### 5. Pricing Section
|
||
- **Layout**: 4-column grid (Free, Starter, Premium, Enterprise)
|
||
- **Highlight**: Premium plan elevated with gradient background
|
||
- **Cards**: Border hover effect, clear feature lists
|
||
- **Badge**: "Popular" label on Premium plan
|
||
|
||
### 6. FAQ Section
|
||
- **Layout**: Single column, stacked cards
|
||
- **Cards**: White background, subtle border, consistent padding
|
||
- **Content**: 5 questions addressing common concerns
|
||
|
||
### 7. CTA Section
|
||
- **Background**: Full-width brand-500 blue
|
||
- **Text**: White, large, centered
|
||
- **Buttons**: Primary (white bg) + secondary (outlined)
|
||
|
||
### 8. Footer
|
||
- **Layout**: 4-column grid + bottom copyright bar
|
||
- **Links**: Company, Product, Resources, Legal
|
||
- **Color**: Dark gray (`#1f2937`) with lighter text
|
||
|
||
---
|
||
|
||
## Responsive Breakpoints
|
||
|
||
### Mobile First Approach
|
||
|
||
**Base (< 640px)**
|
||
- Single column layout
|
||
- Stacked navigation menu
|
||
- Large touch targets (min 44px)
|
||
- Hero image below text
|
||
|
||
**Tablet (≥ 640px)**
|
||
- 2-column grids where applicable
|
||
- Side-by-side hero layout
|
||
- Visible desktop navigation
|
||
|
||
**Desktop (≥ 1024px)**
|
||
- 3-4 column grids
|
||
- Max content width: 1280px (7xl container)
|
||
- Enhanced hover effects
|
||
|
||
---
|
||
|
||
## Interactive Elements
|
||
|
||
### Animations
|
||
|
||
**Fade In Up** (on scroll)
|
||
- Cards, sections enter from bottom
|
||
- 0.6s ease-out timing
|
||
- Intersection Observer triggers
|
||
|
||
**Float** (hero image)
|
||
- Subtle up/down motion (10px)
|
||
- 3s infinite loop
|
||
- Draws attention without distraction
|
||
|
||
**Hover States**
|
||
- Buttons: Slight elevation + shadow
|
||
- Cards: Shadow increase
|
||
- Links: Color change (brand-500 → brand-600)
|
||
|
||
### Transitions
|
||
- All transitions: 200-300ms
|
||
- Easing: `ease-out` for natural feel
|
||
- Properties: color, background, shadow, transform
|
||
|
||
---
|
||
|
||
## Accessibility Features
|
||
|
||
### Keyboard Navigation
|
||
- All interactive elements focusable
|
||
- Visible focus rings (brand-500 outline)
|
||
- Skip-to-content link (optional)
|
||
- Logical tab order
|
||
|
||
### Screen Readers
|
||
- Semantic HTML5 (`<nav>`, `<main>`, `<section>`, `<footer>`)
|
||
- ARIA labels on icon-only buttons
|
||
- Alt text on all images (descriptive)
|
||
- Proper heading hierarchy (h1 → h2 → h3)
|
||
|
||
### Visual
|
||
- Color contrast: WCAG AA minimum (4.5:1 for text)
|
||
- Focus indicators visible on keyboard use
|
||
- Reduced motion support (`@media (prefers-reduced-motion)`)
|
||
- High contrast mode support
|
||
|
||
---
|
||
|
||
## Performance Optimizations
|
||
|
||
### Critical CSS
|
||
- TailwindCSS JIT: Only used classes compiled
|
||
- Inline critical styles (optional)
|
||
- PostCSS autoprefixer for browser support
|
||
|
||
### Assets
|
||
- SVG placeholders: Infinitely scalable, small file size
|
||
- Lazy loading: Images below fold use `loading="lazy"`
|
||
- WebP format: Recommend converting PNGs to WebP
|
||
|
||
### JavaScript
|
||
- Vanilla JS: No framework overhead (~10KB total)
|
||
- Module-based: Tree-shaking enabled
|
||
- Minimal external dependencies
|
||
|
||
### Build Output
|
||
- Vite production build: ~50KB CSS, ~10KB JS (gzipped)
|
||
- Single-chunk strategy for small apps
|
||
- Terser minification with console removal
|
||
|
||
---
|
||
|
||
## Content Strategy
|
||
|
||
### Above the Fold (Hero)
|
||
- **Goal**: Instant value proposition clarity
|
||
- **Message**: "SEPA QR payments for Shopify merchants"
|
||
- **CTA**: Clear primary action (Install) + exploratory secondary (Demo)
|
||
|
||
### Features Section
|
||
- **Goal**: Address merchant pain points
|
||
- **Format**: Benefit-driven headlines + concise explanations
|
||
- **Icons**: Visual anchors for quick scanning
|
||
|
||
### Social Proof
|
||
- Trust badges (GDPR, SEPA compliance)
|
||
- Usage limits transparency builds trust
|
||
- Technical details for developer audience
|
||
|
||
### Pricing
|
||
- **Goal**: Transparent, no hidden costs
|
||
- **Highlight**: Popular plan (Premium) to guide choice
|
||
- **CTA**: Different CTAs per plan (Get Started vs Contact Sales)
|
||
|
||
### FAQ
|
||
- **Goal**: Pre-empt objections and concerns
|
||
- **Topics**: Data security, limits, refunds, customization, support
|
||
- **Tone**: Helpful, transparent, technical but accessible
|
||
|
||
---
|
||
|
||
## SEO Strategy
|
||
|
||
### On-Page
|
||
- **Title**: "EzSepa Bank Payment for Shopify | SEPA QR payments & analytics"
|
||
- **Description**: Feature-rich, keyword-optimized (under 160 chars)
|
||
- **Headings**: Hierarchical, keyword-inclusive
|
||
- **Alt text**: Descriptive, contextual
|
||
|
||
### Structured Data
|
||
- Schema.org: SoftwareApplication type
|
||
- Pricing info included
|
||
- Organization data
|
||
|
||
### Meta Tags
|
||
- Open Graph: Optimized for Facebook, LinkedIn
|
||
- Twitter Cards: Large image summary
|
||
- Canonical URL: Prevent duplicate content
|
||
|
||
---
|
||
|
||
## Brand Voice
|
||
|
||
**Professional yet approachable**
|
||
- Technical details without jargon
|
||
- EU-focused (SEPA, GDPR emphasis)
|
||
- Merchant-first language ("your store", "your customers")
|
||
- Action-oriented CTAs ("Install", "Start accepting")
|
||
|
||
---
|
||
|
||
## Mobile-First Considerations
|
||
|
||
### Touch Targets
|
||
- Minimum 44×44px for all tappable elements
|
||
- Adequate spacing between interactive elements
|
||
- Hamburger menu: Large, easy to tap
|
||
|
||
### Content Hierarchy
|
||
- Most important content first (inverted pyramid)
|
||
- Shorter paragraphs for mobile reading
|
||
- Sticky CTA (optional) for easy access
|
||
|
||
### Performance
|
||
- Optimized images for mobile bandwidth
|
||
- Fast Time to Interactive (< 3s on 4G)
|
||
- No layout shift (CLS score < 0.1)
|
||
|
||
---
|
||
|
||
## Design System Quick Reference
|
||
|
||
### Spacing Scale
|
||
- `xs`: 0.25rem (4px)
|
||
- `sm`: 0.5rem (8px)
|
||
- `md`: 1rem (16px)
|
||
- `lg`: 1.5rem (24px)
|
||
- `xl`: 2rem (32px)
|
||
- `2xl`: 3rem (48px)
|
||
|
||
### Border Radius
|
||
- Small buttons: 0.5rem (8px)
|
||
- Cards: 0.75rem (12px)
|
||
- Large cards: 1rem (16px)
|
||
|
||
### Shadows
|
||
- `sm`: Subtle (cards at rest)
|
||
- `md`: Moderate (buttons)
|
||
- `lg`: Pronounced (cards on hover)
|
||
- `xl`: Dramatic (featured cards, modals)
|
||
|
||
### Container Widths
|
||
- Max width: 1280px (7xl)
|
||
- Horizontal padding: 1rem mobile, 1.5rem tablet, 2rem desktop
|
||
|
||
---
|
||
|
||
## Conversion Optimization
|
||
|
||
### Primary CTAs
|
||
- Repeated 3 times: Hero, bottom of page, nav
|
||
- High contrast (brand blue or white on blue)
|
||
- Action verbs ("Install", "Get Started")
|
||
|
||
### Visual Hierarchy
|
||
- F-pattern scanning: Important content left-aligned
|
||
- Z-pattern on hero: Logo → CTA → Image → Text
|
||
- White space guides eye flow
|
||
|
||
### Trust Signals
|
||
- Compliance badges (GDPR, SEPA)
|
||
- Transparent pricing
|
||
- Real technical details (PostgreSQL, GraphQL)
|
||
- Link to GitHub (open-source credibility)
|
||
|
||
---
|
||
|
||
## File Structure Reference
|
||
|
||
```
|
||
index.html - Main landing page (all sections)
|
||
styles.css - TailwindCSS + custom utilities
|
||
main.js - Interactivity (nav, analytics, scroll)
|
||
assets/
|
||
├── hero.png - Dashboard screenshot
|
||
├── checkout.png - Checkout extension preview
|
||
├── analytics.png - Analytics dashboard
|
||
└── favicon.svg - App icon
|
||
```
|
||
|
||
---
|
||
|
||
**Design Philosophy**: Clarity over cleverness. Performance over flair. Accessibility as default.
|
||
|
||
This landing page prioritizes merchant needs: quick understanding, trust establishment, and frictionless path to installation.
|