Merge pull request 'ui-design' (#17) from ui-design into main

Reviewed-on: #17

.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,26 @@
+<div class="col-12 col-md-6 col-lg-4 mb-4">
+    <div class="card border-0 h-100 p-4 position-relative" style="background-color: #F1F1F1; border-radius: var(--mb-radius);">
+
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <span class="badge rounded-pill px-3 py-2" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
+            <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;">
+                <i data-lucide="arrow-up-right" style="width: 16px; height: 16px; color: var(--mb-text-dark);"></i>
+            </button>
+        </div>
+
+        <div class="d-flex justify-content-center align-items-center flex-grow-1 my-3" style="min-height: 260px;">
+            <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
+        </div>
+
+    </div>
+    <div class="d-flex justify-content-between align-items-center mt-3 px-2">
+        <span class="fw-medium text-dark" style="font-size: 0.9rem;">@Title</span>
+        <span class="text-muted fw-semibold" style="font-size: 0.9rem;">$@Price</span>
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Title { get; set; } = "";
+    [Parameter] public decimal Price { get; set; }
+    [Parameter] public string BookImageUrl { 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,293 @@
 @inherits LayoutComponentBase
+@inject NavigationManager Navigation
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
+<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
+
+    @* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
+    <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
+    <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="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        <div class="cart-body flex-grow-1 overflow-y-auto p-4">
+            @if (!CartItems.Any())
+            {
+                <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>
+
+    @* --- TOP FIXED LAYOUT AREA --- *@
+    <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
+        @* Decorative Background SVG Watermark Line Graphic *@
+        <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..."
+                               value="@GlobalSearchQuery"
+                               @oninput="OnSearchInput" />
+                    </div>
+
+                    <button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
+                            style="width: 32px; height: 32px;"
+                            @onclick="ToggleGlobalSearch"
+                            type="button">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <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-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>
+                        Log In
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    @* --- MAIN INDEPENDENT SCROLL LAYER --- *@
+    <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>
+@code {
+    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 }
+    };
+
+    private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
+    private void ToggleCart() => IsCartOpen = !IsCartOpen;
+
+    private void OnSearchInput(ChangeEventArgs e)
+    {
+        GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
+    }
+
+    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 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 {
-    position: relative;
-    display: flex;
-    flex-direction: column;
+.sticky-top {
+    position: -webkit-sticky !important;
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 1000 !important;
 }
 
-main {
-    flex: 1;
+.cart-overlay {
+    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 {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+.cart-overlay.is-visible {
+    opacity: 1;
+    pointer-events: auto;
 }
 
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
+.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);
+}
+
+.cart-drawer.is-open {
+    transform: translateX(-420px);
+    pointer-events: auto;
+}
+
+.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 {
-        white-space: nowrap;
-        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;
-    }
+.xx-small {
+    font-size: 0.68rem;
 }
 
-@media (min-width: 641px) {
-    .page {
-        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;
-    }
+.border-bottom-dashed {
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
 }
 
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
+.quantity-picker {
+    padding: 2px 4px;
+}
+
+.quantity-picker button {
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.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 {
-        cursor: pointer;
+.footer-content-section {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.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;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+    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>
-<h2 class="text-danger">An error occurred while processing your request.</h2>
+<div class="artistic-error-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
 
-@if (ShowRequestId)
-{
-    <p>
-        <strong>Request ID:</strong> <code>@RequestId</code>
+            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
+                <svg viewBox="0 0 400 400" width="300" height="300" fill="none" stroke="#1A1A1A" stroke-width="1.5">
+                    <rect x="100" y="100" width="200" height="200" transform="rotate(45 200 200)" opacity="0.2" />
+                    <line x1="150" y1="150" x2="250" y2="250" />
+                    <line x1="250" y1="150" x2="150" y2="250" />
+                    <circle cx="200" cy="200" r="80" stroke-dasharray="10 10" />
+                </svg>
+            </div>
+
+            <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>
-<p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
-</p>
-<p>
-    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
-    It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
-    and restarting the app.
-</p>
+                @if (ShowRequestId)
+                {
+                    <p class="font-monospace text-muted small mb-4">
+                        Ref: <code>@RequestId</code>
+                    </p>
+                }
 
-@code{
-    [CascadingParameter]
-    private HttpContext? HttpContext { get; set; }
+                <button class="btn btn-outline-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Library</button>
+            </div>
+        </div>
+    </div>
+</div>
 
+@code {
+    [CascadingParameter] private HttpContext? HttpContext { get; set; }
     private string? RequestId { get; set; }
     private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
 

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,349 @@
 @page "/"
+@rendermode InteractiveServer
+@inject NavigationManager Navigation
 
-<PageTitle>Home</PageTitle>
+<div id="top-target" 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>
 
-<h1>Hello, world!</h1>
+<div class="container mb-5 px-md-5">
+    <div class="row align-items-center justify-content-between pb-3 g-3">
 
-Welcome to your new app.
+        <div class="col-12 col-md-8">
+            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
+                @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>
+                }
+
+                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
+                        @onclick="ToggleExtraCategories">
+                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="col-12 col-md-4">
+            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">
+
+                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
+                        style="height: 32px; font-size: 0.8rem;"
+                        @onclick="ToggleFilterMenu">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                    </svg>
+                    <span>Filter & Sort</span>
+                </button>
+
+                <div class="d-flex align-items-center bg-light p-1 rounded-pill border border-light-subtle" style="height: 32px;">
+                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
+                        @(CurrentViewMode == ViewMode.Grid ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
+                            style="width: 24px; height: 24px;"
+                            @onclick="() => SetViewMode(ViewMode.Grid)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
+                    </button>
+                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
+                        @(CurrentViewMode == ViewMode.List ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
+                            style="width: 24px; height: 24px; margin-left: 2px;"
+                            @onclick="() => SetViewMode(ViewMode.List)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    @if (ShowExpandedCategories)
+    {
+        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
+            @foreach (var category in DynamicExtendedCategories)
+            {
+                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>
+            }
+        </div>
+    }
+
+    @if (ShowFilterMenu)
+    {
+        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
+            <div class="row g-4">
+                <div class="col-12 col-sm-4">
+                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
+                    <div class="d-flex flex-column gap-1">
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
+                    </div>
+                </div>
+                <div class="col-12 col-sm-4">
+                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
+                    <div class="d-flex flex-column gap-1">
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
+                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
+                    </div>
+                </div>
+                <div class="col-12 col-sm-4">
+                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
+                    <div class="form-check form-switch pt-1 ms-1">
+                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
+                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
+                    </div>
+                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
+                </div>
+            </div>
+        </div>
+    }
+
+    <div class="position-relative w-100 custom-milled-line">
+        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
+        <div class="position-absolute w-100 core-horizontal-rule"></div>
+    </div>
+</div>
+
+<div class="container px-md-5 pb-5">
+
+    @if (!PaginatedBooks.Any())
+    {
+        <div class="text-center text-muted py-5">
+            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
+        </div>
+    }
+    else if (CurrentViewMode == ViewMode.Grid)
+    {
+        <div class="row g-4 animate-fade-in">
+            @foreach (var book in PaginatedBooks)
+            {
+                <div class="col-12 col-md-6 col-lg-4">
+                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
+                         style="cursor: pointer;"
+                         @onclick="() => NavigateToProduct(book.Id)">
+                        <div class="d-flex justify-content-between align-items-center">
+                            @if (book.IsNew)
+                            {
+                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
+                            }
+                            else
+                            {
+                                <div></div>
+                            }
+                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" 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 my-auto py-3">
+                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
+                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
+                        <div>
+                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
+                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
+                        </div>
+                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+    else
+    {
+        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
+            @foreach (var book in PaginatedBooks)
+            {
+                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
+                     style="cursor: pointer;"
+                     @onclick="() => NavigateToProduct(book.Id)">
+                    <div class="d-flex align-items-center gap-4 structural-list-left">
+                        <span class="text-dark fw-medium list-item-title">@book.Title</span>
+                        <span class="text-muted small list-item-author">by @book.Author</span>
+                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-4">
+                        @if (book.IsNew)
+                        {
+                            <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 @book.Price.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"
+   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" y1="19" x2="12" y2="5"></line>
+        <polyline points="5 12 12 5 19 12"></polyline>
+    </svg>
+</a>
+
+@code {
+    public enum ViewMode { Grid, List }
+    private ViewMode CurrentViewMode = ViewMode.Grid;
+
+    [CascadingParameter]
+    public string SharedSearchQuery { get; set; } = string.Empty;
+
+    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 = new() { "All", "Graphic Design", "Product Design", "Architecture" };
+    private List<string> DynamicExtendedCategories = new();
+
+    private int ItemsPerPage = 12;
+    private int VisibleCount = 12;
+
+    public class BookItem
+    {
+        public long Id { get; set; } // Refactored to hold unique record indices of type long
+        public string Title { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public decimal Price { get; set; }
+        public string Category { get; set; } = string.Empty;
+        public bool IsNew { get; set; }
+        public string Isbn { get; set; } = string.Empty;
+    }
+
+    private List<BookItem> BooksCollection = new();
+
+    private IEnumerable<BookItem> FilteredData
+    {
+        get
+        {
+            var data = BooksCollection.AsEnumerable();
+
+            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
+            {
+                var q = SharedSearchQuery.Trim();
+                data = data.Where(b =>
+                    b.Title.Contains(q, StringComparison.OrdinalIgnoreCase) ||
+                    b.Author.Contains(q, StringComparison.OrdinalIgnoreCase) ||
+                    b.Isbn.Contains(q, StringComparison.OrdinalIgnoreCase)
+                );
+            }
+
+            if (ActiveCategory != "All")
+            {
+                data = data.Where(b => b.Category.Equals(ActiveCategory, StringComparison.OrdinalIgnoreCase));
+            }
+
+            if (OnlyShowNew) { data = data.Where(b => b.IsNew); }
+
+            data = ActivePriceFilter switch
+            {
+                "under-500" => data.Where(b => b.Price < 500),
+                "500-1000" => data.Where(b => b.Price >= 500 && b.Price <= 1000),
+                "over-1000" => data.Where(b => b.Price > 1000),
+                _ => data
+            };
+
+            return data;
+        }
+    }
+
+    private IEnumerable<BookItem> SortedAndFilteredBooks => SelectedSortOption switch
+    {
+        "price-low" => FilteredData.OrderBy(b => b.Price),
+        "price-high" => FilteredData.OrderByDescending(b => b.Price),
+        "title-asc" => FilteredData.OrderBy(b => b.Title),
+        _ => FilteredData
+    };
+
+    private IEnumerable<BookItem> PaginatedBooks => SortedAndFilteredBooks.Take(VisibleCount);
+    private int TotalFilteredCount => FilteredData.Count();
+    private bool HasMoreItems => VisibleCount < TotalFilteredCount;
+
+    protected override void OnInitialized()
+    {
+        var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
+        DynamicExtendedCategories.AddRange(extraSourceCategories);
+
+        // Updated mock items to supply long IDs matching your screenshot items
+        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
+        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
+        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
+
+        var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
+        var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
+        var designers = new[] { "J. Morrison", "K. Fujita", "Studio Bouroullec", "Es Devlin", "Kenya Hara" };
+
+        var entireCategoryPool = MainCategories.Concat(DynamicExtendedCategories).Where(c => c != "All").ToArray();
+        var random = new Random(42);
+
+        for (int i = 4; i <= 60; i++)
+        {
+            BooksCollection.Add(new BookItem
+            {
+                Id = (long)i,
+                Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
+                Author = designers[random.Next(designers.Length)],
+                Price = random.Next(25, 135) * 10,
+                Category = entireCategoryPool[random.Next(entireCategoryPool.Length)],
+                IsNew = random.NextDouble() > 0.7,
+                Isbn = $"978000000{i}"
+            });
+        }
+    }
+
+    // Handles the explicit page transition routing
+    private void NavigateToProduct(long id)
+    {
+        Navigation.NavigateTo($"/product/{id}");
+    }
+
+    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
+    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
+    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
+    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 ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
+    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
+}

MidrandBookshop/Components/Pages/Home.razor.css

@@ -0,0 +1,172 @@
+/* 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;
+    }

MidrandBookshop/Components/Pages/NotFound.razor

@@ -1,5 +1,35 @@
 @page "/not-found"
-@layout MainLayout
+@inject NavigationManager Navigation
 
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
+<div class="artistic-404-container">
+    <div class="container h-100">
+        <div class="row align-items-center justify-content-center min-vh-70 py-5">
+
+            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
+                <div class="artistic-svg-wrapper">
+                    <svg viewBox="0 0 400 400" width="350" height="350" stroke="#1A1A1A" stroke-width="2" fill="none">
+                        <path d="M60 80 Q80 60 100 80" />
+                        <path d="M100 60 Q120 40 140 60" />
+                        <path d="M280 70 Q300 50 320 70" />
+
+                        <path d="M100 200 L200 180 L300 200 L300 300 L200 320 L100 300 Z" fill="#F8F8F8" />
+                        <path d="M200 180 L200 320" />
+                        <path d="M120 220 L180 220 M120 250 L180 250 M220 220 L280 220 M220 250 L280 250" stroke="#DDD" />
+
+                        <circle cx="230" cy="230" r="40" />
+                        <line x1="258" y1="258" x2="290" y2="290" />
+                    </svg>
+                </div>
+            </div>
+
+            <div class="col-12 col-md-6 offset-md-1">
+                <div class="meta-tag font-monospace text-uppercase text-muted mb-3">System Index // Uncharted Territory</div>
+                <h1 class="display-4 text-dark mb-4 editorial-headline">Nothing was found<br />in this search.</h1>
+                <p class="text-muted mb-5 body-manifesto-text">
+                    Even with careful scrutiny, the requested volume remains elusive. It appears the shelf you are exploring is currently vacant.
+                </p>
+                <button class="btn btn-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Collection</button>
+            </div>
+        </div>
+    </div>
+</div>

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/Product.razor

@@ -0,0 +1,137 @@
+@page "/product/{BookId:long}"
+@inject NavigationManager Navigation
+
+<div class="product-container">
+    <nav class="breadcrumb">
+        <span @onclick='() => Navigation.NavigateTo("/")' class="crumb-link">Books</span>
+        <span class="crumb-separator">/</span>
+        <span class="crumb-current">@BookTitle</span>
+    </nav>
+
+    <div class="product-layout">
+        <div class="gallery-section">
+            <div class="main-image-wrapper">
+                <img src="@ActiveImageUrl" alt="@BookTitle" class="main-image" />
+
+                <div class="format-badges">
+                    @if (IsPhysicalBook)
+                    {
+                        <span class="badge badge-physical">Book</span>
+                    }
+                    @if (IsEBook)
+                    {
+                        <span class="badge badge-ebook">E-Book</span>
+                    }
+                    @if (CanReadOnline)
+                    {
+                        <span class="badge badge-online">Read Online</span>
+                    }
+                </div>
+            </div>
+
+            <div class="thumbnail-grid">
+                @foreach (var img in Thumbnails)
+                {
+                    <div class="thumbnail-wrapper @(ActiveImageUrl == img ? "active" : "")"
+                         @onclick="() => ActiveImageUrl = img">
+                        <img src="@img" alt="Thumbnail" />
+                    </div>
+                }
+            </div>
+        </div>
+
+        <div class="details-section">
+            <div class="meta-header">
+                <span class="author-name">@AuthorName</span>
+                <div class="rating-stars">
+                    @for (int i = 1; i <= 5; i++)
+                    {
+                        <span class="star @(i <= CurrentRating ? "filled" : "")">★</span>
+                    }
+                    <span class="rating-text">(@CurrentRating.ToString("F1"))</span>
+                </div>
+            </div>
+
+            <h1 class="product-title">@BookTitle</h1>
+            <div class="product-price">R @Price.ToString("N2")</div>
+
+            <div class="purchase-actions">
+                <div class="quantity-picker">
+                    <button @onclick="DecreaseQty" class="qty-btn">-</button>
+                    <span class="qty-val">@Quantity</span>
+                    <button @onclick="IncreaseQty" class="qty-btn">+</button>
+                </div>
+                <button class="btn-add-to-cart" @onclick="HandleAddToCart">
+                    Add to Cart
+                </button>
+            </div>
+
+            <hr class="divider" />
+
+            <div class="info-block">
+                <h3>Description</h3>
+                <p class="description-text">@BookDescription</p>
+            </div>
+
+            <div class="info-block author-bio-card">
+                <h3>About the Author</h3>
+                <p class="author-bio">@AuthorBio</p>
+                <button class="btn-text-link" @onclick="ViewAllAuthorBooks">
+                    View all books by @AuthorName →
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public long BookId { get; set; }
+
+    // Mock State - In production, pull these via a Service using BookId inside OnInitialized
+    private string BookTitle { get; set; } = "Letters from M/M (Paris)";
+    private string AuthorName { get; set; } = "M/M Paris";
+    private string AuthorBio { get; set; } = "M/M Paris is an art and design partnership consisting of Michaël Amzalag and Mathias Augustyniak, established in 1992. Renowned globally for their influence on fashion, music, and contemporary art layout structures.";
+    private string BookDescription { get; set; } = "An exquisite archive tracking visual graphics, typography, and structural design curation over three decades. Beautifully bound with matte-coated plates and custom layouts.";
+    private decimal Price { get; set; } = 720.00m;
+
+    // Dynamic Ratings State
+    private double CurrentRating { get; set; } = 4.7;
+
+    // Formats supported
+    private bool IsPhysicalBook { get; set; } = true;
+    private bool IsEBook { get; set; } = true;
+    private bool CanReadOnline { get; set; } = false;
+
+    // Image Caching Gallery State
+    private string ActiveImageUrl { get; set; } = "images/book-cover-large.png";
+    private List<string> Thumbnails { get; set; } = new()
+    {
+        "images/book-cover-large.png",
+        "images/book-inside-1.png",
+        "images/book-inside-2.png"
+    };
+
+    private int Quantity { get; set; } = 1;
+
+    protected override void OnInitialized()
+    {
+        // Default the gallery viewer context logic
+        if (Thumbnails.Any())
+        {
+            ActiveImageUrl = Thumbnails.First();
+        }
+    }
+
+    private void IncreaseQty() => Quantity++;
+    private void DecreaseQty() { if (Quantity > 1) Quantity--; }
+
+    private void HandleAddToCart()
+    {
+        // Event logic hooked into your structural state layout
+    }
+
+    private void ViewAllAuthorBooks()
+    {
+        Navigation.NavigateTo($"/catalog?author={Uri.EscapeDataString(AuthorName)}");
+    }
+}

MidrandBookshop/Components/Pages/Product.razor.css

@@ -0,0 +1,294 @@
+.product-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Breadcrumbs */
+.breadcrumb {
+    font-size: 0.85rem;
+    margin-bottom: 2.5rem;
+    color: #8c8c8c;
+}
+
+.crumb-link {
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+    .crumb-link:hover {
+        color: #111;
+    }
+
+.crumb-separator {
+    margin: 0 0.5rem;
+}
+
+.crumb-current {
+    color: #111;
+    font-weight: 500;
+}
+
+/* Two-Column Grid Layout Structure */
+.product-layout {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 4rem;
+}
+
+@media (max-width: 992px) {
+    .product-layout {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+    }
+}
+
+/* Left Section: Visual Images/Thumbnails Layout */
+.gallery-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.main-image-wrapper {
+    position: relative;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 480px;
+}
+
+.main-image {
+    max-height: 450px;
+    object-fit: contain;
+    mix-blend-mode: multiply;
+}
+
+/* Format Badges Overlay Styles */
+.format-badges {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.badge {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.35rem 0.75rem;
+    border-radius: 100px;
+    font-weight: 600;
+    border: 1px solid transparent;
+}
+
+.badge-physical {
+    background-color: #111;
+    color: #fff;
+}
+
+.badge-ebook {
+    background-color: #fff;
+    color: #111;
+    border-color: #e5e5e5;
+}
+
+.badge-online {
+    background-color: #f0fdf4;
+    color: #166534;
+    border-color: #bbf7d0;
+}
+
+/* Thumbnails container */
+.thumbnail-grid {
+    display: flex;
+    gap: 1rem;
+}
+
+.thumbnail-wrapper {
+    width: 80px;
+    height: 80px;
+    border: 1px solid #e5e5e5;
+    border-radius: 6px;
+    padding: 0.5rem;
+    cursor: pointer;
+    background: #f9f9f9;
+    transition: all 0.2s ease;
+}
+
+    .thumbnail-wrapper:hover, .thumbnail-wrapper.active {
+        border-color: #111;
+    }
+
+    .thumbnail-wrapper img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        mix-blend-mode: multiply;
+    }
+
+/* Right Section: Core Text Typography Controls */
+.details-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.meta-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.author-name {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+/* Dynamic Stars C# rendering mapping */
+.rating-stars {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.star {
+    color: #e5e5e5;
+    font-size: 1.1rem;
+}
+
+    .star.filled {
+        color: #111; /* Solid black stars fits your clean aesthetic perfectly */
+    }
+
+.rating-text {
+    font-size: 0.85rem;
+    color: #666;
+    margin-left: 0.4rem;
+}
+
+.product-title {
+    font-size: 2.5rem;
+    font-family: 'Playfair Display', serif, Georgia; /* Fits the luxury typography tone */
+    font-weight: 400;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    color: #111;
+}
+
+.product-price {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+    color: #111;
+}
+
+/* Standard E-commerce Action Bar Block */
+.purchase-actions {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+}
+
+.quantity-picker {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e5e5e5;
+    border-radius: 100px;
+    padding: 0.25rem 0.5rem;
+}
+
+.qty-btn {
+    background: none;
+    border: none;
+    width: 36px;
+    height: 36px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+    .qty-btn:hover {
+        background-color: #f5f5f5;
+    }
+
+.qty-val {
+    min-width: 30px;
+    text-align: center;
+    font-weight: 500;
+}
+
+.btn-add-to-cart {
+    flex-grow: 1;
+    background-color: #111;
+    color: #fff;
+    border: none;
+    border-radius: 100px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+    .btn-add-to-cart:hover {
+        background-color: #2a2a2a;
+    }
+
+.divider {
+    border: 0;
+    border-top: 1px solid #eee;
+    margin-bottom: 2rem;
+}
+
+/* General Layout Text and Cross-Selling */
+.info-block {
+    margin-bottom: 2rem;
+}
+
+    .info-block h3 {
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #8c8c8c;
+        margin-bottom: 0.75rem;
+    }
+
+.description-text, .author-bio {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: #444;
+}
+
+.author-bio-card {
+    background-color: #fafafa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #f0f0f0;
+}
+
+.btn-text-link {
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 1rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: #111;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+}
+
+    .btn-text-link:hover {
+        color: #444;
+    }

MidrandBookshop/Components/Pages/Profile.razor

@@ -0,0 +1,362 @@
+@page "/profile"
+
+<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">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="table-container-fixed">
+                        <table class="table align-middle profile-table m-0">
+                            <thead>
+                                <tr>
+                                    <th class="text-uppercase text-muted col-order-id">Order ID</th>
+                                    <th class="text-uppercase text-muted col-title">Title</th>
+                                    <th class="text-uppercase text-muted col-date">Date</th>
+                                    <th class="text-uppercase text-muted col-address">Address</th>
+                                    <th class="text-uppercase text-muted col-status">Status</th>
+                                    <th class="text-uppercase text-muted text-end col-total">Total</th>
+                                    <th class="text-uppercase text-muted text-center col-invoice">Invoice</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @if (orderHistory != null)
+                                {
+                                    @foreach (var order in orderHistory)
+                                    {
+                                        <tr>
+                                            <td class="fw-medium text-nowrap">@order.OrderId</td>
+                                            <td>
+                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-nowrap" title="@order.ProductTitle">
+                                                    @order.DisplayTitle
+                                                </a>
+                                            </td>
+                                            <td class="text-muted text-nowrap">@order.OrderDate.ToString("MMM dd, yyyy")</td>
+                                            <td>
+                                                <span class="text-secondary d-inline-flex align-items-center gap-1 text-nowrap">
+                                                    <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>
+                                                    @order.ShippingAddressName
+                                                </span>
+                                            </td>
+                                            <td>
+                                                <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase text-nowrap">
+                                                    @order.Status
+                                                </span>
+                                            </td>
+                                            <td class="text-end fw-medium text-nowrap">R @order.Total.ToString("N2")</td>
+                                            <td class="text-center">
+                                                <button class="btn btn-link p-0 text-dark action-btn" 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>
+                                            </td>
+                                        </tr>
+                                    }
+                                }
+                                else
+                                {
+                                    <tr>
+                                        <td colspan="7" class="text-center text-muted py-4">Loading order history...</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </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>
+
+@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 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,178 @@
+::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;
+}

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/Routes.razor

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

MidrandBookshop/MidrandBookshop.csproj

@@ -1,10 +1,55 @@
-<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.43.0" />
+  </ItemGroup>
+
+  <!-- UI -->
+  <ItemGroup>
+    <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
+    
+    <!-- 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" />
+  </ItemGroup>
+
 </Project>

MidrandBookshop/Program.cs

@@ -1,20 +1,53 @@
+using LiteCharms.Features.Extensions;
+using LiteCharms.Features.Mediator;
 using MidrandBookshop.Components;
+using static LiteCharms.Features.Extensions.Quartz;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 
+builder.AddMonitoring();
+builder.Services.AddEndpointsApiExplorer();
+
+//builder.Services.AddMediator();
+
+//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+//builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+
+//builder.Services.AddSalesServiceBus();
+//builder.Services.AddGeneralServiceBus();
+builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Configuration);
+
+//builder.Services.AddEmailServices(builder.Configuration);
+//builder.Services.AddEmailServiceBus();
+
+builder.Services.AddMidrandShopDatabase(builder.Configuration);
+
+builder.Services.AddMidrandShopPostgresHealthCheck();
+//builder.Services.AddMidrandShopQuartzHealthCheck();
+builder.Services.AddHealthChecksSupport(builder.Configuration);
+
 var app = builder.Build();
 
-// Configure the HTTP request pipeline.
+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,22 @@
 {
+  "Email": {
+    "Credentials": {
+      "Username": "shop@litecharms.co.za"
+    },
+    "Port": 465,
+    "Host": "mail.litecharms.co.za",
+    "UseSsl": true
+  },
+  "Monitoring": {
+    "ApiKey": "",
+    "Address": "http://aspire-dashboard-service.aspire.svc.cluster.local:18889",
+    "ServiceName": "LiteCharms.Shop"
+  },
   "Logging": {
     "LogLevel": {
       "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+      "Microsoft.AspNetCore": "Warning",
+      "Microsoft.EntityFrameworkCore": "Error"
     }
   },
   "AllowedHosts": "*"

MidrandBookshop/wwwroot/app.css

@@ -1,60 +1,114 @@
-html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
+
+: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 {
-    color: #006bb7;
+/* Global Reset & Core Variables Mapping */
+body {
+    background-color: var(--mb-bg);
+    color: var(--mb-text-dark);
+    font-family: var(--font-ui);
+    -webkit-font-smoothing: antialiased;
 }
 
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
+h1, h2, h3, .display-font {
+    font-family: var(--font-heading);
+    font-weight: 400;
 }
 
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+/* Custom Navigation Pill Styling */
+.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 {
-    padding-top: 1.1rem;
+.nav-pill-link {
+    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 {
-    outline: none;
-}
-
-.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."
+    .nav-pill-link i {
+        width: 16px;
+        height: 16px;
+        stroke-width: 1.5;
     }
 
-.darker-border-checkbox.form-check-input {
-    border-color: #929292;
+    /* Navigation Pill States */
+    .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 {
-    color: var(--bs-secondary-color);
-    text-align: end;
+.transition-smooth {
+    transition: color 0.2s ease;
 }
 
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-    text-align: start;
+    .transition-smooth:hover {
+        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,160 @@
+---
+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"
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: midrandbooks-secrets
+  namespace: midrandbooks-uat
+type: Opaque
+data:  
+  connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
+  connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
+  aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+---
+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: 1
+  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: ConnectionStrings__PostgresScheduler
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: connection-string-quartz
+            - name: ConnectionStrings__PostgresMidrandShop
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: connection-string            
+            - name: Monitoring__Address
+              valueFrom:
+                configMapKeyRef:
+                  name: midrandbooks-config
+                  key: Monitoring__Address
+            - name: Monitoring__ServiceName
+              valueFrom:
+                configMapKeyRef:
+                  name: midrandbooks-config
+                  key: Monitoring__ServiceName
+            - 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>