import React from "react";
import { preload } from "react-dom";

export default function BlogsHero() {
  preload("/images/home2-banner-1.webp", { as: "image" });
  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;
            line-height: 1.08 !important;
            text-transform: uppercase !important;
            letter-spacing: -1.5px !important;
            margin: 0 !important;
        }
        .blogs-hero-content {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column !important;
            max-width: 1000px !important;
            margin: 0 auto !important;
            padding: 0 15px !important;
            box-sizing: border-box !important;
        }
      `}} />
      <div className="custom-standard-hero-container">
        <div 
          style={{ 
            backgroundImage: "url(/images/home2-banner-1.webp)", 
            backgroundPosition: "center center", 
            backgroundRepeat: "no-repeat", 
            backgroundSize: "cover" 
          }} 
          className="custom-standard-hero-card"
        >
          <div className="blogs-hero-content">
            
            {/* Title / Heading for Blogs */}
            <div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
              <h1 className="blogs-hero-title">
                Delivering Trust.<br />
                <span style={{ color: "#C01227" }}>Beyond Boundaries</span>
              </h1>
            </div>


          </div>
        </div>
      </div>
    </>
  );
}
