@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Layanan Masyarakat') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden">
            <img src="{{ asset('') }}landing/img/bg-beranda.png" alt="gradient" class="w-full" />
        </picture>
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 hidden dark:block">
            <img src="{{ asset('') }}landing/img/gradient_dark.jpg" alt="gradient dark" class="w-full" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Layanan Masyarakat') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <div class="flex">
                <div class="w-1/2">
                    <img src="{{ asset('') }}landing/img/service1.png" class=" px-5 inline-block rounded-2.5xl "
                        width="500" />
                </div>
                <div class="w-1/2">
                    <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                        {{ __('message.Layanan Masyarakat Pertapindo') }}
                    </h2>
                    <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">

                    <div class="py-2 px-4">
                        <p style="text-align: justify">
                            {{ __('message.Dalam upaya kami untuk berkontribusi positif kepada masyarakat, kami dengan bangga mempersembahkan program kerja Layanan Masyarakat organisasi kami. Program ini bertujuan untuk memberikan manfaat nyata kepada komunitas sekitar dan masyarakat secara luas. Melalui program ini, kami berkomitmen untuk berkolaborasi dengan lembaga dan organisasi lokal guna menyediakan bantuan dan solusi bagi mereka yang membutuhkan.') }}
                        </p>
                        <p class="py-4" style="text-align: justify">
                            {{ __('message.Kami menyadari pentingnya partisipasi aktif dalam meningkatkan kualitas hidup masyarakat, oleh karena itu kami merancang berbagai kegiatan seperti penggalangan dana, kampanye kesadaran, program pendidikan, kegiatan sosial, dan layanan kesehatan.') }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="bg-white relative py-16">
        <div class="container">
            <h2 class="mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Galeri') }}
            </h2>
            <div class="flex flex-wrap py-10">
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                    </div>
                </div>
                <div class="w-1/3 py-5">
                    <div class="bg-light-base shadow-xl mx-4 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg px-10 py-10" src="https://flowbite.com/docs/images/blog/image-1.jpg"
                                alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection