Compare commits
No commits in common. "main" and "carls1" have entirely different histories.
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,8 @@
|
||||||
"name": "rekan-ai-tailwind",
|
"name": "rekan-ai-tailwind",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"framer-motion": "^12.4.3",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
|
||||||
"react-intersection-observer": "^9.15.1",
|
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -2865,33 +2862,6 @@
|
||||||
"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",
|
||||||
|
|
@ -3212,15 +3182,6 @@
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/hoist-non-react-statics": {
|
|
||||||
"version": "3.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
|
||||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
|
||||||
"license": "BSD-3-Clause",
|
|
||||||
"dependencies": {
|
|
||||||
"react-is": "^16.7.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/ignore": {
|
"node_modules/ignore": {
|
||||||
"version": "5.3.2",
|
"version": "5.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||||
|
|
@ -3959,21 +3920,6 @@
|
||||||
"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",
|
||||||
|
|
@ -4050,6 +3996,7 @@
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
|
|
@ -4536,6 +4483,7 @@
|
||||||
"version": "15.8.1",
|
"version": "15.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.4.0",
|
"loose-envify": "^1.4.0",
|
||||||
|
|
@ -4586,19 +4534,6 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-async-script": {
|
|
||||||
"version": "1.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
|
|
||||||
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"hoist-non-react-statics": "^3.3.0",
|
|
||||||
"prop-types": "^15.5.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.4.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "18.3.1",
|
"version": "18.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||||
|
|
@ -4612,38 +4547,11 @@
|
||||||
"react": "^18.3.1"
|
"react": "^18.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-google-recaptcha": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"prop-types": "^15.5.0",
|
|
||||||
"react-async-script": "^1.2.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"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==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/react-refresh": {
|
"node_modules/react-refresh": {
|
||||||
|
|
@ -5482,12 +5390,6 @@
|
||||||
"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,8 @@
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"framer-motion": "^12.4.3",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
|
||||||
"react-intersection-observer": "^9.15.1",
|
|
||||||
"react-router-dom": "^7.1.3"
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
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"
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -12,10 +10,9 @@ 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/>}/>
|
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -2,17 +2,12 @@ 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';
|
||||||
import waButton from './image/Frame 27.png';
|
|
||||||
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
|
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
|
||||||
import homeImg from './image/Pic Beranda Rekan AI.png';
|
import homeImg from './image/Component 3.png';
|
||||||
import card1 from './image/rekan hr.png';
|
import card1 from './image/rekan hr.png';
|
||||||
import card2 from './image/rekan doku.png';
|
import card2 from './image/rekan doku.png';
|
||||||
import card3 from './image/rekan llm.png';
|
import card3 from './image/rekan llm.png';
|
||||||
|
|
@ -64,10 +59,10 @@ import imgLeft2 from './image/Frame 811531.png';
|
||||||
import imgLeft1 from './image/Frame 811530.png';
|
import imgLeft1 from './image/Frame 811530.png';
|
||||||
import imgLeft3 from './image/Frame 811533.png';
|
import imgLeft3 from './image/Frame 811533.png';
|
||||||
import imgRight from './image/Component 6.png';
|
import imgRight from './image/Component 6.png';
|
||||||
import nvdia from "./image/NVIDIA PNG Pic.png";
|
import nvdia from "./image/nvidia.png";
|
||||||
import kmn from "./image/Dukcapil PNG Pic.png";
|
import kmn from "./image/kemeneterian.png";
|
||||||
import kominfo from "./image/Kominfo PNG Pic.png";
|
import kominfo from "./image/kominfo.png";
|
||||||
import ojk from "./image/OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
|
import ojk from "./image/ojk.png";
|
||||||
import facebook from "./image/fb.png";
|
import facebook from "./image/fb.png";
|
||||||
import x from "./image/twitter.png";
|
import x from "./image/twitter.png";
|
||||||
import instagram from "./image/ig.png";
|
import instagram from "./image/ig.png";
|
||||||
|
|
@ -79,10 +74,10 @@ import frame from "./image/Component 11.png";
|
||||||
|
|
||||||
export{
|
export{
|
||||||
Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
|
Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
|
||||||
waIcon2,waButton,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
|
waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
|
||||||
mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
|
mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
|
||||||
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,ProdukDoku,ProdukHr,ProdukVeri,ProdukLlm
|
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate
|
||||||
}
|
}
|
||||||
|
|
@ -1,116 +1,71 @@
|
||||||
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
|
||||||
<div
|
className=" relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||||
className="absolute top-0 left-0 w-full h-full"
|
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",
|
backgroundPosition: 'center',
|
||||||
backgroundPosition: "center",
|
backgroundRepeat: 'no-repeat',
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundBlendMode: 'multiply',
|
||||||
backgroundBlendMode: "multiply",
|
}}
|
||||||
}}
|
>
|
||||||
></div>
|
{/* Gambar L1-L4 untuk mobile */}
|
||||||
|
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
||||||
|
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
|
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
|
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
|
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
|
{/* Teks dan tombol */}
|
||||||
{/* Gambar L1-L4 untuk mobile */}
|
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
|
||||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||||
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
||||||
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
||||||
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
</h1>
|
||||||
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
</div>
|
||||||
</div>
|
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
|
||||||
|
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
|
||||||
|
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
||||||
|
<img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto" />
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Teks dan tombol */}
|
{/* Gambar L1-L4 untuk desktop */}
|
||||||
<div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
|
<div className="absolute hidden md:grid top-[50%] -left-14 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
|
||||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
<img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
|
||||||
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
<img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
|
||||||
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
<img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
|
||||||
</h1>
|
<img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
|
|
||||||
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang
|
|
||||||
siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
|
|
||||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
|
||||||
<img
|
|
||||||
src={waIcon2}
|
|
||||||
alt="WhatsApp Icon"
|
|
||||||
className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto"
|
|
||||||
/>
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<button
|
|
||||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
|
||||||
Coba Sekarang
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Gambar L1-L4 untuk desktop */}
|
{/* Gambar R1-R4 untuk desktop */}
|
||||||
<div className="absolute hidden md:grid top-1/2 left-0 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
|
<div className="absolute hidden md:grid top-[50%] -right-16 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
|
||||||
<img
|
<img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
|
||||||
src={L1}
|
<img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
|
||||||
alt="image 1"
|
<img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
|
||||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
|
<img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
|
||||||
/>
|
</div>
|
||||||
<img
|
|
||||||
src={L2}
|
|
||||||
alt="image 2"
|
|
||||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src={L3}
|
|
||||||
alt="image 3"
|
|
||||||
className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src={L4}
|
|
||||||
alt="image 4"
|
|
||||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Gambar R1-R4 untuk desktop */}
|
{/* Gambar R1-R4 untuk mobile */}
|
||||||
<div className="absolute hidden md:grid top-1/2 right-4 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
|
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
|
||||||
<img
|
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
src={R1}
|
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
alt="image 1"
|
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
|
<img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
||||||
/>
|
</div>
|
||||||
<img
|
|
||||||
src={R2}
|
|
||||||
alt="image 2"
|
|
||||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src={R3}
|
|
||||||
alt="image 3"
|
|
||||||
className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src={R4}
|
|
||||||
alt="image 4"
|
|
||||||
className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
{/* Gambar R1-R4 untuk mobile */}
|
|
||||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
|
|
||||||
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
|
||||||
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
|
||||||
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
|
||||||
<img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Banner
|
export default Banner
|
||||||
|
|
|
||||||
|
|
@ -1,160 +1,107 @@
|
||||||
import { useNavigate, Link } from "react-router-dom"
|
import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
|
||||||
|
|
||||||
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 py-10 text-[#212121]">
|
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
|
||||||
<div className="container mx-auto">
|
{/* 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 md:-ml-16">
|
<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>
|
||||||
|
|
||||||
|
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<div className="flex mb-5">
|
||||||
|
<p>
|
||||||
|
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||||
|
<br />
|
||||||
|
<span className="text-[#5B59E8] italic font-bold">
|
||||||
|
Reimagine Your Business with AI.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="mb-10 text-[18px]">
|
||||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||||
<div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
|
Banten 15413
|
||||||
<div className="flex mb-5">
|
</p>
|
||||||
<p>
|
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||||
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
<div className="flex space-x-5">
|
||||||
<br />
|
{/* Tautan ke media sosial */}
|
||||||
<span className="text-[#5B59E8] italic">
|
<a href="#">
|
||||||
Reimagine Your Business with AI.
|
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||||
</span>
|
</a>
|
||||||
</p>
|
<a href="#">
|
||||||
</div>
|
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||||
|
</a>
|
||||||
<div className="flex space-x-3">
|
<a href="#">
|
||||||
{/* Tautan ke media sosial */}
|
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||||
<a href="#">
|
</a>
|
||||||
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img src={x} alt="Twitter" className="w-5 h-5" />{" "}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Kolom 3: Produk perusahaan */}
|
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
|
||||||
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
|
||||||
<ul className="space-y-4 text-[18px]">
|
|
||||||
<li>Rekan Doku</li>
|
|
||||||
<li>Rekan Veri</li>
|
|
||||||
<li>Rekan HR</li>
|
|
||||||
<li>Rekan LLM</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
|
||||||
<div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
|
|
||||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
|
||||||
<ul className="space-y-4 text-[18px]">
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigate("/SolusiPersonal");
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="block w-full text-left"
|
|
||||||
>
|
|
||||||
Personal
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigate("/SolusiStartup");
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="block w-full text-left">
|
|
||||||
Startup
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigate("/SolusiCorporate");
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="block w-full text-left">
|
|
||||||
Corporate Business
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{/* Kolom 5: Informasi kontak */}
|
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
|
||||||
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
|
||||||
<ul className="space-y-4 text-[18px]">
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigate("/Contact");
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="block w-full text-left">
|
|
||||||
Kontak Kami
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to={"/Contact#faq"}>
|
|
||||||
<button
|
|
||||||
className="block w-full text-left">
|
|
||||||
F.A.Q
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Kolom 6: Partner perusahaan */}
|
|
||||||
<div className="mb-5 sm:mb-0 sm:pl-0">
|
|
||||||
<div className="mb-4">
|
|
||||||
<img
|
|
||||||
src={nvidia}
|
|
||||||
alt="NVIDIA Inception Premier Member"
|
|
||||||
className="w-[221px] h-[83px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-5">
|
|
||||||
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
|
|
||||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
|
|
||||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian hak cipta */}
|
{/* Kolom 3: Produk perusahaan */}
|
||||||
<div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
|
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
|
||||||
<p>
|
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
|
||||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
<ul className="space-y-4 text-[18px]">
|
||||||
</p>
|
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||||
|
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||||
|
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||||
|
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||||
|
<div className="flex-1 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
|
||||||
|
<h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
|
||||||
|
<ul className="space-y-4 text-[18px]">
|
||||||
|
<li>Personal</li> {/* Solusi untuk individu */}
|
||||||
|
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||||
|
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 5: Informasi kontak */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
|
||||||
|
<ul className="space-y-4 text-[18px]">
|
||||||
|
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||||
|
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||||
|
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 6: Partner perusahaan */}
|
||||||
|
<div className="mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<div className="mb-4">
|
||||||
|
<img
|
||||||
|
src={nvdia} // Gambar logo partner NVIDIA
|
||||||
|
alt="NVIDIA Inception Premier Member"
|
||||||
|
className="w-[221px] h-[83px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-5">
|
||||||
|
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
|
||||||
|
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
|
||||||
|
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian hak cipta */}
|
||||||
|
<div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
|
||||||
|
<p>
|
||||||
|
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -1,80 +1,34 @@
|
||||||
import { useState, useRef, useEffect } from "react"
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
import { useNavigate } from "react-router-dom"
|
import { useNavigate } from "react-router-dom"
|
||||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
|
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } 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)
|
||||||
const [searchQuery, setSearchQuery] = useState("")
|
|
||||||
|
|
||||||
const handleSearch = (e) => {
|
|
||||||
setSearchQuery(e.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSearchSubmit = (e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
const query = searchQuery.toLowerCase()
|
|
||||||
|
|
||||||
// Solutions mapping
|
|
||||||
if (query.includes("solusi personal") || query.includes("personal")) {
|
|
||||||
navigate("/SolusiPersonal")
|
|
||||||
} else if (query.includes("solusi startup") || query.includes("startup")) {
|
|
||||||
navigate("/SolusiStartup")
|
|
||||||
} else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
|
|
||||||
navigate("/SolusiCorporate")
|
|
||||||
}
|
|
||||||
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
|
||||||
setSearchQuery("") // Clear search after submission
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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">
|
||||||
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div className="flex-shrink-0 md:mr-5">
|
<div className="flex-shrink-0">
|
||||||
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 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={() => {
|
onClick={() => navigate("/")}
|
||||||
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" ref={produkRef}>
|
<div className="relative">
|
||||||
<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"
|
||||||
|
|
@ -95,84 +49,28 @@ const Header = () => {
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isProdukOpen && (
|
{isProdukOpen && (
|
||||||
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
||||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
<div className="flex justify-center gap-8">
|
<a href="#produk1" className="text-[#212121]">
|
||||||
{/* HR */}
|
Produk 1
|
||||||
<button
|
</a>
|
||||||
onClick={() => {
|
</li>
|
||||||
navigate("/SolusiPersonal");
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
<a href="#produk2" className="text-[#212121]">
|
||||||
}}
|
Produk 2
|
||||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
</a>
|
||||||
>
|
</li>
|
||||||
<img src={ProdukHr} alt="" className="w-16 h-16" />
|
</ul>
|
||||||
<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" ref={solusiRef}>
|
<div className="relative">
|
||||||
<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"
|
||||||
>
|
>
|
||||||
Solusi
|
Produk
|
||||||
<svg
|
<svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
|
|
@ -188,20 +86,17 @@ const Header = () => {
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{isSolusiOpen && (
|
{isSolusiOpen && (
|
||||||
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
<div className="bg-customRed rounded-xl p-8">
|
||||||
<div className="flex justify-center gap-8">
|
<div className="flex justify-center gap-8">
|
||||||
{/* Personal */}
|
{/* Personal */}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => navigate("/SolusiPersonal")}
|
||||||
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 py-1">Personal</h3>
|
<h3 className="font-medium text-base">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>
|
||||||
|
|
@ -210,15 +105,12 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Startup */}
|
{/* Startup */}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => navigate("/SolusiStartup")}
|
||||||
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 py-1">Startup</h3>
|
<h3 className="font-medium text-base">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>
|
||||||
|
|
@ -227,15 +119,12 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Corporate */}
|
{/* Corporate */}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => navigate("/SolusiCorporate")}
|
||||||
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 py-1">Corporate Business</h3>
|
<h3 className="font-medium text-base">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>
|
||||||
|
|
@ -246,10 +135,7 @@ const Header = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => navigate("/Contact")}
|
||||||
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
|
||||||
|
|
@ -258,21 +144,16 @@ const Header = () => {
|
||||||
|
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
|
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
|
||||||
<form onSubmit={handleSearchSubmit} className="relative w-full">
|
<div className="relative w-full">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Pencarian..."
|
placeholder="Pencarian..."
|
||||||
value={searchQuery}
|
|
||||||
onChange={handleSearch}
|
|
||||||
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
|
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
|
||||||
/>
|
/>
|
||||||
<button
|
<button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
|
||||||
type="submit"
|
|
||||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
|
|
||||||
>
|
|
||||||
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Konsultasi Button */}
|
{/* Konsultasi Button */}
|
||||||
|
|
@ -315,53 +196,12 @@ 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">
|
||||||
<button
|
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
||||||
onClick={() => navigate("/SolusiPersonal")}
|
Produk 1
|
||||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
</a>
|
||||||
>
|
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
||||||
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
Produk 2
|
||||||
<div className="text-left">
|
</a>
|
||||||
<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,91 +1,49 @@
|
||||||
import { homeLogo, waIcon, homeImg } from '../../assets';
|
import {homeLogo,waIcon,homeImg} from '../../assets';
|
||||||
import { useNavigate, Link } from "react-router-dom";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
function Hero() {
|
function Hero() {
|
||||||
const [inView, setInView] = useState(false);
|
return (
|
||||||
const navigate = useNavigate();
|
<div className="w-full overflow-hidden" id="Home">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
useEffect(() => {
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
|
||||||
const observer = new IntersectionObserver(
|
{/* Left Section */}
|
||||||
(entries) => {
|
<div className="space-y-6 md:-mt-10 mt-10">
|
||||||
entries.forEach((entry) => {
|
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto" />
|
||||||
if (entry.isIntersecting) {
|
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
|
||||||
setInView(true);
|
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
||||||
} else {
|
</h1>
|
||||||
setInView(false);
|
<p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
|
||||||
}
|
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
|
||||||
});
|
digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
|
||||||
},
|
</p>
|
||||||
{ threshold: 0.2 }
|
|
||||||
);
|
{/* Buttons - Moved inside left column for better mobile layout */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||||
const target = document.querySelector("#hero-section");
|
<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 border-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
||||||
if (target) {
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
||||||
observer.observe(target);
|
Konsultasi Gratis
|
||||||
}
|
</button>
|
||||||
|
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
return () => {
|
Coba Sekarang
|
||||||
if (target) {
|
</button>
|
||||||
observer.unobserve(target);
|
</div>
|
||||||
}
|
</div>
|
||||||
};
|
|
||||||
}, []);
|
{/* Right Section */}
|
||||||
|
<div className="relative">
|
||||||
return (
|
<div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px]">
|
||||||
<div className="w-full overflow-hidden" id="Home">
|
<img
|
||||||
<div className="container mx-auto px-4 lg:px-12">
|
src={homeImg}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
|
alt="Rekan AI Illustration"
|
||||||
{/* Left Section */}
|
className="object-contain"
|
||||||
<motion.div
|
/>
|
||||||
initial={{ opacity: 0, x: -50 }}
|
</div>
|
||||||
animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
|
</div>
|
||||||
transition={{ duration: 0.8 }}
|
</div>
|
||||||
className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
|
|
||||||
>
|
|
||||||
<img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
|
|
||||||
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
|
|
||||||
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
|
||||||
</h1>
|
|
||||||
<p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
|
|
||||||
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
|
|
||||||
digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Right Section */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.8 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.3 }}
|
|
||||||
className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none"
|
|
||||||
>
|
|
||||||
<img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 50 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
|
||||||
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
|
||||||
id="button-section"
|
|
||||||
>
|
|
||||||
<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={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
);
|
}
|
||||||
}
|
|
||||||
|
export default Hero
|
||||||
export default Hero;
|
|
||||||
|
|
|
||||||
|
|
@ -1,114 +1,63 @@
|
||||||
import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets';
|
import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
const options = { triggerOnce: false, threshold: 0.2 };
|
|
||||||
const { ref: sectionRef, inView: sectionInView } = useInView(options);
|
|
||||||
const { ref: textRef, inView: textInView } = useInView(options);
|
|
||||||
const { ref: listRef, inView: listInView } = useInView(options);
|
|
||||||
const { ref: buttonRef, inView: buttonInView } = useInView(options);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={sectionInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
|
||||||
>
|
|
||||||
{/* Decorative Circles */}
|
{/* Decorative Circles */}
|
||||||
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
||||||
<motion.img
|
<img src={circle1} alt="Circle 1" className="w-auto h-auto" />
|
||||||
src={circle1} alt="Circle 1"
|
<img src={circle2} alt="Circle 2" className="w-auto h-auto" />
|
||||||
className="w-auto h-auto"
|
|
||||||
initial={{ opacity: 0, scale: 0.5 }}
|
|
||||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.3 }}
|
|
||||||
/>
|
|
||||||
<motion.img
|
|
||||||
src={circle2} alt="Circle 2"
|
|
||||||
className="w-auto h-auto"
|
|
||||||
initial={{ opacity: 0, scale: 0.5 }}
|
|
||||||
animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Image Section */}
|
{/* Image Section */}
|
||||||
<motion.div
|
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||||
ref={textRef}
|
|
||||||
className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
|
|
||||||
initial={{ opacity: 0, x: -50 }}
|
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={imgLeft}
|
src={imgLeft}
|
||||||
alt="Woman with Tablet"
|
alt="Woman with Tablet"
|
||||||
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
|
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* Text Section */}
|
{/* Text Section */}
|
||||||
<motion.div
|
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
|
||||||
ref={listRef}
|
|
||||||
className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8, delay: 0.3 }}
|
|
||||||
>
|
|
||||||
<h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
|
<h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
|
||||||
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
|
<p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
|
||||||
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
|
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
|
||||||
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
|
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
|
||||||
untuk meningkatkan efisiensi operasional, mempercepat proses, dan
|
untuk meningkatkan efisiensi operasional, mempercepat proses, dan
|
||||||
memberikan wawasan berbasis data yang akurat.
|
memberikan wawasan berbasis data yang akurat.
|
||||||
</p>
|
</p>
|
||||||
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
|
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
|
||||||
{[
|
<li className="flex items-center">
|
||||||
"Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.",
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
"Analisis data real-time untuk pengambilan keputusan yang lebih tepat.",
|
Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
|
||||||
"Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
|
</li>
|
||||||
"Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
|
<li className="flex items-center">
|
||||||
].map((text, index) => (
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
<motion.li
|
Analisis data real-time untuk pengambilan keputusan yang lebih tepat.
|
||||||
key={index}
|
</li>
|
||||||
className="flex items-center"
|
<li className="flex items-center">
|
||||||
initial={{ opacity: 0, x: -20 }}
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
animate={listInView ? { opacity: 1, x: 0 } : {}}
|
Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.
|
||||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
</li>
|
||||||
>
|
<li className="flex items-center">
|
||||||
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
{text}
|
Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data.
|
||||||
</motion.li>
|
</li>
|
||||||
))}
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
||||||
<motion.button
|
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
|
||||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.5, delay: 0.8 }}
|
|
||||||
>
|
|
||||||
<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
|
||||||
</motion.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">
|
||||||
<motion.button
|
Coba Sekarang
|
||||||
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>
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.5, delay: 1 }}
|
|
||||||
>
|
|
||||||
Coba Sekarang
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,40 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { waIcon } from "../../assets";
|
import { waIcon } from "../../assets";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
function MasaDepan() {
|
function MasaDepan() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Tagline Section */}
|
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
|
||||||
<motion.div
|
{/* Tagline Section */}
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3"
|
|
||||||
>
|
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
||||||
<motion.span
|
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
||||||
initial={{ scale: 0.8, opacity: 0 }}
|
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
className="flex items-center justify-center bg-[#CA2B68] text-white font-semibold text-2xl rounded-2xl w-48 h-12"
|
|
||||||
>
|
|
||||||
#Rekan AI
|
#Rekan AI
|
||||||
</motion.span>
|
</span>
|
||||||
<motion.h1
|
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
||||||
initial={{ opacity: 0, x: -50 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
className="text-2xl sm:text-[32px] font-semibold text-[#212121]"
|
|
||||||
>
|
|
||||||
Masa Depan Bisnis, Dimulai Hari Ini
|
Masa Depan Bisnis, Dimulai Hari Ini
|
||||||
</motion.h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<motion.p
|
<p className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut", delay: 0.3 }}
|
|
||||||
className="text-base sm:text-xl text-customBlack-600 md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0"
|
|
||||||
>
|
|
||||||
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
|
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
|
||||||
cerdas, efisien, dan kompetitif.
|
cerdas, efisien, dan kompetitif.
|
||||||
</motion.p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
{/* Button Section */}
|
{/* Button Section */}
|
||||||
<motion.div
|
<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">
|
||||||
initial={{ opacity: 0, y: 50 }}
|
<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]">
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
Konsultasi Gratis
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
</button>
|
||||||
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-[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
|
||||||
<motion.button
|
</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]"
|
</div>
|
||||||
>
|
|
||||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
import { useInView } from 'react-intersection-observer';
|
|
||||||
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
|
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
|
||||||
|
|
||||||
function Mendukung() {
|
function Mendukung() {
|
||||||
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{ id: 1, image: imgLeft1, title: 'Personal' },
|
{ id: 1, image: imgLeft1, title: 'Personal' },
|
||||||
{ id: 2, image: imgLeft2, title: 'UMKM' },
|
{ id: 2, image: imgLeft2, title: 'UMKM' },
|
||||||
|
|
@ -13,22 +9,9 @@ function Mendukung() {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
|
||||||
ref={ref}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={inView ? { opacity: 1 } : { opacity: 0 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0"
|
|
||||||
id="solusi2"
|
|
||||||
>
|
|
||||||
{/* Left Content */}
|
{/* Left Content */}
|
||||||
<motion.div
|
<div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
|
||||||
ref={ref}
|
|
||||||
initial={{ x: -50, opacity: 0 }}
|
|
||||||
animate={inView ? { x: 0, opacity: 1 } : { x: -50, opacity: 0 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1"
|
|
||||||
>
|
|
||||||
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
|
<p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
|
||||||
Solusi Mendukung Bisnis di Setiap
|
Solusi Mendukung Bisnis di Setiap
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -39,42 +22,31 @@ function Mendukung() {
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
|
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
|
||||||
{items.map((item, index) => (
|
{items.map((item) => (
|
||||||
<motion.div
|
<div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
|
||||||
key={item.id}
|
|
||||||
ref={ref}
|
|
||||||
initial={{ y: 50, opacity: 0 }}
|
|
||||||
animate={inView ? { y: 0, opacity: 1 } : { y: 50, opacity: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
||||||
className="flex flex-col items-center w-full md:w-auto md:mt-5"
|
|
||||||
>
|
|
||||||
{/* Image */}
|
{/* Image */}
|
||||||
<img
|
<img
|
||||||
src={item.image}
|
src={item.image}
|
||||||
alt={item.title}
|
alt={item.title}
|
||||||
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] rounded-lg"
|
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
|
||||||
/>
|
/>
|
||||||
{/* Title */}
|
{/* Title */}
|
||||||
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
|
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[223px] h-10 flex items-center justify-center text-sm font-bold mt-4">
|
||||||
{item.title}
|
{item.title}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Right Content */}
|
{/* Right Content */}
|
||||||
<motion.div
|
<div className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2">
|
||||||
ref={ref}
|
|
||||||
initial={{ x: 50, opacity: 0 }}
|
|
||||||
animate={inView ? { x: 0, opacity: 1 } : { x: 50, opacity: 0 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2"
|
|
||||||
>
|
|
||||||
<img src={imgRight} alt="Image Right" className="w-auto h-auto" />
|
<img src={imgRight} alt="Image Right" className="w-auto h-auto" />
|
||||||
</motion.div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Mendukung;
|
export default Mendukung;
|
||||||
|
|
|
||||||
|
|
@ -1,129 +1,71 @@
|
||||||
import { card1, card2, card3, card4, chek } from "../../assets"
|
import {card1,card2,card3,card4,chek,} from '../../assets';
|
||||||
import { motion } from "framer-motion"
|
|
||||||
import { useState, useEffect, useRef } from "react"
|
|
||||||
|
|
||||||
// Custom hook untuk menggunakan Intersection Observer
|
|
||||||
const useIntersectionObserver = (options = {}) => {
|
|
||||||
const [isIntersecting, setIsIntersecting] = useState(false)
|
|
||||||
const ref = useRef(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
setIsIntersecting(entry.isIntersecting)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
threshold: 0.5, // Ketika 50% elemen terlihat
|
|
||||||
...options,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
if (ref.current) {
|
|
||||||
observer.observe(ref.current)
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (ref.current) {
|
|
||||||
observer.unobserve(ref.current)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [options])
|
|
||||||
|
|
||||||
return [ref, isIntersecting]
|
|
||||||
}
|
|
||||||
|
|
||||||
function Solusi() {
|
function Solusi() {
|
||||||
const cards = [
|
const cards = [
|
||||||
{
|
{
|
||||||
image: card1,
|
image: card1,
|
||||||
description:
|
description: 'Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.',
|
||||||
"Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
|
features: ['Automasi Proses HR', 'Manajemen Karyawan'],
|
||||||
features: ["Automasi Proses HR", "Manajemen Karyawan"],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: card2,
|
image: card2,
|
||||||
description:
|
description: 'Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.',
|
||||||
"Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
|
features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'],
|
||||||
features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: card3,
|
image: card3,
|
||||||
description:
|
description: 'Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.',
|
||||||
"Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
|
features: ['(Large Language Model) System', 'Virtual Assistant'],
|
||||||
features: ["(Large Language Model) System", "Virtual Assistant"],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: card4,
|
image: card4,
|
||||||
description:
|
description: 'Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.',
|
||||||
"Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
|
features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'],
|
||||||
features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
|
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
|
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
|
||||||
<div className="text-center mb-12 md:-mt-48 px-4">
|
<div className="text-center mb-12 md:-mt-48">
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||||
className="flex flex-col md:flex-row items-center justify-center gap-4"
|
|
||||||
initial={{ opacity: 0, y: -20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
>
|
|
||||||
<h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
|
<h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
|
||||||
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
|
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
|
||||||
#Rekan AI
|
#Rekan AI
|
||||||
</span>
|
</span>
|
||||||
</motion.div>
|
</div>
|
||||||
<motion.p
|
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
|
||||||
className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center"
|
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
|
||||||
initial={{ opacity: 0 }}
|
</p>
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ delay: 0.5, duration: 1 }}
|
|
||||||
>
|
|
||||||
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
|
|
||||||
aspek.
|
|
||||||
</motion.p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
|
|
||||||
{cards.map((card, index) => {
|
|
||||||
const [ref, isIntersecting] = useIntersectionObserver({
|
|
||||||
threshold: 0.5, // Set threshold when 50% of the element is visible
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
<motion.div
|
{cards.map((card, index) => (
|
||||||
key={index}
|
<div
|
||||||
ref={ref}
|
key={index}
|
||||||
className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
|
className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
|
||||||
initial={{ opacity: 0, y: 20 }}
|
>
|
||||||
animate={{ opacity: isIntersecting ? 1 : 0, y: isIntersecting ? 0 : 20 }}
|
<img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
|
||||||
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
|
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
|
||||||
>
|
<ul className="text-left space-y-4 mb-8">
|
||||||
<img
|
{card.features.map((feature, i) => (
|
||||||
src={card.image || "/placeholder.svg"}
|
<li key={i} className="flex items-center gap-2">
|
||||||
alt={`Card ${index + 1}`}
|
<img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
|
||||||
className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
|
</li>
|
||||||
/>
|
))}
|
||||||
<p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
|
</ul>
|
||||||
{card.description}
|
<button className="w-[355px] h-[62px] md:w-[330px] md:h-[60px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
|
||||||
</p>
|
Selengkapnya <span>→</span>
|
||||||
<ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
|
</button>
|
||||||
{card.features.map((feature, i) => (
|
</div>
|
||||||
<li key={i} className="flex items-center gap-2 text-sm md:text-base">
|
))}
|
||||||
<img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
|
|
||||||
Selengkapnya <span>→</span>
|
|
||||||
</button>
|
|
||||||
</motion.div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Solusi
|
export default Solusi;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { waButton } from "../../assets";
|
import WaButtons from '../../assets/image/Whatsapp.png';
|
||||||
|
|
||||||
const WhatsAppButton = () => {
|
const WhatsAppButton = () => {
|
||||||
return (
|
return (
|
||||||
<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]">
|
<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]">
|
||||||
<img
|
<img
|
||||||
className="w-10 h-10 md:w-auto md:h-auto"
|
className="w-10 h-10 md:w-12 md:h-12"
|
||||||
src={waButton}
|
src={WaButtons}
|
||||||
alt="WhatsApp"
|
alt="WhatsApp"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,40 @@
|
||||||
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
const BottomCTA = () => {
|
const BottomCTA = () => {
|
||||||
return (
|
return (
|
||||||
<motion.section
|
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
||||||
initial={{ opacity: 0, y: 50 }}
|
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="w-full bg-white text-center py-10 mb-[113px]"
|
|
||||||
>
|
|
||||||
<div className="flex flex-wrap justify-center gap-2">
|
<div 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">
|
|
||||||
<span className="bg-[#dc0168] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
|
||||||
|
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
||||||
|
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
||||||
#Rekan AI
|
#Rekan AI
|
||||||
</span>
|
</span>
|
||||||
<span className="font-semibold ml-1">?</span>
|
<span className="font-semibold ml-1">?</span>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
|
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
|
||||||
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
|
<p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
|
||||||
kontak atau email. Kami dengan senang hati akan membantu!
|
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<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">
|
{/* Bagian tombol CTA */}
|
||||||
<motion.button
|
<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">
|
||||||
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]"
|
<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]">
|
||||||
>
|
|
||||||
<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
|
||||||
</motion.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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
<motion.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
|
||||||
</motion.button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,17 @@
|
||||||
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-[100px] 2xl:px-20 2xl:gap-20">
|
<section className="main-container mt-[180px] mb-16 md:mb-0 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 */}
|
||||||
<motion.div
|
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left pl-10 md:ml-[-200px]">
|
||||||
ref={leftRef}
|
|
||||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
|
|
||||||
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 <br />
|
Kami Siap Membantu Bisnis Anda{" "}
|
||||||
Lebih Maju!
|
<span className="hidden lg:inline">
|
||||||
|
<br />
|
||||||
|
</span>{" "}
|
||||||
|
Lebih Maju!
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
|
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
|
||||||
|
|
@ -74,23 +53,16 @@ const CustomerService = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* RIGHT SECTION - Gambar */}
|
{/* RIGHT SECTION - Gambar */}
|
||||||
<motion.div
|
<div className="flex-1 flex justify-end items-center pr-10 md:mr-[-200px]">
|
||||||
ref={rightRef}
|
|
||||||
className="flex justify-center md:justify-end items-center md:mr-[-70px]"
|
|
||||||
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-auto h-auto "
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,19 @@
|
||||||
"use client"
|
import { useState } from "react";
|
||||||
|
|
||||||
import { useState, useEffect } from "react"
|
|
||||||
import { useLocation } from "react-router-dom"
|
|
||||||
import { motion, useAnimation } from "framer-motion"
|
|
||||||
import { useInView } from "react-intersection-observer"
|
|
||||||
|
|
||||||
const FAQ = () => {
|
const FAQ = () => {
|
||||||
const location = useLocation()
|
// State untuk menyimpan indeks pertanyaan yang sedang dibuka
|
||||||
const controls = useAnimation()
|
// Jika tidak ada pertanyaan yang terbuka, nilai adalah null
|
||||||
const [ref, inView] = useInView({
|
const [openQuestion, setOpenQuestion] = useState(null);
|
||||||
threshold: 0.1,
|
|
||||||
triggerOnce: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (inView) {
|
|
||||||
controls.start("visible")
|
|
||||||
} else {
|
|
||||||
controls.start("hidden")
|
|
||||||
}
|
|
||||||
}, [controls, inView])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (location.hash) {
|
|
||||||
const element = document.querySelector(location.hash)
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: "smooth" })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [location])
|
|
||||||
|
|
||||||
const [openQuestion, setOpenQuestion] = useState(null)
|
|
||||||
|
|
||||||
|
// Fungsi untuk membuka atau menutup pertanyaan berdasarkan indeks
|
||||||
|
// Jika pertanyaan yang sama diklik lagi, tutup pertanyaan tersebut
|
||||||
const toggleQuestion = (index) => {
|
const toggleQuestion = (index) => {
|
||||||
setOpenQuestion(openQuestion === index ? null : index)
|
// Cek apakah pertanyaan yang sama diklik
|
||||||
}
|
// Jika iya, tutup (set openQuestion ke null), jika tidak, buka pertanyaan tersebut
|
||||||
|
setOpenQuestion(openQuestion === index ? null : index);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Data FAQ yang berisi array objek dengan pertanyaan dan jawaban
|
||||||
const faqData = [
|
const faqData = [
|
||||||
{
|
{
|
||||||
question: "Apa itu Rekan AI?",
|
question: "Apa itu Rekan AI?",
|
||||||
|
|
@ -130,33 +108,11 @@ const FAQ = () => {
|
||||||
</p>
|
</p>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
// Animation variants for the container
|
|
||||||
const containerVariants = {
|
|
||||||
hidden: { opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
transition: {
|
|
||||||
staggerChildren: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
// Animation variants for each FAQ item
|
|
||||||
const itemVariants = {
|
|
||||||
hidden: { opacity: 0, y: 20 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
y: 0,
|
|
||||||
transition: {
|
|
||||||
duration: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq" ref={ref}>
|
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
|
||||||
|
{/* 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
|
||||||
|
|
@ -166,38 +122,36 @@ const FAQ = () => {
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div
|
{/* Bagian FAQ */}
|
||||||
className="space-y-[22px] mb-[110px] mt-[60px]"
|
<div className="space-y-[22px] mb-[110px] mt-[60px]">
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
animate={controls}
|
|
||||||
>
|
|
||||||
{faqData.map((item, index) => (
|
{faqData.map((item, index) => (
|
||||||
<motion.div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden"
|
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
|
||||||
variants={itemVariants}
|
|
||||||
>
|
>
|
||||||
|
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
|
||||||
<div
|
<div
|
||||||
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
|
className={`flex justify-between items-center cursor-pointer bg-white ml-4 ${
|
||||||
|
// Jika pertanyaan ini dibuka, beri highlight
|
||||||
openQuestion === index ? "text-blue-500" : ""
|
openQuestion === index ? "text-blue-500" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => toggleQuestion(index)}
|
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
|
||||||
>
|
>
|
||||||
<span className="font-[550]">{item.question}</span>
|
<span className="font-[550]">{item.question}</span>
|
||||||
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span>
|
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
|
||||||
{openQuestion === index && (
|
{openQuestion === index && (
|
||||||
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
|
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
|
||||||
{item.answer}
|
{item.answer}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</motion.div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default FAQ
|
export default FAQ;
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
// Import gambar-gambar yang digunakan dalam komponen Footer
|
// Import gambar-gambar yang digunakan dalam komponen Footer
|
||||||
import {
|
import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "./asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
|
||||||
nvidia,
|
|
||||||
kmn,
|
|
||||||
kominfo,
|
|
||||||
ojk,
|
|
||||||
facebook,
|
|
||||||
x,
|
|
||||||
instagram,
|
|
||||||
component11,
|
|
||||||
} from "./asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
|
|
||||||
|
|
||||||
function Footer() {
|
function Footer() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -25,7 +16,7 @@ function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||||
<div className="w-full sm:w-auto mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 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>{" "}
|
||||||
|
|
@ -35,18 +26,21 @@ function Footer() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="mb-[39px] text-[18px]">
|
||||||
|
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||||
|
Banten 15413
|
||||||
|
</p>
|
||||||
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
<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 */}
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
|
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||||
</a>
|
</a>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
|
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||||
</a>
|
</a>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src={x} alt="Twitter" className="w-5 h-5" />{" "}
|
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,29 +49,30 @@ function Footer() {
|
||||||
<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-base 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>
|
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||||
<li>Rekan Veri</li>
|
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||||
<li>Rekan HR</li>
|
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||||
<li>Rekan LLM</li>
|
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0 md:mx-[10runrpx] 2xl:mx-[-120px]">
|
||||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
<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> {/* Solusi untuk individu */}
|
||||||
<li>Startup</li>
|
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||||
<li>Corporate Business</li>
|
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||||
</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-base font-semibold mb-4">Hubungi Kami</h4>
|
||||||
<ul className="space-y-4 text-[18px]">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Kontak Kami</li>
|
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||||
<li>F.A.Q</li>
|
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||||
|
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -85,15 +80,15 @@ 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={nvidia}
|
src={nvidia} // Gambar logo partner 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]" />
|
<img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" /> {/* Gambar logo partner Kementerian */}
|
||||||
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
|
<img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
|
||||||
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
|
<img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,170 +1,152 @@
|
||||||
"use client"
|
import { img10 } from "./asset";
|
||||||
|
|
||||||
import { useEffect } from "react"
|
|
||||||
import { useLocation } from "react-router-dom"
|
|
||||||
import ReCAPTCHA from "react-google-recaptcha"
|
|
||||||
import { motion, useAnimation } from "framer-motion"
|
|
||||||
import { useInView } from "react-intersection-observer"
|
|
||||||
import useRecaptcha from "./Recaptcha/useRecaptcha"
|
|
||||||
import { img10 } from "./asset"
|
|
||||||
|
|
||||||
const ContactForm = () => {
|
const ContactForm = () => {
|
||||||
const { capchaToken, handleRecaptcha } = useRecaptcha()
|
|
||||||
const location = useLocation()
|
|
||||||
const controls = useAnimation()
|
|
||||||
const [ref, inView] = useInView({
|
|
||||||
threshold: 0.1, // Trigger when 10% of the element is in view
|
|
||||||
})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (inView) {
|
|
||||||
controls.start("visible")
|
|
||||||
} else {
|
|
||||||
controls.start("hidden")
|
|
||||||
}
|
|
||||||
}, [controls, inView])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (location.hash) {
|
|
||||||
const element = document.querySelector(location.hash)
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: "smooth" })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [location])
|
|
||||||
|
|
||||||
const textVariants = {
|
|
||||||
hidden: { opacity: 0, x: -50 },
|
|
||||||
visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
|
|
||||||
}
|
|
||||||
|
|
||||||
const formVariants = {
|
|
||||||
hidden: { opacity: 0, y: 50 },
|
|
||||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative flex min-h-screen w-full 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",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
}}
|
}}
|
||||||
ref={ref}
|
|
||||||
>
|
>
|
||||||
<div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
|
<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">
|
||||||
{/* Left Section */}
|
{/* Bagian Kiri */}
|
||||||
<motion.div
|
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
|
||||||
className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6"
|
{/* Judul utama */}
|
||||||
initial="hidden"
|
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||||
animate={controls}
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
||||||
variants={textVariants}
|
mungkin
|
||||||
>
|
|
||||||
<h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
|
|
||||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-base md:text-[18px] font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
|
|
||||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
|
{/* Deskripsi tambahan */}
|
||||||
bisnis Anda bersama Rekan AI!
|
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
||||||
|
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
|
||||||
|
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* Form Section */}
|
{/* Bagian Form */}
|
||||||
<motion.div className="w-full lg:w-7/12 xl:w-6/12" initial="hidden" animate={controls} variants={formVariants}>
|
|
||||||
<div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
|
|
||||||
<h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
|
||||||
Hubungi Tim Terbaik Kami
|
|
||||||
</h3>
|
|
||||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
|
|
||||||
|
|
||||||
<form className="flex flex-col gap-4">
|
<div
|
||||||
<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]"
|
||||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
>
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Masukkan nama Anda"
|
|
||||||
required
|
|
||||||
maxLength={50}
|
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
placeholder="Masukkan nomor telepon Anda"
|
|
||||||
required
|
|
||||||
maxLength={20}
|
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
onInput={(e) => {
|
|
||||||
e.target.value = e.target.value.replace(/[^0-9]/g, "")
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="text-[#6B5CEA]">Email*</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="Masukkan email Anda"
|
|
||||||
required
|
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
maxLength={50}
|
|
||||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
|
||||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="relative">
|
|
||||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
|
||||||
<select
|
|
||||||
required
|
|
||||||
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
|
||||||
>
|
|
||||||
<option value="">Pilih kebutuhan Anda</option>
|
|
||||||
<option value="konsultasi">Konsultasi</option>
|
|
||||||
<option value="pelatihan">Pelatihan</option>
|
|
||||||
<option value="pengembangan">Pengembangan</option>
|
|
||||||
</select>
|
|
||||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
|
||||||
<svg
|
|
||||||
className="w-8 mt-7 text-[#5B59E8]"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
{/* Judul form */}
|
||||||
type="submit"
|
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||||
className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
Hubungi Tim Terbaik Kami
|
||||||
disabled={!capchaToken}
|
</h3>
|
||||||
|
{/* Deskripsi form */}
|
||||||
|
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
|
||||||
|
Silakan isi data diri Anda pada formulir di bawah ini
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Formulir input */}
|
||||||
|
<form className="flex flex-col gap-4 px-2">
|
||||||
|
{/* Input Nama */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan nama Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Nomor Telepon */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
placeholder="Masukkan nomor telepon Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
onInput={(e) => {
|
||||||
|
e.target.value = e.target.value.replace(/[^0-9]/g, "");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Email */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA]">Email*</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Masukkan email Anda"
|
||||||
|
required
|
||||||
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Nama Organisasi */}
|
||||||
|
<div>
|
||||||
|
<label className="text-[#6B5CEA]">
|
||||||
|
Nama Organisasi/Perusahaan
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||||
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dropdown Pilih Kebutuhan */}
|
||||||
|
<div className="relative">
|
||||||
|
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||||
|
<select
|
||||||
|
required
|
||||||
|
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||||
>
|
>
|
||||||
Kirim Pesan
|
<option value="">Pilih kebutuhan Anda</option>
|
||||||
</button>
|
<option value="konsultasi">Konsultasi</option>
|
||||||
</form>
|
<option value="pelatihan">Pelatihan</option>
|
||||||
</div>
|
<option value="pengembangan">Pengembangan</option>
|
||||||
</motion.div>
|
</select>
|
||||||
|
{/* Tanda panah kustom */}
|
||||||
|
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||||
|
<svg
|
||||||
|
className="w-6 text-[#5B59E8]"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Checkbox Verifikasi */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
required
|
||||||
|
className="focus:ring-2 focus:ring-indigo-500"
|
||||||
|
/>
|
||||||
|
<span className="text-[#212121]">Saya bukan robot</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tombol Kirim */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
||||||
|
>
|
||||||
|
Kirim Pesan
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ContactForm
|
|
||||||
|
|
||||||
|
export default ContactForm;
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { useState, useRef } from "react";
|
|
||||||
|
|
||||||
const useRecaptcha = () => {
|
|
||||||
const [capchaToken, setCapchaToken] = useState(null); // Menyimpan token reCAPTCHA
|
|
||||||
const recaptchaRef = useRef(); // Menggunakan ref untuk reCAPTCHA jika perlu manipulasi lebih lanjut
|
|
||||||
|
|
||||||
// Fungsi untuk menangani perubahan token setelah reCAPTCHA berhasil
|
|
||||||
const handleRecaptcha = (token) => {
|
|
||||||
if (token) {
|
|
||||||
setCapchaToken(token); // Set token jika berhasil
|
|
||||||
} else {
|
|
||||||
setCapchaToken(null); // Reset token jika tidak ada token
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
capchaToken, // Mengembalikan token
|
|
||||||
recaptchaRef, // Referensi reCAPTCHA
|
|
||||||
handleRecaptcha, // Fungsi untuk menangani perubahan token
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useRecaptcha;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 411 B |
Binary file not shown.
|
Before Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
|
|
@ -7,11 +7,11 @@ import frame from './Frame.png';
|
||||||
import frame27 from './Frame27.png';
|
import frame27 from './Frame27.png';
|
||||||
import img10 from './image 10.png';
|
import img10 from './image 10.png';
|
||||||
import instagram from './instagram.png';
|
import instagram from './instagram.png';
|
||||||
import kmn from './Dukcapil PNG Pic.png';
|
import kmn from './kementerian.png';
|
||||||
import kominfo from './Kominfo PNG Pic.png';
|
import kominfo from './kominfo.png';
|
||||||
import Logo1 from './logo.png';
|
import Logo1 from './logo.png';
|
||||||
import nvidia from './NVIDIA PNG Pic.png';
|
import nvidia from './nvidia.png';
|
||||||
import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
|
import ojk from './ojk.png';
|
||||||
import phone from './phone.png';
|
import phone from './phone.png';
|
||||||
import search from './search.png';
|
import search from './search.png';
|
||||||
import telephone from './telephone.png';
|
import telephone from './telephone.png';
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -1,91 +0,0 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState, useRef } from "react";
|
|
||||||
import { CardCp1, CardCp2, CardCp3 } from "../asset";
|
|
||||||
|
|
||||||
const useIntersectionObserver = (options = {}) => {
|
|
||||||
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
setIsIntersecting(entry.isIntersecting);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
threshold: 0.5,
|
|
||||||
...options,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (ref.current) {
|
|
||||||
observer.observe(ref.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (ref.current) {
|
|
||||||
observer.unobserve(ref.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [options]);
|
|
||||||
|
|
||||||
return [ref, isIntersecting];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function FeatureCards() {
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
icon: CardCp1,
|
|
||||||
title: "Efisiensi Operasional",
|
|
||||||
description:
|
|
||||||
"Rekan AI menghadirkan automasi dan integrasi sistem yang mempercepat proses kerja, mengurangi biaya operasional, dan meningkatkan produktivitas di setiap lini bisnis perusahaan.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: CardCp2,
|
|
||||||
title: "Keamanan dan Kepatuhan Data",
|
|
||||||
description:
|
|
||||||
"Dengan enkripsi tingkat tinggi dan sertifikasi keamanan, Rekan AI membantu perusahaan menjaga data sensitif dan mematuhi regulasi industri yang ketat, memberikan rasa aman pada setiap transaksi dan aktivitas bisnis.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: CardCp3,
|
|
||||||
title: "Skalabilitas",
|
|
||||||
description:
|
|
||||||
"Solusi Rekan AI dirancang untuk mendukung perusahaan berskala besar dengan fleksibilitas tinggi, memungkinkan ekspansi ke berbagai pasar dan wilayah tanpa hambatan teknologi.",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
|
|
||||||
<motion.h2
|
|
||||||
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
|
|
||||||
initial={{ opacity: 0, y: -20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
>
|
|
||||||
Dengan solusi terintegrasi, <span className="text-[#CA2B68]">#Rekan AI</span>, membantu perusahaan tetap unggul dan adaptif di tengah persaingan global.
|
|
||||||
</motion.h2>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
|
||||||
{features.map((feature, index) => {
|
|
||||||
const [ref, isIntersecting] = useIntersectionObserver();
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
ref={ref}
|
|
||||||
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
|
||||||
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
|
|
||||||
>
|
|
||||||
<div className="mb-4 relative w-16 h-16">
|
|
||||||
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
|
||||||
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +1,5 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState, useRef } from "react";
|
|
||||||
import { card1, card2, card3 } from "../asset";
|
import { card1, card2, card3 } from "../asset";
|
||||||
|
|
||||||
const useIntersectionObserver = (options = {}) => {
|
|
||||||
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
setIsIntersecting(entry.isIntersecting);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
threshold: 0.5,
|
|
||||||
...options,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (ref.current) {
|
|
||||||
observer.observe(ref.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (ref.current) {
|
|
||||||
observer.unobserve(ref.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [options]);
|
|
||||||
|
|
||||||
return [ref, isIntersecting];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function FeatureCards() {
|
export default function FeatureCards() {
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
|
|
@ -54,38 +23,24 @@ export default function FeatureCards() {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
|
<div className="container mx-auto px-4 py-16 text-center">
|
||||||
<motion.h2
|
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
|
||||||
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
|
|
||||||
initial={{ opacity: 0, y: -20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
>
|
|
||||||
Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
|
Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
|
||||||
</motion.h2>
|
</h2>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
||||||
{features.map((feature, index) => {
|
{features.map((feature, index) => (
|
||||||
const [ref, isIntersecting] = useIntersectionObserver();
|
<div
|
||||||
return (
|
key={index}
|
||||||
<motion.div
|
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
||||||
key={index}
|
>
|
||||||
ref={ref}
|
<div className="mb-4 relative w-16 h-16">
|
||||||
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
||||||
initial={{ opacity: 0, y: 20 }}
|
</div>
|
||||||
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
||||||
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
|
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
||||||
>
|
</div>
|
||||||
<div className="mb-4 relative w-16 h-16">
|
))}
|
||||||
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
|
||||||
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,36 +1,5 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState, useRef } from "react";
|
|
||||||
import { CardStart1, CardStart2, CardStart3 } from "../asset";
|
import { CardStart1, CardStart2, CardStart3 } from "../asset";
|
||||||
|
|
||||||
const useIntersectionObserver = (options = {}) => {
|
|
||||||
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
setIsIntersecting(entry.isIntersecting);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
threshold: 0.5,
|
|
||||||
...options,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (ref.current) {
|
|
||||||
observer.observe(ref.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (ref.current) {
|
|
||||||
observer.unobserve(ref.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [options]);
|
|
||||||
|
|
||||||
return [ref, isIntersecting];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function FeatureCards() {
|
export default function FeatureCards() {
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
|
|
@ -54,37 +23,24 @@ export default function FeatureCards() {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
|
<div className="container mx-auto px-4 py-16 text-center">
|
||||||
<motion.h2
|
<h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
|
||||||
className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
|
Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, <br /> efisien, dan siap bersaing di era digital.
|
||||||
initial={{ opacity: 0, y: -20 }}
|
</h2>
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
>
|
|
||||||
Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, efisien, dan siap bersaing di era digital.
|
|
||||||
</motion.h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
|
||||||
{features.map((feature, index) => {
|
{features.map((feature, index) => (
|
||||||
const [ref, isIntersecting] = useIntersectionObserver();
|
<div
|
||||||
return (
|
key={index}
|
||||||
<motion.div
|
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
||||||
key={index}
|
>
|
||||||
ref={ref}
|
<div className="mb-4 relative w-16 h-16">
|
||||||
className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
|
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
||||||
initial={{ opacity: 0, y: 20 }}
|
</div>
|
||||||
animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
||||||
transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
|
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
||||||
>
|
</div>
|
||||||
<div className="mb-4 relative w-16 h-16">
|
))}
|
||||||
<img src={feature.icon} alt={feature.title} className="object-contain" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
|
|
||||||
<p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { component11, wagreen, hc } from "../asset";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
|
|
||||||
export default function HeadCorporate() {
|
|
||||||
const options = { triggerOnce: false, threshold: 0.2 };
|
|
||||||
const { ref: sectionRef, inView: sectionInView } = useInView(options);
|
|
||||||
const { ref: textRef, inView: textInView } = useInView(options);
|
|
||||||
const { ref: buttonRef, inView: buttonInView } = useInView(options);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
|
||||||
{/* Left Column */}
|
|
||||||
<motion.div
|
|
||||||
ref={textRef}
|
|
||||||
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
|
|
||||||
initial={{ opacity: 0, x: -50 }}
|
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
{/* Logo and Tagline */}
|
|
||||||
<div className="flex items-center lg:justify-start">
|
|
||||||
<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} />
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex items-center ml-[17px] justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
|
||||||
# Solusi Corporate Business
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Header Text */}
|
|
||||||
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
|
|
||||||
Inovasi Cerdas untuk Mendorong Transformasi Bisnis Skala Besar
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
|
|
||||||
Rekan AI hadir sebagai mitra strategis untuk perusahaan berskala besar, menghadirkan teknologi yang mampu mengoptimalkan proses bisnis, meningkatkan keamanan data, dan mempercepat pengambilan keputusan.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Right Column - Hero Image */}
|
|
||||||
<motion.div
|
|
||||||
className="order-2 lg:order-none flex justify-center"
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={hc}
|
|
||||||
alt="Hero Illustration"
|
|
||||||
width={716}
|
|
||||||
height={743}
|
|
||||||
className="w-full h-auto md:w-[600px] md:h-[600px]"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Buttons - Ensure they come last on mobile */}
|
|
||||||
<motion.div
|
|
||||||
ref={buttonRef}
|
|
||||||
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.button
|
|
||||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
>
|
|
||||||
Coba Sekarang
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,88 +1,65 @@
|
||||||
import { component11, wagreen, start22 } from "../asset";
|
import { component11, wagreen, start22 } from "../asset";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
|
|
||||||
export default function HeadPersonal() {
|
|
||||||
const options = { triggerOnce: false, threshold: 0.2 };
|
|
||||||
const { ref: sectionRef, inView: sectionInView } = useInView(options);
|
|
||||||
const { ref: textRef, inView: textInView } = useInView(options);
|
|
||||||
const { ref: buttonRef, inView: buttonInView } = useInView(options);
|
|
||||||
|
|
||||||
|
function HeadPersonal() {
|
||||||
return (
|
return (
|
||||||
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
|
<div
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
|
||||||
{/* Left Column */}
|
id="Home"
|
||||||
<motion.div
|
>
|
||||||
ref={textRef}
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||||
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
|
{/* Left Section */}
|
||||||
initial={{ opacity: 0, x: -50 }}
|
<div className="text-left items-center">
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
|
||||||
transition={{ duration: 0.8 }}
|
<img
|
||||||
>
|
className="w-3/4 sm:w-auto max-h-20 object-contain"
|
||||||
{/* Logo and Tagline */}
|
src={component11 || "/placeholder.svg"}
|
||||||
<div className="flex items-center lg:justify-start">
|
alt="Home Logo"
|
||||||
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
width={200}
|
||||||
<img src={component11} alt="Logo" width={53.52} height={43} />
|
height={80}
|
||||||
</span>
|
/>
|
||||||
<span className="inline-flex items-center ml-[17px] justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
<span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
||||||
# Solusi Personal
|
# Solusi Personal
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
|
||||||
{/* Header Text */}
|
|
||||||
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||||
</h1>
|
</h1>
|
||||||
|
<p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
|
||||||
{/* Description */}
|
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
|
||||||
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
|
digital. Baik Anda seorang profesional, pelajar, atau individu yang
|
||||||
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era digital. Baik Anda seorang profesional,
|
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
|
||||||
pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi
|
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
|
||||||
yang mudah digunakan, efisien, dan dapat diandalkan.
|
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* Right Column - Hero Image */}
|
{/* Right Section (Home Image) */}
|
||||||
<motion.div
|
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
|
||||||
className="order-2 lg:order-none flex justify-center"
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={start22}
|
src={start22 || "/placeholder.svg"}
|
||||||
alt="Hero Illustration"
|
alt="Home Image"
|
||||||
width={716}
|
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
||||||
height={743}
|
width={807}
|
||||||
className="w-full h-auto md:w-[600px] md:h-[600px]"
|
height={600}
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Buttons - Ensure they come last on mobile */}
|
{/* Buttons */}
|
||||||
<motion.div
|
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
|
||||||
ref={buttonRef}
|
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
<img
|
||||||
initial={{ opacity: 0, y: 50 }}
|
src={wagreen}
|
||||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
alt="WhatsApp Icon"
|
||||||
transition={{ duration: 0.8 }}
|
className="mr-2 h-[30px] w-[30px]"
|
||||||
>
|
/>
|
||||||
<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">
|
Konsultasi Gratis
|
||||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
</button>
|
||||||
Konsultasi Gratis
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
</button>
|
Coba Sekarang
|
||||||
<Link to={"/Contact#form"}>
|
</button>
|
||||||
<motion.button
|
|
||||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
>
|
|
||||||
Coba Sekarang
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default HeadPersonal;
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,65 @@
|
||||||
import { component11, wagreen, hs } from "../asset";
|
import { component11, wagreen, start22 } from "../asset";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
|
|
||||||
export default function HeadPersonal() {
|
|
||||||
const options = { triggerOnce: false, threshold: 0.2 };
|
|
||||||
const { ref: sectionRef, inView: sectionInView } = useInView(options);
|
|
||||||
const { ref: textRef, inView: textInView } = useInView(options);
|
|
||||||
const { ref: buttonRef, inView: buttonInView } = useInView(options);
|
|
||||||
|
|
||||||
|
function HeadPersonal() {
|
||||||
return (
|
return (
|
||||||
<div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
|
<div
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
|
||||||
{/* Left Column */}
|
id="Home"
|
||||||
<motion.div
|
>
|
||||||
ref={textRef}
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||||
className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
|
{/* Left Section */}
|
||||||
initial={{ opacity: 0, x: -50 }}
|
<div className="text-left items-center">
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
|
||||||
transition={{ duration: 0.8 }}
|
<img
|
||||||
>
|
className="w-3/4 sm:w-auto max-h-20 object-contain"
|
||||||
{/* Logo and Tagline */}
|
src={component11 || "/placeholder.svg"}
|
||||||
<div className="flex items-center lg:justify-start">
|
alt="Home Logo"
|
||||||
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
width={200}
|
||||||
<img src={component11} alt="Logo" width={53.52} height={43} />
|
height={80}
|
||||||
</span>
|
/>
|
||||||
<span className="inline-flex items-center ml-[17px] justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
<span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
|
||||||
# Solusi Startup
|
# Solusi Personal
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
|
||||||
{/* Header Text */}
|
Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
|
||||||
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
|
</h1>
|
||||||
Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
|
<p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
|
||||||
</h1>
|
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
|
||||||
|
digital. Baik Anda seorang profesional, pelajar, atau individu yang
|
||||||
{/* Description */}
|
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
|
||||||
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
|
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
|
||||||
Rekan AI hadir sebagai mitra terpercaya bagi Startup di seluruh Indonesia. Dengan solusi berbasis teknologi, kami membantu para pelaku pengembang Startup untuk bekerja lebih cerdas, mengurangi beban operasional, dan mencapai pertumbuhan yang berkelanjutan.
|
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* Right Column - Hero Image */}
|
{/* Right Section (Home Image) */}
|
||||||
<motion.div
|
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
|
||||||
className="order-2 lg:order-none flex justify-center"
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={textInView ? { opacity: 1, x: 0 } : {}}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={hs}
|
src={start22 || "/placeholder.svg"}
|
||||||
alt="Hero Illustration"
|
alt="Home Image"
|
||||||
width={716}
|
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
|
||||||
height={743}
|
width={807}
|
||||||
className="w-full h-auto md:w-[600px] md:h-[600px]"
|
height={600}
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Buttons - Ensure they come last on mobile */}
|
{/* Buttons */}
|
||||||
<motion.div
|
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
|
||||||
ref={buttonRef}
|
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
|
<img
|
||||||
initial={{ opacity: 0, y: 50 }}
|
src={wagreen}
|
||||||
animate={buttonInView ? { opacity: 1, y: 0 } : {}}
|
alt="WhatsApp Icon"
|
||||||
transition={{ duration: 0.8 }}
|
className="mr-2 h-[30px] w-[30px]"
|
||||||
>
|
/>
|
||||||
<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">
|
Konsultasi Gratis
|
||||||
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
</button>
|
||||||
Konsultasi Gratis
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
</button>
|
Coba Sekarang
|
||||||
<Link to={"/Contact#form"}>
|
</button>
|
||||||
<motion.button
|
|
||||||
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
>
|
|
||||||
Coba Sekarang
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default HeadPersonal;
|
||||||
|
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { chek2, wagreen, start55 } from "../asset";
|
|
||||||
|
|
||||||
function Kenapa() {
|
|
||||||
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
|
||||||
>
|
|
||||||
{/* Image Section */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={start55 || "/placeholder.svg"}
|
|
||||||
alt="Woman with Tablet"
|
|
||||||
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Text Section */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 50 }}
|
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
|
||||||
transition={{ duration: 1, delay: 0.3 }}
|
|
||||||
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-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
|
|
||||||
<p className="mt-4 text-sm md:leading-8 md:text-lg">
|
|
||||||
Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.
|
|
||||||
</p>
|
|
||||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
|
||||||
{["Standar keamanan tinggi dengan enkripsi dan sertifikasi resmi yang melindungi data perusahaan.",
|
|
||||||
"Solusi yang fleksibel dan dapat diimplementasikan di berbagai cabang perusahaan di seluruh dunia.",
|
|
||||||
"Automasi dan integrasi sistem yang mempercepat proses bisnis dan memangkas biaya operasional."].map((text, index) => (
|
|
||||||
<motion.li
|
|
||||||
key={index}
|
|
||||||
initial={{ opacity: 0, x: -30 }}
|
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
||||||
className="flex items-center"
|
|
||||||
>
|
|
||||||
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
|
|
||||||
{text}
|
|
||||||
</motion.li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.5 }}
|
|
||||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
|
||||||
>
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={wagreen || "/placeholder.svg"}
|
|
||||||
alt="WhatsApp Icon"
|
|
||||||
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
|
||||||
/>
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Kenapa;
|
|
||||||
|
|
@ -1,94 +1,69 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { chek2, wagreen, start44 } from "../asset";
|
import { chek2, wagreen, start44 } from "../asset";
|
||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
return (
|
||||||
|
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||||
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
|
{/* Image Section */}
|
||||||
|
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||||
|
<img
|
||||||
|
src={start44}
|
||||||
|
alt="Woman with Tablet"
|
||||||
|
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
{/* Text Section */}
|
||||||
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121]">
|
||||||
<motion.div
|
<h2 className="text-[32px] font-semibold">
|
||||||
initial={{ opacity: 0, y: 50 }}
|
Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
||||||
transition={{ duration: 0.8 }}
|
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.
|
||||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
</p>
|
||||||
>
|
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
||||||
{/* Image Section */}
|
<li className="flex items-center ">
|
||||||
<motion.div
|
<img
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
src={chek2}
|
||||||
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
alt="Check"
|
||||||
transition={{ duration: 1 }}
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
|
/>
|
||||||
>
|
Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.
|
||||||
<img
|
</li>
|
||||||
src={start44 || "/placeholder.svg"}
|
<li className="flex items-center">
|
||||||
alt="Woman with Tablet"
|
<img
|
||||||
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
src={chek2}
|
||||||
/>
|
alt="Check"
|
||||||
</motion.div>
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
|
/>
|
||||||
|
Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<img
|
||||||
|
src={chek2}
|
||||||
|
alt="Check"
|
||||||
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
|
/>
|
||||||
|
Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
{/* Text Section */}
|
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
|
||||||
<motion.div
|
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
|
||||||
initial={{ opacity: 0, x: 50 }}
|
<img
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
src={wagreen}
|
||||||
transition={{ duration: 1, delay: 0.3 }}
|
alt="WhatsApp Icon"
|
||||||
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] "
|
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
||||||
>
|
/>
|
||||||
<h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
|
Konsultasi Gratis
|
||||||
<p className="mt-4 text-sm md:leading-8 md:text-xl">
|
</button>
|
||||||
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.
|
<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">
|
||||||
</p>
|
Coba Sekarang
|
||||||
<ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%] font-medium">
|
</button>
|
||||||
{["Teknologi kami dirancang agar dapat diakses oleh siapa saja, tanpa memerlukan latar belakang teknis.",
|
</div>
|
||||||
"Rekan AI menawarkan solusi dengan harga yang sesuai untuk Startup.",
|
</div>
|
||||||
"Kami membantu Anda menciptakan peluang baru dengan teknologi yang mendukung setiap tahap perkembangan bisnis."].map((text, index) => (
|
</div>
|
||||||
<motion.li
|
</div>
|
||||||
key={index}
|
);
|
||||||
initial={{ opacity: 0, x: -30 }}
|
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
||||||
className="flex items-center"
|
|
||||||
>
|
|
||||||
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-9 md:h-9 mr-3" />
|
|
||||||
{text}
|
|
||||||
</motion.li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.5 }}
|
|
||||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
|
||||||
>
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={wagreen || "/placeholder.svg"}
|
|
||||||
alt="WhatsApp Icon"
|
|
||||||
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
|
||||||
/>
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Kenapa;
|
export default Kenapa;
|
||||||
|
|
|
||||||
|
|
@ -1,97 +1,77 @@
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useInView } from "react-intersection-observer";
|
|
||||||
import { chek2, wagreen, start33 } from "../asset";
|
import { chek2, wagreen, start33 } from "../asset";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
function Kenapa() {
|
function Kenapa() {
|
||||||
const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
|
|
||||||
>
|
|
||||||
{/* Image Section */}
|
{/* Image Section */}
|
||||||
<motion.div
|
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={start33 || "/placeholder.svg"}
|
src={start33}
|
||||||
alt="Woman with Tablet"
|
alt="Woman with Tablet"
|
||||||
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
|
|
||||||
{/* Text Section */}
|
{/* Text Section */}
|
||||||
<motion.div
|
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121]">
|
||||||
initial={{ opacity: 0, x: 50 }}
|
<h2 className="text-[32px] font-semibold">
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?
|
||||||
transition={{ duration: 1, delay: 0.3 }}
|
</h2>
|
||||||
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] "
|
<p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
|
||||||
>
|
Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi
|
||||||
<h2 className="text-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
|
individu yang ingin memanfaatkan kecerdasan buatan dalam kehidupan
|
||||||
<p className="mt-4 md:text-lg md:leading-8 text-sm">
|
sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola
|
||||||
Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi individu yang ingin memanfaatkan kecerdasan
|
data dengan aman, atau membuat keputusan yang lebih cerdas, Rekan AI
|
||||||
buatan dalam kehidupan sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola data dengan
|
adalah solusi tepat yang dirancang khusus untuk Anda.
|
||||||
aman, atau membuat keputusan yang lebih cerdas, Rekan AI adalah solusi tepat yang dirancang khusus untuk
|
|
||||||
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">
|
||||||
{["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.",
|
<li className="flex items-center ">
|
||||||
"Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.",
|
<img
|
||||||
"Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => (
|
src={chek2}
|
||||||
<motion.li
|
alt="Check"
|
||||||
key={index}
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
initial={{ opacity: 0, x: -30 }}
|
/>
|
||||||
animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
memerlukan keahlian teknis.
|
||||||
className="flex items-center"
|
</li>
|
||||||
>
|
<li className="flex items-center">
|
||||||
<img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
<img
|
||||||
{text}
|
src={chek2}
|
||||||
</motion.li>
|
alt="Check"
|
||||||
))}
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
|
/>
|
||||||
|
Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi
|
||||||
|
Anda tetap terlindungi.
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<img
|
||||||
|
src={chek2}
|
||||||
|
alt="Check"
|
||||||
|
className="w-6 h-6 md:w-11 md:h-11 mr-3"
|
||||||
|
/>
|
||||||
|
Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan
|
||||||
|
dengan kebutuhan individu Anda.
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
|
||||||
initial={{ opacity: 0, y: 30 }}
|
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
|
||||||
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.5 }}
|
|
||||||
className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]"
|
|
||||||
>
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={wagreen || "/placeholder.svg"}
|
src={wagreen}
|
||||||
alt="WhatsApp Icon"
|
alt="WhatsApp Icon"
|
||||||
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
|
||||||
/>
|
/>
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</motion.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">
|
||||||
<motion.button
|
Coba Sekarang
|
||||||
whileHover={{ scale: 1.05 }}
|
</button>
|
||||||
whileTap={{ scale: 0.95 }}
|
</div>
|
||||||
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"
|
</div>
|
||||||
>
|
</div>
|
||||||
Coba Sekarang
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Kenapa;
|
export default Kenapa;
|
||||||
|
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
import { data } from "./data";
|
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
|
||||||
const activeContent = data.content[activeTab];
|
|
||||||
const [isMobile, setIsMobile] = useState(false);
|
|
||||||
|
|
||||||
// Detect mobile screen size
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
handleResize(); // Inisialisasi state saat pertama kali mount
|
|
||||||
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
|
|
||||||
<p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
|
||||||
<div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
|
||||||
<div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
|
|
||||||
{data.tabs.map((button) => (
|
|
||||||
<button
|
|
||||||
key={button.key}
|
|
||||||
className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
|
|
||||||
activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
|
|
||||||
} font-semibold transition-colors`}
|
|
||||||
onClick={() => setActiveTab(button.key)}
|
|
||||||
>
|
|
||||||
{button.name}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content Section */}
|
|
||||||
{activeContent && (
|
|
||||||
<div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
|
||||||
{/* Image Section */}
|
|
||||||
<div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
|
||||||
<img
|
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
|
||||||
alt={activeContent.title}
|
|
||||||
className="object-cover w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Text Content */}
|
|
||||||
<div className="flex-1 md:pl-7 max-w-full ">
|
|
||||||
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
|
||||||
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
|
||||||
|
|
||||||
{/* Features */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{activeContent.features.map((feature, index) => (
|
|
||||||
<div key={index} className="flex items-start gap-6">
|
|
||||||
<div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
|
|
||||||
<img
|
|
||||||
src={feature.icon || "/checkmark.svg"}
|
|
||||||
alt="Feature Icon"
|
|
||||||
className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
|
|
||||||
<p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
import { maskcek, rcp1, rcp2, rcp3, rcp4, rekan1, rekan2, rekan3, rekan4 } from "../asset";
|
|
||||||
|
|
||||||
|
|
||||||
// data.json
|
|
||||||
export const data = {
|
|
||||||
title: "Solusi Bisnis",
|
|
||||||
subtitle: "Pilihan Terbaik untuk Corporate Business",
|
|
||||||
tabs: [
|
|
||||||
{ name: "Rekan HR", key: "hr" },
|
|
||||||
{ name: "Rekan Doku", key: "doku" },
|
|
||||||
{ name: "Rekan LLM", key: "llm" },
|
|
||||||
{ name: "Rekan Veri", key: "veri" }
|
|
||||||
],
|
|
||||||
content: {
|
|
||||||
hr: {
|
|
||||||
title: "Rekan HR – Transformasi Digital di Bidang Sumber Daya Manusia",
|
|
||||||
description:
|
|
||||||
"Perusahaan besar dengan jumlah karyawan yang masif memerlukan sistem HR yang efisien dan terintegrasi. Rekan HR menawarkan solusi digital untuk mengelola SDM secara efektif.",
|
|
||||||
image: rcp1,
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
title: "Automasi HR Komprehensif",
|
|
||||||
description:
|
|
||||||
"Otomatiskan proses penggajian, manajemen kinerja, rekrutmen, dan administrasi karyawan dalam satu platform.",
|
|
||||||
icon: maskcek
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Analisis Kinerja SDM",
|
|
||||||
description:
|
|
||||||
"Dapatkan laporan analisis mendalam mengenai produktivitas dan kinerja tim untuk mendukung pengembangan SDM.",
|
|
||||||
icon: maskcek
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
doku: {
|
|
||||||
title: "Rekan Doku – Otomasi Dokumen untuk Skala Operasi yang Lebih Besar",
|
|
||||||
description:
|
|
||||||
"Rekan Doku mendukung perusahaan besar dalam mengelola ribuan dokumen dengan aman dan efisien. Solusi ini dirancang untuk mempercepat proses bisnis sekaligus menjaga kepatuhan terhadap regulasi.",
|
|
||||||
image: rcp2,
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
title: "Autentikasi Dokumen Legal",
|
|
||||||
description:
|
|
||||||
"Proses penandatanganan dokumen menjadi lebih aman dan efisien dengan e-Meterai dan tanda tangan digital yang diakui secara hukum.",
|
|
||||||
icon: maskcek
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Integrasi Sistem Dokumen",
|
|
||||||
description:
|
|
||||||
"Kelola dan arsipkan dokumen penting secara otomatis dengan sistem terpusat yang terintegrasi dengan workflow perusahaan.",
|
|
||||||
icon: maskcek
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
llm: {
|
|
||||||
title: "Rekan LLM – Optimalisasi Strategi Bisnis dengan Kecerdasan Buatan",
|
|
||||||
description:
|
|
||||||
"Perusahaan besar membutuhkan analisis data yang mendalam dan akurat untuk mendukung keputusan strategis. Rekan LLM menghadirkan solusi AI yang dapat memproses data dalam skala besar dan memberikan insight berharga.",
|
|
||||||
image: rcp3,
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
title: "Prediksi Pasar dan Risiko",
|
|
||||||
description:
|
|
||||||
"Gunakan AI untuk mengidentifikasi tren pasar dan meminimalisir risiko bisnis melalui prediksi yang akurat.",
|
|
||||||
icon: maskcek
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Integrasi AI ke Proses Bisnis",
|
|
||||||
description:
|
|
||||||
"Sesuaikan solusi AI dengan kebutuhan spesifik perusahaan untuk mendukung inovasi dan pengembangan bisnis.",
|
|
||||||
icon: maskcek
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
veri: {
|
|
||||||
title: "Rekan Veri – Perlindungan Data dan Mitigasi Risiko Bisnis",
|
|
||||||
description:
|
|
||||||
"Perusahaan besar memerlukan keakuratan data yang tinggi untuk mendukung proses bisnis dan mitigasi risiko. Rekan Veri menyediakan verifikasi data yang cepat dan akurat untuk memastikan kelancaran bisnis.",
|
|
||||||
image: rcp4,
|
|
||||||
features: [
|
|
||||||
{
|
|
||||||
title: "Verifikasi Data Real-Time",
|
|
||||||
description:
|
|
||||||
"Validasi identitas pelanggan, mitra bisnis, atau karyawan secara instan untuk mendukung kepatuhan dan keamanan perusahaan.",
|
|
||||||
icon: maskcek
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Pengurangan Risiko Fraud",
|
|
||||||
description:
|
|
||||||
"Cegah potensi penipuan dengan verifikasi data yang komprehensif dan terintegrasi.",
|
|
||||||
icon: maskcek
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,25 +1,12 @@
|
||||||
import { useState, useEffect } from "react";
|
import { useState } from "react";
|
||||||
import { data } from "./data";
|
import { data } from "./data";
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
export default function BusinessSolution() {
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
const [activeTab, setActiveTab] = useState("hr");
|
||||||
const activeContent = data.content[activeTab];
|
const activeContent = data.content[activeTab];
|
||||||
const [isMobile, setIsMobile] = useState(false);
|
|
||||||
|
|
||||||
// Detect mobile screen size
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
handleResize(); // Inisialisasi state saat pertama kali mount
|
|
||||||
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
<div className="min-h-screen p-4">
|
||||||
{/* 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 +14,8 @@ export default function BusinessSolution() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* Navigation Buttons */}
|
||||||
<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="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||||
<div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
|
<div className="flex 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 +32,9 @@ export default function BusinessSolution() {
|
||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{activeContent && (
|
||||||
<div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
<div className="max-w-7xl 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 sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||||
<img
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
|
|
@ -56,7 +43,7 @@ export default function BusinessSolution() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Content */}
|
{/* Text Content */}
|
||||||
<div className="flex-1 md:pl-7 max-w-full ">
|
<div className="flex-1 max-w-full md:max-w-[600px]">
|
||||||
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
||||||
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { maskcek, rekan1, rekan2, rekan3, rekan4 } from "../asset";
|
||||||
// data.json
|
// data.json
|
||||||
export const data = {
|
export const data = {
|
||||||
title: "Solusi Bisnis",
|
title: "Solusi Bisnis",
|
||||||
subtitle: "Pilihan Terbaik untuk Solusi Bisnis Personal",
|
subtitle: "Pilihan Terbaik untuk Solusi Bisnis UMKM",
|
||||||
tabs: [
|
tabs: [
|
||||||
{ name: "Rekan HR", key: "hr" },
|
{ name: "Rekan HR", key: "hr" },
|
||||||
{ name: "Rekan Doku", key: "doku" },
|
{ name: "Rekan Doku", key: "doku" },
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,12 @@
|
||||||
import { useState, useEffect } from "react";
|
import { useState } from "react";
|
||||||
import { data } from "./data";
|
import { data } from "./data";
|
||||||
|
|
||||||
export default function BusinessSolution() {
|
export default function BusinessSolution() {
|
||||||
const [activeTab, setActiveTab] = useState("hr");
|
const [activeTab, setActiveTab] = useState("hr");
|
||||||
const activeContent = data.content[activeTab];
|
const activeContent = data.content[activeTab];
|
||||||
const [isMobile, setIsMobile] = useState(false);
|
|
||||||
|
|
||||||
// Detect mobile screen size
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
handleResize(); // Inisialisasi state saat pertama kali mount
|
|
||||||
|
|
||||||
return () => window.removeEventListener("resize", handleResize);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container w-[90vw] mx-auto p-4 overflow-hidden">
|
<div className="min-h-screen p-4">
|
||||||
{/* 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 +14,8 @@ export default function BusinessSolution() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Buttons */}
|
{/* Navigation Buttons */}
|
||||||
<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="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||||
<div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
|
<div className="flex 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 +32,9 @@ export default function BusinessSolution() {
|
||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
{activeContent && (
|
{activeContent && (
|
||||||
<div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
<div className="max-w-7xl 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 sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||||
<img
|
<img
|
||||||
src={activeContent.image || "/placeholder.svg"}
|
src={activeContent.image || "/placeholder.svg"}
|
||||||
alt={activeContent.title}
|
alt={activeContent.title}
|
||||||
|
|
@ -56,7 +43,7 @@ export default function BusinessSolution() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Content */}
|
{/* Text Content */}
|
||||||
<div className="flex-1 md:pl-7 max-w-full ">
|
<div className="flex-1 max-w-full md:max-w-[600px]">
|
||||||
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
<h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
|
||||||
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
<p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,59 +35,59 @@ export const data = {
|
||||||
doku: {
|
doku: {
|
||||||
title: "Rekan Doku – Autentikasi dan Manajemen Dokumen Digital",
|
title: "Rekan Doku – Autentikasi dan Manajemen Dokumen Digital",
|
||||||
description:
|
description:
|
||||||
"Kelola dan autentikasi dokumen bisnis Anda dengan lebih mudah dan aman. Rekan Doku menawarkan solusi lengkap untuk memastikan dokumen Anda sah secara hukum dan tersimpan dengan rapi.",
|
"Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
|
||||||
image: rs2,
|
image: rs2,
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
title: "Autentikasi Dokumen Digital",
|
title: "Autentikasi Dokumen Digital",
|
||||||
description:
|
description:
|
||||||
"Legalkan dokumen bisnis dengan mudah menggunakan e-Meterai dan tanda tangan digital yang diakui secara hukum, memastikan transaksi dan kerja sama bisnis berjalan aman.",
|
"Berikan keabsahan pada dokumen penting seperti kontrak kerja, sertifikat, atau surat pribadi dengan e-Meterai dan tanda tangan digital yang diakui secara hukum.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Manajemen Dokumen Terpusat",
|
title: "Manajemen Dokumen Terpusat",
|
||||||
description:
|
description:
|
||||||
"Akses dan kelola seluruh dokumen penting di satu platform yang aman dan terstruktur, memudahkan pelacakan dan pengarsipan dokumen bisnis.",
|
"Simpan, atur, dan akses dokumen kapan saja dari satu platform yang aman, memastikan kemudahan dan kenyamanan Anda.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
llm: {
|
llm: {
|
||||||
title: "Rekan LLM – Analisis dan Pengambilan Keputusan Berbasis AI",
|
title: "Rekan LLM – Kecerdasan Teknologi untuk Mendukung Kehidupan Anda",
|
||||||
description:
|
description:
|
||||||
"Dapatkan wawasan mendalam dan strategi bisnis yang lebih tepat melalui analisis data berbasis AI. Rekan LLM membantu Startup memahami pasar dan pelanggan untuk pengambilan keputusan yang lebih efektif.",
|
"Rekan LLM memberikan kemudahan bagi Anda untuk memahami data, mendapatkan wawasan, dan meningkatkan efisiensi sehari-hari.",
|
||||||
image: rs3,
|
image: rs3,
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
title: "Analisis Berbasis AI",
|
title: "Analisis Pribadi Berbasis AI",
|
||||||
description:
|
description:
|
||||||
"Olah data penjualan dan perilaku pelanggan untuk merancang strategi pemasaran yang lebih terarah dan efektif.",
|
"Gunakan data untuk memahami pola pengeluaran, perencanaan keuangan, atau tren yang relevan dengan kebutuhan Anda.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Pengambilan Keputusan Lebih Tepat",
|
title: "Keputusan Lebih Tepat dengan Data",
|
||||||
description:
|
description:
|
||||||
"Dukung pertumbuhan bisnis dengan data yang dapat diandalkan, sehingga Anda dapat mengambil langkah strategis dengan percaya diri.",
|
"Dapatkan rekomendasi berbasis AI untuk berbagai keputusan penting, dari belanja hingga perencanaan aktivitas.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
veri: {
|
veri: {
|
||||||
title: "Rekan Veri – Percepat Bisnis dengan Keakuratan Data",
|
title: "Rekan Veri – Data yang Tepat untuk Keputusan yang Benar",
|
||||||
description:
|
description:
|
||||||
"Bangun kepercayaan pelanggan dengan data yang valid dan terverifikasi. Rekan Veri membantu Startup memastikan semua informasi mitra dan pelanggan terkonfirmasi dengan cepat.",
|
"Lindungi diri Anda dari risiko dengan memastikan keakuratan data dalam berbagai kebutuhan pribadi. Rekan Veri adalah solusi cepat untuk memvalidasi informasi penting.",
|
||||||
image: rs4,
|
image: rs4,
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
title: "Verifikasi Data yang Cepat",
|
title: "Verifikasi Data Cepat",
|
||||||
description:
|
description:
|
||||||
"Validasi data pelanggan atau mitra bisnis secara real-time untuk mendukung kelancaran transaksi dan menjaga reputasi bisnis.",
|
"Gunakan sistem canggih untuk memverifikasi identitas pelanggan dengan cepat dan akurat.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Efisiensi Administrasi",
|
title: "Efisiensi dalam Verifikasi",
|
||||||
description:
|
description:
|
||||||
"Sederhanakan proses administrasi dengan fitur verifikasi otomatis, menghemat waktu dan tenaga dalam pengelolaan data penting.",
|
"Hemat waktu dengan fitur verifikasi otomatis yang memberikan hasil instan dan akurat.",
|
||||||
icon: maskcek
|
icon: maskcek
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { wagreen } from "../asset";
|
||||||
|
|
||||||
|
function MasaDepan() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
|
||||||
|
{/* Tagline Section */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
||||||
|
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
||||||
|
#Rekan AI
|
||||||
|
</span>
|
||||||
|
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
||||||
|
Transformasi Digital Anda Dimulai di Sini
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
||||||
|
Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
|
||||||
|
<span className="block sm:hidden mt-2">
|
||||||
|
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||||
|
</span>
|
||||||
|
<span className="hidden sm:block mt-2">
|
||||||
|
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col justify-center md:-mt-60 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-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
|
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MasaDepan;
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { wagreen } from "../asset";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
function Transformasi() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
|
|
||||||
>
|
|
||||||
{/* Tagline Section */}
|
|
||||||
<div className="mb-5">
|
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
|
||||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
|
||||||
#Rekan AI
|
|
||||||
</span>
|
|
||||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
|
||||||
Transformasi Digital Anda Dimulai di Sini
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
|
||||||
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
|
|
||||||
>
|
|
||||||
<motion.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]"
|
|
||||||
>
|
|
||||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Transformasi;
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import { wagreen } from "../asset";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
function Transformasi() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
|
|
||||||
>
|
|
||||||
{/* Tagline Section */}
|
|
||||||
<div className="mb-5">
|
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
|
||||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
|
||||||
#Rekan AI
|
|
||||||
</span>
|
|
||||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
|
||||||
Transformasi Digital Anda Dimulai di Sini
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
|
||||||
Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
|
|
||||||
<span className="block sm:hidden mt-2">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</span>
|
|
||||||
<span className="hidden sm:block mt-2">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
|
|
||||||
>
|
|
||||||
<motion.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]"
|
|
||||||
>
|
|
||||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Transformasi;
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { wagreen } from "../asset";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
function Transformasi() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
|
|
||||||
>
|
|
||||||
{/* Tagline Section */}
|
|
||||||
<div className="mb-5">
|
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
|
||||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
|
||||||
#Rekan AI
|
|
||||||
</span>
|
|
||||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
|
||||||
Transformasi Digital Anda Dimulai di Sini
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
|
||||||
Dengan Rekan AI, Startup dan perusahaan besar memiliki akses ke teknologi yang sama-sama
|
|
||||||
<span className="block sm:hidden mt-2">
|
|
||||||
memberdayakan – membawa bisnis ke level berikutnya
|
|
||||||
</span>
|
|
||||||
<span className="hidden sm:block mt-2">
|
|
||||||
memberdayakan – membawa bisnis ke level berikutnya
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
||||||
viewport={{ once: false, amount: 0.2 }}
|
|
||||||
className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0"
|
|
||||||
>
|
|
||||||
<motion.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]"
|
|
||||||
>
|
|
||||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</motion.button>
|
|
||||||
<Link to={"/Contact#form"}>
|
|
||||||
<motion.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
|
|
||||||
</motion.button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Transformasi;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 650 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
|
|
@ -21,7 +21,7 @@ import x from "./x.png";
|
||||||
import chek2 from "./Frame 811480.png";
|
import chek2 from "./Frame 811480.png";
|
||||||
import start22 from "./Frame 811554.png";
|
import start22 from "./Frame 811554.png";
|
||||||
import maskcek from "./Mask group (1).png";
|
import maskcek from "./Mask group (1).png";
|
||||||
import card1 from "./Frame 8115681.png";
|
import card1 from "./Play Now (33) 1.png";
|
||||||
import card2 from "./Play Now (32) 1.png";
|
import card2 from "./Play Now (32) 1.png";
|
||||||
import card3 from "./Play Now (30) 2.png";
|
import card3 from "./Play Now (30) 2.png";
|
||||||
import rekan1 from "./Play Now (34) 1.png";
|
import rekan1 from "./Play Now (34) 1.png";
|
||||||
|
|
@ -33,22 +33,10 @@ import CardStart1 from "./Play Now (30) 3.png"
|
||||||
import CardStart2 from "./Play Now (32) 2.png"
|
import CardStart2 from "./Play Now (32) 2.png"
|
||||||
import CardStart3 from "./Play Now (30) 1.png"
|
import CardStart3 from "./Play Now (30) 1.png"
|
||||||
import start44 from "./Frame 811556.png"
|
import start44 from "./Frame 811556.png"
|
||||||
import hs from "./Frame 811557.png"
|
|
||||||
import rs1 from "./Frame 87.png"
|
import rs1 from "./Frame 87.png"
|
||||||
import rs2 from "./Frame 87 (1).png"
|
import rs2 from "./Frame 87 (1).png"
|
||||||
import rs3 from "./Frame 87 (2).png"
|
import rs3 from "./Frame 87 (2).png"
|
||||||
import rs4 from "./Frame 87 (3).png"
|
import rs4 from "./Frame 87 (3).png"
|
||||||
import hc from './Frame 811558.png'
|
|
||||||
import CardCp1 from './Frame 811568.png'
|
|
||||||
import CardCp2 from './Frame 811568 (1).png'
|
|
||||||
import CardCp3 from './Frame 811568 (2).png'
|
|
||||||
import start55 from './Frame 811559.png'
|
|
||||||
import rcp1 from './Frame 87 (4).png'
|
|
||||||
import rcp2 from './Frame 87 (5).png'
|
|
||||||
import rcp3 from './Frame 87 (6).png'
|
|
||||||
import rcp4 from './Frame 87 (7).png'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
row,
|
row,
|
||||||
|
|
@ -86,18 +74,8 @@ export {
|
||||||
CardStart2,
|
CardStart2,
|
||||||
CardStart3,
|
CardStart3,
|
||||||
start44,
|
start44,
|
||||||
hs,
|
|
||||||
rs1,
|
rs1,
|
||||||
rs2,
|
rs2,
|
||||||
rs3,
|
rs3,
|
||||||
rs4,
|
rs4,
|
||||||
hc,
|
|
||||||
CardCp1,
|
|
||||||
CardCp2,
|
|
||||||
CardCp3,
|
|
||||||
start55,
|
|
||||||
rcp1,
|
|
||||||
rcp2,
|
|
||||||
rcp3,
|
|
||||||
rcp4,
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ 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/beranda/Footer"
|
import Footer from "../components/contact/Footer"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
import Header from "../components/beranda/Header"
|
||||||
import Header from "../components/beranda/Header";
|
import Hero from "../components/beranda/Hero"
|
||||||
import Hero from "../components/beranda/Hero";
|
import Solusi from "../components/beranda/Solusi"
|
||||||
import Solusi from "../components/beranda/Solusi";
|
import Banner from "../components/beranda/Banner"
|
||||||
import Banner from "../components/beranda/Banner";
|
import Kenapa from "../components/beranda/Kenapa"
|
||||||
import Kenapa from "../components/beranda/Kenapa";
|
import Mitra from '../components/beranda/Mitra'
|
||||||
import Mitra from '../components/beranda/Mitra';
|
import Mendukung from "../components/beranda/Mendukung"
|
||||||
import Mendukung from "../components/beranda/Mendukung";
|
import Footer from "../components/contact/Footer"
|
||||||
import Footer from "../components/beranda/Footer";
|
import MasaDepan from "../components/beranda/MasaDepan"
|
||||||
import MasaDepan from "../components/beranda/MasaDepan";
|
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||||
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;
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import Header from "../components/beranda/Header"
|
|
||||||
import HeadCorporate from "../components/solusi/HeadCorporate/HeadCorporate"
|
|
||||||
import CardCorporate from '../components/solusi/CardCorporate/CardCorporate'
|
|
||||||
import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorporate'
|
|
||||||
import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
|
|
||||||
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
|
||||||
import Footer from "../components/beranda/Footer"
|
|
||||||
function Contact() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<HeadCorporate />
|
|
||||||
<CardCorporate />
|
|
||||||
<MengapaCorporate />
|
|
||||||
<SolusiCorporate />
|
|
||||||
<TransformasiCorpo />
|
|
||||||
<Footer />
|
|
||||||
<WhatsAppButton />
|
|
||||||
</>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Contact
|
|
||||||
|
|
@ -3,9 +3,9 @@ import HeadPersonal from '../components/solusi/HeadPersonal/HeadPersonal'
|
||||||
import CardPersonal from '../components/solusi/CardPersonal/CardPersonal'
|
import CardPersonal from '../components/solusi/CardPersonal/CardPersonal'
|
||||||
import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal'
|
import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal'
|
||||||
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
||||||
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
import Transformas from '../components/solusi/Transformasi/Transformas'
|
||||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||||
import Footer from "../components/beranda/Footer"
|
import Footer from "../components/contact/Footer"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -14,7 +14,7 @@ function Contact() {
|
||||||
<CardPersonal />
|
<CardPersonal />
|
||||||
<MengapapPersonal />
|
<MengapapPersonal />
|
||||||
<SolusiPersonal />
|
<SolusiPersonal />
|
||||||
<TransformasiPersonal />
|
<Transformas />
|
||||||
<Footer />
|
<Footer />
|
||||||
<WhatsAppButton />
|
<WhatsAppButton />
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
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/beranda/Footer"
|
import Footer from "../components/contact/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"
|
||||||
import TransformasiStart from "../components/solusi/TransformasiStart/TransformasiStart"
|
import Transformas from "../components/solusi/Transformasi/Transformas"
|
||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -14,7 +14,7 @@ function Contact() {
|
||||||
<CardStartup />
|
<CardStartup />
|
||||||
<MengapaStartup />
|
<MengapaStartup />
|
||||||
<SolusiStartup />
|
<SolusiStartup />
|
||||||
<TransformasiStart />
|
<Transformas />
|
||||||
<Footer />
|
<Footer />
|
||||||
<WhatsAppButton />
|
<WhatsAppButton />
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue