new buy menu

src/App.jsx

@@ -75,7 +75,7 @@ const App = () => {
             <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
 
             {/* Routes with Subscription Levels */}
-            <Route path="/createServer/java" element={user ? (subscription > 0 ? <Javapick user={user} /> : <Navigate to="/payement?package=Gratuit" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/java" element={user ? (subscription > 0 ? <Javapick user={user} /> : <Navigate to="/payement?package=Basique" />) : <Navigate to="/login" />} />
             <Route path="/createServer/bedrock" element={user ? (subscription > 1 ? <Bedrock user={user} /> : <Navigate to="/payement?package=Standard" />) : <Navigate to="/login" />} />
             <Route path="/createServer/modpack" element={user ? (subscription > 2 ? <Modpack user={user} /> : <Navigate to="/payement?package=Premium" />) : <Navigate to="/login" />} />
 

src/pages/Payement/PaymentForm/PaymentForm.jsx

@@ -6,7 +6,7 @@ import { loadStripe } from '@stripe/stripe-js';
 import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js';
 import styles from './PaymentForm.module.scss';
 
-const stripePromise = loadStripe("pk_test_51PyIYTP3VLLeb9GlXCKgD4ylbemZPx72I3HkEAu0bRtcsfK31nqb3WtUbXKXUcKmyfrxKLfuJzZCPyp7Ymtlq9zy00c7VmkL6G");
+const stripePromise = loadStripe("pk_live_51PyIYTP3VLLeb9GlHpiK8p5lVC3kGPvAAb0Nn8m5qVAGzespGfGlDoP8Wmw4HbZJJgqxxHEIG7MJwP4IAWCpRBi100dYMpV1gv");
 
 const PackageNumber = (selectedPackage) => {
   switch (selectedPackage) {

src/pages/Payement/Pricing/Pricing.jsx

@@ -7,28 +7,33 @@ import basique from '../../../assets/tier/basique.png';
 import standard from '../../../assets/tier/standard.png';
 import premium from '../../../assets/tier/premium.png';
 
+// Import des icônes
+import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
+
 const Pricing = ({ user }) => {
   const navigate = useNavigate();
   
   const groups = [
     { 
       title: 'Basique', 
-      price: '0 €', 
+      price: '2€', 
+      description: 'Fait pour les joueurs vanilla sur un petit serveur. 2gb de Ram',
       features: [
         { name: 'Accès au serveurs vanilla', isAvailable: true },
-        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Personalisation complète', 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 }
+        { name: 'Accès au serveurs de modpacks', isAvailable: false },
       ], 
       image: basique 
     },
     { 
       title: 'Standard', 
-      price: '2 €', 
+      price: '5€', 
+      description: 'Fait pour les joueurs de mini-jeux et vanilla ! 5gb de Ram',
       features: [
         { name: 'Accès au serveurs vanilla', isAvailable: true },
-        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Personalisation complète', 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 }
@@ -37,10 +42,11 @@ const Pricing = ({ user }) => {
     },
     { 
       title: 'Premium', 
-      price: '9 €', 
+      price: '9€', 
+      description: 'Conçu pour les joueurs de modpacks robustes. 10gb de Ram',
       features: [
         { name: 'Accès au serveurs vanilla', isAvailable: true },
-        { name: 'Personalisation complète de vos serveurs', isAvailable: true },
+        { name: 'Personalisation complète', 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 }
@@ -50,7 +56,7 @@ const Pricing = ({ user }) => {
   ];
 
   const handleSubscribe = (pkg) => {
-    navigate(`/payement?package=${pkg.title}`);
+    navigate(`/payment?package=${pkg.title}`);
   };
 
   return (
@@ -65,21 +71,35 @@ const Pricing = ({ user }) => {
       <div className={styles.packageList}>
         {groups.map((pkg, index) => (
           <div key={index} className={styles.packageCard}>
-            <div>
+            <div className={styles.packageCardheader}>
+              <h2 className={styles.title}>{pkg.title}</h2>
               <img src={pkg.image} alt={pkg.title} /> 
             </div>
-            <h2 className={styles.title}>{pkg.title}</h2>
-            <p className={styles.price}>{pkg.price}</p>
-            <button className={styles.button} onClick={() => handleSubscribe(pkg)}>
-              S&apos;inscrire
-            </button>
+
+            <div className={styles.priceContainer}>
+              <p className={styles.price}>{pkg.price}</p>
+              <span className={styles.mensuel}>/mois</span>
+            </div>
+
+            <div className={styles.description}>{pkg.description}</div>
+            <hr />
             <ul className={styles.features}>
+              <div className={styles.inclut}>CE QUI EST INCLUS</div>
+
               {pkg.features.map((feature, idx) => (
                 <li key={idx} className={feature.isAvailable ? styles.featureAvailable : styles.featureUnavailable}>
-                  {feature.isAvailable ? '✔️' : '❌'} {feature.name}
+                  {feature.isAvailable ? (
+                    <FaCheckCircle style={{ color: 'green', marginRight: '8px' }} />
+                  ) : (
+                    <FaTimesCircle style={{ color: 'red', marginRight: '8px' }} />
+                  )}
+                  {feature.name}
                 </li>
               ))}
             </ul>
+            <button className={styles.button} onClick={() => handleSubscribe(pkg)}>
+              Démarrez maintenant
+            </button>
           </div>
         ))}
       </div>

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

@@ -2,7 +2,7 @@ $primary-color: #000;
 $secondary-color: #fff;
 
 .pricingContainer {
-  margin-top: 5rem;
+  margin-top: 4rem;
   display: flex;
   justify-content: center;
   flex-direction: row;
@@ -14,77 +14,119 @@ $secondary-color: #fff;
   display: flex;
   flex-direction: row;
   gap: 3rem;
-  
 }
 
 .packageCard {
-  position: relative; 
-  background-color: white;
-  color: black;
-  border-radius: 0.5rem;
-  padding: 2rem 1rem; 
-  text-align: center;
-  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: 2rem;
-  font-weight: 500;
-}
-
-.price {
-  font-size: 2rem;
-  margin: 1rem 0;
-}
-
-.features {
-  list-style-type: none;
-  padding: 0;
-  margin: 1.5rem 0;
-  text-align: left;
-  li {
-    margin: .8rem 0;
-  }
-}
-
-.button {
-  visibility: hidden; 
-  opacity: 0;
+  background-color: $secondary-color;
   color: $primary-color;
-  border: none;
-  border-radius: 4px;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  margin-top: 1rem; 
-  background-color: #2F2F2F;
-  color: white;
+  border-radius: .5rem;
+  padding: 0rem 2rem 2rem 2rem;
+  text-align: start;
+  transition: transform 0.3s, box-shadow 0.3s;
+  border: 0.15rem solid #dfdcd5;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+
+  &.recommended {
+    border-color: #76e4c8;
+    box-shadow: 0 6px 20px rgba(0, 228, 184, 0.5);
+  }
 
   &:hover {
-    background-color: darken(#2F2F2F, 10%);
+    transform: scale(1.02);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .packageCardheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+      width: 3rem; 
+      height: auto;
+      margin-left: 0.5rem;
+    }
+  }
+
+  .title {
+    font-size: 1.8rem; 
+    font-weight: 600;
+  }
+
+  .priceContainer {
+    display: flex;
+    justify-content: start; 
+    align-items: baseline;
+    margin-bottom:-1rem;
+    margin-top: -4rem;
+
+    .price {
+      font-size: 2.5rem;
+      font-weight: bold;
+      color: #2F2F2F;
+    }
+
+    .mensuel {
+      font-size: 1rem;
+      margin-left: 0.25rem;
+      color: #7c7c7c; 
+    }
+  }
+
+  .description {
+    width: 16.5rem;
+    height: 4rem;
+    font-size: 1rem;
+    margin-top: -0.25rem;
+    color: #3c3c3c;
+  }
+
+  .features {
+    list-style-type: none;
+    padding: 0;
+    margin: 1rem 0;
+
+    li {
+      margin: 0.5rem 0;
+      font-size: 1rem;
+      color: #555;
+    }
+  }
+
+  .inclut {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    font-weight: 500;
+  }
+
+  .button {
+    color: $primary-color;
+    border: none;
+    border-radius: 2px;
+    padding: 12px 24px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-top: 1rem;
+    background-color: #2F2F2F;
+    color: $secondary-color;
+    transition: background-color 0.3s, transform 0.2s;
+    width: 100%;
+
+    &:hover {
+      background-color: darken(#2F2F2F, 10%);
+      transform: translateY(-2px);
+    }
+  }
+
+  hr {
+    border: 0.1rem solid #dfdcd5;
+    margin: 1.5rem -2rem;
   }
 }
 
+
 @media (max-width: 700px) {
   .packageList {
     flex-direction: column;
-  }  
+  }
 }