122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import Image from "next/image";
|
|
|
|
export default function Header() {
|
|
return (
|
|
<section className=" text-white">
|
|
{/* Bagian Atas */}
|
|
<div className="container bg-[#B4812E] mx-auto flex flex-col md:flex-row items-center justify-between px-6 py-10 md:py-16">
|
|
<div className="md:w-1/2 space-y-4 ml-10">
|
|
<h1 className="text-2xl md:text-[36px] font-bold leading-snug">
|
|
Capai Audiens yang Lebih Luas dengan melakukan <br />
|
|
<span className="text-white">Promote di CampaignPOOL</span>
|
|
</h1>
|
|
<p className="text-base md:text-lg opacity-90">
|
|
Buat jangkauan lebih luas dan lebih dikenal.
|
|
</p>
|
|
</div>
|
|
<div className="md:w-1/2 mt-8 md:mt-0 flex justify-center">
|
|
<Image
|
|
src="/h1.png"
|
|
alt="Promote Illustration"
|
|
width={400}
|
|
height={300}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bagian Langkah-langkah */}
|
|
<div className="container mx-auto text-center py-10 px-4">
|
|
<h2 className="text-[30px] font-bold text-black">
|
|
Cara Promote di CampaignPOOL
|
|
</h2>
|
|
<p className="text-[#1D1D1D] mt-2 text-[16px]">
|
|
Langkah mudah untuk memasang iklan
|
|
</p>
|
|
|
|
{/* Langkah-langkah */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 place-items-center">
|
|
{/* Langkah 1 */}
|
|
<div className="p-6 w-full max-w-sm">
|
|
<div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
|
|
<Image
|
|
src="/l1.png"
|
|
alt="Langkah 1"
|
|
width={150}
|
|
height={100}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 font-bold text-black text-center text-[20px]">
|
|
Langkah 1
|
|
</h3>
|
|
<p className="text-[16px] text-[#1D1D1D] mt-2 text-center">
|
|
Pilih tanggal tayang, tentukan target promote, dan unggah materi
|
|
iklan
|
|
</p>
|
|
</div>
|
|
|
|
{/* Langkah 2 */}
|
|
<div className="p-6 w-full max-w-sm">
|
|
<div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
|
|
<Image
|
|
src="/l2.png"
|
|
alt="Langkah 2"
|
|
width={150}
|
|
height={100}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 font-bold text-black text-center text-[20px]">
|
|
Langkah 2
|
|
</h3>
|
|
<p className="text-[16px] text-[#1D1D1D] mt-2 text-center">
|
|
Pemrosesan Internal dan Persetujuan
|
|
</p>
|
|
</div>
|
|
|
|
{/* Langkah 3 */}
|
|
<div className="p-6 w-full max-w-sm">
|
|
<div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
|
|
<Image
|
|
src="/l3.png"
|
|
alt="Langkah 3"
|
|
width={150}
|
|
height={100}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 font-bold text-black text-center text-[20px]">
|
|
Langkah 3
|
|
</h3>
|
|
<p className="text-[16px] text-[#1D1D1D] mt-2 text-center">
|
|
Selamat! Promote Anda tayang
|
|
</p>
|
|
</div>
|
|
|
|
{/* Langkah 4 (tengah bawah) */}
|
|
<div className="md:col-span-3 flex justify-center">
|
|
<div className="w-full max-w-sm">
|
|
<div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
|
|
<Image
|
|
src="/l4.png"
|
|
alt="Langkah 4"
|
|
width={150}
|
|
height={100}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 font-bold text-black text-center text-[20px]">
|
|
Langkah 4
|
|
</h3>
|
|
<p className="text-[16px] text-[#1D1D1D] mt-2 text-center">
|
|
Pantau perkembangan Promote Anda
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|