@extends('template.'.config('settings.template').'.content.master')
@section('content')


    <main class="single-project pt-50 style-5">

        <!-- ====== start about ====== -->
        <section class="about-app style-5">
            <div class="container">
                <div class="content text-center">
                    <h1 class="color-000 mb-50">{{$content->title}}</h1>
                    <div class="about-cards border-bottom brd-gray">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="about-card mb-30 mb-lg-0">
                                    <small class="d-block">
                                        client
                                    </small>
                                    <h6>
                                        Micosoft Holding Ltd, <br> Australia Area
                                    </h6>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="about-card mb-30 mb-lg-0">
                                    <small class="d-block">
                                        services
                                    </small>
                                    <h6>
                                        IT Consultation, UI/UX Design, Cloud Service
                                    </h6>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="about-card mb-30 mb-lg-0">
                                    <small class="d-block">
                                        date
                                    </small>
                                    <h6>
                                        Feburary 25th, 2022
                                    </h6>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="about-card mb-30 mb-lg-0">
                                    <small class="d-block">
                                        team
                                    </small>
                                    <h6>
                                        Logan Cee - Designer <br> Martin Moussa - iOS Developer
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="img-content pt-70 pb-70 border-bottom brd-gray overflow-hidden">
                        <div class="row justify-content-center">
                            <div class="col-lg-7">
                                <div class="img text-center">
                                    <img src="assets/img/single_project/2mobs.png" alt="" class="main-img">
                                    <img src="assets/img/single_project/bubbls.png" alt="" class="bubbls">
                                    <img src="assets/img/single_project/circle.png" alt="" class="circle">
                                </div>
                                <div class="info mt-30">
                                    <h5 class="lh-4">
                                        Stay focused and productive with a clean and clutter-free note space. The flexible ways to organize your notes: hashtags, nested notebooks, pinning notes to the top of the note list, etc
                                    </h5>
                                    <a href="#" class="color-blue4 mt-60">https://example.domain</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== end about ====== -->


        <!-- ====== start challenge ====== -->
        <div class="challenge section-padding style-5 overflow-hidden">
            <div class="container">
                <div class="row gx-5">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class=""> Our <br> <span> Challenge </span> </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="inf">
                            <div class="text color-666 mb-20">
                                Create an unconventional yet user-friendly website – innovative, with a clean & simple design that communicates and showcases multi-media content. Site that spreads the message: "It’s stories your love.”
                            </div>
                            <ul class="color-000">
                                <li class="d-flex mb-10">
                                    <i class="bi bi-dot fs-6 me-2"></i>
                                    Develop easy-to-find and easy-to-navigate mobile friendly website
                                </li>
                                <li class="d-flex mb-10">
                                    <i class="bi bi-dot fs-6 me-2"></i>
                                    Showcase each type of content: interactive books, animated stories and picture books, audio stories. <br> Create an experience people want to share with others
                                </li>
                                <li class="d-flex mb-10">
                                    <i class="bi bi-dot fs-6 me-2"></i>
                                    Persuade to download app and subscribe
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="imgs mt-60 mb-100">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="assets/img/single_project/ch_1.png" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="img img-cover rounded-3 overflow-hidden">
                                <img src="assets/img/single_project/ch_2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row gx-5">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class=""> Solution & <br> <span> Result </span> </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="inf">
                            <div class="text color-666 mb-10">
                                Our approach was to present the site as a visual editorial platform with quarterly features based on events and occasions the brand was focused on. Each quarterly focus would be marked by the hero and custom tags that filter content.
                            </div>
                            <div class="text color-666 mb-20">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                            </div>
                            <div class="color-000 mt-50">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="d-flex mb-20 fw-bold">
                                            <div class="icon-20 d-inline-flex justify-content-center align-items-center rounded-circle overflow-hidden bg-blue4 text-white flex-shrink-0 me-3">
                                                <i class="bi bi-check"></i>
                                            </div>
                                            Create & Save your notes with multi-media
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="d-flex mb-20 fw-bold">
                                            <div class="icon-20 d-inline-flex justify-content-center align-items-center rounded-circle overflow-hidden bg-blue4 text-white flex-shrink-0 me-3">
                                                <i class="bi bi-check"></i>
                                            </div>
                                            Complete note editor with rich text options
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="d-flex mb-20 mb-lg-0 fw-bold">
                                            <div class="icon-20 d-inline-flex justify-content-center align-items-center rounded-circle overflow-hidden bg-blue4 text-white flex-shrink-0 me-3">
                                                <i class="bi bi-check"></i>
                                            </div>
                                            Web Clipper Extension
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="d-flex mb-0 fw-bold">
                                            <div class="icon-20 d-inline-flex justify-content-center align-items-center rounded-circle overflow-hidden bg-blue4 text-white flex-shrink-0 me-3">
                                                <i class="bi bi-check"></i>
                                            </div>
                                            Automatically sync in real time
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ====== end challenge ====== -->


        <!-- ====== start screenshots  ====== -->
        <div class="screenshots style-4">
            <div class="screenshots-slider style-4">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/1.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/2.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/3.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/4.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/5.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="assets/img/screenshots/hand.png" alt="" class="mob-hand">
        </div>
        <!-- ====== end screenshots  ====== -->


        <!-- ====== start about ====== -->
        <section class="about-app style-5">
            <div class="container">
                <div class="content text-center">
                    <div class="img-content pt-70 pb-100 border-bottom brd-gray">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <div class="info mt-30">
                                    <h5 class="lh-4">
                                        “The team at <a href="#" class="color-blue4" >@iteck</a> is incredibly dedicated, knowledgeable, and helpful. The finished product was beautiful, and worth every penny. I would absolutely recommend Moonex Labs.”
                                    </h5>
                                    <a href="#" class="mt-60 color-666 fs-12px text-uppercase">- <strong class="color-000">Jhon henry </strong> , ceo at notero jsc - </a>
                                    <div class="share mt-100">
                                        <span class="color-999 fs-12px text-uppercase d-block"> share this project  </span>
                                        <a href="#" class="social-icon hover-blue4">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                        <a href="#" class="social-icon hover-blue4">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                        <a href="#" class="social-icon hover-blue4">
                                            <i class="fab fa-pinterest"></i>
                                        </a>
                                        <a href="#" class="social-icon hover-blue4">
                                            <i class="fab fa-goodreads-g"></i>
                                        </a>
                                        <a href="#" class="social-icon hover-blue4">
                                            <i class="fab fa-linkedin-in"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="next-prog section-padding">
                        <h5 class="color-999 text-uppercase fw-light">next project</h5>
                        <a href="#" class="color-000 fs-1 fw-bold mt-20">Criftocy Landing Page</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== end about ====== -->

        <!-- ====== start projects ====== -->
        <section class="projects style-6 p-0">
            <div class="content section-padding rounded-0">
                <div class="container">
                    <div class="section-head text-center mb-60 style-4">
                        <h2 class="mb-20"> Related <span> Projects </span> </h2>
                        <p>We have an experienced team of production and inspection personnel to ensure quality.</p>
                    </div>
                    <div class="slider-3items slider-style-6">
                        <div class="swiper-container pb-0">
                            <div class="swiper-wrapper">

                                @foreach($contents as $indexContent => $content)

                                    <div class="swiper-slide">
                                        <div class="project-card style-6">
                                            <div class="img">
                                                <img src="{{ asset('uploads/' . $content->image) }}" alt="">
                                            </div>
                                            <div class="info">
                                                <h3 class="title"><a href="page-single-project-5.html">{{$content->title}}</a></h3>
                                                <small class="color-blue6"><a href="#">SEO analysis</a></small>
                                                <div class="text">
                                                    Trust our top minds to eliminate workflow pain points, implement new
                                                    tech & app.
                                                </div>
                                                <div class="tags">
                                                    <span><a href="#">SEO Analysis</a></span>
                                                    <span><a href="#">Content Strategy</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @endforeach


                                <div class="swiper-slide">
                                    <div class="project-card style-6">
                                        <div class="img">
                                            <img src="assets/img/projects/5.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h3 class="title"><a href="#">e-Commerce Dashboard</a></h3>
                                            <small class="color-blue6"><a href="#">website design</a> & <a href="#">develoment</a></small>
                                            <div class="text">
                                                Trust our top minds to eliminate workflow pain points, implement new
                                                tech & app.
                                            </div>
                                            <div class="tags">
                                                <span><a href="#">WordPress</a></span>
                                                <span><a href="#">PHP</a></span>
                                                <span><a href="#">HTML/CSS</a></span>
                                                <span><a href="#">Figma</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ====== arrows ====== -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== end projects ====== -->

    </main>

    <div class="container" style="margin-top: 80px;">

        <div class="row">


            <div class="col-12 col-md-9">





                <div style="position: relative">
                    @if ($content->image)
                        <img class="rounded-top img-fluid" src="{{ asset($content->image) }}" loading="lazy" >
                    @else
                        <img class="rounded-top img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy" width="100%">
                    @endif



                </div>


                <br>
                <br>
                <br>


                <a href="{{ route('users.show', [$content->user->slug]) }}" class="text-decoration-none mt-2">
                    <img src="{{ $content->user->gravatar() }}" width="20px" title="{{ $content->user->name }}" class="border rounded img-fluid shadow-sm" alt="Logo {{ $content->user->name }} ">
                    {{ $content->user->name }}
                </a>
                <p class="fs-5 mt-5">

                    {!! isset($content->data_fields['short_description'])?$content->data_fields['short_description']:'keine Angaben' !!}
                </p>


                @isset($content->data_fields['extensive_description'])
                   <h2 class="fs-4 mt-5 mb-3">Beschreibung</h2>

                <div class="fs-5">
                    {!!$content->data_fields['extensive_description']!!}

                </div>

                @endisset


                @isset($content->data_fields['features'])
                    <h2 class="fs-4 mt-5">Features</h2>
                <br>

                    <div class="row">

                        @if($content->data_fields['features'] == "Dashboard")
                            <div class="col-2 mb-3 text-center">
                                <div style="background-color: #24052f; height: 120px; width: 120px; margin-bottom: 35px;" class="p-4 rounded-circle text-center align-middle" title="Checkout">
                                    <svg style="fill: white; height: 90%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                                </div>
                            </div>
                        @endif


                            <div class="col-2 mb-3 text-center">
                                <div style="background-color: #24052f; height: 120px; width: 120px; margin-bottom: 35px;" class="p-4 rounded-circle text-center align-middle" title="Checkout">
                                    <svg style="fill: white; height: 90%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                                </div>
                            </div>

                    </div>

                    <br>
                    <br>
                @endisset

                <h2 class="fs-4 mt-5 mb-5">Screenshots</h2>

                <div class="row">
                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>
                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>
                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>

                    <div class="col-4 mb-3">
                        <img class="rounded img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">

                    </div>


                </div>




            </div>

            <div class="col-12 col-md-3">

                <div class="bg-ci rounded p-3 border-ci position-fixed shadow-lg" style="width: 16%;">


                    Author: <a href="{{ route('users.show', [$content->user->slug]) }}" class="text-decoration-none mt-2">
                        <img src="{{ $content->user->gravatar() }}" width="20px" title="{{ $content->user->name }}" class="border rounded img-fluid shadow-sm" alt="Logo {{ $content->user->name }} ">
                        {{ $content->user->name }}
                    </a>
                    <br>
                    Lumino Version: <a href="">3.2</a>
                    <br>
                    Lisence: <a href="">2.93</a>
                    <br>
                    Latest Version: <a href="">2.93</a>
                    <br>
                    Price: <i>free</i>

                    <a  class="btn btn-primary d-block mt-4 btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal">

                        <svg style="fill: currentColor; width: 24px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M543.7 200.1C539.7 142.1 491.4 96 432 96c-7.6 0-15.1.8-22.4 2.3C377.7 58.3 328.1 32 272 32c-84.6 0-155.5 59.7-172.3 139.8C39.9 196.1 0 254.4 0 320c0 88.4 71.6 160 160 160h336c79.5 0 144-64.5 144-144 0-61.8-39.2-115.8-96.3-135.9zM496 432H160c-61.9 0-112-50.1-112-112 0-56.4 41.7-103.1 96-110.9V208c0-70.7 57.3-128 128-128 53.5 0 99.3 32.8 118.4 79.4 11.2-9.6 25.7-15.4 41.6-15.4 35.3 0 64 28.7 64 64 0 11.8-3.2 22.9-8.8 32.4 2.9-.3 5.9-.4 8.8-.4 53 0 96 43 96 96s-43 96-96 96zM387 256h-67v-84c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5z"/></svg>
                        Install this Theme
                    </a>
                </div>


            </div>



        </div>
    </div>





    <!-- Modal -->
    <div class="modal fade" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Install Theme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-12 col-md-10 offset-md-1">


                            <br>


                            @isset($content->data_fields['git_location'])
                                <div class="input-group input-group-lg shadow-lg">
                                    <input type="text" id="inputPassword5" class="form-control border-ci rounded" aria-describedby="passwordHelpBlock" readonly value="{{$content->data_fields['git_location']}}">
                                </div>



                                <div id="passwordHelpBlock" class="form-text">
                                    Use this link to install the chosen theme into your own Lumino installation. Make sure the Theme is compatible with your Lumino Version.
                                </div>
                            @endisset






                            <br>
                            <br>
                            <br>
                            <h5>Instructions</h5>


                            <br>

                            <div class="row">
                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #24052f; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        1.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Log in to your Lumino Admin

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #24052f; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        2.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Go to <i>Configurations</i> ⟶ <i>Themes</i> -> <i>"Add new Theme"</i>

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #24052f; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        3.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Copy & Paste the Theme URL

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #24052f; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        4.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    After Verification Theme can be installed

                                </div>


                            </div>



                            <br>

                            <div class="text-center">
                                <img src="https://i.gifer.com/XG0z.gif" class="img-fluid rounded mb-5" width="82%" loading="lazy">

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





                </div>

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

@stop