done recaptcha and solusi bisnis

src/components/solusi/SolusiStartup/SolusiStartup.jsx

@@ -1,9 +1,22 @@
-import { useState } from "react";
+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 to true if screen width is less than 768px
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Initialize state on component mount
+
+    return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
+  }, []);
 
   return (
     <div className="min-h-screen p-4">
@@ -15,7 +28,7 @@ export default function BusinessSolution() {
 
       {/* 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]">
+        <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -34,7 +47,7 @@ export default function BusinessSolution() {
       {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">
+          <div className={`w-full ${isMobile ? "sm:w-[300px]" : "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}