Files
doormile-next/src/components/sections/BlogsHero.tsx
2026-05-30 17:24:26 +05:30

57 lines
2.4 KiB
TypeScript

import React from "react";
import Link from "next/link";
export default function BlogsHero() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: `
.blogs-hero-title {
color: #ffffff !important;
font-family: var(--font-manrope), sans-serif !important;
font-size: clamp(34px, 5.5vw, 68px) !important;
font-weight: 850 !important;
text-transform: uppercase !important;
letter-spacing: -1.5px !important;
margin: 0 !important;
}
`}} />
<div className="custom-standard-hero-container">
<div
style={{
backgroundImage: "url(/images/home2-banner-1.jpg)",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover"
}}
className="custom-standard-hero-card"
>
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
{/* Title / Heading for Blogs */}
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
<h1 className="blogs-hero-title">
Our <span style={{ color: "#C01227" }}>Blogs</span>
</h1>
</div>
<div
className="elementor-element elementor-element-91be79f elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
>
<div className="elementor-widget-container">
<nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
<Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
<span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
<span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Blogs</span>
</nav>
</div>
</div>
</div>
</div>
</div>
</>
);
}