new design

app/Providers/AppServiceProvider.php

@@ -28,7 +28,7 @@ class AppServiceProvider extends ServiceProvider
             'danger' => Color::Red,
             'gray' => Color::Zinc,
             'info' => Color::Blue,
-            'primary' => Color::Red,
+            'primary' => Color::Amber,
             'success' => Color::Green,
             'warning' => Color::Amber,
         ]);

resources/css/filament/admin/theme.css

@@ -8,3 +8,43 @@
 .fi-simple-main {
     @apply relative sm:max-w-3xl;
 }
+
+
+@theme {
+    /* light theme */
+    --color-surface: var(--color-white);
+    --color-surface-alt: var(--color-neutral-50);
+    --color-on-surface: var(--color-neutral-600);
+    --color-on-surface-strong: var(--color-neutral-900);
+    --color-primary: var(--color-black);
+    --color-on-primary: var(--color-neutral-100);
+    --color-secondary: var(--color-neutral-800);
+    --color-on-secondary: var(--color-white);
+    --color-outline: var(--color-neutral-300);
+    --color-outline-strong: var(--color-neutral-800);
+
+    /* dark theme */
+    --color-surface-dark: var(--color-neutral-950);
+    --color-surface-dark-alt: var(--color-neutral-900);
+    --color-on-surface-dark: var(--color-neutral-300);
+    --color-on-surface-dark-strong: var(--color-white);
+    --color-primary-dark: var(--color-white);
+    --color-on-primary-dark: var(--color-black);
+    --color-secondary-dark: var(--color-neutral-300);
+    --color-on-secondary-dark: var(--color-black);
+    --color-outline-dark: var(--color-neutral-700);
+    --color-outline-dark-strong: var(--color-neutral-300);
+
+    /* shared colors */
+    --color-info: var(--color-sky-500);
+    --color-on-info: var(--color-white);
+    --color-success: var(--color-green-500);
+    --color-on-success: var(--color-white);
+    --color-warning: var(--color-amber-500);
+    --color-on-warning: var(--color-white);
+    --color-danger: var(--color-red-500);
+    --color-on-danger: var(--color-white);
+
+    /* border radius */
+    --radius-radius: var(--radius-sm);
+}

resources/views/components/landing-title.blade.php

@@ -0,0 +1,8 @@
+<div class="m-5 md:my-15">
+    <h1 class="scroll-m-20 text-3xl md:text-4xl font-black tracking-tight lg:text-5xl">
+        Die Nutzwertberechnung
+        <div class="font-thin">
+            einmal anders
+        </div>
+    </h1>
+</div>

resources/views/components/login.blade.php

@@ -1,8 +1,8 @@
-<div class="flex justify-center gap-3 py-10">
+<div class="flex justify-center gap-2 pt-5 pb-15">
-    <x-filament::button href="/app" tag="a" size="xl" class="w-xs">
+    <x-filament::button href="/app" tag="a" size="xl">
         Anmelden
     </x-filament::button>
-    <x-filament::button href="/app/register" tag="a" size="xl" color="gray" class="w-xs">
+    <x-filament::button href="/app/register" tag="a" size="xl" color="gray">
         Konto eröffnen
     </x-filament::button>
 </div>

resources/views/layouts/app.blade.php

@@ -23,7 +23,15 @@
 
         loadDarkMode()
 
