35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import { Input } from "@/components/ui/input";
|
|
import { useRouter } from "@/i18n/routing";
|
|
import { useTranslations } from "next-intl";
|
|
import React, { useState } from "react";
|
|
import { Reveal } from "../Reveal";
|
|
|
|
const SearchSectionKaltara = () => {
|
|
const [search, setSearch] = useState("");
|
|
const router = useRouter();
|
|
const t = useTranslations("LandingPage");
|
|
|
|
return (
|
|
<>
|
|
<Reveal>
|
|
<div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
|
|
{/* Heading */}
|
|
<h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
|
|
<p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
|
|
|
|
{/* Subjudul */}
|
|
<h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
|
|
|
|
{/* Search Bar */}
|
|
<div className="relative mt-4 w-full max-w-sm md:max-w-md">
|
|
<Input type="text" placeholder="Cari liputan disini..." className="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm md:text-base text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-sans" />
|
|
<button className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500">🔍</button>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchSectionKaltara;
|