Compare commits
No commits in common. "5a653d03dfe87e72777f7e429c45c8c80ea9c68b" and "b0c0bdedd187937c21376c8428c8858492646136" have entirely different histories.
5a653d03df
...
b0c0bdedd1
100
package-lock.json
generated
100
package-lock.json
generated
@ -8,7 +8,6 @@
|
|||||||
"name": "rekanaiv3",
|
"name": "rekanaiv3",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1"
|
||||||
},
|
},
|
||||||
@ -1702,12 +1701,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.20",
|
"version": "10.4.20",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
||||||
@ -1762,17 +1755,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/balanced-match": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||||
@ -2016,18 +1998,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/commander": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||||
@ -2202,15 +2172,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
@ -2844,26 +2805,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/for-each": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||||
@ -2891,20 +2832,6 @@
|
|||||||
"url": "https://github.com/sponsors/isaacs"
|
"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": {
|
"node_modules/fraction.js": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||||
@ -3954,27 +3881,6 @@
|
|||||||
"node": ">=8.6"
|
"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": {
|
"node_modules/minimatch": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||||
@ -4569,12 +4475,6 @@
|
|||||||
"react-is": "^16.13.1"
|
"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": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1"
|
||||||
},
|
},
|
||||||
|
|||||||
18
src/App.jsx
18
src/App.jsx
@ -1,9 +1,8 @@
|
|||||||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||||
import HeadPersonal from "./componen/HeadPersonal/HeadPersonal"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
import CustomerService from "./componen/customer/CustomerService"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||||
import CardContent from "./componen/CardContent/CardContent"; // Mengimpor komponen FormSection yang berisi form
|
import FormSection from "./componen/form/FormSection"; // Mengimpor komponen FormSection yang berisi form
|
||||||
import SolusiBisnis from "./componen/solusibisnis/solusibisnis"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
import FAQ from "./componen/faq/FAQSection"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||||
import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
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 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
|
import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton"; // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
|
||||||
|
|
||||||
@ -11,11 +10,10 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header /> {/* Menampilkan komponen Header */}
|
<Header /> {/* Menampilkan komponen Header */}
|
||||||
<HeadPersonal /> {/* Menampilkan komponen CustomerService */}
|
<CustomerService /> {/* Menampilkan komponen CustomerService */}
|
||||||
<CardContent /> {/* Menampilkan komponen FormSection */}
|
<FormSection /> {/* Menampilkan komponen FormSection */}
|
||||||
<MengapapPersonal /> {/* Menampilkan komponen FAQ */}
|
<FAQ /> {/* Menampilkan komponen FAQ */}
|
||||||
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
|
<BottomCTA /> {/* Menampilkan komponen BottomCTA */}
|
||||||
<Transformasi />
|
|
||||||
<Footer /> {/* Menampilkan komponen Footer */}
|
<Footer /> {/* Menampilkan komponen Footer */}
|
||||||
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -1,46 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import { component11, wagreen, start22 } from "../asset";
|
|
||||||
|
|
||||||
function Hero() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
|
|
||||||
id="Home"
|
|
||||||
>
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
|
||||||
{/* Left Section */}
|
|
||||||
<div className="text-left items-center">
|
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
|
|
||||||
<img
|
|
||||||
className="w-3/4 sm:w-auto max-h-20 object-contain"
|
|
||||||
src={component11 || "/placeholder.svg"}
|
|
||||||
alt="Home Logo"
|
|
||||||
width={200}
|
|
||||||
height={80}
|
|
||||||
/>
|
|
||||||
<span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
|
||||||
# Solusi Personal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</h1>
|
|
||||||
<p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
|
|
||||||
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>
|
|
||||||
|
|
||||||
{/* Right Section (Home Image) */}
|
|
||||||
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
|
|
||||||
<img
|
|
||||||
src={start22 || "/placeholder.svg"}
|
|
||||||
alt="Home Image"
|
|
||||||
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
|
||||||
width={807}
|
|
||||||
height={600}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
|
|
||||||
<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-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
|
||||||
<img
|
|
||||||
src={wagreen}
|
|
||||||
alt="WhatsApp Icon"
|
|
||||||
className="mr-2 h-[30px] w-[30px]"
|
|
||||||
/>
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<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-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
|
||||||
Coba Sekarang
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Hero;
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import { chek2, wagreen, start33 } from "../asset";
|
|
||||||
|
|
||||||
function Kenapa() {
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Kenapa;
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
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.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 453 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 572 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 528 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 402 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 771 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 459 KiB |
@ -1,65 +1,25 @@
|
|||||||
import row from "./arrow.png";
|
import row from './arrow.png';
|
||||||
import component11 from "./Component 11.png";
|
import component11 from './Component 11.png';
|
||||||
import customer from "./customer.png";
|
import customer from './customer.png';
|
||||||
import email from "./email.png";
|
import email from './email.png';
|
||||||
import facebook from "./facebook.png";
|
import facebook from './facebook.png';
|
||||||
import frame from "./Frame.png";
|
import frame from './Frame.png';
|
||||||
import frame27 from "./Frame27.png";
|
import frame27 from './Frame27.png';
|
||||||
import img10 from "./image 10.png";
|
import img10 from './image 10.png';
|
||||||
import instagram from "./instagram.png";
|
import instagram from './instagram.png';
|
||||||
import kmn from "./kementerian.png";
|
import kmn from './kementerian.png';
|
||||||
import kominfo from "./kominfo.png";
|
import kominfo from './kominfo.png';
|
||||||
import Logo1 from "./logo.png";
|
import Logo1 from './logo.png';
|
||||||
import nvidia from "./nvidia.png";
|
import nvidia from './nvidia.png';
|
||||||
import ojk from "./ojk.png";
|
import ojk from './ojk.png';
|
||||||
import phone from "./phone.png";
|
import phone from './phone.png';
|
||||||
import search from "./search.png";
|
import search from './search.png';
|
||||||
import telephone from "./telephone.png";
|
import telephone from './telephone.png';
|
||||||
import wagreen from "./whatsapp-color_svgrepo.com.png";
|
import wagreen from './whatsapp-color_svgrepo.com.png';
|
||||||
import wabutton from "./Whatsapp22.png";
|
import wabutton from './Whatsapp22.png';
|
||||||
import x from "./x.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,
|
export{
|
||||||
component11,
|
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||||
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,
|
|
||||||
};
|
|
||||||
44
src/componen/bottom/BottomCTA.jsx
Normal file
44
src/componen/bottom/BottomCTA.jsx
Normal file
@ -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;
|
||||||
79
src/componen/customer/CustomerService.jsx
Normal file
79
src/componen/customer/CustomerService.jsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { email, phone, customer } 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 */}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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;
|
||||||
157
src/componen/faq/FAQSection.jsx
Normal file
157
src/componen/faq/FAQSection.jsx
Normal file
@ -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;
|
||||||
147
src/componen/form/FormSection.jsx
Normal file
147
src/componen/form/FormSection.jsx
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
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;
|
||||||
@ -1,96 +0,0 @@
|
|||||||
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
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -2,7 +2,7 @@ import { wabutton } from '../asset';
|
|||||||
|
|
||||||
const WhatsAppButton = () => {
|
const WhatsAppButton = () => {
|
||||||
return (
|
return (
|
||||||
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center mb-10 items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||||
{/* Tombol WhatsApp */}
|
{/* Tombol WhatsApp */}
|
||||||
<img
|
<img
|
||||||
className="w-10 h-10 md:w-12 md:h-12" // Menentukan ukuran ikon WhatsApp
|
className="w-10 h-10 md:w-12 md:h-12" // Menentukan ukuran ikon WhatsApp
|
||||||
|
|||||||
@ -1,16 +1,7 @@
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react';
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
server: {
|
})
|
||||||
proxy: {
|
|
||||||
'/api': {
|
|
||||||
target: 'http://localhost:3000', // Ganti dengan URL backend NestJS
|
|
||||||
changeOrigin: true,
|
|
||||||
secure: false,
|
|
||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user