Merge pull request 'mock-data' (#41) from mock-data into main

Reviewed-on: #41

.drone.yml

@@ -0,0 +1,115 @@
+---
+kind: pipeline
+type: docker
+name: build
+
+steps:
+  - name: dotnet-build
+    image: mcr.microsoft.com/dotnet/sdk:10.0
+    commands:
+      - dotnet restore MidrandBooks.slnx
+      - dotnet build MidrandBooks.slnx -c Release
+
+  - name: dotnet-test
+    image: mcr.microsoft.com/dotnet/sdk:10.0
+    commands:
+      - dotnet restore MidrandBooks.slnx
+      - dotnet test MidrandBooks.slnx -c Release --no-restore
+
+trigger:
+  event: [ pull_request ]
+
+---
+kind: pipeline
+type: docker
+name: package
+
+steps:
+  - name: docker-build
+    image: plugins/docker
+    settings:
+      registry: nexus.khongisa.co.za
+      repo: nexus.khongisa.co.za/midrandbooks
+      tags: [ latest, "1.${DRONE_BUILD_NUMBER}" ]
+      custom_labels:
+        - org.opencontainers.image.source=https://gitea.khongisa.co.za/litecharms/midrandbooks
+        - org.opencontainers.image.version=1.${DRONE_BUILD_NUMBER}
+        - org.opencontainers.image.revision=${DRONE_COMMIT_SHA}
+      username: { from_secret: docker_username }
+      password: { from_secret: docker_password }      
+
+  - name: gitea-tag-release
+    image: alpine/git
+    environment:
+      GITEA_TOKEN: { from_secret: git_token }
+      GITEA_USER: { from_secret: git_username }
+      GITEA_PASS: { from_secret: git_password }    
+    commands:
+      - echo "169.255.58.144 gitea.khongisa.co.za" >> /etc/hosts
+      - apk add --no-cache curl
+      - git remote set-url origin https://$${GITEA_USER}:$${GITEA_PASS}@gitea.khongisa.co.za/litecharms/midrandbooks.git
+      - git tag 1.${DRONE_BUILD_NUMBER}
+      - git push origin 1.${DRONE_BUILD_NUMBER}
+      - |
+        curl -X POST "https://gitea.khongisa.co.za/api/v1/repos/litecharms/midrandbooks/releases" \
+             -H "Authorization: token $${GITEA_TOKEN}" \
+             -H "Content-Type: application/json" \
+             -d "{
+               \"tag_name\": \"1.${DRONE_BUILD_NUMBER}\",
+               \"target_commitish\": \"${DRONE_COMMIT_SHA}\",
+               \"name\": \"Release 1.${DRONE_BUILD_NUMBER}\",
+               \"body\": \"### Artifacts\n* **Docker Image:** nexus.khongisa.co.za/midrandbooks:1.${DRONE_BUILD_NUMBER}\n* **NuGet:** [View on Nexus](https://nexus.khongisa.co.za/repository/nuget-group/)\",
+               \"draft\": false,
+               \"prerelease\": false
+             }"
+
+depends_on:
+  - build
+
+trigger:
+  event: [ pull_request ]
+
+---
+kind: pipeline
+type: docker
+name: uat
+
+steps:
+  - name: deploy
+    image: bitnami/kubectl:latest
+    environment:
+      KUBE_CONFIG: { from_secret: kube_config }
+    commands:      
+      - mkdir -p $HOME/.kube
+      - echo "$KUBE_CONFIG" > $HOME/.kube/config
+      - kubectl apply -f midrandbooks-uat.yml
+      - sleep 10
+      - kubectl rollout restart deployment/midrandbooks -n midrandbooks-uat
+
+depends_on:
+  - package
+
+trigger:
+  event: [ pull_request ]
+
+---
+kind: pipeline
+type: docker
+name: prod
+
+steps:
+  - name: deploy
+    image: bitnami/kubectl:latest
+    environment:
+      KUBE_CONFIG: { from_secret: kube_config }
+    commands:      
+      - mkdir -p $HOME/.kube
+      - echo "$KUBE_CONFIG" > $HOME/.kube/config
+      - kubectl apply -f midrandbooks.yml
+
+depends_on:
+  - uat
+
+trigger:
+  event: [ promote ]
+  target: [ production ]

.editorconfig

@@ -0,0 +1,248 @@
+# Remove the line below if you want to inherit .editorconfig settings from higher directories
+root = true
+
+# C# files
+[*.cs]
+
+#### Core EditorConfig Options ####
+
+# Indentation and spacing
+indent_size = 4
+indent_style = space
+tab_width = 4
+
+# New line preferences
+end_of_line = crlf
+insert_final_newline = false
+
+#### .NET Code Actions ####
+
+# Type members
+dotnet_hide_advanced_members = false
+dotnet_member_insertion_location = with_other_members_of_the_same_kind
+dotnet_property_generation_behavior = prefer_throwing_properties
+
+# Symbol search
+dotnet_search_reference_assemblies = true
+
+#### .NET Coding Conventions ####
+
+# Organize usings
+dotnet_separate_import_directive_groups = false
+dotnet_sort_system_directives_first = false
+file_header_template = unset
+
+# this. and Me. preferences
+dotnet_style_qualification_for_event = false
+dotnet_style_qualification_for_field = false
+dotnet_style_qualification_for_method = false
+dotnet_style_qualification_for_property = false
+
+# Language keywords vs BCL types preferences
+dotnet_style_predefined_type_for_locals_parameters_members = true
+dotnet_style_predefined_type_for_member_access = true
+
+# Parentheses preferences
+dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity
+dotnet_style_parentheses_in_other_binary_operators = always_for_clarity
+dotnet_style_parentheses_in_other_operators = never_if_unnecessary
+dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity
+
+# Modifier preferences
+dotnet_style_require_accessibility_modifiers = for_non_interface_members
+
+# Expression-level preferences
+dotnet_prefer_system_hash_code = true
+dotnet_style_coalesce_expression = true
+dotnet_style_collection_initializer = true
+dotnet_style_explicit_tuple_names = true
+dotnet_style_namespace_match_folder = true
+dotnet_style_null_propagation = true
+dotnet_style_object_initializer = true
+dotnet_style_operator_placement_when_wrapping = beginning_of_line
+dotnet_style_prefer_auto_properties = true
+dotnet_style_prefer_collection_expression = when_types_loosely_match
+dotnet_style_prefer_compound_assignment = true
+dotnet_style_prefer_conditional_expression_over_assignment = true
+dotnet_style_prefer_conditional_expression_over_return = true
+dotnet_style_prefer_foreach_explicit_cast_in_source = when_strongly_typed
+dotnet_style_prefer_inferred_anonymous_type_member_names = true
+dotnet_style_prefer_inferred_tuple_names = true
+dotnet_style_prefer_is_null_check_over_reference_equality_method = true
+dotnet_style_prefer_non_hidden_explicit_cast_in_source = true
+dotnet_style_prefer_simplified_boolean_expressions = true
+dotnet_style_prefer_simplified_interpolation = true
+
+# Field preferences
+dotnet_style_readonly_field = true
+
+# Parameter preferences
+dotnet_code_quality_unused_parameters = all
+
+# Suppression preferences
+dotnet_remove_unnecessary_suppression_exclusions = none
+
+# New line preferences
+dotnet_style_allow_multiple_blank_lines_experimental = true
+dotnet_style_allow_statement_immediately_after_block_experimental = true
+
+#### C# Coding Conventions ####
+
+# var preferences
+csharp_style_var_elsewhere = false
+csharp_style_var_for_built_in_types = false
+csharp_style_var_when_type_is_apparent = false
+
+# Expression-bodied members
+csharp_style_expression_bodied_accessors = true
+csharp_style_expression_bodied_constructors = false
+csharp_style_expression_bodied_indexers = true
+csharp_style_expression_bodied_lambdas = true
+csharp_style_expression_bodied_local_functions = true
+csharp_style_expression_bodied_methods = false
+csharp_style_expression_bodied_operators = false
+csharp_style_expression_bodied_properties = true
+
+# Pattern matching preferences
+csharp_style_pattern_matching_over_as_with_null_check = true
+csharp_style_pattern_matching_over_is_with_cast_check = true
+csharp_style_prefer_extended_property_pattern = true
+csharp_style_prefer_not_pattern = true
+csharp_style_prefer_pattern_matching = true
+csharp_style_prefer_switch_expression = true
+
+# Null-checking preferences
+csharp_style_conditional_delegate_call = true
+
+# Modifier preferences
+csharp_prefer_static_anonymous_function = true
+csharp_prefer_static_local_function = true
+csharp_preferred_modifier_order = public,private,protected,internal,file,static,extern,new,virtual,abstract,sealed,override,readonly,unsafe,required,volatile,async
+csharp_style_prefer_readonly_struct = true
+csharp_style_prefer_readonly_struct_member = true
+
+# Code-block preferences
+csharp_prefer_braces = true
+csharp_prefer_simple_using_statement = true
+csharp_prefer_system_threading_lock = true
+csharp_style_namespace_declarations = block_scoped
+csharp_style_prefer_method_group_conversion = true
+csharp_style_prefer_primary_constructors = true
+csharp_style_prefer_simple_property_accessors = true
+csharp_style_prefer_top_level_statements = true
+
+# Expression-level preferences
+csharp_prefer_simple_default_expression = true
+csharp_style_deconstructed_variable_declaration = true
+csharp_style_implicit_object_creation_when_type_is_apparent = true
+csharp_style_inlined_variable_declaration = true
+csharp_style_prefer_implicitly_typed_lambda_expression = true
+csharp_style_prefer_index_operator = true
+csharp_style_prefer_local_over_anonymous_function = true
+csharp_style_prefer_null_check_over_type_check = true
+csharp_style_prefer_range_operator = true
+csharp_style_prefer_tuple_swap = true
+csharp_style_prefer_unbound_generic_type_in_nameof = true
+csharp_style_prefer_utf8_string_literals = true
+csharp_style_throw_expression = true
+csharp_style_unused_value_assignment_preference = discard_variable
+csharp_style_unused_value_expression_statement_preference = discard_variable
+
+# 'using' directive preferences
+csharp_using_directive_placement = outside_namespace
+
+# New line preferences
+csharp_style_allow_blank_line_after_colon_in_constructor_initializer_experimental = true
+csharp_style_allow_blank_line_after_token_in_arrow_expression_clause_experimental = true
+csharp_style_allow_blank_line_after_token_in_conditional_expression_experimental = true
+csharp_style_allow_blank_lines_between_consecutive_braces_experimental = true
+csharp_style_allow_embedded_statements_on_same_line_experimental = true
+
+#### C# Formatting Rules ####
+
+# New line preferences
+csharp_new_line_before_catch = true
+csharp_new_line_before_else = true
+csharp_new_line_before_finally = true
+csharp_new_line_before_members_in_anonymous_types = true
+csharp_new_line_before_members_in_object_initializers = true
+csharp_new_line_before_open_brace = all
+csharp_new_line_between_query_expression_clauses = true
+
+# Indentation preferences
+csharp_indent_block_contents = true
+csharp_indent_braces = false
+csharp_indent_case_contents = true
+csharp_indent_case_contents_when_block = true
+csharp_indent_labels = one_less_than_current
+csharp_indent_switch_labels = true
+
+# Space preferences
+csharp_space_after_cast = false
+csharp_space_after_colon_in_inheritance_clause = true
+csharp_space_after_comma = true
+csharp_space_after_dot = false
+csharp_space_after_keywords_in_control_flow_statements = true
+csharp_space_after_semicolon_in_for_statement = true
+csharp_space_around_binary_operators = before_and_after
+csharp_space_around_declaration_statements = false
+csharp_space_before_colon_in_inheritance_clause = true
+csharp_space_before_comma = false
+csharp_space_before_dot = false
+csharp_space_before_open_square_brackets = false
+csharp_space_before_semicolon_in_for_statement = false
+csharp_space_between_empty_square_brackets = false
+csharp_space_between_method_call_empty_parameter_list_parentheses = false
+csharp_space_between_method_call_name_and_opening_parenthesis = false
+csharp_space_between_method_call_parameter_list_parentheses = false
+csharp_space_between_method_declaration_empty_parameter_list_parentheses = false
+csharp_space_between_method_declaration_name_and_open_parenthesis = false
+csharp_space_between_method_declaration_parameter_list_parentheses = false
+csharp_space_between_parentheses = false
+csharp_space_between_square_brackets = false
+
+# Wrapping preferences
+csharp_preserve_single_line_blocks = true
+csharp_preserve_single_line_statements = true
+
+#### Naming styles ####
+
+# Naming rules
+
+dotnet_naming_rule.interface_should_be_begins_with_i.severity = suggestion
+dotnet_naming_rule.interface_should_be_begins_with_i.symbols = interface
+dotnet_naming_rule.interface_should_be_begins_with_i.style = begins_with_i
+
+dotnet_naming_rule.types_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.types_should_be_pascal_case.symbols = types
+dotnet_naming_rule.types_should_be_pascal_case.style = pascal_case
+
+dotnet_naming_rule.non_field_members_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.non_field_members_should_be_pascal_case.symbols = non_field_members
+dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case
+
+# Symbol specifications
+
+dotnet_naming_symbols.interface.applicable_kinds = interface
+dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.interface.required_modifiers = 
+
+dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum
+dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.types.required_modifiers = 
+
+dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method
+dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
+dotnet_naming_symbols.non_field_members.required_modifiers = 
+
+# Naming styles
+
+dotnet_naming_style.pascal_case.required_prefix = 
+dotnet_naming_style.pascal_case.required_suffix = 
+dotnet_naming_style.pascal_case.word_separator = 
+dotnet_naming_style.pascal_case.capitalization = pascal_case
+
+dotnet_naming_style.begins_with_i.required_prefix = I
+dotnet_naming_style.begins_with_i.required_suffix = 
+dotnet_naming_style.begins_with_i.word_separator = 
+dotnet_naming_style.begins_with_i.capitalization = pascal_case

