@extends('layouts.frontend.app')
@section('style')
    <style>
        html {
            scroll-behavior: smooth;
        }

        .background-about-profile {
            background-image: url('./img/banner1.png');
            height: 350px;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .card-contact-page {
            border: none;
            box-shadow: 0px 1px 6px rgb(208, 208, 208);
        }


        #service-about {
            border: white;
            margin-bottom: 170px;
        }

        .btn-send {
            width: 100%;
            height: 45px;
            background-color: rgba(255, 0, 0, 0.67);
            color: white;
        }

        .btn-send:hover {
            width: 100%;
            height: 45px;
            background-color: rgba(201, 0, 0, 0.67);
            color: white;
        }

        .about-card-service {
            border: none;
            box-shadow: 0px 1px 8px gray;
        }

        .font-about-service {
            font-size: 24px;
            font-weight: 500;
            font-weight: bold;
            margin-bottom: 0;
            color: rgba(255, 0, 0, 0.67);
        }

        .font-about-service-two {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 5px;
            color: gray;
        }

        .paragraf-detail-service {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 5px;
            color: rgb(43, 43, 43);
        }

        .head-mobile-apps {
            color: rgba(255, 0, 0, 0.67);
        }

        .paragraf-text-mobile {
            font-size: 16px;
            color: rgb(67, 67, 67);
        }

        .head-detail-service {
            color: rgba(255, 0, 0, 0.67);
        }

        .lane-text {
            text-align: center;
        }

        .lane-bust {
            border: 1px solid gray;
            width: 200px;
        }

        .mb-head-detail {
            margin-bottom: 40px;
        }

        .card-tools {
            border: none;
            border-radius: 5px;
            transition: 1s;

        }

        .card-tools:hover {
            box-shadow: 0px 1px 10px gray;
        }

        .deskripsi-lang {
            color: gray;
        }

        .font-jumbotron {
            padding: 100px;
        }

        .head-jumbotron-one {
            font-size: 30px;
            font-weight: bold;
            color: white;
        }

        .paragraf-jumbotron {
            color: white;
        }

        .btn-jumbotron-about {
            width: 200px;
            height: 40px;
            text-align: center;
            color: white;
            background-color: tomato;
            transition: 0.5s;
        }

        .btn-jumbotron-about:hover {
            width: 200px;
            height: 40px;
            text-align: center;
            color: white;
            margin-top: -3px;
            background-color: tomato;
            box-shadow: 0px 1px 10px gray;
        }
    </style>
@endsection
@section('content')
    <div class="text-center position-relative mb-5">
        <img src="{{ url('/files/abouts/') . '/' . $about->img_about_header }}" alt="Banner Image" class="img-fluid">
        {{-- <div class="overlay">
        <h1 class="text-white roboto">{{ $service->name }}</h1>
    </div> --}}
    </div>
    <div class="container mb-5">
        <div class="row">
            <div class="col-md-12 justify-content-center">
                {!! $about->description !!}
            </div>
        </div>
    </div>

    <div class="container about-website">
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 mt-3" data-aos="fade-right">
                        <img src="{{ url('/files/abouts/') . '/' . $about->vission_image }}"
                            style="border-radius:8px; width:75%;" alt="">
                    </div>
                    <div class="col-md-6 mt-5" data-aos="fade-left">
                        <h2 class="pt-4 title-head-media-about">Sintera Vision</h2>
                        <p class="poppins pt-2">
                            {!! $about->vision !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 mt-5" data-aos="fade-right">
                        <h2 class="pt-4 title-head-media-about">Sintera Mission</h2>
                        <p class="poppins pt-2">
                            {!! $about->mission !!}
                        </p>
                    </div>
                    <div class="col-md-6 mt-5" data-aos="fade-left">
                        <img src="{{ url('/files/abouts/') . '/' . $about->mision_image }}"
                            style="border-radius:8px; width:75%; object-fit: cover;" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container about-mobile">
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 mt-3" data-aos="fade-right">

                        <img src="{{ asset('assets/frontend/img/media3.jpeg') }}" style="border-radius:8px; width:100%;"
                            alt="">
                    </div>
                    <div class="col-md-6 mt-5" data-aos="fade-left">
                        <h2 class="pt-4 title-head-media-about">Sintera's vision</h2>
                        <p class="poppins pt-2">
                            {{ $about->vision }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 mt-3" data-aos="fade-right">

                        <img src="{{ asset('assets/frontend/img/media3.jpeg') }}" style="border-radius:8px; width:100%;"
                            alt="">
                    </div>
                    <div class="col-md-6 mt-5" data-aos="fade-left">
                        <h2 class="pt-4 title-head-media-about">sintera mission</h2>
                        <p class="poppins pt-2">
                            {{ $about->mission }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- tools geer project -->
    <!-- tools close -->
    <hr id="service-about">


    <!-- detail service -->
    <div class="container">
        <div class="row mb-5">
            <div class="col-md-12 mb-head-detail text-center">
                <h3 class="head-detail-service">Detail Service</h3>
                <div class="lane-text">
                    <hr class="lane-bust">
                </div>
            </div>
            @foreach ($services as $service)
                <div class="border border-2 mb-4">
                    <div class="card" style="max-width: 600pxq;">
                        <div class="row g-0">
                            <div class="col-md-4">
                                @if ($service->img != null)
                                    <img src="{{ url('/files/services/') . '/' . $service->img }}" style="width: 500px"
                                        class="img-fluid rounded-start" alt="...">
                                @else
                                    <img src="{{ asset('assets/frontend/img/img-about-detail/img-application.png') }}"
                                        class="img-fluid" alt="">
                                @endif
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $service->name }}</h5>
                                    <p class="card-text">{!! $service->desc !!}</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- <div class="container">
    <div class="row text-center">
        <div class="col-md-12 text-center mt-5 mb-5">
            <a href="{{ route('contact-us') }}"><button class="btn btn-jumbotron-about">Contact us</button></a>
        </div>
    </div>
</div> --}}
@endsection