Page d'accueil fintech Solv — Compétence de reconstruction

1. Philosophie de conception

Construire la page comme une démonstration de produit élégante placée dans un « canevas sans navigateur » aux coins légèrement arrondis, et non comme un site web d'entreprise. Le contraste provient de trois systèmes qui fonctionnent ensemble :

Retenue éditoriale : gros titres grotesques, texte court, espace vide généreux et peu de couleurs.
Tactilité du produit : contrôles en forme de pilules, mini-interfaces incrustées, chiffres en direct, curseurs, accordéons et fragments de tableau de bord.
Mouvement cinématographique doux : le contenu ne rebondit ni ne vole. Il se résout à partir du flou, d'une faible opacité et d'un léger déplacement vertical avec une courbe d'atténuation, puis reste immobile.

La page doit sembler calme au repos et réactive pendant l'interaction. Le mouvement est un outil hiérarchique, pas une décoration.

2. Ce qui est directement observé vs déduit

Directement observé

Une capture d'écran de 22,38 secondes, 60 ips, en 2272×1440.
Un arrière-plan photographique fixe en forêt entourant une coque de page arrondie.
Des surfaces blanches, olive, citron-vert, bleu pâle, lavande, grises et photographiques.
Chorégraphie de chargement du héros avec flou + fondu + translation verticale.
Défilement vertical fluide avec une fine barre de défilement citron-vert sur le bord droit de la coque de page.
Dévoilements de sections utilisant l'éclaircissement du flou, l'opacité et un court mouvement vers le haut.
Un rail de logos horizontal.
Un calculateur en direct avec un curseur carré et une estimation de financement en temps réel.
Un accordéon qui échange la réponse ouverte avec une hauteur animée et des icônes plus/moins.
Un témoignage avec citation et points de pagination.
Trois cartes d'articles, une section CTA centrée et un pied de page sombre incrusté.
Aucun scroll-jacking ou séquence horizontale épinglée évidente.

Déduction à haute confiance

Framer Motion, GSAP ScrollTrigger ou un système de dévoilement similaire basé sur l'intersection.
Une couche de défilement fluide de type Lenis ou un défilement très fluide du trackpad/navigateur.
Un marquee CSS dupliqué pour le rail de logos.
Une seule famille grotesque moderne ; probablement dans le voisinage de Suisse/Neue Haas/Aeonik. L'identité exacte de la police n'est pas récupérable à partir de la capture seule.
Le comportement tablette/mobile n'est pas montré. Les règles responsives ci-dessous sont des exigences d'implémentation conçues pour préserver la qualité du bureau.

3. Système visuel

3.1 Jetons de couleur

Ces valeurs sont échantillonnées ou reconstruites visuellement à partir de la capture. Utilisez-les comme palette d'implémentation canonique.

