update 50%
This commit is contained in:
Carls2320
parent
7d21ab9c94
commit
17440450fd
|
|
@ -15,8 +15,6 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -8,11 +8,12 @@
|
||||||
"name": "rekan-ai-tailwind",
|
"name": "rekan-ai-tailwind",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"framer-motion": "^12.4.3",
|
||||||
"react-dom": "^18.3.1",
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
"react-recaptcha": "^2.3.10",
|
"react-intersection-observer": "^9.15.1",
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
|
|
@ -2864,6 +2865,33 @@
|
||||||
"url": "https://github.com/sponsors/rawify"
|
"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": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
|
|
@ -3931,6 +3959,21 @@
|
||||||
"node": ">=16 || 14 >=14.17"
|
"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": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|
@ -4532,13 +4575,10 @@
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "18.3.1",
|
"version": "19.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
|
||||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
|
||||||
"loose-envify": "^1.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
|
|
@ -4557,16 +4597,15 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "18.3.1",
|
"version": "19.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
|
||||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
"integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.1.0",
|
"scheduler": "^0.25.0"
|
||||||
"scheduler": "^0.23.2"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^18.3.1"
|
"react": "^19.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-google-recaptcha": {
|
"node_modules/react-google-recaptcha": {
|
||||||
|
|
@ -4582,18 +4621,27 @@
|
||||||
"react": ">=16.4.1"
|
"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": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/react-refresh": {
|
||||||
"version": "0.14.2",
|
"version": "0.14.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||||
|
|
@ -4605,9 +4653,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router": {
|
"node_modules/react-router": {
|
||||||
"version": "7.1.3",
|
"version": "7.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
|
||||||
"integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
|
"integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/cookie": "^0.6.0",
|
"@types/cookie": "^0.6.0",
|
||||||
|
|
@ -4629,12 +4677,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router-dom": {
|
"node_modules/react-router-dom": {
|
||||||
"version": "7.1.3",
|
"version": "7.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz",
|
||||||
"integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
|
"integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-router": "7.1.3"
|
"react-router": "7.1.5"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20.0.0"
|
"node": ">=20.0.0"
|
||||||
|
|
@ -4869,13 +4917,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/scheduler": {
|
"node_modules/scheduler": {
|
||||||
"version": "0.23.2",
|
"version": "0.25.0",
|
||||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
|
||||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
"integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"dependencies": {
|
|
||||||
"loose-envify": "^1.1.0"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"node_modules/semver": {
|
"node_modules/semver": {
|
||||||
"version": "6.3.1",
|
"version": "6.3.1",
|
||||||
|
|
@ -5430,6 +5475,12 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0"
|
"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": {
|
"node_modules/turbo-stream": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,12 @@
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"framer-motion": "^12.4.3",
|
||||||
"react-dom": "^18.3.1",
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
"react-recaptcha": "^2.3.10",
|
"react-intersection-observer": "^9.15.1",
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import Contact from "./pages/Contact"
|
import Contact from "./pages/Contact"
|
||||||
import Home from "./pages/Home"
|
import Home from "./pages/Home"
|
||||||
|
import FormSection from "./components/contact/FormSection"
|
||||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||||
import SolusiStartup from "./pages/SolusiStartup"
|
import SolusiStartup from "./pages/SolusiStartup"
|
||||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||||
|
|
@ -11,6 +12,7 @@ function App() {
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path='/' element={<Home/>}/>
|
<Route path='/' element={<Home/>}/>
|
||||||
<Route path='/Contact' element={<Contact/>}/>
|
<Route path='/Contact' element={<Contact/>}/>
|
||||||
|
<Route path='/FormSection' element={<FormSection/>}/>
|
||||||
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||||
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||||
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
<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 search from './image/search.png';
|
||||||
import IconPersonal from './image/Frame 18.png';
|
import IconPersonal from './image/Frame 18.png';
|
||||||
import IconStartup from './image/Frame 18 (1).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 row from './image/arrow.png';
|
||||||
import row2 from './image/vector.png';
|
import row2 from './image/vector.png';
|
||||||
import homeLogo from './image/Component 1.png';
|
import homeLogo from './image/Component 1.png';
|
||||||
|
|
@ -80,5 +84,5 @@ export{
|
||||||
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
||||||
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
||||||
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
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 { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
|
||||||
function Banner() {
|
function Banner() {
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full overflow-hidden">
|
<div className="relative w-full overflow-hidden">
|
||||||
<div
|
<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={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
|
|
@ -41,9 +42,13 @@ function Banner() {
|
||||||
/>
|
/>
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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() {
|
function Footer() {
|
||||||
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
|
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||||
{/* Kontainer utama footer */}
|
{/* 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">
|
<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 */}
|
{/* Kolom 1: Logo perusahaan */}
|
||||||
<div className="mb-5 sm:mb-0">
|
<div className="mb-5 sm:mb-0">
|
||||||
<img
|
<img
|
||||||
src={frame} // Gambar logo perusahaan
|
src={component11} // Gambar logo perusahaan
|
||||||
alt="Logo"
|
alt="Logo"
|
||||||
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
{/* 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">
|
<div className="flex mb-5">
|
||||||
<p>
|
<p>
|
||||||
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||||
<br />
|
<br />
|
||||||
<span className="text-[#5B59E8] italic font-bold">
|
<span className="text-[#5B59E8] italic">
|
||||||
Reimagine Your Business with AI.
|
Reimagine Your Business with AI.
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-10 text-[18px]">
|
|
||||||
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
<div className="flex space-x-3">
|
||||||
Banten 15413
|
|
||||||
</p>
|
|
||||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
|
||||||
<div className="flex space-x-5">
|
|
||||||
{/* Tautan ke media sosial */}
|
{/* Tautan ke media sosial */}
|
||||||
<a href="#">
|
<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>
|
||||||
<a href="#">
|
<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>
|
||||||
<a href="#">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 3: Produk perusahaan */}
|
{/* Kolom 3: Produk perusahaan */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
||||||
<ul className="space-y-4 text-[18px]">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
<li>Rekan Doku</li>
|
||||||
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
<li>Rekan Veri</li>
|
||||||
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
<li>Rekan HR</li>
|
||||||
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
<li>Rekan LLM</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||||
<div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
|
<div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
|
||||||
<h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||||
<ul className="space-y-4 text-[18px]">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Personal</li> {/* Solusi untuk individu */}
|
<li>
|
||||||
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
<button
|
||||||
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Kolom 5: Informasi kontak */}
|
{/* Kolom 5: Informasi kontak */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
||||||
<ul className="space-y-4 text-[18px]">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
<li>
|
||||||
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
<button
|
||||||
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -80,21 +131,21 @@ function Footer() {
|
||||||
<div className="mb-5 sm:mb-0 sm:pl-0">
|
<div className="mb-5 sm:mb-0 sm:pl-0">
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<img
|
<img
|
||||||
src={nvdia} // Gambar logo partner NVIDIA
|
src={nvidia}
|
||||||
alt="NVIDIA Inception Premier Member"
|
alt="NVIDIA Inception Premier Member"
|
||||||
className="w-[221px] h-[83px]"
|
className="w-[221px] h-[83px]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-5">
|
<div className="flex gap-5">
|
||||||
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
|
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
|
||||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
|
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
|
||||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
|
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian hak cipta */}
|
{/* 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>
|
<p>
|
||||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -103,5 +154,4 @@ function Footer() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default 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 { 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 Header = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false)
|
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
||||||
const [isProdukOpen, setIsProdukOpen] = 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 (
|
return (
|
||||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
<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 */}
|
{/* Desktop Navigation */}
|
||||||
<div className="hidden lg:flex items-center space-x-8">
|
<div className="hidden lg:flex items-center space-x-8">
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate("/")}
|
onClick={() => {
|
||||||
|
navigate("/")
|
||||||
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
|
}}
|
||||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||||
>
|
>
|
||||||
Beranda
|
Beranda
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Produk Dropdown */}
|
{/* Produk Dropdown */}
|
||||||
<div className="relative">
|
<div className="relative" ref={produkRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||||
|
|
@ -47,23 +72,79 @@ const Header = () => {
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isProdukOpen && (
|
{isProdukOpen && (
|
||||||
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
<div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||||
<a href="#produk1" className="text-[#212121]">
|
<div className="flex justify-center gap-8">
|
||||||
Produk 1
|
{/* HR */}
|
||||||
</a>
|
<button
|
||||||
</li>
|
onClick={() => {
|
||||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
navigate("/SolusiPersonal");
|
||||||
<a href="#produk2" className="text-[#212121]">
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
Produk 2
|
}}
|
||||||
</a>
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||||
</li>
|
>
|
||||||
</ul>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Solusi Dropdown - Desktop */}
|
{/* Solusi Dropdown - Desktop */}
|
||||||
<div className="relative">
|
<div className="relative" ref={solusiRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||||
|
|
@ -85,16 +166,19 @@ const Header = () => {
|
||||||
|
|
||||||
{isSolusiOpen && (
|
{isSolusiOpen && (
|
||||||
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
<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">
|
<div className="flex justify-center gap-8">
|
||||||
{/* Personal */}
|
{/* Personal */}
|
||||||
<button
|
<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"
|
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" />
|
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
<div className="text-left">
|
<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">
|
<p className="text-xs text-customBlack">
|
||||||
Solusi efisien <br /> kebutuhan personal
|
Solusi efisien <br /> kebutuhan personal
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -103,12 +187,15 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Startup */}
|
{/* Startup */}
|
||||||
<button
|
<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"
|
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" />
|
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
<div className="text-left">
|
<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">
|
<p className="text-xs text-customBlack">
|
||||||
Dukungan penuh <br /> untuk bisnis Startup
|
Dukungan penuh <br /> untuk bisnis Startup
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -117,12 +204,15 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Corporate */}
|
{/* Corporate */}
|
||||||
<button
|
<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"
|
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" />
|
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
<div className="text-left">
|
<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>
|
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -133,7 +223,10 @@ const Header = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate("/Contact")}
|
onClick={() => {
|
||||||
|
navigate("/Contact");
|
||||||
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
|
}}
|
||||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||||
>
|
>
|
||||||
Hubungi Kami
|
Hubungi Kami
|
||||||
|
|
@ -194,12 +287,53 @@ const Header = () => {
|
||||||
{isProdukOpen && (
|
{isProdukOpen && (
|
||||||
<div className="bg-[#DC0168] px-5 py-4">
|
<div className="bg-[#DC0168] px-5 py-4">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
<button
|
||||||
Produk 1
|
onClick={() => navigate("/SolusiPersonal")}
|
||||||
</a>
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||||
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
>
|
||||||
Produk 2
|
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
||||||
</a>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
import { homeLogo, waIcon, homeImg } from '../../assets';
|
import { homeLogo, waIcon, homeImg } from '../../assets';
|
||||||
|
import { useNavigate, Link } from "react-router-dom"
|
||||||
|
|
||||||
function Hero() {
|
function Hero() {
|
||||||
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
<div className="w-full overflow-hidden" id="Home">
|
<div className="w-full overflow-hidden" id="Home">
|
||||||
<div className="container mx-auto px-4 lg:px-12">
|
<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" />
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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() {
|
function Kenapa() {
|
||||||
return (
|
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]" />
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { waIcon } from "../../assets";
|
import { waIcon } from "../../assets";
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
|
||||||
|
|
||||||
function MasaDepan() {
|
function MasaDepan() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -24,14 +27,17 @@ function MasaDepan() {
|
||||||
</div>
|
</div>
|
||||||
{/* Button Section */}
|
{/* Button Section */}
|
||||||
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
<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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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">
|
||||||
</div>
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import { waButton } from "../../assets";
|
||||||
|
|
||||||
const WhatsAppButton = () => {
|
const WhatsAppButton = () => {
|
||||||
return (
|
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
|
<img
|
||||||
className="w-10 h-10 md:w-auto md:h-auto"
|
className="w-10 h-10 md:w-auto md:h-auto"
|
||||||
src={waButton}
|
src={waButton}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,71 @@
|
||||||
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const BottomCTA = () => {
|
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 (
|
return (
|
||||||
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
<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 */}
|
{/* Animasi teks turun dari atas saat di-scroll */}
|
||||||
<div className="flex flex-wrap justify-center gap-2">
|
<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]">
|
<h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
|
||||||
Masih punya pertanyaan seputar
|
Masih punya pertanyaan seputar
|
||||||
</h3>
|
</h3>
|
||||||
|
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
|
||||||
<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]">
|
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
||||||
#Rekan AI
|
#Rekan AI
|
||||||
</span>
|
</span>
|
||||||
<span className="font-semibold ml-1">?</span>
|
<span className="font-semibold ml-1">?</span>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
|
<motion.p
|
||||||
<p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
|
initial={{ opacity: 0, y: -30 }}
|
||||||
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
|
animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
|
||||||
</p>
|
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">
|
<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]" />
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</motion.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
|
||||||
|
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
|
Coba Sekarang
|
||||||
</button>
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,33 @@
|
||||||
import { email, phone, customer } from "./asset";
|
import { email, phone, customer } from "./asset";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
const CustomerService = () => {
|
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 (
|
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">
|
<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 */}
|
{/* 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">
|
<div className="mb-5">
|
||||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||||
Kami Siap Membantu Bisnis Anda
|
Kami Siap Membantu Bisnis Anda
|
||||||
|
|
@ -50,16 +73,23 @@ const CustomerService = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
{/* RIGHT SECTION - Gambar */}
|
{/* 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
|
<img
|
||||||
src={customer}
|
src={customer}
|
||||||
alt="Customer Service"
|
alt="Customer Service"
|
||||||
className="w-full h-auto md:w-auto md:h-auto"
|
className="w-full h-auto md:w-auto md:h-auto"
|
||||||
/>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
</section>
|
</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 = () => {
|
const FAQ = () => {
|
||||||
// State untuk menyimpan indeks pertanyaan yang sedang dibuka
|
const location = useLocation();
|
||||||
// Jika tidak ada pertanyaan yang terbuka, nilai adalah null
|
|
||||||
const [openQuestion, setOpenQuestion] = useState(null);
|
const [openQuestion, setOpenQuestion] = useState(null);
|
||||||
|
|
||||||
// Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
|
useEffect(() => {
|
||||||
// Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
|
if (location.hash) {
|
||||||
|
const element = document.querySelector(location.hash);
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [location]);
|
||||||
|
|
||||||
const toggleQuestion = (index) => {
|
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);
|
setOpenQuestion(openQuestion === index ? null : index);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
|
|
||||||
const faqData = [
|
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 itu Rekan AI?",
|
{ 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> },
|
||||||
answer: (
|
{ 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> },
|
||||||
<p>
|
{ 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> },
|
||||||
Rekan AI adalah platform teknologi kecerdasan buatan (AI) yang
|
{ 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> },
|
||||||
menyediakan solusi berbasis AI untuk meningkatkan efisiensi
|
{ 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> },
|
||||||
operasional, analisis data, dan pengalaman pelanggan bagi UMKM hingga
|
{ 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> },
|
||||||
perusahaan besar.
|
{ 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> },
|
||||||
</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 (
|
return (
|
||||||
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
|
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center" id="faq">
|
||||||
{/* Judul halaman FAQ */}
|
|
||||||
<div className="mt-[111px]">
|
<div className="mt-[111px]">
|
||||||
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
|
<h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
|
||||||
Frequently Asked Questions
|
Frequently Asked Questions
|
||||||
|
|
@ -122,33 +41,37 @@ const FAQ = () => {
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian FAQ */}
|
|
||||||
<div className="space-y-[22px] mb-[110px] mt-[60px]">
|
<div className="space-y-[22px] mb-[110px] mt-[60px]">
|
||||||
{faqData.map((item, index) => (
|
{faqData.map((item, index) => {
|
||||||
<div
|
const { ref, inView } = useInView({ threshold: 0.1 });
|
||||||
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 */}
|
return (
|
||||||
{openQuestion === index && (
|
<div
|
||||||
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
|
key={index}
|
||||||
{item.answer}
|
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` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
|
||||||
|
openQuestion === index ? "text-blue-500" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => toggleQuestion(index)}
|
||||||
|
>
|
||||||
|
<span className="font-[550]">{item.question}</span>
|
||||||
|
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
{openQuestion === index && (
|
||||||
))}
|
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
|
||||||
|
{item.answer}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -35,13 +35,7 @@ function Footer() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
{/* Tautan ke media sosial */}
|
{/* Tautan ke media sosial */}
|
||||||
|
|
@ -73,7 +67,7 @@ function Footer() {
|
||||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||||
<ul className="space-y-4 text-[18px]">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Personal</li>
|
<li>Personal</li>
|
||||||
<li>UMKM</li>
|
<li>Startup</li>
|
||||||
<li>Corporate Business</li>
|
<li>Corporate Business</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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 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 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 (
|
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]"
|
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||||
|
id="form"
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
||||||
backgroundSize: "cover",
|
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">
|
<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 */}
|
{/* 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]">
|
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
||||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Bagian Form */}
|
{/* 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">
|
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||||
Hubungi Tim Terbaik Kami
|
Hubungi Tim Terbaik Kami
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -89,7 +118,7 @@ const ContactForm = () => {
|
||||||
</select>
|
</select>
|
||||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||||
<svg
|
<svg
|
||||||
className="w-6 text-[#5B59E8]"
|
className="w-8 mt-7 mr-1 text-[#5B59E8]"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
|
@ -106,12 +135,16 @@ const ContactForm = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ReCAPTCHA */}
|
{/* ReCAPTCHA */}
|
||||||
<div className="flex items-center gap-2">
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
>
|
||||||
<ReCAPTCHA
|
<ReCAPTCHA
|
||||||
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
||||||
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
||||||
/>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -121,9 +154,9 @@ const ContactForm = () => {
|
||||||
Kirim Pesan
|
Kirim Pesan
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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 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 arrowform from './Dribbble-Light-Preview.png';
|
|
||||||
|
|
||||||
|
|
||||||
export{
|
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";
|
import { component11, wagreen, hc } from "../asset";
|
||||||
|
|
||||||
export default function HeadCorporate() {
|
export default function HeadCorporate() {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 lg:px-6">
|
<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" />
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
||||||
Coba Sekarang
|
<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">
|
||||||
</button>
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { component11, wagreen, start22 } from "../asset";
|
import { component11, wagreen, start22 } from "../asset";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
export default function HeadPersonal() {
|
export default function HeadPersonal() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -6,7 +7,7 @@ export default function HeadPersonal() {
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
||||||
{/* Left Column */}
|
{/* Left Column */}
|
||||||
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
|
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
|
||||||
{/* Logo and Tagline */}
|
{/* Logo and Tagline */}
|
||||||
<div className="flex items-center lg:justify-start">
|
<div className="flex items-center lg:justify-start">
|
||||||
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
||||||
<img src={component11} alt="Logo" width={53.52} height={43} />
|
<img src={component11} alt="Logo" width={53.52} height={43} />
|
||||||
|
|
@ -42,13 +43,16 @@ export default function HeadPersonal() {
|
||||||
|
|
||||||
{/* Buttons - Ensure they come last on mobile */}
|
{/* Buttons - Ensure they come last on mobile */}
|
||||||
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
|
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
|
||||||
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
<button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
||||||
Coba Sekarang
|
<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">
|
||||||
</button>
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { component11, wagreen, hs } from "../asset";
|
import { component11, wagreen, hs } from "../asset";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
export default function HeadPersonal() {
|
export default function HeadPersonal() {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 lg:px-6">
|
<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" />
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
import { chek2, wagreen, start33, start44, start55 } from "../asset"
|
import { chek2, wagreen, start33, start44, start55 } from "../asset"
|
||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
return (
|
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">
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
{/* Image Section */}
|
{/* Image Section */}
|
||||||
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||||
|
|
@ -15,9 +15,9 @@ function Kenapa() {
|
||||||
|
|
||||||
{/* Text Section */}
|
{/* 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] ">
|
<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>
|
<h2 className="text-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
|
||||||
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
<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.
|
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>
|
</p>
|
||||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
||||||
<li className="flex items-center ">
|
<li className="flex items-center ">
|
||||||
|
|
@ -41,9 +41,11 @@ function Kenapa() {
|
||||||
/>
|
/>
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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">
|
||||||
</button>
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
import { chek2, wagreen, start44 } from "../asset"
|
import { chek2, wagreen, start44 } from "../asset"
|
||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
return (
|
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">
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
{/* Image Section */}
|
{/* Image Section */}
|
||||||
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
<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 */}
|
{/* 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] ">
|
<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>
|
<h2 className="text-[30px] 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]">
|
<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.
|
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>
|
</p>
|
||||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
<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
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { chek2, wagreen, start33 } from "../asset"
|
import { chek2, wagreen, start33 } from "../asset"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
return (
|
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">
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
{/* Image Section */}
|
{/* Image Section */}
|
||||||
<div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
|
<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 */}
|
{/* 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] ">
|
<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>
|
<h2 className="text-[30px] 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]">
|
<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
|
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
|
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
|
aman, atau membuat keputusan yang lebih cerdas, Rekan AI adalah solusi tepat yang dirancang khusus untuk
|
||||||
|
|
@ -46,9 +46,11 @@ function Kenapa() {
|
||||||
/>
|
/>
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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"}>
|
||||||
Coba Sekarang
|
<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">
|
||||||
</button>
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export default function BusinessSolution() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
|
|
@ -83,4 +83,4 @@ export default function BusinessSolution() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -9,17 +9,17 @@ export default function BusinessSolution() {
|
||||||
// Detect mobile screen size
|
// Detect mobile screen size
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
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);
|
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 (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
|
|
@ -27,8 +27,8 @@ export default function BusinessSolution() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* 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="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]`}>
|
<div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
|
||||||
{data.tabs.map((button) => (
|
{data.tabs.map((button) => (
|
||||||
<button
|
<button
|
||||||
key={button.key}
|
key={button.key}
|
||||||
|
|
@ -45,9 +45,9 @@ export default function BusinessSolution() {
|
||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{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 */}
|
{/* 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
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export default function BusinessSolution() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen p-4">
|
<div className="w-[90vw] mx-auto p-4 overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
||||||
|
|
@ -83,4 +83,4 @@ export default function BusinessSolution() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
import { wagreen } from "../asset";
|
import { wagreen } from "../asset";
|
||||||
|
|
||||||
function Transformasi() {
|
function Transformasi() {
|
||||||
return (
|
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]" />
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { wagreen } from "../asset";
|
import { wagreen } from "../asset";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
function MasaDepan() {
|
function MasaDepan() {
|
||||||
return (
|
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]" />
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { wagreen } from "../asset";
|
import { wagreen } from "../asset";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
function Transformasi() {
|
function Transformasi() {
|
||||||
return (
|
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]" />
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
import { wagreen } from "../asset";
|
import { wagreen } from "../asset";
|
||||||
|
|
||||||
function Transformasi() {
|
function Transformasi() {
|
||||||
return (
|
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]" />
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</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">
|
<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
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import Header from "../components/beranda/Header"
|
import Header from "../components/beranda/Header"
|
||||||
import CustomerService from "../components/contact/CustomerService"
|
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 FAQSection from "../components/contact/FAQSection"
|
||||||
import BottomCTA from "../components/contact/BottomCTA"
|
import BottomCTA from "../components/contact/BottomCTA"
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||||
import Footer from "../components/contact/Footer"
|
import Footer from "../components/beranda/Footer"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
import Header from "../components/beranda/Header"
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import Hero from "../components/beranda/Hero"
|
import Header from "../components/beranda/Header";
|
||||||
import Solusi from "../components/beranda/Solusi"
|
import Hero from "../components/beranda/Hero";
|
||||||
import Banner from "../components/beranda/Banner"
|
import Solusi from "../components/beranda/Solusi";
|
||||||
import Kenapa from "../components/beranda/Kenapa"
|
import Banner from "../components/beranda/Banner";
|
||||||
import Mitra from '../components/beranda/Mitra'
|
import Kenapa from "../components/beranda/Kenapa";
|
||||||
import Mendukung from "../components/beranda/Mendukung"
|
import Mitra from '../components/beranda/Mitra';
|
||||||
import Footer from "../components/contact/Footer"
|
import Mendukung from "../components/beranda/Mendukung";
|
||||||
import MasaDepan from "../components/beranda/MasaDepan"
|
import Footer from "../components/beranda/Footer";
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
import MasaDepan from "../components/beranda/MasaDepan";
|
||||||
|
import WhatsAppButton from "../components/beranda/WhatsAppButon";
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<Hero />
|
<Hero />
|
||||||
<Solusi />
|
<Solusi />
|
||||||
<Banner />
|
<Banner />
|
||||||
<Kenapa />
|
<Kenapa />
|
||||||
<Mitra />
|
<Mitra />
|
||||||
<Mendukung />
|
<Mendukung />
|
||||||
<MasaDepan />
|
<MasaDepan />
|
||||||
<Footer />
|
<Footer />
|
||||||
<WhatsAppButton />
|
<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 SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
|
||||||
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||||
import Footer from "../components/contact/Footer"
|
import Footer from "../components/beranda/Footer"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPers
|
||||||
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
||||||
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||||
import Footer from "../components/contact/Footer"
|
import Footer from "../components/beranda/Footer"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Header from "../components/beranda/Header"
|
import Header from "../components/beranda/Header"
|
||||||
import HeadStartup from '../components/solusi/HeadStartup/HeadStartup'
|
import HeadStartup from '../components/solusi/HeadStartup/HeadStartup'
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
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 CardStartup from "../components/solusi/CardStartup/CardStartup"
|
||||||
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
|
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
|
||||||
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
|
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue