@extends('frontend.component.layout')

@section('head')
    <meta name="description" content="{{$halaman->descriptions}}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{$halaman->judul_menu}}" />
    <meta property="og:description" content="{{$halaman->descriptions}}" />
    <meta property="og:url" content="{{ url('p') }}/{{$halaman->slug}}" />
    <meta name="geo.country" content="id" />
    <meta name="distribution" content="Global" />
    <meta name="googlebot-news" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <meta name="robots" content="index, follow" />      
    <meta name="title" content='{{$halaman->judul_menu}}' />
    <meta name="keywords" content='{{$halaman->tags}}' />
    <meta name="news_keywords" content='{{$halaman->tags}}' />
    <meta property="dable:url" content="{{ url('p') }}/{{$halaman->slug}}">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:description" content="{{$halaman->descriptions}}" />
    <meta name="twitter:title" content="{{$halaman->judul_menu}}" />
@stop

@section('extended_css')
<style type="text/css">
    :root {
        --theme: #023375 !important;
    }
    @media (max-width: 767px) {
        .container-fluid{
            padding: 0 5px !important;
        }
    }

    @media (min-width: 767px) {
        .img-desktop{
            width: auto !important;
            height: 640px !important;
        }

        .about-image{
            width: auto !important;
            height: 640px !important;
            margin-left: -10% !important;
        }

        .about-wrapper-3 .about-image img {
            width: auto !important;
            height: 640px !important;
        }
        .halKontak{
            padding-right: 2rem !important;
            padding-left: 2rem !important;
        }
    }
    
    .about-wrapper-3 .about-image img {
        border-radius: 0px 26px 26px 0px;
    }

    /*.section-padding {
        padding: 30px 0 !important;
    }*/

    .section-padding {
        padding-top: 30px !important;
    }

    .offcanvas__wrapper {
        background-color: #023375 !important;
    }

    .back-to-top, .feature-provide-box-items:hover {
        background-color: #023375 !important;
    }

    .preloader p, .preloader .animation-preloader .txt-loading .letters-loading {
        color: #023375 !important;
    }

    .preloader .animation-preloader .spinner {

    }

    /*.breadcumb-container-wrapper {
        padding: 170px 0 170px !important;
    }*/

    p, ol li{
        color: #000 !important;
    }
</style>
@stop

@section('content')
<div class="breadcumb-section fix">
    <div class="breadcumb-container-wrapper background-image" style="background-image: url('{{ url('img/bg2.jpg') }}');">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1>{{$halaman->judul_menu}}</h1>
                    <div class="links">
                        <a href="{{ url('/') }}">Home<span class="slash">/</span></a>{{$halaman->judul_menu}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="project-details-section section-padding fix">
    <div class="project-details-container-wrapper">
        <div class="container">
            <div class="project-details-wapper">
                <div class="row">
                    <div class="single-desc">
                        <div class="row gy-5">
                            <div class="col-12 halKontak">
                                <h3 class="single-desc-title">
                                    {{$halaman->judul_menu}}
                                </h3>
                                <p class="text1">
                                    {!!$halaman->content!!}
                                </p>
                                <hr>
                                <div class="social-share">
                                    <span class="me-3">Share:</span>
                                    <a style="padding: 5px;" href="https://www.facebook.com/sharer/sharer.php?u={{url('/p/'.$halaman->slug)}}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                    <a style="padding: 5px;" href="http://twitter.com/intent/tweet?status={{$halaman->judul_berita}}&url={{url('/p/'.$halaman->slug)}}" target="_blank"><i class="fab fa-twitter"></i></a>
                                    <a style="padding: 5px;" href="whatsapp://send?text={{url('/p/'.$halaman->slug)}}" target="_blank"><i class="fab fa-whatsapp"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@stop

@section('extended_js')
    <script type="text/javascript">
      
    </script>
@stop