+ pricing menu

src/pages/Payement/Pricing/Pricing.jsx

@@ -3,13 +3,50 @@ import Navbar from '../../../components/navbar/Navbar';
 import { useNavigate } from 'react-router-dom'; 
 import PropTypes from 'prop-types';
 
+import basique from '../../../assets/tier/basique.png';
+import standard from '../../../assets/tier/standard.png';
+import premium from '../../../assets/tier/premium.png';
+
 const Pricing = ({ user }) => {
   const navigate = useNavigate();
   
   const groups = [
-    { title: 'Gratuit', price: '0 €', features: ['Accès limité', 'Support par e-mail'] },
-    { title: 'Standard', price: '2 €', features: ['Accès complet', 'Support prioritaire'] },
-    { title: 'Premium', price: '9 €', features: ['Accès illimité', 'Support 24/7'] },
+    { 
+      title: 'Basique', 
+      price: '0 €', 
+      features: [
+        { name: 'Accès au serveurs vanilla', isAvailable: true },
+        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Support par e-mail', isAvailable: true },
+        { name: 'Accès au serveurs Mini-jeux', isAvailable: false },
+        { name: 'Accès au serveurs de modpacks', isAvailable: false }
+      ], 
+      image: basique 
+    },
+    { 
+      title: 'Standard', 
+      price: '2 €', 
+      features: [
+        { name: 'Accès au serveurs vanilla', isAvailable: true },
+        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Support par e-mail', isAvailable: true },
+        { name: 'Accès au serveurs Mini-jeux', isAvailable: true },
+        { name: 'Accès au serveurs de modpacks', isAvailable: false }
+      ], 
+      image: standard 
+    },
+    { 
+      title: 'Premium', 
+      price: '9 €', 
+      features: [
+        { name: 'Accès au serveurs vanilla', isAvailable: true },
+        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Support par e-mail', isAvailable: true },
+        { name: 'Accès au serveurs Mini-jeux', isAvailable: true },
+        { name: 'Accès au serveurs de modpacks', isAvailable: true }
+      ], 
+      image: premium 
+    },
   ];
 
   const handleSubscribe = (pkg) => {
@@ -28,16 +65,21 @@ const Pricing = ({ user }) => {
       <div className={styles.packageList}>
         {groups.map((pkg, index) => (
           <div key={index} className={styles.packageCard}>
+            <div>
+              <img src={pkg.image} alt={pkg.title} /> 
+            </div>
             <h2 className={styles.title}>{pkg.title}</h2>
             <p className={styles.price}>{pkg.price}</p>
-            <ul className={styles.features}>
-              {pkg.features.map((feature, idx) => (
-                <li key={idx}>{feature}</li>
-              ))}
-            </ul>
             <button className={styles.button} onClick={() => handleSubscribe(pkg)}>
               S&apos;inscrire
             </button>
+            <ul className={styles.features}>
+              {pkg.features.map((feature, idx) => (
+                <li key={idx} className={feature.isAvailable ? styles.featureAvailable : styles.featureUnavailable}>
+                  {feature.isAvailable ? '✔️' : '❌'} {feature.name}
+                </li>
+              ))}
+            </ul>
           </div>
         ))}
       </div>

src/pages/Payement/Pricing/Pricing.module.scss

@@ -8,56 +8,83 @@ $secondary-color: #fff;
   flex-direction: row;
   gap: 2rem;
   padding: 4rem;
-  background-color: $secondary-color;
 }
 
-.packageList{
+.packageList {
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  gap: 3rem;
+  
 }
 
 .packageCard {
-  background-color: $primary-color;
-  color: $secondary-color;
-  border-radius: .8rem;
-  padding: 5rem;
+  position: relative; 
+  background-color: white;
+  color: black;
+  border-radius: 0.5rem;
+  padding: 2rem 1rem; 
   text-align: center;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s;
-
+  transition: transform 0.3s, box-shadow 0.3s; 
+  border: 0.15rem solid #dfdcd5;
+  
   &:hover {
     transform: scale(1.01);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  &:hover .button {
+    visibility: visible; 
+    opacity: 1; 
+  }
+
+  img {
+    position: center;
+    width: 4.5rem; 
+    height: auto;
   }
 }
 
 .title {
   font-size: 2rem;
-  margin-bottom: .6rem;
+  margin-bottom: 2rem;
+  font-weight: 500;
 }
 
 .price {
-  font-size: 2.5rem;
+  font-size: 2rem;
   margin: 1rem 0;
 }
 
 .features {
   list-style-type: none;
   padding: 0;
-  margin: 20px 0;
-
+  margin: 1.5rem 0;
+  text-align: left;
   li {
-    margin: 5px 0;
+    margin: .8rem 0;
   }
 }
 
 .button {
-  background-color: $secondary-color;
+  visibility: hidden; 
+  opacity: 0;
   color: $primary-color;
   border: none;
   border-radius: 4px;
   padding: 10px 20px;
   cursor: pointer;
   font-size: 16px;
-  transition: background-color 0.3s;
-}
+  margin-top: 1rem; 
+  background-color: #2F2F2F;
+  color: white;
+
+  &:hover {
+    background-color: darken(#2F2F2F, 10%);
+  }
+}
+
+@media (max-width: 700px) {
+  .packageList {
+    flex-direction: column;
+  }  
+}