From 94c3655a5ceec7ca1e1cabc49e2bb7b5261f1381 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Fri, 27 Sep 2024 11:15:11 +0200 Subject: [PATCH] + pricing menu --- src/assets/tier/basique.png | Bin 0 -> 4601 bytes src/assets/tier/premium.png | Bin 0 -> 5199 bytes src/assets/tier/standard.png | Bin 0 -> 6634 bytes src/pages/Payement/Pricing/Pricing.jsx | 58 +++++++++++++--- .../Payement/Pricing/Pricing.module.scss | 63 +++++++++++++----- 5 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 src/assets/tier/basique.png create mode 100644 src/assets/tier/premium.png create mode 100644 src/assets/tier/standard.png diff --git a/src/assets/tier/basique.png b/src/assets/tier/basique.png new file mode 100644 index 0000000000000000000000000000000000000000..6843c9f783b2c561378ba9638149a5fdb05c39a2 GIT binary patch literal 4601 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 TcTM=`ib_aOL?CwuDgXZfnmDcL literal 0 HcmV?d00001 diff --git a/src/assets/tier/premium.png b/src/assets/tier/premium.png new file mode 100644 index 0000000000000000000000000000000000000000..2d01e3398d836aa16813cbddcefafdfec13e8510 GIT binary patch literal 5199 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 LQm|ixFO>VgU-gm? literal 0 HcmV?d00001 diff --git a/src/assets/tier/standard.png b/src/assets/tier/standard.png new file mode 100644 index 0000000000000000000000000000000000000000..42b15308ebca31c61fea9005d46f3f7035b38e6a GIT binary patch literal 6634 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 y@0f7<;vV8a3I7AO$9L-h literal 0 HcmV?d00001 diff --git a/src/pages/Payement/Pricing/Pricing.jsx b/src/pages/Payement/Pricing/Pricing.jsx index 7f025c3..cae1703 100644 --- a/src/pages/Payement/Pricing/Pricing.jsx +++ b/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 }) => {
{groups.map((pkg, index) => (
+
+ {pkg.title} +

{pkg.title}

{pkg.price}

-
    - {pkg.features.map((feature, idx) => ( -
  • {feature}
    • - ))} -
+
    + {pkg.features.map((feature, idx) => ( +
  • + {feature.isAvailable ? '✔️' : '❌'} {feature.name} +
    • + ))} +
))}
diff --git a/src/pages/Payement/Pricing/Pricing.module.scss b/src/pages/Payement/Pricing/Pricing.module.scss index 259d960..9454bb7 100644 --- a/src/pages/Payement/Pricing/Pricing.module.scss +++ b/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; -} \ No newline at end of file + margin-top: 1rem; + background-color: #2F2F2F; + color: white; + + &:hover { + background-color: darken(#2F2F2F, 10%); + } +} + +@media (max-width: 700px) { + .packageList { + flex-direction: column; + } +}