:root {
  /* Core */
  --ink: #273000;          /* olive foncé échantillonné ; FAQ/pied de page/texte */
  --ink-strong: #1f2700;   /* olive plus foncé pour les contrôles à contraste élevé */
  --acid: #ddff5a;         /* citron-vert échantillonné du calculateur / accent */
  --acid-soft: #efffb0;    /* Lueur CTA / champs surlignés subtils */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Background cards */
  --sky: #cfe7e9;          /* bleu pâle échantillonné */
  --lavender: #d9def8;     /* lavande pâle échantillonnée */
  --mist: #efeee9;         /* chips, pilule de déclaration de logo */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Texte */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Verre héros */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

Règles d'utilisation des couleurs

Utilisez --paper pour environ 65 à 75 % de la surface de la page.
Utilisez --ink pour une grande section et le pied de page, pas pour chaque carte.
Réservez --acid pour les appels à l'action principaux, le calculateur, la typographie de la FAQ, la barre de défilement personnalisée et les petites puces de statut.
N'utilisez pas plus d'une couleur de support pâle dans un petit composant. Une carte est blanche, bleue, lavande, citron-vert, olive ou photographique, pas un dégradé multicolore.
Évitez le noir pur pour le texte et les contrôles. Le noir-olive est une partie importante du caractère original.
La photo de forêt derrière la coque doit rester suffisamment atténuée pour que la coque de la page soit toujours dominante. Ajoutez une légère teinte cyan/crème si nécessaire.

3.2 Typographie

Police de caractères

La capture utilise un néo-grotesque neutre avec un espacement compact et une géométrie douce. Utilisez cette pile :

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

Pour une implémentation open source, utilisez Inter Tight pour l'affichage et Inter pour le corps. N'introduisez pas de famille secondaire avec empattement ou monospace.

Système de poids

Affichage : 400–500. Le grand texte n'est pas lourd.
Titre de section : 400–500.
Corps : 400.
Emphase dans le corps : 600.
Boutons/navigation : 500–600.
Grande valeur numérique : 500.

Échelle typographique de bureau

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

Hauteur de ligne et crénage

Titres héros/grands : line-height: 0.96–1.02, letter-spacing: -0.045em.
Titres de section : line-height: 0.98–1.05, letter-spacing: -0.04em.
Titres de cartes : line-height: 1.0–1.08, letter-spacing: -0.035em.
Corps : line-height: 1.42–1.55, letter-spacing: -0.01em.
Boutons/navigation : line-height: 1, letter-spacing: -0.01em.
Grandes valeurs monétaires : letter-spacing: -0.055em ; utilisez des nombres tabulaires.

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

Règles de longueur de ligne

Corps du héros : 42–54 caractères.
Corps de section : 48–64 caractères.
Réponse FAQ : 62–76 caractères.
Ne laissez pas un titre d'affichage dépasser 14–18 mots ou plus de trois lignes sur mobile.

3.3 Espacement et rythme de grille

Utilisez une base de 4 px, avec la plupart des espacements visibles en multiples de 8.

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

Mesures de la coque de bureau

D'après la capture 2272×1440 :

Largeur de la coque de la page : environ 90vw.
Marge extérieure horizontale : environ 5vw.
Marge extérieure visible haut/bas : environ 3–3.5vh.
Rayon de la coque : 28–32px.
Remplissage interne des sections : 56–64px gauche/droite.
Grand remplissage vertical des sections : 96–144px.
Écart entre les cartes principales : 20–28px.
Séparateurs fins : 1px à une opacité de 12–16 %.

Grille

Utilisez une grille de 12 colonnes à l'intérieur de la coque.

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

Rapports de composition :

Contenu du héros : 6 à 7 colonnes à gauche ; carte du tableau de bord flottante : 3 colonnes à droite.
Aperçu du produit : copie sur 5 colonnes ; modules visuels sur 6 à 7 colonnes.
Trio de fonctionnalités : environ 3 / 3 / 4,5 colonnes, la carte photographique étant la plus large.
Calculateur : 5,5 / 5,5 colonnes avec un grand écart central.
FAQ : 5 / 7 colonnes.
Articles : cartes égales de 4 colonnes.
Pied de page : bloc de marque 4 colonnes ; navigation/contact/localisation/langues remplissent le reste.

3.4 Conventions de rayon

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

Règles :

Coque de page externe : 28–32px.
Grands médias et cartes de section : 20–24px.
Mini tableaux de bord : 14–18px.
Boutons, balises, navigation segmentée, et puces de déclaration : pilule complète.
Évitez de mélanger de nombreux rayons arbitraires. Utilisez uniquement ces cinq valeurs.

3.5 Ombre et élévation

L'original repose davantage sur le contraste et le flou que sur des ombres évidentes.

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

La coque de la page reçoit une grande ombre douce.
Le tableau de bord flottant du héros reçoit une ombre douce moyenne.
La plupart des cartes de fonctionnalités n'ont pas d'ombre ; utilisez la bordure ou la séparation des couleurs.
N'utilisez jamais d'ombres noires nettes ou plusieurs ombres empilées.

4. Architecture de mise en page

4.1 Canevas global

L'arrière-plan forestier reste fixe tandis que la coque de contenu arrondie défile.

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

Ne mettez pas de bordure épaisse autour de la coque. Le contraste avec l'arrière-plan est suffisant.

4.2 Ordre des sections

Héros / navigation
Puce de déclaration client + rail de logos en boucle
Aperçu du produit — titre/texte à gauche, deux cartes d'histoire produit à droite
Trio de fonctionnalités de capital de croissance
Calculateur de frais transparent
Accordéon FAQ
Témoignage média / carrousel
Derniers articles
CTA expert en financement
Pied de page sombre incrusté

4.3 Composition du héros

Hauteur : min(92svh, 82rem) sur bureau ; minimum 760px.
Image à fond perdu dans la coque.
Navigation supérieure flottant sur l'image.
Texte ancré en bas à gauche.
Carte produit/tableau de bord ancrée en bas à droite.
Ajoutez un cache sombre en bas pour la lisibilité et une superposition chaude très subtile sur la photo.

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 Navigation

Le bureau se compose de trois groupes indépendants :

Gauche : une pilule sombre translucide contenant 3 liens.
Centre : logo blanc.
Droite : une pilule de compte sombre translucide plus un bouton de menu circulaire séparé.

Utilisez backdrop-filter: blur(14px) et une surface semi-transparente. Gardez la hauteur de navigation entre 58 et 64 px.

Aux largeurs inférieures à 900 px :

Masquez la pilule de lien gauche.
Gardez le logo centré.
Gardez une action principale et une icône de menu.
Assurez-vous que le logo reste optiquement centré, non décalé mathématiquement par des commandes latérales inégales.

4.5 Rail de logos

Section blanche.
Puce de déclaration centrée au-dessus des logos.
Logos dans un rail horizontalement coupé avec contenu dupliqué.
La taille du logo doit être visuellement normalisée, pas définie à des largeurs brutes identiques.
Utilisez un traitement en niveaux de gris/olive et une opacité réduite pour certaines marques sélectionnées.

4.6 Aperçu du produit

Grand titre sur deux lignes à gauche.
Deux boutons en forme de pilule directement en dessous.
Deux courts paragraphes ; les premiers mots de chaque paragraphe sont en semi-gras.
Le côté droit utilise deux cartes de couleurs différentes, décalées verticalement pour créer une asymétrie.
La carte sombre est plus étroite/plus haute que la carte bleu pâle et contient une mini interface produit.

4.7 Trio de fonctionnalités de croissance

Le titre de la section couvre la majeure partie de la ligne, avec une petite pilule "En savoir plus" non remplie alignée à droite.
Trois cartes :
1. Carte photographique/dégradée vert doux avec une interface utilisateur blanche incrustée.
2. Carte lavande avec un panneau de résumé de solde.
3. Carte photographique large avec un grand titre blanc et une superposition de texte en bas.
Les cartes partagent la hauteur et le rayon, mais pas la largeur.

4.8 Calculateur

Section blanche avec un grand espace blanc au-dessus et en dessous.
À gauche : titre, description de 2 à 3 lignes, pilule CTA sombre.
À droite : carte citron-vert avec en-tête, séparateur, valeur monétaire, contrôle de plage, séparateur, estimation de financement.
La carte du calculateur est approximativement carrée et ne doit pas devenir plus large que 650 px.

4.9 FAQ

Section olive foncé pleine largeur.
Colonne de gauche : titre citron-vert et résumé.
Colonne de droite : quatre lignes d'accordéon.
Une réponse est ouverte à la fois.
Les lignes de séparation des lignes sont extrêmement subtiles.
Le plus se transforme en moins sans faire pivoter tout le conteneur d'icônes.

4.10 Témoignage

Carte photographique pleine largeur directement en dessous de la FAQ.
Grand portrait/arrêt sur image vidéo.
Le premier plan flou en bas de l'image fait partie de la photographie, pas d'un flou d'interface.
La citation et l'attribution reposent sur un dégradé plus sombre en bas à gauche.
Deux petits points/boutons de pagination en bas à droite.
Traitez-le structurellement comme un carrousel, même si une seule transition de diapositive est visible dans l'enregistrement.

4.11 Articles

Section blanche avec titre à gauche et petite action "Tout afficher" à droite.
Trois cartes égales.
Chaque carte utilise une image au format 16:9 ou légèrement plus haute avec un dégradé sombre en bas et un titre d'article blanc.
Les titres sont courts et ancrés en bas à gauche.

4.12 CTA

Contenu centré dans une section haute.
L'arrière-plan passe du blanc en haut au citron-vert très pâle en bas.
Titre : deux lignes, largeur maximale d'environ 520–620 px.
Petit groupe d'avatars d'experts et pilule principale sombre.
Gardez environ 120–180 px d'espace de respiration en haut et en bas.

4.13 Pied de page

L'arrière-plan CTA continue derrière le pied de page.
Le pied de page lui-même est un rectangle arrondi olive foncé incrusté avec une marge extérieure de 24 à 32 px.
Marque en haut à gauche, navigation en haut à droite, zone inférieure contact/localisation/langues, cercles sociaux en bas à gauche.
Le pied de page doit ressembler à un panneau de tableau de bord compact, et non à un pied de page juridique traditionnel.

5. Comportement responsive

La capture ne montre pas d'états responsifs. Implémentez ce qui suit pour préserver l'intention.

5.1 Points de rupture

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 Bureau ≥ 1200px

Conservez la coque à 90vw et toutes les compositions multi-colonnes.
Utilisez un remplissage horizontal interne de 56 à 64 pixels.
Her

…

[tronqué pour la traduction]

Demander à votre IA préférée

Documentation