Day 2 vibes

ET/Web/Pages/DocViewer.razor

@@ -1,5 +1,5 @@
 @page "/docs/{Slug}"
-@inject Web.Services.DocsService DocsService
+@inject DocsService DocsService
 
 <PageTitle>@(doc?.Title ?? "Not Found")</PageTitle>
 
@@ -39,7 +39,7 @@ else
 @code {
     [Parameter] public string Slug { get; set; } = "";
 
-    private Web.Models.NoteDocument? doc;
+    private NoteDocument? doc;
     private bool loading = true;
 
     protected override async Task OnParametersSetAsync()
@@ -49,4 +49,5 @@ else
         doc = await DocsService.GetNoteAsync(Slug);
         loading = false;
     }
+
 }

ET/Web/Pages/Docs.razor

@@ -1,7 +1,42 @@
 @page "/docs"
+@inject DocsService DocsService
 
-<PageTitle>Docs</PageTitle>
+<PageTitle>Documentation</PageTitle>
 
-<h1>Documentation</h1>
+<div class="section-header d-flex align-items-center mb-4">
+    <h1 class="mb-0">Documentation</h1>
+    <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
+</div>
 
-<p>Select a note from the sidebar to view its contents.</p>
+@if (index == null)
+{
+    <div class="d-flex justify-content-center py-5">
+        <div class="spinner-border text-success" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+}
+else
+{
+    <div class="docs-grid">
+        @foreach (var note in index.Notes.OrderBy(n => n.Title))
+        {
+            <NavLink href="@($"docs/{note.Slug}")" class="docs-card">
+                <div class="d-flex justify-content-between align-items-start mb-2">
+                    <span class="badge bg-dark text-success border border-success border-opacity-25">@note.Category</span>
+                </div>
+                <h3>@note.Title</h3>
+                <p class="text-muted small mb-0">Explore details about @note.Title</p>
+            </NavLink>
+        }
+    </div>
+}
+
+@code {
+    private NotesIndex? index;
+
+    protected override async Task OnInitializedAsync()
+    {
+        index = await DocsService.GetIndexAsync();
+    }
+}

ET/Web/Pages/Gear.razor

@@ -0,0 +1,51 @@
+@page "/gear"
+@inject DocsService DocsService
+
+<PageTitle>Gear & Equipment</PageTitle>
+
+<div class="section-header d-flex align-items-center mb-4">
+    <h1 class="mb-0">Gear & Equipment</h1>
+    <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
+</div>
+
+@if (gearNotes == null)
+{
+    <div class="d-flex justify-content-center py-5">
+        <div class="spinner-border text-success" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+}
+else
+{
+    <div class="grid-container">
+        <TelerikGrid Data="@gearNotes" Pageable="true" PageSize="50" Sortable="true" FilterMode="@GridFilterMode.FilterRow"
+                     Height="calc(100vh - 250px)">
+            <GridColumns>
+                <GridColumn Field="@(nameof(NoteInfo.Title))" Title="Item Name" Width="200px">
+                    <Template>
+                        <NavLink href="@($"docs/{(context as NoteInfo)!.Slug}")" class="fw-bold">@((context as NoteInfo)!.Title)</NavLink>
+                    </Template>
+                </GridColumn>
+                <GridColumn Field="@(nameof(NoteInfo.Cost))" Title="Cost" Width="90px" />
+                <GridColumn Field="@(nameof(NoteInfo.GearCategory))" Title="Category" Width="140px"/>
+                <GridColumn Field="@(nameof(NoteInfo.Effect))" Title="Effect"/>
+                <GridColumn Field="@(nameof(NoteInfo.Location))" Title="Acquisition" Width="150px"/>
+            </GridColumns>
+        </TelerikGrid>
+    </div>
+}
+
+@code {
+    private List<NoteInfo>? gearNotes;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var index = await DocsService.GetIndexAsync();
+        gearNotes = index.Notes
+            .Where(n => string.Equals(n.Category, "Gear", StringComparison.OrdinalIgnoreCase))
+            .OrderBy(n => n.Title)
+            .ToList();
+    }
+
+}

ET/Web/Pages/Home.razor

@@ -2,8 +2,22 @@
 
 <PageTitle>Earthborne Trailblazer</PageTitle>
 
-<h1>Earthborne Trailblazer</h1>
-
-<div class="map-container">
-    <object data="docs/map.svg" type="image/svg+xml" class="map-svg"></object>
+<div class="hero-section text-center">
+    <div class="hero-content py-5">
+        <h1 class="display-4 mb-3">Earthborne Trailblazer</h1>
+        <p class="lead mb-4">Your essential companion guide for navigating the Valley and mastering your craft.</p>
+        <div class="hero-actions">
+            <NavLink href="docs/overview" class="btn btn-primary btn-lg px-4">Begin Journey</NavLink>
+        </div>
+    </div>
+</div>
+
+<div class="container-fluid px-0 mt-4">
+    <div class="section-header d-flex align-items-center mb-3">
+        <h2 class="h4 mb-0">Valley Map</h2>
+        <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
+    </div>
+    <div class="map-container shadow-lg">
+        <object data="docs/map.svg" type="image/svg+xml" class="map-svg"></object>
+    </div>
 </div>

ET/Web/Pages/NotFound.razor

@@ -1,5 +1,16 @@
-@page "/not-found"
-@layout MainLayout
+@page "/404"
+@page "/not-found"
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
+<PageTitle>404 - Not Found</PageTitle>
+
+<div class="d-flex flex-column align-items-center justify-content-center py-5 text-center">
+    <div class="mb-4">
+        <i class="bi bi-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
+    </div>
+    <h1 class="display-4 mb-3">404</h1>
+    <h2 class="mb-4">Path Not Found</h2>
+    <p class="lead mb-5 text-muted">The trail you are following seems to have vanished into the wilderness.</p>
+    <NavLink href="" class="btn btn-primary px-4">
+        Return to Safety
+    </NavLink>
+</div>