@extends('front.layouts.master')
@section('title', __('unlimited'))
@push('styles')
    <style>
        .achievements-wrapper .counter-content_about {
            background-image: url({{ asset('front/assets/images/pattern.svg') }})
        }

        .about-video::after {
            background-color: rgba(0, 0, 0, .25);

        }
        .large-p{
            font-size: 120%;
        }
        .we-offer-icn{
            max-width: 95px;
            margin: 0 auto;
            display: block;
        }
        .how-it-work-item {
            height: 100%;
        }
    </style>
@endpush
@section('content')

    <!-- start page header -->
    <section class="dark-overlay hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 text-white">
        <img class="bg-image" src="{{ asset('front/assets/images/header/01.jpg') }}" alt="Image">
        <div class="container overlay-content py-5">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-10">
                    <!-- start section header -->
                    <div class="section-header text-center" data-aos="fade-down">
                        <!-- start description -->
                        <div class="bg-primary d-inline-block fs-14 mb-3 px-4 py-2 rounded-5 sub-title">About Us</div>
                        <!-- end /. section header sub title -->
                        <!-- start section header -->
                        <h2 class="display-4 fw-semibold mb-3 section-header__title text-capitalize">Welcome to Showoff Unlimited!</h2>
                        <!-- end /. section header title -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
        </div>
    </section>
    <!-- end /. page header -->
    <!-- start achievements section -->
    <!--<div class="container">-->
    <!--    <div class="achievements-wrapper ms-auto me-auto">-->
    <!--        <div class="bg-center js-bg-image bg-cover bg-light counter-content_about position-relative rounded-4">-->
    <!--            <div class="g-4 justify-content-center row">-->
    <!--                <div class="col-sm-6 col-xl-3 text-center">-->
    <!--                    <div class="display-5 fw-semibold numscroller text-primary"><span class="counter">3,000 </span>+-->
    <!--                    </div>-->
    <!--                    <h5 class="fs-18 mb-0 mt-3">Job posted</h5>-->
    <!--                </div>-->
    <!--                <div class="col-sm-6 col-xl-3 text-center">-->
    <!--                    <div class="display-5 fw-semibold numscroller text-primary"><span class="counter">2,500 </span>+-->
    <!--                    </div>-->
    <!--                    <h5 class="fs-18 mb-0 mt-3">Successful hires</h5>-->
    <!--                </div>-->
    <!--                <div class="col-sm-6 col-xl-3 text-center">-->
    <!--                    <div class="display-5 fw-semibold numscroller text-primary"><span class="counter">10</span>M +</div>-->
    <!--                    <h5 class="fs-18 mb-0 mt-3">Monthly visits</h5>-->
    <!--                </div>-->
    <!--                <div class="col-sm-6 col-xl-3 text-center">-->
    <!--                    <div class="display-5 fw-semibold numscroller text-primary"><span class="counter">593 </span>+</div>-->
    <!--                    <h5 class="fs-18 mb-0 mt-3">Verified companies</h5>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    <!-- end /. achievements section -->
    <!-- start about section -->
    <div class="py-5">
        <div class="container py-4">
            
            <div class="row" id="about">
                <div class="col-md-12">
                    <div class="column-text-box left">
                        <p class="large-p">At Showoff Unlimited, we believe that life is a collection of unforgettable moments, and we’re here to help you seize them all. As a premier lifestyle app, we bring you an exciting array of exclusive offers, event tickets, and regular giveaways, all at your fingertips.</p>
                    </div>
                </div>
            </div>
            
            <!--<div class="row justify-content-center">-->
            <!--    <div class="col-sm-10 col-md-10 col-lg-8">-->
            <!--    </div>-->
            <!--</div>-->
            <div class="row g-4" id="about">
                <div class="col-md-6">
                    <!-- start section header -->
                    <div class="section-header text-left mb-5 aos-init aos-animate" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div
                            class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                            Explore</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Who We Are</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <!--<div class="sub-title fs-16">Discover exciting categories. <span-->
                        <!--        class="text-primary fw-semibold">Find what you’re looking for.</span></div>-->
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                    <div class="column-text-box left">
                        <p><span
                                class="float-start important-text mb-2 me-2 position-relative text-primary fs-50"><strong>S</strong></span>howoff Unlimited is your gateway to the best experiences life has to offer. Whether you’re looking to score tickets to the hottest concerts, indulge in dining experiences, or pamper yourself with our services ,we’ve got you covered. Our mission is to make extraordinary moments accessible and easy to enjoy, helping you live life to the fullest.</p>
                        <!--<p> 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>-->
                        <!--<blockquote class="about-blockquote display-6 font-caveat fst-italic my-3"> It uses a dictionary of-->
                        <!--    over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem-->
                        <!--    Ipsum which looks reasonable.</blockquote>-->
                        <!--<p>We hope you enjoy it using it as much as we did building it. Cheers!</p>-->
                        <!--<img src="{{ asset('front/assets/images/png-img/signature.png') }}" alt=""-->
                        <!--    class="signature mt-4">-->
                    </div>
                </div>
                <div class="col-md-6 ps-xxl-5">
                    <!-- start about image masonry -->
                    <div class="ps-xl-4 position-relative">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="about-image-wrap mb-3 rounded-4">
                                    <img src="{{ asset('front/assets/images/about/01.jpg') }}" alt=""
                                        class="h-100 w-100 object-fit-cover about-image-one rounded-3">
                                </div>
                                <!--<div class="about-image-wrap rounded-4">-->
                                <!--    <img src="{{ asset('front/assets/images/about/02.jpg') }}" alt=""-->
                                <!--        class="h-100 w-100 object-fit-cover about-image-two rounded-3">-->
                                <!--</div>-->
                            </div>
                            <div class="col-6">
                                <div class="about-image-wrap mb-3 rounded-4">
                                    <img src="{{ asset('front/assets/images/about/03.jpg') }}" alt=""
                                        class="h-100 w-100 object-fit-cover about-image-three rounded-3">
                                </div>
                                <!--<div class="about-image-wrap rounded-4">-->
                                <!--    <img src="{{ asset('front/assets/images/about/04.jpg') }}" alt=""-->
                                <!--        class="h-100 w-100 object-fit-cover about-image-four rounded-3">-->
                                <!--</div>-->
                            </div>
                        </div>
                        <img src="{{ asset('front/assets/images/png-img/about-shape-1.png') }}" alt="About Shape"
                            class="banner-shape-one position-absolute">
                        <img src="{{ asset('front/assets/images/png-img/about-shape-2.png') }}" alt="About Shape"
                            class="banner-shape-two position-absolute">
                    </div>
                    <!-- end /. about image masonry -->
                </div>
            </div>
        </div>
    </div>
    <!-- end /. about section -->
    <!-- start awards section -->
    <div class="bg-dark mb-3 mx-3 py-5 rounded-4">
        <div class="container py-4" id="about">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div
                            class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                            Explore</div>
                        <!-- end /. subtitle -->
                        <!-- start section header -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize text-white">What We Offer</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <!--<div class="sub-title fs-16 text-white">Find a job you love. <span-->
                        <!--        class="text-primary fw-semibold">Set your career interests.</span></div>-->
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="row justify-content-center g-4 g-xxl-5">
                <div class="col-6 col-md-4">
                    <img class="we-offer-icn" src="{{ asset('front/assets/images/png-img/discount.png') }}" alt=""
                        class="img-fluid px-xl-4">
                    <div class="mt-3 pt-3 text-center">
                        <h5 class="text-primary">Exclusive Offers</h5>
                        <div class="text-white">Discover unbeatable deals on saloon and car wash services. From dining and entertainment, our curated offers are designed to enrich your lifestyle.</div>
                    </div>
                </div>
                <div class="col-6 col-md-4">
                    <img class="we-offer-icn" src="{{ asset('front/assets/images/png-img/tickets.png') }}" alt=""
                        class="img-fluid px-xl-4">
                    <div class="mt-3 pt-3 text-center">
                        <h5 class="text-primary">Event Tickets</h5>
                        <div class="text-white">Never miss out on the events that matter to you. With Showoff Unlimited, you can easily purchase tickets to concerts, sports events, theater shows, festivals, and more.</div>
                    </div>
                </div>
                <div class="col-6 col-md-4">
                    <img class="we-offer-icn" src="{{ asset('front/assets/images/png-img/offering.png') }}" alt=""
                        class="img-fluid px-xl-4">
                    <div class="mt-3 pt-3 text-center">
                        <h5 class="text-primary">Regular Giveaways</h5>
                        <div class="text-white">Our community is at the heart of what we do. As a token of our appreciation, we host regular giveaways, giving you the chance to win amazing prizes and unique experiences.
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end /. awards section -->
    <!-- start about video section -->
    <!--<div class="about-video position-relative mx-3 rounded-4 overflow-hidden" >-->
        <!-- Image Parallax -->
    <!--    <div class="simpleParallax simple-parallax-initialized" style="overflow: hidden;">-->
    <!--        <img src="{{ asset('front/assets/images/about/bg-01.jpg') }}" alt=""-->
    <!--            class="about-img js-image-parallax">-->
    <!--    </div>-->
    <!--    <a class="align-items-center bg-blur d-flex justify-content-center text-decoration-none popup-youtube position-absolute rounded-circle start-50 text-white top-50 translate-middle video-icon z-1"-->
    <!--        href="https://www.youtube.com/watch?v=0O2aH4XLbto">-->
    <!--        <i class="fas fa-play"></i>-->
    <!--    </a>-->
    <!--</div>-->
    <!-- end /. about video section -->
    
    
    <!-- How It Work Section Start -->
	<div class="how-it-works">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<!-- Section Title Start -->
					<div class="section-title">
						<h2 class="text-anime">Why Choose Showoff Unlimited?</h2>
					</div>
					<!-- Section Title End -->
				</div>
			</div>

			<div class="row">
				<div class="col-lg-4 col-md-6">
					<!-- How it Work Item Start -->
					<div class="how-it-work-item wow fadeInUp" data-wow-delay="0.25s">
						<div class="icon-box">
							<img src="{{ asset('front/assets/images/icon-how-4.svg') }}" alt="">
						</div>

						<h3>User-Friendly</h3>
						<p>Our app is designed with you in mind, ensuring a seamless and enjoyable experience from browsing to booking.</p>
					</div>
					<!-- How it Work Item End -->
				</div>

				<div class="col-lg-4 col-md-6">
					<!-- How it Work Item Start -->
					<div class="how-it-work-item wow fadeInUp" data-wow-delay="0.5s">
						<div class="icon-box">
							<img src="{{ asset('front/assets/images/icon-how-2.svg') }}" alt="">
						</div>

						<h3>Curated Experiences</h3>
						<p>We handpick our offers and events to ensure you get the best of the best. Quality and exclusivity are our top priorities.</p>
					</div>
					<!-- How it Work Item End -->
				</div>

				<div class="col-lg-4 col-md-6">
					<!-- How it Work Item Start -->
					<div class="how-it-work-item wow fadeInUp" data-wow-delay="0.75s">
						<div class="icon-box">
							<img src="{{ asset('front/assets/images/icon-how-3.svg') }}" alt="">
						</div>

						<h3>Community Focused</h3>
						<p>We’re more than just an app (Website / portal); we’re a community of like-minded individuals who love to live life to the fullest. Join us and connect with others who share your passion for exceptional experiences.</p>
					</div>
					<!-- How it Work Item End -->
				</div>
			</div>
		</div>
	</div>
	<!-- How It Work Section End -->
    
    
    
    <!-- About Section Start -->
	<div class="about-us pt-3 pb-3" id="about" style="background: #a020f0;margin-top: 40px;border-radius: 20px;">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-12">
					<!-- About Content Start -->
					<div class="about-content">
						<!-- Section Title Start -->
						<div class="section-title">
							<h2 class="text-anime text-white">Our Vision</h2>
						</div>
						<!-- Section Title End -->

						<!-- About Content Body Start -->
						<div class="about-content-body">
							<p class="wow fadeInUp text-white" data-wow-delay="0.5s">At Showoff Unlimited, we envision a world where everyone can effortlessly access and enjoy life’s best moments. We are committed to continuously enhancing our platform, expanding our offerings, and creating even more opportunities for you to make lasting memories.</p>

						</div>
						<!-- About Content Body End -->

					</div>
					<!-- About Content End -->
				</div>
			</div>
		</div>
	</div>
	<!-- About Section End -->
	
	<br>
	<br>
	<br>

    
    
    <!-- start team section -->
    @if (count($team_members) > 0)
        <div class="py-5" id="about" style="display: none">
            <div class="container py-4">
                <div class="row">
                    <div class="col-sm-10 col-md-10 col-lg-6">
                        <!-- start section header -->
                        <div class="section-header mb-5" data-aos="fade-down">
                            <!-- start subtitle -->
                            <div
                                class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                                Our Team</div>
                            <!-- end /. subtitle -->
                            <!-- start title -->
                            <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Meet Our Team</h2>
                            <!-- end /. title -->
                            <!-- start description -->
                            <div class="sub-title fs-16">A team of experienced and dedicated professionals who are
                                passionate
                                about helping our clients find their dream properties. From our agents to our support staff,
                                everyone on our team is committed to providing personalized service, expert guidance, and
                                exceptional results.</div>
                            <!-- end /. description -->
                        </div>
                        <!-- end /. section header -->
                    </div>
                </div>
                <div class="row justify-content-center g-4 gx-xxl-5">
                    @foreach ($team_members as $team_member)
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <!-- Start Card -->
                            <div class="team-member">
                                <div class="member-header overflow-hidden position-relative rounded-4">
                                    <div class="d-block overflow-hidden position-relative team-avatar-container">
                                        @php
                                            $image = explode('/', $team_member->profile_image);
                                        @endphp
                                        <img src="{{ asset('storage/team_profile_images/' . end($image)) }}"
                                            class="img-fluid w-100" alt="">
                                    </div>
                                    <ul
                                        class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
                                        <li><a href="{{ $team_member->facebook_link }}"
                                                class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white text-decoration-none"><i
                                                    class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="{{ $team_member->twitter_link }}"
                                                class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white text-decoration-none"><i
                                                    class="fab fa-twitter"></i></a></li>
                                        <li><a href="{{ $team_member->linkedin_link }}"
                                                class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white text-decoration-none"><i
                                                    class="fab fa-linkedin-in"></i></a></li>
                                    </ul>
                                </div>
                                <!-- Start Avatar Info -->
                                <div class="member-info mt-3 text-center">
                                    <h4 class="mb-2 member-name text-truncate">{{ $team_member->name }}</h4>
                                    <div>{{ $team_member->designation }}</div>
                                </div>
                                <!-- /.End Avatar Info -->
                            </div>
                            <!-- /.End Card -->
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    @if (count($customers) > 0)
        <!-- end /. team section -->
        <!-- start customers section -->
        <div class="py-5 bg-light"  style="display: none">
            <div class="container py-4">
                <div class="row justify-content-center">
                    <div class="col-sm-10 col-md-10 col-lg-8">
                        <!-- start section header -->
                        <div class="section-header text-center mb-5" data-aos="fade-down">
                            <!-- start subtitle -->
                            <div
                                class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">
                                Our Customers</div>
                            <!-- end /. subtitle -->
                            <!-- start title -->
                            <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Trusted By
                                Thousands
                                News Of Companies</h2>
                            <!-- end /. title -->
                            <!-- start description -->
                            <div class="sub-title fs-16">Discover exciting categories. <span
                                    class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                            <!-- end /. description -->
                        </div>
                        <!-- end /. section header -->
                    </div>
                </div>
                <div class="row align-items-center justify-content-center g-2 g-sm-3 g-md-4" id="about">
                    @foreach ($customers as $customer)
                        <div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
                            <div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
                                @php
                                    $image = explode('/', $customer->image);
                                @endphp
                                <img src="{{ asset('storage/customers_images/' . end($image)) }}" alt=""
                                    height="60" class="company-logo img-fluid">
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    @endif

    <!-- end /. customers section -->
@endsection
@push('styles')
    <!-- Main About css -->
    <link href="{{ asset('front/assets/css/plugins/aos/aos.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/OwlCarousel2/css/owl.carousel.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/OwlCarousel2/css/owl.theme.default.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css') }}"
        rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/ion.rangeSlider/ion.rangeSlider.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/magnific-popup/magnific-popup.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/select2/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/css/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css') }}"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <style>
        @media (min-width: 1200px) {
            #about {
                max-width: 1140px !important;
                margin: auto;
            }
        }
    </style>
@endpush
@push('script')
    <script>
        AOS.init();
        var image = document.getElementsByClassName('js-image-parallax');
        new simpleParallax(image);
        $(function() {
            $('.popup-youtube, .popup-vimeo').magnificPopup({
                disableOn: 700,
                type: 'iframe',
                mainClass: 'mfp-fade',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
            });
        });
    </script>
@endpush