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

@Component({
  selector: 'app-about',
  host: { 'app-about': 'app-single-about7' },
  imports: [RouterLink,CountUpModule],
  template: `
    <div class="about7 sp3" id="about">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="about7-images">
              <div
                class="about7-img1"
                data-aos="zoom-out"
                data-aos-duration="700"
              >
                <img src="assets/img/image/about7-img1.png" alt="" />
              </div>
              <div
                class="about7-img2"
                data-aos="zoom-out"
                data-aos-duration="900"
              >
                <img src="assets/img/image/about7-img2.png" alt="" />
              </div>
              <div
                class="about7-img3"
                data-aos="zoom-out"
                data-aos-duration="1100"
              >
                <h1><span class="counter" [countUp]="25" [options]="{ suffix : '+'}"></span></h1>
                <div class="space12"></div>
                <p>Years Of experience</p>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="hadding7 about7-hadding">
              <h1 class="font-f-7" data-aos="fade-left" data-aos-duration="700">
                A professional lawyer ready to assist you
              </h1>
              <div class="space24"></div>
              <p data-aos="fade-left" data-aos-duration="900">
                John Smith, Esq., is a seasoned criminal defense attorney with
                over 15 years of experience. He is committed to providing
                aggressive legal representation and ensuring that every client's
                rights are upheld. With a track record of winning cases and...
              </p>
              <div class="about4-counter-boxs">
                <div class="row">
                  <div class="col-md-6">
                    <div
                      class="about7-counter-box"
                      data-aos="fade-left"
                      data-aos-duration="700"
                    >
                      <h1><span class="counter" [countUp]="76" [options]="{ suffix : '+'}"></span></h1>
                      <p>Projects Completed</p>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div
                      class="about7-counter-box"
                      data-aos="fade-left"
                      data-aos-duration="900"
                    >
                      <h1><span class="counter" [countUp]="76" [options]="{ suffix : '+'}"></span></h1>
                      <p>Projects Completed</p>
                    </div>
                  </div>
                </div>
                <div class="space30"></div>
                <div class="" data-aos="fade-left" data-aos-duration="800">
                  <a routerLink="/about" class="theme-btn8"
                    >More About Us
                    <span><i class="fa-solid fa-arrow-right"></i></span
                  ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class AboutComponent {}
