add solusi

src/components/solusi/SolusiStartup/SolusiStartup.jsx

@@ -0,0 +1,73 @@
+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] 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]">
+            <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>
+  );
+}