Refonte de la boutique : un look premium avec profondeur et finition
NOUVEAULa 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
::beforecomplexes 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.