Refonte de la boutique : un look premium avec profondeur et finition

NOUVEAU

La boutique en jeu a bénéficié d’une refonte visuelle complète. Chaque élément — des fiches produits à la barre latérale du panier, des onglets de canal aux boutons de paiement — a été repensé avec de la profondeur, de la finition et des animations fluides.

Ce qui a changé

Fiches produits

Le cœur de la boutique a reçu la plus grande amélioration :

  • Effet verre avec des dĂ©gradĂ©s superposĂ©s et des ombres profondes
  • Survol fluide — les fiches se soulèvent, les images s’agrandissent Ă  1,08x, une lueur apparaĂ®t
  • Images plus grandes (170px de hauteur, contre 150px auparavant)
  • Chargement diffĂ©rĂ© — les images ne se chargent que lorsqu’elles sont visibles Ă  l’écran, ce qui Ă©conomise de la bande passante
  • SĂ©parateur entre les informations du produit et la zone prix/bouton
  • Prix plus grands (16px) avec une lueur plus marquĂ©e pour les devises CC et KC

Nouvel en-tĂŞte de boutique

Une nouvelle barre d’identité apparaît au-dessus de la grille de produits, affichant :

  • L’icĂ´ne de type de la boutique dans un conteneur arrondi colorĂ©
  • Le nom de la boutique en grand texte gras
  • Un badge de type (par ex. « MatĂ©riel », « Nourriture », « Services ») avec la couleur du type
  • Le nombre de produits et la devise

Cela donne à chaque boutique une identité visuelle claire avant même de faire défiler jusqu’aux produits.

Onglets de canal

Les onglets pour passer d’une boutique à l’autre ont un look plus épuré :

  • Style pilule avec des coins arrondis
  • Au survol, l’arrière-plan change subtilement
  • L’onglet actif brille avec un dĂ©gradĂ© bleu-cyan et une ombre interne
  • Suppression de l’effet de masque de bordure complexe pour de meilleures performances

Barre de filtre

Les contrôles de recherche et de filtrage sont désormais plus soignés :

  • Champs arrondis (10px de border-radius) avec anneaux de focus
  • Listes dĂ©roulantes style pilule qui se mettent en Ă©vidence au survol
  • Compteur de filtres affichĂ© sous forme de badge avec arrière-plan
  • Bouton d’effacement avec accent rouge et Ă©lĂ©vation au survol

Barre latérale du panier

Le panier et le panneau des commandes sur le côté droit :

  • Positionnement collant — reste visible pendant le dĂ©filement des produits
  • Barre de dĂ©filement personnalisĂ©e — barre bleue fine au lieu de celle par dĂ©faut du navigateur
  • Arrière-plans dĂ©gradĂ©s avec des ombres subtiles
  • Boutons plus grands avec effet d’élĂ©vation au survol
  • Boutons de paiement avec remplissage dĂ©gradĂ© et lueur au survol

Avis

La section des avis en bas de chaque boutique :

  • Meilleure hiĂ©rarchie visuelle avec une ligne de sĂ©paration sous le rĂ©sumĂ©
  • Effet de survol sur les fiches d’avis individuelles (la bordure gauche s’illumine)
  • Étoiles plus grandes et meilleur espacement
  • Bouton d’envoi avec dĂ©gradĂ© et ombre au survol

Recherche à proximité et recherche de boutiques

Les deux fonctions de recherche ont reçu un design de fiches premium :

  • Profondeur avec des ombres superposĂ©es
  • Animation de glissement au survol (les fiches Ă  proximitĂ© glissent vers la droite)
  • Effet d’élĂ©vation sur les fiches de recherche de boutiques avec une lueur violette
  • IcĂ´nes plus grandes (40px) avec leurs propres ombres

États vides

Lorsqu’il n’y a aucun produit à afficher, au lieu d’un simple message texte, vous voyez désormais :

  • Une grande icĂ´ne (📦)
  • Un message clair (« Aucun produit ne correspond Ă  vos filtres » ou « Aucun produit pour le moment »)
  • Une aide utile (« Essayez d’ajuster votre recherche ou revenez plus tard »)

Animations

Les fiches produits apparaissent désormais avec une entrée échelonnée — chaque fiche apparaît en fondu et s’agrandit légèrement, avec un petit délai entre les fiches. L’animation utilise une courbe d’accélération cubic-bezier fluide pour une sensation premium.

Désactivation du repère sur la carte

Cette version inclut également une nouvelle fonctionnalité de confidentialité pour les propriétaires de boutiques :

Les prestataires de services qui ne souhaitent pas révéler leur emplacement physique peuvent désormais décocher « Afficher ma boutique sur la carte du monde » dans les paramètres de leur boutique. La boutique reste entièrement fonctionnelle — elle n’apparaît simplement pas comme un repère sur la carte.

C’est particulièrement utile pour les consultants, les prestataires de services numériques et toute personne dont l’entreprise n’a pas de vitrine publique.

Performances

Malgré des visuels plus riches, la boutique est en réalité plus rapide grâce à :

  • loading="lazy" sur les images de produits — le navigateur ne charge que les images visibles
  • CSS simplifiĂ© (suppression des masques ::before complexes sur les onglets de canal)
  • Transformations accĂ©lĂ©rĂ©es par GPU pour les animations de survol

Et ensuite ?

La refonte de la boutique pose les fondations visuelles pour les fonctionnalités à venir :

  • FenĂŞtres de dĂ©tail produit avec images en pleine taille et spĂ©cifications
  • Liste de souhaits / favoris — enregistrer des produits pour plus tard
  • Collections de boutiques — groupes de produits sĂ©lectionnĂ©s
  • Codes de rĂ©duction — tarifs promotionnels
  • Analytique de boutique pour les propriĂ©taires — vues, clics, conversion

ENLIGHTENMENT est un jeu basé sur la blockchain de développement personnel, d’exploration archétypale et de résonance collective. Rejoignez-nous sur getplasma.org.