Ela_Front/src/components/tarif_head_automatic_files/PricingPlanCard.js

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;