update 50%
This commit is contained in:
Carls2320
parent
7d21ab9c94
commit
17440450fd
|
|
@ -15,8 +15,6 @@
|
|||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -8,11 +8,12 @@
|
|||
"name": "rekan-ai-tailwind",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"framer-motion": "^12.4.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-recaptcha": "^2.3.10",
|
||||
"react-router-dom": "^7.1.3"
|
||||
"react-intersection-observer": "^9.15.1",
|
||||
"react-router-dom": "^7.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
@ -2864,6 +2865,33 @@
|
|||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.4.3",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.3.tgz",
|
||||
"integrity": "sha512-rsMeO7w3dKyNG09o3cGwSH49iHU+VgDmfSSfsX+wfkO3zDA6WWkh4sUsMXd155YROjZP+7FTIhDrBYfgZeHjKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.0.0",
|
||||
"motion-utils": "^12.0.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -3931,6 +3959,21 @@
|
|||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
|
||||
"integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
|
||||
"integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
|
@ -4532,13 +4575,10 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
|
||||
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -4557,16 +4597,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
|
||||
"integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
"scheduler": "^0.25.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1"
|
||||
"react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-google-recaptcha": {
|
||||
|
|
@ -4582,18 +4621,27 @@
|
|||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-intersection-observer": {
|
||||
"version": "9.15.1",
|
||||
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
|
||||
"integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-recaptcha": {
|
||||
"version": "2.3.10",
|
||||
"resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz",
|
||||
"integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g==",
|
||||
"license": "BSD"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.2",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||
|
|
@ -4605,9 +4653,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
|
||||
"integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
|
||||
"version": "7.1.5",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
|
||||
"integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
|
|
@ -4629,12 +4677,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
|
||||
"integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
|
||||
"version": "7.1.5",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz",
|
||||
"integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.1.3"
|
||||
"react-router": "7.1.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
|
|
@ -4869,13 +4917,10 @@
|
|||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
|
||||
"integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
|
|
@ -5430,6 +5475,12 @@
|
|||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/turbo-stream": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"framer-motion": "^12.4.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-recaptcha": "^2.3.10",
|
||||
"react-router-dom": "^7.1.3"
|
||||
"react-intersection-observer": "^9.15.1",
|
||||
"react-router-dom": "^7.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Contact from "./pages/Contact"
|
||||
import Home from "./pages/Home"
|
||||
import FormSection from "./components/contact/FormSection"
|
||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||
import SolusiStartup from "./pages/SolusiStartup"
|
||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||
|
|
@ -11,6 +12,7 @@ function App() {
|
|||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/Contact' element={<Contact/>}/>
|
||||
<Route path='/FormSection' element={<FormSection/>}/>
|
||||
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -2,7 +2,11 @@ import Logo1 from './image/logo.png'
|
|||
import search from './image/search.png';
|
||||
import IconPersonal from './image/Frame 18.png';
|
||||
import IconStartup from './image/Frame 18 (1).png';
|
||||
import IconCorporate from './image/Frame 18 (2).png'
|
||||
import IconCorporate from './image/Frame 18 (2).png';
|
||||
import ProdukHr from './image/Frame 18 (3).png';
|
||||
import ProdukDoku from './image/Frame 18 (4).png';
|
||||
import ProdukLlm from './image/Frame 18 (5).png';
|
||||
import ProdukVeri from './image/Frame 18 (6).png';
|
||||
import row from './image/arrow.png';
|
||||
import row2 from './image/vector.png';
|
||||
import homeLogo from './image/Component 1.png';
|
||||
|
|
@ -80,5 +84,5 @@ export{
|
|||
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
||||
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
||||
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
||||
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
|
||||
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate,ProdukDoku,ProdukHr,ProdukVeri,ProdukLlm
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
function Banner() {
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div
|
||||
className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
className="relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||
backgroundSize: "cover",
|
||||
|
|
@ -41,9 +42,13 @@ function Banner() {
|
|||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||
<Link to={"/Contact#form"}>
|
||||
<button
|
||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,78 +1,129 @@
|
|||
import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
|
||||
import { useNavigate, Link } from "react-router-dom"
|
||||
|
||||
import {
|
||||
nvidia,
|
||||
kmn,
|
||||
kominfo,
|
||||
ojk,
|
||||
facebook,
|
||||
x,
|
||||
instagram,
|
||||
component11,
|
||||
} from "../contact/asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
|
||||
|
||||
function Footer() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
|
||||
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||
{/* Kontainer utama footer */}
|
||||
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
||||
{/* Kolom 1: Logo perusahaan */}
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<img
|
||||
src={frame} // Gambar logo perusahaan
|
||||
src={component11} // Gambar logo perusahaan
|
||||
alt="Logo"
|
||||
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||
<div className="w-full sm:w-auto mb-5 sm:mb-0 sm:pl-0">
|
||||
<div className="flex mb-5">
|
||||
<p>
|
||||
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||
<br />
|
||||
<span className="text-[#5B59E8] italic font-bold">
|
||||
<span className="text-[#5B59E8] italic">
|
||||
Reimagine Your Business with AI.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-10 text-[18px]">
|
||||
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||
Banten 15413
|
||||
</p>
|
||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||
<div className="flex space-x-5">
|
||||
|
||||
<div className="flex space-x-3">
|
||||
{/* Tautan ke media sosial */}
|
||||
<a href="#">
|
||||
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||
<img src={x} alt="Twitter" className="w-5 h-5" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kolom 3: Produk perusahaan */}
|
||||
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
|
||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
||||
<li>Rekan Doku</li>
|
||||
<li>Rekan Veri</li>
|
||||
<li>Rekan HR</li>
|
||||
<li>Rekan LLM</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||
<div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
|
||||
<div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Personal</li> {/* Solusi untuk individu */}
|
||||
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left"
|
||||
>
|
||||
Personal
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Startup
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Corporate Business
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Kolom 5: Informasi kontak */}
|
||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/Contact");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="block w-full text-left">
|
||||
Kontak Kami
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/Contact#faq"}>
|
||||
<button
|
||||
className="block w-full text-left">
|
||||
F.A.Q
|
||||
</button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -80,21 +131,21 @@ function Footer() {
|
|||
<div className="mb-5 sm:mb-0 sm:pl-0">
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={nvdia} // Gambar logo partner NVIDIA
|
||||
src={nvidia}
|
||||
alt="NVIDIA Inception Premier Member"
|
||||
className="w-[221px] h-[83px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-5">
|
||||
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
|
||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
|
||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
|
||||
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
|
||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
|
||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bagian hak cipta */}
|
||||
<div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
|
||||
<div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
|
||||
<p>
|
||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||
</p>
|
||||
|
|
@ -103,5 +154,4 @@ function Footer() {
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,12 +1,34 @@
|
|||
import { useState } from "react"
|
||||
import { useState, useRef, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate()
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false)
|
||||
const [isProdukOpen, setIsProdukOpen] = useState(false)
|
||||
const navigate = useNavigate();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
||||
const [isProdukOpen, setIsProdukOpen] = useState(false);
|
||||
|
||||
// Referensi untuk mendeteksi klik di luar dropdown
|
||||
const solusiRef = useRef(null);
|
||||
const produkRef = useRef(null);
|
||||
|
||||
// Fungsi untuk menutup dropdown jika klik di luar elemen
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (solusiRef.current && !solusiRef.current.contains(event.target)) {
|
||||
setIsSolusiOpen(false);
|
||||
}
|
||||
if (produkRef.current && !produkRef.current.contains(event.target)) {
|
||||
setIsProdukOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Tambahkan event listener saat dropdown terbuka
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
|
|
@ -19,14 +41,17 @@ const Header = () => {
|
|||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
onClick={() => {
|
||||
navigate("/")
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
|
||||
{/* Produk Dropdown */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={produkRef}>
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
|
|
@ -47,23 +72,79 @@ const Header = () => {
|
|||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#produk1" className="text-[#212121]">
|
||||
Produk 1
|
||||
</a>
|
||||
</li>
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#produk2" className="text-[#212121]">
|
||||
Produk 2
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-2">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* DOKU */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen <br /> digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* LLM */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis <br /> data</p>
|
||||
</div>
|
||||
</button>
|
||||
{/* VERI */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara <br /> akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Solusi Dropdown - Desktop */}
|
||||
<div className="relative">
|
||||
<div className="relative" ref={solusiRef}>
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
|
|
@ -85,16 +166,19 @@ const Header = () => {
|
|||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||
<div className="bg-customRed rounded-xl p-8">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Personal</h3>
|
||||
<h3 className="font-medium text-base py-1">Personal</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Solusi efisien <br /> kebutuhan personal
|
||||
</p>
|
||||
|
|
@ -103,12 +187,15 @@ const Header = () => {
|
|||
|
||||
{/* Startup */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Startup</h3>
|
||||
<h3 className="font-medium text-base py-1">Startup</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Dukungan penuh <br /> untuk bisnis Startup
|
||||
</p>
|
||||
|
|
@ -117,12 +204,15 @@ const Header = () => {
|
|||
|
||||
{/* Corporate */}
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Corporate Business</h3>
|
||||
<h3 className="font-medium text-base py-1">Corporate Business</h3>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -133,7 +223,10 @@ const Header = () => {
|
|||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/Contact")}
|
||||
onClick={() => {
|
||||
navigate("/Contact");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Hubungi Kami
|
||||
|
|
@ -194,12 +287,53 @@ const Header = () => {
|
|||
{isProdukOpen && (
|
||||
<div className="bg-[#DC0168] px-5 py-4">
|
||||
<div className="space-y-3">
|
||||
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
||||
Produk 1
|
||||
</a>
|
||||
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
||||
Produk 2
|
||||
</a>
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { homeLogo, waIcon, homeImg } from '../../assets';
|
||||
import { useNavigate, Link } from "react-router-dom"
|
||||
|
||||
function Hero() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="w-full overflow-hidden" id="Home">
|
||||
<div className="container mx-auto px-4 lg:px-12">
|
||||
|
|
@ -28,9 +30,13 @@ function Hero() {
|
|||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
<Link to={"/Contact#form"}>
|
||||
<button
|
||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
|
||||
import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets'
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
function Kenapa() {
|
||||
return (
|
||||
|
|
@ -52,9 +53,12 @@ function Kenapa() {
|
|||
<img src={waIcon} 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">
|
||||
<Link to={"/Contact#form"}>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import React from "react";
|
||||
import { waIcon } from "../../assets";
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
|
||||
function MasaDepan() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -28,10 +31,13 @@ function MasaDepan() {
|
|||
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[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 font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
<Link to={"/Contact#form"}>
|
||||
<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 font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { waButton } from "../../assets";
|
|||
|
||||
const WhatsAppButton = () => {
|
||||
return (
|
||||
<div className="fixed bottom-2 right-2 md:right-16 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]">
|
||||
<div className="fixed bottom-2 right-2 md:right-5 flex justify-center items-center w-16 h-16 md:w-16 md:h-16 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||
<img
|
||||
className="w-10 h-10 md:w-auto md:h-auto"
|
||||
src={waButton}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,71 @@
|
|||
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const BottomCTA = () => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollY = window.scrollY;
|
||||
const triggerHeight = window.innerHeight / 1.5;
|
||||
setIsVisible(scrollY > triggerHeight);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
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">
|
||||
{/* Animasi teks turun dari atas saat di-scroll */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -50 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -50 }}
|
||||
transition={{ duration: 2.5, ease: "easeOut" }}
|
||||
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>
|
||||
</motion.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>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -30 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
|
||||
transition={{ duration: 2, ease: "easeOut" }}
|
||||
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!
|
||||
</motion.p>
|
||||
|
||||
{/* Bagian tombol CTA */}
|
||||
{/* Animasi tombol keluar dari kanan dan kiri saat di-scroll */}
|
||||
<div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm: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] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<motion.button
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
||||
transition={{ duration: 2.5, ease: "easeOut" }}
|
||||
className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
|
||||
>
|
||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[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 font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
</motion.button>
|
||||
<motion.button
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
||||
transition={{ duration: 2.5, ease: "easeOut" }}
|
||||
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 font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
|
||||
>
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,33 @@
|
|||
import { email, phone, customer } from "./asset";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
const CustomerService = () => {
|
||||
const { ref: leftRef, inView: leftInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||
const { ref: rightRef, inView: rightInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||
|
||||
const fadeInLeft = {
|
||||
hidden: { opacity: 0, x: -100 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
const fadeInRight = {
|
||||
hidden: { opacity: 0, x: 100 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
|
||||
<motion.div
|
||||
ref={leftRef}
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10"
|
||||
initial="hidden"
|
||||
animate={leftInView ? "visible" : "hidden"}
|
||||
variants={fadeInLeft}
|
||||
key="left-content"
|
||||
>
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
Kami Siap Membantu Bisnis Anda
|
||||
|
|
@ -50,16 +73,23 @@ const CustomerService = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* RIGHT SECTION - Gambar */}
|
||||
<div className=" flex justify-center md:justify-end items-center pr-10">
|
||||
<motion.div
|
||||
ref={rightRef}
|
||||
className="flex justify-center md:justify-end items-center pr-10"
|
||||
initial="hidden"
|
||||
animate={rightInView ? "visible" : "hidden"}
|
||||
variants={fadeInRight}
|
||||
key="right-content"
|
||||
>
|
||||
<img
|
||||
src={customer}
|
||||
alt="Customer Service"
|
||||
className="w-full h-auto md:w-auto md:h-auto"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,118 +1,37 @@
|
|||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
const FAQ = () => {
|
||||
// State untuk menyimpan indeks pertanyaan yang sedang dibuka
|
||||
// Jika tidak ada pertanyaan yang terbuka, nilai adalah null
|
||||
const location = useLocation();
|
||||
const [openQuestion, setOpenQuestion] = useState(null);
|
||||
|
||||
// Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
|
||||
// Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
|
||||
useEffect(() => {
|
||||
if (location.hash) {
|
||||
const element = document.querySelector(location.hash);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
}, [location]);
|
||||
|
||||
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>
|
||||
),
|
||||
},
|
||||
{ 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>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>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="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center" id="faq">
|
||||
<div className="mt-[111px]">
|
||||
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
|
||||
Frequently Asked Questions
|
||||
|
|
@ -122,33 +41,37 @@ const FAQ = () => {
|
|||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Bagian FAQ */}
|
||||
<div className="space-y-[22px] mb-[110px] mt-[60px]">
|
||||
{faqData.map((item, index) => (
|
||||
{faqData.map((item, index) => {
|
||||
const { ref, inView } = useInView({ threshold: 0.1 });
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
|
||||
ref={ref}
|
||||
className={`text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden transition-opacity duration-700 transform ${
|
||||
inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
|
||||
}`}
|
||||
style={{ transitionDelay: `${index * 100}ms` }}
|
||||
>
|
||||
{/* 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
|
||||
onClick={() => toggleQuestion(index)}
|
||||
>
|
||||
<span className="font-[550]">{item.question}</span>
|
||||
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
|
||||
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -35,13 +35,7 @@ function Footer() {
|
|||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-[39px] text-[18px] w-full sm:w-auto">
|
||||
<span className="block md:inline">Jl. Anggrek No.6, Sawah Lama, Kec.</span>
|
||||
<br className="hidden md:block" />
|
||||
<span className="block md:inline">Ciputat, Kota Tangerang Selatan, Banten</span>
|
||||
<br className="hidden md:block" />
|
||||
<span className="block md:inline">15413</span>
|
||||
</p>
|
||||
|
||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||
<div className="flex space-x-3">
|
||||
{/* Tautan ke media sosial */}
|
||||
|
|
@ -73,7 +67,7 @@ function Footer() {
|
|||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||
<ul className="space-y-4 text-[18px]">
|
||||
<li>Personal</li>
|
||||
<li>UMKM</li>
|
||||
<li>Startup</li>
|
||||
<li>Corporate Business</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,31 @@
|
|||
import { useState } from "react";
|
||||
import { img10 } from "../asset"; // Pastikan img10 ada dan benar path-nya
|
||||
import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
|
||||
import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
|
||||
import useRecaptcha from './useRecaptcha';
|
||||
import useRecaptcha from './Recaptcha/useRecaptcha';
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { motion } from "framer-motion"; // Impor motion dari framer-motion
|
||||
|
||||
const ContactForm = () => {
|
||||
const { capchaToken, recaptchaRef, handleRecaptcha } = useRecaptcha();
|
||||
const { capchaToken, handleRecaptcha } = useRecaptcha();
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (location.hash) {
|
||||
const element = document.querySelector(location.hash);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
<div
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||
id="form"
|
||||
style={{
|
||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
||||
backgroundSize: "cover",
|
||||
|
|
@ -18,17 +35,29 @@ const ContactForm = () => {
|
|||
>
|
||||
<div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
|
||||
<motion.div
|
||||
initial={{ x: -100, opacity: 0 }}
|
||||
whileInView={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: false }}
|
||||
className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]"
|
||||
>
|
||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
||||
</h2>
|
||||
<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>
|
||||
</motion.div>
|
||||
|
||||
{/* Bagian Form */}
|
||||
<div className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]">
|
||||
<motion.div
|
||||
initial={{ y: 100, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: false }}
|
||||
className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]"
|
||||
>
|
||||
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||
Hubungi Tim Terbaik Kami
|
||||
</h3>
|
||||
|
|
@ -89,7 +118,7 @@ const ContactForm = () => {
|
|||
</select>
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-6 text-[#5B59E8]"
|
||||
className="w-8 mt-7 mr-1 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -106,12 +135,16 @@ const ContactForm = () => {
|
|||
</div>
|
||||
|
||||
{/* ReCAPTCHA */}
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<ReCAPTCHA
|
||||
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
||||
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
|
|
@ -121,9 +154,9 @@ const ContactForm = () => {
|
|||
Kirim Pesan
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -18,9 +18,8 @@ import telephone from './telephone.png';
|
|||
import wagreen from './whatsapp-color_svgrepo.com.png';
|
||||
import wabutton from './Whatsapp22.png';
|
||||
import x from './x.png';
|
||||
import arrowform from './Dribbble-Light-Preview.png';
|
||||
|
||||
|
||||
export{
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x,arrowform
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { component11, wagreen, hc } from "../asset";
|
||||
|
||||
export default function HeadCorporate() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
|
|
@ -44,9 +44,11 @@ export default function HeadCorporate() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to="/Contact#form">
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { component11, wagreen, start22 } from "../asset";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function HeadPersonal() {
|
||||
return (
|
||||
|
|
@ -46,9 +47,12 @@ export default function HeadPersonal() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to="/Contact#form">
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { component11, wagreen, hs } from "../asset";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
export default function HeadPersonal() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
|
|
@ -44,9 +44,11 @@ export default function HeadPersonal() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Link } from "react-router-dom"
|
||||
import { chek2, wagreen, start33, start44, start55 } from "../asset"
|
||||
|
||||
function Kenapa() {
|
||||
return (
|
||||
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<div className="container mx-auto 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-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||
|
|
@ -15,8 +15,8 @@ function Kenapa() {
|
|||
|
||||
{/* Text Section */}
|
||||
<div className="w-full md:w-3/5 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 Rekan AI untuk Corporate Business?</h2>
|
||||
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
||||
<h2 className="text-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
|
||||
<p className="mt-4 text-sm md:leading-8 md:text-lg">
|
||||
Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
||||
|
|
@ -41,9 +41,11 @@ function Kenapa() {
|
|||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Link } from "react-router-dom"
|
||||
import { chek2, wagreen, start44 } from "../asset"
|
||||
|
||||
function Kenapa() {
|
||||
return (
|
||||
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<div className="container mx-auto 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-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||
|
|
@ -15,8 +15,8 @@ function Kenapa() {
|
|||
|
||||
{/* Text Section */}
|
||||
<div className="w-full md:w-3/5 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">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
|
||||
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
||||
<h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
|
||||
<p className="mt-4 text-sm md:leading-8 md:text-xl">
|
||||
Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
||||
|
|
@ -43,9 +43,11 @@ function Kenapa() {
|
|||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { chek2, wagreen, start33 } from "../asset"
|
||||
|
||||
import { Link } from "react-router-dom"
|
||||
function Kenapa() {
|
||||
return (
|
||||
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||
<div className="container mx-auto 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-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||
|
|
@ -15,8 +15,8 @@ function Kenapa() {
|
|||
|
||||
{/* Text Section */}
|
||||
<div className="w-full md:w-3/5 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]">
|
||||
<h2 className="text-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
|
||||
<p className="mt-4 md:text-lg md:leading-8 text-sm">
|
||||
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
|
||||
|
|
@ -46,9 +46,11 @@ function Kenapa() {
|
|||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function BusinessSolution() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ export default function BusinessSolution() {
|
|||
// Detect mobile screen size
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
|
||||
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize(); // Initialize state on component mount
|
||||
handleResize(); // Inisialisasi state saat pertama kali mount
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||
|
|
@ -27,8 +27,8 @@ export default function BusinessSolution() {
|
|||
</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 ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
|
||||
<div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||
<div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
|
||||
{data.tabs.map((button) => (
|
||||
<button
|
||||
key={button.key}
|
||||
|
|
@ -45,9 +45,9 @@ export default function BusinessSolution() {
|
|||
|
||||
{/* 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">
|
||||
<div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
||||
{/* Image Section */}
|
||||
<div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
||||
<div className={`w-full sm:w-[300px] md:w-[500px] lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
||||
<img
|
||||
src={activeContent.image || "/placeholder.svg"}
|
||||
alt={activeContent.title}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function BusinessSolution() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { wagreen } from "../asset";
|
||||
|
||||
function Transformasi() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,9 +27,11 @@ function Transformasi() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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 font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import { wagreen } from "../asset";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
function MasaDepan() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -28,9 +28,11 @@ function MasaDepan() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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 font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { wagreen } from "../asset";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
function Transformasi() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -31,9 +31,11 @@ function Transformasi() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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 font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import { wagreen } from "../asset";
|
||||
|
||||
function Transformasi() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -31,9 +31,11 @@ function Transformasi() {
|
|||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<Link to={"/Contact#form"}>
|
||||
<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 font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import Header from "../components/beranda/Header"
|
||||
import CustomerService from "../components/contact/CustomerService"
|
||||
import FormSection from "../components/contact/Form/FormSection"
|
||||
import FormSection from "../components/contact/FormSection"
|
||||
import FAQSection from "../components/contact/FAQSection"
|
||||
import BottomCTA from "../components/contact/BottomCTA"
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import Header from "../components/beranda/Header"
|
||||
import Hero from "../components/beranda/Hero"
|
||||
import Solusi from "../components/beranda/Solusi"
|
||||
import Banner from "../components/beranda/Banner"
|
||||
import Kenapa from "../components/beranda/Kenapa"
|
||||
import Mitra from '../components/beranda/Mitra'
|
||||
import Mendukung from "../components/beranda/Mendukung"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import MasaDepan from "../components/beranda/MasaDepan"
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Header from "../components/beranda/Header";
|
||||
import Hero from "../components/beranda/Hero";
|
||||
import Solusi from "../components/beranda/Solusi";
|
||||
import Banner from "../components/beranda/Banner";
|
||||
import Kenapa from "../components/beranda/Kenapa";
|
||||
import Mitra from '../components/beranda/Mitra';
|
||||
import Mendukung from "../components/beranda/Mendukung";
|
||||
import Footer from "../components/beranda/Footer";
|
||||
import MasaDepan from "../components/beranda/MasaDepan";
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
|
|
@ -24,8 +24,8 @@ function Home() {
|
|||
<Footer />
|
||||
<WhatsAppButton />
|
||||
</>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorpo
|
|||
import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
|
||||
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPers
|
|||
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
||||
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Header from "../components/beranda/Header"
|
||||
import HeadStartup from '../components/solusi/HeadStartup/HeadStartup'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
import Footer from "../components/beranda/Footer"
|
||||
import CardStartup from "../components/solusi/CardStartup/CardStartup"
|
||||
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
|
||||
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
|
||||
|
|
|
|||
Loading…
Reference in New Issue