@extends('layouts.main')

@section('title')
    TribeArc Socialite
@endsection

@section('content')
    <style>
        .mainColor {
            color: #6d94f5;
        }

        .mainBgColor {
            background-color: #6d94f5;
        }

        .custom-img-fluid {
            margin-left: -65%;
            position: absolute;
            margin-top: 26%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            z-index: -2;
        }

        .ellipse_203 {
            position: absolute;
            margin-left: -4rem;
            margin-top: -1rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .rec_233 {
            position: absolute;
            right: -2rem;
            animation-name: opacity;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .rec_icon {
            position: absolute;
            width: 64px;
            height: 137px;
            background: #FA78BA;
            border-radius: 47px 0px 47px 47px;
            left: -6rem;
            margin-top: 10rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .rec_icon_right {
            position: absolute;
            width: 64px;
            height: 137px;
            background: #FFCE31;
            border-radius: 47px 0px 47px 47px;
            transform: matrix(-1, 0, 0, 1, 0, 0);
            margin-right: -5rem;
            top: 12rem;
            animation-name: direction-right;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .semi_icon {
            position: absolute;
            width: 60px;
            height: 30px;
            background: #FFCE31;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            top: 10rem;
        }

        .semi_icon_right {
            position: absolute;
            width: 60px;
            height: 30px;
            background: #83EE88;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            margin-top: 7rem;
            right: -7rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .forum_icon {
            position: absolute;
            width: 15.93px;
            height: 15.93px;
            left: 0;
            top: 11rem;
            background: #5151ff;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .forum_sm_icon {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 1.2rem;
            top: 11rem;
            background: #5151ff;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .forum_icon_2 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            left: 43rem;
            margin-top: 43rem;
            background: #FEA82F;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .forum_icon_3 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            right: 2rem;
            margin-top: 9rem;
            background: #FEA82F;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .forum_sm_icon_2 {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            right: -3rem;
            top: 14rem;
            background: #5151ff;
            border-radius: 50%;
        }

        .forum_sm_icon_3 {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 0;
            top: 37rem;
            background: #5151ff;
            border-radius: 50%;
        }

        .donor_icon {
            position: absolute;
            width: 15.93px;
            height: 15.93px;
            left: 40rem;
            top: 2rem;
            background: #5151ff;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .donor_sm_icon {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 39.5rem;
            top: 1.8rem;
            background: #5151ff;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .donor_icon_2 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            left: 15rem;
            margin-top: -5rem;
            background: #FEA82F;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .donor_sm_icon_2 {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: -3rem;
            top: 9rem;
            background: #5151ff;
            border-radius: 50%;
        }

        .donor_sm_icon_top {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 30rem;
            top: -11rem;
            background: #5151ff;
            border-radius: 50%;
        }

        .circle_icon {
            position: absolute;
            width: 15.93px;
            height: 15.93px;
            left: 9rem;
            top: 15rem;
            background: #FFFFFF;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle_sm_icon {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 8.5rem;
            top: 14.5rem;
            background: #FFFFFF;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle_sm_icon_2 {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: -8rem;
            top: 1rem;
            background: #FFFFFF;
            border-radius: 50%;
        }

        .circle_sm_icon_center {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            left: 28rem;
            top: -5em;
            background: #FFC93C;
            border-radius: 50%;
        }

        .circle_right_icon {
            position: absolute;
            width: 15.93px;
            height: 15.93px;
            right: -5rem;
            margin-top: -1rem;
            background: #FFFFFF;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle_sm_right_icon {
            position: absolute;
            width: 6.64px;
            height: 6.64px;
            right: -5.5rem;
            margin-top: 0;
            background: #FFFFFF;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle_icon_2 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            left: -12rem;
            top: 27rem;
            background: #FEA82F;
            border-radius: 50%;
        }

        .circle_right_icon_2 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            right: -12rem;
            top: 27rem;
            background: #FFFFFF;
            border-radius: 50%;
            animation-name: color-change;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle_right_top_icon_2 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            right: -12rem;
            top: 6.5rem;
            background: #FEA82F;
            border-radius: 50%;
        }

        .circle_right_top_icon_3 {
            position: absolute;
            width: 10.62px;
            height: 10.62px;
            margin-top: 25rem;
            left: 3rem;
            background: #fff;
            border-radius: 50%;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .group_ellipse {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse12.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            left: -2rem;
            margin-top: 20.5rem;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .group_ellipse_1 {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse12.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            right: 0;
            margin-top: 0px;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .donor_ellipse_1 {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse12.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            right: -2rem;
            margin-top: -2rem;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .group_ellipse_2 {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse11.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            right: 15rem;
            margin-top: 13rem;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .chart {
            position: absolute;
            background: #fff;
            right: 22rem;
            height: 117px;
            width: 200px;
            border-radius: 13px;
            margin-top: 19rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            box-shadow: 0px 4px 39px rgb(0 0 0 / 17%);
        }

        .donor {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/donor_hands.png') }}');
            background-repeat: no-repeat;
            right: 11rem;
            height: 238px;
            width: 453px;
            margin-top: 8rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .chart img {
            width: 180px;
            text-align: center;
            padding: 30px 0 0 21px;
        }

        .group_ellipse_right {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse11.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            left: 22.5rem;
            margin-top: 5rem;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .group_ellipse_right-1 {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/group_ellipse13.png') }}');
            background-repeat: no-repeat;
            height: 297.02px;
            width: 300px;
            left: 18rem;
            margin-top: -2rem;
            z-index: -1;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .group_c {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/g_22.png') }}');
            background-repeat: no-repeat;
            width: 393.31px;
            height: 247px;
            left: 16rem;
            margin-top: 14rem;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .vector_bg_left {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/vector_61.png') }}');
            background-repeat: no-repeat;
            width: 674px;
            height: 1328px;
            left: -7rem;
            top: -7rem;
            z-index: -3;
        }

        .vector_bg_left_1 {
            position: absolute;
            background-image: url('{{ asset('assets/main/images/vector_62.png') }}');
            background-repeat: no-repeat;
            width: 468px;
            height: 1328px;
            right: -4rem;
            top: -25rem;
            z-index: -3;
        }

        .mt-12 {
            margin-top: 12% !important;
        }

        .bg-custom-1 {
            background: #5862fc;
        }

        .bgCustomColor {
            color: #5862fc;
        }

        .position-c-absolute {
            position: absolute;
            width: 100%;
            height: 20px;
            margin: 0;
            transform: rotate(180deg);
        }

        .text-light {
            color: #C7C3C3 !important;
            font-size: 14px;
            margin-top: -0.5rem;
        }

        .bg-sm-gray {
            background: #F6F6F6;
            padding: 5px 10px;
            border-radius: 5px;
        }

        @keyframes direction {
            0% {
                top: 0px;
            }

            25% {
                top: 5px;
            }

            50% {
                top: 10px;
            }

            75% {
                top: 5px;
            }

            100% {
                top: 0px;
            }
        }

        @keyframes direction-right {
            0% {
                right: 0px;
            }

            25% {
                right: 5px;
            }

            50% {
                right: 10px;
            }

            75% {
                right: 5px;
            }

            100% {
                right: 0px;
            }
        }

        @keyframes opacity {
            0% {
                opacity: 0;
            }

            25% {
                right: .5;
            }

            50% {
                right: 1;
            }

            75% {
                right: .5;
            }

            100% {
                right: 0;
            }
        }

        @keyframes color-change {
            0% {
                background: #fff;
            }

            25% {
                background: #FEA82F;
            }

            50% {
                background: #FA78BA;
            }

            75% {
                background: #FA78BA;
            }

            100% {
                background: #83EE88;
            }
        }

        .swiper {
            height: 650px;
        }

        .swiper-slide {
            width: 400px !important;
        }

        .swiper-button-next {
            margin-top: 10rem;
            left: 32rem;
            background: #EAEDFF;
            padding: 2rem;
            border-radius: 50%;
        }

        .swiper-button-prev {
            margin-top: 10rem;
            left: 26rem;
            background: #EAEDFF;
            padding: 2rem;
            border-radius: 50%;
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 30px;
        }

        .popular {
            position: absolute;
            right: 2rem;
            top: 0rem;
        }

        .nav-tabs .nav-link.active {
            color: #fff !important;
            background-color: #5151ff !important;
            border-radius: 5px;
        }

        .nav-tabs .nav-link {
            background: none;
            border: 1px solid #F6F6F6 !important;
            border-radius: 5px;
            margin-bottom: -1px;
            height: 50px;
        }

        .border-bottom-xs-c {
            border-bottom: 1px solid #DFDFDF;
        }

        .bg-grey-img {
            background-color: #F6F8FF;
            background-image: url('{{ asset('assets/main/images/area.png') }}');
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .border-top-xs {
            border-top: 1px solid #f1f1f1 !important;
        }

        .quote-icon {
            position: absolute;
            height: 70px;
            width: 70px;
            background: #5151ff;
            border-radius: 50%;
            top: -2rem;
            left: 2rem;
        }

        .quote-icon img {
            padding: 22px;
        }

        .carousel-cell {
            width: 33.33%;
            left: 0px;
            top: 2rem;
            margin-right: 2rem;
            margin-bottom: 4rem;
        }

        .custom-cell {
            width: 60% !important;
            left: 7rem !important;
            margin-bottom: 4rem;
        }

        /* .flickity-viewport {
                    height: 400px !important;
                } */
        .flickity-slider {
            margin-left: -14rem;
        }

        .flickity-page-dots {
            display: none;
        }

        .show-mobile {
            display: none;
        }

        @media screen and (min-width: 250px) and (max-width: 1200px) {
            .show-mobile {
                display: initial;
            }

            .hide-mobile {
                display: none;
            }

            .carousel-cell {
                width: inherit !important;
            }

            .flickity-slider {
                margin-left: 0;
            }
        }

        @media screen and (min-width: 250px) and (max-width: 1000px) {
            h1 {
                font-size: 31px !important;
                line-height: 45px !important;
            }

            .sm-m {
                margin-top: -15px !important;
            }

            .custom-img-fluid {
                margin-top: 50%;
            }

            .mt-20 {
                margin-top: 40%;
            }

            .smt-24 {
                margin-top: 24rem !important;
            }

            .flickity-button {
                display: none;
            }

            .position-btn {
                top: 15.86rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 13.5rem !important;
            }

            .sm-text-center {
                text-align: center !important;
            }

            .sm-mt {
                margin-top: 3rem !important;
            }
        }

        @media screen and (min-width: 1080px) and (max-width: 1300px) {
            .position-btn {
                top: 14.45rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 11.8rem !important;
            }
        }

        @media screen and (min-width: 990px) and (max-width: 1080px) {
            .position-btn {
                top: 16.86rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 13.6rem !important;
            }
        }

        @media screen and (min-width: 767px) and (max-width: 870px) {
            .position-btn {
                top: 17.4rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 15.2rem !important;
            }
        }

        @media screen and (min-width: 544px) and (max-width: 657px) {
            .position-btn {
                top: 14.86rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 11.8rem !important;
            }
        }

        @media screen and (min-width: 657px) and (max-width: 767px) {
            .position-btn {
                top: 12.86rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 10.2rem !important;
            }
        }

        @media screen and (min-width: 870px) and (max-width: 991px) {
            .position-btn {
                top: 16.4rem !important;
                border-radius: 5px !important;
                right: 5rem !important;
            }

            .mail-icon {
                top: 13.6rem !important;
            }
        }

        .pattern {
            background-image: url('{{ asset('assets/main/images/pattern.png') }}');
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            animation-name: direction;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            z-index: 9;
        }

        .no-bg {
            background: transparent;
            border: 1px solid #5151ff;
            padding-left: 3rem;
        }

        .no-bg:focus {
            background: transparent;
        }

        .position-btn {
            position: absolute;
            top: 8.45rem;
            right: 5rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .mail-icon {
            position: absolute;
            top: 10.15rem;
            left: 6rem;
            color: #94a6c0;
            font-size: 20px;
        }

        .footer-input {
            background: #608AF4;
            border: none;
            color: #fff;
            padding-left: 3rem;
        }

        .footer-input::placeholder {
            color: #fff;
        }

        .footer-input:focus {
            background: #608AF4;
            color: #fff;
            border: none !important;
        }

        .mail-icon-2 {
            position: absolute;
            top: 6.5rem;
            left: 2.3rem;
            color: #fff;
            font-size: 20px;
        }

        .footer-btn {
            position: absolute;
            background: #fff !important;
            color: #5151ff !important;
            top: 4.9rem;
            right: 1rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .alert-primary {
            background-color: #608AF4;
            border-color: #335eea;
            padding: 1rem;
            color: #fff;
            border-radius: 50%;
        }

        .position-footer {
            position: absolute;
            bottom: -5rem;
        }
    </style>

    <section class="heroBg">
        <div class="container banner-container">
            <div class="row align-items-center justify-content-center">
                <div class="col-md-8 mb-3">
                    <img src="{{ asset('assets/main/images/ellipse_203.png') }}" class="ellipse_203 custom-sm-none"
                        alt="">
                    <img src="{{ asset('assets/main/images/rec_233.png') }}" class="rec_233 custom-sm-none" alt="">
                    <div class="text-white text-center pl-5">
                        <h1 class="h1 text-white wow animate__animated animate__bounce animate__delay-2s">Social Community
                            Platform <br> that helps your Business Grow </h1>
                        <p class="text-white pt-4">Control and manage your community with Tribearc Socialite</p>
                        <div class="mt-6">
                            <a href="{{ route('register') }}" class="btn custom-btn-white px-5 py-3 my-4">Get started</a>
                        </div>
                        <div class="mt-6 justify-content-center align-items-center">
                            <img src="{{ asset('assets/main/images/main-bg.png') }}" class="custom-img-fluid">
                        </div>
                    </div>
                    @include('elements.icons-main')
                </div>
            </div>
        </div>
    </section>
    <div class="shape shape-bottom shape-fluid-x text-gray-200" style="margin-top: -3%; height: 60px; bottom: unset">
        <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="white" />
        </svg>
    </div>
    <section class="mt-20">
        <div class="container mt-7">
            <div class="row  justify-content-center align-items-center text-center mb-5">
                <div class="col-12 col-lg-8 col-xl-8">
                    <h2 class="mb-4 h2-color mt-8">Join others that are already building their social community using
                        TribeArc Socialite</h2>
                    <p class="p-color">Build, Control, and Manage your community with TribeArc Socialite.</p>
                </div>
            </div>
            <div class="row hide-mobile">
                <div class="col-md-12 text-center align-items-center justify-content-betwen">
                    <img src="{{ asset('assets/main/images/slack.png') }}" alt="">
                    <img src="{{ asset('assets/main/images/netflix.png') }}" alt="">
                    <img src="{{ asset('assets/main/images/google.png') }}" alt="">
                    <img src="{{ asset('assets/main/images/airbnb.png') }}" alt="">
                    <img src="{{ asset('assets/main/images/uber.png') }}" alt="">
                    <img src="{{ asset('assets/main/images/slack.png') }}" alt="">
                </div>
            </div>
            <div class="row show-mobile">
                <div class="carousel" data-flickity='{ "autoPlay": true }'>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="text-center align-items-center justify-content-center">
                                <img src="{{ asset('assets/main/images/slack.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="text-center align-items-center justify-content-center">
                            <img src="{{ asset('assets/main/images/netflix.png') }}" alt="">
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="text-center align-items-center justify-content-center">
                            <img src="{{ asset('assets/main/images/airbnb.png') }}" alt="">
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="text-center align-items-center justify-content-center">
                            <img src="{{ asset('assets/main/images/uber.png') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="feature">
        <div class="container-fluid custom-sm-none">
            <div class="vector_bg_left"></div>
        </div>
        <div class="container mt-11">
            <div class="row">
                <div class="col-md-6">
                    <div class="group_ellipse"></div>
                    <div class="group_ellipse_right"></div>
                    <div class="sm-text-center align-items-center justify-content-center">
                        <img src="{{ asset('assets/main/images/mask_image_15.png') }}"
                            class="img-fluid wow animate__animated animate__fadeInLeft bor-xy-50" />
                    </div>
                </div>
                <div class="col-md-6 my-auto sm-mt">
                    <h2 class="h2-color">Mentorship</h2>
                    <p class="p-color">
                        Do you run a mentorship program and are looking for tools to manage the process?
                        TribeArc Socialite allows you to add mentees and mentors; schedule calls, take notes,
                        set goals, check off the goals, and track your mentee’s progress.
                    </p>
                    <div class="mt-5">
                        <a href="{{ route('register') }}" class="btn custom-btn px-5 py-3 my-4" href="#">Get
                            started</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container py-11">
            <div class="row">
                <div class="col-md-6 my-auto">
                    <h2 class="h2-color">Savings and Loans</h2>
                    <p class="p-color">
                        Do you have a lot of money to loan out to people, and you don’t have a platform to do so?
                        TribeArc Socialite gives you the platform to loan out money and also onboard your customers
                        on how to repay loans and track loan repayments.
                    </p>
                    <div class="mt-5">
                        <a href="{{ route('register') }}" class="btn custom-btn px-5 py-3 my-4" href="#">Get
                            started</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="group_ellipse_1"></div>
                    <div class="group_ellipse_2"></div>
                    <div class="chart custom-sm-none">
                        <img src="{{ asset('assets/main/images/chart.png') }}" alt="">
                    </div>
                    <div class="text-end align-items-center justify-content-center">
                        <img src="{{ asset('assets/main/images/masked_img.png') }}"
                            class="img-fluid wow animate__animated animate__fadeInUp" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="position-relative ">
        <div class="shape shape-bottom shape-fluid-x bgCustomColor">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor">
            </svg>
        </div>
    </div>
    <section class="bg-custom-1">
        <div class="container py-11">
            <div class="row">
                <div class="col-md-6">
                    <div class="group_ellipse_right-1"></div>
                    <div class="circle_right_top_icon_3 custom-sm-none"></div>
                    <div class="group_c custom-sm-none"></div>
                    <div class="sm-text-center align-items-center justify-content-center">
                        <img src="{{ asset('assets/main/images/img_16.png') }}"
                            class="img-fluid wow animate__animated animate__fadeInLeft" />
                    </div>
                </div>
                <div class="col-md-6 my-auto sm-mt">
                    <h2 class="text-white">Feeds, Chats & Engagements</h2>
                    <p class="text-white">
                        Have you ever needed a platform where your community can interact to share ideas, news and check up
                        on each other?
                        TribeArc Socialite has a ready-made platform that helps you achieve all that.
                    </p>
                    <div class="mt-5">
                        <a class="btn custom-btn-white px-5 py-3 my-4" href="{{ route('register') }}">Get started</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="position-c-absolute">
        <div class="shape shape-bottom shape-fluid-x bgCustomColor">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor" />
            </svg>
        </div>
    </div>
    <section class="bg-white">
        <div class="container my-11">
            <div class="row">
                <div class="col-md-6 my-auto">
                    <div class="donor_icon custom-sm-none"></div>
                    <div class="donor_icon_2 custom-sm-none"></div>
                    <div class="donor_sm_icon custom-sm-none"></div>
                    <div class="donor_sm_icon_2 custom-sm-none"></div>
                    <div class="donor_sm_icon_top custom-sm-none"></div>
                    <h2 class="h2-color">Donations</h2>
                    <p class="p-color">
                        TribeArc Socialite is also a platform for donations where people raise money to support people in
                        need,
                        for different purposes such as Education, Medicine, and Charity
                    </p>
                    <div class="mt-5">
                        <a href="{{ route('register') }}" class="btn custom-btn px-5 py-3 my-4" href="#">Get
                            started</a>
                    </div>
                </div>
                <div class="col-md-6 sm-mt">
                    <div class="donor_ellipse_1"></div>
                    <div class="donor custom-sm-none"></div>
                    <div class="text-end sm-text-center align-items-center justify-content-center">
                        <img src="{{ asset('assets/main/images/helping_hand.png') }}"
                            class="img-fluid wow animate__animated animate__fadeInRight bor-xy-bottom-50" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-grey">
        <div class="container py-11">
            <div class="row mb-5 text-center justify-content-center">
                <div class="col-12 col-lg-8 col-md-8">
                    <h2 class="mb-4 h2-color">Forum</h2>
                    <p class="p-color">
                        TribeArc Socialite allows community members to come together to interact, ask questions, and get
                        replies.
                    </p>
                </div>
            </div>
            <div class="forum_icon custom-sm-none"></div>
            <div class="forum_sm_icon custom-sm-none"></div>
            <div class="forum_icon_2 custom-sm-none"></div>
            <div class="forum_icon_3 custom-sm-none"></div>
            <div class="forum_sm_icon_2 custom-sm-none"></div>
            <div class="forum_sm_icon_3 custom-sm-none"></div>
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 col-xl-6 align-items-center justify-content-betwen">
                    <div class="card shadow-custom br-12 border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                        <div class="card-body d-block">
                            <div class="row">
                                <div class="col">
                                    <div class="d-flex">
                                        <img src="{{ asset('assets/main/images/guy.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Brooklyn Simmons</h4>
                                            <p class="text-light">56 mins ago</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="p-color">
                                        Hello guys, I have a question.
                                        I just moved into this estate and I would like someone to fill me in with the
                                        necessary information, especially on monthly dues.
                                    </p>
                                </div>
                            </div>
                            <div class="row pb-6 border-bottom-xs">
                                <div class="col-12">
                                    <div class="mt-4 d-flex">
                                        <span class="bg-sm-gray">
                                            <img src="{{ asset('assets/main/images/heart.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                        <span class="bg-sm-gray ml-1-">
                                            <img src="{{ asset('assets/main/images/like.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                        <span class="bg-sm-gray ml-1-">
                                            <img src="{{ asset('assets/main/images/clap.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mt-4 d-flex">
                                        <span class="">
                                            <img src="{{ asset('assets/main/images/heart_gray.png') }}" alt="">
                                            <span class="pl-5">Like</span>
                                        </span>
                                        <span class=" ml-2-">
                                            <img src="{{ asset('assets/main/images/reply.png') }}" alt=""> <span
                                                class="pl-5">Reply</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-xl-6 align-items-center justify-content-betwen">
                    <div class="card shadow-custom br-12 border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                        <div class="card-body d-block">
                            <div class="row">
                                <div class="col">
                                    <div class="d-flex">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">5 mins ago</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="p-color">
                                        Good evening here. Can anyone repost the update on the new estate security guys?
                                    </p> <br>
                                </div>
                            </div>
                            <div class="row pb-6 border-bottom-xs">
                                <div class="col-12">
                                    <div class="mt-4 d-flex">
                                        <span class="bg-sm-gray">
                                            <img src="{{ asset('assets/main/images/heart.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                        <span class="bg-sm-gray ml-1-">
                                            <img src="{{ asset('assets/main/images/like.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                        <span class="bg-sm-gray ml-1-">
                                            <img src="{{ asset('assets/main/images/clap.png') }}" alt=""> <span
                                                class="pl-5">16</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mt-4 d-flex">
                                        <span class="">
                                            <img src="{{ asset('assets/main/images/heart_gray.png') }}" alt="">
                                            <span class="pl-5">Like</span>
                                        </span>
                                        <span class=" ml-2-">
                                            <img src="{{ asset('assets/main/images/reply.png') }}" alt=""> <span
                                                class="pl-5">Reply</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-white">
        <div class="container my-11">
            <div class="row">
                <div class="col-md-6 my-auto">
                    <div class="donor_icon custom-sm-none"></div>
                    <div class="donor_icon_2 custom-sm-none"></div>
                    <div class="donor_sm_icon custom-sm-none"></div>
                    <div class="donor_sm_icon_2 custom-sm-none"></div>
                    <div class="donor_sm_icon_top custom-sm-none"></div>
                    <h2 class="h2-color">E-Learning </h2>
                    <p class="p-color">
                        Do you teach courses or do you need a platform to learn?
                        Tribearc socialite has a platform dedicated to e-learning,
                        that allows you to upload courses as a mentor and also allows you to take courses
                        as a user with mentors tracking your progress to keep you in check.
                    </p>
                    <div class="mt-5">
                        <a href="{{ route('register') }}" class="btn custom-btn px-5 py-3 my-4" href="#">Get
                            started</a>
                    </div>
                </div>
                <div class="col-md-6">
                    {{-- <div class="swiper mySwiper hide-mobile">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                <img src="{{asset('assets/main/images/image_13.png')}}" class="card-img-top" alt="">
                                <div class="card-body">
                                    <div class="row ">
                                        <div class="col">
                                            <h5 class="mb-2">
                                                Getting Started in Tech
                                            </h5>
                                            <p class="card-text small p-color">
                                                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint..
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row  mt-2">
                                        <div class="col">
                                            <h6 class="card-text small text-muted">
                                                4.5
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                (34)
                                            </h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="text-color">
                                                2.5k views
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                <img src="{{asset('assets/main/images/lead.png')}}" class="card-img-top" alt="">
                                <div class="card-body">
                                    <div class="row ">
                                        <div class="col">
                                            <h5 class="mb-2">
                                                Build Leadership Skills
                                            </h5>
                                            <p class="card-text small p-color">
                                                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint..
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row  mt-2">
                                        <div class="col">
                                            <h6 class="card-text small text-muted">
                                                4.5
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                (34)
                                            </h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="text-color">
                                                2.5k views
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                <img src="{{asset('assets/main/images/image_13.png')}}" class="card-img-top" alt="">
                                <div class="card-body">
                                    <div class="row ">
                                        <div class="col">
                                            <h5 class="mb-2">
                                                Getting Started in Tech
                                            </h5>
                                            <p class="card-text small p-color">
                                                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint..
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row  mt-2">
                                        <div class="col">
                                            <h6 class="card-text small text-muted">
                                                4.5
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                <i class="mdi mdi-star text-yellow"></i>
                                                (34)
                                            </h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="text-color">
                                                2.5k views
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div> --}}
                    <div class="row hide-mobile">
                        <div class="carousel" data-flickity='{ "autoPlay": true }'>
                            <div class="carousel-cell custom-cell">
                                <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                    <img src="{{ asset('assets/main/images/image_13.png') }}" class="card-img-top"
                                        alt="">
                                    <div class="card-body">
                                        <div class="row ">
                                            <div class="col">
                                                <h5 class="mb-2">
                                                    Getting Started in Tech?
                                                </h5>
                                                <p class="card-text small p-color pt-4">
                                                    TribeArc socialite allows you to enjoy the privilege of becoming a tech
                                                    expert without having to be physically present.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row  mt-2">
                                            <div class="col">
                                                <h6 class="card-text small text-muted">
                                                    4.5
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    (34)
                                                </h6>
                                            </div>
                                            <div class="col-auto">
                                                <small class="text-color">
                                                    2.5k views
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-cell custom-cell">
                                <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                    <img src="{{ asset('assets/main/images/lead.png') }}" class="card-img-top"
                                        alt="">
                                    <div class="card-body">
                                        <div class="row ">
                                            <div class="col">
                                                <h5 class="mb-2">
                                                    Are you a mentor in Tech?
                                                </h5>
                                                <p class="card-text small p-color">
                                                    With TribeArc socialite you can easily upload your courses which gives
                                                    you the platform needed to build your career by helping you to reach
                                                    millions of students globally.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row  mt-2">
                                            <div class="col">
                                                <h6 class="card-text small text-muted">
                                                    4.5
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    <i class="mdi mdi-star text-yellow"></i>
                                                    (34)
                                                </h6>
                                            </div>
                                            <div class="col-auto">
                                                <small class="text-color">
                                                    2.5k views
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row show-mobile">
                        <div class="carousel" data-flickity='{ "autoPlay": true }'>
                            <div class="carousel-cell">
                                <div class="col-12">
                                    <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                        <img src="{{ asset('assets/main/images/image_13.png') }}" class="card-img-top"
                                            alt="">
                                        <div class="card-body">
                                            <div class="row ">
                                                <div class="col">
                                                    <h5 class="mb-2">
                                                        Getting Started in Tech
                                                    </h5>
                                                    <p class="card-text small p-color">
                                                        TribeArc socialite allows you to enjoy the privilege of becoming a
                                                        tech expert without having to be physically present.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="row  mt-2">
                                                <div class="col">
                                                    <h6 class="card-text small text-muted">
                                                        4.5
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        (34)
                                                    </h6>
                                                </div>
                                                <div class="col-auto">
                                                    <small class="text-color">
                                                        2.5k views
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-cell">
                                <div class="col-12">
                                    <div class="card w-400 shadow-xxl br-12 border-0 mb-3">
                                        <img src="{{ asset('assets/main/images/lead.png') }}" class="card-img-top"
                                            alt="">
                                        <div class="card-body">
                                            <div class="row ">
                                                <div class="col">
                                                    <h5 class="mb-2">
                                                        Are you a mentor in Tech?
                                                    </h5>
                                                    <p class="card-text small p-color">
                                                        With TribeArc socialite you can easily upload your courses which
                                                        gives you the platform needed to build your career by helping you to
                                                        reach millions of students globally.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="row  mt-2">
                                                <div class="col">
                                                    <h6 class="card-text small text-muted">
                                                        4.5
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        <i class="mdi mdi-star text-yellow"></i>
                                                        (34)
                                                    </h6>
                                                </div>
                                                <div class="col-auto">
                                                    <small class="text-color">
                                                        2.5k views
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="pricing">
        
        <div class="container">
            <div class="row mb-5 text-center justify-content-center">
                <div class="col-12 col-lg-8 col-md-8">
                    <h2 class="mb-4 h2-color">Pricing</h2>
                    <p class="p-color">Enjoy Tribearc Socialite by getting started with a Price plan.</p>
                    <div class="my-5">
                        <div class="row">
                            <div class="col">
                                <ul class="nav nav-tabs border-0 justify-content-center text-center mx-auto nav-overflow header-tabs"
                                    id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="month-tab" data-toggle="tab" href="#month"
                                            role="tab" aria-controls="month" aria-selected="true">
                                            Monthly
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="year-tab" data-toggle="tab" href="#year"
                                            role="tab" aria-controls="year" aria-selected="false">
                                            Annually
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid custom-sm-none">
            <div class="vector_bg_left_1"></div>
        </div>
        <div class="container pb-11">
            <div class="tab-content negative-margin-top-1" id="wizardSteps">
                <div class="tab-pane fade show active" id="month" role="tabpanel" aria-labelledby="month-tab">
                    <div class="row">
                        @forelse ($super_admin_packages_monthly as $key => $super_package)
                            <div class="col-12 col-xl-4 col-lg-4">
                                <div class="card w-100 shadow-2 mt-4 p-3 br-12 border-1">
                                    <div class="mt-1 p-5">
                                        <div class="d-flex pb-4 mb-4 border-bottom-xs">
                                            <img src="{{ asset('assets/main/images/sub.png') }}" alt="">
                                            <div class="ml-1-">
                                                <h4>{{ $super_package->name }}</h4>
                                                <p class="small-custom">{{ $super_package->description }}</p>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="">
                                        <ul class="top-content list-unstyled">
                                            @forelse(json_decode($super_package->features)  as $fea)
                                                <li>
                                                    <a class="btn menu-btn d-flex custom-text-muted">
                                                        <img src="{{ asset('assets/main/images/check.png') }}"
                                                            alt="">
                                                        <span class="-mt-4 ml-1-"> {{ $fea }}</span>
                                                    </a>
                                                </li>
                                            @empty
                                            @endforelse

                                        </ul>
                                        <div class="text-center pt-4 pb-4">
                                            @if ($super_package->price < 1)
                                                <a href="{{ route('register') }}"
                                                    class="custom-btn btn w-100 rounded-1 px-5">Start for free</a>
                                            @else
                                                <a href="{{ route('checkout', $super_package->id) }}"
                                                    class="custom-btn btn w-100 rounded-1 px-5">Get started</a>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        @empty
                            <div>
                                <h4 class="text-center" style="color: #ffc107">No package available</h4>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="tab-pane fade" id="year" role="tabpanel" aria-labelledby="year-tab">
                    <div class="row">
                        @forelse ($super_admin_packages_yearly as $key => $super_package)
                            <div class="col-12 col-xl-4 col-lg-4">
                                <div class="card w-100 shadow-2 mt-4 p-3 br-12 border-1">
                                    <div class="mt-1 p-5">
                                        <div class="d-flex pb-4 mb-4 border-bottom-xs">
                                            <img src="{{ asset('assets/main/images/sub.png') }}" alt="">
                                            <div class="ml-1-">
                                                <h4>{{ $super_package->name }}</h4>
                                                <p class="small-custom">{{ $super_package->description }}</p>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="">
                                        <ul class="top-content list-unstyled">
                                            @forelse(json_decode($super_package->features)  as $fea)
                                                <li>
                                                    <a class="btn menu-btn d-flex custom-text-muted">
                                                        <img src="{{ asset('assets/main/images/check.png') }}"
                                                            alt="">
                                                        <span class="-mt-4 ml-1-"> {{ $fea }}</span>
                                                    </a>
                                                </li>
                                            @empty
                                            @endforelse
                                        </ul>
                                        <div class="text-center pt-4 pb-4">
                                            @if ($super_package->price < 1)
                                                <a href="{{ route('register') }}"
                                                    class="custom-btn btn w-100 rounded-1 px-5">Start for free</a>
                                            @else
                                                <a href="{{ route('checkout', $super_package->id) }}"
                                                    class="custom-btn btn w-100 rounded-1 px-5">Get started</a>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        @empty
                            <div>
                                <h4 class="text-center" style="color: #ffc107">No package available</h4>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-grey-img">
        <div class="container py-11">
            <div class="row mb-5 text-center justify-content-center" id="customer">
                <div class="col-12 col-lg-8 col-md-8">
                    <h2 class="mb-4 h2-color">Take from our Customers and Users</h2>
                    <p class="p-color">Happy customers have somethings to say using Tribearc Socialite.</p>
                </div>
            </div>
            <div class="row hide-mobile">
                <div class="carousel" data-flickity='{ "autoPlay": true }'>
                    <div class="carousel-cell">
                        <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                            <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                    alt=""></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="px-4 mt-6">
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                    </p>
                                    <p class="px-4 p-color">
                                        TribeArc Socialite is just the best! As a mentor and coach,
                                        it has been a very useful app in helping me manage my mentees and classes.
                                    </p>
                                </div>
                            </div>
                            <div class="row border-top-xs">
                                <div class="col">
                                    <div class="d-flex px-4 mt-4">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">CEO Webworld</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                            <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                    alt=""></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="px-4 mt-6">
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                    </p>
                                    <p class="px-4 p-color">
                                        I had my doubts, but I thank God I didn't let that prevent me from using TribeArc
                                        Socialite,
                                        it has been a wonderful experience so far, and I am proud to say that it's the best.
                                    </p>
                                </div>
                            </div>
                            <div class="row border-top-xs">
                                <div class="col">
                                    <div class="d-flex px-4 mt-4">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">CEO Webworld</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                            <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                    alt=""></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="px-4 mt-6">
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                    </p>
                                    <p class="px-4 p-color">
                                        Staying in touch with local and global trends and news has been
                                        possible despite my busy schedule, due to the TribeArc Socialite platform.
                                    </p>
                                </div>
                            </div>
                            <div class="row border-top-xs">
                                <div class="col">
                                    <div class="d-flex px-4 mt-4">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">CEO Webworld</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                            <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                    alt=""></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="px-4 mt-6">
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                    </p>
                                    <p class="px-4 p-color">
                                        TribeArc Socialite has taken our local loan recovery processes beyond paperwork and
                                        physical calculators.
                                        It wasn’t something we even imagined possible before we started using it.
                                    </p>
                                </div>
                            </div>
                            <div class="row border-top-xs">
                                <div class="col">
                                    <div class="d-flex px-4 mt-4">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">CEO Webworld</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                            <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                    alt=""></div>
                            <div class="row">
                                <div class="col-12">
                                    <p class="px-4 mt-6">
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                        <i class="mdi mdi-star text-yellow"></i>
                                    </p>
                                    <p class="px-4 p-color">
                                        Since our community adopted TribeArc Socialite, we’ve not had reasons to go from
                                        door to door to raise money for anyone.
                                        Donation targets have been exceeded in record time many times.
                                    </p>
                                </div>
                            </div>
                            <div class="row border-top-xs">
                                <div class="col">
                                    <div class="d-flex px-4 mt-4">
                                        <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                            class="w50 h50 rounded-circle" style="object-fit: cover">
                                        <div class="ml-1-">
                                            <h4>Leslie Alexander</h4>
                                            <p class="text-light">CEO Webworld</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row show-mobile">
                <div class="carousel" data-flickity='{ "autoPlay": true }'>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                                <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                        alt=""></div>
                                <div class="row">
                                    <div class="col-12">
                                        <p class="px-4 mt-6">
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                        </p>
                                        <p class="px-4 p-color">
                                            TribeArc Socialite is just the best! As a mentor and coach,
                                            it has been a very useful app in helping me manage my mentees and classes.
                                        </p>
                                    </div>
                                </div>
                                <div class="row border-top-xs">
                                    <div class="col">
                                        <div class="d-flex px-4 mt-4">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="ml-1-">
                                                <h4>Leslie Alexander</h4>
                                                <p class="text-light">CEO Webworld</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                                <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                        alt=""></div>
                                <div class="row">
                                    <div class="col-12">
                                        <p class="px-4 mt-6">
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                        </p>
                                        <p class="px-4 p-color">
                                            I had my doubts, but I thank God I didn't let that prevent me from using
                                            TribeArc Socialite,
                                            it has been a wonderful experience so far, and I am proud to say that it's the
                                            best.
                                        </p>
                                    </div>
                                </div>
                                <div class="row border-top-xs">
                                    <div class="col">
                                        <div class="d-flex px-4 mt-4">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="ml-1-">
                                                <h4>Leslie Alexander</h4>
                                                <p class="text-light">CEO Webworld</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                                <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                        alt=""></div>
                                <div class="row">
                                    <div class="col-12">
                                        <p class="px-4 mt-6">
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                        </p>
                                        <p class="px-4 p-color">
                                            Staying in touch with local and global trends and news has been possible despite
                                            my busy schedule,
                                            due to the TribeArc Socialite platform.
                                        </p>
                                    </div>
                                </div>
                                <div class="row border-top-xs">
                                    <div class="col">
                                        <div class="d-flex px-4 mt-4">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="ml-1-">
                                                <h4>Leslie Alexander</h4>
                                                <p class="text-light">CEO Webworld</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                                <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                        alt=""></div>
                                <div class="row">
                                    <div class="col-12">
                                        <p class="px-4 mt-6">
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                        </p>
                                        <p class="px-4 p-color">
                                            TribeArc Socialite has taken our local loan recovery processes beyond paperwork
                                            and physical calculators.
                                            It wasn’t something we even imagined possible before we started using it.
                                        </p>
                                    </div>
                                </div>
                                <div class="row border-top-xs">
                                    <div class="col">
                                        <div class="d-flex px-4 mt-4">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="ml-1-">
                                                <h4>Leslie Alexander</h4>
                                                <p class="text-light">CEO Webworld</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-cell">
                        <div class="col-12">
                            <div class="card card-hover br-12 border-0 p-4 mb-3 mt-3">
                                <div class="quote-icon"><img src="{{ asset('assets/main/images/quote.png') }}"
                                        alt=""></div>
                                <div class="row">
                                    <div class="col-12">
                                        <p class="px-4 mt-6">
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                            <i class="mdi mdi-star text-yellow"></i>
                                        </p>
                                        <p class="px-4 p-color">
                                            Since our community adopted TribeArc Socialite, we’ve not had reasons to go from
                                            door to door to raise money for anyone.
                                            Donation targets have been exceeded in record time many times.
                                        </p>
                                    </div>
                                </div>
                                <div class="row border-top-xs">
                                    <div class="col">
                                        <div class="d-flex px-4 mt-4">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="ml-1-">
                                                <h4>Leslie Alexander</h4>
                                                <p class="text-light">CEO Webworld</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="contact">
                <div class="col-12">
                    <div class="card card-row shadow-light-lg mb-6 pattern">
                        <div class="row gx-0">
                            <div class="col-12 col-md-6">
                                <div class="card-body p-10">
                                    <div class="my-auto align-items-center justify-content-center">
                                        <p class="p-color">
                                            Tribearc Socialite gives you the best platform <br>
                                            solution connecting your business to the right community
                                        </p>
                                        <div class="mt-4">
                                            <div class="form-group">
                                                {{-- <i class="mdi mdi-email-outline mail-icon"></i> --}}
                                                {{-- <input type="email" class="form-control no-bg" placeholder="Enter your email"> --}}
                                                <a class="btn chat-button custom-btn px-5 py-3 my-4" href="#">Chat
                                                    wit us</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 ">
                                <div class="card-body p-10">
                                    <div class="my-auto text-center align-items-center justify-content-center">
                                        <div class="mt-4 d-flex">
                                            <img src="{{ asset('assets/main/images/ellipse_203.png') }}"
                                                class="w100 h100 br-wh z-overlap rounded-circle -mr-1"
                                                style="object-fit: cover">
                                            <img src="{{ asset('assets/main/images/guy_1.png') }}"
                                                class="w100 h100 br-wh z-overlap-1 rounded-circle"
                                                style="object-fit: cover">
                                            <img src="{{ asset('assets/main/images/guy.png') }}"
                                                class="w100 h100 br-wh z-overlap-2 rounded-circle"
                                                style="object-fit: cover">
                                            <img src="{{ asset('assets/main/images/com.png') }}"
                                                class="w100 h100 br-wh z-overlap-3 rounded-circle"
                                                style="object-fit: cover">
                                            <div
                                                class="w100 h100 rounded-circle z-overlap-4 custom-sm-none bg_c_color text-center">
                                                + 3</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="position-relative">
        <div class="shape shape-bottom shape-fluid-x text-white">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor" />
            </svg>
        </div>
    </div>
    <section class="pt-10 mt bg-white mt-8">
    </section>
    <div class="position-c-absolute">
        <div class="shape shape-bottom shape-fluid-x text-white">
            <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 48h2880V0h-720C1442.5 52 720 0 720 0H0v48z" fill="currentColor" />
            </svg>
        </div>
    </div>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 2,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
@endsection