From d4d718892c08b6d71484cbd35bd8aabc27ede4e6 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Fri, 27 Sep 2024 12:45:07 +0200 Subject: [PATCH] new buy menu --- src/App.jsx | 2 +- .../Payement/PaymentForm/PaymentForm.jsx | 2 +- src/pages/Payement/Pricing/Pricing.jsx | 50 ++++-- .../Payement/Pricing/Pricing.module.scss | 166 +++++++++++------- 4 files changed, 141 insertions(+), 79 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 5e654be..65d7a33 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -75,7 +75,7 @@ const App = () => { : } /> {/* Routes with Subscription Levels */} - 0 ? : ) : } /> + 0 ? : ) : } /> 1 ? : ) : } /> 2 ? : ) : } /> diff --git a/src/pages/Payement/PaymentForm/PaymentForm.jsx b/src/pages/Payement/PaymentForm/PaymentForm.jsx index d2ecc07..6a417bc 100644 --- a/src/pages/Payement/PaymentForm/PaymentForm.jsx +++ b/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) { diff --git a/src/pages/Payement/Pricing/Pricing.jsx b/src/pages/Payement/Pricing/Pricing.jsx index cae1703..bb5b95f 100644 --- a/src/pages/Payement/Pricing/Pricing.jsx +++ b/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 }) => {
{groups.map((pkg, index) => (
-
+
+

{pkg.title}

{pkg.title}
-

{pkg.title}

-

{pkg.price}

- + +
+

{pkg.price}

+ /mois +
+ +
{pkg.description}
+
    +
    CE QUI EST INCLUS
    + {pkg.features.map((feature, idx) => (
  • - {feature.isAvailable ? '✔️' : '❌'} {feature.name} + {feature.isAvailable ? ( + + ) : ( + + )} + {feature.name}
    • ))}
+
))}
diff --git a/src/pages/Payement/Pricing/Pricing.module.scss b/src/pages/Payement/Pricing/Pricing.module.scss index 9454bb7..7634cb4 100644 --- a/src/pages/Payement/Pricing/Pricing.module.scss +++ b/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; - } + } }