30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
import React from "react";
|
|
|
|
interface HeroSecondProps {
|
|
title: string;
|
|
}
|
|
|
|
export default function HeroSecond({ title }: HeroSecondProps) {
|
|
return (
|
|
<>
|
|
<div className="container max-w-5xl">
|
|
<div className="flex justify-center items-center relative overflow-hidden mx-auto">
|
|
{/* Background Image */}
|
|
<img
|
|
src="/assets/hero-second.jpg"
|
|
alt="Hero Section"
|
|
className="w-full object-cover rounded-lg md:rounded-3xl"
|
|
/>
|
|
|
|
{/* Overlay Content */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<h1 className="text-2xl md:text-5xl font-bold text-gray-800 mb-4 text-center md:text-right absolute md:right-24 top-1/2 -translate-y-1/2">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|