From 0cb77f87af60ed0e1a24b6d497a176527aa72f16 Mon Sep 17 00:00:00 2001
From: Khwezi Mngoma <khwezi@msn.com>
Date: Sat, 23 May 2026 16:52:27 +0200
Subject: [PATCH] Styled not found page

---
 .../Components/Layout/MainLayout.razor        |   8 +-
 .../Components/Layout/MainLayout.razor.css    |   8 +
 MidrandBookshop/Components/Pages/Error.razor  |  59 ++--
 .../Components/Pages/Error.razor.css          |  37 +++
 MidrandBookshop/Components/Pages/Home.razor   |  26 +-
 .../Components/Pages/NotFound.razor           |  36 ++-
 .../Components/Pages/NotFound.razor.css       |  76 +++++
 .../Components/Pages/Product.razor            | 137 ++++++++
 .../Components/Pages/Product.razor.css        | 294 ++++++++++++++++++
 MidrandBookshop/Components/Routes.razor       |  14 +-
 10 files changed, 655 insertions(+), 40 deletions(-)
 create mode 100644 MidrandBookshop/Components/Pages/Error.razor.css
 create mode 100644 MidrandBookshop/Components/Pages/NotFound.razor.css
 create mode 100644 MidrandBookshop/Components/Pages/Product.razor
 create mode 100644 MidrandBookshop/Components/Pages/Product.razor.css

diff --git a/MidrandBookshop/Components/Layout/MainLayout.razor b/MidrandBookshop/Components/Layout/MainLayout.razor
index 6039b30..36ae911 100644
--- a/MidrandBookshop/Components/Layout/MainLayout.razor
+++ b/MidrandBookshop/Components/Layout/MainLayout.razor
@@ -103,7 +103,7 @@
             </svg>
         </div>
 
-        <nav class="navbar navbar-expand-lg py-4 bg-transparent position-relative" style="z-index: 100; pointer-events: auto;">
+        <nav class="navbar navbar-expand-lg py-3 sticky-top-nav" style="pointer-events: auto;">
             <div class="container-fluid px-md-5">
                 <a class="navbar-brand d-flex align-items-center" href="/" style="transform: scale(1.6); transform-origin: left center; margin-right: 4rem;">
                     <svg class="me-2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
@@ -218,13 +218,13 @@
                     <span class="fw-bold tracking-tight text-dark d-block mb-3" style="font-size: 0.75rem; letter-spacing: 1px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
                     <p class="text-muted small mb-4" style="line-height: 1.6; max-width: 360px;">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
                     <div class="d-flex flex-column gap-2.5">
-                        <a href="mailto:info@midrandshop.co.za" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
+                        <a href="mailto:info@midrandbooks.co.za" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
                             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
-                            info@midrandshop.co.za
+                            info@midrandbooks.co.za
                         </a>
                         <a href="tel:+27872650198" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
                             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
-                            +27 87 265 0198
+                            +27 87 265 9463
                         </a>
                     </div>
                 </div>
diff --git a/MidrandBookshop/Components/Layout/MainLayout.razor.css b/MidrandBookshop/Components/Layout/MainLayout.razor.css
index 8d04c5d..1ec945d 100644
--- a/MidrandBookshop/Components/Layout/MainLayout.razor.css
+++ b/MidrandBookshop/Components/Layout/MainLayout.razor.css
@@ -1,5 +1,13 @@
 /* --- Midrand Books Sliding Cart Extensions --- */
 
