Compare commits
No commits in common. "b0c0bdedd187937c21376c8428c8858492646136" and "main" have entirely different histories.
b0c0bdedd1
...
main
|
|
@ -0,0 +1,8 @@
|
|||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
39
index.html
39
index.html
|
|
@ -1,23 +1,20 @@
|
|||
<!doctype html> <!-- Menandakan bahwa ini adalah dokumen HTML5 -->
|
||||
<html lang="en"> <!-- Menentukan bahasa utama dari halaman adalah bahasa Inggris -->
|
||||
<head>
|
||||
<meta charset="UTF-8" /> <!-- Menentukan karakter encoding untuk halaman ini (UTF-8 mencakup banyak karakter internasional) -->
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <!-- Menentukan favicon halaman (ikon kecil di tab browser) -->
|
||||
|
||||
<!-- Mengimpor font 'Montserrat' dari Google Fonts untuk digunakan di seluruh halaman -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<!-- Menentukan viewport untuk memastikan aplikasi responsif pada perangkat mobile (agar skalanya sesuai dengan lebar layar perangkat) -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Menentukan judul halaman yang akan ditampilkan di tab browser -->
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Elemen dengan id 'root' adalah tempat di mana aplikasi React akan di-render -->
|
||||
<div id="root"></div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<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.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet">
|
||||
<title>REKAN AI</title>
|
||||
</head>
|
||||
|
||||
<!-- Menyisipkan script utama aplikasi React. Menggunakan 'type="module"' karena kita menggunakan ES Modules -->
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,15 +1,19 @@
|
|||
{
|
||||
"name": "rekanaiv3",
|
||||
"name": "rekan-ai-tailwind",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "rekanaiv3",
|
||||
"name": "rekan-ai-tailwind",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.4.3",
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
@ -1399,6 +1403,12 @@
|
|||
"@babel/types": "^7.20.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||
|
|
@ -2022,6 +2032,15 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
|
||||
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
|
|
@ -2846,6 +2865,33 @@
|
|||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.4.3",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.3.tgz",
|
||||
"integrity": "sha512-rsMeO7w3dKyNG09o3cGwSH49iHU+VgDmfSSfsX+wfkO3zDA6WWkh4sUsMXd155YROjZP+7FTIhDrBYfgZeHjKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.0.0",
|
||||
"motion-utils": "^12.0.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -3166,6 +3212,15 @@
|
|||
"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": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
|
|
@ -3904,6 +3959,21 @@
|
|||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
|
||||
"integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
|
||||
"integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
|
@ -3980,7 +4050,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -4467,7 +4536,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
|
|
@ -4518,6 +4586,19 @@
|
|||
"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": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
|
|
@ -4531,11 +4612,38 @@
|
|||
"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": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
|
|
@ -4548,6 +4656,46 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
|
||||
"integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0",
|
||||
"turbo-stream": "2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
|
||||
"integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
@ -4791,6 +4939,12 @@
|
|||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
|
||||
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
|
|
@ -5328,6 +5482,18 @@
|
|||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/turbo-stream": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "rekanaiv3",
|
||||
"name": "rekan-ai-tailwind",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
|
|
@ -10,8 +10,12 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.4.3",
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
|
|||
36
src/App.jsx
36
src/App.jsx
|
|
@ -1,23 +1,25 @@
|
|||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
||||
import CustomerService from "./componen/customer/CustomerService"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
||||
import FormSection from "./componen/form/FormSection"; // Mengimpor komponen FormSection yang berisi form
|
||||
import FAQ from "./componen/faq/FAQSection"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
||||
import BottomCTA from "./componen/bottom/BottomCTA"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
||||
import Footer from "./componen/footer/Footer"; // Mengimpor komponen Footer untuk menampilkan bagian footer
|
||||
import WhatsAppButton from "./componen/whatsappbutton/whatsappbutton"; // Mengimpor komponen WhatsAppButton untuk menampilkan tombol WhatsApp
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Contact from "./pages/Contact"
|
||||
import Home from "./pages/Home"
|
||||
import FormSection from "./components/contact/FormSection"
|
||||
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||
import SolusiStartup from "./pages/SolusiStartup"
|
||||
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Header /> {/* Menampilkan komponen Header */}
|
||||
<CustomerService /> {/* Menampilkan komponen CustomerService */}
|
||||
<FormSection /> {/* Menampilkan komponen FormSection */}
|
||||
<FAQ /> {/* Menampilkan komponen FAQ */}
|
||||
<BottomCTA /> {/* Menampilkan komponen BottomCTA */}
|
||||
<Footer /> {/* Menampilkan komponen Footer */}
|
||||
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
||||
</>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/Contact' element={<Contact/>}/>
|
||||
<Route path='/FormSection' element={<FormSection/>}/>
|
||||
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
|
Before Width: | Height: | Size: 715 B After Width: | Height: | Size: 715 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 930 B |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 596 B After Width: | Height: | Size: 596 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
Binary file not shown.
|
After Width: | Height: | Size: 862 B |
Binary file not shown.
|
After Width: | Height: | Size: 653 B |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
|
Before Width: | Height: | Size: 881 B After Width: | Height: | Size: 881 B |
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
|
|
@ -0,0 +1,88 @@
|
|||
import Logo1 from './image/logo.png'
|
||||
import search from './image/search.png';
|
||||
import IconPersonal from './image/Frame 18.png';
|
||||
import IconStartup from './image/Frame 18 (1).png';
|
||||
import IconCorporate from './image/Frame 18 (2).png';
|
||||
import ProdukHr from './image/Frame 18 (3).png';
|
||||
import ProdukDoku from './image/Frame 18 (4).png';
|
||||
import ProdukLlm from './image/Frame 18 (5).png';
|
||||
import ProdukVeri from './image/Frame 18 (6).png';
|
||||
import row from './image/arrow.png';
|
||||
import row2 from './image/vector.png';
|
||||
import homeLogo from './image/Component 1.png';
|
||||
import waButton from './image/Frame 27.png';
|
||||
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
|
||||
import homeImg from './image/Pic Beranda Rekan AI.png';
|
||||
import card1 from './image/rekan hr.png';
|
||||
import card2 from './image/rekan doku.png';
|
||||
import card3 from './image/rekan llm.png';
|
||||
import card4 from './image/rekan veri.png';
|
||||
import chek from './image/cheklist.png';
|
||||
import waIcon2 from './image/whatsapp-color_svgrepo.com.png'
|
||||
import L1 from './image/Frame 811520.png'
|
||||
import L3 from './image/Frame 811523.png'
|
||||
import L2 from './image/Frame 811521.png'
|
||||
import L4 from './image/Frame 811522.png'
|
||||
import R1 from './image/Frame 811517.png'
|
||||
import R3 from './image/Frame 811518.png'
|
||||
import R2 from './image/Frame 811516.png'
|
||||
import R4 from './image/Frame 811519.png'
|
||||
import bgcBanner from './image/image 10.png'
|
||||
import imgLeft from './image/Component 4.png';
|
||||
import chek2 from './image/cheklist.png';
|
||||
import circle1 from './image/Ellipse 2.png';
|
||||
import circle2 from './image/Ellipse 3.png';
|
||||
import mitraImg from "./image/Frame 811516 (3).png";
|
||||
import arrow1 from "./image/slider/Vector (1).png";
|
||||
import arrow2 from "./image/slider/Vector.png";
|
||||
import swipper1 from "./image/slider/1.png";
|
||||
import swipper2 from "./image/slider/2.png";
|
||||
import swipper3 from "./image/slider/3.png";
|
||||
import swipper4 from "./image/slider/4.png";
|
||||
import swipper5 from "./image/slider/5.png";
|
||||
import swipper6 from "./image/slider/6.png";
|
||||
import swipper7 from "./image/slider/7.png";
|
||||
import swipper8 from "./image/slider/8.png";
|
||||
import swipper9 from "./image/slider/9.png";
|
||||
import swipper10 from "./image/slider/10.png";
|
||||
import swipper11 from "./image/slider/11.png";
|
||||
import swipper12 from "./image/slider/12.png";
|
||||
import swipper13 from "./image/slider/13.png";
|
||||
import swipper14 from "./image/slider/14.png";
|
||||
import swipper15 from "./image/slider/15.png";
|
||||
import swipper16 from "./image/slider/16.png";
|
||||
import swipper17 from "./image/slider/17.png";
|
||||
import swipper18 from "./image/slider/18.png";
|
||||
import swipper19 from "./image/slider/19.png";
|
||||
import swipper20 from "./image/slider/20.png";
|
||||
import swipper21 from "./image/slider/21.png";
|
||||
import swipper22 from "./image/slider/22.png";
|
||||
import swipper23 from "./image/slider/23.png";
|
||||
import swipper24 from "./image/slider/24.png";
|
||||
import bgSwiper from "./image/image 16.png";
|
||||
import imgLeft2 from './image/Frame 811531.png';
|
||||
import imgLeft1 from './image/Frame 811530.png';
|
||||
import imgLeft3 from './image/Frame 811533.png';
|
||||
import imgRight from './image/Component 6.png';
|
||||
import nvdia from "./image/NVIDIA PNG Pic.png";
|
||||
import kmn from "./image/Dukcapil PNG Pic.png";
|
||||
import kominfo from "./image/Kominfo PNG Pic.png";
|
||||
import ojk from "./image/OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
|
||||
import facebook from "./image/fb.png";
|
||||
import x from "./image/twitter.png";
|
||||
import instagram from "./image/ig.png";
|
||||
import frame from "./image/Component 11.png";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export{
|
||||
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,
|
||||
mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
|
||||
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
|
||||
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,
|
||||
swipper23,swipper24,bgSwiper,imgLeft1,imgLeft2,imgLeft3,imgRight,nvdia,kmn,kominfo,
|
||||
ojk,facebook,x,instagram,frame,IconPersonal,IconStartup,IconCorporate,ProdukDoku,ProdukHr,ProdukVeri,ProdukLlm
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,102 +0,0 @@
|
|||
import { useState } from 'react';
|
||||
import { Logo1,search,row } from '../asset'; // Mengimpor logo
|
||||
|
||||
const Header = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Menyimpan status menu mobile (terbuka atau tertutup)
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
<nav className="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" /> {/* Menampilkan logo dengan ukuran spesifik */}
|
||||
</div>
|
||||
|
||||
{/* Tombol Hamburger (Responsive) */}
|
||||
<div className="sm:hidden flex items-center">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} // Mengubah status menu mobile saat tombol ditekan
|
||||
className="text-[#212121]"
|
||||
>
|
||||
{/* Icon hamburger (menu mobile) */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Menu Navigasi */}
|
||||
<ul
|
||||
className={`${
|
||||
isMobileMenuOpen ? 'flex' : 'hidden' // Menampilkan menu jika isMobileMenuOpen true, jika tidak disembunyikan
|
||||
} sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}
|
||||
>
|
||||
{/* Menu Item Beranda */}
|
||||
<li className="relative group">
|
||||
<a href="#home" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||
Beranda
|
||||
</a>
|
||||
</li>
|
||||
{/* Menu Item Produk */}
|
||||
<li className="relative group">
|
||||
<a href="#produk" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
|
||||
Produk
|
||||
<img src={row} alt="arrow" className="ml-1" /> {/* Ikon panah untuk dropdown Produk */}
|
||||
</a>
|
||||
{/* Dropdown menu untuk Produk */}
|
||||
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#produk1" className="text-[#212121]">Produk 1</a>
|
||||
</li>
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#produk2" className="text-[#212121]">Produk 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* Menu Item Solusi */}
|
||||
<li className="relative group">
|
||||
<a href="#solusi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center">
|
||||
Solusi
|
||||
<img src={row} alt="arrow" className="ml-1" /> {/* Ikon panah untuk dropdown Solusi */}
|
||||
</a>
|
||||
{/* Dropdown menu untuk Solusi */}
|
||||
<ul className="absolute left-0 top-full hidden w-40 bg-white list-none py-2 shadow-lg group-hover:block z-50">
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#solusi1" className="text-[#212121]">Solusi 1</a>
|
||||
</li>
|
||||
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||
<a href="#solusi2" className="text-[#212121]">Solusi 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* Menu Item Hubungi Kami */}
|
||||
<li>
|
||||
<a href="#hubungi" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||
Hubungi Kami
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Pencarian */}
|
||||
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pencarian..."
|
||||
className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" // Field input pencarian
|
||||
/>
|
||||
{/* Tombol Pencarian */}
|
||||
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
|
||||
<img src={search} alt="search" className="w-5 h-5" /> {/* Menampilkan ikon pencarian */}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tombol Konsultasi */}
|
||||
<button className="bg-[#DC0168] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0">
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { wagreen } from "../asset"; // Import gambar WhatsApp untuk ikon
|
||||
|
||||
const BottomCTA = () => {
|
||||
return (
|
||||
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
||||
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
<h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
|
||||
Masih punya pertanyaan seputar
|
||||
</h3>
|
||||
|
||||
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
|
||||
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
||||
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
||||
#Rekan AI
|
||||
</span>
|
||||
<span className="font-semibold ml-1">?</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Pesan yang memberi tahu pengguna untuk menghubungi jika pertanyaan belum terjawab */}
|
||||
<p className=" text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
|
||||
Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />kontak atau email. Kami dengan senang hati akan membantu!
|
||||
</p>
|
||||
|
||||
{/* Bagian tombol CTA */}
|
||||
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
|
||||
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
||||
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
{/* Gambar WhatsApp di kiri tombol */}
|
||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
|
||||
{/* Tombol Coba Sekarang dengan efek gradient */}
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomCTA;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { email, phone, customer } from "../asset";
|
||||
|
||||
const CustomerService = () => {
|
||||
return (
|
||||
<section className="main-container mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 mb-[114px] 2xl:px-20 2xl:gap-20">
|
||||
{/* Container utama */}
|
||||
|
||||
<div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
|
||||
{/* Teks dan informasi */}
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] 2xl:text-[28px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
Kami Siap Membantu Bisnis{" "}
|
||||
<span className="hidden lg:inline">
|
||||
<br />
|
||||
</span>{" "}
|
||||
Anda Lebih Maju!
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px] 2xl:text-[18px]">
|
||||
Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
|
||||
<span className="hidden lg:inline">
|
||||
<br />
|
||||
</span>{" "}
|
||||
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
|
||||
profesional.
|
||||
</p>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-start gap-6">
|
||||
<img
|
||||
src={email}
|
||||
alt="Email Icon"
|
||||
className="w-10 h-10 object-contain"
|
||||
/>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
Kirim pertanyaan Anda ke{" "}
|
||||
<strong className="text-[#5B59E8]">
|
||||
support@rekanai.com
|
||||
</strong>{" "}
|
||||
dan tim kami
|
||||
</p>
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
akan segera merespons.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-6">
|
||||
<img
|
||||
src={phone}
|
||||
alt="Phone Icon"
|
||||
className="w-10 h-10 object-contain"
|
||||
/>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
Hubungi kami di{" "}
|
||||
<strong className="text-[#5B59E8]">
|
||||
(+62) 123-4567-890
|
||||
</strong>
|
||||
</p>
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
(Senin - Jumat, 08:00 - 17:00 WIB).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
<img
|
||||
src={customer}
|
||||
alt="Customer Service"
|
||||
className="w-full md:w-[400px] lg:w-[500px] 2xl:w-[600px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerService;
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
import { img10 } from "../asset";
|
||||
|
||||
const ContactForm = () => {
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||
style={{
|
||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row items-start w-full max-w-[90%] 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="flex-1 p-5 mb-10 lg:mb-0 sm mt-20 2xl:mt-28">
|
||||
{/* Judul utama */}
|
||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
||||
mungkin
|
||||
</h2>
|
||||
|
||||
{/* Deskripsi tambahan */}
|
||||
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
|
||||
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bagian Form */}
|
||||
<div className="flex-1 bg-white text-[#212121] rounded-[25px] 2xl:mt-[100px] p-[40px] border-[8px] border-[#F086A4] w-full 2xl:px-[60px] 2xl:py-[50px]">
|
||||
{/* Judul form */}
|
||||
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||
Hubungi Tim Terbaik Kami
|
||||
</h3>
|
||||
{/* Deskripsi form */}
|
||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
|
||||
Silakan isi data diri Anda pada formulir di bawah ini
|
||||
</p>
|
||||
|
||||
{/* Formulir input */}
|
||||
<form className="flex flex-col gap-4 px-2">
|
||||
{/* Input Nama */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Nomor Telepon */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Masukkan nomor telepon Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
pattern="[0-9]*"
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value.replace(/[^0-9]/g, "");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Email */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Masukkan email Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Nama Organisasi */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">
|
||||
Nama Organisasi/Perusahaan
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown Pilih Kebutuhan */}
|
||||
<div className="relative">
|
||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||
<select
|
||||
required
|
||||
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
>
|
||||
<option value="">Pilih kebutuhan Anda</option>
|
||||
<option value="konsultasi">Konsultasi</option>
|
||||
<option value="pelatihan">Pelatihan</option>
|
||||
<option value="pengembangan">Pengembangan</option>
|
||||
</select>
|
||||
{/* Tanda panah kustom */}
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-6 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkbox Verifikasi */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
required
|
||||
className="focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-[#212121]">Saya bukan robot</span>
|
||||
</div>
|
||||
|
||||
{/* Tombol Kirim */}
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
||||
>
|
||||
Kirim Pesan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { wabutton } from '../asset';
|
||||
|
||||
const WhatsAppButton = () => {
|
||||
return (
|
||||
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||
{/* Tombol WhatsApp */}
|
||||
<img
|
||||
className="w-10 h-10 md:w-12 md:h-12" // Menentukan ukuran ikon WhatsApp
|
||||
src={wabutton} // Gambar yang diimpor
|
||||
alt="WhatsApp" // Deskripsi gambar jika gambar gagal dimuat
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhatsAppButton;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
function Banner() {
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundBlendMode: "multiply",
|
||||
}}
|
||||
></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">
|
||||
{/* 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>
|
||||
|
||||
{/* Teks dan tombol */}
|
||||
<div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
|
||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
||||
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
||||
</h1>
|
||||
</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 */}
|
||||
<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]">
|
||||
<img
|
||||
src={L1}
|
||||
alt="image 1"
|
||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
<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 */}
|
||||
<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]">
|
||||
<img
|
||||
src={R1}
|
||||
alt="image 1"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
|
||||
/>
|
||||
<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>
|
||||
|
||||
{/* 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
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import { useNavigate, Link } from "react-router-dom"
|
||||
|
||||
import {
|
||||
nvidia,
|
||||
kmn,
|
||||
kominfo,
|
||||
ojk,
|
||||
facebook,
|
||||
x,
|
||||
instagram,
|
||||
component11,
|
||||
} from "../contact/asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
|
||||
|
||||
function Footer() {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||
<div className="container mx-auto">
|
||||
{/* Kontainer utama footer */}
|
||||
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
||||
{/* Kolom 1: Logo perusahaan */}
|
||||
<div className="mb-5 sm:mb-0 md:-ml-16">
|
||||
<img
|
||||
src={component11} // Gambar logo perusahaan
|
||||
alt="Logo"
|
||||
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||
<div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
|
||||
<div className="flex mb-5">
|
||||
<p>
|
||||
<strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
|
||||
<br />
|
||||
<span className="text-[#5B59E8] italic">
|
||||
Reimagine Your Business with AI.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
{/* Tautan ke media sosial */}
|
||||
<a href="#">
|
||||
<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>
|
||||
|
||||
{/* Bagian hak cipta */}
|
||||
<div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
|
||||
<p>
|
||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,452 @@
|
|||
import { useState, useRef, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
||||
const [isProdukOpen, setIsProdukOpen] = useState(false);
|
||||
const [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 (
|
||||
<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">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 md:mr-5">
|
||||
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/")
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
|
||||
{/* Produk Dropdown */}
|
||||
<div className="relative" ref={produkRef}>
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
>
|
||||
Produk
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 448 512"
|
||||
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isProdukOpen && (
|
||||
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* HR */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-2">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* DOKU */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiStartup");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen <br /> digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* LLM */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis <br /> data</p>
|
||||
</div>
|
||||
</button>
|
||||
{/* VERI */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiCorporate");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara <br /> akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Solusi Dropdown - Desktop */}
|
||||
<div className="relative" ref={solusiRef}>
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
||||
>
|
||||
Solusi
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 448 512"
|
||||
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isSolusiOpen && (
|
||||
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
||||
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
||||
<div className="flex justify-center gap-8">
|
||||
{/* Personal */}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/SolusiPersonal");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||
>
|
||||
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Personal</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Solusi efisien <br /> kebutuhan personal
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Startup */}
|
||||
<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={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Startup</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Dukungan penuh <br /> untuk bisnis Startup
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Corporate */}
|
||||
<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={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base py-1">Corporate Business</h3>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/Contact");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||
>
|
||||
Hubungi Kami
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
|
||||
<form onSubmit={handleSearchSubmit} className="relative w-full">
|
||||
<input
|
||||
type="text"
|
||||
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]"
|
||||
/>
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Konsultasi Button */}
|
||||
<button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
||||
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
||||
>
|
||||
Produk
|
||||
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
||||
</button>
|
||||
{isProdukOpen && (
|
||||
<div className="bg-[#DC0168] px-5 py-4">
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan HR</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Manajemen absensi karyawan
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukDoku} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Doku</h3>
|
||||
<p className="text-xs text-customBlack">
|
||||
Kelola dokumen digital
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukLlm} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan LLM</h3>
|
||||
<p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={ProdukVeri} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Rekan Veri</h3>
|
||||
<p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
||||
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
||||
>
|
||||
Solusi
|
||||
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
||||
</button>
|
||||
{isSolusiOpen && (
|
||||
<div className="bg-[#DC0168] px-5 py-4">
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => navigate("/SolusiPersonal")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Personal</h3>
|
||||
<p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiStartup")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Startup</h3>
|
||||
<p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/SolusiCorporate")}
|
||||
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
||||
>
|
||||
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
||||
<div className="text-left">
|
||||
<h3 className="font-medium text-base">Corporate Business</h3>
|
||||
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate("/Contact")}
|
||||
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
||||
>
|
||||
Hubungi Kami
|
||||
</button>
|
||||
|
||||
<div className="p-5">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pencarian..."
|
||||
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
|
||||
/>
|
||||
<button className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 pt-0">
|
||||
<button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue