forked from amnannn/rekan_ai
fix revisi 12
This commit is contained in:
Yogamnan
parent
3148ff7a2e
commit
228c6396e3
65
package-lock.json
generated
65
package-lock.json
generated
@ -8,9 +8,11 @@
|
|||||||
"name": "rekan-ai-tailwind",
|
"name": "rekan-ai-tailwind",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"framer-motion": "^12.4.3",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
|
"react-intersection-observer": "^9.15.1",
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -2863,6 +2865,33 @@
|
|||||||
"url": "https://github.com/sponsors/rawify"
|
"url": "https://github.com/sponsors/rawify"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/framer-motion": {
|
||||||
|
"version": "12.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.3.tgz",
|
||||||
|
"integrity": "sha512-rsMeO7w3dKyNG09o3cGwSH49iHU+VgDmfSSfsX+wfkO3zDA6WWkh4sUsMXd155YROjZP+7FTIhDrBYfgZeHjKQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-dom": "^12.0.0",
|
||||||
|
"motion-utils": "^12.0.0",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/is-prop-valid": "*",
|
||||||
|
"react": "^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/is-prop-valid": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
@ -3930,6 +3959,21 @@
|
|||||||
"node": ">=16 || 14 >=14.17"
|
"node": ">=16 || 14 >=14.17"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/motion-dom": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-utils": "^12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/motion-utils": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
@ -4581,6 +4625,21 @@
|
|||||||
"react": ">=16.4.1"
|
"react": ">=16.4.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-intersection-observer": {
|
||||||
|
"version": "9.15.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
|
||||||
|
"integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
@ -5423,6 +5482,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
},
|
},
|
||||||
|
"node_modules/tslib": {
|
||||||
|
"version": "2.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
|
"license": "0BSD"
|
||||||
|
},
|
||||||
"node_modules/turbo-stream": {
|
"node_modules/turbo-stream": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||||
|
|||||||
@ -10,9 +10,11 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"framer-motion": "^12.4.3",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
|
"react-intersection-observer": "^9.15.1",
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -5,7 +5,7 @@ function Banner() {
|
|||||||
return (
|
return (
|
||||||
<div className="relative w-full overflow-hidden">
|
<div className="relative w-full overflow-hidden">
|
||||||
<div
|
<div
|
||||||
className="relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
className="absolute top-0 left-0 w-full h-full"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
@ -13,7 +13,9 @@ function Banner() {
|
|||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundBlendMode: "multiply",
|
backgroundBlendMode: "multiply",
|
||||||
}}
|
}}
|
||||||
>
|
></div>
|
||||||
|
|
||||||
|
<div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
|
||||||
{/* Gambar L1-L4 untuk mobile */}
|
{/* Gambar L1-L4 untuk mobile */}
|
||||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
||||||
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
@ -23,7 +25,7 @@ function Banner() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Teks dan tombol */}
|
{/* Teks dan tombol */}
|
||||||
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0 z-10">
|
<div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
|
||||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||||
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
||||||
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
||||||
@ -48,7 +50,6 @@ function Banner() {
|
|||||||
Coba Sekarang
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -113,4 +114,3 @@ function Banner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default Banner
|
export default Banner
|
||||||
|
|
||||||
|
|||||||
@ -27,7 +27,7 @@ function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||||
<div className="w-full sm:w-auto mb-5 sm:mb-0 sm:pl-0">
|
<div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
|
||||||
<div className="flex mb-5">
|
<div className="flex mb-5">
|
||||||
<p>
|
<p>
|
||||||
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||||
@ -145,7 +145,7 @@ function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian hak cipta */}
|
{/* Bagian hak cipta */}
|
||||||
<div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
|
<div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
|
||||||
<p>
|
<p>
|
||||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -32,7 +32,7 @@ function Hero() {
|
|||||||
</button>
|
</button>
|
||||||
<Link to={"/Contact#form"}>
|
<Link to={"/Contact#form"}>
|
||||||
<button
|
<button
|
||||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
Coba Sekarang
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { Link } from "react-router-dom"
|
|||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
<div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||||
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
{/* Decorative Circles */}
|
{/* Decorative Circles */}
|
||||||
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
||||||
|
|||||||
@ -9,7 +9,7 @@ function Mendukung() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
|
<div className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
|
||||||
{/* Left Content */}
|
{/* Left Content */}
|
||||||
<div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
|
<div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
|
||||||
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
|
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
|
||||||
|
|||||||
@ -1,13 +1,37 @@
|
|||||||
import { email, phone, customer } from "./asset";
|
import { email, phone, customer } from "./asset";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
const CustomerService = () => {
|
const CustomerService = () => {
|
||||||
|
const { ref: leftRef, inView: leftInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||||
|
const { ref: rightRef, inView: rightInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||||
|
|
||||||
|
const fadeInLeft = {
|
||||||
|
hidden: { opacity: 0, x: -100 },
|
||||||
|
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||||
|
};
|
||||||
|
|
||||||
|
const fadeInRight = {
|
||||||
|
hidden: { opacity: 0, x: 100 },
|
||||||
|
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
|
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
|
||||||
{/* LEFT SECTION - Informasi */}
|
{/* LEFT SECTION - Informasi */}
|
||||||
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
|
<motion.div
|
||||||
|
ref={leftRef}
|
||||||
|
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
|
||||||
|
initial="hidden"
|
||||||
|
animate={leftInView ? "visible" : "hidden"}
|
||||||
|
variants={fadeInLeft}
|
||||||
|
key="left-content"
|
||||||
|
>
|
||||||
|
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||||
Kami Siap Membantu Bisnis Anda
|
Kami Siap Membantu Bisnis Anda <br />
|
||||||
Lebih Maju!
|
Lebih Maju!
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
@ -50,16 +74,23 @@ const CustomerService = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
{/* RIGHT SECTION - Gambar */}
|
{/* RIGHT SECTION - Gambar */}
|
||||||
<div className=" flex justify-center md:justify-end items-center pr-10">
|
<motion.div
|
||||||
|
ref={rightRef}
|
||||||
|
className="flex justify-center md:justify-end items-center md:mr-[-70px]"
|
||||||
|
initial="hidden"
|
||||||
|
animate={rightInView ? "visible" : "hidden"}
|
||||||
|
variants={fadeInRight}
|
||||||
|
key="right-content"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
src={customer}
|
src={customer}
|
||||||
alt="Customer Service"
|
alt="Customer Service"
|
||||||
className="w-full h-auto md:w-auto md:h-auto"
|
className="w-full h-auto md:w-auto md:h-auto"
|
||||||
/>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
|
|
||||||
import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
|
import { img10 } from "./asset"
|
||||||
import useRecaptcha from './Recaptcha/useRecaptcha';
|
import ReCAPTCHA from "react-google-recaptcha"
|
||||||
import { useLocation } from "react-router-dom";
|
import useRecaptcha from "./Recaptcha/useRecaptcha"
|
||||||
import { useEffect } from "react";
|
import { useLocation } from "react-router-dom"
|
||||||
|
import { useEffect } from "react"
|
||||||
|
|
||||||
const ContactForm = () => {
|
const ContactForm = () => {
|
||||||
const { capchaToken, handleRecaptcha } = useRecaptcha();
|
const { capchaToken, handleRecaptcha } = useRecaptcha()
|
||||||
|
const location = useLocation()
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (location.hash) {
|
if (location.hash) {
|
||||||
const element = document.querySelector(location.hash);
|
const element = document.querySelector(location.hash)
|
||||||
if (element) {
|
if (element) {
|
||||||
element.scrollIntoView({ behavior: "smooth" });
|
element.scrollIntoView({ behavior: "smooth" })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [location]);
|
}, [location])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||||
id="form"
|
id="form"
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
||||||
@ -29,115 +29,108 @@ const ContactForm = () => {
|
|||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
|
<div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
|
||||||
{/* Bagian Kiri */}
|
{/* Left Section */}
|
||||||
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
|
<div className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6">
|
||||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
<h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
<p className="text-base md:text-[18px] font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
|
||||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
|
||||||
|
bisnis Anda bersama Rekan AI!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian Form */}
|
{/* Form Section */}
|
||||||
<div className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]">
|
<div className="w-full lg:w-7/12 xl:w-6/12">
|
||||||
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
<div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
|
||||||
Hubungi Tim Terbaik Kami
|
<h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||||
</h3>
|
Hubungi Tim Terbaik Kami
|
||||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
|
</h3>
|
||||||
Silakan isi data diri Anda pada formulir di bawah ini
|
<p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<form className="flex flex-col gap-4 px-2">
|
<form className="flex flex-col gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Masukkan nama Anda"
|
placeholder="Masukkan nama Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
placeholder="Masukkan nomor telepon Anda"
|
placeholder="Masukkan nomor telepon Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
pattern="[0-9]*"
|
pattern="[0-9]*"
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
e.target.value = e.target.value.replace(/[^0-9]/g, "");
|
e.target.value = e.target.value.replace(/[^0-9]/g, "")
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA]">Email*</label>
|
<label className="text-[#6B5CEA]">Email*</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Masukkan email Anda"
|
placeholder="Masukkan email Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||||
<select
|
<select
|
||||||
required
|
required
|
||||||
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
>
|
>
|
||||||
<option value="">Pilih kebutuhan Anda</option>
|
<option value="">Pilih kebutuhan Anda</option>
|
||||||
<option value="konsultasi">Konsultasi</option>
|
<option value="konsultasi">Konsultasi</option>
|
||||||
<option value="pelatihan">Pelatihan</option>
|
<option value="pelatihan">Pelatihan</option>
|
||||||
<option value="pengembangan">Pengembangan</option>
|
<option value="pengembangan">Pengembangan</option>
|
||||||
</select>
|
</select>
|
||||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||||
<svg
|
<svg
|
||||||
className="w-6 text-[#5B59E8]"
|
className="w-6 text-[#5B59E8]"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
>
|
>
|
||||||
<path
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||||
strokeLinecap="round"
|
</svg>
|
||||||
strokeLinejoin="round"
|
</div>
|
||||||
strokeWidth="2"
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ReCAPTCHA */}
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
|
||||||
<ReCAPTCHA
|
</div>
|
||||||
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
|
||||||
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
||||||
disabled={!capchaToken} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang
|
disabled={!capchaToken}
|
||||||
>
|
>
|
||||||
Kirim Pesan
|
Kirim Pesan
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
|
export default ContactForm
|
||||||
|
|
||||||
export default ContactForm;
|
|
||||||
|
|||||||
@ -44,11 +44,12 @@ export default function HeadCorporate() {
|
|||||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
<Link to="/Contact#form">
|
<Link to={"/Contact#form"}>
|
||||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
<button
|
||||||
Coba Sekarang
|
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
</button>
|
Coba Sekarang
|
||||||
</Link>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -47,11 +47,12 @@ export default function HeadPersonal() {
|
|||||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
<Link to="/Contact#form">
|
<Link to={"/Contact#form"}>
|
||||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
<button
|
||||||
Coba Sekarang
|
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
</button>
|
Coba Sekarang
|
||||||
</Link>
|
</button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -45,10 +45,11 @@ export default function HeadPersonal() {
|
|||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
<Link to={"/Contact#form"}>
|
<Link to={"/Contact#form"}>
|
||||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
<button
|
||||||
Coba Sekarang
|
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
</button>
|
Coba Sekarang
|
||||||
</Link>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,12 +1,25 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { data } from "./data";
|
import { data } from "./data";
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
export default function BusinessSolution() {
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
const [activeTab, setActiveTab] = useState("hr");
|
||||||
const activeContent = data.content[activeTab];
|
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 (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
@ -14,8 +27,8 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* 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="relative w-full max-w-[90vw] 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) => (
|
{data.tabs.map((button) => (
|
||||||
<button
|
<button
|
||||||
key={button.key}
|
key={button.key}
|
||||||
@ -32,9 +45,9 @@ export default function BusinessSolution() {
|
|||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{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 */}
|
{/* 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
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
@ -43,7 +56,7 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Content */}
|
{/* 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>
|
<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>
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,25 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { data } from "./data";
|
import { data } from "./data";
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
export default function BusinessSolution() {
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
const [activeTab, setActiveTab] = useState("hr");
|
||||||
const activeContent = data.content[activeTab];
|
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 (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
@ -14,8 +27,8 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* 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="relative w-full max-w-[90vw] 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) => (
|
{data.tabs.map((button) => (
|
||||||
<button
|
<button
|
||||||
key={button.key}
|
key={button.key}
|
||||||
@ -32,9 +45,9 @@ export default function BusinessSolution() {
|
|||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{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 */}
|
{/* 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
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
@ -43,7 +56,7 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Content */}
|
{/* 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>
|
<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>
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,25 @@
|
|||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { data } from "./data";
|
import { data } from "./data";
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
export default function BusinessSolution() {
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
const [activeTab, setActiveTab] = useState("hr");
|
||||||
const activeContent = data.content[activeTab];
|
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 (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
@ -14,8 +27,8 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* 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="relative w-full max-w-[90vw] 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) => (
|
{data.tabs.map((button) => (
|
||||||
<button
|
<button
|
||||||
key={button.key}
|
key={button.key}
|
||||||
@ -32,9 +45,9 @@ export default function BusinessSolution() {
|
|||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{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 */}
|
{/* 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
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
@ -43,7 +56,7 @@ export default function BusinessSolution() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Content */}
|
{/* 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>
|
<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>
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user