MyFit/www-myfit
4
0
Fork 0
Code Issues Pull Requests Releases Activity

implemented pricing yearly plan and added FAQs component to all pages rendering it

Browse Source
This commit was merged in pull request #23.
This commit is contained in:
VICTOR\anumu
2023-01-16 16:32:57 +01:00
parent 04ebfbc575
commit 34c09440d3
3 changed files with 45 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/HomeMain/Pricing/Main.js
+13 -97
View File
@@ -41,7 +41,7 @@ const Main = ({gredient , video}) => {
<span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
</div>
<span className="years">Yearly</span>
<span className="offer">50% off</span>
{/* <span className="offer">50% off</span> */}
</div>
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
@@ -49,10 +49,9 @@ const Main = ({gredient , video}) => {
{prices.length > 0 &&
prices.map((price, index) => {
if (index % 2 == 0) {
return (
<div key={index} className="col-md-4">
<div className="pricing_block">
<div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
@@ -62,32 +61,12 @@ const Main = ({gredient , video}) => {
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
} else {
return (
<div key={index} className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
<div className="pkg_name">
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
}
})
}
@@ -130,10 +109,9 @@ const Main = ({gredient , video}) => {
{prices.length > 0 &&
prices.map((price, index) => {
if (index % 2 == 0) {
return (
<div key={index} className="col-md-4">
<div className="pricing_block">
<div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
@@ -141,34 +119,14 @@ const Main = ({gredient , video}) => {
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<span className="price">{price.price_anual}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
} else {
return (
<div key={index} className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
<div className="pkg_name">
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
}
})
}
@@ -192,7 +150,7 @@ const Main = ({gredient , video}) => {
<span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
</div>
<span className="years">Yearly</span>
<span className="offer">50% off</span>
{/* <span className="offer">50% off</span> */}
</div>
<div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
@@ -200,10 +158,9 @@ const Main = ({gredient , video}) => {
{prices.length > 0 &&
prices.map((price, index) => {
if (index % 2 == 0) {
return (
<div key={index} className="col-md-4">
<div className="pricing_block">
<div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
@@ -213,33 +170,13 @@ const Main = ({gredient , video}) => {
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
} else {
return (
<div key={index} className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
<div className="pkg_name">
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
}
})
})
}
</div>
@@ -250,10 +187,9 @@ const Main = ({gredient , video}) => {
{prices.length > 0 &&
prices.map((price, index) => {
if (index % 2 == 0) {
return (
<div key={index} className="col-md-4">
<div className="pricing_block">
<div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
@@ -261,34 +197,14 @@ const Main = ({gredient , video}) => {
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<span className="price">{price.price_anual}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
{price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
} else {
return (
<div key={index} className="col-md-4">
<div className="pricing_block highlited_block">
<div className="icon">
{ video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
</div>
<div className="pkg_name">
<h3>{price.title}</h3>
<span>{price.text}</span>
</div>
<span className="price">{price.price}</span>
<ul className="benifits">
{price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
</ul>
<Link to="/" className="btn white_btn">Start Now</Link>
</div>
</div>
);
}
})
}