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

Merge branch 'main' of https://git.allbestsistem.com/amnannn/rekan_ai into carls2

Browse Source
This commit is contained in:
Carls2320
2025-02-17 13:38:41 +07:00
parent f054fe56c3 228c6396e3
commit 7c28f2d0bf
16 changed files with 238 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,17 +9,17 @@ export default function BusinessSolution() {
// Detect mobile screen size
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
};
window.addEventListener("resize", handleResize);
handleResize(); // Initialize state on component mount
handleResize(); // Inisialisasi state saat pertama kali mount
return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
<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>
@@ -27,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 ${isMobile ? '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}
@@ -45,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 ${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`}>
<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}
@@ -56,7 +56,7 @@ export default function BusinessSolution() {
</div>
{/* Text Content */}
<div className="flex-1 max-w-full md:max-w-[600px]">
<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>