🧭 Blueprint du Site Inspiré

Document généré par cloclo depuis https://stripe.com

1. Informations générales

1.1 URL analysée

• https://stripe.com

2. Structure du site (Architecture)

2.1 Arborescence des sections

• Section 1 : Header sticky avec navigation produit
• Section 2 : Hero avec gradient mesh animé
• Section 3 : Dashboard demo live (Payments / Connect / Billing)
• Section 4 : Customer logos (60+ marques)
• Section 5 : Features grid (4 colonnes x 3 lignes)
• Section 6 : Section "Built for builders" (devs)
• Section 7 : Section "Built for the enterprise"
• Section 8 : Customer testimonials (carousel)
• Section 9 : Pricing teaser ("Start with $0")
• Section 10 : Final CTA
• Section 11 : Footer (6 colonnes, 80+ liens)

2.2 Description détaillée des sections

Section : Hero

• Rôle : Affirmation de positionnement
• Contenu principal : Headline "Financial infrastructure for the internet" + sous-titre + 2 CTAs ("Start now" + "Contact sales")
• Composants présents : Gradient mesh background, headline serif, subhead sans-serif, twin CTA buttons
• Organisation visuelle : Left-aligned text sur la moitié gauche, illustration vectorielle dynamique sur la moitié droite

Section : Dashboard demo live

• Rôle : Preuve produit interactive
• Contenu principal : Faux dashboard Stripe animé qui montre Payments, Connect, Billing avec transitions automatiques
• Composants présents : Sidebar nav, KPI cards, line chart, transactions table, tab switcher
• Organisation visuelle : Cards en glassmorphism sur le gradient mesh, ombres généreuses

Section : Footer

• Rôle : Maillage interne SEO + navigation legacy
• Contenu principal : 6 colonnes (Products / Use Cases / Developers / Company / Resources / Legal) avec 80+ liens vers sous-pages
• Composants présents : Column headers, Link lists, Social media icons, Country selector, Sign-up newsletter
• Organisation visuelle : Grid 6 colonnes sur desktop, accordéon mobile

2.3 Patterns UX identifiés

• Pattern 1 : Hero avec gradient mesh signature (signature visuelle Stripe)
• Pattern 2 : Demo produit interactive auto-rotating en-dessous du hero
• Pattern 3 : Wall of logos client (social proof immédiat)
• Pattern 4 : Sections segmentées par audience ("for developers" vs "for enterprise")
• Pattern 5 : Footer ultra-peuplé optimisé SEO

3. Design (Identité visuelle)

3.1 Palette de couleurs

• Couleur principale : #635BFF (Stripe purple signature)
• Couleur secondaire : #0A2540 (deep navy)
• Couleur d'accent : #00D4FF (cyan)
• Couleurs de fond : #FFFFFF, #F6F9FC (off-white), gradient mesh dynamique
• Couleurs de texte : #0A2540, #425466, #697386

3.2 Typographies

Police principale

• Nom : Sohne (custom Stripe font, fallback Inter)
• Poids utilisés : 400, 500, 600, 700
• Tailles utilisées : 72px (hero), 48px (section), 18px (body), 14px (meta)

3.3 Styles globaux

• Boutons : Soft-rounded (4px), gradient subtle sur primary, outlined avec arrow icon sur secondary
• Formulaires : Floating labels, focus avec ring violet, large padding
• Cartes : White cards avec shadow soft + 1px border, rounded 12px, hover lift
• Images : Beaucoup d'illustrations vectorielles custom, isométriques 3D pour certaines sections

3.4 Layouts et grilles

• Type de grille : Multi-column responsive (12-col base)
• Nombre de colonnes : 12 (desktop), collapse à 1 sur mobile
• Marges latérales : 64px (desktop), 24px (mobile)
• Espacements verticaux : 120px entre sections principales

4. Interactions

4.1 Interactions simples

• Hover sur boutons : lift +2px + shadow grows
• Hover sur cards : border violet + scale subtle
• Country selector dans footer ouvre dropdown

4.2 Interactions de scroll

• Sticky header avec backdrop-blur après 100px scroll
• Section reveal avec fade-up sur entrée viewport
• Parallax léger sur les illustrations héroïques

4.3 Animations

• Gradient mesh hero animé en continu (~10s loop)
• Dashboard demo : transitions auto entre Payments/Connect/Billing toutes les ~4s
• Customer logos : scroll horizontal infini auto

5. Composants réutilisables

Composant : Gradient Mesh Hero Background

• Rôle : Signature visuelle de la marque
• Éléments internes : SVG ou Canvas avec 3-4 blobs colorés animés
• Variantes : Light, Dark, Subtle, Vibrant

Composant : Customer Logo Wall

• Rôle : Social proof
• Éléments internes : Grayscale logo (B&W), hover colored
• Variantes : Grid statique, Carousel auto-scroll

Composant : Use Case Card

• Rôle : Segmentation par audience
• Éléments internes : Icon, Title, Description, Link arrow
• Variantes : For developers, For enterprise, For SMB

7. Technologies front-end

7.1 Frameworks détectés

• Next.js — Server-side rendering
• React — UI library

7.2 Librairies d'animation

• Framer Motion — Section reveals + dashboard transitions
• WebGL or Canvas — Gradient mesh animation

7.3 Systèmes de design

• Stripe Internal Design System — Custom (not open-source)