101 lines
5.7 KiB
TypeScript
101 lines
5.7 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import GsapReveal from '@/components/common/GsapReveal';
|
|
import { pricingPlans } from '@/utils/data';
|
|
|
|
const Pricing = () => {
|
|
return (
|
|
<section className="pricing-section sp1 pt-0" id="pricing">
|
|
<div className="container">
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-8 text-center">
|
|
<div className="consen-section-title upper text-center pb-60 heading2">
|
|
<GsapReveal y={20}>
|
|
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
|
|
<span><img src="/favicon.ico" alt="" /></span>
|
|
Pricing Plans
|
|
</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.2}>
|
|
<h2 className="text-anime-style-3 space-margin60">
|
|
Flexible Pricing for Your <br />
|
|
<span>Business Needs</span>
|
|
</h2>
|
|
</GsapReveal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row g-4 justify-content-center">
|
|
{pricingPlans.map((plan, index) => (
|
|
<div key={plan.id} className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay={index * 100}>
|
|
<div className={`pricing-single-boxarea ${plan.isPopular ? 'box2' : ''}`} style={{
|
|
padding: '50px 40px',
|
|
borderRadius: '24px',
|
|
background: plan.isPopular ? '#1a1f2b' : '#fff',
|
|
transition: 'all 0.4s',
|
|
border: plan.isPopular ? 'none' : '1px solid #e3eaf4',
|
|
boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
|
|
position: 'relative',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}>
|
|
{plan.isPopular && (
|
|
<div className="popular-badge" style={{
|
|
position: 'absolute',
|
|
top: '20px',
|
|
right: '20px',
|
|
background: '#3779b9',
|
|
color: '#fff',
|
|
padding: '5px 15px',
|
|
borderRadius: '50px',
|
|
fontSize: '12px',
|
|
fontWeight: 700,
|
|
textTransform: 'uppercase'
|
|
}}>
|
|
Popular
|
|
</div>
|
|
)}
|
|
<div className="pricing-header mb-4">
|
|
<h4 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '15px' }}>{plan.plan}</h4>
|
|
<div className="price d-flex align-items-baseline">
|
|
<h2 style={{ color: plan.isPopular ? '#fff' : '#1a1f2b', fontSize: '48px', fontWeight: 800, margin: 0 }}>${plan.price}</h2>
|
|
<span style={{ color: plan.isPopular ? 'rgba(255,255,255,0.7)' : '#4a5568', marginLeft: '5px', fontSize: '16px' }}>/{plan.period}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="pricing-features list-unstyled mb-5" style={{ flexGrow: 1 }}>
|
|
{plan.features.map((feature, i) => (
|
|
<li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
|
|
<i className="fa-solid fa-check-circle" style={{ color: '#3779b9', marginRight: '10px' }}></i>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="pricing-btn">
|
|
<Link href={plan.link} className={`vl-btn1 w-100 text-center ${plan.isPopular ? '' : 'btn-dark'}`} style={{
|
|
display: 'block',
|
|
padding: '15px',
|
|
borderRadius: '12px',
|
|
fontWeight: 700,
|
|
background: plan.isPopular ? '#3779b9' : '#1a1f2b',
|
|
color: '#fff',
|
|
transition: 'all 0.3s'
|
|
}}>
|
|
Choose Plan <i className="fa-solid fa-arrow-right ms-2"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Pricing; |