Update layout

Add standard tailwind color classes

Remove welcome page

Add landing page

resources/css/app.css

@@ -1,11 +1,54 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
-@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
-@source '../../storage/framework/views/*.php';
-@source '../**/*.blade.php';
-@source '../**/*.js';
+@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
+@source "../../storage/framework/views/*.php";
+@source "../**/*.blade.php";
+@source "../**/*.js";
 
+/* Theme tokens */
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    --color-background: hsl(36 33% 96%);
+    --color-foreground: hsl(24 20% 14%);
+    --color-card: hsl(36 33% 98%);
+    --color-card-foreground: hsl(24 20% 14%);
+    --color-muted: hsl(33 18% 92%);
+    --color-muted-foreground: hsl(25 10% 42%);
+    --color-border: hsl(30 18% 86%);
+    --color-ring: hsl(142 28% 39%);
+
+    --color-primary: hsl(142 28% 39%);
+    --color-primary-foreground: hsl(0 0% 100%);
+
+    --color-secondary: hsl(33 18% 92%);
+    --color-secondary-foreground: hsl(24 20% 14%);
+
+    --color-destructive: hsl(0 72% 51%);
+    --color-destructive-foreground: hsl(0 0% 100%);
+}
+
+/* Small reusable components (no chained @apply) */
+@layer components {
+    .app-shell {
+        @apply mx-auto min-h-dvh max-w-[430px] bg-background text-foreground;
+    }
+
+    .card {
+        @apply rounded-2xl bg-card text-card-foreground ring-1 ring-border;
+    }
+
+    .btn-primary {
+        @apply inline-flex min-h-[44px] items-center justify-center rounded-xl px-4 text-sm font-semibold
+        bg-primary text-primary-foreground transition
+        active:opacity-90
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30
+        disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    .btn-outline {
+        @apply inline-flex min-h-[44px] items-center justify-center rounded-xl px-4 text-sm font-semibold
+        bg-card text-foreground ring-1 ring-border transition
+        active:bg-muted
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30
+        disabled:pointer-events-none disabled:opacity-50;
+    }
 }

resources/views/components/layout/⚡navbar.blade.php

@@ -0,0 +1,73 @@
+<?php
+// resources/views/livewire/layout/navbar.blade.php
+
+use Livewire\Component;
+
+new class extends Component
+{
+    public function items(): array
+    {
+        return [
+            ['href' => '/dashboard', 'label' => 'Home',    'key' => 'home'],
+            ['href' => '/groups',    'label' => 'Groups',  'key' => 'groups'],
+            ['href' => '/sash',      'label' => 'Sash',    'key' => 'sash'],
+            ['href' => '/profile',   'label' => 'Profile', 'key' => 'profile'],
+        ];
+    }
+
+    public function isActive(string $href): bool
+    {
+        $path = ltrim(parse_url($href, PHP_URL_PATH) ?? $href, '/');
+
+        if ($path === '') {
+            return request()->is('/');
+        }
+
+        return request()->is($path) || request()->is($path . '/*');
+    }
+};
+?>
+
+<nav
+    class="fixed bottom-0 left-0 right-0 z-50 border-t border-slate-200 bg-white/95 backdrop-blur"
+    role="navigation"
+    aria-label="Main navigation"
+>
+    <div class="mx-auto flex max-w-[430px] items-center justify-around px-2 py-1 pb-[calc(env(safe-area-inset-bottom)+0.25rem)]">
+        @foreach ($this->items() as $item)
+            @php($active = $this->isActive($item['href']))
+
+            <a
+                href="{{ $item['href'] }}"
+                wire:navigate
+                aria-current="{{ $active ? 'page' : 'false' }}"
+                class="flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-0.5 rounded-lg px-3 py-1.5 text-xs transition-colors
+                       {{ $active ? 'font-semibold text-emerald-700' : 'text-slate-500 active:text-slate-900' }}"
+            >
+                @if ($item['key'] === 'home')
+                    <svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <path d="M10 20v-6h4v6m5-8.5L12 4l-7 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                @elseif ($item['key'] === 'groups')
+                    <svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <path d="M16 11a4 4 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
+                        <path d="M6 11a3 3 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
+                        <path d="M2.5 20a6 6 0 0 1 7.5-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        <path d="M10 20a7 7 0 0 1 14 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                @elseif ($item['key'] === 'sash')
+                    <svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+                    </svg>
+                @elseif ($item['key'] === 'profile')
+                    <svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <path d="M12 12a4 4 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
+                        <path d="M4 21a8 8 0 0 1 16 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                @endif
+
+                <span>{{ $item['label'] }}</span>
+            </a>
+        @endforeach
+    </div>
+</nav>

resources/views/layouts/app.blade.php

@@ -1,18 +1,26 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
-        <title>{{ $title ?? config('app.name') }}</title>
+    <title>{{ $title ?? config('app.name') }}</title>
 
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @livewireStyles
+</head>
 
-        @livewireStyles
-    </head>
-    <body>
+<body class="min-h-dvh bg-background text-foreground">
+<div class="mx-auto min-h-dvh w-full max-w-[430px] bg-background px-4 pt-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
+    <main class="@auth pb-24 @else pb-6 @endauth">
         {{ $slot }}
+    </main>
 
-        @livewireScripts
-    </body>
+    @auth
+        <livewire:layout.navbar />
+    @endauth
+</div>
+
+@livewireScripts
+</body>
 </html>

resources/views/login.blade.php

@@ -0,0 +1,7 @@
+@component('layouts.app', ['title' => 'Login'])
+    <div class="min-h-screen flex items-center justify-center p-6">
+        <div class="w-full max-w-md rounded-xl bg-white p-6 shadow">
+            {{-- your existing Fortify login form --}}
+        </div>
+    </div>
+@endcomponent

resources/views/pages/⚡landing.blade.php

@@ -0,0 +1,95 @@
+<?php
+
+use Livewire\Component;
+
+new class extends Component
+{
+    //
+};
+?>
+
+<div class="px-6 pt-16 pb-10 text-center">
+    <div>
+        <div class="mx-auto flex items-center justify-center gap-2">
+            <div class="grid h-12 w-12 place-items-center rounded-xl bg-primary text-primary-foreground shadow-sm">
+                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                    <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <span class="text-2xl font-bold tracking-tight">PatchBook</span>
+        </div>
+
+        <h1 class="mt-6 text-3xl font-bold leading-tight tracking-tight text-balance">
+            Earn patches. <span class="text-primary">Challenge friends.</span> Build your sash.
+        </h1>
+
+        <p class="mx-auto mt-4 max-w-[320px] text-sm leading-relaxed text-muted-foreground">
+            Create fun challenges with your crew, earn badges, track progress, and see who tops the leaderboard.
+        </p>
+
+        <div class="mx-auto mt-8 flex w-full max-w-[360px] flex-col gap-3">
+            <a href="{{ route('register') }}" wire:navigate class="btn-primary w-full text-base">
+                Get Started
+            </a>
+
+            <a href="{{ route('login') }}" wire:navigate class="btn-outline w-full text-base">
+                I already have an account
+            </a>
+        </div>
+    </div>
+
+    <hr class="mt-5 mb-5 border-t border-muted-foreground opacity-20">
+
+    <div class="text-left">
+        <h2><b>How it works</b></h2>
+        <div>
+            <div class="flex items-start gap-4">
+                <div class="relative w-10 flex justify-center self-stretch">
+                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
+                        <x-bi-people class="h-6 w-6" />
+                    </div>
+                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
+                </div>
+                <div>
+                    <p class="text-primary text-sm">STEP 1</p>
+                    <h3 class="font-semibold">Start or join a group</h3>
+                    <p class="text-muted-foreground text-sm">Create a crew with friends, family, or coworkers. Share an invite code to get everyone on board.</p>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="flex items-start gap-4 mt-5">
+                <div class="relative w-10 flex justify-center self-stretch">
+                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
+                        <x-solar-medal-ribbon-linear class="h-6 w-6" />
+                    </div>
+                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
+                </div>
+                <div>
+                    <p class="text-primary text-sm">STEP 2</p>
+                    <h3 class="font-semibold">Design your patches</h3>
+                    <p class="text-muted-foreground text-sm">Dream up custom challenges with icons, colors, and step-by-step requirements to complete.</p>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="flex items-start gap-4 mt-5">
+                <div class="relative w-10 flex justify-center self-stretch">
+                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
+                        <x-solar-shield-minimalistic-linear class="h-6 w-6" />
+                    </div>
+                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
+                </div>
+                <div>
+                    <p class="text-primary text-sm">STEP 3</p>
+                    <h3 class="font-semibold">Earn and collect</h3>
+                    <p class="text-muted-foreground text-sm">Complete challenges, get verified by your crew, and watch your sash fill up with patches.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p class="mt-8 text-xs text-muted-foreground">
+        Made for fun, inspired by scouting.
+    </p>
+</div>