116 lines
5.1 KiB
JavaScript
116 lines
5.1 KiB
JavaScript
import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
|
|
import { Link } from "react-router-dom"
|
|
|
|
function Banner() {
|
|
return (
|
|
<div className="relative w-full overflow-hidden">
|
|
<div
|
|
className="absolute top-0 left-0 w-full h-full"
|
|
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",
|
|
}}
|
|
></div>
|
|
|
|
<div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
|
|
{/* 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="container mx-auto px-4 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>
|
|
<Link to={"/Contact#form"}>
|
|
<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>
|
|
</Link>
|
|
</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 |