amnannn/rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: amnannn:6beefac2f4291ba34b7b265d7515116445c59ac8
Branches Tags
amnannn:main
amnannn:carls2
amnannn:solusi
amnannn:carls1
..
compare: amnannn:d4749582c11cfd02efb4c01fa6c217f173656d04
Branches Tags
amnannn:main
amnannn:carls2
amnannn:solusi
amnannn:carls1

4 Commits
6beefac2f4 ... d4749582c1

Author SHA1 Message Date
Carls2320
d4749582c1 done recaptcha and solusi bisnis 2025-02-14 02:37:44 +07:00
Yogamnan
ff016f6f21 after merge 2025-02-12 10:47:27 +07:00
Yogamnan
07e229dfad pull 2025-02-11 16:14:56 +07:00
Yogamnan
b3985ca419 before merge 2025-02-11 15:46:07 +07:00
27 changed files with 424 additions and 261 deletions
Show Stats Expand all files Collapse all files

5
index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
@ -15,6 +15,9 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <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> </body>
</html> </html>

46
package-lock.json generated
View File

@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-google-recaptcha": "^3.1.0",
"react-recaptcha": "^2.3.10",
"react-router-dom": "^7.1.3" "react-router-dom": "^7.1.3"
}, },
"devDependencies": { "devDependencies": {
@ -3182,6 +3184,15 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/ignore": { "node_modules/ignore": {
"version": "5.3.2", "version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@ -3996,7 +4007,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -4483,7 +4493,6 @@
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
@ -4534,6 +4543,19 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"license": "MIT",
"dependencies": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.3.1", "version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@ -4547,13 +4569,31 @@
"react": "^18.3.1" "react": "^18.3.1"
} }
}, },
"node_modules/react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-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": { "node_modules/react-refresh": {
"version": "0.14.2", "version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

2
package.json
View File

@ -12,6 +12,8 @@
"dependencies": { "dependencies": {
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-google-recaptcha": "^3.1.0",
"react-recaptcha": "^2.3.10",
"react-router-dom": "^7.1.3" "react-router-dom": "^7.1.3"
}, },
"devDependencies": { "devDependencies": {

BIN
src/assets/image/Frame 27.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/assets/image/Rekan Ai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

3
src/assets/index.js
View File

@ -6,6 +6,7 @@ import IconCorporate from './image/Frame 18 (2).png'
import row from './image/arrow.png'; import row from './image/arrow.png';
import row2 from './image/vector.png'; import row2 from './image/vector.png';
import homeLogo from './image/Component 1.png'; import homeLogo from './image/Component 1.png';
import waButton from './image/Frame 27.png';
import waIcon from './image/whatsapp-color_svgrepo.com (1).png'; import waIcon from './image/whatsapp-color_svgrepo.com (1).png';
import homeImg from './image/Pic Beranda Rekan AI.png'; import homeImg from './image/Pic Beranda Rekan AI.png';
import card1 from './image/rekan hr.png'; import card1 from './image/rekan hr.png';
@ -74,7 +75,7 @@ import frame from "./image/Component 11.png";
export{ export{
Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek, Logo1, search,row,row2,homeLogo,waIcon,homeImg,card1,card2,card3,card4,chek,
waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2, waIcon2,waButton,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner,imgLeft,chek2,circle1,circle2,
mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6, mitraImg,arrow1,arrow2,swipper1,swipper2,swipper3,swipper4,swipper5,swipper6,
swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14, swipper7,swipper8,swipper9,swipper10,swipper11,swipper12,swipper13,swipper14,
swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22, swipper15,swipper16,swipper17,swipper18,swipper19,swipper20,swipper21,swipper22,

80
src/components/beranda/Banner.jsx
View File

@ -1,15 +1,16 @@
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() { function Banner() {
return ( return (
<div className="relative w-full overflow-hidden">
<div <div
className=" relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center" className="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={{ style={{
backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`, backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
backgroundSize: 'cover', backgroundSize: "cover",
backgroundPosition: 'center', backgroundPosition: "center",
backgroundRepeat: 'no-repeat', backgroundRepeat: "no-repeat",
backgroundBlendMode: 'multiply', backgroundBlendMode: "multiply",
}} }}
> >
{/* Gambar L1-L4 untuk mobile */} {/* Gambar L1-L4 untuk mobile */}
@ -21,18 +22,23 @@ function Banner() {
</div> </div>
{/* Teks dan tombol */} {/* Teks dan tombol */}
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0"> <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"> <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"> <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. Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
</h1> </h1>
</div> </div>
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7"> <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. 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> </p>
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center"> <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"> <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" /> <img
src={waIcon2}
alt="WhatsApp Icon"
className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto"
/>
Konsultasi Gratis Konsultasi Gratis
</button> </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"> <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">
@ -42,19 +48,51 @@ function Banner() {
</div> </div>
{/* Gambar L1-L4 untuk desktop */} {/* 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"> <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-[200px] rounded-lg shadow-lg object-cover" /> <img
<img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" /> src={L1}
<img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" /> alt="image 1"
<img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" /> 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> </div>
{/* Gambar R1-R4 untuk desktop */} {/* 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"> <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-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" /> <img
<img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" /> src={R1}
<img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" /> alt="image 1"
<img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" /> 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> </div>
{/* Gambar R1-R4 untuk mobile */} {/* Gambar R1-R4 untuk mobile */}
@ -65,7 +103,9 @@ function Banner() {
<img src={R4} alt="image 4" 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>
</div>
) )
} }
export default Banner export default Banner

4
src/components/beranda/Header.jsx
View File

@ -1,5 +1,3 @@
"use client"
import { useState } from "react" import { useState } from "react"
import { useNavigate } from "react-router-dom" import { useNavigate } from "react-router-dom"
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets" import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
@ -14,7 +12,7 @@ const Header = () => {
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md"> <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300"> <nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
{/* Logo */} {/* Logo */}
<div className="flex-shrink-0"> <div className="flex-shrink-0 md:mr-5">
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" /> <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
</div> </div>

4
src/components/beranda/Hero.jsx
View File

@ -3,7 +3,7 @@ import { homeLogo, waIcon, homeImg } from '../../assets';
function Hero() { function Hero() {
return ( return (
<div className="w-full overflow-hidden" id="Home"> <div className="w-full overflow-hidden" id="Home">
<div className="container mx-auto px-4 lg:px-6"> <div className="container mx-auto px-4 lg:px-12">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
{/* Left Section */} {/* Left Section */}
<div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"> <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> </div>
{/* Right Section - Adjust order for mobile */} {/* Right Section - Adjust order for mobile */}
<div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px] order-2 lg:order-none"> <div className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none">
<img src={homeImg} alt="Rekan AI Illustration" className="object-contain" /> <img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
</div> </div>

4
src/components/beranda/Mendukung.jsx
View File

@ -28,10 +28,10 @@ function Mendukung() {
<img <img
src={item.image} src={item.image}
alt={item.title} alt={item.title}
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[223px] md:h-[223px] rounded-lg" className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] rounded-lg"
/> />
{/* Title */} {/* 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"> <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">
{item.title} {item.title}
</p> </p>
</div> </div>

64
src/components/beranda/Solusi.jsx
View File

@ -1,71 +1,79 @@
import {card1,card2,card3,card4,chek,} from '../../assets'; import { card1, card2, card3, card4, chek } from "../../assets"
function Solusi() { function Solusi() {
const cards = [ const cards = [
{ {
image: card1, 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.', description:
features: ['Automasi Proses HR', 'Manajemen Karyawan'], "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, 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.', description:
features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'], "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, image: card3,
description: 'Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.', description:
features: ['(Large Language Model) System', 'Virtual Assistant'], "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, 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.', description:
features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'], "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 ( return (
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi"> <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
<div className="text-center mb-12 md:-mt-48"> <div className="text-center mb-12 md:-mt-48 px-4">
<div className="flex flex-col md:flex-row items-center justify-center gap-4"> <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> <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center"> <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
#Rekan AI #Rekan AI
</span> </span>
</div> </div>
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center"> <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. Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
aspek.
</p> </p>
</div> </div>
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{cards.map((card, index) => ( {cards.map((card, index) => (
<div <div
key={index} 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]" 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} 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" /> <img
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p> src={card.image || "/placeholder.svg"}
<ul className="text-left space-y-4 mb-8"> 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) => ( {card.features.map((feature, i) => (
<li key={i} className="flex items-center gap-2"> <li key={i} className="flex items-center gap-2 text-sm md:text-base">
<img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature} <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
</li> </li>
))} ))}
</ul> </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"> <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>&rarr;</span> Selengkapnya <span>&rarr;</span>
</button> </button>
</div> </div>
))} ))}
</div> </div>
</section> </section>
); )
} }
export default Solusi; export default Solusi

6
src/components/beranda/WhatsAppButon.jsx
View File

@ -1,11 +1,11 @@
import WaButtons from '../../assets/image/Whatsapp.png'; import { waButton } from "../../assets";
const WhatsAppButton = () => { const WhatsAppButton = () => {
return ( 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]"> <div className="fixed bottom-2 right-2 md:right-16 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
<img <img
className="w-10 h-10 md:w-12 md:h-12" className="w-10 h-10 md:w-auto md:h-auto"
src={WaButtons} src={waButton}
alt="WhatsApp" alt="WhatsApp"
/> />
</div> </div>

11
src/components/contact/CustomerService.jsx
View File

@ -2,15 +2,12 @@ import { email, phone, customer } from "./asset";
const CustomerService = () => { const CustomerService = () => {
return ( return (
<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"> <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">
{/* LEFT SECTION - Informasi */} {/* 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="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
<div className="mb-5"> <div className="mb-5">
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]"> <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
Kami Siap Membantu Bisnis Anda{" "} Kami Siap Membantu Bisnis Anda
<span className="hidden lg:inline">
<br />
</span>{" "}
Lebih Maju! Lebih Maju!
</h2> </h2>
</div> </div>
@ -56,11 +53,11 @@ const CustomerService = () => {
</div> </div>
{/* RIGHT SECTION - Gambar */} {/* RIGHT SECTION - Gambar */}
<div className="flex-1 flex justify-center md:justify-end items-center pr-10"> <div className=" flex justify-center md:justify-end items-center pr-10">
<img <img
src={customer} src={customer}
alt="Customer Service" alt="Customer Service"
className="w-full h-auto max-w-[500px] md:max-w-none" className="w-full h-auto md:w-auto md:h-auto"
/> />
</div> </div>
</section> </section>

69
src/components/contact/FormSection.jsx
View File

@ -1,11 +1,28 @@
import { img10 } from "./asset"; 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)
const ContactForm = () => { 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 ( return (
<div <div
className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]" className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
style={{ style={{
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`, background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
backgroundSize: "cover", backgroundSize: "cover",
backgroundPosition: "center", backgroundPosition: "center",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
@ -14,38 +31,24 @@ 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"> <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 */} {/* Bagian Kiri */}
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]"> <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]"> <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 Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
mungkin
</h2> </h2>
{/* Deskripsi tambahan */}
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]"> <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 Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
</p> </p>
</div> </div>
{/* Bagian Form */} {/* 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"> <h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
Hubungi Tim Terbaik Kami Hubungi Tim Terbaik Kami
</h3> </h3>
{/* Deskripsi form */}
<p className="mb-6 text-[#212121] 2xl:text-[18px]"> <p className="mb-6 text-[#212121] 2xl:text-[18px]">
Silakan isi data diri Anda pada formulir di bawah ini Silakan isi data diri Anda pada formulir di bawah ini
</p> </p>
{/* Formulir input */}
<form className="flex flex-col gap-4 px-2"> <form className="flex flex-col gap-4 px-2">
{/* Input Nama */}
<div> <div>
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label> <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
<input <input
@ -55,8 +58,6 @@ const ContactForm = () => {
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/> />
</div> </div>
{/* Input Nomor Telepon */}
<div> <div>
<label className="text-[#6B5CEA]">Nomor Telepon*</label> <label className="text-[#6B5CEA]">Nomor Telepon*</label>
<input <input
@ -70,8 +71,6 @@ const ContactForm = () => {
}} }}
/> />
</div> </div>
{/* Input Email */}
<div> <div>
<label className="text-[#6B5CEA]">Email*</label> <label className="text-[#6B5CEA]">Email*</label>
<input <input
@ -81,20 +80,14 @@ const ContactForm = () => {
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/> />
</div> </div>
{/* Input Nama Organisasi */}
<div> <div>
<label className="text-[#6B5CEA]"> <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
Nama Organisasi/Perusahaan
</label>
<input <input
type="text" type="text"
placeholder="Masukkan nama organisasi/perusahaan Anda" 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" className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/> />
</div> </div>
{/* Dropdown Pilih Kebutuhan */}
<div className="relative"> <div className="relative">
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label> <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
<select <select
@ -106,10 +99,9 @@ const ContactForm = () => {
<option value="pelatihan">Pelatihan</option> <option value="pelatihan">Pelatihan</option>
<option value="pengembangan">Pengembangan</option> <option value="pengembangan">Pengembangan</option>
</select> </select>
{/* Tanda panah kustom */}
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none"> <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
<svg <svg
className="w-6 text-[#5B59E8]" className="w-8 h-28 mt-7 text-[#5B59E8]"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -125,20 +117,19 @@ const ContactForm = () => {
</div> </div>
</div> </div>
{/* Checkbox Verifikasi */} {/* ReCAPTCHA */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <ReCAPTCHA
type="checkbox" sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
required onChange={verifyCallback} // Mengganti render="explicit" dengan onChange yang lebih sederhana
className="focus:ring-2 focus:ring-indigo-500" onLoad={callback} // Callback ketika ReCAPTCHA sudah dimuat
/> />
<span className="text-[#212121]">Saya bukan robot</span>
</div> </div>
{/* Tombol Kirim */}
<button <button
type="submit" 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" 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 Kirim Pesan
</button> </button>

BIN
src/components/contact/asset/Dribbble-Light-Preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 B

3
src/components/contact/asset/index.js
View File

@ -18,8 +18,9 @@ import telephone from './telephone.png';
import wagreen from './whatsapp-color_svgrepo.com.png'; import wagreen from './whatsapp-color_svgrepo.com.png';
import wabutton from './Whatsapp22.png'; import wabutton from './Whatsapp22.png';
import x from './x.png'; import x from './x.png';
import arrowform from './Dribbble-Light-Preview.png';
export{ export{
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x,arrowform
} }

19
src/components/solusi/SolusiCorporate/SolusiCorporate.jsx
View File

@ -1,9 +1,22 @@
import { useState } from "react"; import { useState, useEffect } from "react";
import { data } from "./data"; import { data } from "./data";
export default function BusinessSolution() { export default function BusinessSolution() {
const [activeTab, setActiveTab] = useState("hr"); const [activeTab, setActiveTab] = useState("hr");
const activeContent = data.content[activeTab]; const activeContent = data.content[activeTab];
const [isMobile, setIsMobile] = useState(false);
// Detect mobile screen size
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768); // Set 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 ( return (
<div className="min-h-screen p-4"> <div className="min-h-screen p-4">
@ -15,7 +28,7 @@ export default function BusinessSolution() {
{/* Navigation Buttons */} {/* 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="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]"> <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
{data.tabs.map((button) => ( {data.tabs.map((button) => (
<button <button
key={button.key} key={button.key}
@ -34,7 +47,7 @@ export default function BusinessSolution() {
{activeContent && ( {activeContent && (
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start"> <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
{/* Image Section */} {/* Image Section */}
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg"> <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`}>
<img <img
src={activeContent.image || "/placeholder.svg"} src={activeContent.image || "/placeholder.svg"}
alt={activeContent.title} alt={activeContent.title}

19
src/components/solusi/SolusiPersonal/SolusiPersonal.jsx
View File

@ -1,9 +1,22 @@
import { useState } from "react"; import { useState, useEffect } from "react";
import { data } from "./data"; import { data } from "./data";
export default function BusinessSolution() { export default function BusinessSolution() {
const [activeTab, setActiveTab] = useState("hr"); const [activeTab, setActiveTab] = useState("hr");
const activeContent = data.content[activeTab]; const activeContent = data.content[activeTab];
const [isMobile, setIsMobile] = useState(false);
// Detect mobile screen size
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768); // Set 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 ( return (
<div className="min-h-screen p-4"> <div className="min-h-screen p-4">
@ -15,7 +28,7 @@ export default function BusinessSolution() {
{/* Navigation Buttons */} {/* 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="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]"> <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
{data.tabs.map((button) => ( {data.tabs.map((button) => (
<button <button
key={button.key} key={button.key}
@ -34,7 +47,7 @@ export default function BusinessSolution() {
{activeContent && ( {activeContent && (
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start"> <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
{/* Image Section */} {/* Image Section */}
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg"> <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`}>
<img <img
src={activeContent.image || "/placeholder.svg"} src={activeContent.image || "/placeholder.svg"}
alt={activeContent.title} alt={activeContent.title}

19
src/components/solusi/SolusiStartup/SolusiStartup.jsx
View File

@ -1,9 +1,22 @@
import { useState } from "react"; import { useState, useEffect } from "react";
import { data } from "./data"; import { data } from "./data";
export default function BusinessSolution() { export default function BusinessSolution() {
const [activeTab, setActiveTab] = useState("hr"); const [activeTab, setActiveTab] = useState("hr");
const activeContent = data.content[activeTab]; const activeContent = data.content[activeTab];
const [isMobile, setIsMobile] = useState(false);
// Detect mobile screen size
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768); // Set 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 ( return (
<div className="min-h-screen p-4"> <div className="min-h-screen p-4">
@ -15,7 +28,7 @@ export default function BusinessSolution() {
{/* Navigation Buttons */} {/* 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="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
<div className="flex flex-wrap justify-center gap-4 text-[18px] md:text-[24px]"> <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
{data.tabs.map((button) => ( {data.tabs.map((button) => (
<button <button
key={button.key} key={button.key}
@ -34,7 +47,7 @@ export default function BusinessSolution() {
{activeContent && ( {activeContent && (
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start"> <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
{/* Image Section */} {/* Image Section */}
<div className="w-full sm:w-[400px] md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg"> <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`}>
<img <img
src={activeContent.image || "/placeholder.svg"} src={activeContent.image || "/placeholder.svg"}
alt={activeContent.title} alt={activeContent.title}

39
src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx Normal file
View File

@ -0,0 +1,39 @@
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;

41
src/components/solusi/TransformasiPersonal/TransformasPersonal.jsx
View File

@ -1,41 +0,0 @@
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;

43
src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx Normal file
View File

@ -0,0 +1,43 @@
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;

43
src/components/solusi/TransformasiStart/TransformasiStart.jsx Normal file
View File

@ -0,0 +1,43 @@
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;

41
src/components/solusi/TransformasiStartup/TransformasStartup.jsx
View File

@ -1,41 +0,0 @@
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;

4
src/pages/SolusiCorporate.jsx
View File

@ -3,7 +3,7 @@ import HeadCorporate from "../components/solusi/HeadCorporate/HeadCorporate"
import CardCorporate from '../components/solusi/CardCorporate/CardCorporate' import CardCorporate from '../components/solusi/CardCorporate/CardCorporate'
import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorporate' import MengapaCorporate from '../components/solusi/MengapaCorporate/MengapaCorporate'
import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate' import SolusiCorporate from '../components/solusi/SolusiCorporate/SolusiCorporate'
import Transformas from '../components/solusi/TransformasiCorporate/TransformasiCorporate' import TransformasiCorpo from '../components/solusi/TransformasiCorpo/TransformasiCorpo'
import WhatsAppButton from "../components/beranda/WhatsAppButon" import WhatsAppButton from "../components/beranda/WhatsAppButon"
import Footer from "../components/contact/Footer" import Footer from "../components/contact/Footer"
function Contact() { function Contact() {
@ -14,7 +14,7 @@ function Contact() {
<CardCorporate /> <CardCorporate />
<MengapaCorporate /> <MengapaCorporate />
<SolusiCorporate /> <SolusiCorporate />
<Transformas /> <TransformasiCorpo />
<Footer /> <Footer />
<WhatsAppButton /> <WhatsAppButton />
</> </>

4
src/pages/SolusiPersonal.jsx
View File

@ -3,7 +3,7 @@ import HeadPersonal from '../components/solusi/HeadPersonal/HeadPersonal'
import CardPersonal from '../components/solusi/CardPersonal/CardPersonal' import CardPersonal from '../components/solusi/CardPersonal/CardPersonal'
import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal' import MengapapPersonal from '../components/solusi/MengapapPersonal/MengapapPersonal'
import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal' import SolusiPersonal from '../components/solusi/SolusiPersonal/SolusiPersonal'
import Transformas from '../components/solusi/TransformasiPersonal/TransformasPersonal' import TransformasiPersonal from '../components/solusi/TransformasiPersonal/TransformasiPersonal'
import WhatsAppButton from "../components/beranda/WhatsAppButon" import WhatsAppButton from "../components/beranda/WhatsAppButon"
import Footer from "../components/contact/Footer" import Footer from "../components/contact/Footer"
function Contact() { function Contact() {
@ -14,7 +14,7 @@ function Contact() {
<CardPersonal /> <CardPersonal />
<MengapapPersonal /> <MengapapPersonal />
<SolusiPersonal /> <SolusiPersonal />
<Transformas /> <TransformasiPersonal />
<Footer /> <Footer />
<WhatsAppButton /> <WhatsAppButton />
</> </>

4
src/pages/SolusiStartup.jsx
View File

@ -5,7 +5,7 @@ import Footer from "../components/contact/Footer"
import CardStartup from "../components/solusi/CardStartup/CardStartup" import CardStartup from "../components/solusi/CardStartup/CardStartup"
import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup" import MengapaStartup from "../components/solusi/MengapaStartup/MengapaStartup"
import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup" import SolusiStartup from "../components/solusi/SolusiStartup/SolusiStartup"
import Transformas from "../components/solusi/TransformasiStartup/TransformasStartup" import TransformasiStart from "../components/solusi/TransformasiStart/TransformasiStart"
function Contact() { function Contact() {
return ( return (
<> <>
@ -14,7 +14,7 @@ function Contact() {
<CardStartup /> <CardStartup />
<MengapaStartup /> <MengapaStartup />
<SolusiStartup /> <SolusiStartup />
<Transformas /> <TransformasiStart />
<Footer /> <Footer />
<WhatsAppButton /> <WhatsAppButton />
</> </>