aboutus.component.html

<div class="relative">
  <div
    class="flex relative before:bg-primary/80 before:absolute before:w-full before:h-full"
  >
    <img
      src="./assets/img/png-images/14.jpg"
      alt=""
      class="h-[500px] w-full rounded-sm"
      id="profile-img2"
    />
  </div>
  <div
    class="absolute xxl:!top-24 top-16 xxl:!inset-x-1/4 sm:inset-x-[15%] text-center space-y-3 px-3"
  >
    <div class="text-white space-y-3">
      <p class="text-xl text-white/70">About Us</p>
      <h1 class="text-5xl font-bold">We Do Things Differently ....!!</h1>
      <p class="text-sm text-white/50">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
        voluptatibus dolorum voluptate cumque nulla dicta corporis consequatur
        animi! Neque temporibus odit labore maxime atque excepturi repellendus,
        non quas quasi.
      </p>
    </div>
    <button type="button" class="ti-btn ti-btn-secondary">
      Join Us <i class="ri-arrow-right-line rtl:rotate-180"></i>
    </button>
  </div>

  <!-- Start::main-content -->
  <div class="main-content sm:-mt-32 -mt-16">
    <!-- Start::Container -->
    <div
      class="container mx-auto bg-white dark:bg-bgdark rounded-sm relative py-8 px-8 mb-6"
    >
      <!-- Start::row-1 -->
      <div class="box">
        <div class="box-body">
          <div class="grid xl:grid-cols-2 gap-6">
            <div>
              <img
                class="rounded-sm"
                src="./assets/img/gallery/10.jpg"
                alt=""
              />
            </div>
            <div class="space-y-3">
              <h2 class="font-semibold text-3xl text-gray-800 dark:text-white">
                Hello! This is <span class="text-primary">Synto.</span>
              </h2>
              <p class="text-base font-semibold">This is Our Story.</p>
              <p class="text-gray-500 dark:text-white/70">
                It is a long established fact that a reader will be distracted
                by the readable content of a page when looking at its layout.
                The point of using Lorem Ipsum is that it has a more-or-less
                normal distribution of letters, as opposed to using 'Content
                here, content here', making it look like readable English. .
              </p>
              <p class="text-gray-500 dark:text-white/70">
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by
                injected humour, or randomised words which don't look even
                slightly believable. It uses a dictionary of over 200 Latin
                words, combined with a handful of model sentence structures, to
                generate Lorem Ipsum which looks reasonable.
              </p>

              <p class="text-gray-500 dark:text-white/70">
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by
                injected humour, or randomised words which don't look even
                slightly believable. It uses a dictionary of over 200 Latin
                words, combined with a handful of model sentence structures, to
                generate Lorem Ipsum which looks reasonable.
              </p>
              <a class="ti-btn ti-btn-primary" href="javascript:void(0);"
                >Read More
                <i class="ri ri-arrow-right-s-line"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-1 -->

      <!-- Start::row-2 -->
      <div class="box">
        <div class="box-body">
          <div class="grid xl:grid-cols-2 gap-6">
            <div class="space-y-3">
              <h2 class="font-semibold text-3xl text-gray-800 dark:text-white">
                Our Mission
              </h2>
              <p class="text-gray-500 dark:text-white/70">
                It is a long established fact that a reader will be distracted
                by the readable content of a page when looking at its layout.
                The point of using Lorem Ipsum is that it has a more-or-less
                normal distribution of letters, as opposed to using 'Content
                here, content here', making it look like readable English. .
              </p>
              <p class="text-gray-500 dark:text-white/70">
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by
                injected humour, or randomised words which don't look even
                slightly believable. It uses a dictionary of over 200 Latin
                words, combined with a handful of model sentence structures, to
                generate Lorem Ipsum which looks reasonable.
              </p>
              <p class="text-gray-500 dark:text-white/70">
                If you are going to use a passage of Lorem Ipsum, you need to as
                necessary All the Lorem Ipsum generators on the Internet tend to
                repeat Various versions have evolved over the years, sometimes
                by accident, sometimes on purpose (injected humour and the
                like).
              </p>
              <p class="text-gray-500 dark:text-white/70">
                If you are going to use a passage of Lorem Ipsum, you need to as
                necessary All the Lorem Ipsum generators on the Internet tend to
                repeat Various versions have evolved over the years, sometimes
                by accident, sometimes on purpose (injected humour and the
                like).
              </p>
              <a class="ti-btn ti-btn-primary" href="javascript:void(0);"
                >Read More
                <i class="ri ri-arrow-right-s-line"></i
              ></a>
            </div>
            <div>
              <img class="rounded-sm" src="./assets/img/gallery/9.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-2 -->

      <!-- Start::row-3 -->
      <div class="box bg-transparent border-0 shadow-none">
        <div class="box-body px-0">
          <div class="mb-6 text-center">
            <h2 class="font-semibold text-3xl text-gray-800 dark:text-white">
              Our Services
            </h2>
            <h5 class="text-sm text-gray-500 dark:text-white/70">
              If you are going to use a passage of Lorem Ipsum, you need to as
              necessary All the Lorem Ipsum generators on the Internet
            </h5>
          </div>
          <div class="sm:grid sm:space-y-0 space-y-6 grid-cols-12 gap-6">
            <div class="col-span-12 xl:col-span-3 md:col-span-6">
              <div class="box mb-0">
                <div class="box-body space-y-3 text-center">
                  <div class="mx-auto">
                    <img
                      alt="service-img"
                      src="./assets/img/png-images/3.png"
                    />
                  </div>
                  <h5 class="text-lg font-semibold">Branding</h5>
                  <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                    Rerum dignissimos, architecto asperiores optio ducimus
                    voluptatibus earum corrupti.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-span-12 xl:col-span-3 md:col-span-6">
              <div class="box mb-0">
                <div class="box-body space-y-3 text-center">
                  <div class="mx-auto">
                    <img
                      alt="service-img"
                      src="./assets/img/png-images/4.png"
                    />
                  </div>
                  <h5 class="text-lg font-semibold">Development</h5>
                  <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                    Rerum dignissimos, architecto asperiores optio ducimus
                    voluptatibus earum corrupti.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-span-12 xl:col-span-3 md:col-span-6">
              <div class="box mb-0">
                <div class="box-body space-y-3 text-center">
                  <div class="mx-auto">
                    <img
                      alt="service-img"
                      src="./assets/img/png-images/6.png"
                    />
                  </div>
                  <h5 class="text-lg font-semibold">Social Media</h5>
                  <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                    Rerum dignissimos, architecto asperiores optio ducimus
                    voluptatibus earum corrupti.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-span-12 xl:col-span-3 md:col-span-6">
              <div class="box mb-0">
                <div class="box-body space-y-3 text-center">
                  <div class="mx-auto">
                    <img
                      alt="service-img"
                      src="./assets/img/png-images/5.png"
                    />
                  </div>
                  <h5 class="text-lg font-semibold">E-commerce</h5>
                  <p class="mb-0 text-gray-500 dark:text-white/70 text-xs">
                    Rerum dignissimos, architecto asperiores optio ducimus
                    voluptatibus earum corrupti.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-3 -->

      <!-- Start::row-4 -->
      <div class="box bg-transparent border-0 shadow-none">
        <div class="box-body px-0">
          <div class="mb-6 text-center">
            <h2 class="font-semibold text-3xl text-gray-800 dark:text-white">
              What Our Clients Say
            </h2>
            <h5 class="text-sm text-gray-500 dark:text-white/70">
              If you are going to use a passage of Lorem Ipsum, you need to as
              necessary All the Lorem Ipsum generators on the Internet
            </h5>
          </div>
          <owl-carousel-o  class="swiper about-swipe2 our-clients-says" [options]="customOptions">
          <ng-container class="swiper-wrapper" *ngFor="let slide of slidesStore">
            <ng-template  class="swiper-slide" carouselSlide >
          
                    <div class="box mb-0 text-start rtl:dir-rtl">
                      <div class="box-body">
                        <div class="flex space-x-1 rtl:space-x-reverse">
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                          <div class="text-yellow-500 text-base hover:text-yellow-500"><i class="ri-star-fill"></i></div>
                        </div>
                        <p class="mb-6">
                         {{slide.summary}}
                        </p>
                        <a class="flex my-auto">
                          <img  [src]="slide.src" class="avatar avatar-sm !rounded-full">
                          <div class="ltr:pl-4 rtl:pr-4 my-auto">
                            <p class="font-medium text-base leading-none">{{slide.name}}</p>
                            <span class="dark:text-white/70 text-gray-500 text-xs">{{slide.title}}</span>
                          </div>
                        </a>
                      </div>
                    </div>
                
              </ng-template>
              </ng-container>
              </owl-carousel-o>
        </div>
      </div>
      <!-- End::row-4 -->

      <!-- Start::row-5 -->
      <div class="box mb-0 overflow-hidden">
        <div class="box-body">
          <div class="space-y-8 my-auto text-center">
            <div class="">
              <h2
                class="font-semibold text-3xl text-gray-800 dark:text-white mb-3 leading-none"
              >
                Contact Us
              </h2>
              <p class="text-gray-500 dark:text-white/70">
                Have any questions ? We would love to hear from you.
              </p>
            </div>
            <div>
              <div class="space-y-6 mb-6 text-start">
                <div class="grid md:grid-cols-3 gap-6">
                  <div class="space-y-3">
                    <label for="fullname" class="my-auto ti-div-label"
                      >Full Name</label
                    >
                    <input
                      type="text"
                      class="ti-form-input"
                      id="fullname"
                      placeholder="Enter Full Name"
                    />
                  </div>
                  <div class="space-y-3">
                    <label for="Email-id" class="my-auto ti-form-label"
                      >Email ID</label
                    >
                    <input
                      type="email"
                      class="ti-form-input"
                      id="Email-id"
                      placeholder="Enter Email Id"
                    />
                  </div>
                  <div class="space-y-3">
                    <label for="phoneno" class="my-auto ti-form-label"
                      >Phone No :</label
                    >
                    <input
                      type="number"
                      class="ti-form-input"
                      id="phoneno"
                      placeholder="Enter Phone No"
                    />
                  </div>
                </div>
                <div class="space-y-3">
                  <label for="messagearea" class="my-auto ti-form-label"
                    >Message</label
                  >
                  <textarea
                    class="ti-form-input"
                    rows="6"
                    id="messagearea"
                    placeholder="Enter Your Messaage"
                  ></textarea>
                </div>
              </div>
              <a
                class="text-center ti-btn ti-btn-primary"
                href="javascript:void(0);"
                >Send Message</a
              >
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-5 -->
    </div>
    <!-- End::Container -->
  </div>
  <!-- Start::main-content -->
</div>