forked from amnannn/rekan_ai
after merge
This commit is contained in:
Yogamnan
parent
07e229dfad
commit
ff016f6f21
@ -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() {
|
||||
return (
|
||||
<div
|
||||
className=" relative flex flex-col items-center justify-center mt-20 w-full h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
style={{
|
||||
backgroundImage: ` linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundBlendMode: 'multiply',
|
||||
}}
|
||||
>
|
||||
{/* Gambar L1-L4 untuk mobile */}
|
||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
||||
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
</div>
|
||||
|
||||
{/* Teks dan tombol */}
|
||||
<div className="px-4 mx-auto text-center w-full mt-8 md:mt-0">
|
||||
<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>
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div
|
||||
className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundBlendMode: "multiply",
|
||||
}}
|
||||
>
|
||||
{/* Gambar L1-L4 untuk mobile */}
|
||||
<div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
|
||||
<img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
<img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
|
||||
</div>
|
||||
)
|
||||
|
||||
{/* 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
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ const Header = () => {
|
||||
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
||||
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex-shrink-0 md:mr-5">
|
||||
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { homeLogo, waIcon, homeImg } from '../../assets';
|
||||
function Hero() {
|
||||
return (
|
||||
<div className="w-full overflow-hidden" id="Home">
|
||||
<div className="container mx-auto px-4 lg:px-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">
|
||||
{/* Left Section */}
|
||||
<div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none">
|
||||
|
||||
@ -28,10 +28,10 @@ function Mendukung() {
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[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 */}
|
||||
<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}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,71 +1,79 @@
|
||||
import {card1,card2,card3,card4,chek,} from '../../assets';
|
||||
|
||||
import { card1, card2, card3, card4, chek } from "../../assets"
|
||||
|
||||
function Solusi() {
|
||||
const cards = [
|
||||
{
|
||||
image: card1,
|
||||
description: 'Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.',
|
||||
features: ['Automasi Proses HR', 'Manajemen Karyawan'],
|
||||
description:
|
||||
"Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
|
||||
features: ["Automasi Proses HR", "Manajemen Karyawan"],
|
||||
},
|
||||
{
|
||||
image: card2,
|
||||
description: 'Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.',
|
||||
features: ['Autentikasi dokumen', 'Meterai dan Tanda Tangan Digital'],
|
||||
description:
|
||||
"Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
|
||||
features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
|
||||
},
|
||||
{
|
||||
image: card3,
|
||||
description: 'Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.',
|
||||
features: ['(Large Language Model) System', 'Virtual Assistant'],
|
||||
description:
|
||||
"Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
|
||||
features: ["(Large Language Model) System", "Virtual Assistant"],
|
||||
},
|
||||
{
|
||||
image: card4,
|
||||
description: 'Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.',
|
||||
features: ['Verifikasi Data dan Dokumen', 'Keaslian Informasi Pelanggan'],
|
||||
description:
|
||||
"Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
|
||||
features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
|
||||
<div className="text-center mb-12 md:-mt-48">
|
||||
<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">
|
||||
<h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
|
||||
<span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
|
||||
#Rekan AI
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] md:ml-24 text-center items-center">
|
||||
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai aspek.
|
||||
<p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center">
|
||||
Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
|
||||
aspek.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<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">
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-customWhite rounded-xl border p-6 flex flex-col items-center h-[681px] w-[402px] md:h-[695px] md:w-[350px]"
|
||||
>
|
||||
<img src={card.image} alt={`Card ${index + 1}`} className="w-[130px] h-[170px] md:w-auto md:h-auto xl:w-auto xl:h-auto 2xl:w-auto 2xl:h-auto mb-6" />
|
||||
<p className="text-customBlack text-left mt-4 flex-1">{card.description}</p>
|
||||
<ul className="text-left space-y-4 mb-8">
|
||||
{card.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-2">
|
||||
<img src={chek} alt="Check" className="mr-2 w-auto h-auto" /> {feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-[355px] h-[62px] md:w-[330px] md:h-[60px] bg-white border-[1px] shadow-sm shadow-zinc-800 border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300">
|
||||
Selengkapnya <span>→</span>
|
||||
</button>
|
||||
</div>
|
||||
key={index}
|
||||
className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
|
||||
>
|
||||
<img
|
||||
src={card.image || "/placeholder.svg"}
|
||||
alt={`Card ${index + 1}`}
|
||||
className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
|
||||
/>
|
||||
<p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
|
||||
{card.description}
|
||||
</p>
|
||||
<ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
|
||||
{card.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm md:text-base">
|
||||
<img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
|
||||
Selengkapnya <span>→</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default Solusi;
|
||||
export default Solusi
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user