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
commit 7c28f2d0bf
16 changed files with 238 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
package-lock.json generated
View File

@ -9,11 +9,11 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"framer-motion": "^12.4.3", "framer-motion": "^12.4.3",
"react": "^19.0.0", "react": "^18.3.1",
"react-dom": "^19.0.0", "react-dom": "^18.3.1",
"react-google-recaptcha": "^3.1.0", "react-google-recaptcha": "^3.1.0",
"react-intersection-observer": "^9.15.1", "react-intersection-observer": "^9.15.1",
"react-router-dom": "^7.1.5" "react-router-dom": "^7.1.3"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.17.0", "@eslint/js": "^9.17.0",
@ -4636,6 +4636,62 @@
} }
} }
}, },
"node_modules/react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"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-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"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",

6
package.json
View File

@ -11,11 +11,11 @@
}, },
"dependencies": { "dependencies": {
"framer-motion": "^12.4.3", "framer-motion": "^12.4.3",
"react": "^19.0.0", "react": "^18.3.1",
"react-dom": "^19.0.0", "react-dom": "^18.3.1",
"react-google-recaptcha": "^3.1.0", "react-google-recaptcha": "^3.1.0",
"react-intersection-observer": "^9.15.1", "react-intersection-observer": "^9.15.1",
"react-router-dom": "^7.1.5" "react-router-dom": "^7.1.3"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.17.0", "@eslint/js": "^9.17.0",

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>

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

@ -30,13 +30,9 @@ function Hero() {
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<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] 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
</button>
</Link>
</div> </div>
</div> </div>
</div> </div>

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

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

@ -18,19 +18,20 @@ const CustomerService = () => {
}; };
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 */}
<motion.div <motion.div
ref={leftRef} ref={leftRef}
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10" className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
initial="hidden" initial="hidden"
animate={leftInView ? "visible" : "hidden"} animate={leftInView ? "visible" : "hidden"}
variants={fadeInLeft} variants={fadeInLeft}
key="left-content" 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>
@ -76,9 +77,9 @@ const CustomerService = () => {
</motion.div> </motion.div>
{/* RIGHT SECTION - Gambar */} {/* RIGHT SECTION - Gambar */}
<motion.div <motion.div
ref={rightRef} ref={rightRef}
className="flex justify-center md:justify-end items-center pr-10" className="flex justify-center md:justify-end items-center md:mr-[-70px]"
initial="hidden" initial="hidden"
animate={rightInView ? "visible" : "hidden"} animate={rightInView ? "visible" : "hidden"}
variants={fadeInRight} variants={fadeInRight}

15
src/components/contact/FAQSection.jsx
View File

@ -1,9 +1,19 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { useInView } from "react-intersection-observer";
const FAQ = () => { const FAQ = () => {
const location = useLocation(); const location = useLocation();
useEffect(() => {
if (location.hash) {
const element = document.querySelector(location.hash);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
}
}, [location]);
// State untuk menyimpan indeks pertanyaan yang sedang dibuka
// Jika tidak ada pertanyaan yang terbuka, nilai adalah null
const [openQuestion, setOpenQuestion] = useState(null); const [openQuestion, setOpenQuestion] = useState(null);
useEffect(() => { useEffect(() => {
@ -31,7 +41,8 @@ const FAQ = () => {
]; ];
return ( return (
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center" id="faq"> <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
{/* Judul halaman FAQ */}
<div className="mt-[111px]"> <div className="mt-[111px]">
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4"> <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
Frequently Asked Questions Frequently Asked Questions

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

@ -1,30 +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 { motion } from "framer-motion"; // Impor motion dari framer-motion 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 (
<motion.div <div
initial={{ opacity: 0 }} className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
animate={{ opacity: 1 }}
transition={{ duration: 0.8 }}
className="flex min-h-screen 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})`,
@ -33,131 +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 */}
<motion.div <div className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6">
initial={{ x: -100, opacity: 0 }} <h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
whileInView={{ x: 0, opacity: 1 }}
transition={{ duration: 0.8 }}
viewport={{ once: false }}
className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]"
>
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 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>
</motion.div> </motion.div>
{/* Bagian Form */} {/* Form Section */}
<motion.div <div className="w-full lg:w-7/12 xl:w-6/12">
initial={{ y: 100, opacity: 0 }} <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">
whileInView={{ y: 0, opacity: 1 }} <h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
transition={{ duration: 0.8 }} Hubungi Tim Terbaik Kami
viewport={{ once: false }} </h3>
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]" <p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
>
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
Hubungi Tim Terbaik Kami
</h3>
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
Silakan isi data diri Anda pada formulir di bawah ini
</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-8 mt-7 mr-1 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">
<motion.div <ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
initial={{ opacity: 0 }} </div>
animate={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
<ReCAPTCHA
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
/>
</motion.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>
</motion.div> </div>
</div>
</div> </div>
</motion.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>

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

@ -9,17 +9,17 @@ export default function BusinessSolution() {
// Detect mobile screen size // Detect mobile screen size
useEffect(() => { useEffect(() => {
const handleResize = () => { 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); 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 ( return (
<div className="w-[90vw] mx-auto p-4 overflow-hidden"> <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>
@ -27,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 ${isMobile ? '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}
@ -45,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 ${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 <img
src={activeContent.image || "/placeholder.svg"} src={activeContent.image || "/placeholder.svg"}
alt={activeContent.title} alt={activeContent.title}
@ -56,7 +56,7 @@ export default function BusinessSolution() {
</div> </div>
{/* Text Content */} {/* 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> <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>

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

@ -47,7 +47,7 @@ export default function BusinessSolution() {
{activeContent && ( {activeContent && (
<div className="max-w-[90vw] 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-[300px] md:w-[500px] lg:w-[618px] max-w-[90vw] 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}
@ -56,7 +56,7 @@ export default function BusinessSolution() {
</div> </div>
{/* Text Content */} {/* 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> <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>

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

@ -9,17 +9,17 @@ export default function BusinessSolution() {
// Detect mobile screen size // Detect mobile screen size
useEffect(() => { useEffect(() => {
const handleResize = () => { 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); 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 ( return (
<div className="w-[90vw] mx-auto p-4 overflow-hidden"> <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>
@ -27,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 ${isMobile ? '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}
@ -45,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 ${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 <img
src={activeContent.image || "/placeholder.svg"} src={activeContent.image || "/placeholder.svg"}
alt={activeContent.title} alt={activeContent.title}
@ -56,7 +56,7 @@ export default function BusinessSolution() {
</div> </div>
{/* Text Content */} {/* 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> <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>