amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix revisi 12

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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": {

10
src/components/beranda/Banner.jsx
View File

@ -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

4
src/components/beranda/Footer.jsx
View File

@ -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>

2
src/components/beranda/Hero.jsx
View File

@ -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>

2
src/components/beranda/Kenapa.jsx
View File

@ -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">

2
src/components/beranda/Mendukung.jsx
View File

@ -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">

45
src/components/contact/CustomerService.jsx
View File

@ -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>
); );
}; };

215
src/components/contact/FormSection.jsx
View File

@ -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;

11
src/components/solusi/HeadCorporate/HeadCorporate.jsx
View File

@ -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>

11
src/components/solusi/HeadPersonal/HeadPersonal.jsx
View File

@ -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>

9
src/components/solusi/HeadStartup/HeadStartup.jsx
View File

@ -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>

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

@ -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>

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

@ -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>

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"; 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>