@extends('layouts.master')

@section('styles')

        <!-- SWIPER CSS -->
        <link rel="stylesheet" href="{{asset('build/assets/libs/swiper/swiper-bundle.min.css')}}">

@endsection

@section('content')

                    <div class="content relative">

                        <div class="flex relative before:bg-primary/80 before:absolute before:w-full before:h-full">
                            <img src="{{asset('build/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">
                            <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="{{asset('build/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 rtl:rotate-180"></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 rtl:rotate-180"></i></a>
                                    </div>
                                    <div>
                                    <img class="rounded-sm" src="{{asset('build/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="{{asset('build/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="{{asset('build/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="{{asset('build/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="{{asset('build/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>
                                <div class="swiper about-swipe2">
                                    <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo.
                                            </p>
                                            <a class="flex my-auto">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/2.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Socrates Itumay</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore vel ut impedit. Sapiente id libero reprehenderit accusantium nisi. Dolorum hic voluptas quia id.
                                            </p>
                                            <a class="flex my-auto ">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/12.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Eos Tempor</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered by injected humour, or randomised words which don't look even slightly believable.
                                            </p>
                                            <a class="flex my-auto ">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/3.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Airi Satou</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            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="flex my-auto ">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/13.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Mc Greggor</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            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, .
                                            </p>
                                            <a class="flex my-auto ">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/5.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Samantha Paul</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="box mb-0 text-start">
                                        <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">
                                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa molestias, officia, inventore incidunt aliquid amet nihil exercitationem, modi possimus voluptate molestiae explicabo assumenda.
                                            </p>
                                            <a class="flex my-auto ">
                                            <img alt="testimonial" src="{{asset('build/assets/img/users/15.jpg')}}" class="avatar avatar-sm !rounded-full">
                                            <div class="ltr:pl-4 rtl:pr-4 my-auto">
                                                <p class="font-medium text-base leading-none">Pope Johnson</p>
                                                <span class="dark:text-white/70 text-gray-500 text-xs">UI Developer</span>
                                            </div>
                                            </a>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </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>

@endsection

@section('scripts')

        <!-- SWIPER JS  -->
        <script src="{{asset('build/assets/libs/swiper/swiper-bundle.min.js')}}"></script>

        <!-- ABOUT JS -->
        @vite('resources/assets/js/about.js')


@endsection
