@extends('layouts.main')
@section('title', 'Become a Service Provider')
@section('main')
<style>
    @media (max-width: 767px) {
        .image-section-container {
            display: none;
        }
    }
</style>
<section class="breadcumb-section wow fadeInUp mt40">
    <div class="cta-commmon-v1 cta-banner bgc-thm2 mx-auto maxw1700 pt120 pb120 bdrs16 position-relative overflow-hidden d-flex align-items-center mx20-lg">
        <img class="left-top-img wow zoomIn" src="images/vector-img/left-top.png" alt="">
        <img class="right-bottom-img wow zoomIn" src="images/vector-img/right-bottom.png" alt="">
        <div class="container">
            <div class="row">
                <div class="col-xl-5">
                    <div class="position-relative wow fadeInUp" data-wow-delay="300ms">
                        <h2 class="text-white">Work Your Way</h2>
                        <p class="text mb30 text-white">Become the right Service Provider, customers are waiting for.</p>
                        <a class="ud-btn btn-thm" href="#" id="register-btn">Register Now<i class="fal fa-arrow-right-long"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-register">
    <div class="container">
        <div class="row wow fadeInRight" data-wow-delay="300ms">
            <div class="col-lg-6 image-section-container">
                <div class="image-section">
                    <img src="{{ asset('images/background/become-a-seller.png') }}" loading="lazy" alt="Become an Artisan on FixGini" style="width: 100%; border-radius: 8px;">
                </div>
            </div>
            @livewire('auth.become-a-seller')
        </div>
    </div>
</section>

<!-- About Section Area -->
<section class="our-faq pb90 pt100">
    <div class="container">
        <div class="row wow fadeInUp">
            <div class="col-lg-4">
                <div class="vertical-tab">
                    <div class="widget_list">
                        <nav>
                            <div class="nav flex-column nav-tabs text-start" id="nav-tab" role="tablist">
                                <button class="nav-link active text-start" id="nav-accountpayment-tab" data-bs-toggle="tab" data-bs-target="#nav-accountpayment" type="button" role="tab" aria-controls="nav-accountpayment" aria-selected="true"><span>For Service Provider </span></button>
                                <button class="nav-link text-start" id="nav-manageother-tab" data-bs-toggle="tab" data-bs-target="#nav-manageother" type="button" role="tab" aria-controls="nav-manageother" aria-selected="false"><span>For Hiring</span></button>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-accountpayment" role="tabpanel" aria-labelledby="nav-accountpayment-tab">
                        <div class="for-hire">
                            <h4>For Service Provider</h4>
                            <p class="text mb20">Unlock your potential and showcase your skills to a global audience. At our platform, we provide freelancers with the tools and opportunities to thrive in their careers.</p>
                            <p class="text mb30">
                                <li class="text"><strong>Showcase Your Expertise:</strong> Create a detailed profile to highlight your professional skills and past projects.</li>
                                <li class="text"><strong>Connect with Clients:</strong> Gain access to a wide range of clients looking for top talent to bring their projects to life.</li>
                                <li class="text"><strong>Collaborative Workspace:</strong> Utilize our collaborative tools to work seamlessly with clients, share updates, and receive feedback.</li>
                                <li class="text"><strong>Secure Payments:</strong> Enjoy the peace of mind with our secure payment system ensuring you get paid on time, every time.</li>
                                <li class="text"><strong>Professional Growth:</strong> Benefit from continuous learning opportunities and resources to enhance your skills and advance your career.</li>
                            </p>
                            <a href="#" class="ud-btn btn-thm-border mb25 me-4">Get Started<i class="fal fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-manageother" role="tabpanel" aria-labelledby="nav-manageother-tab">
                        <div class="for-hire">
                            <h4>For Customer</h4>
                            <p class="text mb10">Connect with the best when you access our curated catalog of Pro freelancers, vetted for professional excellence and experience.</p>
                            <p class="text mb40">Collaborate on shared projects, track progress, and manage budgeting from one dashboard.</p>
                            <a href="#" class="ud-btn btn-thm-border mb25 me-4">Get Started<i class="fal fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Features -->
