36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import React from "react";
|
|
|
|
const PremuimBannerThree = ({ data, categoriesForPremiumThree }) => {
|
|
const { header4 } = data || {};
|
|
|
|
return (
|
|
<div className="min-h-[75vh]">
|
|
<h2 className="text-center sm:text-5xl mt-3 font-[500] text-zinc-800 text-3xl font-serif sm:pt-20 pt-7 tracking-wide mb-11">
|
|
{header4 ?? "Who Should Book A Consultation?"}
|
|
</h2>
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{categoriesForPremiumThree.map((category, index) => (
|
|
<div
|
|
key={index}
|
|
className=" p-4 flex flex-col items-center text-center "
|
|
>
|
|
<h2 className=" rounded-full h-20 w-20 bg-gradient-to-b from-[#E7DBC8] to-pink-50 flex items-center justify-center">
|
|
{category.logo}
|
|
</h2>
|
|
<h3 className=" sm:text-lg text-sm font-semibold">
|
|
{category.title}
|
|
</h3>
|
|
<p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">
|
|
{category.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PremuimBannerThree;
|