@extends('layouts.front-layout')
@section('content')
    @php
        if (!empty($about->content)) {
            $decodedData = json_decode($about->content, true);
        }
    @endphp
<!-- Begin: Main Slider -->
<div class="innerBan">
    <img src="{{ !empty($about) && isset($decodedData['top_banner_image']) ? asset('/images/'.$decodedData['top_banner_image']) : asset('images/placeholder.png') }}" class="w-100" alt="">
    <div class="overlay">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <h2>{{$decodedData['top_banner_heading'] ?? ''}}</h2>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Main Slider -->

<section class="aboutinnr">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="">{{$decodedData['heading'] ?? ''}} {{$decodedData['sub_heading'] ?? ''}}</h2>
                <p>{{$decodedData['description'] ?? ''}}</p>
                <!-- <h3>Welcome To Mighty Buyer</h3> -->
{{--                <p>Mighty Buyer is a powerful platform that empowers individuals and entities to post requests for--}}
{{--                    buying products or services according to their own specifications and terms. Subscribers can Join--}}
{{--                    these requisition posts if they have a need for the same product or service, enabling potential--}}
{{--                    buyers to specify the price, features, and other attributes or properties of the desired product or--}}
{{--                    service.</p>--}}
{{--                <p>Providers of the service or sellers of the product, who subscribe to the platform and pay--}}
{{--                    subscription fees. gain access to these bids. They can identify potential opportunities for multiple--}}
{{--                    sales and bid on the requests as posted or offer modifications to the requests. Once the request--}}
{{--                    initiators agree to the final terms. it becomes binding for both purchasers and sellers of the--}}
{{--                    product and service.</p>--}}
            </div>
            <div class="col-md-6">
                <figure class="abutmc">
                    <img src="{{ !empty($about) && isset($decodedData['main_image']) ? asset('/images/'.$decodedData['main_image']) : asset('images/placeholder.png') }}" class="img-fluid" alt="">

                    <img src="{{ !empty($about) && isset($decodedData['about_detail_image']) ? asset('/images/'.$decodedData['about_detail_image']) : asset('images/placeholder.png') }}" class="img-fluid" alt="">
                </figure>
            </div>
        </div>
    </div>
</section>



<section class="abtbuyer">
    <div class="container">
        <div class="row align-items-center">
            @forelse($about_seller_sections as $about_seller_section)
            <div class="col-md-6">
                <div class="buyerwrap">
                    <figure>
                        <img src="{{$about_seller_section->image ? asset('images/'.$about_seller_section->image) :asset('images/placeholder.png')}}" class="img-fluid" alt="">
                    </figure>
                    <div class="buycntnt">
                        <h3>{{$about_seller_section->title ? : ''}}</h3>
                        <p>{!! $about_seller_section->short_description !!}</p>
                    </div>

                </div>
            </div>
            @empty
                <h4 class="text-center">Marquee Not Found</h4>
            @endforelse
        </div>
    </div>
</section>

<!-- Mighty Buyer -->
<section class="mightyBuyer pb-0" data-aos="fade-up">
    <div class="row justify-content-center">
        <div class="col-lg-7">
            <div class="section-content text-center">
                <h2 class="heading">{{$decodedData['mighty_buyer_heading'] ?? ''}}</h2>
                <p>
                    {{$decodedData['mighty_buyer_section_full_description'] ?? ''}}
                </p>
            </div>
        </div>
    </div>
    <div class="d-flex">

        @forelse($mighty_buyer_sections as $key => $mighty_buyer_section)
            <div class="mightyBuyer-card" style="{{$mighty_buyer_section->bg_color_name ? : ''}}">
                <div class="number">{{$key+1}}</div>
                <img src="{{$mighty_buyer_section->image ? asset('images/'.$mighty_buyer_section->image) : asset('images/placeholder.png')}}" alt="image" class="img-fluid number-img">
                <h4 class="title">{{$mighty_buyer_section->title ?: ''}}</h4>
                <p>{!! $mighty_buyer_section->short_description !!}</p>
            </div>
        @empty
            <h4 class="text-center">Mighty Buyer Not Found</h4>
        @endforelse

    </div>
</section>

<!-- Services -->
<!-- <section class="services p-0">
    <div class="row">
        <div class="col-lg-5">
            <div class="services-card services-card--lg">
                <img src="images/services1.jpg" alt="image" class="img-fluid w-100 h-100">
                <div class="services-card__content text-white">
                    <h4 class="title">Service <span class="d-block">Providers</span></h4>
                    <a href="" class="viewLink">view more</a>
                </div>
            </div>
            <div class="services-card services-card--sm">
                <img src="images/services2.jpg" alt="image" class="img-fluid w-100 h-100">
                <div class="services-card__content text-white">
                    <h4 class="title">Smart <span class="d-block"> Weekend</span></h4>
                    <a href="" class="viewLink">view more</a>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="services-card services-card--sm">
                <img src="images/services3.jpg" alt="image" class="img-fluid w-100 h-100">
                <div class="services-card__content text-white">
                    <h4 class="title">Kitchen <span class="d-block">& </span> <span class="d-block">Dining </span></h4>
                    <a href="" class="viewLink">view more</a>
                </div>
            </div>
            <div class="services-card services-card--lg">
                <img src="images/services4.jpg" alt="image" class="img-fluid w-100 h-100">
                <div class="services-card__content text-white">
                    <h4 class="title">Product <span class="d-block">Suppliers</span></h4>
                    <a href="" class="viewLink">view more</a>
                </div>
            </div>
        </div>
    </div>
</section> -->

<!-- Article -->
<!-- <section class="article">
    <div class="container">
        <div class="row justify-content-center" data-aos="fade-down">
            <div class="col-lg-7">
                <div class="section-content text-center">
                    <h2 class="heading">NEW ARTICLE</h2>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-4">
                <div class="article-card">
                    <img src="images/article1.jpg" alt="image" class="img-fluid w-100 h-100">
                    <div class="article-card__content">
                        <h4 class="title">Blog post</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="article-card">
                    <img src="images/article2.jpg" alt="image" class="img-fluid w-100 h-100">
                    <div class="article-card__content">
                        <h4 class="title">Blog post</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="article-card">
                    <img src="images/article3.jpg" alt="image" class="img-fluid w-100 h-100">
                    <div class="article-card__content">
                        <h4 class="title">Blog post</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> -->



@endsection