.filenesting.json

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "dependentFileProviders": {
+    "add": {
+      "addedExtension": {},
+      "extensionToExtension": {
+        "add": {
+          ".css": [ ".razor" ],
+          ".cs": [ ".razor" ]
+        }
+      }
+    }
+  }
+}

Dockerfile

@@ -0,0 +1,18 @@
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
+WORKDIR /app
+
+COPY ["nuget.config", "./"]
+COPY ["MidrandBookshop/MidrandBookshop.csproj", "MidrandBookshop/"]
+RUN dotnet restore "MidrandBookshop/MidrandBookshop.csproj" --configfile nuget.config
+COPY . .
+RUN dotnet publish "MidrandBookshop/MidrandBookshop.csproj" -c Release -o /app/publish /p:UseAppHost=false
+
+FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS final
+WORKDIR /app
+
+EXPOSE 8080
+EXPOSE 8081
+
+COPY --from=build /app/publish .
+
+ENTRYPOINT ["dotnet", "MidrandBookshop.dll"]

LICENSE

@@ -0,0 +1,18 @@
+PROPRIETARY LICENSE
+
+Copyright (c) 2026 Lite Charms (PTY) Ltd. All rights reserved.
+
+This software and its associated documentation (the "Software") are the 
+proprietary property of Lite Charms (PTY) Ltd. 
+
+The Software is provided for internal use only. Unauthorized copying, 
+distribution, modification, or use of this file via any medium is 
+strictly prohibited.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

MidrandBooks.slnx

@@ -1,3 +1,9 @@
 <Solution>
+  <Folder Name="/Solution Items/">
+    <File Path=".drone.yml" />
+    <File Path="Dockerfile" />
+    <File Path="midrandbooks-uat.yml" />
+    <File Path="README.md" />
+  </Folder>
   <Project Path="MidrandBookshop/MidrandBookshop.csproj" />
 </Solution>

MidrandBookshop/Components/App.razor

@@ -6,18 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
     <ResourcePreloader />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
     <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["MidrandBookshop.styles.css"]" />
     <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
-    <HeadOutlet />
+    <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 
 <body>
-    <Routes />
+    <Routes @rendermode="InteractiveServer" />
     <ReconnectModal />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
 </body>
 
 </html>

MidrandBookshop/Components/BookCard.razor

@@ -0,0 +1,64 @@
+<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
+    <div class="d-flex flex-column h-100 justify-content-between">
+
+        <div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
+             style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
+             @onclick="OnCardClick">
+
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                @if (IsNew)
+                {
+                    <span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
+                }
+                else
+                {
+                    <div></div>
+                }
+                <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
+                        <line x1="7" y1="17" x2="17" y2="7" />
+                        <polyline points="7,7 17,7 17,17" />
+                    </svg>
+                </button>
+            </div>
+
+            <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
+                @if (!string.IsNullOrWhiteSpace(BookImageUrl))
+                {
+                    <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+                }
+                else
+                {
+                    <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
+                         style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
+                        <div style="max-width: 100%; overflow: hidden; word-break: break-word;">
+                            @Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
+                        </div>
+                    </div>
+                }
+            </div>
+
+        </div>
+
+        <div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
+            <div style="max-width: 72%;">
+                <span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
+                <span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
+            </div>
+            <span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
+        </div>
+
+    </div>
+</div>
+
+@code {
+    [Parameter] public long Id { get; set; }
+    [Parameter] public string Title { get; set; } = string.Empty;
+    [Parameter] public string Author { get; set; } = string.Empty;
+    [Parameter] public decimal Price { get; set; }
+    [Parameter] public string Category { get; set; } = string.Empty;
+    [Parameter] public bool IsNew { get; set; }
+    [Parameter] public string BookImageUrl { get; set; } = string.Empty;
+
+    [Parameter] public EventCallback OnCardClick { get; set; }
+}

MidrandBookshop/Components/BookCard.razor.css

@@ -0,0 +1,9 @@
+.book-shadow {
+    filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.sm-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+}

MidrandBookshop/Components/Layout/MainLayout.razor

@@ -1,23 +1,245 @@
 @inherits LayoutComponentBase
+@inject NavigationManager Navigation
 
-<div class="page">
+<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
-    <div class="sidebar">
+    <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
-        <NavMenu />
+    <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
+        <div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
+            <h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
+                YOUR CART (@CartItems.Sum(i => i.Quantity))
+            </h5>
+            <button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
         </div>
 
-    <main>
+        <div class="cart-body flex-grow-1 overflow-y-auto p-4">
-        <div class="top-row px-4">
+            @if (!CartItems.Any())
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+            {
+                <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
+                    <svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
+                    </svg>
+                    <span class="small tracking-wide">Your collection is empty.</span>
+                </div>
+            }
+            else
+            {
+                <div class="d-flex flex-column gap-4">
+                    @foreach (var item in CartItems)
+                    {
+                        <div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
+                            <div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
+                                [ COVER ]
+                            </div>
+                            <div class="flex-grow-1">
+                                <h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
+                                <p class="text-muted xx-small mb-2">by @item.Author</p>
+                                <div class="d-flex align-items-center justify-content-between">
+                                    <div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
+                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
+                                        <span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
+                                        <button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
+                                    </div>
+                                    <span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
+                                </div>
+                            </div>
+                            <button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                            </button>
+                        </div>
+                    }
+                </div>
+            }
         </div>
 
-        <article class="content px-4">
+        @if (CartItems.Any())
+        {
+            <div class="cart-footer p-4 bg-light border-top mt-auto">
+                <div class="d-flex align-items-center justify-content-between mb-4">
+                    <span class="text-secondary small fw-medium tracking-wider">TOTAL DUE</span>
+                    <span class="text-dark h5 fw-bold mb-0">R @GetCartTotal()</span>
+                </div>
+                <div class="d-flex flex-column gap-2">
+                    <button class="btn btn-dark w-100 rounded-pill py-2.5 fw-medium shadow-sm small tracking-wide" @onclick="RedirectToCheckout" type="button">
+                        Proceed to Checkout
+                    </button>
+                    <button class="btn btn-outline-dark w-100 rounded-pill py-2.5 fw-medium bg-white small tracking-wide" @onclick="RedirectToCart" type="button">
+                        Go to Cart Page
+                    </button>
+                </div>
+            </div>
+        }
+    </div>
+
+    <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
+        <div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
+            <svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
+                <circle cx="100" cy="100" r="92" stroke="#1A1A1A" stroke-width="0.4" />
+                <circle cx="100" cy="100" r="86" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="2 1" />
+                <circle cx="100" cy="100" r="80" stroke="#1A1A1A" stroke-width="0.3" />
+                <path d="M100 20 A80 80 0 0 1 180 100 A80 80 0 0 1 100 180 A80 80 0 0 1 20 100 A80 80 0 0 1 100 20" stroke="#1A1A1A" stroke-width="0.15" />
+                <path d="M100 20 A80 80 0 0 0 180 100 A80 80 0 0 0 100 180 A80 80 0 0 0 20 100 A80 80 0 0 0 100 20" stroke="#1A1A1A" stroke-width="0.15" />
+                <line x1="40" y1="100" x2="160" y2="100" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
+                <line x1="100" y1="40" x2="100" y2="160" stroke="#1A1A1A" stroke-width="0.2" stroke-dasharray="1 4" />
+                <g transform="translate(65, 82)" stroke="#1A1A1A" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
+                    <path d="M16 18 C 16 10, 24 10, 24 18" stroke-width="0.5" />
+                    <line x1="20" y1="10" x2="20" y2="4" />
+                    <path d="M28 18 C 28 14, 34 14, 34 18" stroke-width="0.5" />
+                    <line x1="31" y1="14" x2="31" y2="7" />
+                    <rect x="3" y="8" width="5" height="10" stroke-width="0.5" />
+                    <rect x="11" y="5" width="5" height="13" stroke-width="0.5" />
+                    <rect x="38" y="3" width="7" height="15" stroke-width="0.5" />
+                    <polygon points="38,3 41.5,0 45,3" stroke-width="0.4" />
+                    <rect x="49" y="9" width="6" height="9" stroke-width="0.5" />
+                    <line x1="0" y1="18" x2="70" y2="18" stroke-width="0.75" />
+                </g>
+            </svg>
+        </div>
+
+        <nav class="navbar navbar-expand-lg py-3" 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">
+                        <path d="M12 17c-2.5 0-4.5-1.8-4.5-4s2-4 4.5-4 4.5 1.8 4.5 4-2 4-4.5 4Z" />
+                        <path d="M12 9c2.2 0 4-1.6 4-3.5S14.2 2 12 2 8 3.6 8 5.5 9.8 9 12 9Z" />
+                        <path d="M2 12h20" stroke-width="1" stroke-dasharray="1 2" opacity="0.5" />
+                    </svg>
+                    <span class="fw-bold tracking-tight text-dark" style="font-size: 0.65rem; letter-spacing: 0.8px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
+                </a>
+
+                <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
+                    <div class="nav-pill-wrapper d-flex align-items-center">
+                        <a class="nav-pill-link active" href="/">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>
+                            Books
+                        </a>
+                        <a class="nav-pill-link" href="/audiobooks">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6" /><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" /></svg>
+                            Audiobooks
+                        </a>
+                        <a class="nav-pill-link" href="/ebooks">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12.01" y2="18" /></svg>
+                            E-Books
+                        </a>
+                    </div>
+                </div>
+
+                <div class="d-flex align-items-center gap-2 position-relative">
+                    <div class="search-input-container d-flex align-items-center @(IsSearchActive ? "is-active" : "")">
+                        <input type="text"
+                               class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
+                               placeholder="Search by ISBN, Author, Title..."
+                               @bind="SearchInputBuffer"
+                               @bind:event="oninput"
+                               @onkeydown="HandleSearchKeyDown" />
+                    </div>
+
+                    <button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
+                            @onclick="ToggleGlobalSearch"
+                            type="button"
+                            aria-label="Toggle Search">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                    </button>
+
+                    <button class="btn d-flex align-items-center justify-content-center p-2 position-relative border-0"
+                            style="background: transparent; color: #1A1A1A; width: 36px; height: 36px;"
+                            @onclick="ToggleCart"
+                            type="button">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
+                        </svg>
+                        @if (CartItems.Any())
+                        {
+                            <span class="cart-badge">@CartItems.Sum(i => i.Quantity)</span>
+                        }
+                    </button>
+
+                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                            <circle cx="12" cy="7" r="4" />
+                        </svg>
+                        Account
+                    </a>
+
+                    <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
+                       style="width: 32px; height: 32px;"
+                       aria-label="Log In">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                            <circle cx="12" cy="7" r="4" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
+        <main class="position-relative" style="z-index: 5;">
+            <CascadingValue Value="GlobalSearchQuery">
                 @Body
-        </article>
+            </CascadingValue>
         </main>
