62 lines
2.9 KiB
JavaScript
62 lines
2.9 KiB
JavaScript
import { component11, wagreen, start22 } from "../asset";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function HeadPersonal() {
|
|
return (
|
|
<div className="container mx-auto px-4 lg:px-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
|
|
{/* Left Column */}
|
|
<div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
|
|
{/* Logo and Tagline */}
|
|
<div className="flex items-center lg:justify-start">
|
|
<span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
|
|
<img src={component11} alt="Logo" width={53.52} height={43} />
|
|
</span>
|
|
<span className="inline-flex items-center ml-[17px] 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>
|
|
|
|
{/* Header Text */}
|
|
<h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
|
|
Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
|
|
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 Column - Hero Image */}
|
|
<div className="order-2 lg:order-none flex justify-center">
|
|
<img
|
|
src={start22}
|
|
alt="Hero Illustration"
|
|
width={716}
|
|
height={743}
|
|
className="w-full h-auto md:w-[600px] md:h-[600px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Buttons - Ensure they come last on mobile */}
|
|
<div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
|
|
<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 font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
|
|
<img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
|
|
Konsultasi Gratis
|
|
</button>
|
|
<Link to={"/Contact#form"}>
|
|
<button
|
|
className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] 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
|
|
</button>
|
|
</Link>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|