diff --git a/index.html b/index.html index 9a4e869..0fd35b0 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,9 @@
+ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 797bb67..e414e2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-google-recaptcha": "^3.1.0", + "react-recaptcha": "^2.3.10", "react-router-dom": "^7.1.3" }, "devDependencies": { @@ -3182,6 +3184,15 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3996,7 +4007,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -4483,7 +4493,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -4534,6 +4543,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-async-script": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz", + "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==", + "license": "MIT", + "dependencies": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": ">=16.4.1" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4547,13 +4569,31 @@ "react": "^18.3.1" } }, + "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-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, + "node_modules/react-recaptcha": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz", + "integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g==", + "license": "BSD" + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", diff --git a/package.json b/package.json index f8e479e..1a9d1ad 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-google-recaptcha": "^3.1.0", + "react-recaptcha": "^2.3.10", "react-router-dom": "^7.1.3" }, "devDependencies": { diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/FormSection.jsx index 9222f38..b8b6b12 100644 --- a/src/components/contact/FormSection.jsx +++ b/src/components/contact/FormSection.jsx @@ -1,11 +1,28 @@ -import { img10 } from "./asset"; +import { useState } from "react"; +import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya +import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA) const ContactForm = () => { + // State untuk melacak status reCAPTCHA + const [isCaptchaVerified, setIsCaptchaVerified] = useState(false); + + // Callback yang dijalankan setelah reCAPTCHA dimuat + const callback = function () { + console.log("Done!!!!"); + }; + + // Callback verifikasi reCAPTCHA + const verifyCallback = function (response) { + if (response) { + setIsCaptchaVerified(true); // Jika reCAPTCHA berhasil, set state menjadi true + } + }; + return (
{
{/* Bagian Kiri */}
- {/* Judul utama */}

- Isi formulir di samping ini dan kami akan menghubungi Anda secepat - mungkin + Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin

- - {/* Deskripsi tambahan */}

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

{/* Bagian Form */} - -
- - - {/* Judul form */} +

Hubungi Tim Terbaik Kami

- {/* Deskripsi form */}

Silakan isi data diri Anda pada formulir di bawah ini

- {/* Formulir input */}
- {/* Input Nama */}
{ className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" />
- - {/* Input Nomor Telepon */}
{ }} />
- - {/* Input Email */}
{ className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" />
- - {/* Input Nama Organisasi */}
- +
- - {/* Dropdown Pilih Kebutuhan */}
- {/* Tanda panah kustom */}
{
- {/* Checkbox Verifikasi */} + {/* ReCAPTCHA */}
- - Saya bukan robot
- {/* Tombol Kirim */} diff --git a/src/components/contact/asset/Dribbble-Light-Preview.png b/src/components/contact/asset/Dribbble-Light-Preview.png new file mode 100644 index 0000000..53dae62 Binary files /dev/null and b/src/components/contact/asset/Dribbble-Light-Preview.png differ diff --git a/src/components/contact/asset/index.js b/src/components/contact/asset/index.js index 7439b71..38a7926 100644 --- a/src/components/contact/asset/index.js +++ b/src/components/contact/asset/index.js @@ -18,8 +18,9 @@ import telephone from './telephone.png'; import wagreen from './whatsapp-color_svgrepo.com.png'; import wabutton from './Whatsapp22.png'; import x from './x.png'; +import arrowform from './Dribbble-Light-Preview.png'; export{ - row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x + row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x,arrowform } \ No newline at end of file diff --git a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx index ecca628..e5568ef 100644 --- a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx +++ b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx @@ -1,9 +1,22 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { data } from "./data"; export default function BusinessSolution() { const [activeTab, setActiveTab] = useState("hr"); const activeContent = data.content[activeTab]; + const [isMobile, setIsMobile] = useState(false); + + // Detect mobile screen size + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px + }; + + window.addEventListener("resize", handleResize); + handleResize(); // Initialize state on component mount + + return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount + }, []); return (
@@ -15,7 +28,7 @@ export default function BusinessSolution() { {/* Navigation Buttons */}
-
+
{data.tabs.map((button) => (