57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
const SwaperSlideContent = ({
|
|
ImageUrl = "",
|
|
Title = "",
|
|
Body = "",
|
|
ContentAlign = "right",
|
|
}) => {
|
|
return (
|
|
<div className="container-fluid p-0">
|
|
<div
|
|
className="position-relative text-center text-white"
|
|
style={{
|
|
background: `url('${ImageUrl}') center center/cover no-repeat`,
|
|
height: "500px",
|
|
}}
|
|
>
|
|
{/* Overlay */}
|
|
<div
|
|
className="position-absolute top-0 start-0 w-100 h-100"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1))",
|
|
}}
|
|
></div>
|
|
|
|
{/* Text Content */}
|
|
<div
|
|
className={
|
|
"position-absolute top-50 p-5 " +
|
|
(ContentAlign == "left"
|
|
? "start-0 text-start ps-10 ms-10"
|
|
: "start-50 text-end pe-10 me-10")
|
|
}
|
|
style={{
|
|
borderRadius: "10px",
|
|
background:
|
|
"linear-gradient(to bottom, rgba(194, 216, 237,1), rgba(105, 108, 255, 0.8))",
|
|
boxShadow: "10px 10px 15px rgba(0, 0, 0, 0.4)",
|
|
}}
|
|
>
|
|
<h1 className="fw-bold text-primary hero-title display-6 fw-extrabold">
|
|
{Title}
|
|
</h1>
|
|
<p className="lead text-dark">{Body}</p>
|
|
{/* <a
|
|
href="#services"
|
|
className="btn btn-primary btn-lg mt-3"
|
|
>
|
|
Get Started
|
|
</a> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SwaperSlideContent;
|