Ela_Front/src/components/tarif_section_automatic_files/PriceCard.js

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;