add hubungi kami

src/components/contact/BottomCTA.jsx

@@ -0,0 +1,44 @@
+import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
+
+const BottomCTA = () => {
+  return (
+    <section className="w-full bg-white text-center py-10 mb-[113px]">
+      {/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
+      <div className="flex flex-wrap justify-center gap-2">
+        <h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
+          Masih punya pertanyaan seputar
+        </h3>
+
+        <h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121]  mb-3">
+          {/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
+          <span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
+            #Rekan AI
+          </span>
+          <span className="font-semibold  ml-1">?</span>
+        </h3>
+      </div>
+      
+      {/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
+      <p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
+        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
+      </p>
+
+      {/* Bagian tombol CTA */}
+      <div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
+        {/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
+        <button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          {/* Gambar WhatsApp di kiri tombol */}
+          <img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
+          Konsultasi Gratis
+        </button>
+
+        {/* Tombol Coba Sekarang dengan efek gradient */}
+        <button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+          Coba Sekarang
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default BottomCTA;

src/components/contact/CustomerService.jsx

@@ -0,0 +1,73 @@
+import { email, phone, customer } from "./asset";
+
+const CustomerService = () => {
+    return (
+        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 md:mb-[150px] 2xl:px-20 2xl:gap-20">
+            {/* Container utama */}
+
+            <div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
+                {/* Teks dan informasi */}
+                <div className="mb-5">
+                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
+                        Kami Siap Membantu Bisnis{" "}
+                        <span className="hidden lg:inline">
+                            <br />
+                        </span>{" "}
+                        Anda Lebih Maju!
+                    </h2>
+                </div>
+                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px]">
+                    Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
+                    profesional.
+                </p>
+                <div className="flex flex-col gap-6">
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={email}
+                            alt="Email Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left">
+                            <p className="text-sm text-[#212121] md:text-[18px]">
+                                Kirim pertanyaan Anda ke{" "}
+                                <strong className="text-[#5B59E8] md:text-[18px]">
+                                    support@rekanai.com
+                                </strong>{" "}
+                                dan tim kami akan segera merespons.
+                            </p>
+                            
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-6">
+                        <img
+                            src={phone}
+                            alt="Phone Icon"
+                            className="w-10 h-10 object-contain"
+                        />
+                        <div className="text-left text-[16px] md:text-[18px]">
+                            <p className=" text-[#212121]">
+                                Hubungi kami di{" "}
+                                <strong className="text-[#5B59E8]">
+                                    (+62) 123-4567-890
+                                </strong>
+                            </p>
+                            <p className=" text-[#212121]">
+                                (Senin - Jumat, 08:00 - 17:00 WIB).
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*RIGHT SECTION */}
+            <div className="flex-1 flex justify-center items-center">
+                <img
+                    src={customer}
+                    alt="Customer Service"
+                    className="w-full md:w-[400px] lg:w-[500px] 2xl:w-[600px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
+                />
+            </div>
+        </section>
+    );
+};
+
+export default CustomerService;

src/components/contact/FAQSection.jsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+
+const FAQ = () => {
+  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
+  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
+  const [openQuestion, setOpenQuestion] = useState(null);
+
+  // Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
+  // Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
+  const toggleQuestion = (index) => {
+    // Cek apakah pertanyaan yang sama diklik
+    // Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut
+    setOpenQuestion(openQuestion === index ? null : index);
+  };
+
+  // Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
+  const faqData = [
+    {
+      question: "Apa itu Rekan AI?",
+      answer: (
+        <p>
+          Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang
+          menyediakan solusi berbasis AI untuk meningkatkan efisiensi
+          operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga
+          perusahaan besar.
+        </p>
+      ),
+    },
+    {
+      question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
+      answer: (
+        <div>
+          <p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
+          <ul className="list-decimal list-inside space-y-1">
+            <li>
+              Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
+            </li>
+            <li>Rekan HR: Automasi dan optimalisasi proses HR.</li>
+            <li>
+              Rekan LLM: AI berbasis model bahasa besar untuk analisis dan
+              komunikasi.
+            </li>
+            <li>Rekan Veri: Verifikasi data yang cepat dan akurat.</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      question: "Bagaimana cara menghubungi tim Rekan AI?",
+      answer: (
+        <div>
+          <p className="mb-1">Anda dapat menghubungi kami melalui:</p>
+          <ul className="list-decimal list-inside space-y-1">
+            <li>Email: support@rekanai.com</li>
+            <li>Telepon: (+62) 123-4567-890</li>
+            <li>WhatsApp: (+62) 812-3456-7890</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      question: "Apakah solusi Rekan AI mudah diimplementasikan?",
+      answer: (
+        <p>
+          Ya, produk kami dirancang untuk integrasi yang mulus dengan sistem
+          bisnis Anda yang sudah ada. Kami juga menyediakan dukungan teknis
+          untuk memastikan implementasi berjalan lancar.
+        </p>
+      ),
+    },
+    {
+      question: "Apakah Rekan AI cocok untuk UMKM?",
+      answer: (
+        <p>
+          Tentu saja! Kami menawarkan solusi yang terjangkau, mudah digunakan,
+          dan dapat membantu UMKM meningkatkan efisiensi, mengurangi biaya
+          operasional, dan mempercepat pertumbuhan.
+        </p>
+      ),
+    },
+    {
+      question: "Bagaimana dengan keamanan data?",
+      answer: (
+        <p>
+          Keamanan adalah prioritas kami. Semua produk Rekan AI menggunakan
+          teknologi enkripsi canggih untuk melindungi data Anda dari ancaman
+          cyber.
+        </p>
+      ),
+    },
+    {
+      question: "Bagaimana saya memulai menggunakan produk Rekan AI?",
+      answer: (
+        <p>
+          Anda dapat memulai dengan menghubungi tim kami untuk demo produk atau
+          konsultasi gratis. Kami akan membantu Anda menemukan solusi yang
+          paling sesuai dengan kebutuhan bisnis Anda.
+        </p>
+      ),
+    },
+    {
+      question: "Apakah Rekan AI memiliki paket harga yang bisa dipilih?",
+      answer: (
+        <p>
+          Ya, kami dapat memberikan paket harga terbaik untuk solusi produk yang
+          Anda pilih. Informasi lebih lanjut silakan hubungi kami dan
+          konsultasikan kebutuhan Anda secara gratis.
+        </p>
+      ),
+    },
+  ];
+
+  return (
+    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
+      {/* Judul halaman FAQ */}
+      <div className="mt-[111px]">
+        <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
+          Frequently Asked Questions
+        </h1>
+        <h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
+          Pertanyaan Umum tentang Rekan AI
+        </h2>
+      </div>
+
+      {/* Bagian FAQ */}
+      <div className="space-y-[22px] mb-[110px] mt-[60px]">
+        {faqData.map((item, index) => (
+          <div
+            key={index}
+            className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
+          >
+            {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
+            <div
+              className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
+                // Jika pertanyaan ini dibuka, beri highlight
+                openQuestion === index ? "text-blue-500" : ""
+              }`}
+              onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
+            >
+              <span className="font-[550]">{item.question}</span>
+              <span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
+            </div>
+
+            {/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
+            {openQuestion === index && (
+              <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
+                {item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;

src/components/contact/Footer.jsx

@@ -0,0 +1,106 @@
+// Import gambar-gambar yang digunakan dalam komponen Footer
+import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "./asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
+
+function Footer() {
+  return (
+    <footer className="bg-customGrey py-10 text-[#212121]">
+      {/* Kontainer utama footer */}
+      <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
+        {/* Kolom 1: Logo perusahaan */}
+        <div className="mb-5 sm:mb-0">
+          <img
+            src={component11} // Gambar logo perusahaan
+            alt="Logo"
+            className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
+          />
+        </div>
+
+        {/* Kolom 2: Deskripsi singkat perusahaan */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <div className="flex mb-5">
+            <p>
+              <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
+              <br />
+              <span className="text-[#5B59E8] italic">
+                Reimagine Your Business with AI.
+              </span>
+            </p>
+          </div>
+          <p className="mb-[39px] text-[18px]">
+            Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
+            Banten 15413
+          </p>
+          <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
+          <div className="flex space-x-3">
+            {/* Tautan ke media sosial */}
+            <a href="#">
+              <img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
+            </a>
+            <a href="#">
+              <img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
+            </a>
+            <a href="#">
+              <img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
+            </a>
+          </div>
+        </div>
+
+        {/* Kolom 3: Produk perusahaan */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
+          <ul className="space-y-4 text-[18px]">
+            <li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
+            <li>Rekan Veri</li> {/* Produk: Verifikasi data */}
+            <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
+            <li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
+          </ul>
+        </div>
+
+        {/* Kolom 4: Solusi yang ditawarkan */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0 md:mx-[10runrpx] 2xl:mx-[-120px]">
+          <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
+          <ul className="space-y-4 text-[18px]">
+            <li>Personal</li> {/* Solusi untuk individu */}
+            <li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
+            <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
+          </ul>
+        </div>
+
+        {/* Kolom 5: Informasi kontak */}
+        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+          <h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
+          <ul className="space-y-4 text-[18px]">
+            <li>Email: support@rekanai.com</li> {/* Email dukungan */}
+            <li>Phone: +68452098</li> {/* Nomor telepon */}
+            <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
+          </ul>
+        </div>
+
+        {/* Kolom 6: Partner perusahaan */}
+        <div className="mb-5 sm:mb-0 sm:pl-0">
+          <div className="mb-4">
+            <img
+              src={nvidia} // Gambar logo partner NVIDIA
+              alt="NVIDIA Inception Premier Member"
+              className="w-[221px] h-[83px]"
+            />
+          </div>
+          <div className="flex gap-5">
+            <img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
+            <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
+            <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
+          </div>
+        </div>
+      </div>
+
+      {/* Bagian hak cipta */}
+      <div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
+        <p>
+          © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/components/contact/FormSection.jsx

@@ -0,0 +1,152 @@
+import { img10 } from "./asset";
+
+const ContactForm = () => {
+  return (
+    <div
+      className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
+      style={{
+        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",
+      }}
+    >
+      <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
+          </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!
+          </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 */}
+          <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
+                type="text"
+                placeholder="Masukkan nama Anda"
+                required
+                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
+                type="tel"
+                placeholder="Masukkan nomor telepon Anda"
+                required
+                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                pattern="[0-9]*"
+                onInput={(e) => {
+                  e.target.value = e.target.value.replace(/[^0-9]/g, "");
+                }}
+              />
+            </div>
+
+            {/* Input Email */}
+            <div>
+              <label className="text-[#6B5CEA]">Email*</label>
+              <input
+                type="email"
+                placeholder="Masukkan email Anda"
+                required
+                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>
+              <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
+                required
+                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="konsultasi">Konsultasi</option>
+                <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]"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            {/* Checkbox Verifikasi */}
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                required
+                className="focus:ring-2 focus:ring-indigo-500"
+              />
+              <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"
+            >
+              Kirim Pesan
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactForm;

src/components/contact/asset/index.js

@@ -0,0 +1,25 @@
+import row from './arrow.png';
+import component11 from './Component 11.png';
+import customer from './customer.png';
+import email from './email.png';
+import facebook from './facebook.png';
+import frame from './Frame.png';
+import frame27 from './Frame27.png';
+import img10 from './image 10.png';
+import instagram from './instagram.png';
+import kmn from './kementerian.png';
+import kominfo from './kominfo.png';
+import Logo1 from './logo.png';
+import nvidia from './nvidia.png';
+import ojk from './ojk.png';
+import phone from './phone.png';
+import search from './search.png';
+import telephone from './telephone.png';
+import wagreen from './whatsapp-color_svgrepo.com.png';
+import wabutton from './Whatsapp22.png';
+import x from './x.png';
+
+
+export{
+    row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
+}