+
+        <footer class="custom-site-footer border-top mt-auto">
+            <div class="container-fluid px-md-5">
+                <div class="row g-4 pb-4 justify-content-between footer-content-section">
+                    <div class="col-12 col-md-5">
+                        <span class="footer-brand-title d-block mb-2">MIDRAND BOOKS</span>
+                        <p class="footer-desc mb-3">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
+                        <div class="d-flex flex-column gap-2">
+                            <a href="mailto:info@midrandbooks.co.za" class="footer-contact-link">
+                                <svg width="12" height="12" 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@midrandbooks.co.za
+                            </a>
+                            <a href="tel:+27872650198" class="footer-contact-link">
+                                <svg width="12" height="12" 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 9463
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-6 col-lg-5 text-start">
+                        <div class="row row-cols-2 justify-content-md-end g-3">
+                            <div style="max-width: 160px;">
+                                <span class="footer-section-heading d-block mb-2">PLATFORM</span>
+                                <ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
+                                    <li><a href="/about" class="footer-nav-link">About Us</a></li>
+                                    <li><a href="/" class="footer-nav-link">Browse Catalog</a></li>
+                                    <li><a href="/contact" class="footer-nav-link">Contact Us</a></li>
+                                </ul>
+                            </div>
+                            <div style="max-width: 210px;">
+                                <span class="footer-section-heading d-block mb-2">ENTERPRISE</span>
+                                <ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
+                                    <li class="footer-meta-item d-flex align-items-center gap-1.5">
+                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
+                                        Lite Charms (PTY) Ltd
+                                    </li>
+                                    <li><a href="/terms" class="footer-nav-link">Terms & Conditions</a></li>
+                                    <li><a href="/privacy" class="footer-nav-link">Privacy Policy</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row align-items-center pt-3 footer-copyright-section">
+                    <div class="col-12 text-center text-md-start">
+                        <span class="footer-copyright">
+                            &copy; @DateTime.Now.Year Midrand Books. All rights reserved.
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
 </div>
 
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -0,0 +1,131 @@
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.WebUtilities;
+
+namespace MidrandBookshop.Components.Layout;
+
+public partial class MainLayout : IDisposable
+{
+    private string SearchInputBuffer { get; set; } = string.Empty;
+    private string GlobalSearchQuery { get; set; } = string.Empty;
+    private bool IsSearchActive { get; set; } = false;
+    private bool IsCartOpen { get; set; } = false;
+
+    private List<CartItem> CartItems = new()
+    {
+        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
+        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
+        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
+    };
+
+    protected override void OnInitialized()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+
+        SyncSearchQueryFromUrl();
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        SyncSearchQueryFromUrl();
+        StateHasChanged();
+    }
+
+    private void SyncSearchQueryFromUrl()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
+        {
+            GlobalSearchQuery = queryVal.ToString();
+            SearchInputBuffer = GlobalSearchQuery;
+            IsSearchActive = true;
+        }
+        else
+        {
+            GlobalSearchQuery = string.Empty;
+            SearchInputBuffer = string.Empty;
+            IsSearchActive = false;
+        }
+    }
+
+    private void ToggleGlobalSearch()
+    {
+        if (!IsSearchActive)
+            IsSearchActive = true;
+        else
+            CommitSearchNavigation();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") CommitSearchNavigation();
+    }
+
+    private void CommitSearchNavigation()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        var newRouteParams = new Dictionary<string, object?>();
+
+        foreach (var param in queryParameters)
+        {
+            if (param.Key != "q")
+            {
+                newRouteParams[param.Key] = param.Value.ToString();
+            }
+        }
+
+        if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
+            newRouteParams["q"] = SearchInputBuffer.Trim();
+        else
+            newRouteParams["q"] = null;
+
+        var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
+        var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
+    private void ToggleCart() => IsCartOpen = !IsCartOpen;
+
+    private void ChangeQuantity(CartItem item, int delta)
+    {
+        item.Quantity += delta;
+        if (item.Quantity <= 0)
+        {
+            CartItems.Remove(item);
+        }
+    }
+
+    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
+
+    private void RedirectToCart()
+    {
+        IsCartOpen = false;
+        Navigation.NavigateTo("/cart");
+    }
+
+    private void RedirectToCheckout()
+    {
+        IsCartOpen = false;
+        Navigation.NavigateTo("/checkout");
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnLocationChanged;
+    }
+
+    public class CartItem
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public int Price { get; set; }
+        public int Quantity { get; set; }
+    }
+}

MidrandBookshop/Components/Layout/MainLayout.razor.css

@@ -1,98 +1,193 @@
-.page {
+.sticky-top {
-    position: relative;
+    position: -webkit-sticky !important;
-    display: flex;
+    position: sticky !important;
-    flex-direction: column;
+    top: 0 !important;
+    z-index: 1000 !important;
 }
 
-main {
+.cart-overlay {
-    flex: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 1040;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.sidebar {
+    .cart-overlay.is-visible {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+.cart-drawer {
+    position: fixed;
+    top: 0;
+    right: -420px;
+    width: 100%;
+    max-width: 400px;
+    height: 100vh;
+    z-index: 1050;
+    pointer-events: none;
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.top-row {
+    .cart-drawer.is-open {
-    background-color: #f7f7f7;
+        transform: translateX(-420px);
-    border-bottom: 1px solid #d6d5d5;
+        pointer-events: auto;
-    justify-content: flex-end;
+    }
-    height: 3.5rem;
+
+.cart-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background-color: #1A1A1A;
+    color: #FFF;
+    font-size: 0.62rem;
+    font-weight: 700;
+    border-radius: 50%;
+    width: 15px;
+    height: 15px;
     display: flex;
     align-items: center;
+    justify-content: center;
+    pointer-events: none;
 }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
+.xx-small {
-        white-space: nowrap;
+    font-size: 0.68rem;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
 }
 
-@media (min-width: 641px) {
+.border-bottom-dashed {
-    .page {
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
 }
 
-#blazor-error-ui {
+.quantity-picker {
-    color-scheme: light only;
+    padding: 2px 4px;
-    background: lightyellow;
+}
-    bottom: 0;
+
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    .quantity-picker button {
-    box-sizing: border-box;
+        font-size: 0.85rem;
-    display: none;
+        font-weight: 600;
-    left: 0;
+        line-height: 1;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    }
-    position: fixed;
+
+        .quantity-picker button:hover {
+            background-color: rgba(0,0,0,0.05);
+            border-radius: 50%;
+        }
+
+.custom-site-footer {
     width: 100%;
-    z-index: 1000;
+    position: relative;
+    z-index: 10;
+    background-color: #1A1A1A !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+    padding: 3rem 0 2rem 0;
 }
 
-    #blazor-error-ui .dismiss {
+.footer-content-section {
-        cursor: pointer;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
-        position: absolute;
+}
-        right: 0.75rem;
+
-        top: 0.5rem;
+.footer-brand-title {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: #FFFFFF !important;
+}
+
+.footer-desc {
+    font-size: 0.8rem;
+    line-height: 1.6;
+    max-width: 360px;
+    color: #A0AEC0 !important;
+}
+
+.footer-contact-link {
+    text-decoration: none;
+    font-size: 0.8rem;
+    color: #A0AEC0 !important;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: color 0.2s ease;
+}
+
+    .footer-contact-link:hover {
+        color: #FFFFFF !important;
     }
+
+.footer-section-heading {
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 1.2px;
+    color: #FFFFFF !important;
+}
+
+.footer-nav-link {
+    text-decoration: none;
+    font-size: 0.8rem;
+    color: #A0AEC0 !important;
+    transition: color 0.2s ease;
+}
+
+    .footer-nav-link:hover {
+        color: #FFFFFF !important;
+    }
+
+.footer-meta-item {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #FFFFFF !important;
+}
+
+.footer-copyright-section {
+    color: #718096 !important;
+}
+
+.footer-copyright {
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+}
+
+.btn-back-to-top {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    width: 42px !important;
+    min-width: 42px !important;
+    max-width: 42px !important;
+    height: 42px !important;
+    border-radius: 50% !important;
+    background-color: #1A1A1A;
+    color: #FFFFFF;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1010;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+    .btn-back-to-top:hover {
+        background-color: #333333;
+        transform: translateY(-2px);
+    }
+
+    .btn-back-to-top:active {
+        transform: translateY(0);
+    }
+
+.scroll-container {
+    scroll-behavior: smooth;
+}

MidrandBookshop/Components/Layout/NavMenu.razor

@@ -1,30 +0,0 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">MidrandBookshop</a>
-    </div>
-</div>
-
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="nav flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
-</div>
-

MidrandBookshop/Components/Layout/NavMenu.razor.css

@@ -1,105 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    min-height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}

MidrandBookshop/Components/Pages/Cart.razor

@@ -0,0 +1,106 @@
+@page "/cart"
+
+<div class="container py-5" style="max-width: 900px;">
+    <div class="d-flex align-items-center justify-content-between mb-5">
+        <h2 class="fw-bold m-0">Your Cart</h2>
+        <a href="/" class="text-dark text-decoration-none small fw-bold tracking-widest">CONTINUE SHOPPING</a>
+    </div>
+
+    @if (!CartItems.Any())
+    {
+        <div class="text-center py-5 border rounded-3 bg-white">
+            <p class="text-muted mb-4">Your collection is currently empty.</p>
+            <a href="/" class="btn btn-dark rounded-pill px-4">Browse Catalog</a>
+        </div>
+    }
+    else
+    {
+        <div class="card border-0 shadow-sm p-4 mb-4">
+            @foreach (var item in CartItems)
+            {
+                <div class="row align-items-center py-4 @(item != CartItems.Last() ? "border-bottom" : "")">
+                    <!-- Item Detail -->
+                    <div class="col-12 col-md-6 d-flex align-items-center gap-4">
+                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 70px; height: 95px;">
+                            <span class="text-muted" style="font-size: 0.5rem;">[COVER]</span>
+                        </div>
+                        <div>
+                            <h5 class="fw-bold mb-1">@item.Title</h5>
+                            <p class="text-muted small mb-0">by @item.Author</p>
+                        </div>
+                    </div>
+
+                    <!-- Quantity -->
+                    <div class="col-6 col-md-3 d-flex justify-content-center">
+                        <div class="d-flex align-items-center border rounded-pill bg-light px-2">
+                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, -1)">-</button>
+                            <span class="px-3 fw-bold">@item.Quantity</span>
+                            <button class="btn btn-sm border-0 text-dark" @onclick="() => ChangeQuantity(item, 1)">+</button>
+                        </div>
+                    </div>
+
+                    <!-- Price & Remove -->
+                    <div class="col-6 col-md-3 text-end d-flex align-items-center justify-content-end gap-3">
+                        <span class="fw-bold">R @(item.Price * item.Quantity)</span>
+                        <button class="btn btn-sm p-1 text-muted" @onclick="() => RemoveFromCart(item)">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+
+        <!-- Cart Totals Section -->
+        <div class="row justify-content-end">
+            <div class="col-md-5">
+                <div class="bg-white p-4 rounded-3 border">
+                    <div class="d-flex justify-content-between mb-3">
+                        <span class="text-muted">Subtotal</span>
+                        <span class="fw-bold">R @Subtotal.ToString("F2")</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-4">
+                        <span class="text-muted">VAT (15%)</span>
+                        <span class="fw-bold">R @VatAmount.ToString("F2")</span>
+                    </div>
+                    <hr />
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <span class="fw-bold h5 mb-0">Total</span>
+                        <span class="fw-bold h4 mb-0">R @Total.ToString("F2")</span>
+                    </div>
+                    <a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3">Proceed to Checkout</a>
+                </div>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    public class CartItem
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public int Price { get; set; }
+        public int Quantity { get; set; }
+    }
+
+    private List<CartItem> CartItems = new()
+    {
+        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
+        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
+        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
+    };
+
+    // Computed Properties for Calculations
+    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
+    private decimal VatAmount => Subtotal * 0.15m;
+    private decimal Total => Subtotal + VatAmount;
+
+    private void ChangeQuantity(CartItem item, int delta)
+    {
+        item.Quantity += delta;
+        if (item.Quantity <= 0) CartItems.Remove(item);
+    }
+
+    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+}

MidrandBookshop/Components/Pages/Checkout.razor

@@ -0,0 +1,110 @@
+@page "/checkout"
+@inject NavigationManager Navigation
+
+<div class="container py-5">
+    <h2 class="fw-bold mb-4">Checkout</h2>
+    <div class="row g-5">
+
+        <!-- LEFT COLUMN: SHIPPING & CART -->
+        <div class="col-lg-8">
+            <!-- 1. Cart Items -->
+            <div class="card border-0 shadow-sm p-4 mb-4">
+                <h5 class="fw-bold mb-3">Your Items</h5>
+                @foreach (var item in CartItems)
+                {
+                    <div class="d-flex align-items-center justify-content-between pb-3 border-bottom mb-3">
+                        <div><h6 class="mb-0">@item.Title</h6><small class="text-muted">@item.Author</small></div>
+                        <div class="d-flex align-items-center gap-3">
+                            <div class="d-flex border rounded-pill">
+                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, -1)">-</button>
+                                <span class="px-2 pt-1">@item.Quantity</span>
+                                <button class="btn btn-sm px-2" @onclick="() => ChangeQuantity(item, 1)">+</button>
+                            </div>
+                            <button class="btn btn-sm text-danger" @onclick="() => RemoveFromCart(item)">Remove</button>
+                        </div>
+                    </div>
+                }
+            </div>
+
+            <!-- 2. Shipping Options -->
+            <div class="card border-0 shadow-sm p-4 mb-4">
+                <h5 class="fw-bold mb-3">Shipping Method</h5>
+                <div class="form-check mb-2">
+                    <input class="form-check-input" type="radio" name="shipping" id="pickup"
+                           checked=@(ShippingCost == 0) @onclick="() => ShippingCost = 0">
+                    <label class="form-check-label" for="pickup">Pickup from Bookshop (Free)</label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" name="shipping" id="delivery"
+                           checked=@(ShippingCost == 60) @onclick="() => ShippingCost = 60">
+                    <label class="form-check-label" for="delivery">Home Delivery (R60.00)</label>
+                </div>
+            </div>
+
+            <!-- 3. Address Fields -->
+            <div class="card border-0 shadow-sm p-4">
+                <h5 class="fw-bold mb-3">Shipping Address</h5>
+                <div class="form-check mb-3">
+                    <input class="form-check-input" type="checkbox" id="sameAsBilling" @bind="IsSameAddress">
+                    <label class="form-check-label" for="sameAsBilling">Billing address same as shipping</label>
+                </div>
+                <!-- Add text inputs for address here, show/hide based on IsSameAddress -->
+            </div>
+        </div>
+
+        <!-- RIGHT COLUMN: STICKY SUMMARY -->
+        <div class="col-lg-4">
+            <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
+                <h5 class="fw-bold mb-3">Order Summary</h5>
+                <div class="d-flex justify-content-between mb-2"><span>Subtotal</span><span>R @Subtotal.ToString("F2")</span></div>
+                <div class="d-flex justify-content-between mb-2"><span>VAT (15%)</span><span>R @VatAmount.ToString("F2")</span></div>
+                <div class="d-flex justify-content-between mb-2"><span>Shipping</span><span>R @ShippingCost.ToString("F2")</span></div>
+                <hr />
+                <div class="d-flex justify-content-between mb-4">
+                    <span class="fw-bold">Total Due</span>
+                    <h4 class="fw-bold">R @((Subtotal + VatAmount + ShippingCost).ToString("F2"))</h4>
+                </div>
+                <button class="btn btn-dark w-100 py-3 rounded-pill" @onclick="CompletePurchase">Complete Purchase</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    private decimal ShippingCost = 0;
+    private bool IsSameAddress = true;
+
+    // Calculations
+    private decimal Subtotal => CartItems.Sum(i => (decimal)i.Price * i.Quantity);
+    private decimal VatAmount => Subtotal * 0.15m;
+
+    // Assuming your CartItems list is managed via a Service or cascading parameter
+    // Here it is locally mocked for this example
+    private List<CartItem> CartItems = new()
+    {
+        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
+        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 }
+    };
+
+    private void ChangeQuantity(CartItem item, int delta)
+    {
+        item.Quantity += delta;
+        if (item.Quantity <= 0) CartItems.Remove(item);
+    }
+
+    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+    private int GetCartTotal() => CartItems.Sum(i => i.Price * i.Quantity);
+
+    public class CartItem
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = "";
+        public string Author { get; set; } = "";
+        public int Price { get; set; }
+        public int Quantity { get; set; }
+    }
+    private void CompletePurchase(MouseEventArgs args)
+    {
+        Navigation.NavigateTo("/payment-confirmation");
+    }
+}

MidrandBookshop/Components/Pages/Counter.razor

@@ -1,19 +0,0 @@
-@page "/counter"
-@rendermode InteractiveServer
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}

MidrandBookshop/Components/Pages/Error.razor

@@ -1,33 +1,46 @@
 @page "/Error"
 @using System.Diagnostics
+@inject NavigationManager Navigation
 
-<PageTitle>Error</PageTitle>
+<PageTitle>System Exception | Midrand Books</PageTitle>
 
-<h1 class="text-danger">Error.</h1>
+<div class="artistic-error-container">
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
 
-@if (ShowRequestId)
+            <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">
-    <p>
+                    <rect x="100" y="100" width="200" height="200" transform="rotate(45 200 200)" opacity="0.2" />
-        <strong>Request ID:</strong> <code>@RequestId</code>
+                    <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>
+
+            <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>
+
+                <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>
-}
 
