add: initial files
This commit is contained in:
Yogamnan
commit
4f62b243f2
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import react from 'eslint-plugin-react'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
|
||||
export default [
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
react,
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...js.configs.recommended.rules,
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "rekan-ai-tailwind",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/react": "^18.3.18",
|
||||
"@types/react-dom": "^18.3.5",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.14.0",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
import Header from "./components/Header"
|
||||
import Hero from "./components/Hero"
|
||||
import Solusi from "./components/solusi"
|
||||
import Banner from "./components/Banner"
|
||||
import Kenapa from "./components/Kenapa"
|
||||
import Mitra from './components/Mitra'
|
||||
import Mendukung from "./components/Mendukung"
|
||||
import Footer from "./components/Footer"
|
||||
import MasaDepan from "./components/MasaDepan"
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Hero />
|
||||
<Solusi />
|
||||
<Banner />
|
||||
<Kenapa />
|
||||
<Mitra />
|
||||
<Mendukung />
|
||||
<MasaDepan />
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
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: 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 |
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
Binary file not shown.
|
After Width: | Height: | Size: 715 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
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: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
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 |
Binary file not shown.
|
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: 881 B |
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
|
|
@ -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 |
|
|
@ -0,0 +1,80 @@
|
|||
import React from 'react'
|
||||
import waIcon from '../assets/image/whatsapp-color_svgrepo.com.png'
|
||||
import L1 from '../assets/image/Frame 811520.png'
|
||||
import L3 from '../assets/image/Frame 811523.png'
|
||||
import L2 from '../assets/image/Frame 811521.png'
|
||||
import L4 from '../assets/image/Frame 811522.png'
|
||||
import R1 from '../assets/image/Frame 811517.png'
|
||||
import R3 from '../assets/image/Frame 811518.png'
|
||||
import R2 from '../assets/image/Frame 811516.png'
|
||||
import R4 from '../assets/image/Frame 811519.png'
|
||||
import bgcBanner from '../assets/image/image 10.png'
|
||||
|
||||
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(to right, rgba(220, 1, 104, 0.4),rgba(91, 89, 232, 1) ), url(${bgcBanner})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
{/* 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-4xl font-semibold text-center">
|
||||
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
||||
</h1>
|
||||
</div>
|
||||
<p className="mt-4 md:mt-16 max-w-[90%] md:max-w-[800px] mx-auto text-gray-200 text-sm md:text-base">
|
||||
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-16 justify-center">
|
||||
<button className="flex items-center justify-center w-full md:w-[317px] h-[50px] md:h-[70px] rounded-2xl border-2 border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-4 md:h-5 w-auto" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center w-full md:w-[324px] h-[50px] md:h-[70px] rounded-2xl px-4 md:px-8 py-2 md:py-3 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-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
|
||||
<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>
|
||||
|
||||
{/* Gambar R1-R4 untuk desktop */}
|
||||
<div className="absolute hidden md:grid top-[50%] right-0 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-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>
|
||||
|
||||
{/* 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,115 @@
|
|||
import nvdia from "../assets/image/nvidia.png";
|
||||
import kmn from "../assets/image/kemeneterian.png";
|
||||
import kominfo from "../assets/image/kominfo.png";
|
||||
import ojk from "../assets/image/ojk.png";
|
||||
import facebook from "../assets/image/fb.png";
|
||||
import x from "../assets/image/twitter.png";
|
||||
import instagram from "../assets/image/ig.png";
|
||||
import frame from "../assets/image/Component 11.png";
|
||||
|
||||
// Gambar logo utama perusahaan
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#D4DAE4] 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">
|
||||
Reimagine Your Business with AI.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-4">
|
||||
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||
Banten 15413
|
||||
</p>
|
||||
<p className="mb-4">Lebih dekat dengan Kami</p>
|
||||
<div className="flex space-x-3">
|
||||
{/* 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 sm:pl-0">
|
||||
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
||||
<ul className="space-y-4">
|
||||
<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 sm:mb-0 sm:pl-0">
|
||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||
<ul className="space-y-4">
|
||||
<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-base font-semibold mb-4">Hubungi Kami</h4>
|
||||
<ul className="space-y-4">
|
||||
<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,96 @@
|
|||
import { useState } from 'react';
|
||||
import Logo1 from '../assets/image/logo.png';
|
||||
import search from '../assets/image/search.png';
|
||||
import row from '../assets/image/arrow.png';
|
||||
|
||||
const Header = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
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]" />
|
||||
</div>
|
||||
|
||||
{/* Tombol Hamburger (Responsive) */}
|
||||
<div className="sm:hidden flex items-center">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="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>
|
||||
</div>
|
||||
|
||||
{/* Menu Navigasi */}
|
||||
<ul
|
||||
className={`${
|
||||
isMobileMenuOpen ? 'flex' : 'hidden'
|
||||
} 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`}
|
||||
>
|
||||
<li className="relative group">
|
||||
<a href="#home" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
|
||||
Beranda
|
||||
</a>
|
||||
</li>
|
||||
<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" />
|
||||
</a>
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
<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>
|
||||
<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]"
|
||||
/>
|
||||
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]">
|
||||
<img src={search} alt="search" className="w-5 h-5" />
|
||||
</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;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import homeLogo from '../assets/image/Component 1.png';
|
||||
import waIcon from '../assets/image/whatsapp-color_svgrepo.com (1).png';
|
||||
import homeImg from '../assets/image/Component 3.png';
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<div className="container py-0 px-0" id="Hero">
|
||||
<div className="
|
||||
hero
|
||||
grid grid-cols-1 lg:grid-cols-2 gap-10
|
||||
mt-56 sm:mt-28 md:mt-32 xl:mt-36 2xl:mt-24
|
||||
2xl:ml-28 xl:ml-24 items-center">
|
||||
|
||||
{/* Left Section */}
|
||||
<div className="box text-left px-4 lg:px-0">
|
||||
<img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" />
|
||||
<h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4">
|
||||
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
|
||||
</h1>
|
||||
<p className="text-customBlack text-[16px] lg:text-[20px]">
|
||||
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 (Home Image) */}
|
||||
<div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
|
||||
<img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col lg:flex-row mt-8 lg:mt-0 lg:ml-28 gap-6 items-center px-4 lg: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-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
||||
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-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import imgLeft from '../assets/image/Component 4.png';
|
||||
import chek from '../assets/image/cheklist.png';
|
||||
import waIcon from '../assets/image/whatsapp-color_svgrepo.com (1).png';
|
||||
import circle1 from '../assets/image/Ellipse 2.png';
|
||||
import circle2 from '../assets/image/Ellipse 3.png';
|
||||
|
||||
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: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 text-center md:text-left">
|
||||
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2>
|
||||
<p className="text-customBlack mt-4 text-sm md:text-base">
|
||||
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:text-base text-customBlack font-medium">
|
||||
<li className="flex items-center">
|
||||
<img src={chek} 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={chek} 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={chek} 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={chek} 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-4 w-full">
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-pink-600 text-pink-700 font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition">
|
||||
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-5 md:h-5" />
|
||||
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 font-bold rounded-lg hover:opacity-90 transition">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kenapa;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from "react";
|
||||
import masaWa from "../assets/image/whatsapp-color_svgrepo.com (1).png";
|
||||
|
||||
function MasaDepan() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center w-full h-[75vh] mb-20">
|
||||
{/* 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-xl rounded-2xl w-48 h-12">
|
||||
#Rekan AI
|
||||
</span>
|
||||
<h1 className="text-2xl sm:text-3xl font-semibold text-black">
|
||||
Masa Depan Bisnis, Dimulai Hari Ini
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-base sm:text-lg text-gray-600 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>
|
||||
|
||||
{/* 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 px-8 py-4 hover:bg-pink-50 transition-all duration-300 w-full sm:w-[270px] h-[70px]">
|
||||
<img
|
||||
src={masaWa}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 w-5 h-5"
|
||||
/>
|
||||
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;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import imgLeft2 from '../assets/image/Frame 811531.png';
|
||||
import imgLeft1 from '../assets/image/Frame 811530.png';
|
||||
import imgLeft3 from '../assets/image/Frame 811533.png';
|
||||
import imgRight from '../assets/image/Component 6.png';
|
||||
|
||||
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-2/5 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 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">
|
||||
{/* 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-full h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Mendukung;
|
||||
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import mitraImg from "../assets/image/Frame 811516 (3).png";
|
||||
import arrow1 from "../assets/image/slider/Vector (1).png";
|
||||
import arrow2 from "../assets/image/slider/Vector.png";
|
||||
import swipper1 from "../assets/image/slider/1.png";
|
||||
import swipper2 from "../assets/image/slider/2.png";
|
||||
import swipper3 from "../assets/image/slider/3.png";
|
||||
import swipper4 from "../assets/image/slider/4.png";
|
||||
import swipper5 from "../assets/image/slider/5.png";
|
||||
import swipper6 from "../assets/image/slider/6.png";
|
||||
import swipper7 from "../assets/image/slider/7.png";
|
||||
import swipper8 from "../assets/image/slider/8.png";
|
||||
import swipper9 from "../assets/image/slider/9.png";
|
||||
import swipper10 from "../assets/image/slider/10.png";
|
||||
import swipper11 from "../assets/image/slider/11.png";
|
||||
import swipper12 from "../assets/image/slider/12.png";
|
||||
import swipper13 from "../assets/image/slider/13.png";
|
||||
import swipper14 from "../assets/image/slider/14.png";
|
||||
import swipper15 from "../assets/image/slider/15.png";
|
||||
import swipper16 from "../assets/image/slider/16.png";
|
||||
import swipper17 from "../assets/image/slider/17.png";
|
||||
import swipper18 from "../assets/image/slider/18.png";
|
||||
import swipper19 from "../assets/image/slider/19.png";
|
||||
import swipper20 from "../assets/image/slider/20.png";
|
||||
import swipper21 from "../assets/image/slider/21.png";
|
||||
import swipper22 from "../assets/image/slider/22.png";
|
||||
import swipper23 from "../assets/image/slider/23.png";
|
||||
import swipper24 from "../assets/image/slider/24.png";
|
||||
|
||||
|
||||
import bgSwiper from "../assets/image/image 16.png";
|
||||
|
||||
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: swipper5, 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: swipper11, name: "Item 11" },
|
||||
{ id: 12, logo: swipper12, name: "Item 12" },
|
||||
{ id: 13, logo: swipper13, name: "Item 13" },
|
||||
{ id: 14, logo: swipper14, name: "Item 14" },
|
||||
{ id: 15, logo: swipper15, name: "Item 15" },
|
||||
{ id: 16, logo: swipper16, name: "Item 16" },
|
||||
{ id: 17, logo: swipper17, 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: swipper24, 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();
|
||||
}, 7900); // 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-white 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-[467px] 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-16 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-[292px] mx-auto">
|
||||
<div className="bg-customWhite shadow-lg rounded-[34px] 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-[10000ms] 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-2 md:gap-4"
|
||||
key={slideIndex}
|
||||
>
|
||||
{items
|
||||
.slice(slideIndex * itemsPerSlide, (slideIndex + 1) * itemsPerSlide)
|
||||
.map((item) => (
|
||||
<div className="flex flex-col items-center" key={item.id}>
|
||||
<img src={item.logo} alt={item.name} className="w-auto h-auto" />
|
||||
</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,74 @@
|
|||
import card1 from '../assets/image/rekan hr.png';
|
||||
import card2 from '../assets/image/rekan doku.png';
|
||||
import card3 from '../assets/image/rekan llm.png';
|
||||
import card4 from '../assets/image/rekan veri.png';
|
||||
import chek from '../assets/image/cheklist.png';
|
||||
|
||||
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-16" id="solusi">
|
||||
<div className="text-center mb-16">
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||
<h1 className="text-2xl md:text-4xl font-bold">Ragam Solusi Terbaik Dari</h1>
|
||||
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-xl font-bold w-[194px] h-[48px] text-center">
|
||||
#Rekan AI
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-600 mt-4 max-w-[95%] 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 shadow-md p-6 flex flex-col items-center h-[681px] w-[402px]"
|
||||
>
|
||||
<img src={card.image} alt={`Card ${index + 1}`} className="w-auto 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] bg-white border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-full 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-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]">
|
||||
<img
|
||||
className="w-10 h-10 md:w-12 md:h-12"
|
||||
src={WaButtons}
|
||||
alt="WhatsApp"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhatsAppButton;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base{
|
||||
html{
|
||||
font-family: 'Montserrat';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
customBlue: '#5B59E8',
|
||||
customWhite: '#FFFFFF',
|
||||
customBlack: '#212121',
|
||||
customRed: '#DC0168',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue