revisinamafolder
This commit is contained in:
Carls2320
parent
b0c0bdedd1
commit
035eebf845
|
|
@ -8,6 +8,7 @@
|
|||
"name": "rekanaiv3",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
|
|
@ -1701,6 +1702,12 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.20",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
||||
|
|
@ -1755,6 +1762,17 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.9",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -1998,6 +2016,18 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||
|
|
@ -2172,6 +2202,15 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
|
|
@ -2805,6 +2844,26 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
|
|
@ -2832,6 +2891,20 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fraction.js": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||
|
|
@ -3881,6 +3954,27 @@
|
|||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -4475,6 +4569,12 @@
|
|||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
|
|
|
|||
12
src/App.jsx
12
src/App.jsx
|
|
@ -1,8 +1,9 @@
|
|||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||
import CustomerService from "./componen/customer/CustomerService"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||
import FormSection from "./componen/form/FormSection"; // Mengimpor komponen FormSection yang berisi form
|
||||
import FAQ from "./componen/faq/FAQSection"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||
import CardContent from "./componen/CardContent/CardContent"; // Mengimpor komponen FormSection yang berisi form
|
||||
import SolusiBisnis from "./componen/solusibisnis/solusibisnis"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||
import BottomCTA from "./componen/bottom/BottomCTA"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||
import Transformasi from "./componen/Transformasi/Transformas"
|
||||
import Footer from "./componen/footer/Footer"; // Mengimpor komponen Footer untuk menampilkan bagian footer
|
||||
import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton"; // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
|
||||
|
||||
|
|
@ -11,9 +12,10 @@ function App() {
|
|||
<>
|
||||
<Header /> {/* Menampilkan komponen Header */}
|
||||
<CustomerService /> {/* Menampilkan komponen CustomerService */}
|
||||
<FormSection /> {/* Menampilkan komponen FormSection */}
|
||||
<FAQ /> {/* Menampilkan komponen FAQ */}
|
||||
<BottomCTA /> {/* Menampilkan komponen BottomCTA */}
|
||||
<CardContent /> {/* Menampilkan komponen FormSection */}
|
||||
<BottomCTA /> {/* Menampilkan komponen FAQ */}
|
||||
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
|
||||
<Transformasi />
|
||||
<Footer /> {/* Menampilkan komponen Footer */}
|
||||
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import { card1, card2, card3 } from "../asset";
|
||||
|
||||
export default function FeatureCards() {
|
||||
const features = [
|
||||
{
|
||||
icon: card1,
|
||||
title: "Kemudahan Pengelolaan Dokumen",
|
||||
description:
|
||||
"Dengan fitur pengelolaan dokumen yang mudah dan cepat, anda dapat dengan mudah mengelola semua dokumen anda saat dan berikutnya.",
|
||||
},
|
||||
{
|
||||
icon: card3,
|
||||
title: "Efisiensi dalam Sehari-Hari",
|
||||
description:
|
||||
"Dengan fitur pencarian yang canggih, anda dapat dengan cepat menemukan pengaturan upload, penghapus, dan semua kebutuhan praktis, sehingga anda bisa fokus pada hal yang penting.",
|
||||
},
|
||||
{
|
||||
icon: card2,
|
||||
title: "Teknologi yang Mudah Diakses",
|
||||
description:
|
||||
"Seluruh fitur di dalam aplikasi kami dirancang dengan teknologi yang aman, yang dapat memberikan manfaat keseluruhan kepada semua pengguna layanan kami.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 text-center">
|
||||
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
|
||||
Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="mb-4 relative w-16 h-16">
|
||||
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
||||
</div>
|
||||
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
||||
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { wagreen } from "../asset";
|
||||
|
||||
function MasaDepan() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
|
||||
{/* Tagline Section */}
|
||||
<div className="mb-5">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
||||
#Rekan AI
|
||||
</span>
|
||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
||||
Transformasi Digital Anda Dimulai di Sini
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
||||
Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
|
||||
<span className="block sm:hidden mt-2">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</span>
|
||||
<span className="hidden sm:block mt-2">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Button Section */}
|
||||
<div className="flex flex-col sm:flex-row gap-6 sm:gap-12 mt-8">
|
||||
<button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
|
||||
<img
|
||||
src={wagreen}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center bg-gradient-to-r from-pink-600 to-blue-600 text-white rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:opacity-90 transition-all duration-300 w-full sm:w-[276px] h-[70px]">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MasaDepan;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 453 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 771 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
|
|
@ -1,25 +1,65 @@
|
|||
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';
|
||||
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";
|
||||
import chek2 from "./Frame 811480.png";
|
||||
import start22 from "./Frame 811554.png";
|
||||
import maskcek from "./Mask group (1).png";
|
||||
import card1 from "./Play Now (33) 1.png";
|
||||
import card2 from "./Play Now (32) 1.png";
|
||||
import card3 from "./Play Now (30) 2.png";
|
||||
import rekan1 from "./Play Now (34) 1.png";
|
||||
import rekan2 from "./Play Now (36) 1.png";
|
||||
import rekan3 from "./Play Now (38) 1.png";
|
||||
import rekan4 from "./Play Now (39) 1.png";
|
||||
import start33 from "./Frame 811555.png";
|
||||
|
||||
|
||||
export{
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||
}
|
||||
export {
|
||||
row,
|
||||
component11,
|
||||
customer,
|
||||
email,
|
||||
facebook,
|
||||
frame,
|
||||
frame27,
|
||||
img10,
|
||||
instagram,
|
||||
kmn,
|
||||
kominfo,
|
||||
Logo1,
|
||||
nvidia,
|
||||
ojk,
|
||||
phone,
|
||||
search,
|
||||
telephone,
|
||||
wagreen,
|
||||
wabutton,
|
||||
x,
|
||||
chek2,
|
||||
start22,
|
||||
maskcek,
|
||||
card1,
|
||||
card2,
|
||||
card3,
|
||||
rekan1,
|
||||
rekan2,
|
||||
rekan3,
|
||||
rekan4,
|
||||
start33,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,44 +1,77 @@
|
|||
import { wagreen } from "../asset"; // Import gambar WhatsApp untuk ikon
|
||||
import { chek2, wagreen, start33 } from "../asset";
|
||||
|
||||
const BottomCTA = () => {
|
||||
function Kenapa() {
|
||||
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>
|
||||
<div className="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">
|
||||
{/* Image Section */}
|
||||
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||
<img
|
||||
src={start33}
|
||||
alt="Woman with Tablet"
|
||||
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{/* Text Section */}
|
||||
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121]">
|
||||
<h2 className="text-[32px] font-semibold">
|
||||
Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?
|
||||
</h2>
|
||||
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
||||
Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi
|
||||
individu yang ingin memanfaatkan kecerdasan buatan dalam kehidupan
|
||||
sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola
|
||||
data dengan aman, atau membuat keputusan yang lebih cerdas, Rekan AI
|
||||
adalah solusi tepat yang dirancang khusus untuk Anda.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
||||
<li className="flex items-center ">
|
||||
<img
|
||||
src={chek2}
|
||||
alt="Check"
|
||||
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||
/>
|
||||
Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa
|
||||
memerlukan keahlian teknis.
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<img
|
||||
src={chek2}
|
||||
alt="Check"
|
||||
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||
/>
|
||||
Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi
|
||||
Anda tetap terlindungi.
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<img
|
||||
src={chek2}
|
||||
alt="Check"
|
||||
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||
/>
|
||||
Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan
|
||||
dengan kebutuhan individu Anda.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
|
||||
<img
|
||||
src={wagreen}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default BottomCTA;
|
||||
export default Kenapa;
|
||||
|
|
|
|||
|
|
@ -1,79 +1,67 @@
|
|||
import { email, phone, customer } from "../asset";
|
||||
import { component11, wagreen, start22 } from "../asset";
|
||||
|
||||
const CustomerService = () => {
|
||||
return (
|
||||
<section className="main-container mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 mb-[114px] 2xl:px-20 2xl:gap-20">
|
||||
{/* Container utama */}
|
||||
function Hero() {
|
||||
return (
|
||||
<div
|
||||
className=" container px-4 sm:px-6 lg:px-8 mx-auto mt-[150px]"
|
||||
id="Home"
|
||||
>
|
||||
<div
|
||||
className="
|
||||
hero
|
||||
grid grid-cols-1 lg:grid-cols-2 gap-10
|
||||
mt-40 sm:mt-28 md:mt-32 lg:mt-36 xl:mt-24
|
||||
items-center"
|
||||
>
|
||||
{/* Left Section */}
|
||||
<div className="text-left px-4 sm:px-6 lg:px-0 mt-[-150px]">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="mb-5 mt-5 mx-auto lg:mx-0 w-3/4 sm:w-2/3 md:w-1/2 lg:w-auto"
|
||||
src={component11}
|
||||
alt="Home Logo"
|
||||
/>
|
||||
<span className="flex items-center justify-center ml-2 bg-pink-600 text-white w-full sm:w-auto px-6 py-2 rounded-[14px] text-lg sm:text-2xl text-center mt-2 sm:mt-0">
|
||||
# Solusi Personal
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-customBlack text-[32px] font-semibold py-4">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</h1>
|
||||
<p className="text-customBlack text-[20px]">
|
||||
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
|
||||
digital. Baik Anda seorang profesional, pelajar, atau individu yang
|
||||
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
|
||||
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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] 2xl:text-[28px] 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-[18px] 2xl:text-[18px]">
|
||||
Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
|
||||
<span className="hidden lg:inline">
|
||||
<br />
|
||||
</span>{" "}
|
||||
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] 2xl:text-base">
|
||||
Kirim pertanyaan Anda ke{" "}
|
||||
<strong className="text-[#5B59E8]">
|
||||
support@rekanai.com
|
||||
</strong>{" "}
|
||||
dan tim kami
|
||||
</p>
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
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">
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
Hubungi kami di{" "}
|
||||
<strong className="text-[#5B59E8]">
|
||||
(+62) 123-4567-890
|
||||
</strong>
|
||||
</p>
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
(Senin - Jumat, 08:00 - 17:00 WIB).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Section (Home Image) */}
|
||||
<div className="flex justify-center lg:justify-end px-4 sm:px-6 lg:px-0">
|
||||
<img
|
||||
src={start22}
|
||||
alt="Home Image"
|
||||
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col sm:flex-row justify-center sm:justify-start mt-[-185px] gap-4 sm:gap-6 lg:gap-8 items-center px-4 sm:px-6 lg:px-0">
|
||||
<button className="w-full sm:w-[230px] md:w-[250px] lg:w-[270px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img
|
||||
src={wagreen}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 h-[25px] sm:h-[30px] w-[25px] sm:w-[30px]"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full sm:w-[236px] md:w-[256px] lg:w-[276px] h-[60px] sm:h-[70px] btn2 flex items-center justify-center py-4 sm:py-3 px-6 sm:px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[16px] sm:text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomerService;
|
||||
export default Hero;
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
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 max-w-[90%] 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 sm mt-20 2xl:mt-28">
|
||||
{/* Judul utama */}
|
||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left 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="flex-1 bg-white text-[#212121] rounded-[25px] 2xl:mt-[100px] p-[40px] border-[8px] border-[#F086A4] w-full 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;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import { maskcek, rekan1, rekan2, rekan3, rekan4 } from "../asset";
|
||||
|
||||
|
||||
// data.json
|
||||
export const data = {
|
||||
title: "Solusi Bisnis",
|
||||
subtitle: "Pilihan Terbaik untuk Solusi Bisnis UMKM",
|
||||
tabs: [
|
||||
{ name: "Rekan HR", key: "hr" },
|
||||
{ name: "Rekan Doku", key: "doku" },
|
||||
{ name: "Rekan LLM", key: "llm" },
|
||||
{ name: "Rekan Veri", key: "veri" }
|
||||
],
|
||||
content: {
|
||||
hr: {
|
||||
title: "Rekan HR – Manajemen Kehidupan Kerja yang Lebih Teratur",
|
||||
description:
|
||||
"Rekan HR mempermudah pengelolaan aktivitas kerja pribadi, mendukung keseimbangan antara karier dan kehidupan sehari-hari.",
|
||||
image: rekan1,
|
||||
features: [
|
||||
{
|
||||
title: "Manajemen Aktivitas Pribadi",
|
||||
description:
|
||||
"Gunakan fitur pengingat tugas, jadwal, dan pengelolaan waktu untuk mendukung produktivitas Anda.",
|
||||
icon: maskcek
|
||||
},
|
||||
{
|
||||
title: "Dukungan untuk Pengembangan Karier",
|
||||
description:
|
||||
"Nikmati fitur analisis kinerja pribadi untuk membantu Anda mengidentifikasi area pengembangan dan mencapai tujuan karier Anda.",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
},
|
||||
doku: {
|
||||
title: "Rekan Doku – Dokumen Anda, Kendali Anda",
|
||||
description:
|
||||
"Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
|
||||
image: rekan2,
|
||||
features: [
|
||||
{
|
||||
title: "Autentikasi Dokumen Digital",
|
||||
description:
|
||||
"Berikan keabsahan pada dokumen penting seperti kontrak kerja, sertifikat, atau surat pribadi dengan e-Meterai dan tanda tangan digital yang diakui secara hukum.",
|
||||
icon: maskcek
|
||||
},
|
||||
{
|
||||
title: "Manajemen Dokumen Terpusat",
|
||||
description:
|
||||
"Simpan, atur, dan akses dokumen kapan saja dari satu platform yang aman, memastikan kemudahan dan kenyamanan Anda.",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
},
|
||||
llm: {
|
||||
title: "Rekan LLM – Kecerdasan Teknologi untuk Mendukung Kehidupan Anda",
|
||||
description:
|
||||
"Rekan LLM memberikan kemudahan bagi Anda untuk memahami data, mendapatkan wawasan, dan meningkatkan efisiensi sehari-hari.",
|
||||
image: rekan3,
|
||||
features: [
|
||||
{
|
||||
title: "Analisis Pribadi Berbasis AI",
|
||||
description:
|
||||
"Gunakan data untuk memahami pola pengeluaran, perencanaan keuangan, atau tren yang relevan dengan kebutuhan Anda.",
|
||||
icon: maskcek
|
||||
},
|
||||
{
|
||||
title: "Keputusan Lebih Tepat dengan Data",
|
||||
description:
|
||||
"Dapatkan rekomendasi berbasis AI untuk berbagai keputusan penting, dari belanja hingga perencanaan aktivitas.",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
},
|
||||
veri: {
|
||||
title: "Rekan Veri – Data yang Tepat untuk Keputusan yang Benar",
|
||||
description:
|
||||
"Lindungi diri Anda dari risiko dengan memastikan keakuratan data dalam berbagai kebutuhan pribadi. Rekan Veri adalah solusi cepat untuk memvalidasi informasi penting.",
|
||||
image: rekan4,
|
||||
features: [
|
||||
{
|
||||
title: "Verifikasi Data Cepat",
|
||||
description:
|
||||
"Gunakan sistem canggih untuk memverifikasi identitas pelanggan dengan cepat dan akurat.",
|
||||
icon: maskcek
|
||||
},
|
||||
{
|
||||
title: "Efisiensi dalam Verifikasi",
|
||||
description:
|
||||
"Hemat waktu dengan fitur verifikasi otomatis yang memberikan hasil instan dan akurat.",
|
||||
icon: maskcek
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { useState } from "react";
|
||||
import { data } from "./data";
|
||||
|
||||
export default function BusinessSolution() {
|
||||
const [activeTab, setActiveTab] = useState("hr");
|
||||
const activeContent = data.content[activeTab];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||
<p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* 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="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
|
||||
{data.tabs.map((button) => (
|
||||
<button
|
||||
key={button.key}
|
||||
className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
|
||||
activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
|
||||
} font-semibold transition-colors`}
|
||||
onClick={() => setActiveTab(button.key)}
|
||||
>
|
||||
{button.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
{activeContent && (
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
||||
{/* Image Section */}
|
||||
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={activeContent.image || "/placeholder.svg"}
|
||||
alt={activeContent.title}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div className="flex-1 max-w-full md:max-w-[600px]">
|
||||
<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>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-6">
|
||||
{activeContent.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-6">
|
||||
<div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
|
||||
<img
|
||||
src={feature.icon || "/checkmark.svg"}
|
||||
alt="Feature Icon"
|
||||
className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
|
||||
<p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,16 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000', // Ganti dengan URL backend NestJS
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue