<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>