@extends('layouts.guest')

@section('content')

<main>

    <div class="pt-10 bg-white sm:pt-20">
        <div class="px-6 mx-auto max-w-7xl lg:px-8">
            <div class="max-w-2xl mx-auto lg:mx-0">
                <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ deepL($about->title) }}
                </h2>
            </div>
        </div>
    </div>

    <!-- Contact section -->
    <div class="py-24 overflow-hidden bg-white sm:py-32">
        <div class="max-w-2xl px-6 mx-auto lg:max-w-7xl lg:px-8">
            <div class="max-w-4xl">
                <h1 class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 text-pretty sm:text-5xl">{{
                    deepl('Karada ve Denizde 40 yıldır kesintisiz güç') }}</h1>
                <p class="mt-6 text-gray-700 text-xl/8 text-balance">SGS olarak, 40 yılı aşan tecrübemizle kara ve deniz
                    tipi jeneratör üretimi, satışı; aynı zamanda tüm jeneratörlerde servis, kiralama ve ikinci el
                    jeneratör alım-satım faaliyetlerini sürdürüyoruz. </p>
            </div>
            <section class="grid grid-cols-1 mt-20 lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
                <div class="lg:pr-8">
                    <p class="mt-6 text-gray-600 text-base/7">{{ deepl($about->content) }}</p>
                </div>
                <div class="pt-16 lg:row-span-2 lg:-mr-16 xl:mr-auto">
                    <div
                        class="grid grid-cols-2 gap-4 -mx-8 sm:-mx-16 sm:grid-cols-4 lg:mx-0 lg:grid-cols-2 lg:gap-4 xl:gap-8">
                        <div
                            class="overflow-hidden shadow-xl aspect-square rounded-xl outline-1 -outline-offset-1 outline-black/10">
                            <img alt=""
                                src="https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?&auto=format&fit=crop&crop=center&w=560&h=560&q=90"
                                class="block object-cover size-full" />
                        </div>
                        <div
                            class="-mt-8 overflow-hidden shadow-xl aspect-square rounded-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40">
                            <img alt=""
                                src="https://images.unsplash.com/photo-1557804506-669a67965ba0?&auto=format&fit=crop&crop=left&w=560&h=560&q=90"
                                class="block object-cover size-full" />
                        </div>
                        <div
                            class="overflow-hidden shadow-xl aspect-square rounded-xl outline-1 -outline-offset-1 outline-black/10">
                            <img alt=""
                                src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?&auto=format&fit=crop&crop=left&w=560&h=560&q=90"
                                class="block object-cover size-full" />
                        </div>
                        <div
                            class="-mt-8 overflow-hidden shadow-xl aspect-square rounded-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-40">
                            <img alt=""
                                src="https://images.unsplash.com/photo-1598257006458-087169a1f08d?&auto=format&fit=crop&crop=center&w=560&h=560&q=90"
                                class="block object-cover size-full" />
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- LinkedIn section -->
    @include('components.front.linkedin')

    <!-- Enerjigeldi section -->
    @include('components.front.enerjigeldi')

</main>

@endsection