+/* Ensure the navbar stays on top while scrolling */
+.sticky-top {
+    position: -webkit-sticky !important; /* Safari */
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 1000 !important;
+}
+
 /* Dimmed backdrop background blur styling */
 .cart-overlay {
     position: fixed;
diff --git a/MidrandBookshop/Components/Pages/Error.razor b/MidrandBookshop/Components/Pages/Error.razor
index 576cc2d..a796fd0 100644
--- a/MidrandBookshop/Components/Pages/Error.razor
+++ b/MidrandBookshop/Components/Pages/Error.razor
@@ -1,36 +1,49 @@
 @page "/Error"
 @using System.Diagnostics
+@inject NavigationManager Navigation
 
-<PageTitle>Error</PageTitle>
+<PageTitle>System Exception | Midrand Books</PageTitle>
 
-<h1 class="text-danger">Error.</h1>
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+<div class="artistic-error-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
 
-@if (ShowRequestId)
-{
-    <p>
-        <strong>Request ID:</strong> <code>@RequestId</code>
-    </p>
-}
+            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
+                <svg viewBox="0 0 400 400" width="300" height="300" fill="none" stroke="#1A1A1A" stroke-width="1.5">
+                    <rect x="100" y="100" width="200" height="200" transform="rotate(45 200 200)" opacity="0.2" />
+                    <line x1="150" y1="150" x2="250" y2="250" />
+                    <line x1="250" y1="150" x2="150" y2="250" />
+                    <circle cx="200" cy="200" r="80" stroke-dasharray="10 10" />
+                </svg>
+            </div>
 
-<h3>Development Mode</h3>
-<p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
-</p>
-<p>
-    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
-    It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
-    and restarting the app.
-</p>
+            <div class="col-12 col-md-6 offset-md-1">
+                <div class="meta-tag font-monospace text-uppercase text-danger mb-3">System Exception // Critical Halt</div>
 
-@code{
-    [CascadingParameter]
-    private HttpContext? HttpContext { get; set; }
+                <h1 class="display-4 text-dark mb-4 editorial-headline">An unexpected<br />interruption.</h1>
 
+                <p class="text-muted mb-5 body-manifesto-text">
+                    We are experiencing a technical disruption in our processing stream. Our team has been notified of this structural anomaly.
+                </p>
+
+                @if (ShowRequestId)
+                {
+                    <p class="font-monospace text-muted small mb-4">
+                        Ref: <code>@RequestId</code>
+                    </p>
+                }
+
+                <button class="btn btn-outline-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Library</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [CascadingParameter] private HttpContext? HttpContext { get; set; }
     private string? RequestId { get; set; }
     private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
 
     protected override void OnInitialized() =>
         RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
-}
+}
\ No newline at end of file
diff --git a/MidrandBookshop/Components/Pages/Error.razor.css b/MidrandBookshop/Components/Pages/Error.razor.css
new file mode 100644
index 0000000..c56ee2c
--- /dev/null
+++ b/MidrandBookshop/Components/Pages/Error.razor.css
@@ -0,0 +1,37 @@
+.artistic-error-container {
+    background-color: #ffffff;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    padding: 5rem 0;
+}
+
+.editorial-headline {
+    font-family: 'Playfair Display', serif;
+    font-size: 3.5rem;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    color: #111111;
+}
+
+.body-manifesto-text {
+    font-size: 1.1rem;
+    max-width: 400px;
+    line-height: 1.7;
+}
+
+.meta-tag {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+    color: #dc3545; /* Subtle red for system status */
+}
+
+.btn-outline-dark {
+    border: 1px solid #111;
+    transition: all 0.3s ease;
+}
+
+    .btn-outline-dark:hover {
+        background-color: #111;
+        color: #fff;
+    }
diff --git a/MidrandBookshop/Components/Pages/Home.razor b/MidrandBookshop/Components/Pages/Home.razor
index f6a7aa4..2f01d63 100644
--- a/MidrandBookshop/Components/Pages/Home.razor
+++ b/MidrandBookshop/Components/Pages/Home.razor
@@ -1,5 +1,6 @@
 @page "/"
 @rendermode InteractiveServer
+@inject NavigationManager Navigation
 
 <div class="container text-center text-hero-wrapper">
     <h1 class="display-3 text-dark mb-3 px-2 master-headline">
