forked from amnannn/rekan_ai
87 lines
3.6 KiB
JavaScript
87 lines
3.6 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { data } from "./data";
|
|
|
|
export default function BusinessSolution() {
|
|
const [activeTab, setActiveTab] = useState("hr");
|
|
const activeContent = data.content[activeTab];
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
// Detect mobile screen size
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
|
|
};
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
handleResize(); // Inisialisasi state saat pertama kali mount
|
|
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
|
{/* 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-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
|
<div className={`flex ${isMobile ? "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-[90vw] 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-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] 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 md:pl-7 max-w-full ">
|
|
<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>
|
|
);
|
|
}
|