Services jsx

import React from 'react';
import './css/Services.css';
import Navbar from './Navbar';
const service = [
{
title: "Prepaid Recharge",
description: "Instant prepaid mobile recharge - Fast, secure, and hassle-free!",
linkText: "RECHARGE HERE",
icon: "📶",
link: "#",
},
{
title: "Postpaid Bill Payment",
description: "Quick and secure postpaid Bill - Fast, easy, and reliable service!",
linkText: "PAY YOUR BILL",
icon: "📱",
link: "#",
},
{
title: "Landline & FTTH Bill Payment",
description: "Fast and secure landline & FTTH Bill payment. Convenient, easy, and reliable service!",
linkText: "PAY YOUR BILL",
icon: "📺",
link: "#",
},
];

const Services = () => {
return (
<> <Navbar/>
<div className="page-container">
<div className="service-container">
{service.map((service, index) => (
<div className="service-card" key={index}>
<div className="service-content">
<div className="icon-box">{service.icon}</div>
<div className="text-content">
<h2 className="service-title">{service.title}</h2>
<p className="service-desc">{service.description}</p>
<a href={service.link} className="service-link">» {service.linkText}</a>
</div>
</div>
</div>
))}
</div>
</div>
</>

);
};

export default Services;