74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import './PricingPlanCard.css';
|
|
|
|
const PricingPlanCard = ({
|
|
isPopular = false,
|
|
title = "Basic",
|
|
price = "9.99",
|
|
sessions = "Jusqu'à 25 Sessions/an",
|
|
isHighlighted = false,
|
|
|
|
}) => {
|
|
return (
|
|
<div>
|
|
{/*{isPopular && <div className='tarif_head_automatic_files' style={{ marginTop: "-42px" }}>
|
|
<div className={`pricing-card ${isHighlighted ? 'highlighted' : ''}`} >
|
|
{isPopular && (
|
|
<div className="popular-badge" >
|
|
<span>LE PLUS POPULAIRE </span>
|
|
</div>
|
|
)}
|
|
<div className="pricing-content">
|
|
<div className="plan-header">
|
|
<h2 className="plan-title">{title} </h2>
|
|
<p className="plan-subtitle">Sans engagement</p>
|
|
</div>
|
|
|
|
<div className="price-container">
|
|
<div className="price-wrapper">
|
|
<span className="price">{price} €</span>
|
|
<span className="price-period">par mois</span>
|
|
</div>
|
|
<p className="sessions">{sessions}</p>
|
|
</div>
|
|
|
|
<button className="choose-plan-btn">
|
|
<span>Choisir ce plan</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>}*/}
|
|
|
|
{!isPopular && <div className='tarif_head_automatic_files'>
|
|
<div className={`pricing-card ${isHighlighted ? 'mysy_highlighted' : ''}`}>
|
|
|
|
<div className="pricing-content">
|
|
<div className="plan-header">
|
|
<h2 className="plan-title">{title} </h2>
|
|
<p className="plan-subtitle">Sans engagement</p>
|
|
</div>
|
|
|
|
<div className="price-container">
|
|
<div className="price-wrapper">
|
|
<span className="price">{price} €</span>
|
|
<span className="price-period">par mois</span>
|
|
</div>
|
|
<p className="sessions">{sessions}</p>
|
|
</div>
|
|
|
|
<button className="choose-plan-btn" onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/Partner";
|
|
}}>
|
|
<span>Choisir ce plan</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingPlanCard;
|
|
|