@@ -136,7 +137,9 @@
             @foreach (var book in PaginatedBooks)
             {
                 <div class="col-12 col-md-6 col-lg-4">
-                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card">
+                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
+                         style="cursor: pointer;"
+                         @onclick="() => NavigateToProduct(book.Id)">
                         <div class="d-flex justify-content-between align-items-center">
                             @if (book.IsNew)
                             {
@@ -156,7 +159,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="d-flex justify-content-between align-items-start mt-3 px-2">
+                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
                         <div>
                             <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
                             <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
@@ -172,7 +175,9 @@
         <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
             @foreach (var book in PaginatedBooks)
             {
-                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item">
+                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
+                     style="cursor: pointer;"
+                     @onclick="() => NavigateToProduct(book.Id)">
                     <div class="d-flex align-items-center gap-4 structural-list-left">
                         <span class="text-dark fw-medium list-item-title">@book.Title</span>
                         <span class="text-muted small list-item-author">by @book.Author</span>
@@ -226,6 +231,7 @@
 
     public class BookItem
     {
+        public long Id { get; set; } // Refactored to hold unique record indices of type long
         public string Title { get; set; } = string.Empty;
         public string Author { get; set; } = string.Empty;
         public decimal Price { get; set; }
@@ -288,9 +294,10 @@
         var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
         DynamicExtendedCategories.AddRange(extraSourceCategories);
 
-        BooksCollection.Add(new BookItem { Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
-        BooksCollection.Add(new BookItem { Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
-        BooksCollection.Add(new BookItem { Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
+        // Updated mock items to supply long IDs matching your screenshot items
+        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
+        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
+        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
 
         var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
         var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
@@ -303,6 +310,7 @@
         {
             BooksCollection.Add(new BookItem
             {
+                Id = (long)i,
                 Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
                 Author = designers[random.Next(designers.Length)],
                 Price = random.Next(25, 135) * 10,
@@ -313,6 +321,12 @@
         }
     }
 
+    // Handles the explicit page transition routing
+    private void NavigateToProduct(long id)
+    {
+        Navigation.NavigateTo($"/product/{id}");
+    }
+
     private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
     private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
     private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
diff --git a/MidrandBookshop/Components/Pages/NotFound.razor b/MidrandBookshop/Components/Pages/NotFound.razor
index 917ada1..ce1740d 100644
--- a/MidrandBookshop/Components/Pages/NotFound.razor
+++ b/MidrandBookshop/Components/Pages/NotFound.razor
@@ -1,5 +1,35 @@
 @page "/not-found"
-@layout MainLayout
+@inject NavigationManager Navigation
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
+<div class="artistic-404-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
+
+            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
+                <div class="artistic-svg-wrapper">
+                    <svg viewBox="0 0 400 400" width="350" height="350" stroke="#1A1A1A" stroke-width="2" fill="none">
+                        <path d="M60 80 Q80 60 100 80" />
+                        <path d="M100 60 Q120 40 140 60" />
+                        <path d="M280 70 Q300 50 320 70" />
+
+                        <path d="M100 200 L200 180 L300 200 L300 300 L200 320 L100 300 Z" fill="#F8F8F8" />
+                        <path d="M200 180 L200 320" />
+                        <path d="M120 220 L180 220 M120 250 L180 250 M220 220 L280 220 M220 250 L280 250" stroke="#DDD" />
+
+                        <circle cx="230" cy="230" r="40" />
+                        <line x1="258" y1="258" x2="290" y2="290" />
+                    </svg>
+                </div>
+            </div>
+
+            <div class="col-12 col-md-6 offset-md-1">
+                <div class="meta-tag font-monospace text-uppercase text-muted mb-3">System Index // Uncharted Territory</div>
+                <h1 class="display-4 text-dark mb-4 editorial-headline">Nothing was found<br />in this search.</h1>
+                <p class="text-muted mb-5 body-manifesto-text">
+                    Even with careful scrutiny, the requested volume remains elusive. It appears the shelf you are exploring is currently vacant.
+                </p>
+                <button class="btn btn-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Collection</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/MidrandBookshop/Components/Pages/NotFound.razor.css b/MidrandBookshop/Components/Pages/NotFound.razor.css
new file mode 100644
index 0000000..a372b49
--- /dev/null
+++ b/MidrandBookshop/Components/Pages/NotFound.razor.css
@@ -0,0 +1,76 @@
+.artistic-404-container {
+    background-color: #ffffff;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    padding: 5rem 0;
+}
+
+.terrain-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* Static, grounded look */
+    border-bottom: 2px solid #f0f0f0;
+    padding-bottom: 2rem;
+}
+
+.editorial-headline {
+    font-family: 'Playfair Display', serif;
+    font-size: 3.5rem;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    color: #111111;
+}
+
+.body-manifesto-text {
+    font-size: 1.1rem;
+    max-width: 400px;
+    line-height: 1.7;
+}
+
+.meta-tag {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+}
+
+.btn-dark {
+    transition: background 0.3s ease;
+}
+
+    .btn-dark:hover {
+        background: #444;
+    }
+
+.artistic-404-container {
+    background-color: #ffffff;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    padding: 5rem 0;
+}
+
+.artistic-svg-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.editorial-headline {
+    font-family: 'Playfair Display', serif;
+    font-size: 3.5rem;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    color: #111111;
+}
+
+.body-manifesto-text {
+    font-size: 1.1rem;
+    max-width: 400px;
+    line-height: 1.7;
+}
+
+.meta-tag {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+}
\ No newline at end of file
diff --git a/MidrandBookshop/Components/Pages/Product.razor b/MidrandBookshop/Components/Pages/Product.razor
new file mode 100644
index 0000000..aca17d0
--- /dev/null
+++ b/MidrandBookshop/Components/Pages/Product.razor
@@ -0,0 +1,137 @@
+@page "/product/{BookId:long}"
+@inject NavigationManager Navigation
+
+<div class="product-container">
+    <nav class="breadcrumb">
+        <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
+        <span class="crumb-separator">/</span>
+        <span class="crumb-current">@BookTitle</span>
+    </nav>
+
+    <div class="product-layout">
+        <div class="gallery-section">
+            <div class="main-image-wrapper">
+                <img src="@ActiveImageUrl" alt="@BookTitle" class="main-image" />
+
+                <div class="format-badges">
+                    @if (IsPhysicalBook)
+                    {
+                        <span class="badge badge-physical">Book</span>
+                    }
+                    @if (IsEBook)
+                    {
+                        <span class="badge badge-ebook">E-Book</span>
+                    }
+                    @if (CanReadOnline)
+                    {
+                        <span class="badge badge-online">Read Online</span>
+                    }
+                </div>
+            </div>
+
+            <div class="thumbnail-grid">
+                @foreach (var img in Thumbnails)
+                {
+                    <div class="thumbnail-wrapper @(ActiveImageUrl == img ? "active" : "")"
+                         @onclick="() => ActiveImageUrl = img">
+                        <img src="@img" alt="Thumbnail" />
+                    </div>
+                }
+            </div>
+        </div>
+
+        <div class="details-section">
+            <div class="meta-header">
+                <span class="author-name">@AuthorName</span>
+                <div class="rating-stars">
+                    @for (int i = 1; i <= 5; i++)
+                    {
+                        <span class="star @(i <= CurrentRating ? "filled" : "")">★</span>
+                    }
+                    <span class="rating-text">(@CurrentRating.ToString("F1"))</span>
+                </div>
+            </div>
+
+            <h1 class="product-title">@BookTitle</h1>
+            <div class="product-price">R @Price.ToString("N2")</div>
+
+            <div class="purchase-actions">
+                <div class="quantity-picker">
+                    <button @onclick="DecreaseQty" class="qty-btn">-</button>
+                    <span class="qty-val">@Quantity</span>
+                    <button @onclick="IncreaseQty" class="qty-btn">+</button>
+                </div>
+                <button class="btn-add-to-cart" @onclick="HandleAddToCart">
+                    Add to Cart
+                </button>
+            </div>
+
+            <hr class="divider" />
+
+            <div class="info-block">
+                <h3>Description</h3>
+                <p class="description-text">@BookDescription</p>
+            </div>
+
+            <div class="info-block author-bio-card">
+                <h3>About the Author</h3>
+                <p class="author-bio">@AuthorBio</p>
+                <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
+                    View all books by @AuthorName →
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public long BookId { get; set; }
+
+    // Mock State - In production, pull these via a Service using BookId inside OnInitialized
+    private string BookTitle { get; set; } = "Letters from M/M (Paris)";
+    private string AuthorName { get; set; } = "M/M Paris";
+    private string AuthorBio { get; set; } = "M/M Paris is an art and design partnership consisting of Michaël Amzalag and Mathias Augustyniak, established in 1992. Renowned globally for their influence on fashion, music, and contemporary art layout structures.";
+    private string BookDescription { get; set; } = "An exquisite archive tracking visual graphics, typography, and structural design curation over three decades. Beautifully bound with matte-coated plates and custom layouts.";
+    private decimal Price { get; set; } = 720.00m;
+
+    // Dynamic Ratings State
+    private double CurrentRating { get; set; } = 4.7;
+
+    // Formats supported
+    private bool IsPhysicalBook { get; set; } = true;
+    private bool IsEBook { get; set; } = true;
+    private bool CanReadOnline { get; set; } = false;
+
+    // Image Caching Gallery State
+    private string ActiveImageUrl { get; set; } = "images/book-cover-large.png";
+    private List<string> Thumbnails { get; set; } = new()
+    {
+        "images/book-cover-large.png",
+        "images/book-inside-1.png",
+        "images/book-inside-2.png"
+    };
+
+    private int Quantity { get; set; } = 1;
+
+    protected override void OnInitialized()
+    {
+        // Default the gallery viewer context logic
+        if (Thumbnails.Any())
+        {
+            ActiveImageUrl = Thumbnails.First();
+        }
+    }
+
+    private void IncreaseQty() => Quantity++;
+    private void DecreaseQty() { if (Quantity > 1) Quantity--; }
+
+    private void HandleAddToCart()
+    {
+        // Event logic hooked into your structural state layout
+    }
+
+    private void ViewAllAuthorBooks()
+    {
+        Navigation.NavigateTo($"/catalog?author={Uri.EscapeDataString(AuthorName)}");
+    }
+}
\ No newline at end of file
diff --git a/MidrandBookshop/Components/Pages/Product.razor.css b/MidrandBookshop/Components/Pages/Product.razor.css
new file mode 100644
index 0000000..1e64af7
--- /dev/null
+++ b/MidrandBookshop/Components/Pages/Product.razor.css
@@ -0,0 +1,294 @@
+.product-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Breadcrumbs */
+.breadcrumb {
+    font-size: 0.85rem;
+    margin-bottom: 2.5rem;
+    color: #8c8c8c;
+}
+
+.crumb-link {
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+    .crumb-link:hover {
+        color: #111;
+    }
+
+.crumb-separator {
+    margin: 0 0.5rem;
+}
+
+.crumb-current {
+    color: #111;
+    font-weight: 500;
+}
+
+/* Two-Column Grid Layout Structure */
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+@media (max-width: 992px) {
+    .product-layout {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+}
+
+/* Left Section: Visual Images/Thumbnails Layout */
+.gallery-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.main-image-wrapper {
+    position: relative;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 480px;
+}
+
+.main-image {
+    max-height: 450px;
+    object-fit: contain;
+    mix-blend-mode: multiply;
+}
+
+/* Format Badges Overlay Styles */
+.format-badges {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.badge {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.35rem 0.75rem;
+    border-radius: 100px;
+    font-weight: 600;
+    border: 1px solid transparent;
+}
+
+.badge-physical {
+    background-color: #111;
+    color: #fff;
+}
+
+.badge-ebook {
+    background-color: #fff;
+    color: #111;
+    border-color: #e5e5e5;
+}
+
+.badge-online {
+    background-color: #f0fdf4;
+    color: #166534;
+    border-color: #bbf7d0;
+}
+
+/* Thumbnails container */
+.thumbnail-grid {
+    display: flex;
+    gap: 1rem;
+}
+
+.thumbnail-wrapper {
+    width: 80px;
+    height: 80px;
+    border: 1px solid #e5e5e5;
+    border-radius: 6px;
+    padding: 0.5rem;
+    cursor: pointer;
+    background: #f9f9f9;
+    transition: all 0.2s ease;
+}
+
+    .thumbnail-wrapper:hover, .thumbnail-wrapper.active {
+        border-color: #111;
+    }
+
+    .thumbnail-wrapper img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        mix-blend-mode: multiply;
+    }
+
+/* Right Section: Core Text Typography Controls */
+.details-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.meta-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.author-name {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+/* Dynamic Stars C# rendering mapping */
+.rating-stars {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.star {
+    color: #e5e5e5;
+    font-size: 1.1rem;
+}
+
+    .star.filled {
+        color: #111; /* Solid black stars fits your clean aesthetic perfectly */
+    }
+
+.rating-text {
+    font-size: 0.85rem;
+    color: #666;
+    margin-left: 0.4rem;
+}
+
+.product-title {
+    font-size: 2.5rem;
+    font-family: 'Playfair Display', serif, Georgia; /* Fits the luxury typography tone */
+    font-weight: 400;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    color: #111;
+}
+
+.product-price {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+    color: #111;
+}
+
+/* Standard E-commerce Action Bar Block */
+.purchase-actions {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+}
+
+.quantity-picker {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e5e5e5;
+    border-radius: 100px;
+    padding: 0.25rem 0.5rem;
+}
+
+.qty-btn {
+    background: none;
+    border: none;
+    width: 36px;
+    height: 36px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+    .qty-btn:hover {
+        background-color: #f5f5f5;
+    }
+
+.qty-val {
+    min-width: 30px;
+    text-align: center;
+    font-weight: 500;
+}
+
+.btn-add-to-cart {
+    flex-grow: 1;
+    background-color: #111;
+    color: #fff;
+    border: none;
+    border-radius: 100px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+    .btn-add-to-cart:hover {
+        background-color: #2a2a2a;
+    }
+
+.divider {
+    border: 0;
+    border-top: 1px solid #eee;
+    margin-bottom: 2rem;
+}
+
+/* General Layout Text and Cross-Selling */
+.info-block {
+    margin-bottom: 2rem;
+}
+
+    .info-block h3 {
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #8c8c8c;
+        margin-bottom: 0.75rem;
+    }
+
+.description-text, .author-bio {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: #444;
+}
+
+.author-bio-card {
+    background-color: #fafafa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #f0f0f0;
+}
+
+.btn-text-link {
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 1rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: #111;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+}
+
+    .btn-text-link:hover {
+        color: #444;
+    }
diff --git a/MidrandBookshop/Components/Routes.razor b/MidrandBookshop/Components/Routes.razor
index 105855d..71c38b1 100644
--- a/MidrandBookshop/Components/Routes.razor
+++ b/MidrandBookshop/Components/Routes.razor
@@ -1,6 +1,12 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@using MidrandBookshop.Components.Pages
+<Router AppAssembly="@typeof(Program).Assembly">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
     </Found>
-</Router>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <NotFound />
+        </LayoutView>
+    </NotFound>
+</Router>
\ No newline at end of file