-<h3>Development Mode</h3>
+                @if (ShowRequestId)
-<p>
+                {
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+                    <p class="font-monospace text-muted small mb-4">
-</p>
+                        Ref: <code>@RequestId</code>
-<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>
 
-@code{
+                <button class="btn btn-outline-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Library</button>
-    [CascadingParameter]
+            </div>
-    private HttpContext? HttpContext { get; set; }
+        </div>
+    </div>
+</div>
 
+@code {
+    [CascadingParameter] private HttpContext? HttpContext { get; set; }
     private string? RequestId { get; set; }
     private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
 

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;
+    }

MidrandBookshop/Components/Pages/Home.razor

@@ -1,7 +1,203 @@
 @page "/"
+@rendermode InteractiveServer
 
-<PageTitle>Home</PageTitle>
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
 
-<h1>Hello, world!</h1>
+<div class="container text-center text-hero-wrapper">
+    <h1 class="display-3 text-dark mb-3 px-2 master-headline">
+        Discover thoughtfully curated<br>books for every reader.
+    </h1>
+    <p class="text-muted mx-auto mb-0 sub-headline">
+        Explorations into books, reading culture, and the art of thoughtful curation from Midrand to the world.
+    </p>
+</div>
 
-Welcome to your new app.
+<div class="container mb-5 px-md-5">
+
+    @if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
+    {
+        <div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
+            <div class="d-flex align-items-center gap-2">
+                <span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
+                <span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
+            </div>
+            <button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
+        </div>
+    }
+
+    <div class="row align-items-center justify-content-between pb-3 g-3">
+        <div class="col-12 col-md-8">
+            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
+                @if (!AuthorId.HasValue)
+                {
+                    @foreach (var category in MainCategories)
+                    {
+                        var catName = category;
+                        <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
+                            @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
+                                @onclick="() => SelectCategory(catName)">
+                            @catName
+                        </button>
+                    }
+
+                    @if (DynamicExtendedCategories.Count > 0)
+                    {
+                        <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
+                                @onclick="ToggleExtraCategories">
+                            <span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
+                            <svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
+                        </button>
+                    }
+                }
+                else
+                {
+                    <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
+                        &larr; Return to Catalog Index
+                    </button>
+                }
+            </div>
+        </div>
+
+        <div class="col-12 col-md-4">
+            <div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
+                <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
+                        @onclick="ToggleFilterMenu">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
+                    <span>Refine Curation</span>
+                </button>
+
+                <div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
+                    </button>
+                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
+                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
+    {
+        <div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
+            <h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
+            <div class="d-flex flex-wrap gap-2">
+                @foreach (var subCategory in DynamicExtendedCategories)
+                {
+                    var subName = subCategory;
+                    <button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
+                        @(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
+                            style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
+                        #@subName
+                    </button>
+                }
+            </div>
+        </div>
+    }
+
+    @if (ShowFilterMenu)
+    {
+        <div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
+            <div class="row g-4 text-start">
+                <div class="col-12 col-sm-4">
+                    <label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
+                    <select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
+                        <option value="default">Release Timeline</option>
+                        <option value="price-low">Value: Low to High</option>
+                        <option value="price-high">Value: High to Low</option>
+                        <option value="title-asc">Alphabetical Order</option>
+                    </select>
+                </div>
+                <div class="col-12 col-sm-4">
+                    <label class="form-label small fw-semibold text-dark">Price Thresholds</label>
+                    <div class="d-flex flex-wrap gap-2">
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
+                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
+                    </div>
+                </div>
+                <div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
+                    <div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
+                        <input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
+                        <label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
+                <button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
+                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
+            </div>
+        </div>
+    }
+
+    @if (!PaginatedBooks.Any())
+    {
+        <div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
+            <svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
+            <p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
+            <span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
+        </div>
+    }
+    else if (CurrentViewMode == ViewMode.Grid)
+    {
+        <div class="row g-4 animate-fade-in">
+            @foreach (var book in PaginatedBooks)
+            {
+                <BookCard Id="@book.Id"
+                          Title="@book.Name"
+                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
+                          Price="@ProductPriceCache[book.Id]"
+                          Category="@ProductPrimaryCategoryCache[book.Id]"
+                          IsNew="@book.Enabled"
+                          BookImageUrl="@book.ImageUrl"
+                          OnCardClick="() => NavigateToProduct(book.Id)" />
+            }
+        </div>
+    }
+    else if (CurrentViewMode == ViewMode.List)
+    {
+        <div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
+            @foreach (var book in PaginatedBooks)
+            {
+                <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.Name</span>
+                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
+                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-4">
+                        @if (book.Enabled)
+                        {
+                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
+                        }
+                        <span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
+                        <button class="btn btn-link text-dark p-1">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+
+    @if (HasMoreItems)
+    {
+        <div class="d-flex flex-column align-items-center justify-content-center mt-5 pt-4">
+            <button class="btn btn-outline-dark rounded-pill px-5 py-2.5 fw-medium shadow-sm" style="font-size: 0.85rem;" @onclick="LoadNextPage">
+                <span>Show More Artifacts</span>
+            </button>
+        </div>
+    }
+</div>
+
+<a class="back-to-top-btn d-flex align-items-center justify-content-center"
+   aria-label="Back to top"
+   href="#top-target">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
+</a>

MidrandBookshop/Components/Pages/Home.razor.cs

@@ -0,0 +1,224 @@
+using LiteCharms.Features;
+using LiteCharms.Features.MidrandBooks.AuthorBooks;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Categories;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+using LiteCharms.Features.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class Home : ComponentBase
+{
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private BooksService BooksService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private CategoryService CategoryService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+
+    [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
+    [SupplyParameterFromQuery] public long? AuthorId { get; set; }
+
+    private ElementReference topTargetRef;
+    public enum ViewMode { Grid, List }
+    private ViewMode CurrentViewMode = ViewMode.Grid;
+    private string ActiveCategory = "All";
+    private bool ShowExpandedCategories = false;
+    private bool ShowFilterMenu = false;
+    private string SelectedSortOption = "default";
+    private string ActivePriceFilter = "all";
+    private bool OnlyShowNew = false;
+
+    private List<string> MainCategories { get; set; } = ["All"];
+    private List<string> DynamicExtendedCategories { get; set; } = [];
+
+    private int ItemsPerPage = 12;
+    private int VisibleCount = 12;
+
+    private List<Product> ProductsCollection { get; set; } = [];
+
+    protected string? ActiveAuthorFilterName { get; private set; }
+
+    private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
+    private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
+    private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
+
+    private IEnumerable<Product> FilteredData
+    {
+        get
+        {
+            var data = ProductsCollection.AsEnumerable();
+
+            if (ActiveCategory != "All" && !AuthorId.HasValue)
+            {
+                data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
+                    ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
+            }
+
+            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
+            {
+                var q = SharedSearchQuery.Trim();
+                data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
+            }
+
+            if (ActivePriceFilter != "all")
+            {
+                data = data.Where(p =>
+                {
+                    var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
+
+                    return ActivePriceFilter switch
+                    {
+                        "under-500" => price < 500m,
+                        "500-1000" => price >= 500m && price <= 1000m,
+                        "over-1000" => price > 1000m,
+                        _ => true
+                    };
+                });
+            }
+
+            if (OnlyShowNew) data = data.Where(p => p.Enabled);
+
+            data = SelectedSortOption switch
+            {
+                "price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
+                "default" or _ => data
+            };
+
+            return data;
+        }
+    }
+
+    private IEnumerable<Product> PaginatedBooks => FilteredData.Take(VisibleCount);
+
+    private bool HasMoreItems => FilteredData.Count() > VisibleCount;
+
+    protected override async Task OnParametersSetAsync() => await LoadCatalogDataAsync();
+
+    private async Task LoadCatalogDataAsync()
+    {
+        ProductsCollection.Clear();
+        ProductPriceCache.Clear();
+        ProductPrimaryCategoryCache.Clear();
+        ProductAuthorCache.Clear();
+        ActiveAuthorFilterName = null;
+
+        if (AuthorId.HasValue)
+        {
+            var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
+
+            if (authorResult.IsSuccess && authorResult.Value != null)
+            {
+                var author = authorResult.Value;
+
+                ActiveAuthorFilterName = author.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(author.Company)
+                    ? author.Company
+                    : $"{author.Name} {author.LastName}".Trim();
+            }
+
+            var authorBooksResult = await BooksService.GetBooksByAuthorAsync(AuthorId.Value);
+
+            if (authorBooksResult.IsSuccess && authorBooksResult.Value != null)
+            {
+                foreach (var authorBook in authorBooksResult.Value)
+                {
+                    if (authorBook.Product != null)
+                    {
+                        var product = authorBook.Product;
+
+                        ProductsCollection.Add(product);
+                        ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
+
+                        ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
+
+                        var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+
+                        ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                            ? (categoryResult.Value[0].Name ?? "General")
+                            : "General";
+                    }
+                }
+            }
+            return;
+        }
+
+        var selectionRange = new DateRange
+        {
+            From = new DateOnly(2020, 1, 1),
+            To = DateOnly.FromDateTime(DateTime.UtcNow.AddDays(1)),
+            MaxRecords = 100
+        };
+
+        var allProductsResult = await ProductService.GetProductsAsync(0, selectionRange);
+
+        if (allProductsResult.IsSuccess && allProductsResult.Value != null)
+        {
+            ProductsCollection = allProductsResult.Value.ToList();
+
+            foreach (var product in ProductsCollection)
+            {
+                var priceResult = await ProductService.GetProductPriceAsync(product.Id);
+                ProductPriceCache[product.Id] = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+
+                var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
+                ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                    ? (categoryResult.Value[0].Name ?? "General")
+                    : "General";
+
+                ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
+                    ? product.Metadata.Manufacturer
+                    : "Unknown Author";
+            }
+        }
+
+        var categoriesResult = await CategoryService.GetCategoriesAsync();
+
+        if (categoriesResult.IsSuccess && categoriesResult.Value != null)
+        {
+            var cleanNames = categoriesResult.Value
+                .Select(c => c.Name)
+                .Where(n => !string.IsNullOrEmpty(n)).Cast<string>()
+                .ToList();
+
+            MainCategories = ["All", .. cleanNames.Take(3)];
+            DynamicExtendedCategories = [.. cleanNames.Skip(3)];
+        }
+    }
+
+    private void ClearAuthorFilter()
+    {
+        var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
+
+        Navigation.NavigateTo(newUri);
+    }
+
+    private void ResetFilters()
+    {
+        SelectedSortOption = "default";
+        ActivePriceFilter = "all";
+        OnlyShowNew = false;
+        VisibleCount = ItemsPerPage;
+    }
+
+    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;
+
+        var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
+    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
+    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
+    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
+    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
+    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
+    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
+}

MidrandBookshop/Components/Pages/Home.razor.css

@@ -0,0 +1,177 @@
+/* Expanding Search Input Controls */
+.search-input-container {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+}
+
+    .search-input-container.is-active {
+        max-width: 280px;
+        opacity: 1;
+    }
+
+.custom-search-field {
+    font-size: 0.8rem;
+    height: 32px;
+    box-shadow: none !important;
+}
+
+/* Structural Layout Typography */
+.branding-logo {
+    font-size: 1.1rem;
+    letter-spacing: -0.5px;
+}
+
+.text-hero-wrapper {
+    margin-top: 5rem;
+    margin-bottom: 3.5rem;
+}
+
+.master-headline {
+    letter-spacing: -1.5px;
+    font-weight: 400;
+    line-height: 1.15;
+}
+
+.sub-headline {
+    max-width: 520px;
+    font-size: 0.95rem;
+    font-weight: 300;
+    line-height: 1.6;
+}
+
+/* Filtering Dropdown Drawer Settings */
+.filter-dropdown-panel {
+    border-radius: 12px;
+}
+
+.panel-section-heading {
+    letter-spacing: 0.5px;
+    font-size: 0.7rem;
+}
+
+.reset-link-btn {
+    font-size: 0.7rem;
+}
+
+/* Custom Minimal Separator Rule Layout */
+.custom-milled-line {
+    height: 35px;
+    margin-top: 5px;
+    margin-bottom: 25px;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.center-bloom-shadow {
+    bottom: 15px;
+    width: 55%;
+    height: 50px;
+    background: radial-gradient(ellipse at bottom, rgba(20, 20, 20, 0.07) 0%, rgba(40, 40, 40, 0.02) 60%, rgba(255, 255, 255, 0) 100%);
+    filter: blur(10px);
+}
+
+.core-horizontal-rule {
+    bottom: 15px;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
+}
+
+/* View Engine Layout Presentation Variants: Grid Cards */
+.book-grid-card {
+    background-color: #F1F1F1;
+    border-radius: 12px;
+    min-height: 380px;
+}
+
+.badge-new-arrival {
+    background-color: #E63946;
+    font-size: 0.75rem;
+}
+
+.book-spine-fallback {
+    width: 130px;
+    height: 185px;
+    font-size: 0.65rem;
+    letter-spacing: 1px;
+    border-radius: 2px;
+}
+
+.product-card-title {
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+/* View Engine Layout Presentation Variants: List Rows */
+.list-row-item {
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+    transition: background-color 0.2s ease;
+}
+
+    .list-row-item:hover {
+        background-color: rgba(0,0,0,0.01);
+    }
+
+.structural-list-left {
+    flex: 2;
+}
+
+.list-item-title {
+    font-size: 0.95rem;
+    min-width: 260px;
+}
+
+.list-item-author {
+    min-width: 160px;
+}
+
+.list-item-tag {
+    font-size: 0.65rem;
+}
+
+.list-new-badge {
+    font-size: 0.65rem;
+}
+
+.list-item-price {
+    font-size: 0.9rem;
+    min-width: 80px;
+    text-align: right;
+}
+
+/* Enable native smooth scrolling page-wide */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Back to Top Icon Layout Presentation */
+.back-to-top-btn {
+    position: fixed !important;
+    bottom: 32px;
+    right: 32px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50% !important;
+    text-decoration: none !important;
+    /* Dual-tone contrast visibility profile */
+    background-color: #ffffff !important;
+    color: #1a1a1a !important;
+    border: 2px solid #1a1a1a !important;
+    box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    z-index: 2147483647 !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+    .back-to-top-btn:hover {
+        transform: translateY(-4px);
+        background-color: #1a1a1a !important;
+        color: #ffffff !important;
+        border-color: #ffffff !important;
+        box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
+    }
+
+/* Direct the smooth scroll action straight to the layout viewport boundary */
+#top-target {
+    scroll-margin-top: 100vh;
+}

MidrandBookshop/Components/Pages/NotFound.razor

@@ -1,5 +1,35 @@
 @page "/not-found"
-@layout MainLayout
+@inject NavigationManager Navigation
 
-<h3>Not Found</h3>
+<div class="artistic-404-container">
-<p>Sorry, the content you are looking for does not exist.</p>
+    <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>

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;
+}

MidrandBookshop/Components/Pages/PaymentConfirmation.razor

@@ -0,0 +1,40 @@
+@page "/payment-confirmation"
+
+<div class="container py-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6 text-center">
+
+            <!-- Success Icon & Message -->
+            <div class="mb-4">
+                <div class="d-inline-block p-4 rounded-circle bg-success bg-opacity-10 text-success mb-3">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                    </svg>
+                </div>
+                <h1 class="fw-bold mb-3">Order Confirmed</h1>
+                <p class="text-muted fs-5">Thank you for shopping with Midrand Books. Your order has been received and is being processed.</p>
+                <div class="bg-light p-3 rounded mt-4">
+                    <p class="mb-0 text-muted small text-uppercase fw-bold">Order Number</p>
+                    <h5 class="fw-bold mb-0">#MB-2026-8834</h5>
+                </div>
+            </div>
+
+            <!-- Calls to Action -->
+            <div class="d-grid gap-3 mt-5">
+                <a href="/" class="btn btn-dark btn-lg rounded-pill py-3">Continue Shopping</a>
+                <div class="row g-3">
+                    <div class="col-6">
+                        <a href="/order-history" class="btn btn-outline-dark w-100 rounded-pill py-3">Order History</a>
+                    </div>
+                    <div class="col-6">
+                        <a href="/track-order" class="btn btn-outline-dark w-100 rounded-pill py-3">Track Order</a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Optional Trust Footer -->
+            <p class="mt-5 text-muted small">You will receive a confirmation email shortly at <strong>user@email.com</strong>.</p>
+        </div>
+    </div>
+</div>

MidrandBookshop/Components/Pages/ProductView.razor

@@ -0,0 +1,126 @@
+@page "/product/{BookId:long}"
+@rendermode InteractiveServer
+
+<div class="product-container">
+    @if (IsLoading)
+    {
+        <div class="text-center py-5">
+            <div class="spinner-border text-dark" role="status">
+                <span class="visually-hidden">Loading product details...</span>
+            </div>
+            <p class="text-muted mt-2">Loading curated details...</p>
+        </div>
+    }
+    else if (CurrentProduct == null)
+    {
+        <div class="text-center py-5 animate-fade-in">
+            <svg class="text-muted mb-3" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            <h2 class="h5 text-dark fw-medium">Artifact Not Found</h2>
+            <p class="text-muted small">The requested book could not be found in our current catalog.</p>
+            <button class="btn btn-dark btn-sm rounded-pill px-4 mt-2" @onclick='() => Navigation.NavigateTo("/")'>Return to Books</button>
+        </div>
+    }
+    else
+    {
+        <nav class="breadcrumb">
+            <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
+            <span class="crumb-separator">/</span>
+            <span class="crumb-current">@CurrentProduct.Name</span>
+        </nav>
+
+        <div class="product-layout">
+            <div class="gallery-section">
+                <div class="main-image-wrapper">
+                    @if (!string.IsNullOrWhiteSpace(ActiveImageUrl))
+                    {
+                        <img src="@ActiveImageUrl" alt="@CurrentProduct.Name" class="main-image" />
+                    }
+                    else
+                    {
+                        <div class="book-spine-fallback-large bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50 shadow-sm">
+                            <div>
+                                <span class="fw-semibold tracking-wider d-block">@PrimaryCategory.ToUpper()</span>
+                                <span class="opacity-50 small" style="font-size: 0.65rem;">CURATED EDITION</span>
+                            </div>
+                        </div>
+                    }
+
+                    <div class="format-badges">
+                        @if (CurrentProduct.Enabled)
+                        {
+                            <span class="badge badge-physical">Physical Book</span>
+                        }
+                        <span class="badge badge-ebook">In Stock</span>
+                    </div>
+                </div>
+
+                @if (Thumbnails.Count > 1)
+                {
+                    <div class="thumbnail-grid">
+                        @foreach (var img in Thumbnails)
+                        {
+                            var currentImg = img;
+                            <div class="thumbnail-wrapper @(ActiveImageUrl == currentImg ? "active" : "")"
+                                 @onclick="() => ActiveImageUrl = currentImg">
+                                <img src="@currentImg" alt="Catalog gallery 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 <= 4 ? "filled" : "")">★</span>
+                        }
+                        <span class="rating-text">(4.8)</span>
+                    </div>
+                </div>
+
+                <h1 class="product-title">@CurrentProduct.Name</h1>
+                <div class="product-price">R @LivePrice.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" />
+
+                @if (!string.IsNullOrWhiteSpace(CurrentProduct.Description))
+                {
+                    <div class="info-block">
+                        <h3>Description</h3>
+                        <p class="description-text">@CurrentProduct.Description</p>
+                    </div>
+                }
+
+                <div class="info-block author-bio-card">
+                    <h3>About the Author</h3>
+                    <p class="author-bio">
+                        @(string.IsNullOrWhiteSpace(CurrentProduct.Metadata?.Manufacturer)
+                            ? "Details regarding this publisher/author are maintained inside our curated archives."
+                            : $"{CurrentProduct.Metadata.Manufacturer} is globally recognized for their direct contribution to this specific genre spectrum.")
+                    </p>
+                    <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
+                        View all books by @AuthorName →
+                    </button>
+                </div>
+            </div>
+        </div>
+    }
+</div>

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -0,0 +1,96 @@
+using LiteCharms.Features;
+using LiteCharms.Features.MidrandBooks.Authors;
+using LiteCharms.Features.MidrandBooks.Authors.Models;
+using LiteCharms.Features.MidrandBooks.Products;
+using LiteCharms.Features.MidrandBooks.Products.Models;
+
+namespace MidrandBookshop.Components.Pages;
+
+public partial class ProductView : ComponentBase
+{
+    [Parameter] public long BookId { get; set; }
+
+    [Inject] private ProductService ProductService { get; set; } = default!;
+    [Inject] private AuthorService AuthorService { get; set; } = default!;
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
+
+    protected bool IsLoading { get; private set; } = true;
+    protected Product? CurrentProduct { get; private set; }
+    protected decimal LivePrice { get; private set; } = 0.00m;
+    protected string AuthorName { get; private set; } = "Unknown Author";
+    protected string PrimaryCategory { get; private set; } = "General";
+
+    protected string ActiveImageUrl { get; set; } = string.Empty;
+    protected List<string> Thumbnails { get; private set; } = [];
+    protected int Quantity { get; private set; } = 1;
+
+    protected Author? CurrentAuthor { get; private set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        try
+        {
+            IsLoading = true;
+            CurrentProduct = null;
+            CurrentAuthor = null;
+            Thumbnails.Clear();
+
+            var productResult = await ProductService.GetProductAsync(BookId);
+
+            if (productResult.IsSuccess && productResult.Value != null)
+            {
+                CurrentProduct = productResult.Value;
+                AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
+
+                var priceResult = await ProductService.GetProductPriceAsync(BookId);
+                LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
+
+                var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
+                if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
+                    PrimaryCategory = categoryResult.Value[0].Name ?? "General";
+
+                var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
+                if (authorResult.IsSuccess && authorResult.Value != null)
+                {
+                    CurrentAuthor = authorResult.Value;
+
+                    if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
+                        AuthorName = CurrentAuthor.Company;
+                    else
+                        AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
+                }
+
+                if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
+                    Thumbnails.Add(CurrentProduct.ImageUrl);
+
+                if (CurrentProduct.ThumbnailUrls != null && CurrentProduct.ThumbnailUrls?.Length != 0)
+                    foreach (var url in CurrentProduct.ThumbnailUrls!)
+                        if (!string.IsNullOrWhiteSpace(url) && !Thumbnails.Contains(url)) Thumbnails.Add(url);
+
+                ActiveImageUrl = Thumbnails.FirstOrDefault() ?? string.Empty;
+            }
+        }
+        catch (Exception)
+        {
+            CurrentProduct = null;
+        }
+        finally
+        {
+            IsLoading = false;
+        }
+    }
+
+    protected void IncreaseQty() => Quantity++;
+    protected void DecreaseQty() { if (Quantity > 1) Quantity--; }
+
+    protected void HandleAddToCart()
+    {
+        if (CurrentProduct == null) return;
+    }
+        
+    protected void ViewAllAuthorBooks()
+    {
+        if (CurrentAuthor is not null)
+            Navigation.NavigateTo($"/?authorId={CurrentAuthor.Id}");
+    }
+}

MidrandBookshop/Components/Pages/ProductView.razor.css

@@ -0,0 +1,379 @@
+/* ==========================================================================
+   Structural Layout Containers
+   ========================================================================== */
+.product-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+/* ==========================================================================
+   Breadcrumb Navigation Links
+   ========================================================================== */
+.breadcrumb {
+    font-size: 0.85rem;
+    margin-bottom: 2.5rem;
+    color: #8c8c8c;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.crumb-link {
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+    .crumb-link:hover {
+        color: #111;
+    }
+
+.crumb-separator {
+    margin: 0 0.5rem;
+}
+
+.crumb-current {
+    color: #111;
+    font-weight: 500;
+}
+
+/* ==========================================================================
+   Left Section: Media Gallery Components
+   ========================================================================== */
+.gallery-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+}
+
+.main-image-wrapper {
+    position: relative;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 3rem 3rem 4.5rem 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 480px;
+    width: 100%;
+}
+
+.main-image {
+    max-height: 450px;
+    max-width: 100%;
+    object-fit: contain;
+    mix-blend-mode: multiply;
+}
+
+/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
+.format-badges {
+    position: absolute !important;
+    bottom: 1.5rem !important;
+    left: 50% !important; /* Move anchor point to exactly half-width */
+    right: auto !important;
+    transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    width: max-content !important; /* Expands safely according to badges text values */
+    max-width: 90% !important; /* Keeps bounding box clean of parent borders */
+}
+
+.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;
+    display: inline-block !important;
+    white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
+}
+
+.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;
+}
+
+/* Interactive Gallery Thumbnails Grid */
+.thumbnail-grid {
+    display: flex;
+    flex-wrap: wrap;
+    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: Product Details & Typography Controls
+   ========================================================================== */
+.details-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.meta-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.author-name {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+/* Review Star Components */
+.rating-stars {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.star {
+    color: #e5e5e5;
+    font-size: 1.1rem;
+}
+
+    .star.filled {
+        color: #ffc107;
+    }
+
+.rating-text {
+    font-size: 0.85rem;
+    color: #666;
+    margin-left: 0.4rem;
+}
+
+.product-title {
+    font-size: 2.5rem;
+    font-family: 'Playfair Display', serif, Georgia;
+    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;
+}
+
+/* ==========================================================================
+   Interactive E-Commerce Selection Bars
+   ========================================================================== */
+.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 ease;
+}
+
+    .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 ease;
+    padding: 0.5rem 1.5rem;
+}
+
+    .btn-add-to-cart:hover {
+        background-color: #2a2a2a;
+    }
+
+.divider {
+    border: 0;
+    border-top: 1px solid #eee;
+    margin-bottom: 2rem;
+}
+
+/* ==========================================================================
+   Informational Text Elements & Links
+   ========================================================================== */
+.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;
+    }
+
+/* ==========================================================================
+   Responsive Adaptations & Breakpoints
+   ========================================================================== */
+@media (max-width: 992px) {
+    .product-layout {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+
+    .main-image-wrapper {
+        min-height: 380px;
+    }
+}
+
+@media (max-width: 576px) {
+    .product-container {
+        padding: 1rem 1rem;
+    }
+
+    .main-image-wrapper {
+        min-height: 320px;
+        padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
+    }
+
+    .main-image {
+        max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
+    }
+
+    .format-badges {
+        bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
+        gap: 0.4rem !important;
+    }
+
+    .badge {
+        font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
+        padding: 0.25rem 0.65rem !important;
+    }
+
+    .product-title {
+        font-size: 1.85rem;
+    }
+
+    .purchase-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .quantity-picker {
+        justify-content: space-between;
+        width: 100%;
+        padding: 0.5rem;
+    }
+
+    .btn-add-to-cart {
+        width: 100%;
+        padding: 0.85rem;
+    }
+}

MidrandBookshop/Components/Pages/Profile.razor

@@ -0,0 +1,377 @@
+@page "/profile"
+@using Microsoft.AspNetCore.Components.Authorization
+@inject NavigationManager Navigation
+@rendermode InteractiveServer
+
+<AuthorizeView>
+    <Authorized>
+        <div class="container py-5">
+            <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
+            <div class="row g-5">
+                <div class="col-md-3">
+                    <div class="nav flex-column nav-pills" role="tablist">
+                        <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
+                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
+                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
+                        <hr />
+                        <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
+                    </div>
+                </div>
+
+                <div class="col-md-9">
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="orders" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Order History</h5>
+                            </div>
+
+                            <div class="d-flex flex-column gap-3">
+                                @if (orderHistory != null)
+                                {
+                                    @foreach (var order in orderHistory)
+                                    {
+                                        <div class="card p-4 shadow-sm order-history-card">
+                                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
+
+                                                <div class="flex-grow-1 w-100">
+                                                    <div class="order-meta-track mb-2">
+                                                        <div class="meta-item-id">
+                                                            <span class="fw-bold text-dark">@order.OrderId</span>
+                                                        </div>
+                                                        <div class="meta-item-date">
+                                                            <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
+                                                        </div>
+                                                        <div class="meta-item-status">
+                                                            <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
+                                                                @order.Status
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <h6 class="mb-2">
+                                                        <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
+                                                            @order.ProductTitle
+                                                        </a>
+                                                    </h6>
+
+                                                    <div class="d-flex align-items-center text-secondary small">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
+                                                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+                                                        </svg>
+                                                        <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
+                                                    </div>
+                                                </div>
+
+                                                <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
+                                                    <div class="text-sm-end mb-sm-2">
+                                                        <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
+                                                        <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
+                                                    </div>
+
+                                                    <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                            <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
+                                                        </svg>
+                                                    </button>
+                                                </div>
+
+                                            </div>
+                                        </div>
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="card p-4 text-center text-muted">
+                                        Loading order history...
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="shipping" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Saved Addresses</h5>
+                                @if (!showAddForm && editingAddress == null)
+                                {
+                                    <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
+                                }
+                            </div>
+
+                            @if (showAddForm)
+                            {
+                                <div class="card p-4 border shadow-sm mb-4 bg-light">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <h6 class="fw-bold m-0">New Address</h6>
+                                        <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
+                                    </div>
+                                    <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
+                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="text" class="form-control" placeholder="City" @bind="newCity" />
+                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
+                                    </div>
+                                    <div class="mb-3 d-flex gap-3">
+                                        <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
+                                        <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
+                                    </div>
+                                    <div class="d-flex">
+                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
+                                    </div>
+                                </div>
+                            }
+
+                            @if (editingAddress != null)
+                            {
+                                <div class="card p-4 border shadow-sm mb-4 bg-light">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <h6 class="fw-bold m-0">Edit Address</h6>
+                                        <button type="button" class="btn-close" @onclick="CancelEditing"></button>
+                                    </div>
+                                    <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
+                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
+                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
+                                    </div>
+                                    <div class="mb-3 d-flex gap-3">
+                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
+                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
+                                    </div>
+                                    <div class="d-flex">
+                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
+                                    </div>
+                                </div>
+                            }
+
+                            @foreach (var addr in savedAddresses)
+                            {
+                                <div class="card p-4 shadow-sm mb-3 address-card">
+                                    <div class="d-flex justify-content-between align-items-start">
+                                        <div>
+                                            <h6 class="fw-bold mb-1">@addr.Name</h6>
+                                            <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
+                                            <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
+                                                @if (addr.IsBilling)
+                                                {
+                                                    <span class="badge badge-tag">[Billing]</span>
+                                                }
+                                                @if (addr.IsShipping)
+                                                {
+                                                    <span class="badge badge-tag">[Shipping]</span>
+                                                }
+                                            </div>
+                                        </div>
+
+                                        <div class="d-flex align-items-center gap-2 actions-container">
+                                            <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
+                                                <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
+                                            </label>
+
+                                            <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+                                                </svg>
+                                            </button>
+
+                                            <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+
+                        <div class="tab-pane fade" id="profile" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Profile Settings</h5>
+                            </div>
+                            <div class="card p-4 shadow-sm">
+                                <p class="text-muted mb-0">Manage your password and profile data here.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Authorized>
+    
+    <NotAuthorized>
+        <RedirectToLogin />
+    </NotAuthorized>
+</AuthorizeView>
+
+@code {
+    private bool showAddForm = false;
+    private AddressItem? editingAddress = null;
+    private string newAddressName = "";
+    private string newStreetAddress = "";
+    private string newCity = "";
+    private string newPostalCode = "";
+    private bool isBilling, isShipping;
+
+    private List<OrderItem> orderHistory = new()
+    {
+        new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
+        new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
+    };
+
+    private List<AddressItem> savedAddresses = new()
+    {
+        new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
+        new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
+        new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
+    };
+
+    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
+
+    private void DownloadInvoice(string orderId)
+    {
+        // Handle invoice downloading logic here
+    }
+
+    private void OpenAddForm()
+    {
+        editingAddress = null;
+        showAddForm = true;
+    }
+
+    private void SaveAddress()
+    {
+        if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
+        {
+            var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
+            var newItem = new AddressItem
+            {
+                Id = nextId,
+                Name = newAddressName,
+                Street = newStreetAddress,
+                City = newCity,
+                PostalCode = newPostalCode,
+                IsBilling = isBilling,
+                IsShipping = isShipping,
+                IsPrimary = !savedAddresses.Any()
+            };
+            savedAddresses.Add(newItem);
+            ResetAddForm();
+        }
+    }
+
+    private void ResetAddForm()
+    {
+        newAddressName = "";
+        newStreetAddress = "";
+        newCity = "";
+        newPostalCode = "";
+        isBilling = false;
+        isShipping = false;
+        showAddForm = false;
+    }
+
+    private void StartEditing(AddressItem addr)
+    {
+        showAddForm = false;
+        editingAddress = new AddressItem
+        {
+            Id = addr.Id,
+            Name = addr.Name,
+            Street = addr.Street,
+            City = addr.City,
+            PostalCode = addr.PostalCode,
+            IsBilling = addr.IsBilling,
+            IsShipping = addr.IsShipping,
+            IsPrimary = addr.IsPrimary
+        };
+    }
+
+    private void UpdateAddress()
+    {
+        if (editingAddress != null)
+        {
+            var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
+            if (target != null)
+            {
+                target.Name = editingAddress.Name;
+                target.Street = editingAddress.Street;
+                target.City = editingAddress.City;
+                target.PostalCode = editingAddress.PostalCode;
+                target.IsBilling = editingAddress.IsBilling;
+                target.IsShipping = editingAddress.IsShipping;
+            }
+            editingAddress = null;
+        }
+    }
+
+    private void CancelEditing()
+    {
+        editingAddress = null;
+    }
+
+    private void DeleteAddress(AddressItem addr)
+    {
+        if (editingAddress?.Id == addr.Id)
+        {
+            editingAddress = null;
+        }
+        savedAddresses.Remove(addr);
+        if (addr.IsPrimary && savedAddresses.Any())
+        {
+            savedAddresses.First().IsPrimary = true;
+        }
+    }
+
+    private void SetPrimary(AddressItem target, ChangeEventArgs e)
+    {
+        var isChecked = (bool)(e.Value ?? false);
+        if (isChecked)
+        {
+            foreach (var addr in savedAddresses)
+            {
+                addr.IsPrimary = (addr.Id == target.Id);
+            }
+        }
+        else
+        {
+            target.IsPrimary = false;
+        }
+    }
+
+    public class AddressItem
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = "";
+        public string Street { get; set; } = "";
+        public string City { get; set; } = "";
+        public string PostalCode { get; set; } = "";
+        public bool IsBilling { get; set; }
+        public bool IsShipping { get; set; }
+        public bool IsPrimary { get; set; }
+    }
+
+    public class OrderItem
+    {
+        public string OrderId { get; set; } = "";
+        public string ProductId { get; set; } = "";
+        public string ProductTitle { get; set; } = "";
+        public DateTime OrderDate { get; set; }
+        public string ShippingAddressName { get; set; } = "";
+        public string Status { get; set; } = "";
+        public double Total { get; set; }
+
+        public string DisplayTitle
+        {
+            get
+            {
+                if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
+                const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
+                return ProductTitle.Length <= maxLength
+                    ? ProductTitle
+                    : $"{ProductTitle.Substring(0, maxLength)}...";
+            }
+        }
+    }
+}

MidrandBookshop/Components/Pages/Profile.razor.css

@@ -0,0 +1,204 @@
+::deep .container {
+    max-width: 1100px;
+}
+
+/* Navigation Layout overrides */
+.nav-pills .nav-link {
+    color: #6c757d;
+    border-radius: 0;
+    padding: 0.75rem 0;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+    .nav-pills .nav-link.active {
+        background-color: transparent !important;
+        color: #1A1A1A;
+        border-bottom: 2px solid #1A1A1A;
+    }
+
+    .nav-pills .nav-link:hover:not(.active) {
+        color: #1A1A1A;
+    }
+
+/* Cards layout rules */
+.card {
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 0;
+}
+
+.address-card {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+    .address-card:hover {
+        border-color: rgba(0, 0, 0, 0.16);
+    }
+
+/* Container Wrapper to Suppress the Scrollbar completely */
+.table-container-fixed {
+    width: 100%;
+    overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
+}
+
+/* Global Table Typography - Reduced uniformly to keep items on a single line */
+.profile-table {
+    font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
+    width: 100%;
+    table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
+}
+
+    .profile-table tbody td {
+        padding-top: 0.85rem;
+        padding-bottom: 0.85rem;
+    }
+
+    .profile-table thead th {
+        background-color: #F9F9F9;
+        font-size: 0.7rem;
+        letter-spacing: 0.04rem;
+    }
+
+/* Compact Column Proportions */
+.col-order-id {
+    width: 115px;
+}
+
+.col-date {
+    width: 100px;
+}
+
+.col-total {
+    width: 85px;
+}
+
+.col-status {
+    width: 105px;
+}
+
+.col-invoice {
+    width: 65px;
+}
+
+.col-title {
+    width: auto; /* Takes shared residual space smoothly */
+}
+
+.col-address {
+    width: auto; /* Takes shared residual space smoothly */
+}
+
+/* Product link handling */
+.product-link {
+    color: #1A1A1A;
+    text-decoration: none;
+    border-bottom: 1px dashed transparent;
+    transition: border-color 0.2s ease;
+    display: inline-block;
+}
+
+    .product-link:hover {
+        border-color: #1A1A1A;
+    }
+
+/* Base Badge Settings */
+.badge {
+    font-size: 0.62rem;
+    letter-spacing: 0.5px;
+    padding: 0.4em 0.8em;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+/* Status Badge Palette Colors */
+.status-shipped {
+    background-color: #e3f2fd !important;
+    color: #0d6efd !important;
+    border: 1px solid rgba(13, 110, 253, 0.15);
+}
+
+.status-delivered {
+    background-color: #e8f5e9 !important;
+    color: #198754 !important;
+    border: 1px solid rgba(25, 135, 84, 0.15);
+}
+
+.badge-tag {
+    background-color: #f0f0f0 !important;
+    color: #4a4a4a !important;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Form Buttons */
+.btn-outline-dark {
+    border-radius: 50px;
+    border-width: 1px;
+}
+
+.btn-dark {
+    border-radius: 50px;
+}
+
+/* Action button configurations */
+.action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    text-decoration: none;
+    transition: background-color 0.15s ease, transform 0.1s ease;
+}
+
+    .action-btn:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .action-btn.text-danger:hover {
+        background-color: rgba(220, 53, 69, 0.1);
+    }
+
+    .action-btn:active {
+        transform: scale(0.95);
+    }
+
+/* Compact SVG Icons sizing */
+.svg-icon {
+    width: 15px;
+    height: 15px;
+    fill: currentColor;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.pointer-label {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Shared Card Styling Unification Rules */
+.order-history-card {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    border-radius: 0; /* Matches your address card configuration */
+}
+
+    .order-history-card:hover {
+        border-color: rgba(0, 0, 0, 0.16);
+    }
+
+/* Micro Typography Alignment */
+.xx-small {
+    font-size: 0.65rem;
+}
+
+.tracking-wider {
+    letter-spacing: 0.05rem;
+}
+
+/* Responsive adjustments across layout break-points */
+@media (max-width: 575.98px) {
+    .border-sm-top-0 {
+        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
+    }
+}

MidrandBookshop/Components/Pages/Weather.razor

@@ -1,64 +0,0 @@
-@page "/weather"
-@attribute [StreamRendering]
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates showing data.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th aria-label="Temperature in Celsius">Temp. (C)</th>
-                <th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        // Simulate asynchronous loading to demonstrate streaming rendering
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
-        {
-            Date = startDate.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = summaries[Random.Shared.Next(summaries.Length)]
-        }).ToArray();
-    }
-
-    private class WeatherForecast
-    {
-        public DateOnly Date { get; set; }
-        public int TemperatureC { get; set; }
-        public string? Summary { get; set; }
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-}

MidrandBookshop/Components/RedirectToLogin.razor

@@ -0,0 +1,10 @@
+@inject NavigationManager Navigation
+
+@code {
+    protected override void OnInitialized()
+    {
+        var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
+
+        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
+    }
+}

MidrandBookshop/Components/Routes.razor

@@ -1,6 +1,20 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@using Microsoft.AspNetCore.Components.Authorization
+@using MidrandBookshop.Components.Pages
+
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
         <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
-        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+                <NotAuthorized>                    
+                    <RedirectToLogin />
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
         </Found>
-</Router>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <NotFound />
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingAuthenticationState>

MidrandBookshop/MidrandBookshop.csproj

@@ -1,10 +1,57 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <SignAssembly>True</SignAssembly>
+    <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
+    <UserSecretsId>63d55865-dbfb-40d6-b6df-9bf6d14d15ca</UserSecretsId>
+    <AssemblyOriginatorKeyFile>..\MidrandBooks.snk</AssemblyOriginatorKeyFile>
     <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
   </PropertyGroup>
 
+  <!-- file nesting -->
+  <ItemGroup>
+    <ProjectCapability Include="ConfigurableFileNesting" />
+    <ProjectCapability Include="ConfigurableFileNestingFeatureEnabled" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="LiteCharms.Features" Version="1.82.0" />
+  </ItemGroup>
+
+  <!-- UI -->
+  <ItemGroup>
+    <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.82.0" />
+    
+    <!-- Global Usings -->
+    <Using Include="Blazored.Toast.Services" />
+  </ItemGroup>
+
+  <!-- CQRS -->
+  <ItemGroup>
+    <PackageReference Include="Mediator.SourceGenerator" Version="3.0.2">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
+
+    <!-- Global Usings -->
+    <Using Include="FluentResults" />
+    <Using Include="Mediator" />
+    <Using Include="Quartz" />
+  </ItemGroup>
+
+  <!-- Health Checks -->
+  <ItemGroup>
+    <Using Include="Microsoft.AspNetCore.Diagnostics.HealthChecks" />
+  </ItemGroup>
+
+  <!-- Shared Global Usings -->
+  <ItemGroup>
+    <Using Include="Blazored.Toast" />
+    <Using Include="Microsoft.AspNetCore.Components" />
+  </ItemGroup>
+
 </Project>

MidrandBookshop/Program.cs

@@ -1,20 +1,69 @@
+using LiteCharms.Features.Extensions;
+using LiteCharms.Features.Mediator;
+using LiteCharms.Features.MidrandBooks.Extensions;
+using Microsoft.AspNetCore.HttpOverrides;
 using MidrandBookshop.Components;
+using static LiteCharms.Features.Extensions.Quartz;
+
+AppContext.SetSwitch("Microsoft.IdentityModel.DisableTelemetry", true);
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 
+builder.AddMonitoring();
+builder.Services.AddEndpointsApiExplorer();
+
+builder.Services.AddMediator();
+builder.Services.AddAuthentikUiSecurity(builder.Configuration);
+
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+
+builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
+
+builder.Services.AddEmailServices(builder.Configuration);
+builder.Services.AddEmailServiceBus();
+
+builder.Services.AddHttpClient();
+builder.Services.AddShopServices();
+builder.Services.AddHashServices(builder.Configuration);
+builder.Services.AddMidrandShopDatabase(builder.Configuration);
+
+builder.Services.AddMidrandShopPostgresHealthCheck();
+builder.Services.AddMidrandShopQuartzHealthCheck();
+builder.Services.AddHealthChecksSupport(builder.Configuration);
+builder.Services.AddCascadingAuthenticationState();
+
+builder.Services.Configure<ForwardedHeadersOptions>(options =>
+{
+    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+    options.KnownProxies.Clear();
+});
+
 var app = builder.Build();
 
-// Configure the HTTP request pipeline.
+app.UseForwardedHeaders();
+app.AddSecurityEndpoints();
+
+var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
+var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
+
+if (!scheduler!.IsStarted)
+    await scheduler.Start();
+
 if (!app.Environment.IsDevelopment())
 {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
 }
+
+app.UseHealthChecks("/health", new HealthCheckOptions
+{
+    ResponseWriter = HealthChecks.UI.Client.UIResponseWriter.WriteHealthCheckUIResponse
+});
+
 app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
 app.UseHttpsRedirection();
 

MidrandBookshop/appsettings.json

@@ -1,8 +1,28 @@
 {
+  "AuthentikSettings": {
+    "Authority": "https://id.khongisa.co.za/application/o/midrand-books-uat/",
+    "MetadataEndpoint": "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration",
+    "RevokationEndpoint": "https://id.khongisa.co.za/application/o/revoke/"
+  },
+  "HasherSettings": {
+    "MinHashLength": 11
+  },
+  "BookshopS3Settings": {
+    "ServiceUrl": "http://192.168.1.177:30900",
+    "Region": "garage",
+    "BucketName": "bookshop",
+    "CdnBaseUrl": "https://bookshop.cdn.khongisa.co.za"
+  },
+  "Monitoring": {
+    "ApiKey": "",
+    "Address": "http://aspire-dashboard-service.aspire.svc.cluster.local:18889",
+    "ServiceName": "MidrandBooks.DEV"
+  },
   "Logging": {
     "LogLevel": {
       "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+      "Microsoft.AspNetCore": "Warning",
+      "Microsoft.EntityFrameworkCore": "Error"
     }
   },
   "AllowedHosts": "*"

MidrandBookshop/wwwroot/app.css

@@ -1,60 +1,114 @@
-html, body {
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+:root {
+    /* Fonts */
+    --font-heading: 'Instrument Serif', serif;
+    --font-ui: 'Inter', sans-serif;
+    /* Color Palette */
+    --mb-bg: #F9F9F9;
+    --mb-card-bg: #FFFFFF;
+    --mb-text-dark: #1A1A1A;
+    --mb-text-muted: #666666;
+    --mb-accent-red: #E63946;
+    --mb-radius: 12px;
+    /* High-Visibility Machined White Metal Core Surface Definition */
+    /* Sharp linear reflection channels paired with micro-milled density grids */
+    --brushed-metal-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 245, 0.95) 25%, rgba(255, 255, 255, 1) 50%, rgba(238, 240, 244, 0.95) 75%, rgba(255, 255, 255, 1) 100% ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.012) 0px, rgba(0, 0, 0, 0.012) 1px, transparent 1px, transparent 2px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 1px, transparent 1px, transparent 3px ), #EDEFF4; /* Definitive satin platinum breakout base fallback */
 }
 
-a, .btn-link {
+/* Global Reset & Core Variables Mapping */
-    color: #006bb7;
+body {
+    background-color: var(--mb-bg);
+    color: var(--mb-text-dark);
+    font-family: var(--font-ui);
+    -webkit-font-smoothing: antialiased;
 }
 
-.btn-primary {
+h1, h2, h3, .display-font {
-    color: #fff;
+    font-family: var(--font-heading);
-    background-color: #1b6ec2;
+    font-weight: 400;
-    border-color: #1861ac;
 }
 
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+/* Custom Navigation Pill Styling */
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+.nav-pill-wrapper {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    padding: 6px;
+    border-radius: 50px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
 }
 
-.content {
+.nav-pill-link {
-    padding-top: 1.1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--mb-text-muted);
+    padding: 8px 20px;
+    border-radius: 50px;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
 }
 
-h1:focus {
+    .nav-pill-link i {
-    outline: none;
+        width: 16px;
-}
+        height: 16px;
-
+        stroke-width: 1.5;
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid #e50000;
-}
-
-.validation-message {
-    color: #e50000;
-}
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
     }
 
-.darker-border-checkbox.form-check-input {
+    /* Navigation Pill States */
-    border-color: #929292;
+    .nav-pill-link:hover {
+        color: var(--mb-text-dark);
+        background-color: #F1F1F1;
+    }
+
+    .nav-pill-link.active {
+        color: #FFFFFF !important;
+        background-color: var(--mb-text-dark);
+    }
+
+        .nav-pill-link.active svg {
+            stroke: #FFFFFF;
+        }
+
+/* Utilities & Component Support Layouts */
+.cart-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background-color: var(--mb-text-dark);
+    color: #FFFFFF;
+    font-size: 0.7rem;
+    font-weight: 600;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--mb-bg);
 }
 
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+.transition-smooth {
-    color: var(--bs-secondary-color);
+    transition: color 0.2s ease;
-    text-align: end;
 }
 
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+    .transition-smooth:hover {
-    text-align: start;
+        color: var(--mb-text-dark) !important;
+    }
+
+.py-1-5 {
+    padding-top: 0.35rem !important;
+    padding-bottom: 0.35rem !important;
+}
+
+/* Global Focus Ring Corrections */
+h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+[tabindex="-1"]:focus {
+    outline: none !important;
 }

README.md

@@ -1 +1,78 @@
-# MidrandBooks
+# Midrand Books Ecommerce Platform
+
+An online bookstore web application designed for Midrand Books, allowing local and national customers to browse, search, and purchase books seamlessly.
+
+## 🚀 Features
+
+* **User Authentication**: Secure customer registration, login, and profile management.
+* **Product Catalog**: Advanced search, filtering by genre, and dynamic book categorization.
+* **Shopping Cart**: Real-time cart updates, item persistence, and coupon code validation.
+* **Secure Checkout**: Integrated payment gateways supporting local South African methods (e.g., PayFast, Ozow, or Yoco).
+* **Order Tracking**: Automated email confirmations and live delivery status tracking.
+* **Admin Dashboard**: Content management system (CMS) to manage inventory, track sales, and process orders.
+
+## 🛠️ Tech Stack
+
+* **Frontend**: Blazor / HTML5 / Bootstrap CSS
+* **Backend**: Blazor Server
+* **Database**: PostgreSQL
+* **Payment Gateway**: PayFast API / PayPal SDK
+
+## 📋 Prerequisites
+
+Before setting up the project locally, ensure you have the following installed:
+
+* .NET SDK (v6.0 or higher)
+* Git
+
+## 🔧 Installation & Setup
+
+Follow these steps to run the project locally.
+
+1. **Clone the repository**
+   ```bash
+   git clone https://gitea.khongisa.co.za/litecharms/midrandbooks.git
+   cd midrandbooks
+   ```
+
+2. **Install dependencies**
+   ```bash
+   # restore NuGet dependencies
+   dotnet restore
+   ```
+
+3. **Environment Variables**
+   Create a `.env` file in both the frontend and backend roots. Use the `.env.example` files provided as a reference.
+   ```env
+   DATABASE_URL=your_database_url
+   Email = mailbox settings
+   Monitoring = Aspire dashboard settings
+   PAYMENT_GATEWAY_KEY=your_api_key
+   ```
+
+4. **Run the application**
+   ```bash
+   # Start app
+   dotnet run
+   ```
+
+5. **Access the app**
+   Open your browser and navigate to `http://localhost:5000`.
+
+## 📦 Deployment
+
+* **Frontend**: Hosted on Lite Charms Cloud.
+* **Backend**: Hosted on Lite Charms Cloud.
+* **Database**: Managed on Lite Charms PVC LXC container settings
+
+## 🤝 Contributing
+
+1. Fork the repository.
+2. Create a feature branch: `git checkout -b feature/NewFeature`.
+3. Commit your changes: `git commit -m 'Add NewFeature'`.
+4. Push to the branch: `git push origin feature/NewFeature`.
+5. Open a Pull Request.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

midrandbooks-uat.yml

@@ -0,0 +1,201 @@
+---
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: midrandbooks-uat
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: midrandbooks-config
+  namespace: midrandbooks-uat
+data:
+  ASPNETCORE_ENVIRONMENT: "Development"
+  ASPNETCORE_URLS: "http://0.0.0.0:8080"
+  Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
+  Monitoring__ServiceName: "MidrandBooks.Uat"
+  HasherSettings__MinHashLength: "11"
+  BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
+  BookshopS3Settings__Region: "garage"
+  BookshopS3Settings__BucketName: "bookshop"
+  BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
+  ValidPayfastHosts__0: "www.payfast.co.za"
+  ValidPayfastHosts__1: "sandbox.payfast.co.za"
+  ValidPayfastHosts__2: "w1w.payfast.co.za"
+  ValidPayfastHosts__3: "w2w.payfast.co.za"
+  ValidPayfastHosts__4: "ips.payfast.co.za"
+  ValidPayfastHosts__5: "api.payfast.co.za"
+  ValidPayfastHosts__6: "payment.payfast.io"
+  AuthentikSettings__Authority: "https://id.khongisa.co.za/application/o/midrand-books-api-uat/"
+  AuthentikSettings__MetadataEndpoint: "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration"
+  AuthentikSettings__RevokationEndpoint: "https://id.khongisa.co.za/application/o/revoke/"
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: midrandbooks-secrets
+  namespace: midrandbooks-uat
+type: Opaque
+data:  
+  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
+  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
+  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=
+  hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
+  bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
+  bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
+  authentik-clientid: Nm9oZk1lSndQNWR0YWY1RFMzZU9MY2NNSHF6WXlma1YzRTNGeE5Tbw==
+  authentik-clientsecret: TXV2a0FLQklHR3BkdEsyaFlabVU1dFRaUmNuM2FhRzhoMWhlVE1nazFYOGVwczYyMzNCS0REWGdpNXo0T01RalVzMGZEUEFmakpmVVRNN1h3ZjllMU01MTQyVGlvOXRycUdmZTM1THhPaExEUnp6N2gxSm5jVkNLYXZXUllndmQ=
+---
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: midrandbooks-pvc
+  namespace: midrandbooks-uat
+spec:
+  accessModes: ["ReadWriteMany"]
+  storageClassName: nfs-storage
+  resources:
+    requests:
+      storage: 2Gi
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: midrandbooks
+  namespace: midrandbooks-uat
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: midrandbooks
+  template:
+    metadata:
+      labels:
+        app: midrandbooks
+    spec:
+      affinity:
+        nodeAffinity:
+          requiredDuringSchedulingIgnoredDuringExecution:
+            nodeSelectorTerms:
+              - matchExpressions:
+                  - key: node-role.kubernetes.io/control-plane
+                    operator: DoesNotExist
+      containers:
+        - name: midrandbooks
+          image: nexus.khongisa.co.za/midrandbooks:latest
+          imagePullPolicy: Always
+          resources:
+            limits:
+              memory: "512Mi"
+              cpu: "500m"
+            requests:
+              memory: "256Mi"
+              cpu: "100m"
+          ports:
+            - containerPort: 8080
+          envFrom:
+            - configMapRef:
+                name: midrandbooks-config
+          env:
+            - name: AuthentikSettings__ClientId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooksapi-secrets
+                  key: authentik-clientid
+            - name: AuthentikSettings__ClientSecret
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooksapi-secrets
+                  key: authentik-clientsecret
+            - name: BookshopS3Settings__AccessKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-accesskey
+            - name: BookshopS3Settings__SecretKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-secretkey
+            - name: HasherSettings__Salt
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: hasher-salt
+            - name: HasherSettings__PayfastPassphrase
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: hasher-payfastpassphrase
+            - name: ConnectionStrings__PostgresScheduler
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: connection-string-quartz
+            - name: ConnectionStrings__PostgresMidrandBooks
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: connection-string
+            - name: Monitoring__ApiKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: aspire-apikey
+          volumeMounts:
+            - name: data
+              mountPath: /app/wwwroot/content
+              resources:          
+          livenessProbe:
+            httpGet:
+              path: /health
+              port: 8080
+            initialDelaySeconds: 5
+            periodSeconds: 10
+          readinessProbe:
+            httpGet:
+              path: /health
+              port: 8080
+            initialDelaySeconds: 3
+            periodSeconds: 5
+      volumes:
+        - name: data
+          persistentVolumeClaim:
+            claimName: midrandbooks-pvc
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: midrandbooks-service
+  namespace: midrandbooks-uat
+spec:
+  type: ClusterIP
+  selector:
+    app: midrandbooks
+  ports:
+    - name: http
+      protocol: TCP
+      port: 80
+      targetPort: 8080
+---
+apiVersion: traefik.io/v1alpha1
+kind: IngressRoute
+metadata:
+  name: midrandbooks-web-secure
+  namespace: midrandbooks-uat
+spec:
+  entryPoints:
+    - websecure
+  routes:
+    - match: Host(`uat.midrandbooks.co.za`)
+      kind: Rule
+      services:
+        - name: midrandbooks-service
+          port: 80
+          sticky:
+            cookie:
+              name: "lp-sticky-session"
+              httpOnly: true
+              secure: true
+  tls: {}

nuget.config

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <add key="KhongisaNexus" value="https://nexus.khongisa.co.za/repository/nuget-group/index.json" />
+  </packageSources> 
+
+  <packageSourceCredentials>
+    <KhongisaNexus>
+      <add key="Username" value="api-key" />
+      <add key="ClearTextPassword" value="4a285231-5a49-334f-a216-7c2e63418e5c" />
+    </KhongisaNexus>
+  </packageSourceCredentials>
+</configuration>