Plans Pricing

import React from "react";
import { motion } from "framer-motion";
import "./PricingPlans.css";
const plans = [
{
category: "FIBER",
title: "Fiber Basic Plus",
price: "₹599",
duration: "/ Month",
features: [
"Speed: Up to 100 Mbps till 4000 GB",
"Speed: Up to 4Mbps beyond 4000 GB",
"Unlimited Data Download",
"Local + STD: Unlimited calls"
]
},
{
category: "LANDLINE",
title: "Fiber Basic",
price: "₹499",
duration: "/ Month",
features: [
"Speed: upto 60 Mbps till 3300 GB",
"Speed: 4 Mbps beyond 3300 GB",
"Unlimited Data Download",
"Local + STD: Unlimited calls"
]
},
{
category: "RECHARGE",
title: "Prepaid Mobile Recharge",
price: "₹599",
duration: "/ 84 Days",
features: [
"Unlimited voice",
"3GBdata/day+100 SMS",
"OTT/Games",
"Lystn Podcast"
]
}
];

// ... same plan data as before

const PricingPlans = () => {
return (
<div className="pricing-section">
<div className="header">
<motion.p
className="subheading"
initial={{ opacity: 0, y: -30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}

OUR PRICING PLAN FOR YOU

</motion.p>

<motion.h1
className="main-heading"
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}

Popular plans near you

</motion.h1>

</div>

  <div className="cards-container">
    {plans.map((plan, idx) => (
      <motion.div
        className="card"
        key={idx}
        initial={{ opacity: 0, y: -100 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: idx * 0.3 }}
      >
        <div className="ribbon">{plan.category}</div>
        <h2 className="plan-title">{plan.title}</h2>
        <div className="price">
          {plan.price}
          <span className="duration">{plan.duration}</span>
        </div>
        <ul className="features">
          {plan.features.map((feature, index) => (
            <li key={index}>✔ {feature}</li>
          ))}
        </ul>
        <button>Buy Now</button>

      </motion.div>
    ))}
  </div>
</div>

);
};

export default PricingPlans;

body {
margin: 0;
font-family: Arial, sans-serif;
}

.pricing-section {
background-color: #050A30;
color: white;
padding: 40px 20px;
min-height: 100vh;
text-align: center;
}

.header .subheading {
color: #00BFFF;
font-weight: bold;
}

.header .main-heading {
font-size: 2rem;
font-weight: bold;
margin-top: 10px;
}

.cards-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
flex-wrap: wrap;
}

.card {
position: relative;
background-color: white;
color: black;
padding: 30px 20px;
border-radius: 15px;
width: 300px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.ribbon {
position: absolute;
left: -35px;
top: 15px;
transform: rotate(-90deg);
background-color: red;
color: white;
font-weight: bold;
padding: 5px 10px;
font-size: 12px;
}

.plan-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}

.price {
font-size: 36px;
font-weight: bold;
}

.duration {
font-size: 16px;
margin-left: 5px;
}

.features {
margin-top: 20px;
text-align: left;
list-style: none;
padding: 0;
}

.features li {
margin-bottom: 10px;
font-size: 14px;
color: #333;
}
button
{
align-self: center;
width:100px;
height:30px;
border-radius: 5px;
color: white;
background-color: red;
margin-top: 50px;
}