78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { ChevronRight } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
const PremiumBannerLast = ({ data, services }) => {
|
|
const { header5 } = data || {};
|
|
const [selectedService, setSelectedService] = useState(0);
|
|
|
|
const handleServiceClick = (index) => {
|
|
setSelectedService(index);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 p-4">
|
|
<h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
|
|
{header5 ?? "Perks of Consulting an Expert"}
|
|
</h1>
|
|
<div className="grid sm:grid-cols-3 gap-8">
|
|
<div className="flex flex-col gap-4 sm:pl-10">
|
|
{services.map((service, index) => (
|
|
<div
|
|
key={index}
|
|
className="cursor-pointer"
|
|
onClick={() => handleServiceClick(index)}
|
|
>
|
|
<h2
|
|
className={`text-xl ${
|
|
selectedService === index ? "text-yellow-700" : ""
|
|
} hover:translate-x-4 hover:font-semibold hover:text-yellow-700 transition-all flex items-center`}
|
|
>
|
|
{selectedService === index ? (
|
|
<ChevronRight className="mr-2" size={20} />
|
|
) : (
|
|
""
|
|
)}
|
|
{service.title}
|
|
</h2>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
{selectedService !== null && (
|
|
<div className="bg-white p-6">
|
|
<div className="flex flex-col-reverse sm:flex-row gap-6">
|
|
<div className="flex flex-col gap-3 justify-start items-start sm:w-1/2">
|
|
<p className="mb-4 mt-2 text-[1.05rem]">
|
|
{services[selectedService].description}
|
|
</p>
|
|
<a href="#form">
|
|
<button className="px-5 font-semibold text-white bg-[#C19A5B] py-4">
|
|
Book now
|
|
</button>
|
|
</a>
|
|
</div>
|
|
<div className="flex gap-4 sm:w-1/2">
|
|
{services[selectedService].imageUrl.map((url, index) => (
|
|
<Image
|
|
key={index}
|
|
src={url}
|
|
alt={`${services[selectedService].title} - ${index + 1}`}
|
|
width={230}
|
|
height={350}
|
|
className="sm:w-[230px] sm:h-[350px] w-[130px] h-[250px] object-cover"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PremiumBannerLast;
|