import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-single-hero7' },
  imports: [RouterLink],
  template: `
    <div
      class="main-hero main-hero5 _relative"
      style="background-color: #ECF5F6;"
    >
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-12 _relative">
            <div class="main-hadding7">
              <h1 class="font-f-7">
                Protecting Your Rights in Times of Trouble
              </h1>
              <div class="space24"></div>
              <p>
                Defending Your Rights, Upholding Justice, provides additional
                context and reinforces your firm's mission. Ur experienced team
                is here to protect your rights and provide .
              </p>
              <div class="space40"></div>
              <div class="header2-buttons">
                <a routerLink="/service" class="theme-btn8"
                  >Schedule A Consultation
                  <span><i class="fa-solid fa-arrow-right"></i></span
                ></a>
                <a routerLink="/about" class="theme-btn9"
                  >Learn More
                  <span><i class="fa-solid fa-arrow-right"></i></span
                ></a>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="hero7-images">
              <div class="hero7-img1">
                <img src="assets/img/image/hero7-img1.png" alt="" />
              </div>

              <div class="hero7-img2">
                <img src="assets/img/image/hero7-img2.png" alt="" />
              </div>

              <div class="hero7-img3">
                <img src="assets/img/image/hero7-img3.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class HeroComponent {}
