@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- ---------- about_header ----------- -->
        <section class="about_header">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="info wow fadeInUp">
                            <h6 class="mainColor"> {{ __('main.anmar_fit') }} </h6>
                            <h1> {{ $title ?? "" }} </h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- story_sec ----------- -->
        <section class="story_sec">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">

                        <div class="cd-image-container wow fadeInUp d-none d-lg-block">
                            <img src="{{ getImage($content->image) }}" alt="Original Image">
                            <span class="cd-image-label" data-type="original">{{ __('main.before') }}</span>

                            <div class="cd-resize-img"> <!-- the resizable image on top -->
                                <img src="{{ getImage($content->image2) }}" alt="Modified Image">
                                <span class="cd-image-label" data-type="modified">{{ __('main.after') }}</span>
                            </div>

                            <span class="cd-handle"></span>
                        </div>

                        <div class="mob_imgs d-block d-lg-none">
                            <div class="img">
                                <img src="{{ getImage($content->image) }}" alt="Original Image">
                                <span class="float_text"> {{ __('main.before') }} </span>
                            </div>
                            <div class="img">
                                <img src="{{ getImage($content->image2) }}" alt="Modified Image">
                                <span class="float_text"> {{ __('main.after') }} </span>
                            </div>
                        </div>

                        <div class="st_inf wow fadeInUp">
                            <div class="section_head mb-4">
                                <h2> {{ __('pages.my_success_story') }} </h2>
                                <p class="mainColor"> {{ __('pages.tale_details') }} </p>
                                <p class="mainColor"> {{ $content->currentDescription->title ?? "" }} </p>
                            </div>
                            <div class="text">
                                {!! $content->currentDescription->description ?? "" !!}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- faq ----------- -->
        @include('web.home.other._common_questions')

        <!-- ---------- testimonials ----------- -->
        @include('web.home.other._reviews')

        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@endsection

@section('js')
    <script src="{{asset('assets/web/js/lib/beforeafter.jquery-1.0.0.js')}}"></script>
    <script src="{{asset('assets/web/js/lib/beforeafter.js')}}"></script>
@endsection