46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { TypeAnimation } from "react-type-animation";
|
|
|
|
const HeroSection = () => {
|
|
return (
|
|
<div className="container max-w-7xl">
|
|
<div className="flex justify-center items-center relative overflow-hidden mx-auto">
|
|
{/* Background Image */}
|
|
<img
|
|
src="/assets/bg-hero.jpg"
|
|
alt="Jakarta Monument"
|
|
className="w-full h-[500px] object-cover rounded-3xl animate-fade-in"
|
|
/>
|
|
|
|
{/* Overlay Content */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<Badge className="bg-green-500 text-white hover:bg-green-600 mb-4">
|
|
Portal Resmi
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4 text-center">
|
|
<TypeAnimation
|
|
sequence={[
|
|
"Sistem Ketaatan Lingkungan",
|
|
1000,
|
|
"",
|
|
500,
|
|
]}
|
|
wrapper="span"
|
|
speed={50}
|
|
repeat={Infinity}
|
|
/>
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-600 text-center">
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|