Compare commits
No commits in common. "d4749582c11cfd02efb4c01fa6c217f173656d04" and "6beefac2f4291ba34b7b265d7515116445c59ac8" have entirely different histories.
d4749582c1
...
6beefac2f4
|
|
@ -4,7 +4,7 @@
|
|||
<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">
|
||||
<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"
|
||||
|
|
@ -15,9 +15,6 @@
|
|||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
|
||||
async defer>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -10,8 +10,6 @@
|
|||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-recaptcha": "^2.3.10",
|
||||
"react-router-dom": "^7.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -3184,15 +3182,6 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
|
|
@ -4007,6 +3996,7 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -4493,6 +4483,7 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
|
|
@ -4543,19 +4534,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-async-script": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
|
||||
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"prop-types": "^15.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
|
|
@ -4569,31 +4547,13 @@
|
|||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-google-recaptcha": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
|
||||
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.0",
|
||||
"react-async-script": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-recaptcha": {
|
||||
"version": "2.3.10",
|
||||
"resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz",
|
||||
"integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g==",
|
||||
"license": "BSD"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.2",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-recaptcha": "^2.3.10",
|
||||
"react-router-dom": "^7.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
|
|
@ -6,7 +6,6 @@ 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 waButton from './image/Frame 27.png';
|
||||
import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
|
||||
import homeImg from './image/Pic Beranda Rekan AI.png';
|
||||
import card1 from './image/rekan hr.png';
|
||||
|
|
@ -75,7 +74,7 @@ import frame from "./image/Component 11.png";
|
|||
|
||||
export{
|
||||
Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
|
||||
waIcon2,waButton,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -1,111 +1,71 @@
|
|||
import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
||||
import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
|
||||
|
||||
function Banner() {
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div
|
||||
className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
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>
|
||||
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 z-10">
|
||||
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
|
||||
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
|
||||
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
|
||||
</h1>
|
||||
</div>
|
||||
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
|
||||
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang
|
||||
siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
|
||||
<img
|
||||
src={waIcon2}
|
||||
alt="WhatsApp Icon"
|
||||
className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto"
|
||||
/>
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Teks dan tombol */}
|
||||
<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-1/2 left-0 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
|
||||
<img
|
||||
src={L1}
|
||||
alt="image 1"
|
||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
<img
|
||||
src={L2}
|
||||
alt="image 2"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
|
||||
/>
|
||||
<img
|
||||
src={L3}
|
||||
alt="image 3"
|
||||
className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
<img
|
||||
src={L4}
|
||||
alt="image 4"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
|
||||
/>
|
||||
</div>
|
||||
{/* Gambar 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-1/2 right-4 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
|
||||
<img
|
||||
src={R1}
|
||||
alt="image 1"
|
||||
className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
|
||||
/>
|
||||
<img
|
||||
src={R2}
|
||||
alt="image 2"
|
||||
className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
|
||||
/>
|
||||
<img
|
||||
src={R3}
|
||||
alt="image 3"
|
||||
className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
|
||||
/>
|
||||
<img
|
||||
src={R4}
|
||||
alt="image 4"
|
||||
className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Gambar R1-R4 untuk 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" />
|
||||
{/* Gambar R1-R4 untuk mobile */}
|
||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
|
||||
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default Banner
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
|
||||
|
|
@ -12,7 +14,7 @@ const Header = () => {
|
|||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 md:mr-5">
|
||||
<div className="flex-shrink-0">
|
||||
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ 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-12">
|
||||
<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">
|
||||
|
|
@ -18,7 +18,7 @@ function Hero() {
|
|||
</div>
|
||||
|
||||
{/* Right Section - Adjust order for mobile */}
|
||||
<div className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ function Mendukung() {
|
|||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] rounded-lg"
|
||||
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg"
|
||||
/>
|
||||
{/* Title */}
|
||||
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
|
||||
<p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[223px] h-10 flex items-center justify-center text-sm font-bold mt-4">
|
||||
{item.title}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,71 @@
|
|||
import { card1, card2, card3, card4, chek } from "../../assets"
|
||||
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"],
|
||||
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"],
|
||||
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"],
|
||||
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"],
|
||||
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 px-4">
|
||||
<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%] mx-auto text-center">
|
||||
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
|
||||
aspek.
|
||||
<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-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
|
||||
|
||||
<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-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
|
||||
>
|
||||
<img
|
||||
src={card.image || "/placeholder.svg"}
|
||||
alt={`Card ${index + 1}`}
|
||||
className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
|
||||
/>
|
||||
<p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
|
||||
{card.description}
|
||||
</p>
|
||||
<ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
|
||||
{card.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm md:text-base">
|
||||
<img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
|
||||
Selengkapnya <span>→</span>
|
||||
</button>
|
||||
</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
|
||||
|
||||
export default Solusi;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { waButton } from "../../assets";
|
||||
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-auto md:h-auto"
|
||||
src={waButton}
|
||||
className="w-10 h-10 md:w-12 md:h-12"
|
||||
src={WaButtons}
|
||||
alt="WhatsApp"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@ import { email, phone, customer } from "./asset";
|
|||
|
||||
const CustomerService = () => {
|
||||
return (
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
|
||||
<section className="main-container mt-[180px] mb-16 md:mb-0 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
Kami Siap Membantu Bisnis Anda
|
||||
Kami Siap Membantu Bisnis Anda{" "}
|
||||
<span className="hidden lg:inline">
|
||||
<br />
|
||||
</span>{" "}
|
||||
Lebih Maju!
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -53,11 +56,11 @@ const CustomerService = () => {
|
|||
</div>
|
||||
|
||||
{/* RIGHT SECTION - Gambar */}
|
||||
<div className=" flex justify-center md:justify-end items-center pr-10">
|
||||
<div className="flex-1 flex justify-center md:justify-end items-center pr-10">
|
||||
<img
|
||||
src={customer}
|
||||
alt="Customer Service"
|
||||
className="w-full h-auto md:w-auto md:h-auto"
|
||||
className="w-full h-auto max-w-[500px] md:max-w-none"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,11 @@
|
|||
import { useState } from "react";
|
||||
import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
|
||||
import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
|
||||
import { img10 } from "./asset";
|
||||
|
||||
const ContactForm = () => {
|
||||
// State untuk melacak status reCAPTCHA
|
||||
const [isCaptchaVerified, setIsCaptchaVerified] = useState(false);
|
||||
|
||||
// Callback yang dijalankan setelah reCAPTCHA dimuat
|
||||
const callback = function () {
|
||||
console.log("Done!!!!");
|
||||
};
|
||||
|
||||
// Callback verifikasi reCAPTCHA
|
||||
const verifyCallback = function (response) {
|
||||
if (response) {
|
||||
setIsCaptchaVerified(true); // Jika reCAPTCHA berhasil, set state menjadi true
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
|
||||
style={{
|
||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
|
@ -31,24 +14,38 @@ const ContactForm = () => {
|
|||
<div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
|
||||
{/* Judul utama */}
|
||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
||||
mungkin
|
||||
</h2>
|
||||
|
||||
{/* Deskripsi tambahan */}
|
||||
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
|
||||
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bagian Form */}
|
||||
<div className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]">
|
||||
|
||||
<div
|
||||
className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]"
|
||||
>
|
||||
|
||||
|
||||
{/* Judul form */}
|
||||
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||
Hubungi Tim Terbaik Kami
|
||||
</h3>
|
||||
{/* Deskripsi form */}
|
||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
|
||||
Silakan isi data diri Anda pada formulir di bawah ini
|
||||
</p>
|
||||
|
||||
{/* Formulir input */}
|
||||
<form className="flex flex-col gap-4 px-2">
|
||||
{/* Input Nama */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||
<input
|
||||
|
|
@ -58,6 +55,8 @@ const ContactForm = () => {
|
|||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Nomor Telepon */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||
<input
|
||||
|
|
@ -71,6 +70,8 @@ const ContactForm = () => {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Email */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<input
|
||||
|
|
@ -80,14 +81,20 @@ const ContactForm = () => {
|
|||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Nama Organisasi */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
||||
<label className="text-[#6B5CEA]">
|
||||
Nama Organisasi/Perusahaan
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown Pilih Kebutuhan */}
|
||||
<div className="relative">
|
||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||
<select
|
||||
|
|
@ -99,9 +106,10 @@ const ContactForm = () => {
|
|||
<option value="pelatihan">Pelatihan</option>
|
||||
<option value="pengembangan">Pengembangan</option>
|
||||
</select>
|
||||
{/* Tanda panah kustom */}
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-8 h-28 mt-7 text-[#5B59E8]"
|
||||
className="w-6 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -117,19 +125,20 @@ const ContactForm = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* ReCAPTCHA */}
|
||||
{/* Checkbox Verifikasi */}
|
||||
<div className="flex items-center gap-2">
|
||||
<ReCAPTCHA
|
||||
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
||||
onChange={verifyCallback} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
||||
onLoad={callback} // Callback ketika ReCAPTCHA sudah dimuat
|
||||
<input
|
||||
type="checkbox"
|
||||
required
|
||||
className="focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-[#212121]">Saya bukan robot</span>
|
||||
</div>
|
||||
|
||||
{/* Tombol Kirim */}
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
|
||||
disabled={!isCaptchaVerified} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang
|
||||
>
|
||||
Kirim Pesan
|
||||
</button>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 411 B |
|
|
@ -18,9 +18,8 @@ import telephone from './telephone.png';
|
|||
import wagreen from './whatsapp-color_svgrepo.com.png';
|
||||
import wabutton from './Whatsapp22.png';
|
||||
import x from './x.png';
|
||||
import arrowform from './Dribbble-Light-Preview.png';
|
||||
|
||||
|
||||
export{
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x,arrowform
|
||||
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||
}
|
||||
|
|
@ -1,22 +1,9 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { data } from "./data";
|
||||
|
||||
export default function BusinessSolution() {
|
||||
const [activeTab, setActiveTab] = useState("hr");
|
||||
const activeContent = data.content[activeTab];
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// Detect mobile screen size
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize(); // Initialize state on component mount
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
|
|
@ -28,7 +15,7 @@ export default function BusinessSolution() {
|
|||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||
<div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
|
||||
{data.tabs.map((button) => (
|
||||
<button
|
||||
key={button.key}
|
||||
|
|
@ -47,7 +34,7 @@ export default function BusinessSolution() {
|
|||
{activeContent && (
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
||||
{/* Image Section */}
|
||||
<div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
||||
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={activeContent.image || "/placeholder.svg"}
|
||||
alt={activeContent.title}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,9 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { data } from "./data";
|
||||
|
||||
export default function BusinessSolution() {
|
||||
const [activeTab, setActiveTab] = useState("hr");
|
||||
const activeContent = data.content[activeTab];
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// Detect mobile screen size
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize(); // Initialize state on component mount
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
|
|
@ -28,7 +15,7 @@ export default function BusinessSolution() {
|
|||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||
<div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
|
||||
{data.tabs.map((button) => (
|
||||
<button
|
||||
key={button.key}
|
||||
|
|
@ -47,7 +34,7 @@ export default function BusinessSolution() {
|
|||
{activeContent && (
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
||||
{/* Image Section */}
|
||||
<div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
||||
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={activeContent.image || "/placeholder.svg"}
|
||||
alt={activeContent.title}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,9 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { data } from "./data";
|
||||
|
||||
export default function BusinessSolution() {
|
||||
const [activeTab, setActiveTab] = useState("hr");
|
||||
const activeContent = data.content[activeTab];
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
// Detect mobile screen size
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
handleResize(); // Initialize state on component mount
|
||||
|
||||
return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4">
|
||||
|
|
@ -28,7 +15,7 @@ export default function BusinessSolution() {
|
|||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
|
||||
<div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]">
|
||||
{data.tabs.map((button) => (
|
||||
<button
|
||||
key={button.key}
|
||||
|
|
@ -47,7 +34,7 @@ export default function BusinessSolution() {
|
|||
{activeContent && (
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
|
||||
{/* Image Section */}
|
||||
<div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
|
||||
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={activeContent.image || "/placeholder.svg"}
|
||||
alt={activeContent.title}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import { wagreen } from "../asset";
|
||||
|
||||
function Transformasi() {
|
||||
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, bawa bisnis Anda menuju masa depan yang lebih cerdas, efisien, dan kompetitif.
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
||||
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Transformasi;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from "react";
|
||||
import { wagreen } from "../asset";
|
||||
|
||||
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-[#CA2B68] 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-[#212121] md:max-w-[80%] 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. Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</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={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default MasaDepan;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { wagreen } from "../asset";
|
||||
|
||||
function Transformasi() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3">
|
||||
{/* Tagline Section */}
|
||||
<div className="mb-5">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
|
||||
<span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
|
||||
#Rekan AI
|
||||
</span>
|
||||
<h1 className="text-2xl sm:text-[32px] font-semibold text-black">
|
||||
Transformasi Digital Anda Dimulai di Sini
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
||||
Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
|
||||
<span className="block sm:hidden mt-2">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</span>
|
||||
<span className="hidden sm:block mt-2">
|
||||
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
||||
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Transformasi;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { wagreen } from "../asset";
|
||||
|
||||
function Transformasi() {
|
||||
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">
|
||||
Dengan Rekan AI, Startup dan perusahaan besar memiliki akses ke teknologi yang sama-sama
|
||||
<span className="block sm:hidden mt-2">
|
||||
memberdayakan – membawa bisnis ke level berikutnya
|
||||
</span>
|
||||
<span className="hidden sm:block mt-2">
|
||||
memberdayakan – membawa bisnis ke level berikutnya
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
|
||||
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||
<img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Transformasi;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from "react";
|
||||
import { wagreen } from "../asset";
|
||||
|
||||
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-[#CA2B68] 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-[#212121]">
|
||||
Transformasi Digital Anda Dimulai di Sini
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-base sm:text-xl text-[#212121] md:max-w-[80%] md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
|
||||
Dengan Rekan AI, Startup dan perusahaan besar memiliki akses ke teknologi yang sama-sama memberdayakan – membawa bisnis ke level berikutnya.
|
||||
</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={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
|
||||
Konsultasi Gratis
|
||||
</button>
|
||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||
Coba Sekarang
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default MasaDepan;
|
||||
|
|
@ -3,7 +3,7 @@ import HeadCorporate from "../components/solusi/HeadCorporate/HeadCorporate"
|
|||
import CardCorporate from '../components/solusi/CardCorporate/CardCorporate'
|
||||
import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorporate'
|
||||
import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
|
||||
import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
|
||||
import Transformas from '../components/solusi/TransformasiCorporate/TransformasiCorporate'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
function Contact() {
|
||||
|
|
@ -14,7 +14,7 @@ function Contact() {
|
|||
<CardCorporate />
|
||||
<MengapaCorporate />
|
||||
<SolusiCorporate />
|
||||
<TransformasiCorpo />
|
||||
<Transformas />
|
||||
<Footer />
|
||||
<WhatsAppButton />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import HeadPersonal from '../components/solusi/HeadPersonal/HeadPersonal'
|
|||
import CardPersonal from '../components/solusi/CardPersonal/CardPersonal'
|
||||
import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal'
|
||||
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
|
||||
import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
|
||||
import Transformas from '../components/solusi/TransformasiPersonal/TransformasPersonal'
|
||||
import WhatsAppButton from "../components/beranda/WhatsAppButon"
|
||||
import Footer from "../components/contact/Footer"
|
||||
function Contact() {
|
||||
|
|
@ -14,7 +14,7 @@ function Contact() {
|
|||
<CardPersonal />
|
||||
<MengapapPersonal />
|
||||
<SolusiPersonal />
|
||||
<TransformasiPersonal />
|
||||
<Transformas />
|
||||
<Footer />
|
||||
<WhatsAppButton />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Footer from "../components/contact/Footer"
|
|||
import CardStartup from "../components/solusi/CardStartup/CardStartup"
|
||||
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
|
||||
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
|
||||
import TransformasiStart from "../components/solusi/TransformasiStart/TransformasiStart"
|
||||
import Transformas from "../components/solusi/TransformasiStartup/TransformasStartup"
|
||||
function Contact() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -14,7 +14,7 @@ function Contact() {
|
|||
<CardStartup />
|
||||
<MengapaStartup />
|
||||
<SolusiStartup />
|
||||
<TransformasiStart />
|
||||
<Transformas />
|
||||
<Footer />
|
||||
<WhatsAppButton />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue