143 lines
4.1 KiB
JavaScript
143 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import './PriceCard.css';
|
|
|
|
import check_img_fond_blanc from "../../img_new_design_2025/check-2.svg";
|
|
|
|
const PriceCard = ({
|
|
isPopular = false,
|
|
title = 'BASIQUE',
|
|
price = '9.99',
|
|
features = [
|
|
'Sans engagement',
|
|
'2 Utilisateurs maximum',
|
|
'Email Support',
|
|
"Jusqu'à 25 Sessions/an",
|
|
'Basic Analytics'
|
|
],
|
|
buttonColor = '#fff',
|
|
buttonTextColor = '#4b5162',
|
|
priceColor = '#16274f',
|
|
borderColor = '#c7c9ce'
|
|
}) => {
|
|
return (
|
|
<div className='pricecard'>
|
|
{isPopular && <div className="price-card-wrapper">
|
|
{isPopular && (
|
|
<div className="popular-badge">
|
|
<span>LE PLUS POPULAIRE</span>
|
|
</div>
|
|
)}
|
|
<div
|
|
className="price-card"
|
|
style={{
|
|
borderColor: isPopular ? '#0aa690' : borderColor,
|
|
borderTop: 'none',
|
|
borderTopLeftRadius: '0px',
|
|
borderTopRightRadius: '0px',
|
|
borderTopColor: '#0aa690',
|
|
minHeight: '620px'
|
|
}}
|
|
>
|
|
<div className="text-content">
|
|
<span className="plan-title">{title}</span>
|
|
<div className="price-container">
|
|
<span className="price" style={{ color: isPopular ? '#0aa690' : priceColor }}>
|
|
{price} €
|
|
</span>
|
|
<span className="per-month" style={{ color: isPopular ? '#0aa690' : priceColor }}>
|
|
par mois
|
|
</span>
|
|
</div>
|
|
<span className="engagement">Sans engagement</span>
|
|
</div>
|
|
|
|
<button
|
|
className="start-button"
|
|
style={{
|
|
backgroundColor: buttonColor,
|
|
color: buttonTextColor,
|
|
borderColor: isPopular ? '#0aa690' : borderColor
|
|
}}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Partner";
|
|
}}
|
|
>
|
|
Commencer maintenant
|
|
</button>
|
|
|
|
<div className="divider" />
|
|
|
|
<div className="features-list">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="feature-item">
|
|
<img
|
|
src={check_img_fond_blanc}
|
|
alt="check"
|
|
className="check-icon"
|
|
/>
|
|
<span className="feature-text">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
|
|
{!isPopular && <div className="price-card-wrapper">
|
|
<div
|
|
className="price-card"
|
|
style={{
|
|
borderColor: isPopular ? '#0aa690' : borderColor
|
|
}}
|
|
>
|
|
<div className="text-content">
|
|
<span className="plan-title">{title}</span>
|
|
<div className="price-container">
|
|
<span className="price" style={{ color: isPopular ? '#0aa690' : priceColor }}>
|
|
{price} €
|
|
</span>
|
|
<span className="per-month" style={{ color: isPopular ? '#0aa690' : priceColor }}>
|
|
par mois
|
|
</span>
|
|
</div>
|
|
<span className="engagement">Sans engagement</span>
|
|
</div>
|
|
|
|
<button
|
|
className="start-button"
|
|
style={{
|
|
backgroundColor: buttonColor,
|
|
color: buttonTextColor,
|
|
borderColor: isPopular ? '#0aa690' : borderColor
|
|
}}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Partner";
|
|
}}
|
|
>
|
|
Commencer maintenant
|
|
</button>
|
|
|
|
<div className="divider" />
|
|
|
|
<div className="features-list">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="feature-item">
|
|
<img
|
|
src={check_img_fond_blanc}
|
|
alt="check"
|
|
className="check-icon"
|
|
/>
|
|
<span className="feature-text">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PriceCard;
|
|
|