Stubbed Home UI

AOW4/Components/Layout/MainLayout.razor

@@ -1,10 +1,6 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
     <main>
         <div class="top-row px-4">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>

AOW4/Components/Pages/Home.razor

@@ -1,7 +1,184 @@
 @page "/"
+@using AOW4.Data
 
-<PageTitle>Home</PageTitle>
+<div class="home-container">
+    <h1>Welcome to AOW4</h1>
+    <p class="subtitle">Explore our tools and resources</p>
 
-<h1>Hello, world!</h1>
+    <div class="sections-grid">
+        @foreach (var section in sections)
+        {
+            <div class="section-card">
+                <div class="section-header">
+                    <h2>@section.Name</h2>
+                    @if (!string.IsNullOrEmpty(section.Description))
+                    {
+                        <p class="section-description">@section.Description</p>
+                    }
+                </div>
 
-Welcome to your new app.
+                <div class="section-links">
+                    @if (section.Links.Any())
+                    {
+                        <ul>
+                            @foreach (var link in section.Links)
+                            {
+                                <li>
+                                    <a href="@link.Url">
+                                        <span class="link-title">@link.Title</span>
+                                        @if (!string.IsNullOrEmpty(link.Description))
+                                        {
+                                            <span class="link-description">@link.Description</span>
+                                        }
+                                    </a>
+                                </li>
+                            }
+                        </ul>
+                    }
+                    else
+                    {
+                        <p class="no-links">Coming soon...</p>
+                    }
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    private List<Section> sections = new();
+
+    protected override void OnInitialized()
+    {
+        sections = SectionsData.GetAllSections();
+    }
+}
+
+<style>
+    .home-container {
+        padding: 2rem;
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    h1 {
+        text-align: center;
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        color: #333;
+    }
+
+    .subtitle {
+        text-align: center;
+        font-size: 1.1rem;
+        color: #666;
+        margin-bottom: 2rem;
+    }
+
+    .sections-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .section-card {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        overflow: hidden;
+        background-color: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.3s ease, transform 0.3s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .section-card:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+        transform: translateY(-2px);
+    }
+
+    .section-header {
+        padding: 1.5rem;
+        border-bottom: 2px solid #e0e0e0;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    }
+
+    .section-header h2 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.8rem;
+        color: #333;
+    }
+
+    .section-description {
+        margin: 0;
+        font-size: 0.95rem;
+        color: #666;
+    }
+
+    .section-links {
+        padding: 1.5rem;
+        flex-grow: 1;
+    }
+
+    .section-links ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .section-links li {
+        margin-bottom: 0.75rem;
+    }
+
+    .section-links li:last-child {
+        margin-bottom: 0;
+    }
+
+    .section-links a {
+        display: flex;
+        flex-direction: column;
+        padding: 0.75rem 1rem;
+        background-color: #f9f9f9;
+        border-left: 4px solid #4a90e2;
+        text-decoration: none;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+    }
+
+    .section-links a:hover {
+        background-color: #f0f0f0;
+        border-left-color: #2563eb;
+        padding-left: 1.25rem;
+    }
+
+    .link-title {
+        font-weight: 600;
+        color: #2c3e50;
+        font-size: 0.95rem;
+    }
+
+    .link-description {
+        font-size: 0.85rem;
+        color: #7f8c8d;
+        margin-top: 0.25rem;
+    }
+
+    .no-links {
+        text-align: center;
+        color: #bdc3c7;
+        font-style: italic;
+        padding: 2rem 0;
+        margin: 0;
+    }
+
+    @@media (max-width: 768px) {
+        .sections-grid {
+            grid-template-columns: 1fr;
+        }
+
+        h1 {
+            font-size: 2rem;
+        }
+    }
+</style>

AOW4/Data/SectionData.cs

@@ -0,0 +1,38 @@
+namespace AOW4.Data;
+
+public static class SectionsData
+{
+    public static List<Section> GetAllSections()
+    {
+        return new List<Section>
+        {
+            new Section
+            {
+                Name = "Calculators",
+                Description = "Useful calculator tools for various computations",
+                Links = new List<SectionLink>
+                {
+                    // Add calculator links here in the future
+                }
+            },
+            new Section
+            {
+                Name = "References",
+                Description = "Reference materials and documentation",
+                Links = new List<SectionLink>
+                {
+                    // Add reference links here in the future
+                }
+            },
+            new Section
+            {
+                Name = "Learning",
+                Description = "Educational resources and learning materials",
+                Links = new List<SectionLink>
+                {
+                    // Add learning links here in the future
+                }
+            }
+        };
+    }
+}

AOW4/Data/SectionModels.cs

@@ -0,0 +1,15 @@
+namespace AOW4.Data;
+
+public class SectionLink
+{
+    public string Title { get; set; } = string.Empty;
+    public string Url { get; set; } = string.Empty;
+    public string? Description { get; set; }
+}
+
+public class Section
+{
+    public string Name { get; set; } = string.Empty;
+    public string? Description { get; set; }
+    public List<SectionLink> Links { get; set; } = new();
+}