@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" icon-position="after" icon="lucide-external-link">
                            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 kann bei der Bewertung von Objekten </h3>
                    <p id="featureDescription" class="text-pretty text-sm">
                        .. und bei der Erstellung eines Gutachten nach amtlich vorgegebenen Normen
                        unterstützen.
                        <x-filament::link href="/nutzwerte" icon-position="after" icon="lucide-external-link">
                            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 können </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 im CSV Format</h3>
                    <p id="featureDescription" class="text-pretty text-sm">
                        .. importiert werden, die
                        Parameter werden gesetzt und das Gutachten im PFD Format heruntergeladen.
                        <x-filament::link href="/nutzwerte" icon-position="after" icon="lucide-external-link">
                            mehr...
                        </x-filament::link>
                    </p>
                </div>
            </article>
        </div>
        <div class="p-5">
            {{-- @include('components.login') --}}
        </div>
    </div>
@endsection