dchar/ezsepa-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
7fb3319277
ezsepa-website/docs/DESIGN.md
Ahmed DCHAR e63001e072 Init commit
2025-11-02 20:30:44 +01:00

8.9 KiB
Raw Blame History

🎨 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

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.