-        document.addEventListener('livewire:navigated', loadDarkMode)
+        function toggle_theme() {
+            if (localStorage.getItem("theme") === "light") {
+                document.documentElement.classList.add("dark");
+                localStorage.setItem("theme", "dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+                localStorage.setItem("theme", "light");
+            }
+        }
     </script>
 </head>
 
@@ -36,8 +44,7 @@
 
     @include('layouts.nav')
 
-    <main
+    <main class="mx-auto max-w-6xl">
-        class="mx-auto max-w-5xl bg-gray-100 dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-5">
         @yield('content')
     </main>
 

resources/views/layouts/dark-toggle.blade.php

@@ -0,0 +1,4 @@
+<div class="pl-4">
+    <x-filament::icon-button icon="heroicon-o-sun" class="hidden dark:block" x-on:click=toggle_theme(); />
+    <x-filament::icon-button icon="heroicon-m-moon" class="block dark:hidden" x-on:click=toggle_theme(); />
+</div>

resources/views/layouts/nav.blade.php

@@ -1,36 +1,82 @@
-<nav class="mx-auto w-full max-w-5xl p-5">
+<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false"
-    <div class=" grid grid-cols-2">
+    class="flex items-center justify-between bg-surface-alt border-b border-outline px-6 py-4 dark:border-outline-dark dark:bg-surface-dark-alt">
-        <div class="fi-logo flex gap-1 ">
+    <!-- Brand Logo -->
-            <div class="w-9 pt-1">
+    <div class="fi-logo flex gap-1 ">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        <div class="w-9 pt-1">
-                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                    <path d="m12.99 6.74 1.93 3.44"></path>
+                stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M19.136 12a10 10 0 0 1-14.271 0"></path>
+                <path d="m12.99 6.74 1.93 3.44"></path>
-                    <path d="m21 21-2.16-3.84"></path>
+                <path d="M19.136 12a10 10 0 0 1-14.271 0"></path>
-                    <path d="m3 21 8.02-14.26"></path>
+                <path d="m21 21-2.16-3.84"></path>
-                    <circle cx="12" cy="5" r="2"></circle>
+                <path d="m3 21 8.02-14.26"></path>
-                </svg>
+                <circle cx="12" cy="5" r="2"></circle>
-            </div>
+            </svg>
-            <div class="text-2xl leading-none font-black tracking-tighter text-shadow-md dark:text-shadow-none">
-                nutzwerte.at
-                <div class="text-xs font-light">Software für Architekten</div>
-            </div>
         </div>
-
+        <div class="text-2xl leading-none font-black tracking-tighter text-shadow-md dark:text-shadow-none">
-
+            nutzwerte.at
-        <div class="grid grid-flow-col">
+            <div class="text-xs font-light">Software für Architekten</div>
-            <x-filament::link href="/" color="white" icon="heroicon-o-home">
-                Home
-            </x-filament::link>
-            <x-filament::link href="/nutzwerte" color="white" icon="heroicon-o-building-office-2">
-                Nutzwerte
-            </x-filament::link>
-            <x-filament::link href="/dieses-programm" color="white" icon="heroicon-o-calculator">
-                Programm
-            </x-filament::link>
-            <x-filament::link href="/impressum" color="white" icon="heroicon-o-calendar-date-range">
-                Impressum
-            </x-filament::link>
         </div>
     </div>
+    <!-- Desktop Menu -->
+    <dev class="hidden items-center gap-4 md:flex">
+        <x-filament::link href="/" color="white" icon="heroicon-o-home">
+            Home
+        </x-filament::link>
+        <x-filament::link href="/nutzwerte" color="white" icon="heroicon-o-building-office-2">
+            Nutzwerte
+        </x-filament::link>
+        <x-filament::link href="/programm" color="white" icon="heroicon-o-calculator">
+            Programm
+        </x-filament::link>
+        <x-filament::link href="/impressum" color="white" icon="heroicon-o-calendar-date-range">
+            Impressum
+        </x-filament::link>
+        <x-filament::button href="/app" tag="a" size="sm">
+            Anmelden
+        </x-filament::button>
+
+        @include('layouts.dark-toggle')
+
+        {{-- <x-filament::button href="/app/register" tag="a" size="sm" color="gray">
+            Registrieren
+        </x-filament::button> --}}
+    </dev>
+    <!-- Mobile Menu Button -->
+    <button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen"
+        x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button"
+        class="flex text-on-surface dark:text-on-surface-dark md:hidden" aria-label="mobile menu"
+        aria-controls="mobileMenu">
+        <svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
+            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+        </svg>
+        <svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
+            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+    </button>
+    <!-- Mobile Menu -->
+    <ul x-cloak x-show="mobileMenuIsOpen"
+        x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
+        x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0"
+        x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
+        x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu"
+        class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col divide-y divide-outline rounded-b-radius border-b border-outline bg-surface-alt px-6 pb-6 pt-20 dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt md:hidden">
+
+        <li class="py-4"><a href="/home"
+                class="w-full text-lg font-bold text-primary focus:underline dark:text-primary-dark"
+                aria-current="page">Home</a></li>
+        <li class="py-4"><a href="/nutzwerte"
+                class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Nutzwerte</a>
+        </li>
+        <li class="py-4"><a href="/programm"
+                class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Programm</a>
+        </li>
+        <li class="py-4"><a href="/impressum"
+                class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Impressum</a>
+        </li>
+        <li class="py-4"><a href="/app"
+                class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Login</a>
+        </li>
+    </ul>
 </nav>

resources/views/pages/welcome.blade.php

@@ -1,57 +1,72 @@
 @extends('layouts.app')
 
 @section('content')
-    <div class="flex gap-7">
+    <div class="flex flex-col gap-3 ">
-        {{-- <body class="bg-cover" style="background-image: url('images/backgrounds/bg2.jpg')"> --}}
 
-        <div class="flex flex-col gap-3">
+        @include('components.landing-title')
-            <div class="text-7xl text-center font-black p-7">
+
-                Nutzwertberechnung <br>einmal anders
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 pt-0">
-            </div>
+            <article
-            <div class="grid grid-cols-3 gap-5">
+                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="block rounded-lg bg-white dark:bg-black shadow-secondary-1 dark:bg-surface-dark">
+                <div class="h-44 md:h-64 overflow-hidden">
-                    <img class="rounded-t-lg object-cover h-56 w-full" src="images/backgrounds/bg2.jpg" alt="" />
+                    <img src="images/objekte/b1.jpg"
-                    <div class="p-6 text-surface ">
+                        class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="Planzeichnung" />
-                        <h5 class="mb-2 text-xl font-medium leading-tight">Das Nutzwertgutachten</h5>
-                        <p class="mb-4 text-base">
-                            ..ist ein Gutachten im österreichischen Wohnungseigentumsrecht.
-                            Es wird 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>
                 </div>
-                <div class="block rounded-lg bg-white dark:bg-black shadow-secondary-1 dark:bg-surface-dark">
+                <div class="flex flex-col gap-4 p-6">
-                    <img class="rounded-t-lg object-cover h-56 w-full p-5" src="images/klammer.jpg" alt="" />
+                    <span class="text-sm font-medium">Nutzwertgutachten</span>
-                    <div class="p-6 text-surface">
+                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong"
-                        <h5 class="mb-2 text-xl font-medium leading-tight">Daten Import</h5>
+                        aria-describedby="featureDescription">..ist ein Gutachten im österreichischen
-                        <p class="mb-4 text-base">
+                        Wohnungseigentumsrecht.</h3>
-                            Die Daten werden aus allen gängigen Zeichenprogrammen importieren, und die Objekte werden
+                    <p id="featureDescription" class="text-pretty text-sm">
-                            angelegt.
+                        Es wird das Verhältnis der einzelnen Eigentumsanteile innerhalb eines Gebäudes bestimmt.
-                            <x-filament::link href="/dieses-programm" icon-position="after" icon="lucide-external-link">
+                        <x-filament::link href="/nutzwerte" icon-position="after" icon="lucide-external-link">
-                                mehr...
+                            mehr...
-                            </x-filament::link>
+                        </x-filament::link>
-                        </p>
+                    </p>
-                    </div>
                 </div>
-                <div class="block rounded-lg bg-white dark:bg-black shadow-secondary-1 dark:bg-surface-dark">
+            </article>
-                    <img class="rounded-t-lg object-cover h-56 w-full" src="images/house2.jpg" alt="" />
+
-                    <div class="p-6 text-surface">
+            <article
-                        <h5 class="mb-2 text-xl font-medium leading-tight">Berechnung</h5>
+                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">
-                        <p class="mb-4 text-base">
+                <div class="h-44 md:h-64 overflow-hidden">
-                            Nach dem die Parameter gesetzt wurden ist die
+                    <img src="images/objekte/b6.jpg"
-                            fertige Nutzwertberechnung bereit um als als PDF-Dokument heruntgeladen zu werden.
+                        class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="Klammer" />
-                            <x-filament::link href="/dieses-programm" icon-position="after" icon="lucide-external-link">
-                                mehr...
-                            </x-filament::link>
-                        </p>
-                    </div>
                 </div>
-            </div>
+                <div class="flex flex-col gap-4 p-6">
-            <div class="p-5">
+                    <span class="text-sm font-medium">Nutzwertgutachten</span>
-                @include('components.login')
+                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong"
-            </div>
+                        aria-describedby="featureDescription">..ist ein Gutachten im österreichischen
+                        Wohnungseigentumsrecht.</h3>
+                    <p id="featureDescription" class="text-pretty text-sm">
+                        Es wird 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/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">Nutzwertgutachten</span>
+                    <h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong"
+                        aria-describedby="featureDescription">..ist ein Gutachten im österreichischen
+                        Wohnungseigentumsrecht.</h3>
+                    <p id="featureDescription" class="text-pretty text-sm">
+                        Es wird 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>
+        </div>
+        <div class="p-5">
+            @include('components.login')
         </div>
     </div>
 @endsection