Mise en page et lisibilité des données comparatives sur une page Deltacms

[Elvyda]

Dans mon précédent message je parlais d'une préoccupation que j'ai. ALors je la pose ici. Bon parce que je pense que c'est la section du forum la mieux adapté pour çà. Si ce n'est pas le cas, je vous prie de m'aider à mieux me situé.
Alors, je suis en train de revoir un peu l'organisation de mes contenus sur le site et je me heurte à un petit souci d'ergonomie pour mes lecteurs. Sur l'une de mes rubriques dédiées aux séjours à l'étranger, je cherche à présenter les différentes options de connectivité mobile de manière claire et épurée sans surcharger l'affichage natif du CMS. J'ai remarqué que dès qu'on essaie de superposer plusieurs critères comme les tarifs, les données en Go ou les zones géographiques, le rendu manque rapidement de fluidité sur mobile. En faisant quelques recherches sur ce qui se fait en matière d'ergonomie et d'affichage, je suis tombée sur ce comparateur esim que je trouve vraiment bien pensé au niveau de l'agencement et de la simplicité d'utilisation. Je m'interroge sur la meilleure façon de reproduire un rendu aussi lisible directement avec les outils de base de Deltacms ou avec un peu de CSS personnalisé. Est ce que quelqu'un a des retours d'expérience sur la présentation de ce genre de données structurées pour que ça reste propre et agréable à consulter sur tous les écrans ?
J'avais prévu poser le problème ici avant de partir en weekend car je dois rendre un travail au plus tard lundi pour çà. J'espère vivement que quelqu'un m'aide aujourd'hui ou demain dans la matiné.
Bon.. merci en attendant pour vos conseils et idées que vous me partagerez.

[Tôt]

Bonjour,

J'ai bien pris note de votre demande concernant le style d'intégration pour les eSIM.
Pour que je puisse analyser précisément votre travail et vous orienter au mieux, je vous invite à tester ce modèle sur une interface de test Delta et à me partager votre lien.

Pour vous donner une idée du rendu, voici une proposition visuelle qui devrait correspondre à ce que vous souhaitez :
Démo en ligne : https://root.my.be/test/esim

Instructions pour l'intégration
• Code HTML : À insérer directement dans le code source de votre page.

Code Sélectionner Étendre

<div class="esim-container">
 
  <!-- Carte Offre 1 -->
  <div class="esim-card">
    <div class="esim-header">
      <span class="esim-badge">Populaire</span>
      <h3 class="esim-destination">🇺🇸 États-Unis</h3>
    </div>
    <div class="esim-body">
      <div class="esim-data">10 <span class="unit">Go</span></div>
      <div class="esim-details">
        <p><strong>Validité :</strong> 30 Jours</p>
        <p><strong>Réseau :</strong> T-Mobile / AT&T</p>
      </div>
    </div>
    <div class="esim-footer">
      <div class="esim-price">18,00 €</div>
      <a href="#" class="esim-btn">Voir l'offre</a>
    </div>
  </div>

  <!-- Carte Offre 2 -->
  <div class="esim-card">
    <div class="esim-header">
      <h3 class="esim-destination">🇯🇵 Japon</h3>
    </div>
    <div class="esim-body">
      <div class="esim-data">Illimité</div>
      <div class="esim-details">
        <p><strong>Validité :</strong> 7 Jours</p>
        <p><strong>Réseau :</strong> Softbank</p>
      </div>
    </div>
    <div class="esim-footer">
      <div class="esim-price">22,50 €</div>
      <a href="#" class="esim-btn">Voir l'offre</a>
    </div>
  </div>

</div>

• Code CSS : À ajouter à la toute fin de votre fichier CSS Delta, sans toucher à la structure initiale du CMS.

Code Sélectionner Étendre

/* Conteneur principal */
.esim-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 15px 0;
  font-family: sans-serif;
}

/* Base de la carte eSIM */
.esim-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  padding: 20px;
  width: 100%;
  max-width: 300px; /* S'adapte à la taille des mobiles */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
}

.esim-card:hover {
  transform: translateY(-5px);
}

/* En-tête de la carte */
.esim-header {
  position: relative;
  margin-bottom: 15px;
}

.esim-destination {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.esim-badge {
  position: absolute;
  top: -30px;
  right: -10px;
  background: #ff5a5f;
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: bold;
}

/* Corps de la carte (Données et infos) */
.esim-body {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 15px 0;
  margin-bottom: 15px;
}

.esim-data {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 10px;
}

.esim-data .unit {
  font-size: 1rem;
  font-weight: normal;
  color: #666;
}

.esim-details p {
  margin: 5px 0;
  font-size: 0.9rem;
  color: #555;
}

/* Pied de la carte (Prix et Action) */
.esim-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.esim-price {
  font-size: 1.4rem;
  font-weight: bold;
  color: #28a745;
}

.esim-btn {
  background: #007bff;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  transition: background 0.2s;
}

.esim-btn:hover {
  background: #0056b3;
}

Je vous laisse avancer sur cette base. Dès que vous aurez une première version prête, n'hésitez pas à me la présenter pour que je puisse vous apporter une aide complémentaire si nécessaire.

Bon travail et à bientôt,
Cordialement,