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

add produk

Browse Source
This commit is contained in:
Yogamnan
2025-02-14 16:40:23 +07:00
parent 8cb7eeadc1
commit 3148ff7a2e
24 changed files with 201 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,17 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
const FAQ = () => {
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);
@@ -111,7 +122,7 @@ const FAQ = () => {
];
return (
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
{/* Judul halaman FAQ */}
<div className="mt-[111px]">
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">

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

@@ -1,11 +1,29 @@
import { img10 } from "./asset";
import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
import useRecaptcha from './Recaptcha/useRecaptcha';
import { useLocation } from "react-router-dom";
import { useEffect } from "react";
const ContactForm = () => {
const { capchaToken, handleRecaptcha } = useRecaptcha();
const location = useLocation();
useEffect(() => {
if (location.hash) {
const element = document.querySelector(location.hash);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
}
}, [location]);
return (
<div
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
id="form"
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})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
@@ -14,38 +32,24 @@ const ContactForm = () => {
<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">
{/* Bagian Kiri */}
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
{/* Judul utama */}
<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>
{/* Deskripsi tambahan */}
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 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>
</div>
{/* Bagian Form */}
<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]"
>
{/* Judul form */}
<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]">
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
Hubungi Tim Terbaik Kami
</h3>
{/* Deskripsi form */}
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
Silakan isi data diri Anda pada formulir di bawah ini
</p>
{/* Formulir input */}
<form className="flex flex-col gap-4 px-2">
{/* Input Nama */}
<div>
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
<input
@@ -55,8 +59,6 @@ const ContactForm = () => {
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
</div>
{/* Input Nomor Telepon */}
<div>
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
<input
@@ -70,8 +72,6 @@ const ContactForm = () => {
}}
/>
</div>
{/* Input Email */}
<div>
<label className="text-[#6B5CEA]">Email*</label>
<input
@@ -81,20 +81,14 @@ const ContactForm = () => {
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
</div>
{/* Input Nama Organisasi */}
<div>
<label className="text-[#6B5CEA]">
Nama Organisasi/Perusahaan
</label>
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
<input
type="text"
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"
/>
</div>
{/* Dropdown Pilih Kebutuhan */}
<div className="relative">
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
<select
@@ -106,7 +100,6 @@ const ContactForm = () => {
<option value="pelatihan">Pelatihan</option>
<option value="pengembangan">Pengembangan</option>
</select>
{/* Tanda panah kustom */}
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
<svg
className="w-6 text-[#5B59E8]"
@@ -125,20 +118,18 @@ const ContactForm = () => {
</div>
</div>
{/* Checkbox Verifikasi */}
{/* ReCAPTCHA */}
<div className="flex items-center gap-2">
<input
type="checkbox"
required
className="focus:ring-2 focus:ring-indigo-500"
<ReCAPTCHA
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
/>
<span className="text-[#212121]">Saya bukan robot</span>
</div>
{/* Tombol Kirim */}
<button
type="submit"
className="bg-indigo-500 hover:bg-indigo-600 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
>
Kirim Pesan
</button>

23
src/components/contact/Recaptcha/useRecaptcha.js Normal file
View File

@@ -0,0 +1,23 @@
import { useState, useRef } from "react";
const useRecaptcha = () => {
const [capchaToken, setCapchaToken] = useState(null); // Menyimpan token reCAPTCHA
const recaptchaRef = useRef(); // Menggunakan ref untuk reCAPTCHA jika perlu manipulasi lebih lanjut
// Fungsi untuk menangani perubahan token setelah reCAPTCHA berhasil
const handleRecaptcha = (token) => {
if (token) {
setCapchaToken(token); // Set token jika berhasil
} else {
setCapchaToken(null); // Reset token jika tidak ada token
}
};
return {
capchaToken, // Mengembalikan token
recaptchaRef, // Referensi reCAPTCHA
handleRecaptcha, // Fungsi untuk menangani perubahan token
};
};
export default useRecaptcha;