@extends('layouts.app')

@section('content')
    <div class="flex flex-col gap-3 ">

        @include('components.landing-title')

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 pt-0">
            <article
                class="group flex rounded max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
                <div class="h-44 md:h-64 overflow-hidden">
                    <img src="images/objekte/b1.jpg"
                        class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="Planzeichnung" />
                </div>
                <div class="flex flex-col gap-4 p-6">
                    <span class="text-sm font-medium">Ein Nutzwertgutachten</span>
                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong indent-5"
                        aria-describedby="featureDescription">..ist ein Gutachten im österreichischen
                        Wohnungseigentumsrecht.</h3>
                    <p id="featureDescription" class="text-pretty text-sm">
                        .. es werden das Verhältnis der einzelnen Eigentumsanteile innerhalb eines Gebäudes bestimmt.
                        <x-filament::link href="/nutzwerte">
                            mehr...
                        </x-filament::link>
                    </p>
                </div>
            </article>

            <article
                class="group flex rounded max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
                <div class="h-44 md:h-64 overflow-hidden">
                    <img src="images/objekte/b6.jpg"
                        class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="Klammer" />
                </div>
                <div class="flex flex-col gap-4 p-6">
                    <span class="text-sm font-medium">Einmal Andes</span>
                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong indent-5"
                        aria-describedby="featureDescription">Dieses Programm unterstützt bei der Bewertung von Objekten
                    </h3>
                    <p id="featureDescription" class="text-pretty text-sm">
                        .. und erstellt Nutzwertgutachten nach vorgegebenen Normen.
                        <x-filament::link href="/nutzwerte">
                            mehr...
                        </x-filament::link>
                    </p>
                </div>
            </article>
            <article
                class="group flex rounded max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
                <div class="h-44 md:h-64 overflow-hidden">
                    <img src="images/objekte/b2.jpg"
                        class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="Klammer" />
                </div>
                <div class="flex flex-col gap-4 p-6">
                    <span class="text-sm font-medium">Die Daten werden </span>
                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong indent-5"
                        aria-describedby="featureDescription">..aus allen gängigen Zeicheprogrammen importiert.</h3>
                    <p id="featureDescription" class="text-pretty text-sm">
                        .. die Parameter werden gesetzt und das Gutachten kann als PFD heruntergeladen werden.
                        <x-filament::link href="/nutzwerte">
                            mehr...
                        </x-filament::link>
                    </p>
                </div>
            </article>
        </div>
        <div class="p-5">
            {{-- @include('components.login') --}}
        </div>
    </div>
@endsection