charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-18 05:40:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix css on tier cards last commit

Browse Source
This commit is contained in:
AntoninoP 2024-09-27 15:39:33 +02:00
parent d80a365576
commit 960794fcc2
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Payement/Pricing/Pricing.jsx
View File

@ -2,7 +2,6 @@ import styles from './Pricing.module.scss';
import Navbar from '../../../components/navbar/Navbar'; import Navbar from '../../../components/navbar/Navbar';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import basique from '../../../assets/tier/basique.png'; import basique from '../../../assets/tier/basique.png';
import standard from '../../../assets/tier/standard.png'; import standard from '../../../assets/tier/standard.png';
import premium from '../../../assets/tier/premium.png'; import premium from '../../../assets/tier/premium.png';
@ -13,6 +12,7 @@ import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
const Pricing = ({ user }) => { const Pricing = ({ user }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const groups = [ const groups = [
{ {
title: 'Basique', title: 'Basique',
@ -80,7 +80,7 @@ const Pricing = ({ user }) => {
</div> </div>
<div className={styles.priceContainer}> <div className={styles.priceContainer}>
<p className={styles.price}>{pkg.price}</p> <div className={styles.price}>{pkg.price}</div>
<span className={styles.mensuel}>/mois</span> <span className={styles.mensuel}>/mois</span>
</div> </div>

18
src/pages/Payement/Pricing/Pricing.module.scss
View File

@ -20,22 +20,12 @@ $secondary-color: #fff;
background-color: $secondary-color; background-color: $secondary-color;
color: $primary-color; color: $primary-color;
border-radius: .5rem; border-radius: .5rem;
padding: 0rem 2rem 2rem 2rem; padding: .5rem 2rem 2rem 2rem;
text-align: start; text-align: start;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
border: 0.15rem solid #dfdcd5; border: 0.15rem solid #dfdcd5;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 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 {
transform: scale(1.02);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.packageCardheader { .packageCardheader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -57,8 +47,7 @@ $secondary-color: #fff;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: baseline; align-items: baseline;
margin-bottom:-1rem; margin-bottom: 1.5rem;
margin-top: -4rem;
.price { .price {
font-size: 2.5rem; font-size: 2.5rem;
@ -77,7 +66,7 @@ $secondary-color: #fff;
width: 16.5rem; width: 16.5rem;
height: 4rem; height: 4rem;
font-size: 1rem; font-size: 1rem;
margin-top: -0.25rem; margin-top: 0.25rem;
color: #3c3c3c; color: #3c3c3c;
} }
@ -125,6 +114,7 @@ $secondary-color: #fff;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.packageList { .packageList {
flex-direction: column; flex-direction: column;