2025-02-07 17:06:16 +07:00

66 lines
2.9 KiB
JavaScript

import { component11, wagreen, start22 } from "../asset";
function HeadPersonal() {
return (
<div
className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
id="Home"
>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
{/* Left Section */}
<div className="text-left items-center">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
<img
className="w-3/4 sm:w-auto max-h-20 object-contain"
src={component11 || "/placeholder.svg"}
alt="Home Logo"
width={200}
height={80}
/>
<span className="inline-flex items-center justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
# Solusi Personal
</span>
</div>
<h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
</h1>
<p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era
digital. Baik Anda seorang profesional, pelajar, atau individu yang
mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan
teknologi yang mudah digunakan, efisien, dan dapat diandalkan.
</p>
</div>
{/* Right Section (Home Image) */}
<div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
<img
src={start22 || "/placeholder.svg"}
alt="Home Image"
className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
width={807}
height={600}
/>
</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] text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
<img
src={wagreen}
alt="WhatsApp Icon"
className="mr-2 h-[30px] w-[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 text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
Coba Sekarang
</button>
</div>
</div>
);
}
export default HeadPersonal;