import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CountUpModule } from 'ngx-countup';

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-hero2' },
  imports: [CountUpModule,RouterLink],
  template: `
     <div class="main-hero main-hero1">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-7 col-md-12">
              <div class="main-hadding">
                <h1 data-aos="fade-right" data-aos-duration="700">Unlock Your HR <br> Potential with Strategic Consulting Services</h1>
                <div class="space24"></div>
                <p data-aos="fade-right" data-aos-duration="800">Maximize Your Human Capital and Drive Organizational Success. We help business <br> to perform with our customized solution helping them take business. </p>
                <div class="space40"></div>
                <div class="header1-buttons" data-aos="fade-right" data-aos-duration="1000">
                    <div class="button1-all">
                      <a routerLink="/contact" class="btn_theme btn_theme_active mt_40 wow fadeInDown" data-wow-duration="0.8s">Schedule A Consultation<span></span></a>
                    </div>
                    <div class="header1-button-all">
                      <a routerLink="/contact" class="btn_theme2 btn_theme btn_theme_active2 wow fadeInDown2" data-wow-duration="0.8s">Contact Us<span></span></a>
                    </div>
                 </div>
              </div>
            </div>

            <div class="col-lg-5 col-md-12 text-center">
              <div class="hero1-image-all">
                <div class="hero1-img-1 aniamtion-key-1">
                  <img src="assets/img/shapes/header1-shape.svg" alt="">
                </div>
                <div class="hero1-img-2 border90" data-aos="zoom-out" data-aos-duration="1000">
                  <img src="assets/img/image/header-img1.png" alt="">
                </div>
                <div class="hero1-img-3 border90" data-aos="zoom-out" data-aos-duration="800">
                  <img src="assets/img/image/header-img2.png" alt="">
                </div>
                <div class="hero1-img-4" data-aos="zoom-out" data-aos-duration="800">
                  <div class="hero-counter-box">
                    <div class="hero-counter-text">
                      <h1 [countUp]="16"></h1>
                      <p>Years <br> Experience</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
  `,
  styles: ``
})
export class HeroComponent {

}
