Compare commits
10
Commits
solusi
..
4f07bdf08b
| Author | SHA1 | Date | |
|---|---|---|---|
 Yogamnan
|
4f07bdf08b | ||
|
Yogamnan
|
940448f28b | ||
|
Yogamnan
|
4c4bd690f4 | ||
|
Yogamnan
|
33f86a49f2 | ||
|
Yogamnan
|
1041a497c4 | ||
|
Yogamnan
|
153214d438 | ||
|
Yogamnan
|
c335fc05f8 | ||
|
Yogamnan
|
252b440c96 | ||
|
Yogamnan
|
ad55506643 | ||
|
Yogamnan
|
4f62b243f2 |
@@ -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
|
||||||
+14
-17
@@ -1,23 +1,20 @@
|
|||||||
<!doctype html> <!-- Menandakan bahwa ini adalah dokumen HTML5 -->
|
<!doctype html>
|
||||||
<html lang="en"> <!-- Menentukan bahasa utama dari halaman adalah bahasa Inggris -->
|
<html lang="en">
|
||||||
<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 -->
|
<head>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<!-- 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" />
|
<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>
|
||||||
|
|
||||||
<!-- Menentukan judul halaman yang akan ditampilkan di tab browser -->
|
<body>
|
||||||
<title>Vite + React</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Elemen dengan id 'root' adalah tempat di mana aplikasi React akan di-render -->
|
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
||||||
<!-- Menyisipkan script utama aplikasi React. Menggunakan 'type="module"' karena kita menggunakan ES Modules -->
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Generated
+71
-103
@@ -1,16 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "rekanaiv3",
|
"name": "rekan-ai-tailwind",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "rekanaiv3",
|
"name": "rekan-ai-tailwind",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
@@ -1400,6 +1400,12 @@
|
|||||||
"@babel/types": "^7.20.7"
|
"@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": {
|
"node_modules/@types/estree": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||||
@@ -1702,12 +1708,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/asynckit": {
|
|
||||||
"version": "0.4.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
|
||||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/autoprefixer": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.20",
|
"version": "10.4.20",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
|
||||||
@@ -1762,17 +1762,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/axios": {
|
|
||||||
"version": "1.7.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
|
||||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"follow-redirects": "^1.15.6",
|
|
||||||
"form-data": "^4.0.0",
|
|
||||||
"proxy-from-env": "^1.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/balanced-match": {
|
"node_modules/balanced-match": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||||
@@ -2016,18 +2005,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/combined-stream": {
|
|
||||||
"version": "1.0.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
|
||||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"delayed-stream": "~1.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/commander": {
|
"node_modules/commander": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||||
@@ -2052,6 +2029,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
@@ -2202,15 +2188,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/delayed-stream": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/didyoumean": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
@@ -2844,26 +2821,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
"node_modules/follow-redirects": {
|
|
||||||
"version": "1.15.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
|
||||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "individual",
|
|
||||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"debug": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/for-each": {
|
"node_modules/for-each": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||||
@@ -2891,20 +2848,6 @@
|
|||||||
"url": "https://github.com/sponsors/isaacs"
|
"url": "https://github.com/sponsors/isaacs"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/form-data": {
|
|
||||||
"version": "4.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
|
||||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"asynckit": "^0.4.0",
|
|
||||||
"combined-stream": "^1.0.8",
|
|
||||||
"mime-types": "^2.1.12"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/fraction.js": {
|
"node_modules/fraction.js": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||||
@@ -3954,27 +3897,6 @@
|
|||||||
"node": ">=8.6"
|
"node": ">=8.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/mime-db": {
|
|
||||||
"version": "1.52.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
|
||||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/mime-types": {
|
|
||||||
"version": "2.1.35",
|
|
||||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
|
||||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"mime-db": "1.52.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||||
@@ -4569,12 +4491,6 @@
|
|||||||
"react-is": "^16.13.1"
|
"react-is": "^16.13.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/proxy-from-env": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/punycode": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
@@ -4648,6 +4564,46 @@
|
|||||||
"node": ">=0.10.0"
|
"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": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
@@ -4891,6 +4847,12 @@
|
|||||||
"semver": "bin/semver.js"
|
"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": {
|
"node_modules/set-function-length": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||||
@@ -5428,6 +5390,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
},
|
},
|
||||||
|
"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": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||||
|
|||||||
+3
-3
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "rekanaiv3",
|
"name": "rekan-ai-tailwind",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@@ -10,9 +10,9 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.7.9",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
|
|||||||
+17
-19
@@ -1,25 +1,23 @@
|
|||||||
import Header from "./componen/Header/Header"; // Mengimpor komponen Header untuk ditampilkan di bagian atas halaman
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import HeadPersonal from "./componen/HeadPersonal/HeadPersonal"; // Mengimpor komponen CustomerService untuk menampilkan informasi layanan pelanggan
|
import Contact from "./pages/Contact"
|
||||||
import CardPersonal from "./componen/CardPersonal/CardPersonal"; // Mengimpor komponen FormSection yang berisi form
|
import Home from "./pages/Home"
|
||||||
import SolusiBisnis from "./componen/solusibisnis/solusibisnis"; // Mengimpor komponen FAQ untuk menampilkan bagian pertanyaan yang sering diajukan
|
import SolusiPersonal from "./pages/SolusiPersonal"
|
||||||
import MengapapPersonal from "./componen/MengapapPersonal/MengapapPersonal"; // Mengimpor komponen BottomCTA untuk panggilan aksi di bagian bawah halaman
|
import SolusiStartup from "./pages/SolusiStartup"
|
||||||
import Transformasi from "./componen/Transformasi/Transformas"
|
import SolusiCorporate from "./pages/SolusiCorporate"
|
||||||
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
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<Router>
|
||||||
<Header /> {/* Menampilkan komponen Header */}
|
<Routes>
|
||||||
<HeadPersonal /> {/* Menampilkan komponen CustomerService */}
|
<Route path='/' element={<Home/>}/>
|
||||||
<CardPersonal /> {/* Menampilkan komponen FormSection */}
|
<Route path='/Contact' element={<Contact/>}/>
|
||||||
<MengapapPersonal /> {/* Menampilkan komponen FAQ */}
|
<Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
|
||||||
<SolusiBisnis /> {/* Menampilkan komponen BottomCTA */}
|
<Route path='/SolusiStartup' element={<SolusiStartup/>}/>
|
||||||
<Transformasi />
|
<Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
|
||||||
<Footer /> {/* Menampilkan komponen Footer */}
|
</Routes>
|
||||||
<WhatsAppButton /> {/* Menampilkan komponen WhatsAppButton */}
|
</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: 374 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: 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.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 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: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
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 |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 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,83 @@
|
|||||||
|
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 row from './image/arrow.png';
|
||||||
|
import row2 from './image/vector.png';
|
||||||
|
import homeLogo from './image/Component 1.png';
|
||||||
|
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
|
||||||
|
import homeImg from './image/Component 3.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";
|
||||||
|
import kmn from "./image/kemeneterian.png";
|
||||||
|
import kominfo from "./image/kominfo.png";
|
||||||
|
import ojk from "./image/ojk.png";
|
||||||
|
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,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
|
||||||
|
}
|
||||||
@@ -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,57 +0,0 @@
|
|||||||
import { component11, wagreen, start22 } from "../asset";
|
|
||||||
|
|
||||||
export default function Hero() {
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-4 lg:px-6">
|
|
||||||
<div className="flex flex-col lg:mt-[85px] lg:flex-row items-center mt-[200px] gap-12 py-8">
|
|
||||||
{/* Left Column */}
|
|
||||||
<div className="flex-1 space-y-7">
|
|
||||||
{/* Logo and Tagline */}
|
|
||||||
<div className="flex items-center">
|
|
||||||
<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 Personal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Header Text */}
|
|
||||||
<h1 className="text-[32px] text-[#212121] font-bold mt-7">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<p className="text-[20px] text-[#212121] mt-7">
|
|
||||||
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era digital. Baik Anda seorang profesional,
|
|
||||||
pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi
|
|
||||||
yang mudah digunakan, efisien, dan dapat diandalkan.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6 mt-[79px]">
|
|
||||||
<button className="flex items-center justify-center w-full lg:w-[270px] h-[70px] border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] hover:bg-[#ffffff1a] transition-all">
|
|
||||||
<img src= {wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<button className="w-full lg:w-[276px] h-[70px] rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] hover:opacity-90 transition-all">
|
|
||||||
Coba Sekarang
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Hero Image */}
|
|
||||||
<div className="flex-1 mt-[149px] lg:mt-0">
|
|
||||||
<img
|
|
||||||
src= {start22}
|
|
||||||
alt="Hero Illustration"
|
|
||||||
width={716}
|
|
||||||
height={743}
|
|
||||||
className="w-full h-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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,45 +0,0 @@
|
|||||||
import { wagreen } from "../asset";
|
|
||||||
|
|
||||||
function MasaDepan() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
|
|
||||||
{/* Tagline Section */}
|
|
||||||
<div className="mb-5">
|
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
|
||||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
|
||||||
#Rekan AI
|
|
||||||
</span>
|
|
||||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
|
||||||
Transformasi Digital Anda Dimulai di Sini
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
|
||||||
Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
|
|
||||||
<span className="block sm:hidden mt-2">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</span>
|
|
||||||
<span className="hidden sm:block mt-2">
|
|
||||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Button Section */}
|
|
||||||
<div className="flex flex-col sm:flex-row gap-6 sm:gap-12 mt-8">
|
|
||||||
<button className="flex items-center justify-center bg-transparent text-pink-600 border-2 border-pink-600 rounded-[14px] font-medium text-lg sm:text-xl py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
|
|
||||||
<img
|
|
||||||
src={wagreen}
|
|
||||||
alt="WhatsApp Icon"
|
|
||||||
className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
|
|
||||||
/>
|
|
||||||
Konsultasi Gratis
|
|
||||||
</button>
|
|
||||||
<button className="flex items-center justify-center bg-gradient-to-r from-pink-600 to-blue-600 text-white rounded-[14px] font-medium text-lg sm:text-xl px-8 py-4 hover:opacity-90 transition-all duration-300 w-full sm:w-[276px] h-[70px]">
|
|
||||||
Coba Sekarang
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MasaDepan;
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { wabutton } from '../asset';
|
|
||||||
|
|
||||||
const WhatsAppButton = () => {
|
|
||||||
return (
|
|
||||||
<div className="fixed bottom-2 right-2 md:right-24 flex justify-center mb-10 items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
|
||||||
{/* 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,71 @@
|
|||||||
|
import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
|
||||||
|
|
||||||
|
function Banner() {
|
||||||
|
return (
|
||||||
|
<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"
|
||||||
|
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',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 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="px-4 mx-auto text-center w-full mt-8 md:mt-0">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Gambar L1-L4 untuk desktop */}
|
||||||
|
<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">
|
||||||
|
<img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
|
||||||
|
<img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
|
||||||
|
<img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
|
||||||
|
<img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gambar R1-R4 untuk desktop */}
|
||||||
|
<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 src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
|
||||||
|
<img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
|
||||||
|
<img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
|
||||||
|
<img src={R4} alt="image 4" className="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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Banner
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
|
||||||
|
|
||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
|
||||||
|
{/* Kontainer utama footer */}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
||||||
|
{/* Kolom 1: Logo perusahaan */}
|
||||||
|
<div className="mb-5 sm:mb-0">
|
||||||
|
<img
|
||||||
|
src={frame} // Gambar logo perusahaan
|
||||||
|
alt="Logo"
|
||||||
|
className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 2: Deskripsi singkat perusahaan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
|
<div className="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>
|
||||||
|
<p className="mb-10 text-[18px]">
|
||||||
|
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||||
|
Banten 15413
|
||||||
|
</p>
|
||||||
|
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||||
|
<div className="flex space-x-5">
|
||||||
|
{/* Tautan ke media sosial */}
|
||||||
|
<a href="#">
|
||||||
|
<img src={instagram} alt="Instagram" className="w-5 h-5" /> {/* Ikon Instagram */}
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kolom 3: Produk perusahaan */}
|
||||||
|
<div className="flex-1 mb-5 sm:mb-0 md:ml-16 sm:pl-0">
|
||||||
|
<h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
|
||||||
|
<ul className="space-y-4 text-[18px]">
|
||||||
|
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||||
|
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||||
|
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||||
|
<li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -0,0 +1,292 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||||
|
const [isSolusiOpen, setIsSolusiOpen] = useState(false)
|
||||||
|
const [isProdukOpen, setIsProdukOpen] = useState(false)
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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("/")}
|
||||||
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
||||||
|
>
|
||||||
|
Beranda
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Produk Dropdown */}
|
||||||
|
<div className="relative">
|
||||||
|
<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 && (
|
||||||
|
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#produk1" className="text-[#212121]">
|
||||||
|
Produk 1
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
||||||
|
<a href="#produk2" className="text-[#212121]">
|
||||||
|
Produk 2
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Solusi Dropdown - Desktop */}
|
||||||
|
<div className="relative">
|
||||||
|
<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-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
||||||
|
<div className="bg-customRed rounded-xl p-8">
|
||||||
|
<div className="flex justify-center gap-8">
|
||||||
|
{/* Personal */}
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/SolusiPersonal")}
|
||||||
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
|
<div className="text-left">
|
||||||
|
<h3 className="font-medium text-base">Personal</h3>
|
||||||
|
<p className="text-xs text-customBlack">
|
||||||
|
Solusi efisien <br /> kebutuhan personal
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Startup */}
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/SolusiStartup")}
|
||||||
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
|
<div className="text-left">
|
||||||
|
<h3 className="font-medium text-base">Startup</h3>
|
||||||
|
<p className="text-xs text-customBlack">
|
||||||
|
Dukungan penuh <br /> untuk bisnis Startup
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Corporate */}
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/SolusiCorporate")}
|
||||||
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
||||||
|
<div className="text-left">
|
||||||
|
<h3 className="font-medium text-base">Corporate Business</h3>
|
||||||
|
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/Contact")}
|
||||||
|
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">
|
||||||
|
<div className="relative w-full">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Pencarian..."
|
||||||
|
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 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>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
||||||
|
Produk 1
|
||||||
|
</a>
|
||||||
|
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
||||||
|
Produk 2
|
||||||
|
</a>
|
||||||
|
</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
|
||||||
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { homeLogo, waIcon, homeImg } from '../../assets';
|
||||||
|
|
||||||
|
function Hero() {
|
||||||
|
return (
|
||||||
|
<div className="w-full overflow-hidden" id="Home">
|
||||||
|
<div className="container mx-auto px-4 lg:px-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
|
||||||
|
{/* Left Section */}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Section - Adjust order for mobile */}
|
||||||
|
<div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px] order-2 lg:order-none">
|
||||||
|
<img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons - Ensure they come last on mobile */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
|
||||||
|
<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>
|
||||||
|
<button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
|
||||||
|
|
||||||
|
function Kenapa() {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
|
||||||
|
<div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
|
||||||
|
{/* Decorative Circles */}
|
||||||
|
<div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
|
||||||
|
<img src={circle1} alt="Circle 1" className="w-auto h-auto" />
|
||||||
|
<img src={circle2} alt="Circle 2" className="w-auto h-auto" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image Section */}
|
||||||
|
<div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
|
||||||
|
<img
|
||||||
|
src={imgLeft}
|
||||||
|
alt="Woman with Tablet"
|
||||||
|
className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text Section */}
|
||||||
|
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
|
||||||
|
<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]">
|
||||||
|
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
|
||||||
|
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
|
||||||
|
untuk meningkatkan efisiensi operasional, mempercepat proses, dan
|
||||||
|
memberikan wawasan berbasis data yang akurat.
|
||||||
|
</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">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
|
Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<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.
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
|
Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
|
||||||
|
Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
|
||||||
|
<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">
|
||||||
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
<button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Kenapa;
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { waIcon } from "../../assets";
|
||||||
|
function MasaDepan() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -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">
|
||||||
|
Masa Depan Bisnis, Dimulai Hari Ini
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
Bersama Rekan AI, bawa bisnis Anda menuju masa depan yang lebih
|
||||||
|
cerdas, efisien, dan kompetitif.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{/* Button Section */}
|
||||||
|
<div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
||||||
|
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
|
<img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||||
|
Konsultasi Gratis
|
||||||
|
</button>
|
||||||
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
|
Coba Sekarang
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MasaDepan;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';
|
||||||
|
|
||||||
|
function Mendukung() {
|
||||||
|
const items = [
|
||||||
|
{ id: 1, image: imgLeft1, title: 'Personal' },
|
||||||
|
{ id: 2, image: imgLeft2, title: 'UMKM' },
|
||||||
|
{ id: 3, image: imgLeft3, title: 'Corporate Business' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
{/* Left Content */}
|
||||||
|
<div 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">
|
||||||
|
Solusi Mendukung Bisnis di Setiap
|
||||||
|
<br />
|
||||||
|
Skala Usaha
|
||||||
|
</p>
|
||||||
|
<p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
|
||||||
|
Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
|
||||||
|
{items.map((item) => (
|
||||||
|
<div key={item.id} className="flex flex-col items-center w-full md:w-auto md:mt-5">
|
||||||
|
{/* Image */}
|
||||||
|
<img
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
|
||||||
|
/>
|
||||||
|
{/* Title */}
|
||||||
|
<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}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Content */}
|
||||||
|
<div 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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Mendukung;
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { mitraImg } from "../../assets";
|
||||||
|
import { arrow1 } from "../../assets";
|
||||||
|
import { arrow2 } from "../../assets";
|
||||||
|
import { swipper1 } from "../../assets";
|
||||||
|
import { swipper2 } from "../../assets";
|
||||||
|
import { swipper3 } from "../../assets";
|
||||||
|
import { swipper4 } from "../../assets";
|
||||||
|
import { swipper5 } from "../../assets";
|
||||||
|
import { swipper6 } from "../../assets";
|
||||||
|
import { swipper7 } from "../../assets";
|
||||||
|
import { swipper8 } from "../../assets";
|
||||||
|
import { swipper9 } from "../../assets";
|
||||||
|
import { swipper10 } from "../../assets";
|
||||||
|
import { swipper11 } from "../../assets";
|
||||||
|
import { swipper12 } from "../../assets";
|
||||||
|
import { swipper13 } from "../../assets";
|
||||||
|
import { swipper14 } from "../../assets";
|
||||||
|
import { swipper15 } from "../../assets";
|
||||||
|
import { swipper16 } from "../../assets";
|
||||||
|
import { swipper17 } from "../../assets";
|
||||||
|
import { swipper18 } from "../../assets";
|
||||||
|
import { swipper19 } from "../../assets";
|
||||||
|
import { swipper20 } from "../../assets";
|
||||||
|
import { swipper21 } from "../../assets";
|
||||||
|
import { swipper22 } from "../../assets";
|
||||||
|
import { swipper23 } from "../../assets";
|
||||||
|
import { swipper24 } from "../../assets";
|
||||||
|
import { bgSwiper } from "../../assets";
|
||||||
|
function Mitra() {
|
||||||
|
const items = [
|
||||||
|
{ id: 1, logo: swipper1, name: "Item 1" },
|
||||||
|
{ id: 2, logo: swipper2, name: "Item 2" },
|
||||||
|
{ id: 3, logo: swipper3, name: "Item 3" },
|
||||||
|
{ id: 4, logo: swipper4, name: "Item 4" },
|
||||||
|
{ id: 5, logo: swipper11, name: "Item 5" },
|
||||||
|
{ id: 6, logo: swipper6, name: "Item 6" },
|
||||||
|
{ id: 7, logo: swipper7, name: "Item 7" },
|
||||||
|
{ id: 8, logo: swipper8, name: "Item 8" },
|
||||||
|
{ id: 9, logo: swipper9, name: "Item 9" },
|
||||||
|
{ id: 10, logo: swipper10, name: "Item 10" },
|
||||||
|
{ id: 11, logo: swipper13, name: "Item 11" },
|
||||||
|
{ id: 12, logo: swipper12, name: "Item 12" },
|
||||||
|
{ id: 13, logo: swipper5, name: "Item 13" },
|
||||||
|
{ id: 14, logo: swipper16, name: "Item 14" },
|
||||||
|
{ id: 15, logo: swipper15, name: "Item 15" },
|
||||||
|
{ id: 16, logo: swipper17, name: "Item 16" },
|
||||||
|
{ id: 17, logo: swipper24, name: "Item 17" },
|
||||||
|
{ id: 18, logo: swipper18, name: "Item 18" },
|
||||||
|
{ id: 19, logo: swipper19, name: "Item 19" },
|
||||||
|
{ id: 20, logo: swipper20, name: "Item 20" },
|
||||||
|
{ id: 21, logo: swipper21, name: "Item 21" },
|
||||||
|
{ id: 22, logo: swipper22, name: "Item 22" },
|
||||||
|
{ id: 23, logo: swipper23, name: "Item 23" },
|
||||||
|
{ id: 24, logo: swipper14, name: "Item 24" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const itemsPerSlide = 4;
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentIndex < items.length / itemsPerSlide - 1) {
|
||||||
|
setCurrentIndex((prevIndex) => prevIndex + 1);
|
||||||
|
} else {
|
||||||
|
setCurrentIndex(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePrev = () => {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
setCurrentIndex((prevIndex) => prevIndex - 1);
|
||||||
|
} else {
|
||||||
|
setCurrentIndex(Math.ceil(items.length / itemsPerSlide) - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-slide functionality
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
handleNext();
|
||||||
|
}, 8900); // Slider bergerak setiap 4 detik
|
||||||
|
|
||||||
|
return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
|
||||||
|
}, [currentIndex]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="bg-cover bg-center h-[986px] flex items-center justify-center"
|
||||||
|
style={{ backgroundImage: `url(${bgSwiper})` }}
|
||||||
|
>
|
||||||
|
<div className="bg-gradient-to-b from-[#e5e4ff] via-[#A1A0F2] to-[#5B59E8] w-[90%] md:w-[1214px] h-[640px] rounded-[36px] flex items-center justify-center relative">
|
||||||
|
<div className="text-white ml-4 md:ml-20 -mt-8 md:-mt-20">
|
||||||
|
<div className="bg-white text-[#DC0168] flex items-center justify-center text-center rounded-[18px] shadow-md w-[90%] md:w-[510px] h-[56px]">
|
||||||
|
<p className="text-sm md:text-lg font-semibold m-0">
|
||||||
|
Saatnya Melangkah lebih jauh untuk bisnis Anda!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-[18px] md:text-[36px] leading-[28px] md:leading-[54px] font-semibold text-left mt-4 md:mt-6">
|
||||||
|
Bergabunglah bersama Mereka yang telah mempercayai Kami sebagai mitra terbaik dalam memberikan solusi yang efesien.
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto -mt-8 mr-4 md:-mt-20 md:mr-5 hidden md:block">
|
||||||
|
{/* Gambar hanya muncul di tampilan medium ke atas */}
|
||||||
|
<img src={mitraImg} alt="Mitra" className="w-[1745px] h-[402px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="flex justify-center 2xl:w-[1516px] w-screen mb-40 -mt-[350px] md:-mt-[290px] mx-auto">
|
||||||
|
<div className="bg-customWhite shadow-lg rounded-[37px] px-4 md:px-8 py-4 flex items-center gap-2 md:gap-4 w-[95%] md:w-[80%] mx-auto z-10 overflow-hidden">
|
||||||
|
{/* Prev Button (Hidden on Mobile) */}
|
||||||
|
<button onClick={handlePrev} className="hidden md:block">
|
||||||
|
<img src={arrow1} alt="Previous" className="w-4 h-4 md:w-6 md:h-6" />
|
||||||
|
</button>
|
||||||
|
{/* Carousel Items */}
|
||||||
|
<div className="overflow-hidden flex-1">
|
||||||
|
<div
|
||||||
|
className="flex transition-transform duration-[10500ms] ease-in-out"
|
||||||
|
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
|
||||||
|
>
|
||||||
|
{Array.from(
|
||||||
|
{ length: Math.ceil(items.length / itemsPerSlide) },
|
||||||
|
(_, slideIndex) => (
|
||||||
|
<div
|
||||||
|
className="flex-shrink-0 w-full grid grid-cols-2 md:grid-cols-4 gap-1 md:gap-4"
|
||||||
|
key={slideIndex}
|
||||||
|
>
|
||||||
|
{items
|
||||||
|
.slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
|
||||||
|
.map((item) => (
|
||||||
|
<div
|
||||||
|
className="flex flex-col items-center justify-center h-[85px]" // Tambahkan justify-center dan atur tinggi
|
||||||
|
key={item.id}
|
||||||
|
>
|
||||||
|
<img src={item.logo} alt={item.name} className="max-h-full" /> {/* Gunakan max-h-full agar gambar mengikuti tinggi parent */}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Next Button (Hidden on Mobile) */}
|
||||||
|
<button onClick={handleNext} className="hidden md:block">
|
||||||
|
<img src={arrow2} alt="Next" className="w-4 h-4 md:w-6 md:h-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Mitra;
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import {card1,card2,card3,card4,chek,} from '../../assets';
|
||||||
|
|
||||||
|
|
||||||
|
function Solusi() {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
image: card1,
|
||||||
|
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.',
|
||||||
|
features: ['Automasi Proses HR', 'Manajemen Karyawan'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: card2,
|
||||||
|
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.',
|
||||||
|
features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: card3,
|
||||||
|
description: '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'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: card4,
|
||||||
|
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.',
|
||||||
|
features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||||
|
<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">
|
||||||
|
#Rekan AI
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
|
||||||
|
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{cards.map((card, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
|
||||||
|
<ul className="text-left space-y-4 mb-8">
|
||||||
|
{card.features.map((feature, i) => (
|
||||||
|
<li key={i} className="flex items-center gap-2">
|
||||||
|
<img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<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">
|
||||||
|
Selengkapnya <span>→</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Solusi;
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import WaButtons from '../../assets/image/Whatsapp.png';
|
||||||
|
|
||||||
|
const WhatsAppButton = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-2 right-2 md:right-16 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
|
||||||
|
<img
|
||||||
|
className="w-10 h-10 md:w-12 md:h-12"
|
||||||
|
src={WaButtons}
|
||||||
|
alt="WhatsApp"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhatsAppButton;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user