hero.jsx

import "./hero.css";

import img1 from "../assets/bn1.jpg";

const Hero = () => {
  return (
    
    <section id="hero" className="hero-section d-flex align-items-center">
      <div className="container">
        <div className="row align-items-center">
          
          {/* LEFT CONTENT */}
          <div className="col-xxl-7 col-xl-7 col-lg-8 col-md-12 col-sm-12 text-white">
            <p className="tag"><span className="eyebrow"></span>DIGITAL AGENCY</p>

            <h1 className="hero-title">
              Creative digital agency for modern brands.
            </h1>

            <p className="hero-desc">
              We design clean websites, strong brand identities, and
              growth-focused digital campaigns that make your business
              look sharp, premium, and trusted.
            </p>

            <div className="d-flex mobile-view gap-3 mt-4 flex-wrap">
              <button className="explore-btn">
                Explore Services
              </button>
              <button className="project-btn">
                Start a Project
              </button>
            </div>

            {/* Stats */}
            <div>
               <div className="row mt-5 g-3">
              <div className="col-4">
                <div className="stat-box">
                  <h3>12+</h3>
                  <p>Brand launches</p>
                </div>
              </div>

              <div className="col-4">
                <div className="stat-box">
                  <h3>4</h3>
                  <p>Core services</p>
                </div>
              </div>

              <div className="col-4">
                <div className="stat-box">
                  <h3>100%</h3>
                  <p>Responsive design</p>
                </div>
              </div>
            </div>
            </div>
           
          </div>

          {/* RIGHT IMAGE */}
          <div className=" col-xxl-5 col-xl-5 col-lg-4 col-md-12 col-sm-12 mt-5 mt-lg-0 text-center">
            <div
              className="hero-img"
              style={{ backgroundImage: `url(${img1})` }}
            ></div>
          </div>

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

export default Hero;