allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

fix revisi 12

Browse Source
This commit is contained in:
Yogamnan
2025-02-17 11:25:12 +07:00
parent 3148ff7a2e
commit 228c6396e3
15 changed files with 296 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/solusi/SolusiStartup/SolusiStartup.jsx
View File

@@ -1,12 +1,25 @@
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 true jika lebar layar < 768px
};
window.addEventListener("resize", handleResize);
handleResize(); // Inisialisasi state saat pertama kali mount
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<div className="min-h-screen p-4">
<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>
@@ -14,8 +27,8 @@ export default function BusinessSolution() {
</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]">
<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}
@@ -32,9 +45,9 @@ export default function BusinessSolution() {
{/* 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">
<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-[400px] md:w-[500px] md:-ml-20 lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
<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}
@@ -43,7 +56,7 @@ export default function BusinessSolution() {
</div>
{/* Text Content */}
<div className="flex-1 max-w-full md:max-w-[600px] md:ml-9">
<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>