forked from amnannn/rekan_ai
74 lines
3.1 KiB
JavaScript
74 lines
3.1 KiB
JavaScript
import { useState } from "react";
|
|
import { data } from "./data";
|
|
|
|
export default function BusinessSolution() {
|
|
const [activeTab, setActiveTab] = useState("hr");
|
|
const activeContent = data.content[activeTab];
|
|
|
|
return (
|
|
<div className="min-h-screen p-4">
|
|
{/* Header */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
|
<p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
|
|
</div>
|
|
|
|
{/* Navigation Buttons */}
|
|
<div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
|
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
|
|
{data.tabs.map((button) => (
|
|
<button
|
|
key={button.key}
|
|
className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
|
|
activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
|
|
} font-semibold transition-colors`}
|
|
onClick={() => setActiveTab(button.key)}
|
|
>
|
|
{button.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Section */}
|
|
{activeContent && (
|
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
|
{/* Image Section */}
|
|
<div className="w-full sm:w-[400px] md:w-[500px] md:-ml-20 lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
|
<img
|
|
src={activeContent.image || "/placeholder.svg"}
|
|
alt={activeContent.title}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Content */}
|
|
<div className="flex-1 max-w-full md:max-w-[600px] md:ml-9">
|
|
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
|
|
|
{/* Features */}
|
|
<div className="space-y-6">
|
|
{activeContent.features.map((feature, index) => (
|
|
<div key={index} className="flex items-start gap-6">
|
|
<div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
|
|
<img
|
|
src={feature.icon || "/checkmark.svg"}
|
|
alt="Feature Icon"
|
|
className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
|
|
<p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|