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

fix zoom, ( tinggal nunggu tempalte solusi)

This commit is contained in:
Yogamnan 2025-02-08 12:24:04 +07:00
parent 4c4bd690f4
commit 940448f28b
6 changed files with 321 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import {waIcon2,L1,L2,L3,L4,R1,R2,R3,R4,bgcBanner} from '../../assets/';
function Banner() { function Banner() {
return ( return (
<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 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',
@ -23,38 +23,38 @@ function Banner() {
{/* 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">
<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-[32px] 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-[750px] mx-auto text-customWhite text-sm md:text-[20px] 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-[317px] h-[50px] md:h-[70px] 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-[324px] h-[50px] md:h-[70px] 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">
Coba Sekarang Coba Sekarang
</button> </button>
</div> </div>
</div> </div>
{/* Gambar L1-L4 untuk desktop */} {/* Gambar L1-L4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] left-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16"> <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-auto rounded-lg shadow-lg object-cover" /> <img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
<img src={L2} alt="image 2" className="w-auto rounded-lg shadow-lg object-cover mt-20" /> <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-auto rounded-lg shadow-lg object-cover" /> <img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" className="w-auto rounded-lg shadow-lg object-cover -mt-10" /> <img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
</div> </div>
{/* Gambar R1-R4 untuk desktop */} {/* Gambar R1-R4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] right-0 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16"> <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-auto rounded-lg shadow-lg object-cover mt-20 ml-9" /> <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-auto rounded-lg shadow-lg object-cover -ml-7" /> <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-auto 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-auto rounded-lg shadow-lg object-cover" /> <img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
</div> </div>
{/* Gambar R1-R4 untuk mobile */} {/* Gambar R1-R4 untuk mobile */}

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

@ -1,125 +1,292 @@
import { useState } from "react"; "use client"
import { useNavigate } from "react-router-dom";
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"; import { useState } from "react"
import { useNavigate } from "react-router-dom"
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
const Header = () => { const Header = () => {
const navigate = useNavigate(); const navigate = useNavigate()
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const [isSolusiOpen, setIsSolusiOpen] = useState(false); const [isSolusiOpen, setIsSolusiOpen] = useState(false)
const [isProdukOpen, setIsProdukOpen] = useState(false); const [isProdukOpen, setIsProdukOpen] = useState(false)
return ( return (
<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="flex items-center justify-between px-5 sm:px-10 md:px-20 py-3 gap-4 flex-wrap relative 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 */} {/* Logo */}
<div className="flex items-center gap-2"> <div className="flex-shrink-0">
<img src={Logo1} alt="Logo" className="w-[203px] h-[36.05px]" /> <img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
</div> </div>
{/* Tombol Hamburger (Mobile) */} {/* Desktop Navigation */}
<div className="sm:hidden flex items-center"> <div className="hidden lg:flex items-center space-x-8">
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-[#212121]"> <button
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> onClick={() => navigate("/")}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" /> className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
</svg> >
Beranda
</button> </button>
</div>
{/* Menu Navigasi */}
<ul className={`${isMobileMenuOpen ? "flex" : "hidden"} sm:flex flex-col sm:flex-row list-none gap-5 sm:gap-10 absolute sm:relative top-full left-0 sm:top-auto sm:left-auto w-full sm:w-auto bg-white sm:bg-transparent p-5 sm:p-0 shadow-md sm:shadow-none z-40`}>
<li>
<button onClick={() => navigate("/")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
Beranda
</button>
</li>
{/* Produk Dropdown */} {/* Produk Dropdown */}
<li className="relative"> <div className="relative">
<button onClick={() => setIsProdukOpen(!isProdukOpen)} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"> <button
onClick={() => setIsProdukOpen(!isProdukOpen)}
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
>
Produk Produk
<img src={row} alt="arrow" className="ml-1" /> <svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 448 512"
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
</svg>
</button> </button>
{isProdukOpen && ( {isProdukOpen && (
<ul className="absolute left-0 top-full w-48 bg-white list-none py-2 shadow-lg z-50"> <ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk1" className="text-[#212121]">Produk 1</a></li> <li className="px-5 py-2 hover:text-[#5a55ff]">
<li className="px-5 py-2 hover:text-[#5a55ff]"><a href="#produk2" className="text-[#212121]">Produk 2</a></li> <a href="#produk1" className="text-[#212121]">
Produk 1
</a>
</li>
<li className="px-5 py-2 hover:text-[#5a55ff]">
<a href="#produk2" className="text-[#212121]">
Produk 2
</a>
</li>
</ul> </ul>
)} )}
</li> </div>
{/* Solusi Dropdown */} {/* Solusi Dropdown - Desktop */}
<li className="relative group"> <div className="relative">
<button <button
onClick={() => setIsSolusiOpen(!isSolusiOpen)} onClick={() => setIsSolusiOpen(!isSolusiOpen)}
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center" className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
> >
Solusi Produk
<img src={row} alt="arrow" className="ml-1" /> <svg
</button> stroke="currentColor"
{isSolusiOpen && ( fill="currentColor"
<ul strokeWidth="0"
className="absolute left-[-20px] md:left-[-550px] top-12 w-screen bg-customRed text-black list-none py-4 shadow-lg z-50 gap-10 px-10 flex md:flex-row flex-col justify-center items-center" viewBox="0 0 448 512"
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
> >
<div className="flex md:flex-row flex-col justify-center items-center gap-3 md:gap-10 md:mr-96"> <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
{/* Personal */} </svg>
<li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
<img src={IconPersonal} alt="" className="w-16 h-16" />
<div>
<h3 className="font-medium text-base">Personal</h3>
<p className="text-xs text-customBlack">Solusi efisien <br /> kebutuhan personal</p>
</div>
</li>
{/* Startup */}
<li onClick={() => navigate("/SolusiStartup")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
<img src={IconStartup} alt="" className="w-16 h-16" />
<div>
<h3 className="font-medium text-base">Startup</h3>
<p className="text-xs text-customBlack">Dukungan penuh <br /> untuk bisnis Startup</p>
</div>
</li>
{/* Corporate Business */}
<li onClick={() => navigate("/SolusiPersonal")} className="px-5 py-4 bg-white rounded-xl w-[282px] h-[94px] flex items-start gap-4 hover:bg-gray-100">
<img src={IconCorporate} alt="" className="w-16 h-16" />
<div>
<h3 className="font-medium text-base">Corporate Business</h3>
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
</div>
</li>
</div>
</ul>
)}
</li>
<li>
<button onClick={() => navigate("/Contact")} className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]">
Hubungi Kami
</button> </button>
</li>
</ul>
{/* Pencarian */} {isSolusiOpen && (
<div className="relative flex items-center gap-2 w-full sm:w-auto order-2 sm:order-none md:ml-52"> <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
<input type="text" placeholder="Pencarian..." className="w-full sm:w-[592px] h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]" /> <div className="bg-customRed rounded-xl p-8">
<button className="absolute right-4 sm:right-2 text-gray-500 hover:text-[#5a55ff]"> <div className="flex justify-center gap-8">
<img src={search} alt="search" className="w-5 h-5" /> {/* Personal */}
<button
onClick={() => navigate("/SolusiPersonal")}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
>
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
<div className="text-left">
<h3 className="font-medium text-base">Personal</h3>
<p className="text-xs text-customBlack">
Solusi efisien <br /> kebutuhan personal
</p>
</div>
</button>
{/* Startup */}
<button
onClick={() => navigate("/SolusiStartup")}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
>
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
<div className="text-left">
<h3 className="font-medium text-base">Startup</h3>
<p className="text-xs text-customBlack">
Dukungan penuh <br /> untuk bisnis Startup
</p>
</div>
</button>
{/* Corporate */}
<button
onClick={() => navigate("/SolusiCorporate")}
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
>
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
<div className="text-left">
<h3 className="font-medium text-base">Corporate Business</h3>
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
</div>
</button>
</div>
</div>
</div>
)}
</div>
<button
onClick={() => navigate("/Contact")}
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
>
Hubungi Kami
</button> </button>
</div> </div>
{/* Tombol Konsultasi */} {/* Search Bar */}
<button className="bg-[#DC0168] h-[48px] md:w-[184px] md:h-[48px] text-white px-5 py-2 text-sm font-bold rounded-md hover:bg-[#e6006e] transition order-3 sm:order-none w-full sm:w-auto mt-3 sm:mt-0"> <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
<div className="relative w-full">
<input
type="text"
placeholder="Pencarian..."
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
/>
<button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
</button>
</div>
</div>
{/* Konsultasi Button */}
<button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
Konsultasi Gratis Konsultasi Gratis
</button> </button>
{/* Mobile Menu Button */}
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
{/* Mobile Menu */}
{isMobileMenuOpen && (
<div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
<div className="flex flex-col">
<button
onClick={() => navigate("/")}
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
>
Beranda
</button>
<div className="relative">
<button
onClick={() => setIsProdukOpen(!isProdukOpen)}
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
>
Produk
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
</button>
{isProdukOpen && (
<div className="bg-[#DC0168] px-5 py-4">
<div className="space-y-3">
<a href="#produk1" className="block p-4 bg-white rounded-lg">
Produk 1
</a>
<a href="#produk2" className="block p-4 bg-white rounded-lg">
Produk 2
</a>
</div>
</div>
)}
</div>
<div className="relative">
<button
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
>
Solusi
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
</button>
{isSolusiOpen && (
<div className="bg-[#DC0168] px-5 py-4">
<div className="space-y-3">
<button
onClick={() => navigate("/SolusiPersonal")}
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
>
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
<div className="text-left">
<h3 className="font-medium text-base">Personal</h3>
<p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
</div>
</button>
<button
onClick={() => navigate("/SolusiStartup")}
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
>
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
<div className="text-left">
<h3 className="font-medium text-base">Startup</h3>
<p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
</div>
</button>
<button
onClick={() => navigate("/SolusiCorporate")}
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
>
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
<div className="text-left">
<h3 className="font-medium text-base">Corporate Business</h3>
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
</div>
</button>
</div>
</div>
)}
</div>
<button
onClick={() => navigate("/Contact")}
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
>
Hubungi Kami
</button>
<div className="p-5">
<div className="relative">
<input
type="text"
placeholder="Pencarian..."
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
/>
<button className="absolute right-4 top-1/2 -translate-y-1/2">
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
</button>
</div>
</div>
<div className="p-5 pt-0">
<button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
Konsultasi Gratis
</button>
</div>
</div>
</div>
)}
</nav> </nav>
</header> </header>
)
}
); export default Header
};
export default Header;

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

@ -1,44 +1,49 @@
import {homeLogo,waIcon,homeImg} from '../../assets'; import {homeLogo,waIcon,homeImg} from '../../assets';
function Hero() { function Hero() {
return ( return (
<div className="container py-0 px-0" id="Home"> <div className="w-full overflow-hidden" id="Home">
<div className=" <div className="container mx-auto px-4 lg:px-6">
hero <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16">
grid grid-cols-1 lg:grid-cols-2 gap-10 {/* Left Section */}
mt-56 sm:mt-28 md:mt-32 xl:mt-36 2xl:mt-24 <div className="space-y-6 md:-mt-10 mt-10">
2xl:ml-28 xl:ml-24 items-center"> <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto" />
<h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
{/* Left Section */} Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
<div className="box text-left px-4 lg:px-0 md:-ml-6 md:-mt-20"> </h1>
<img className="mb-5 mx-auto lg:mx-0" src={homeLogo} alt="Home Logo" /> <p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
<h1 className="text-customBlack text-[24px] lg:text-[32px] font-semibold py-4"> Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI. digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
</h1> </p>
<p className="text-customBlack text-[16px] lg:text-[20px]">
Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan. {/* Buttons - Moved inside left column for better mobile layout */}
</p> <div className="flex flex-col sm:flex-row gap-4 pt-4">
</div> <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed border-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
{/* Right Section (Home Image) */} Konsultasi Gratis
<div className="box flex justify-center 2xl:ml-20 2xl:mr-[-11rem] px-4 lg:px-0">
<img src={homeImg} alt="Home Image" className="w-full max-w-[807px] h-auto" />
</div>
</div>
{/* Buttons */}
<div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-[30px] w-[30px]" />
Konsultasi Gratis
</button> </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"> <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
Coba Sekarang Coba Sekarang
</button> </button>
</div>
</div> </div>
{/* Right Section */}
<div className="relative">
<div className="relative w-full aspect-square lg:aspect-auto lg:h-[600px]">
<img
src={homeImg}
alt="Rekan AI Illustration"
className="object-contain"
/>
</div>
</div>
</div>
</div> </div>
); </div>
} )
}
export default Hero;
export default Hero

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

@ -21,14 +21,14 @@ function Kenapa() {
{/* Text Section */} {/* Text Section */}
<div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"> <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left">
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800">Kenapa Harus Rekan AI?</h2> <h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
<p className="text-customBlack mt-4 text-sm md:max-w-[90%] md:leading-8 md:text-[20px]"> <p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
untuk meningkatkan efisiensi operasional, mempercepat proses, dan untuk meningkatkan efisiensi operasional, mempercepat proses, dan
memberikan wawasan berbasis data yang akurat. memberikan wawasan berbasis data yang akurat.
</p> </p>
<ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[70%] md:text-base text-customBlack font-medium"> <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
<li className="flex items-center"> <li className="flex items-center">
<img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" /> <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas. Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.

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

@ -27,7 +27,7 @@ function Solusi() {
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"> <div className="text-center mb-12 md:-mt-48">
<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">
@ -44,7 +44,7 @@ function Solusi() {
{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]" 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" /> <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> <p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
@ -55,7 +55,7 @@ function Solusi() {
</li> </li>
))} ))}
</ul> </ul>
<button className="w-[355px] h-[62px] 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-[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>&rarr;</span> Selengkapnya <span>&rarr;</span>
</button> </button>
</div> </div>

2
src/components/solusi/SolusiStartup/data.js
View File

@ -33,7 +33,7 @@ export const data = {
] ]
}, },
doku: { doku: {
title: "Rekan Doku – Dokumen Anda, Kendali Anda", title: "Rekan Doku – Autentikasi dan Manajemen Dokumen Digital",
description: description:
"Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.", "Kelola dokumen pribadi dengan mudah dan aman menggunakan Rekan Doku. Produk ini memastikan dokumen digital Anda sah secara hukum dan tersimpan dengan baik.",
image: rs2, image: rs2,