<section class="our-features pt-0 pb90">
    <div class="container">
        <div class="row wow fadeInUp">
            <div class="col-lg-12">
                <div class="main-title">
                    <h2>How It Works</h2>
                    <p class="text">Most viewed and all-time top-selling services</p>
                </div>
            </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay="300ms">
            <div class="col-sm-6 col-lg-3">
                <div class="iconbox-style1 border-less p-0">
                    <div class="icon before-none"><span class="flaticon-cv"></span></div>
                    <div class="details">
                        <h4 class="title mt10 mb-3">Create Your Profile</h4>
                        <p class="text">Sign up and create a comprehensive profile. Highlight your skills, certifications, showcase your portfolio, <br class="d-none d-xxl-block"> and set your rates to attract potential clients.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="iconbox-style1 border-less p-0">
                    <div class="icon before-none"><span class="flaticon-web-design"></span></div>
                    <div class="details">
                        <h4 class="title mt10 mb-3">Get Discovered by Clients</h4>
                        <p class="text">Clients browse through our curated catalog of freelancers. When a client finds a match, <br class="d-none d-xxl-block"> they will reach out to you directly to discuss the project details and requirements.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="iconbox-style1 border-less p-0">
                    <div class="icon before-none"><span class="flaticon-secure"></span></div>
                    <div class="details">
                        <h4 class="title mt10 mb-3">Collaborate and Deliver</h4>
                        <p class="text">Use our collaborative tools to communicate with clients, manage tasks, and track progress. <br class="d-none d-xxl-block"> Ensure timely delivery of high-quality work to meet client expectations.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="iconbox-style1 border-less p-0">
                    <div class="icon before-none"><span class="flaticon-customer-service"></span></div>
                    <div class="details">
                        <h4 class="title mt10 mb-3">Get Paid Securely</h4>
                        <p class="text">Receive payments through our secure system. Enjoy peace of mind with guaranteed payments for your completed projects, <br class="d-none d-xxl-block"> deposited directly into your account.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-faqs pt-0 pb50">
    <div class="container">
        <div class="row wow fadeInUp">
            <div class="col-lg-6 m-auto">
                <div class="main-title text-center">
                    <h2 class="title">Frequently Asked Questions</h2>
                    <p class="paragraph mt10">Answers to your questions</p>
                </div>
            </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay="300ms">
            <div class="col-lg-8 mx-auto">
                <div class="ui-content">
                    <div class="accordion-style1 faq-page mb-4 mb-lg-5">
                        @livewire('web.faq')
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-register" id="register-section" style="display: none;">
    <div class="container">
        <div class="row wow fadeInRight" data-wow-delay="300ms">
            <div class="col-lg-6 image-section-container">
                <div class="image-section">
                    <img src="{{ asset('images/background/become-a-seller.png') }}" alt="Become a seller on FixGini" style="width: 100%; border-radius: 8px;">
                </div>
            </div>
            @livewire('auth.become-a-seller')
        </div>
    </div>
</section>

<script>
    document.getElementById('register-btn').addEventListener('click', function(event) {
        event.preventDefault();
        var registerSection = document.getElementById('register-section');
        if (registerSection.style.display === "none") {
            registerSection.style.display = "block";
        } else {
            registerSection.style.display = "none";
        }
    });
</script>

<section class="pb0 pt60">
    <div class="container maxw1600 bdrb1 pb60">
        <div class="row">
            <div class="col-xl-11 mx-auto">
                <div class="row justify-content-center" data-wow-delay="300ms">
                    <div class="col-sm-6 col-lg-3">
                        <div class="funfact_one text-center">
                            <div class="details">
                                <ul class="ps-0 mb-0 d-flex justify-content-center">
                                    <li>
                                        <div class="timer">834</div>
                                    </li>
                                    <li><span>k</span></li>
                                </ul>
                                <p class="text mb-0">Total Service Provider</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="funfact_one text-center">
                            <div class="details">
                                <ul class="ps-0 mb-0 d-flex justify-content-center">
                                    <li>
                                        <div class="timer">732</div>
                                    </li>
                                    <li><span>M</span></li>
                                </ul>
                                <p class="text mb-0">Positive Review</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="funfact_one text-center">
                            <div class="details">
                                <ul class="ps-0 mb-0 d-flex justify-content-center">
                                    <li>
                                        <div class="timer">90</div>
                                    </li>
                                    <li><span>M</span></li>
                                </ul>
                                <p class="text mb-0">Order received</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="funfact_one text-center">
                            <div class="details">
                                <ul class="ps-0 mb-0 d-flex justify-content-center">
                                    <li>
                                        <div class="timer">236</div>
                                    </li>
                                    <li><span>M</span></li>
                                </ul>
                                <p class="text mb-0">Projects Completed</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection