allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

after merge

Browse Source
This commit is contained in:
Yogamnan 2025-02-12 10:47:27 +07:00
parent 07e229dfad
commit ff016f6f21
5 changed files with 154 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,71 +1,111 @@
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 <div className="relative w-full overflow-hidden">
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" <div
style={{ 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"
backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`, style={{
backgroundSize: 'cover', backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
backgroundPosition: 'center', backgroundSize: "cover",
backgroundRepeat: 'no-repeat', backgroundPosition: "center",
backgroundBlendMode: 'multiply', backgroundRepeat: "no-repeat",
}} backgroundBlendMode: "multiply",
> }}
{/* Gambar L1-L4 untuk mobile */} >
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8"> {/* Gambar L1-L4 untuk mobile */}
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" /> <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L1} alt="image 1" 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={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" /> <img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
</div> <img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
{/* Teks dan tombol */}
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
<div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
<h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
</h1>
</div>
<p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
</p>
<div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
<img src={waIcon2} alt="WhatsApp Icon" className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto" />
Konsultasi Gratis
</button>
<button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
Coba Sekarang
</button>
</div>
</div>
{/* Gambar L1-L4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] -left-14 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full ml-16">
<img src={L1} alt="image 1" className="w-[200px] rounded-lg shadow-lg object-cover" />
<img src={L2} alt="image 2" className="w-[150px] rounded-lg shadow-lg object-cover mt-20" />
<img src={L3} alt="image 3" className="w-[210px] rounded-lg shadow-lg object-cover" />
<img src={L4} alt="image 4" className="w-[150px] rounded-lg shadow-lg object-cover -mt-5" />
</div>
{/* Gambar R1-R4 untuk desktop */}
<div className="absolute hidden md:grid top-[50%] -right-16 transform -translate-y-1/2 grid-cols-2 gap-4 max-w-full justify-end mr-16">
<img src={R1} alt="image 1" className="w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9" />
<img src={R2} alt="image 2" className="w-[200px] rounded-lg shadow-lg object-cover -ml-7" />
<img src={R3} alt="image 3" className="w-[180px] rounded-lg shadow-lg object-cover ml-7" />
<img src={R4} alt="image 4" className="w-[206px] rounded-lg shadow-lg object-cover" />
</div>
{/* Gambar R1-R4 untuk mobile */}
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
<img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
<img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
</div>
</div> </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>
{/* 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 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 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>
)
} }
export default Banner export default Banner

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

@ -12,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>

2
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">

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>

82
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}`}
{card.features.map((feature, i) => ( className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
<li key={i} className="flex items-center gap-2"> />
<img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature} <p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
</li> {card.description}
))} </p>
</ul> <ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
<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"> {card.features.map((feature, i) => (
Selengkapnya <span>&rarr;</span> <li key={i} className="flex items-center gap-2 text-sm md:text-base">
</button> <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
</div> </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>&rarr;</span>
</button>
</div>
))} ))}
</div> </div>
</section> </section>
); )
} }
export default Solusi; export default Solusi