From 4b48493fd04e41542fcb1081fda00bdb239ae3ea Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Tue, 10 Oct 2023 16:44:00 +0200
Subject: [PATCH 01/13] Fixed Mobile Menubar

---
 src/apps/blazor-app/Shared/NavMenu.razor | 59 ++++++++++++++++--------
 src/apps/blazor-app/Styles/app.css       | 23 +++++++++
 src/apps/blazor-app/wwwroot/css/app.css  | 36 +++++++++++++++
 3 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/src/apps/blazor-app/Shared/NavMenu.razor b/src/apps/blazor-app/Shared/NavMenu.razor
index 4a631139..8ce91756 100644
--- a/src/apps/blazor-app/Shared/NavMenu.razor
+++ b/src/apps/blazor-app/Shared/NavMenu.razor
@@ -27,7 +27,7 @@
   class="fixed top-0 left-0 shadow-sm bg-white transition-all duration-300 delay-[250ms] w-full z-20 @(isScrollingDown ? "h-0" : "h-24") ">
 </div>
 <header
-  class="fixed h-20 left-0 bg-transparent w-full z-20 transition-all duration-300 delay-[250ms] @(isScrollingDown ? "-top-20" : "top-0")">
+  class="fixed h-20 left-0 bg-transparent w-full z-40 transition-all duration-300 delay-[250ms] @(isScrollingDown ? "-top-20" : "top-0")">
   <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
     <div class="flex lg:flex-1">
       @* BlueSkies Logo *@
@@ -165,7 +165,7 @@
   @* Mobile menu, show/hide based on menu open state. *@
   @if (collapseNavMenu)
   {
-    <div class="lg:hidden" role="dialog" aria-modal="true">
+    <div class="lg:hidden shadow @navAnimation z-50  fixed top-0 right-0 h-full max-w-sm  w-full" role="dialog" aria-modal="true">
       @* Background backdrop, show/hide based on slide-over state. *@
       <div class="fixed inset-0 z-10"></div>
       <div
@@ -186,27 +186,31 @@
             </button>
           </div>
           @* Mobile Menu Links *@
-          <div class="flex flex-col w-full mt-5">
-            <a href="" class="p-3 w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300"
-            @onclick='(() => {forceNavigate("/");ToggleNavMenu();})'>Home</a>
-            <a href="" class="p-3 w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300"
-            @onclick='(() => {forceNavigate("/solarScore");ToggleNavMenu();})'>Solar
-              Score</a>
-            <a href="" class="p-3 w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300"
-            @onclick='(() => {forceNavigate("/advanced");ToggleNavMenu();})'>Advanced</a>
+          <div class="flex flex-col gap-4 w-full mt-5">
+            @* Home *@
+            <a href="/" class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300" @onclick='(() => {forceNavigate("/");ToggleNavMenu();})'>Home</a>
+            @* Solar Score *@
+            <a href="/solarScore" class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300" @onclick='(() => {forceNavigate("/solarScore");ToggleNavMenu();})'>Solar Score</a>
+            @* Calculations *@
+            <a href="/advanced" class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300" @onclick='(() => {forceNavigate("/advanced");ToggleNavMenu();})'>Calculations</a>
+            @* Get In Touch *@
+            <a @onclick="ToggleNavMenu" href="/getintouch" class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300">Get In Touch</a>
+
             @if (loggedIn == true)
             {
-              <p @onclick="ToggleNavMenu"
-                class="p-3 w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300">@userEmail</p>
+              @* Dashboard *@
+              <a @onclick="ToggleNavMenu" href="/dashboard"
+                class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300">Dashboard</a>
+              @* Log Out *@
+              <a class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300" 
+                @onclick="Logout">Logout</a>
             }
             else
             {
-              <p @onclick="ToggleNavMenu"
-                class="transition-all duration-300 group-hover:delay-200 delay-100 group-hover:translate-x-0 @(isScrollingDown ? "translate-x-20" : "")">
-                Log In</p>
+              @* Log In *@
+              <a @onclick="ToggleNavMenu" href="/login"
+                class="p-3 shadow-sm w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300">Log In</a>
             }
-            <a class="p-3 w-full text-left hover:bg-primary-100 rounded-xl transition-all duration-300" href=""
-              onclick="@(() => Logout())">Logout</a>
           </div>
         </div>
       </div>
@@ -239,6 +243,7 @@
     </div>
 </ModalPopup>
 @code {
+  public string navAnimation { get; set; } = "nav-slide-in";
   [Parameter]
   public bool isDashboard { get; set; } = false;
   [Parameter]
@@ -269,9 +274,23 @@
     ModalPopupHelp.Dismiss();
     chatBotService.ShowChatBot();
   }
-  private void ToggleNavMenu()
+  private async void ToggleNavMenu()
   {
-    collapseNavMenu = !collapseNavMenu;
+    if (collapseNavMenu)
+    {
+      navAnimation = "nav-slide-out";
+      StateHasChanged();
+      await Task.Delay(300);
+      collapseNavMenu = false;
+      StateHasChanged();
+    }
+    else
+    {
+      navAnimation = "nav-slide-in";
+      StateHasChanged();
+      collapseNavMenu = true;
+      StateHasChanged();
+    }
   }
 
   private void forceNavigate(string url)
@@ -358,6 +377,8 @@
 
     loggedIn = false;
     userEmail = "";
+    forceNavigate("/");
+    ToggleNavMenu();
   }
 
   private void Edit()
diff --git a/src/apps/blazor-app/Styles/app.css b/src/apps/blazor-app/Styles/app.css
index 09e1f4ac..f48a01e0 100644
--- a/src/apps/blazor-app/Styles/app.css
+++ b/src/apps/blazor-app/Styles/app.css
@@ -113,6 +113,17 @@ html {
     animation-fill-mode: forwards;
 }
 
+/* Navigation Slides */
+.nav-slide-in {
+    animation: navSlideIn .3s;
+    animation-fill-mode: forwards;
+}
+
+.nav-slide-out {
+    animation: navSlideOut .3s;
+    animation-fill-mode: forwards;
+}
+
 /* Wipe transitions */
 .wipe-down {
     animation: wipeDown .5s;
@@ -156,6 +167,18 @@ html {
     animation-fill-mode: forwards;
 }
 
+/* Navigation Slide In */ 
+@keyframes navSlideIn {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+/* Navigation Slide Out */
+@keyframes navSlideOut {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+}
+
 /* Slide Left Out Transition */
 @keyframes slideLeftOut {
     from {
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index d5e75caf..84c67588 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -3381,6 +3381,18 @@ html {
   animation-fill-mode: forwards;
 }
 
+/* Navigation Slides */
+
+.nav-slide-in {
+  animation: navSlideIn .3s;
+  animation-fill-mode: forwards;
+}
+
+.nav-slide-out {
+  animation: navSlideOut .3s;
+  animation-fill-mode: forwards;
+}
+
 /* Wipe transitions */
 
 .wipe-down {
@@ -3425,6 +3437,30 @@ html {
   animation-fill-mode: forwards;
 }
 
+/* Navigation Slide In */
+
+@keyframes navSlideIn {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Navigation Slide Out */
+
+@keyframes navSlideOut {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
 /* Slide Left Out Transition */
 
 @keyframes slideLeftOut {

From b84a4b32cba808e97dc2d426ab22b9020b0e9f7e Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:37:44 +0200
Subject: [PATCH 02/13] Minor changes to autocomplete, accordion and home page

---
 .../Components/Base/AccordionItem.razor       |  3 -
 .../Components/Home/AutoComplete.razor        | 12 +--
 .../Components/Home/EnterLocation.razor       |  2 +-
 .../blazor-app/Components/Home/Hero.razor     | 15 ++--
 src/apps/blazor-app/Pages/Index.razor         |  2 +-
 src/apps/blazor-app/wwwroot/assets/Search.svg |  4 +
 src/apps/blazor-app/wwwroot/css/app.css       | 80 +++++++++++++++++++
 7 files changed, 98 insertions(+), 20 deletions(-)
 create mode 100644 src/apps/blazor-app/wwwroot/assets/Search.svg

diff --git a/src/apps/blazor-app/Components/Base/AccordionItem.razor b/src/apps/blazor-app/Components/Base/AccordionItem.razor
index 97df479d..2eeaa6ef 100644
--- a/src/apps/blazor-app/Components/Base/AccordionItem.razor
+++ b/src/apps/blazor-app/Components/Base/AccordionItem.razor
@@ -23,9 +23,6 @@
                         <p class="@(item.active ? "" : "-translate-y-20") slide-in-active transition-all duration-300 text-primary-800">@item.content</p>
                     }
                 </div>
-                @if (item.active) {
-                    <p class="@(item.active ? "" : "-translate-y-20") slide-in-active transition-all duration-300 text-primary-800">@item.content</p>
-                }
         break;
         default:
             <div class="p-4 w-full transition-all duration-300 @(item.active ? "h-fit sm:h-52 md:h-48" : "h-fit sm:h-24 md:h-20") rounded-xl border-1 border-primary-500 flex flex-col gap-4">
diff --git a/src/apps/blazor-app/Components/Home/AutoComplete.razor b/src/apps/blazor-app/Components/Home/AutoComplete.razor
index eb432f19..5c4fc91a 100644
--- a/src/apps/blazor-app/Components/Home/AutoComplete.razor
+++ b/src/apps/blazor-app/Components/Home/AutoComplete.razor
@@ -10,18 +10,12 @@
 <div class="mt-20 relative">
     <div class="relative mt-2 z-30 rounded-full shadow-sm border border-primary-500">
         <div class="pointer-events-none absolute top-1/2 -translate-y-1/2 md:-translate-y-[80%] flex justify-center mt-2 md:mt-0 items-center pl-3">
-            <span class="text-gray-500 md:translate-x-5 sm:text-sm w-10 h-10 md:w-fit md:h-fit">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M10.889 19.4174C15.7982 19.4174 19.7778 15.4377 19.7778 10.5285C19.7778 5.61934 15.7982 1.63965 10.889 1.63965C5.97975 1.63965 2.00006 5.61934 2.00006 10.5285C2.00006 15.4377 5.97975 19.4174 10.889 19.4174Z"
-                        stroke="#000F52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                    <path d="M22.0004 21.6395L17.1671 16.8062" stroke="#000F52" stroke-width="2" stroke-linecap="round"
-                        stroke-linejoin="round" />
-                </svg>
+            <span class="text-gray-500 md:translate-x-5 scale-90 sm:text-sm w-10 h-10 md:w-fit md:h-fit">
+                <Image ImageName="Search.svg" />
             </span>
         </div>
         <input
-            class="pl-10 md:pl-20 w-full rounded-full h-16 py-1.5 text-gray-900 placeholder:text-gray-400  sm:text-sm sm:leading-6 focus:border-none focus:ring-0 focus:outline-none focus:bg-primary-50"
+            class="pl-14 md:pl-20 w-full rounded-full h-16 py-1.5 text-gray-900 placeholder:text-gray-400  sm:text-sm sm:leading-6 focus:border-none focus:ring-0 focus:outline-none focus:bg-primary-50"
             type="text" @bind="searchQuery" @onfocus="ShowSuggestions" @onkeyup="ResetTimer" @onblur="HideSuggestions" @bind:event="oninput" placeholder="Enter your address" />
     </div>
     <div class="absolute z-50 transition-all duration-200  @(suggestions.Count == 0 ? "opacity-0 h-0 -translate-y-10" : "opacity-100") w-full bg-white top-full left-0">
diff --git a/src/apps/blazor-app/Components/Home/EnterLocation.razor b/src/apps/blazor-app/Components/Home/EnterLocation.razor
index ced15150..f73f08ae 100644
--- a/src/apps/blazor-app/Components/Home/EnterLocation.razor
+++ b/src/apps/blazor-app/Components/Home/EnterLocation.razor
@@ -13,7 +13,7 @@
 @inject BlazorApp.Data.LoadingService loadingService
 @inject BlazorApp.Data.ToastService toastService
 
-<div class="mx-auto max-w-2xl px-10  py-32 sm:py-20 lg:py-28 relative">
+<div class="mx-auto max-w-2xl px-5 sm:px-10  py-32 sm:py-20 lg:py-28 relative">
     <div class="text-center">
         <Heading>
             <Header>
diff --git a/src/apps/blazor-app/Components/Home/Hero.razor b/src/apps/blazor-app/Components/Home/Hero.razor
index 7517d822..a7275f78 100644
--- a/src/apps/blazor-app/Components/Home/Hero.razor
+++ b/src/apps/blazor-app/Components/Home/Hero.razor
@@ -4,18 +4,21 @@
 <div class="bg-transparent h-fit w-full">
   <div class="relative isolate pt-14">
     <div class="grid gap-4 -mt-20 md:-mt-0 grid-cols-1 lg:grid-cols-2">
-      <EnterLocation />
-      <div class="relative mx-auto -translate-y-24 sm:-translate-y-0 max-w-xl px-5 lg:px-0 py-24 sm:py-20 lg:py-28 -mt-20">
-        <p class="text-center text-lg text-primary-950 font-bold mb-5">Solar score is a value calculated from<br/>your roofs sunlight exposure</p>
-        @* <Image ImageName="Hero Image.jpg" css="absolute z-10 rounded-3xl" />
-        <Image ImageName="Image Container.jpg" css="scale-150 translate-x-60 blur-lg" /> *@
-        <Image ImageName="landingSmall.gif" css="scale-125" alt="Landing Graphic"/>
+      <div class="hidden sm:block">
+        <EnterLocation />
+      </div>
+      <div class="relative mx-auto -mb-28  sm:-translate-y-0 max-w-xl px-3 lg:px-0 mt-24 sm:py-20 lg:py-28 sm:-mt-20">
+        <p class="text-center w-full text-lg text-primary-950 font-bold mb-5">Solar score is a value calculated from your roofs sunlight exposure</p>
+        <Image ImageName="landingSmall.gif" css="ml-4 sm:ml-0 scale-125" alt="Landing Graphic"/>
         <div class="text-center">
             <p class="mt-6 text-6xl text-primary-900 font-black mb-5">@countdownValue
             <span class="text-6xl text-gray-400 font-extrabold -ml-4">%</span>
             </p>
         </div>
       </div>
+      <div class="block sm:hidden">
+        <EnterLocation />
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/apps/blazor-app/Pages/Index.razor b/src/apps/blazor-app/Pages/Index.razor
index 1d55d6ec..e108865a 100644
--- a/src/apps/blazor-app/Pages/Index.razor
+++ b/src/apps/blazor-app/Pages/Index.razor
@@ -36,7 +36,7 @@
             @* Frequently Asked Questions *@
             <div class="md:mt-72 mb-52 relative">
               <Image ImageName="shapes.svg" css="absolute -top-[55%] md:-top-1/3 -z-20 -right-[60%] md:-right-[58%] w-1/2 md:w-full h-full" alt="Shapes"/>
-              <Image ImageName="Robert_Confused.png" css="absolute -bottom-40 md:-top-60 lg:-top-32 right-10 xl:right-16 h-52 md:h-60 lg:h-80" alt="Rob"/>
+              <Image ImageName="Robert_Confused.png" css="absolute -bottom-44 md:-top-60 lg:-top-32 right-10 xl:right-16 h-52 md:h-60 lg:h-80" alt="Rob"/>
               <Image ImageName="Panels.svg" css="absolute -bottom-40 md:-top-52 lg:-top-20 -z-20 left-2 xl:left-8 h-32 md:h-40 xl:h-52" alt="Shapes"/>
               <BlazorApp.Components.Home.FAQ />
             </div>
diff --git a/src/apps/blazor-app/wwwroot/assets/Search.svg b/src/apps/blazor-app/wwwroot/assets/Search.svg
new file mode 100644
index 00000000..0bdcfa25
--- /dev/null
+++ b/src/apps/blazor-app/wwwroot/assets/Search.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8889 19.4174C15.7981 19.4174 19.7777 15.4377 19.7777 10.5285C19.7777 5.61934 15.7981 1.63965 10.8889 1.63965C5.97969 1.63965 2 5.61934 2 10.5285C2 15.4377 5.97969 19.4174 10.8889 19.4174Z" stroke="#000F52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.0013 21.6395L17.168 16.8062" stroke="#000F52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 84c67588..e40d73ad 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -903,6 +903,14 @@ video {
   top: 100%;
 }
 
+.-bottom-3 {
+  bottom: -0.75rem;
+}
+
+.-bottom-44 {
+  bottom: -11rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1280,6 +1288,26 @@ video {
   margin-top: 20rem;
 }
 
+.-mb-10 {
+  margin-bottom: -2.5rem;
+}
+
+.-mb-32 {
+  margin-bottom: -8rem;
+}
+
+.-mb-28 {
+  margin-bottom: -7rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -1930,6 +1958,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-20 {
+  --tw-translate-y: 5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-rotate-12 {
   --tw-rotate: -12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2548,6 +2581,16 @@ video {
   background-color: rgb(255 193 8 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2817,6 +2860,18 @@ video {
   padding-top: 1rem;
 }
 
+.pl-12 {
+  padding-left: 3rem;
+}
+
+.pl-14 {
+  padding-left: 3.5rem;
+}
+
+.pt-24 {
+  padding-top: 6rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -4144,6 +4199,22 @@ html {
     margin-top: 10rem;
   }
 
+  .sm\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:h-24 {
     height: 6rem;
   }
@@ -4212,6 +4283,11 @@ html {
     padding-bottom: 5rem;
   }
 
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .sm\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
@@ -4323,6 +4399,10 @@ html {
     display: flex;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:h-20 {
     height: 5rem;
   }

From 61e9753ebdee1a20e3bf2cd3b028430cfed66a73 Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Tue, 10 Oct 2023 22:36:08 +0200
Subject: [PATCH 03/13] More minor responsiveness changes

---
 .../Components/Home/AutoComplete.razor        |   4 +-
 .../blazor-app/Components/Home/Hero.razor     |  11 +-
 src/apps/blazor-app/Components/Toast.razor    |   2 +-
 src/apps/blazor-app/Pages/Index.razor         |   8 +-
 src/apps/blazor-app/Shared/MainLayout.razor   |   2 +-
 src/apps/blazor-app/wwwroot/css/app.css       | 136 ++++++++++++++++++
 6 files changed, 147 insertions(+), 16 deletions(-)

diff --git a/src/apps/blazor-app/Components/Home/AutoComplete.razor b/src/apps/blazor-app/Components/Home/AutoComplete.razor
index 5c4fc91a..a95d9635 100644
--- a/src/apps/blazor-app/Components/Home/AutoComplete.razor
+++ b/src/apps/blazor-app/Components/Home/AutoComplete.razor
@@ -18,8 +18,8 @@
             class="pl-14 md:pl-20 w-full rounded-full h-16 py-1.5 text-gray-900 placeholder:text-gray-400  sm:text-sm sm:leading-6 focus:border-none focus:ring-0 focus:outline-none focus:bg-primary-50"
             type="text" @bind="searchQuery" @onfocus="ShowSuggestions" @onkeyup="ResetTimer" @onblur="HideSuggestions" @bind:event="oninput" placeholder="Enter your address" />
     </div>
-    <div class="absolute z-50 transition-all duration-200  @(suggestions.Count == 0 ? "opacity-0 h-0 -translate-y-10" : "opacity-100") w-full bg-white top-full left-0">
-        <ul id="suggestionList" class="flex flex-col mx-auto gap-2 mt-4 shadow p-2 rounded-xl w-full z-40">
+    <div class="absolute z-50 transition-all bg-transparent duration-200  @(suggestions.Count == 0 ? "opacity-0 h-0 -translate-y-10" : "opacity-100") w-full bg-white top-full left-0">
+        <ul id="suggestionList" class="flex flex-col bg-white mx-auto gap-2 mt-4 shadow p-2 rounded-xl w-full z-40">
             @{int i = 100;}
             @foreach (var suggestion in suggestions)
             {
diff --git a/src/apps/blazor-app/Components/Home/Hero.razor b/src/apps/blazor-app/Components/Home/Hero.razor
index a7275f78..1940f390 100644
--- a/src/apps/blazor-app/Components/Home/Hero.razor
+++ b/src/apps/blazor-app/Components/Home/Hero.razor
@@ -3,11 +3,9 @@
 
 <div class="bg-transparent h-fit w-full">
   <div class="relative isolate pt-14">
-    <div class="grid gap-4 -mt-20 md:-mt-0 grid-cols-1 lg:grid-cols-2">
-      <div class="hidden sm:block">
-        <EnterLocation />
-      </div>
-      <div class="relative mx-auto -mb-28  sm:-translate-y-0 max-w-xl px-3 lg:px-0 mt-24 sm:py-20 lg:py-28 sm:-mt-20">
+    <div class="flex flex-col-reverse sm:flex-col lg:grid gap-4 -mt-20 md:-mt-0  lg:grid-cols-2 ">
+      <EnterLocation />
+      <div class="relative mx-auto -mb-28 sm:-mb-0  sm:-translate-y-0 max-w-xl px-3 lg:px-0 mt-24 sm:py-20 lg:py-28 sm:-mt-20">
         <p class="text-center w-full text-lg text-primary-950 font-bold mb-5">Solar score is a value calculated from your roofs sunlight exposure</p>
         <Image ImageName="landingSmall.gif" css="ml-4 sm:ml-0 scale-125" alt="Landing Graphic"/>
         <div class="text-center">
@@ -16,9 +14,6 @@
             </p>
         </div>
       </div>
-      <div class="block sm:hidden">
-        <EnterLocation />
-      </div>
     </div>
   </div>
 </div>
diff --git a/src/apps/blazor-app/Components/Toast.razor b/src/apps/blazor-app/Components/Toast.razor
index 127d333f..af45b032 100644
--- a/src/apps/blazor-app/Components/Toast.razor
+++ b/src/apps/blazor-app/Components/Toast.razor
@@ -22,7 +22,7 @@
             break;
     }
 }
-<div class="e w-full p-4 h-fit min-w-fit max-w-md @show rounded-lg shadow-md relative">
+<div class="w-full p-4 h-fit min-w-fit max-w-md @show rounded-lg shadow-md relative">
     <div class="flex z-30 justify-between relative">
         <div class="p-1 flex flex-col gap-3">
             <div class="flex flex-row gap-2">
diff --git a/src/apps/blazor-app/Pages/Index.razor b/src/apps/blazor-app/Pages/Index.razor
index e108865a..350d0ae7 100644
--- a/src/apps/blazor-app/Pages/Index.razor
+++ b/src/apps/blazor-app/Pages/Index.razor
@@ -25,11 +25,11 @@
     else
     {
       <div class="w-full relative">
-        <BlazorApp.Components.Home.Hero />
+          <BlazorApp.Components.Home.Hero />
             @* How it works *@
-            <Image ImageName="shapes.svg" css="absolute -top-[550px] md:-top-96 -translate-y-28 md:-translate-y-0  -z-10 -left-1/2  mw-2/3 -translate-y-28  md:-translate-y-0 scale-[2] md:scale-100 w-2/3 h-2/3" alt="Shapes"/>
-            <div class="mt-36 mb-40 relative -z-10">
-              <Image ImageName="Robert_Pointing.png" css="absolute -top-24 md:top-0 -z-10 left-16 md:left-32 robert-slide-up h-52 md:h-72" alt="Rob"/>
+            <Image ImageName="shapes.svg" css="absolute -top-80 md:-top-96 -translate-y-28 md:-translate-y-0  -z-10 -left-1/2  mw-2/3 -translate-y-28  md:-translate-y-0 scale-[2] md:scale-100 w-2/3 h-2/3" alt="Shapes"/>
+            <div class="mt-36 lg:mt-5 xl:-mt-24 mb-40 relative -z-10">
+              <Image ImageName="Robert_Pointing.png" css="absolute -top-24 sm:-translate-y-20 md:-translate-y-0 -translate-x-10 sm:-translate-x-20 md:-translate-x-0 md:top-0 -z-10 left-16 md:left-32 robert-slide-up h-52 md:h-72" alt="Rob"/>
               <BlazorApp.Components.Home.HowItWorks />
             </div>         
 
diff --git a/src/apps/blazor-app/Shared/MainLayout.razor b/src/apps/blazor-app/Shared/MainLayout.razor
index 540c1bc3..f7905cfd 100644
--- a/src/apps/blazor-app/Shared/MainLayout.razor
+++ b/src/apps/blazor-app/Shared/MainLayout.razor
@@ -22,7 +22,7 @@
     @* Toast implementation *@
         @if(isToastVisible) {
             string move = isScrollingDown ? "-translate-y-20" : "translate-y-0";
-            <div class="@move @toastAnimation flex-col w-full gap-4 transition-all p-2 duration-300 delay-300 h-20 flex z-50 fixed top-28 left-9">
+            <div class="@move @toastAnimation flex-col w-full gap-4 transition-all p-2 duration-300 delay-300 h-20 flex z-50 fixed top-28 left-0 md:left-9">
                 <Toast Type="@type" Title="@title">
                     <p>@message</p>
                 </Toast>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index e40d73ad..1026582c 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -911,6 +911,50 @@ video {
   bottom: -11rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
+.-top-32 {
+  top: -8rem;
+}
+
+.-top-48 {
+  top: -12rem;
+}
+
+.-top-\[50\%\] {
+  top: -50%;
+}
+
+.-top-\[30\%\] {
+  top: -30%;
+}
+
+.-top-\[0\%\] {
+  top: -0%;
+}
+
+.-top-\[20\%\] {
+  top: -20%;
+}
+
+.top-\[20\%\] {
+  top: 20%;
+}
+
+.-top-0 {
+  top: -0px;
+}
+
+.-top-60 {
+  top: -15rem;
+}
+
+.-top-80 {
+  top: -20rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1963,6 +2007,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-10 {
+  --tw-translate-x: -2.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-rotate-12 {
   --tw-rotate: -12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2591,6 +2640,11 @@ video {
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -4187,6 +4241,15 @@ html {
     right: -100px;
   }
 
+  .sm\:left-9 {
+    left: 2.25rem;
+  }
+
+  .sm\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -4207,6 +4270,10 @@ html {
     margin-left: 0px;
   }
 
+  .sm\:-mb-0 {
+    margin-bottom: -0px;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -4248,6 +4315,21 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:translate-x-20 {
+    --tw-translate-x: 5rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .sm\:-translate-x-20 {
+    --tw-translate-x: -5rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .sm\:-translate-y-20 {
+    --tw-translate-y: -5rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .sm\:transform {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
@@ -4256,6 +4338,10 @@ html {
     flex-direction: row;
   }
 
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -4367,6 +4453,10 @@ html {
     top: 0.75rem;
   }
 
+  .md\:left-9 {
+    left: 2.25rem;
+  }
+
   .md\:-mt-0 {
     margin-top: -0px;
   }
@@ -4488,6 +4578,16 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .md\:translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .md\:-translate-x-0 {
+    --tw-translate-x: -0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .md\:scale-100 {
     --tw-scale-x: 1;
     --tw-scale-y: 1;
@@ -4612,6 +4712,22 @@ html {
     margin-bottom: 0px;
   }
 
+  .lg\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .lg\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .lg\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -4620,6 +4736,10 @@ html {
     display: flex;
   }
 
+  .lg\:grid {
+    display: grid;
+  }
+
   .lg\:hidden {
     display: none;
   }
@@ -4790,6 +4910,22 @@ html {
     margin-top: 15rem;
   }
 
+  .xl\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .xl\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .xl\:-mt-28 {
+    margin-top: -7rem;
+  }
+
+  .xl\:-mt-24 {
+    margin-top: -6rem;
+  }
+
   .xl\:block {
     display: block;
   }

From 41e62508a4c3d3aa3f2d92be77707e174dbc8fb0 Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Wed, 11 Oct 2023 15:15:19 +0200
Subject: [PATCH 04/13] Changed Button implementation

---
 .../Components/Admin/ApplianceEntry.razor     |   6 +-
 .../Components/Admin/KeyEntry.razor           |   6 +-
 .../Components/Admin/ProductEntry.razor       |   6 +-
 .../Components/Advanced/BuildYourHome.razor   |  28 +-
 .../Components/Advanced/Results.razor         |   6 +-
 .../Components/Advanced/Variants.razor        |   2 -
 .../blazor-app/Components/Base/Button.razor   |   4 +-
 .../Components/Chatbot/Chatbot.razor          |   4 +-
 .../Dashboard/SelectCalculation.razor         |   2 -
 src/apps/blazor-app/Components/Home/CTA.razor |   4 -
 .../Components/Home/EnterLocation.razor       |   4 +-
 .../Components/SolarScore/Results.razor       |  26 +-
 .../Tutorial/AdvancedTutorial.razor           |  20 +-
 .../Tutorial/DashboardTutorial.razor          |   6 -
 .../Components/Tutorial/HomeTutorial.razor    |  16 +-
 .../Components/Tutorial/IntroTutorial.razor   |   8 -
 .../Tutorial/SolarScoreTutorial.razor         |  16 +-
 .../Pages/Admin/AdminAppliances.razor         |  10 +-
 .../blazor-app/Pages/Admin/AdminKeys.razor    |  10 +-
 .../Pages/Admin/AdminProducts.razor           |  10 +-
 .../Pages/AdvancedCalculations.razor          |  48 +--
 src/apps/blazor-app/Pages/Dashboard.razor     |  10 +-
 src/apps/blazor-app/Pages/Login.razor         |   4 +-
 src/apps/blazor-app/Pages/Register.razor      |   4 +-
 src/apps/blazor-app/Shared/NavMenu.razor      |  12 +-
 src/apps/blazor-app/wwwroot/css/app.css       | 277 ++++--------------
 26 files changed, 146 insertions(+), 403 deletions(-)

diff --git a/src/apps/blazor-app/Components/Admin/ApplianceEntry.razor b/src/apps/blazor-app/Components/Admin/ApplianceEntry.razor
index ae50c290..8c673776 100644
--- a/src/apps/blazor-app/Components/Admin/ApplianceEntry.razor
+++ b/src/apps/blazor-app/Components/Admin/ApplianceEntry.razor
@@ -20,12 +20,12 @@
         <td class="px-6 py-4 flex gap-3">
         <div onclick="@(() => toggleRecordState("save"))">
             <Button style="pill">
-                <content>Save</content>
+                <p>Save</p>
             </Button>
         </div>
         <div onclick="@(() => toggleRecordState())">
             <Button style="pill-danger">
-                <content>Cancel</content>
+                <p>Cancel</p>
             </Button>
         </div>
     </td>
@@ -42,7 +42,7 @@
         </td>
         <td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
             <Button style="pill">
-                <content>Edit</content>
+                <p>Edit</p>
             </Button>
         </td>
         }
diff --git a/src/apps/blazor-app/Components/Admin/KeyEntry.razor b/src/apps/blazor-app/Components/Admin/KeyEntry.razor
index f1bfbeca..d96f1cce 100644
--- a/src/apps/blazor-app/Components/Admin/KeyEntry.razor
+++ b/src/apps/blazor-app/Components/Admin/KeyEntry.razor
@@ -41,12 +41,12 @@
         <td class="px-6 py-4 flex gap-3">
             <div onclick="@(() => toggleRecordState("save"))">
                 <Button style="pill">
-                    <content>Save</content>
+                    <p>Save</p>
                 </Button>
             </div>
             <div onclick="@(() => toggleRecordState())">
                 <Button style="pill-danger">
-                    <content>Cancel</content>
+                    <p>Cancel</p>
                 </Button>
             </div>
         </td>
@@ -75,7 +75,7 @@
         </td>
         <td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
             <Button style="pill">
-                <content>Edit</content>
+                <p>Edit</p>
             </Button>
         </td>
     }
diff --git a/src/apps/blazor-app/Components/Admin/ProductEntry.razor b/src/apps/blazor-app/Components/Admin/ProductEntry.razor
index 4dd713c7..13d89d7e 100644
--- a/src/apps/blazor-app/Components/Admin/ProductEntry.razor
+++ b/src/apps/blazor-app/Components/Admin/ProductEntry.razor
@@ -25,12 +25,12 @@
         <td class="px-6 py-4 flex gap-3">
         <div onclick="@(() => toggleRecordState("save"))">
             <Button style="pill">
-                <content>Save</content>
+                <p>Save</p>
             </Button>
         </div>
         <div onclick="@(() => toggleRecordState())">
             <Button style="pill-danger">
-                <content>Cancel</content>
+                <p>Cancel</p>
             </Button>
         </div>
     </td>
@@ -50,7 +50,7 @@
         </td>
         <td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
             <Button style="pill">
-                <content>Edit</content>
+                <p>Edit</p>
             </Button>
         </td>
         }
diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 7bac43b6..036e1ff5 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -206,9 +206,7 @@
                                             </div>
                                             <div @onclick="CreateCustomSystem" class="mx-auto pt-4 w-24">
                                                 <Button style="pill" >
-                                                    <content>
-                                                        <p  class="font-semibold">Create</p>
-                                                    </content>
+                                                    <p  class="font-semibold">Create</p>
                                                 </Button>
                                             </div>
                                         </div>
@@ -218,9 +216,7 @@
                     {
                                 <div @onclick="CustomSystemSelected">
                                     <Button style="pill" >
-                                        <content>
-                                            <p  class="font-semibold">Custom</p>
-                                        </content>
+                                        <p  class="font-semibold">Custom</p>
                                     </Button>
                                 </div>
                     }
@@ -388,9 +384,7 @@
         {
             <div @onclick="SetPanels">
                 <Button>
-                    <content>
-                        Save
-                    </content>
+                    <p>Save</p>
                 </Button>
             </div>
         }
@@ -398,15 +392,13 @@
         {
             <div @onclick="SetBatteries">
                 <Button>
-                    <content>
-                        Save
-                    </content>
+                    <p>Save</p>
                 </Button>
             </div>
         }
             <div @onclick="SystemModalPopup.Dismiss">
                 <Button style="outline">
-                    <content>Cancel</content>
+                    <p>Cancel</p>
                 </Button>
             </div>
         </div>
@@ -427,9 +419,7 @@
         {
                 <div @onclick="UpdateCalculation">
                     <Button>
-                        <content>
-                        Update
-                            </content>
+                        <p>Update</p>
                     </Button>
                 </div>
         }
@@ -437,15 +427,13 @@
         {
                 <div @onclick="SaveCalculation">
                     <Button>
-                        <content>
-                            Save
-                        </content>
+                        <p>Save</p>
                     </Button>
                 </div>
         }
             <div @onclick="ModalPopup.Dismiss">
                 <Button style="outline">
-                    <content>Cancel</content>
+                    <p>Cancel</p>
                 </Button>
             </div>
         </div>
diff --git a/src/apps/blazor-app/Components/Advanced/Results.razor b/src/apps/blazor-app/Components/Advanced/Results.razor
index 1684ce7e..854aa0df 100644
--- a/src/apps/blazor-app/Components/Advanced/Results.razor
+++ b/src/apps/blazor-app/Components/Advanced/Results.razor
@@ -96,7 +96,7 @@
     <div class="flex flex-row gap-4 justify-end">
         <div @onclick="ModalPopupSolarScore.Dismiss">
             <Button style="outline">
-                <content>Dismiss</content>
+                <p>Dismiss</p>
             </Button>
         </div>
     </div>
@@ -106,7 +106,7 @@
     <div class="flex flex-row gap-4 justify-end">
         <div @onclick="ModalPopupHours.Dismiss">
             <Button style="outline">
-                <content>Dismiss</content>
+                <p>Dismiss</p>
             </Button>
         </div>
     </div>
@@ -117,7 +117,7 @@
     <div class="flex flex-row gap-4 justify-end">
         <div @onclick="ModalPopupAvg.Dismiss">
             <Button style="outline">
-                <content>Dismiss</content>
+                <p>Dismiss</p>
             </Button>
         </div>
     </div>
diff --git a/src/apps/blazor-app/Components/Advanced/Variants.razor b/src/apps/blazor-app/Components/Advanced/Variants.razor
index 9264b4f6..f99b0475 100644
--- a/src/apps/blazor-app/Components/Advanced/Variants.razor
+++ b/src/apps/blazor-app/Components/Advanced/Variants.razor
@@ -49,9 +49,7 @@
                     </div>
                 <div class="my-auto translate-y-2"  @onclick='@(() => AddVariant(value!, selectedAppliance, powerUsage ))'>
                     <Button style="pill">
-                        <content>
                             <p>Add Variant</p>
-                        </content>
                     </Button>
                 </div>
             </div>
diff --git a/src/apps/blazor-app/Components/Base/Button.razor b/src/apps/blazor-app/Components/Base/Button.razor
index 816f50cb..c4a8353f 100644
--- a/src/apps/blazor-app/Components/Base/Button.razor
+++ b/src/apps/blazor-app/Components/Base/Button.razor
@@ -1,6 +1,6 @@
 <div class="@css">
     <button class="@GetDynamicClasses() h-full w-full hover:shadow-md hover:-translate-y-1 transition-all duration-300 ease-in-out">
-        @content
+        @ChildContent
     </button>
 </div>
 
@@ -9,7 +9,7 @@
     public string? style { get; set; }
 
     [Parameter]
-    public RenderFragment? content { get; set; }
+    public RenderFragment? ChildContent { get; set; }
 
     [Parameter]
     public string? css { get; set; }
diff --git a/src/apps/blazor-app/Components/Chatbot/Chatbot.razor b/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
index 2a85ef65..10bcd1ae 100644
--- a/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
+++ b/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
@@ -58,9 +58,7 @@
                 @onkeypress="HandleKeyPress" />
             <div @onclick="SendMessage">
                 <Button style="pill">
-                    <content>
-                        <p class="text-sm font-semibold hover:text-white">Send</p>
-                    </content>
+                    <p class="text-sm font-semibold hover:text-white">Send</p>/
                 </Button>
             </div>
 
diff --git a/src/apps/blazor-app/Components/Dashboard/SelectCalculation.razor b/src/apps/blazor-app/Components/Dashboard/SelectCalculation.razor
index 5969bfd6..02bc0e85 100644
--- a/src/apps/blazor-app/Components/Dashboard/SelectCalculation.razor
+++ b/src/apps/blazor-app/Components/Dashboard/SelectCalculation.razor
@@ -44,9 +44,7 @@
         </Heading>
         <div @onclick="GenerateReport">
             <Button style="pill" css="h-14 max-w-sm">
-                <content>
                     <a class="text-sm font-semibold hover:text-white">Generate Report</a>
-                </content>
             </Button>
         </div>
     } else {
diff --git a/src/apps/blazor-app/Components/Home/CTA.razor b/src/apps/blazor-app/Components/Home/CTA.razor
index 25940126..d059409b 100644
--- a/src/apps/blazor-app/Components/Home/CTA.razor
+++ b/src/apps/blazor-app/Components/Home/CTA.razor
@@ -34,16 +34,12 @@
         <div class="flex space-x-3 mt-5">
           <a href="/solarscore" >
             <Button css="h-14" style="pill">
-              <content>
                 <p class="text-sm sm:text-base">Get Started</p>
-              </content>
             </Button>
           </a>
           <div @onclick="Register">
             <Button style="outline" >
-              <content>
                 <input type="submit"  value="Sign Up" />
-              </content>
             </Button>
           </div>
         </div>
diff --git a/src/apps/blazor-app/Components/Home/EnterLocation.razor b/src/apps/blazor-app/Components/Home/EnterLocation.razor
index f73f08ae..60bb4be1 100644
--- a/src/apps/blazor-app/Components/Home/EnterLocation.razor
+++ b/src/apps/blazor-app/Components/Home/EnterLocation.razor
@@ -31,9 +31,7 @@
         <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6">
             <div @onclick="generateLocationData">
                 <Button style="pill" css="h-14">
-                    <content>
-                        <p class="text-sm font-semibold hover:text-white">Get Solar Score</p>
-                    </content>
+                    <p class="text-sm font-semibold hover:text-white">Get Solar Score</p>
                 </Button>
             </div>
             <a href="/dashboard" class="text-sm font-normal leading-6 text-orange-accent-500">Dashboard<span
diff --git a/src/apps/blazor-app/Components/SolarScore/Results.razor b/src/apps/blazor-app/Components/SolarScore/Results.razor
index ff3047ac..0190dada 100644
--- a/src/apps/blazor-app/Components/SolarScore/Results.razor
+++ b/src/apps/blazor-app/Components/SolarScore/Results.razor
@@ -39,14 +39,12 @@
                 <LocationItem Title="Address" ImageName="Point On Map.svg" Text="@locationData!.locationName" />
             </div>
             <div class="hidden lg:block mb-6">
-                <Button style="pill">
-                    <content>
-                        <div class="flex gap-4 px-3 py-1" @onclick="ShowModalCalculation">
-                            <p class="my-auto">More Calculations </p>
-                            <Image css="w-8 h-8" ImageName="ArrowRight.svg" alt="Arrow" />
-                        </div>
-                    </content>
-                </Button>
+                <div class="flex gap-4 px-3 py-1" @onclick="ShowModalCalculation">
+                    <Button style="pill">
+                        <p class="my-auto">More Calculations </p>
+                        <Image css="w-8 h-8" ImageName="ArrowRight.svg" alt="Arrow" />
+                    </Button>
+                </div>
             </div>
         }
         else
@@ -249,14 +247,12 @@
     <div class="flex flex-row gap-4 justify-center">
         <div @onclick="ModalPopupLogIn.Dismiss">
             <Button style="outline">
-                <content>Cancel</content>
+                <p>Cancel</p>
             </Button>
         </div>
         <div @onclick="NavigateToLogin">
             <Button style="pill">
-                <content>
-                    Log in
-                </content>
+                <p>Log in</p>
             </Button>
         </div>
     </div>
@@ -267,14 +263,12 @@
     <div class="flex flex-row gap-4 justify-center">
         <div @onclick="ModalPopupAppliances.Dismiss">
             <Button style="outline" css="w-40">
-                <content>Cancel</content>
+                <p>Cancel</p>
             </Button>
         </div>
         <div @onclick="NavigateToAdvanced">
             <Button style="pill" css="w-40">
-                <content>
-                    Calculations
-                </content>
+                <p>Calculations</p>
             </Button>
         </div>
     </div>
diff --git a/src/apps/blazor-app/Components/Tutorial/AdvancedTutorial.razor b/src/apps/blazor-app/Components/Tutorial/AdvancedTutorial.razor
index 00ca1746..380a8d73 100644
--- a/src/apps/blazor-app/Components/Tutorial/AdvancedTutorial.razor
+++ b/src/apps/blazor-app/Components/Tutorial/AdvancedTutorial.razor
@@ -13,30 +13,22 @@
     <div class="w-full mt-10 flex gap-6 justify-center">
         <div @onclick='@(() => SelectTutorial("Appliances"))'>
             <Button css='@(selectedTutorialName == "Appliances" || selectedTutorialName == "Variants"  || selectedTutorialName == "SelectTemplate" || selectedTutorialName == "RunnableHours" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Appliances</p>
-                </content>
+                <p>Appliances</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("Finances"))'>
             <Button css='@(selectedTutorialName == "Finances" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Finances</p>
-                </content>
+                <p>Finances</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("FancyData"))'>
             <Button css='@(selectedTutorialName == "FancyData" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Advanced</p>
-                </content>
+                <p>Advanced</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("Rooftop"))'>
             <Button css='@(selectedTutorialName == "Rooftop" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Rooftop Analysis</p>
-                </content>
+                <p>Rooftop Analysis</p>
             </Button>
         </div>
     </div>
@@ -58,9 +50,7 @@
             @if(selectedTutorialName == "Appliances" || selectedTutorialName == "SelectTemplate" || selectedTutorialName == "RunnableHours") {
                 <div @onclick='@(selectedTutorialName == "Appliances" ? () => SelectTutorial("SelectTemplate") : selectedTutorialName == "SelectTemplate" ? () => SelectTutorial("RunnableHours") : () => SelectTutorial("Variants") )' class="max-w-md">
                     <Button style="pill">
-                        <content>
-                            <p>Next</p>
-                        </content>
+                        <p>Next</p>
                     </Button>
                 </div>
             }
diff --git a/src/apps/blazor-app/Components/Tutorial/DashboardTutorial.razor b/src/apps/blazor-app/Components/Tutorial/DashboardTutorial.razor
index cebd707c..e7fa90e3 100644
--- a/src/apps/blazor-app/Components/Tutorial/DashboardTutorial.razor
+++ b/src/apps/blazor-app/Components/Tutorial/DashboardTutorial.razor
@@ -13,23 +13,17 @@
     <div class="w-full mt-10 flex gap-6 justify-center">
         <div @onclick='@(() => SelectTutorial("SelectCalculation"))'>
             <Button css='@(selectedTutorialName == "SelectCalculation" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
                     <p>Select Calculations</p>
-                </content>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("GenerateReport"))'>
             <Button css='@(selectedTutorialName == "GenerateReport" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
                     <p>Generate Report</p>
-                </content>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("EditDelete"))'>
             <Button css='@(selectedTutorialName == "EditDelete" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
                     <p>Edit and Delete</p>
-                </content>
             </Button>
         </div>
     </div>
diff --git a/src/apps/blazor-app/Components/Tutorial/HomeTutorial.razor b/src/apps/blazor-app/Components/Tutorial/HomeTutorial.razor
index 5d9685df..c4f31725 100644
--- a/src/apps/blazor-app/Components/Tutorial/HomeTutorial.razor
+++ b/src/apps/blazor-app/Components/Tutorial/HomeTutorial.razor
@@ -13,23 +13,17 @@
     <div class="w-full mt-10 flex gap-6 justify-center">
         <div @onclick='@(() => SelectTutorial("Navigation"))'>
             <Button css='@(selectedTutorialName == "Navigation" || selectedTutorialName == "NavigationBubbles" || selectedTutorialName == "NavigationDashboard"? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Navigation</p>
-                </content>
+                <p>Navigation</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("EnterLocation"))'>
             <Button css='@(selectedTutorialName == "EnterLocation" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Enter Location</p>
-                </content>
+                <p>Enter Location</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("FAQ"))'>
             <Button css='@(selectedTutorialName == "FAQ" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Frequently Asked Questions</p>
-                </content>
+                <p>Frequently Asked Questions</p>
             </Button>
         </div>
     </div>
@@ -51,9 +45,7 @@
             @if(selectedTutorialName == "Navigation" || selectedTutorialName == "NavigationDashboard" ) {
                 <div @onclick='@(selectedTutorialName == "Navigation" ? () => SelectTutorial("NavigationDashboard")  : () => SelectTutorial("NavigationBubbles") )' class="max-w-md">
                     <Button style="pill">
-                        <content>
-                            <p>Next</p>
-                        </content>
+                        <p>Next</p>
                     </Button>
                 </div>
             }
diff --git a/src/apps/blazor-app/Components/Tutorial/IntroTutorial.razor b/src/apps/blazor-app/Components/Tutorial/IntroTutorial.razor
index e0af9e52..706bd18b 100644
--- a/src/apps/blazor-app/Components/Tutorial/IntroTutorial.razor
+++ b/src/apps/blazor-app/Components/Tutorial/IntroTutorial.razor
@@ -8,30 +8,22 @@
         <div class="w-full mt-10 flex gap-6 justify-center">
             <div @onclick="@(() => ShowTutorial("Home"))">
                 <Button style="outline-light">
-                    <content>
                         <p>Home</p>
-                    </content>
                 </Button>
             </div>
             <div @onclick="@(() => ShowTutorial("SolarScore"))">
                 <Button style="outline-light">
-                    <content>
                         <p>Solar Score</p>
-                    </content>
                 </Button>
             </div>
             <div @onclick="@(() => ShowTutorial("Advanced"))">
                 <Button style="outline-light">
-                    <content>
                         <p>Calculation</p>
-                    </content>
                 </Button>
             </div>
             <div @onclick="@(() => ShowTutorial("Dashboard"))">
                 <Button style="outline-light">
-                    <content>
                         <p>Dashboard</p>
-                    </content>
                 </Button>
             </div>
         </div>
diff --git a/src/apps/blazor-app/Components/Tutorial/SolarScoreTutorial.razor b/src/apps/blazor-app/Components/Tutorial/SolarScoreTutorial.razor
index 71983608..0f6ff94f 100644
--- a/src/apps/blazor-app/Components/Tutorial/SolarScoreTutorial.razor
+++ b/src/apps/blazor-app/Components/Tutorial/SolarScoreTutorial.razor
@@ -13,23 +13,17 @@
     <div class="w-full mt-10 flex gap-6 justify-center">
         <div @onclick='@(() => SelectTutorial("ScoreExplained"))'>
             <Button css='@(selectedTutorialName == "ScoreExplained" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Score Explained</p>
-                </content>
+                <p>Score Explained</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("SolarScore"))'>
             <Button css='@(selectedTutorialName == "SolarScore" || selectedTutorialName == "UsableSunlight" || selectedTutorialName == "AvgProduction" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Results</p>
-                </content>
+                <p>Results</p>
             </Button>
         </div>
         <div @onclick='@(() => SelectTutorial("NextSteps"))'>
             <Button  css='@(selectedTutorialName == "NextSteps" ? "bg-primary-400 rounded-full transition-all duration-300" : "transition-all duration-300")' style="outline-light">
-                <content>
-                    <p>Next Steps</p>
-                </content>
+                <p>Next Steps</p>
             </Button>
         </div>
     </div>
@@ -51,9 +45,7 @@
             @if(selectedTutorialName == "SolarScore" || selectedTutorialName == "UsableSunlight" ) {
                 <div @onclick='@(selectedTutorialName == "SolarScore" ? () => SelectTutorial("UsableSunlight")  : () => SelectTutorial("AvgProduction") )' class="max-w-md">
                     <Button style="pill">
-                        <content>
-                            <p>Next</p>
-                        </content>
+                        <p>Next</p>
                     </Button>
                 </div>
             }
diff --git a/src/apps/blazor-app/Pages/Admin/AdminAppliances.razor b/src/apps/blazor-app/Pages/Admin/AdminAppliances.razor
index 3e0082c6..6cae6504 100644
--- a/src/apps/blazor-app/Pages/Admin/AdminAppliances.razor
+++ b/src/apps/blazor-app/Pages/Admin/AdminAppliances.razor
@@ -26,12 +26,12 @@
         <div class="flex  gap-10 items-center">
             <div @onclick="ModalPopup.Show">
                 <Button style="outline">
-                    <content>Delete</content>
+                    <p>Delete</p>
                 </Button>
             </div>
             <div @onclick="AddAppliance">
                 <Button style="pill">
-                    <content>Add</content>
+                    <p>Add</p>
                 </Button>
             </div>
 
@@ -44,14 +44,12 @@
             <div class="flex flex-row gap-4 justify-center">
                 <div @onclick="deleteAppliances">
                     <Button style="danger">
-                        <content>
-                            delete
-                        </content>
+                        <p>delete</p>
                     </Button>
                 </div>
                 <div @onclick="ModalPopup.Dismiss">
                     <Button style="outline-danger">
-                        <content>Cancel</content>
+                        <p>Cancel</p>
                     </Button>
                 </div>
             </div>
diff --git a/src/apps/blazor-app/Pages/Admin/AdminKeys.razor b/src/apps/blazor-app/Pages/Admin/AdminKeys.razor
index 1b198417..61140f30 100644
--- a/src/apps/blazor-app/Pages/Admin/AdminKeys.razor
+++ b/src/apps/blazor-app/Pages/Admin/AdminKeys.razor
@@ -26,12 +26,12 @@
         <div class="flex  gap-10 items-center">
           <div @onclick="ModalPopup.Show">
               <Button style="outline">
-                  <content>Delete</content>
+                  <p>Delete</p>
              </Button>
             </div>
             <div @onclick="AddKey">
                 <Button style="pill">
-                   <content>Add</content>
+                   <p>Add</p>
                 </Button>
             </div>
         </div>
@@ -43,14 +43,12 @@
             <div class="flex flex-row gap-4 justify-center">
                 <div @onclick="DeleteKeys">
                     <Button style="danger">
-                        <content>
-                            delete
-                        </content>
+                        <p>delete</p>
                     </Button>
                 </div>
                 <div @onclick="ModalPopup.Dismiss">
                     <Button style="outline-danger">
-                        <content>Cancel</content>
+                        <p>Cancel</p>
                     </Button>
                 </div>
             </div>
diff --git a/src/apps/blazor-app/Pages/Admin/AdminProducts.razor b/src/apps/blazor-app/Pages/Admin/AdminProducts.razor
index ad48aba9..df222c51 100644
--- a/src/apps/blazor-app/Pages/Admin/AdminProducts.razor
+++ b/src/apps/blazor-app/Pages/Admin/AdminProducts.razor
@@ -26,12 +26,12 @@
         <div class="flex  gap-10 items-center">
             <div @onclick="ModalPopup.Show">
                 <Button style="outline">
-                    <content>Delete</content>
+                    <p>Delete</p>
                 </Button>
             </div>
             <div @onclick="AddProduct">
                 <Button style="pill">
-                    <content>Add</content>
+                    <p>Add</p>
                 </Button>
             </div>
         </div>
@@ -43,14 +43,12 @@
             <div class="flex flex-row gap-4 justify-center">
                 <div @onclick="DeleteProducts">
                     <Button style="danger">
-                        <content>
-                            delete
-                        </content>
+                        <p>delete</p>
                     </Button>
                 </div>
                 <div @onclick="ModalPopup.Dismiss">
                     <Button style="outline-danger">
-                        <content>Cancel</content>
+                        <p>Cancel</p>
                     </Button>
                 </div>
             </div>
diff --git a/src/apps/blazor-app/Pages/AdvancedCalculations.razor b/src/apps/blazor-app/Pages/AdvancedCalculations.razor
index 2a280ff4..d94a7fd8 100644
--- a/src/apps/blazor-app/Pages/AdvancedCalculations.razor
+++ b/src/apps/blazor-app/Pages/AdvancedCalculations.razor
@@ -33,12 +33,22 @@
             <TabSkeleton />
         } else {
             <div class="relative flex flex-col lg:flex-row justify-evenly items-center w-full gap-4 lg:gap-0 mx-auto my-7">
-                <div class="flex flex-col sm:flex-row gap-2 w-full">
+                <div class="flex flex-col sm:flex-row gap-4 w-full">
                     <div @onclick="ResetCalculation" class="w-full cursor-pointer">
                         <Button css="h-14 bg-white rounded-full w-2/3 max-w-xs mx-auto right-10" style="outline">
-                            <content>
-                                <p class="text-[14px] sm:text-base">Reset</p>
-                            </content>
+                            <p class="text-[14px] sm:text-base">Reset</p>
+                        </Button>
+                    </div>
+                    <div @onclick="SaveCalculation" class="w-full block lg:hidden mb-4 cursor-pointer">
+                        <Button css="h-14 w-2/3 max-w-xs mx-auto" style="pill">
+                            @if (edit)
+                            {
+                                <p class="text-[14px]  sm:text-base">Update calculation</p>
+                            }
+                            else
+                            {
+                                <p class="text-[14px]  sm:text-base">Save this calculation</p>
+                            }
                         </Button>
                     </div>
                     <div class="w-full">
@@ -46,16 +56,14 @@
                     </div>
                     <div @onclick="SaveCalculation" class="w-full hidden lg:block cursor-pointer">
                         <Button css="h-14 w-2/3 max-w-xs mx-auto" style="pill">
-                            <content>
-                                @if (edit)
-                                {
-                                    <p class="text-[12px]  sm:text-base">Update calculation</p>
-                                }
-                                else
-                                {
-                                    <p class="text-[12px]  sm:text-base">Save this calculation</p>
-                                }
-                            </content>
+                            @if (edit)
+                            {
+                                <p class="text-[12px]  sm:text-base">Update calculation</p>
+                            }
+                            else
+                            {
+                                <p class="text-[12px]  sm:text-base">Save this calculation</p>
+                            }
                         </Button>
                     </div>
                 </div>
@@ -66,7 +74,7 @@
                 <div class="fade-in-active px-2">
                     <BuildYourHome  @ref="buildYourHomeComponent" @bind-selectedSystem="selectedSystem" appliances="@appliances" systems="systems" currentLocationData="currentLocationData" currentReport="currentReport" edit="edit" />
                     <div class="px-10 w-full">
-                        <Variants @bind-selectedSystem="selectedSystem" appliances="@appliances" systems="systems" currentLocationData="currentLocationData" currentReport="currentReport" edit="edit" customAppliances="@customAppliances"/>
+                        @* <Variants @bind-selectedSystem="selectedSystem" appliances="@appliances" systems="systems" currentLocationData="currentLocationData" currentReport="currentReport" edit="edit" customAppliances="@customAppliances"/> *@
                     </div>
                 </div>
             }
@@ -106,9 +114,7 @@
         {
             <div @onclick="UpdateCalculation">
                 <Button>
-                    <content>
-                    Update
-                        </content>
+                    <p>Update</p>
                 </Button>
             </div>
         }
@@ -116,15 +122,13 @@
         {
             <div @onclick="CallSaveCalculation">
                 <Button>
-                    <content>
-                        Save
-                    </content>
+                    <p>Save</p>
                 </Button>
             </div>
         }
             <div @onclick="ModalPopup.Dismiss">
                 <Button style="outline">
-                    <content>Cancel</content>
+                    <p>Cancel</p>
                 </Button>
             </div>
         </div>
diff --git a/src/apps/blazor-app/Pages/Dashboard.razor b/src/apps/blazor-app/Pages/Dashboard.razor
index 260bf641..d1bf4afd 100644
--- a/src/apps/blazor-app/Pages/Dashboard.razor
+++ b/src/apps/blazor-app/Pages/Dashboard.razor
@@ -331,9 +331,7 @@
                     <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6">
                         <div @onclick='() => CreateReport()'>
                             <Button style="pill" css="h-14">
-                                <content>
-                                    <p class="text-sm font-semibold hover:text-white">Create a Report </p>
-                                </content>
+                                <p class="text-sm font-semibold hover:text-white">Create a Report </p>
                             </Button>
                         </div>
                     </div>
@@ -347,14 +345,12 @@
                     <div class="flex flex-row gap-4 justify-center">
                         <div @onclick="Delete">
                             <Button style="danger">
-                                <content>
-                                    delete
-                                </content>
+                                <p>delete</p>
                             </Button>
                         </div>
                         <div @onclick="modalPopup.Dismiss">
                             <Button style="outline-danger">
-                                <content>Cancel</content>
+                                <p>Cancel</p>
                             </Button>
                         </div>
                     </div>
diff --git a/src/apps/blazor-app/Pages/Login.razor b/src/apps/blazor-app/Pages/Login.razor
index a1ee0d62..8b7cf707 100644
--- a/src/apps/blazor-app/Pages/Login.razor
+++ b/src/apps/blazor-app/Pages/Login.razor
@@ -56,9 +56,7 @@
                                 <Input css="mt-8" type="password" name="password" placeholder="Enter password" @bind-InputValue="password"/>
                             }
                             <Button css="mt-10 flex justify-center mx-auto max-w-xs" style="pill">
-                                <content>
-                                    <input type="submit" value="Log In" />
-                                </content>
+                                <input type="submit" value="Log In" />
                             </Button>
                             <p class="text-primary-900 text-center mt-8 text-sm">Don't have an account yet? <a href="/register" class="text-primary-500 ml-2">Register for free</a></p>
                         </form>
diff --git a/src/apps/blazor-app/Pages/Register.razor b/src/apps/blazor-app/Pages/Register.razor
index ed14be1d..c2558357 100644
--- a/src/apps/blazor-app/Pages/Register.razor
+++ b/src/apps/blazor-app/Pages/Register.razor
@@ -75,9 +75,7 @@ else if (logIn)
                             @bind-InputValue="repassword" />
                     }
                     <Button css="mt-10 flex max-w-xs mx-auto justify-center" style="pill">
-                        <content>
-                            <input type="submit" value="Register" />
-                        </content>
+                        <input type="submit" value="Register" />
                     </Button>
                     <p class="text-primary-900 text-center mt-8 text-sm">Already have an account? <a href="/login"
                             class="text-primary-500 ml-2">Login</a></p>
diff --git a/src/apps/blazor-app/Shared/NavMenu.razor b/src/apps/blazor-app/Shared/NavMenu.razor
index 8ce91756..2ede5e10 100644
--- a/src/apps/blazor-app/Shared/NavMenu.razor
+++ b/src/apps/blazor-app/Shared/NavMenu.razor
@@ -65,9 +65,7 @@
           <Image ImageName="Robert_Behind_Component.png"
             css="absolute z-10 right-3 h-8 group-hover:-translate-y-[36px] transition-all duration-[400ms]" alt="Rob" />
           <Button style="pill" css="z-20">
-            <content>
               <p>Help?</p>
-            </content>
           </Button>
         </div>
       </div>
@@ -223,21 +221,17 @@
     <div class="flex flex-row gap-4 justify-center">
        <div @onclick="ShowTutorial">
             <Button style="pill">
-                <content>
-                    Tutorial
-                </content>
+                <p>Tutorial</p>
             </Button>
         </div>
         <div @onclick="ShowChatBot">
             <Button style="pill">
-                <content>
-                    Chat
-                </content>
+                <p>Chat</p>
             </Button>
         </div>
         <div @onclick="ModalPopupHelp.Dismiss">
             <Button style="outline">
-                <content>Cancel</content>
+                <p>Cancel</p>
             </Button>
         </div>
     </div>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 1026582c..0930b8ff 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -591,6 +591,10 @@ video {
   bottom: -10rem;
 }
 
+.-bottom-44 {
+  bottom: -11rem;
+}
+
 .-left-1 {
   left: -0.25rem;
 }
@@ -711,6 +715,10 @@ video {
   top: -0.75rem;
 }
 
+.-top-80 {
+  top: -20rem;
+}
+
 .-top-\[10\%\] {
   top: -10%;
 }
@@ -723,10 +731,6 @@ video {
   top: -55%;
 }
 
-.-top-\[550px\] {
-  top: -550px;
-}
-
 .-top-\[70px\] {
   top: -70px;
 }
@@ -795,10 +799,6 @@ video {
   left: 12rem;
 }
 
-.left-9 {
-  left: 2.25rem;
-}
-
 .left-96 {
   left: 24rem;
 }
@@ -903,58 +903,6 @@ video {
   top: 100%;
 }
 
-.-bottom-3 {
-  bottom: -0.75rem;
-}
-
-.-bottom-44 {
-  bottom: -11rem;
-}
-
-.left-4 {
-  left: 1rem;
-}
-
-.-top-32 {
-  top: -8rem;
-}
-
-.-top-48 {
-  top: -12rem;
-}
-
-.-top-\[50\%\] {
-  top: -50%;
-}
-
-.-top-\[30\%\] {
-  top: -30%;
-}
-
-.-top-\[0\%\] {
-  top: -0%;
-}
-
-.-top-\[20\%\] {
-  top: -20%;
-}
-
-.top-\[20\%\] {
-  top: 20%;
-}
-
-.-top-0 {
-  top: -0px;
-}
-
-.-top-60 {
-  top: -15rem;
-}
-
-.-top-80 {
-  top: -20rem;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -1084,6 +1032,10 @@ video {
   margin-bottom: -5rem;
 }
 
+.-mb-28 {
+  margin-bottom: -7rem;
+}
+
 .-mb-80 {
   margin-bottom: -20rem;
 }
@@ -1224,6 +1176,10 @@ video {
   margin-left: 5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-40 {
   margin-left: 10rem;
 }
@@ -1332,26 +1288,6 @@ video {
   margin-top: 20rem;
 }
 
-.-mb-10 {
-  margin-bottom: -2.5rem;
-}
-
-.-mb-32 {
-  margin-bottom: -8rem;
-}
-
-.-mb-28 {
-  margin-bottom: -7rem;
-}
-
-.ml-5 {
-  margin-left: 1.25rem;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .block {
   display: block;
 }
@@ -1877,6 +1813,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-10 {
+  --tw-translate-x: -2.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-x-64 {
   --tw-translate-x: -16rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1907,11 +1848,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-24 {
-  --tw-translate-y: -6rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-y-28 {
   --tw-translate-y: -7rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1962,11 +1898,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-60 {
-  --tw-translate-x: 15rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-full {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2002,16 +1933,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-20 {
-  --tw-translate-y: 5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-10 {
-  --tw-translate-x: -2.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-rotate-12 {
   --tw-rotate: -12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2630,21 +2551,6 @@ video {
   background-color: rgb(255 193 8 / var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
-.bg-blue-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2841,11 +2747,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
-}
-
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2874,8 +2775,8 @@ video {
   padding-bottom: 1rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
+.pl-14 {
+  padding-left: 3.5rem;
 }
 
 .pl-2 {
@@ -2914,18 +2815,6 @@ video {
   padding-top: 1rem;
 }
 
-.pl-12 {
-  padding-left: 3rem;
-}
-
-.pl-14 {
-  padding-left: 3.5rem;
-}
-
-.pt-24 {
-  padding-top: 6rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -3297,11 +3186,6 @@ video {
   --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
 }
 
-.blur-lg {
-  --tw-blur: blur(16px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .brightness-90 {
   --tw-brightness: brightness(.9);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4241,25 +4125,8 @@ html {
     right: -100px;
   }
 
-  .sm\:left-9 {
-    left: 2.25rem;
-  }
-
-  .sm\:my-20 {
-    margin-top: 5rem;
-    margin-bottom: 5rem;
-  }
-
-  .sm\:mt-0 {
-    margin-top: 0px;
-  }
-
-  .sm\:mt-24 {
-    margin-top: 6rem;
-  }
-
-  .sm\:mt-40 {
-    margin-top: 10rem;
+  .sm\:-mb-0 {
+    margin-bottom: -0px;
   }
 
   .sm\:-mt-20 {
@@ -4270,16 +4137,16 @@ html {
     margin-left: 0px;
   }
 
-  .sm\:-mb-0 {
-    margin-bottom: -0px;
+  .sm\:mt-0 {
+    margin-top: 0px;
   }
 
-  .sm\:block {
-    display: block;
+  .sm\:mt-24 {
+    margin-top: 6rem;
   }
 
-  .sm\:hidden {
-    display: none;
+  .sm\:mt-40 {
+    margin-top: 10rem;
   }
 
   .sm\:h-24 {
@@ -4310,18 +4177,13 @@ html {
     flex-shrink: 0;
   }
 
-  .sm\:-translate-y-0 {
-    --tw-translate-y: -0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .sm\:translate-x-20 {
-    --tw-translate-x: 5rem;
+  .sm\:-translate-x-20 {
+    --tw-translate-x: -5rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .sm\:-translate-x-20 {
-    --tw-translate-x: -5rem;
+  .sm\:-translate-y-0 {
+    --tw-translate-y: -0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
@@ -4354,6 +4216,11 @@ html {
     border-radius: 0.5rem;
   }
 
+  .sm\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
   .sm\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -4369,11 +4236,6 @@ html {
     padding-bottom: 5rem;
   }
 
-  .sm\:px-10 {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-
   .sm\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;
@@ -4441,6 +4303,10 @@ html {
     left: 8rem;
   }
 
+  .md\:left-9 {
+    left: 2.25rem;
+  }
+
   .md\:right-5 {
     right: 1.25rem;
   }
@@ -4453,10 +4319,6 @@ html {
     top: 0.75rem;
   }
 
-  .md\:left-9 {
-    left: 2.25rem;
-  }
-
   .md\:-mt-0 {
     margin-top: -0px;
   }
@@ -4489,10 +4351,6 @@ html {
     display: flex;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:h-20 {
     height: 5rem;
   }
@@ -4563,6 +4421,11 @@ html {
     flex-shrink: 0;
   }
 
+  .md\:-translate-x-0 {
+    --tw-translate-x: -0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .md\:-translate-y-0 {
     --tw-translate-y: -0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4578,16 +4441,6 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .md\:translate-x-0 {
-    --tw-translate-x: 0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .md\:-translate-x-0 {
-    --tw-translate-x: -0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .md\:scale-100 {
     --tw-scale-x: 1;
     --tw-scale-y: 1;
@@ -4712,18 +4565,6 @@ html {
     margin-bottom: 0px;
   }
 
-  .lg\:-mt-24 {
-    margin-top: -6rem;
-  }
-
-  .lg\:-mt-10 {
-    margin-top: -2.5rem;
-  }
-
-  .lg\:mt-0 {
-    margin-top: 0px;
-  }
-
   .lg\:mt-5 {
     margin-top: 1.25rem;
   }
@@ -4906,26 +4747,14 @@ html {
     top: 380px;
   }
 
-  .xl\:mt-60 {
-    margin-top: 15rem;
-  }
-
-  .xl\:mt-10 {
-    margin-top: 2.5rem;
-  }
-
-  .xl\:-mt-10 {
-    margin-top: -2.5rem;
-  }
-
-  .xl\:-mt-28 {
-    margin-top: -7rem;
-  }
-
   .xl\:-mt-24 {
     margin-top: -6rem;
   }
 
+  .xl\:mt-60 {
+    margin-top: 15rem;
+  }
+
   .xl\:block {
     display: block;
   }

From 64c5d29c845cc4cce93a21d6d3560033395243fb Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sat, 21 Oct 2023 12:31:58 +0200
Subject: [PATCH 05/13] Fixed tutorial overlay

---
 src/apps/blazor-app/Components/Chatbot/Chatbot.razor | 2 +-
 src/apps/blazor-app/Components/ModalPopup.razor      | 4 ++--
 src/apps/blazor-app/Shared/MainLayout.razor          | 2 ++
 src/apps/blazor-app/Shared/NavMenu.razor             | 2 +-
 src/apps/blazor-app/wwwroot/css/app.css              | 8 ++++++++
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/apps/blazor-app/Components/Chatbot/Chatbot.razor b/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
index 10bcd1ae..75e6a938 100644
--- a/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
+++ b/src/apps/blazor-app/Components/Chatbot/Chatbot.razor
@@ -58,7 +58,7 @@
                 @onkeypress="HandleKeyPress" />
             <div @onclick="SendMessage">
                 <Button style="pill">
-                    <p class="text-sm font-semibold hover:text-white">Send</p>/
+                    <p class="text-sm font-semibold hover:text-white">Send</p>
                 </Button>
             </div>
 
diff --git a/src/apps/blazor-app/Components/ModalPopup.razor b/src/apps/blazor-app/Components/ModalPopup.razor
index 4e93af36..6a3a9326 100644
--- a/src/apps/blazor-app/Components/ModalPopup.razor
+++ b/src/apps/blazor-app/Components/ModalPopup.razor
@@ -12,8 +12,8 @@
         showModal = "opacity-0 hidden";
     }
 }
-<div class="fixed z-20 top-0 left-0 w-[100vw] h-[100vh] bg-slate-900 transition-all duration-300 @showBg"></div>
-<div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all z-30 duration-300 @showModal"
+<div class="fixed z-50 top-0 left-0 w-[100vw] h-[100vh] bg-slate-900 transition-all duration-300 @showBg"></div>
+<div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all z-50 duration-300 @showModal"
     role="alert">
     <Card css="text-center">
         <ChildContent>
diff --git a/src/apps/blazor-app/Shared/MainLayout.razor b/src/apps/blazor-app/Shared/MainLayout.razor
index f7905cfd..41f8f91c 100644
--- a/src/apps/blazor-app/Shared/MainLayout.razor
+++ b/src/apps/blazor-app/Shared/MainLayout.razor
@@ -17,7 +17,9 @@
         }
 
 
+    <div class="z-40">
         <NavMenu @bind-isScrollingDown="isScrollingDown"/>
+    </div>
 
     @* Toast implementation *@
         @if(isToastVisible) {
diff --git a/src/apps/blazor-app/Shared/NavMenu.razor b/src/apps/blazor-app/Shared/NavMenu.razor
index 2ede5e10..b1404929 100644
--- a/src/apps/blazor-app/Shared/NavMenu.razor
+++ b/src/apps/blazor-app/Shared/NavMenu.razor
@@ -29,7 +29,7 @@
 <header
   class="fixed h-20 left-0 bg-transparent w-full z-40 transition-all duration-300 delay-[250ms] @(isScrollingDown ? "-top-20" : "top-0")">
   <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
-    <div class="flex lg:flex-1">
+    <div class="flex lg:flex-1 z-10">
       @* BlueSkies Logo *@
       <a @onclick='(() => forceNavigate("/"))' class="-m-1.5 p-1.5">
         <span class="sr-only">BLueSkies</span>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 0930b8ff..b4103fca 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -947,6 +947,14 @@ video {
   z-index: 50;
 }
 
+.z-\[\] {
+  z-index: ;
+}
+
+.z-\[60\] {
+  z-index: 60;
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }

From af28c8da1ad335145bd9d63bc39f37ea470d7066 Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sat, 21 Oct 2023 15:35:07 +0200
Subject: [PATCH 06/13] Added Build Your Home Skeleton Loaders.

---
 .../Components/Advanced/BuildYourHome.razor   | 121 +-----------------
 .../Skeletons/AppliancesSkeleton.razor        |  13 ++
 .../Advanced/Skeletons/BatterySkeleton.razor  |  53 ++++++++
 .../Skeletons/SystemSizeSkeleton.razor        |  29 +++++
 src/apps/blazor-app/wwwroot/css/app.css       |   8 --
 5 files changed, 102 insertions(+), 122 deletions(-)
 create mode 100644 src/apps/blazor-app/Components/Advanced/Skeletons/AppliancesSkeleton.razor
 create mode 100644 src/apps/blazor-app/Components/Advanced/Skeletons/BatterySkeleton.razor
 create mode 100644 src/apps/blazor-app/Components/Advanced/Skeletons/SystemSizeSkeleton.razor

diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 036e1ff5..0b946e39 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -1,5 +1,6 @@
 @using BlazorApp.Components
 @using BlazorApp.Components.Base
+@using BlazorApp.Components.Advanced.Skeletons
 @using BlazorApp.Models
 @inject ProtectedLocalStorage ProtectedLocalStore
 @inject ProtectedSessionStorage ProtectedSessionStore
@@ -13,8 +14,9 @@
 @implements IDisposable
 
 
-<div class="flex flex-col gap-5 lg:flex-row w-full h-full  items-center px-4">
+<div class="flex flex-col gap-5 lg:flex-row w-full h-full  items-center mb-20 px-4">
     <div class="w-full flex flex-col justify-center items-center ">
+        <h1 class="text-blue-950 translate-y-8 font-semibold col-span-2 lg:hidden text-center text-3xl mb-5 ">Build your home</h1>
         @* Home Template Dropdown *@
         <div class="w-60 text-center my-auto translate-y-10">
             @if (systems.Count == 0)
@@ -98,17 +100,7 @@
                 <div class="grid mx-auto gap-4 space-y-2 grid-cols-2 mt-2 justify-center">
                     @for (int i = 0; i < 8; i++)
                     {
-                        <div class="justify-center">
-                            <div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto p-3 w-[80px] h-[80px] animate-pulse">
-                                <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                    <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                                </svg>
-                            </div>
-                            <div role="status" class="max-w-sm animate-pulse mt-3">
-                                <div class="h-2 bg-gray-200 rounded-full w-[100px] mb-2.5"></div>
-                                <span class="sr-only">Loading...</span>
-                            </div>
-                        </div>
+                        <AppliancesSkeleton />
                     }
                 </div>
                 }
@@ -116,41 +108,7 @@
     </div>
     <div class="w-full flex flex-col justify-center items-center pl-64">
         @* Home images *@
-        <div class="flex pjustify-center items-center h-full">
-            @switch (selectedSystem)
-            {
-                case 0:
-                    homeType = "-Home1.svg";
-                    break;
-                case 1:
-                    homeType = "-Home2.svg";
-                    break;
-                case 2:
-                    homeType = "-Home3.svg";
-                    break;
-                case 3:
-                    if (systems[3].inverterOutput <= 5)
-                    {
-                        homeType = "-Home1.svg";
-                    }
-                    else if (systems[3].inverterOutput <= 8)
-                    {
-                        homeType = "-Home2.svg";
-                    }
-                    else
-                    {
-                        homeType = "-Home3.svg";
-                    }
-                    break;
-                default:
-                    homeType = "-Home1.svg";
-                    break;
-            }
-            @{
-                homeImage = homeSize + homeType;
-            }
-            <Image ImageName="@homeImage" alt="Home" css="w-10/12 h-full" />
-        </div>
+        x
     </div>
     <div class="w-6/12 px-1 flex flex-col justify-center items-center gap-4 -mt-4">
     @* Select System Size *@
@@ -224,29 +182,7 @@
             }
             else
             {
-                    <div class="flex space-x-9">
-                        <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
-                            <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                            </svg>
-                        </div>
-                        <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
-                            <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                            </svg>
-                        </div>
-                            <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
-                            <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="flex justify-center h-24">
-                        <div role="status" class="max-w-sm animate-pulse">
-                            <div class="h-8 bg-gray-200 rounded-full w-[105px] mb-2.5"></div>
-                            <span class="sr-only">Loading...</span>
-                        </div>
-                    </div>
+                    <SystemSizeSkeleton />
             }
 
         </div>
@@ -285,50 +221,7 @@
             }
             else
             {
-                <div class="flex flex-col w-full -mt-16 justify-center items-center gap-4">
-                        <div class="mb-2 w-full flex flex-col">
-                            <div class="justify-center">
-                                <div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center mt-3">
-                                    <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                        <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                                    </svg>
-                                </div>
-                                <div role="status" class="max-w-sm animate-pulse mt-3">
-                                    <div class="h-3 bg-gray-200 rounded-full w-[120px] mb-2 mx-auto"></div>
-                                    <span class="sr-only">Loading...</span>
-                                </div>
-                            </div>
-                            <div class="h-2 bg-gray-200 rounded-full w-[325px] mb-2.5 mx-auto animate-pulse mt-2"></div>
-                        </div>
-                        <div class="justify-start items-start">
-                            <div class="flex">
-                                <div class="flex flex-col gap-2 justify-center items-center w-full">
-                                    <div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[120px] animate-pulse items-center justify-center">
-                                        <svg class="self-center w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                                        </svg>
-                                    </div>
-                                    <div role="status" class="max-w-sm animate-pulse mt-3">
-                                        <div class="h-3 bg-gray-200 rounded-full w-[140px] mb-2.5"></div>
-                                        <span class="sr-only">Loading...</span>
-                                    </div>
-                                </div>
-                                <div class="mx-auto">
-                                    <div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center">
-                                        <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-                                            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-                                        </svg>
-                                    </div>
-                                    <div role="status" class="max-w-sm animate-pulse mt-3">
-                                        <div class="h-3 bg-gray-200 rounded-full w-[110px] mb-2.5 mx-auto"></div>
-                                        <div class="h-3 bg-gray-200 rounded-full w-[80px] mb-2 mx-auto"></div>
-                                        <span class="sr-only">Loading...</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="h-2 bg-gray-200 rounded-full w-[325px] mt-2.5 animate-pulse"></div>
-                        </div>
-                    </div>
+                <BatterySkeleton />
             }
         </div>
         <h3 class="font-medium text-lg text-primary-900 text-left">Running Hours on Batteries</h3>
diff --git a/src/apps/blazor-app/Components/Advanced/Skeletons/AppliancesSkeleton.razor b/src/apps/blazor-app/Components/Advanced/Skeletons/AppliancesSkeleton.razor
new file mode 100644
index 00000000..4596f748
--- /dev/null
+++ b/src/apps/blazor-app/Components/Advanced/Skeletons/AppliancesSkeleton.razor
@@ -0,0 +1,13 @@
+<div class="justify-center">
+    <div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto p-3 w-[80px] h-[80px] animate-pulse">
+        <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+            viewBox="0 0 20 18">
+            <path
+                d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+        </svg>
+    </div>
+    <div role="status" class="max-w-sm animate-pulse mt-3">
+        <div class="h-2 bg-gray-200 rounded-full w-[100px] mb-2.5"></div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/apps/blazor-app/Components/Advanced/Skeletons/BatterySkeleton.razor b/src/apps/blazor-app/Components/Advanced/Skeletons/BatterySkeleton.razor
new file mode 100644
index 00000000..16439f27
--- /dev/null
+++ b/src/apps/blazor-app/Components/Advanced/Skeletons/BatterySkeleton.razor
@@ -0,0 +1,53 @@
+<div class="flex flex-col w-full -mt-16 justify-center items-center gap-4">
+    <div class="mb-2 w-full flex flex-col">
+        <div class="justify-center">
+            <div
+                class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center mt-3">
+                <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor" viewBox="0 0 20 18">
+                    <path
+                        d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+                </svg>
+            </div>
+            <div role="status" class="max-w-sm animate-pulse mt-3">
+                <div class="h-3 bg-gray-200 rounded-full w-[120px] mb-2 mx-auto"></div>
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <div class="h-2 bg-gray-200 rounded-full w-[325px] mb-2.5 mx-auto animate-pulse mt-2"></div>
+    </div>
+    <div class="justify-start items-start">
+        <div class="flex">
+            <div class="flex flex-col gap-2 justify-center items-center w-full">
+                <div
+                    class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[120px] animate-pulse items-center justify-center">
+                    <svg class="self-center w-14 h-14 text-gray-200" aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                        <path
+                            d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+                    </svg>
+                </div>
+                <div role="status" class="max-w-sm animate-pulse mt-3">
+                    <div class="h-3 bg-gray-200 rounded-full w-[140px] mb-2.5"></div>
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <div class="mx-auto">
+                <div
+                    class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center">
+                    <svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                        fill="currentColor" viewBox="0 0 20 18">
+                        <path
+                            d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+                    </svg>
+                </div>
+                <div role="status" class="max-w-sm animate-pulse mt-3">
+                    <div class="h-3 bg-gray-200 rounded-full w-[110px] mb-2.5 mx-auto"></div>
+                    <div class="h-3 bg-gray-200 rounded-full w-[80px] mb-2 mx-auto"></div>
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div class="h-2 bg-gray-200 rounded-full w-[325px] mt-2.5 animate-pulse"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/apps/blazor-app/Components/Advanced/Skeletons/SystemSizeSkeleton.razor b/src/apps/blazor-app/Components/Advanced/Skeletons/SystemSizeSkeleton.razor
new file mode 100644
index 00000000..4c435529
--- /dev/null
+++ b/src/apps/blazor-app/Components/Advanced/Skeletons/SystemSizeSkeleton.razor
@@ -0,0 +1,29 @@
+<div class="flex space-x-9">
+    <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
+        <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+            viewBox="0 0 20 18">
+            <path
+                d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+        </svg>
+    </div>
+    <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
+        <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+            viewBox="0 0 20 18">
+            <path
+                d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+        </svg>
+    </div>
+    <div class="flex bg-gray-100 shadow-md rounded-3xl  p-3 w-[65px] h-[65px] animate-pulse">
+        <svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+            viewBox="0 0 20 18">
+            <path
+                d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+        </svg>
+    </div>
+</div>
+<div class="flex justify-center h-24">
+    <div role="status" class="max-w-sm animate-pulse">
+        <div class="h-8 bg-gray-200 rounded-full w-[105px] mb-2.5"></div>
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index b4103fca..0930b8ff 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -947,14 +947,6 @@ video {
   z-index: 50;
 }
 
-.z-\[\] {
-  z-index: ;
-}
-
-.z-\[60\] {
-  z-index: 60;
-}
-
 .col-span-2 {
   grid-column: span 2 / span 2;
 }

From 2db7ea528da5de24897513d90ca91fa2f2607468 Mon Sep 17 00:00:00 2001
From: Jesse Naidoo <jessenaidoo24@gmail.com>
Date: Sat, 21 Oct 2023 17:29:27 +0200
Subject: [PATCH 07/13] Fancy data is responsive

---
 .../Dashboard/FancyData/FancyData.razor       | 22 +++++-----
 src/apps/blazor-app/wwwroot/css/app.css       | 41 +++++++++++++++----
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
index 4d24cbd0..20536eeb 100644
--- a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
+++ b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
@@ -30,11 +30,11 @@
             </Heading>
         }
 
-        <div class="w-full flex justify-center items-center px-4 gap-2">
-            <div class="flex w-7/12 flex-col gap-4 p-20">
+        <div class="w-full md:flex justify-center items-center px-4 md:gap-2">
+            <div class="flex md:w-1/2 flex-col gap-4 p-20">
                     <h1 class="text-primary-800 font-semibold text-center text-xl">Annual Flux Map</h1>
                     <p class="text-lg text-center text-gray-500">Visual representation of the annual sunlight exposure on your rooftop.</p>
-                    <Image ImageName="@satteliteImageSrc" css="2/3" alt="sattelite Image" />
+                    <Image ImageName="@satteliteImageSrc" css="w-full sm:w-3/4 mx-auto md:w-full" alt="sattelite Image" />
                     <div class="flex justify-between w-full">
                         <div class="flex gap-2">
                             <div class="w-5 h-5 my-auto border border-primary-200 rounded-lg bg-red-accent-500"></div>
@@ -47,7 +47,7 @@
                     </div>
             </div>
 
-            <div class="flex flex-col gap-4 justify-center w-1/2">
+            <div class="flex flex-col gap-4 justify-center md:w-1/2">
                 <EnviromentImpact annualKWGenerated="@annualKWGenerated" />
 
                 @if(solarPanelsData != null){
@@ -101,8 +101,8 @@
             </div>
         </div>
 
-        <div class="w-full flex justify-center items-center px-4 gap-4 mt-5">
-            <div class="flex w-2/3 flex-col justify-center items-center gap-3">
+        <div class="w-full lg:flex justify-center items-center px-4 gap-4 mt-5">
+            <div class="flex md:w-1/2 md:mx-auto lg:w-1/3 flex-col justify-center items-center gap-3">
                 <h1 class="text-center text-primary-800 font-semibold text-xl">Monthly Flux Map</h1>
                 @if(monthlyFluxMap != null) {
                     <p class="text-center text-lg">@monthNames[@currentImageIndex]</p>
@@ -111,7 +111,7 @@
                         <div class="my-auto" @onclick="DecrementMonthImage">
                             <Image ImageName="Arrow-Left.svg" alt="Left Arrow" css="h-12 w-12 transition-all duration-300 rounded-lg p-2 hover:bg-primary-200 hover:cursor-pointer" />
                         </div>
-                            <Image ImageName="@monthlyFluxMap[@currentImageIndex]" alt="sattelite Image" css="w-3/4" />
+                            <Image ImageName="@monthlyFluxMap[@currentImageIndex]" alt="sattelite Image" css="w-3/4 mx-auto md:w-full" />
                         <div class="my-auto" @onclick="IncreamentMonthImage">
                             <Image ImageName="Arrow-Right.svg" alt="Right Arrow" css="h-12 w-12 transition-all duration-300 rounded-lg p-2 hover:bg-primary-200 hover:cursor-pointer" />
                         </div>
@@ -121,19 +121,19 @@
                     <p>Monthly Flux Map != available</p>
                 } 
             </div>
-            <div class="w-full">
+            <div class="lg:w-2/3">
                     <h1 class="text-center text-primary-800 font-semibold text-xl">Solar Irradiance Per Month</h1>
                     <SolarIrradiationPerMonth currentMonth="@currentImageIndex" monthlySolarRadiation="@solarRadiationPerMonth" animated="false" />
             </div>
         </div>
 
-        <div class="flex w-full justify-center gap-5 px-4 items-center mt-32">
-            <div class="w-2/3">
+        <div class="md:flex w-full justify-center gap-5 px-4 items-center mt-32">
+            <div class="md:w-2/3">
                 <h1 class="text-center text-primary-800 font-semibold text-xl">Sun path over the horizon</h1>
                 <p class="text-gray-500 mt-3 mb-4 text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cupiditate impedit ipsam temporibus, dignissimos nostrum.</p>
                 <ElevationGraph elevationValues="@horisonElevationData" />
             </div>
-            <Card css="w-1/3 flex flex-col gap-10">
+            <Card css="md:w-1/3 flex flex-col gap-10">
                 <div class="flex gap-3">
                     <div class="w-5 h-5 border border-primary-200 rounded-lg bg-red-accent-500 my-auto"></div>
                     <p class="text-base text-primary-800 my-auto">Your location</p>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 0930b8ff..66f8662a 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -1493,10 +1493,6 @@ video {
   width: 2.5rem;
 }
 
-.w-10\/12 {
-  width: 83.333333%;
-}
-
 .w-11 {
   width: 2.75rem;
 }
@@ -1601,10 +1597,6 @@ video {
   width: 1.75rem;
 }
 
-.w-7\/12 {
-  width: 58.333333%;
-}
-
 .w-72 {
   width: 18rem;
 }
@@ -1751,11 +1743,19 @@ video {
   width: 100vw;
 }
 
+.min-w-\[50px\] {
+  min-width: 50px;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -4319,6 +4319,11 @@ html {
     top: 0.75rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:-mt-0 {
     margin-top: -0px;
   }
@@ -4404,6 +4409,10 @@ html {
     width: 66.666667%;
   }
 
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
   .md\:w-\[45\%\] {
     width: 45%;
   }
@@ -4417,6 +4426,10 @@ html {
     width: 100%;
   }
 
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
   .md\:flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -4459,6 +4472,10 @@ html {
     justify-content: space-evenly;
   }
 
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
   .md\:gap-20 {
     gap: 5rem;
   }
@@ -4605,6 +4622,14 @@ html {
     width: 50%;
   }
 
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .lg\:w-\[30\%\] {
     width: 30%;
   }

From cdcac1860f4c3d2f738b08a4bd00a892fc556416 Mon Sep 17 00:00:00 2001
From: Jesse Naidoo <jessenaidoo24@gmail.com>
Date: Sat, 21 Oct 2023 17:40:46 +0200
Subject: [PATCH 08/13] Update FancyData.razor

---
 .../blazor-app/Components/Dashboard/FancyData/FancyData.razor | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
index 20536eeb..8583139d 100644
--- a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
+++ b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
@@ -30,7 +30,7 @@
             </Heading>
         }
 
-        <div class="w-full md:flex justify-center items-center px-4 md:gap-2">
+        <div class="w-full md:flex justify-center items-center md:px-4 md:gap-2">
             <div class="flex md:w-1/2 flex-col gap-4 p-20">
                     <h1 class="text-primary-800 font-semibold text-center text-xl">Annual Flux Map</h1>
                     <p class="text-lg text-center text-gray-500">Visual representation of the annual sunlight exposure on your rooftop.</p>
@@ -123,7 +123,7 @@
             </div>
             <div class="lg:w-2/3">
                     <h1 class="text-center text-primary-800 font-semibold text-xl">Solar Irradiance Per Month</h1>
-                    <SolarIrradiationPerMonth currentMonth="@currentImageIndex" monthlySolarRadiation="@solarRadiationPerMonth" animated="false" />
+                    <SolarIrradiationPerMonth currentMonth="@currentImageIndex" monthlySolarRadiation="@solarRadiationPerMonth" animated="true" />
             </div>
         </div>
 

From 05490fc9ca25c1efaaa790762d0663d5ac3010ec Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sat, 21 Oct 2023 18:39:54 +0200
Subject: [PATCH 09/13] Fixed some errors

---
 .../Components/Advanced/BuildYourHome.razor   | 113 +++++++++++-------
 .../Pages/AdvancedCalculations.razor          |   2 +-
 src/apps/blazor-app/wwwroot/assets/Home.svg   |   2 +-
 3 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 0b946e39..113d3991 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -54,9 +54,7 @@
                     </div>
                 </div>
             </div>
-            <input
-        class="block w-72 rounded-lg border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-        type="text" placeholder="Search.." @bind-value="applianceSearch" @bind-value:event="oninput">
+            <input class="block w-72 rounded-lg border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" type="text" placeholder="Search.." @bind-value="applianceSearch" @bind-value:event="oninput">
                 @if (appliances.Count > 0)
                 {
                         <div class="flex">
@@ -108,7 +106,34 @@
     </div>
     <div class="w-full flex flex-col justify-center items-center pl-64">
         @* Home images *@
-        x
+        <div class="flex pjustify-center items-center h-full">
+        @switch (selectedSystem)
+        {
+            case 0:
+                homeType = "-Home1.svg";
+            break;
+            case 1:
+                homeType = "-Home2.svg";
+            break;
+            case 2:
+                homeType = "-Home3.svg";
+            break;
+            case 3:
+                if (systems[3].inverterOutput <= 5) { 
+                    homeType="-Home1.svg" ; 
+                } else if (systems[3].inverterOutput <=8) { 
+                    homeType="-Home2.svg" ; 
+                } else {
+                    homeType="-Home3.svg" ;
+                } 
+                break; 
+            default: 
+                homeType="-Home1.svg" ; 
+            break; 
+        } 
+        @{ homeImage=homeSize + homeType; }
+        <Image ImageName="@homeImage" alt="Home" css="w-10/12 h-full" />
+    </div>
     </div>
     <div class="w-6/12 px-1 flex flex-col justify-center items-center gap-4 -mt-4">
     @* Select System Size *@
@@ -132,57 +157,57 @@
                         var medium = systems[1].inverterOutput + "kw";
                         var large = systems[2].inverterOutput + "kw";
                     }
-                                <div onclick="@(() => SetSystemSize(0))"
-                                    class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 0 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
-                                    <p class=" font-semibold">@small</p>
-                                </div>
-                                <div onclick="@(() => SetSystemSize(1))"
-                                    class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 1 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
-                                    <p class="font-semibold">@medium</p>
-                                </div>
-                                <div onclick="@(() => SetSystemSize(2))"
-                                    class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 2 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
-                                    <p class="font-semibold">@large</p>
-                                </div>
-                            </div>
-                            <div class="flex justify-center h-24">
+                        <div onclick="@(() => SetSystemSize(0))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 0 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class=" font-semibold">@small</p>
+                        </div>
+                        <div onclick="@(() => SetSystemSize(1))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 1 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class="font-semibold">@medium</p>
+                        </div>
+                        <div onclick="@(() => SetSystemSize(2))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 2 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class="font-semibold">@large</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-center h-24">
                     @if (showCustomSystem)
                     {
                         if (displayCreatedCustomSystem)
                         {
                             var customSize = systems[3].inverterOutput + "kw";
-                                        <div @onclick="CreateCustomSystem"
-                                            class="flex shadow-md transition-all duration-500 @(selectedSystem == 3 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-24 h-16">
-                                            <p class="font-semibold">@customSize</p>
-                                        </div>
+                            <div @onclick="CreateCustomSystem"
+                                class="flex shadow-md transition-all duration-500 @(selectedSystem == 3 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-24 h-16">
+                                <p class="font-semibold">@customSize</p>
+                            </div>
                         }
                         else
                         {
-                                        <div>
-                                            <div class="gap-2 px-6">
-                                                <input class="text-center focus:outline-none" type="number" placeholder="Enter System Size" @bind="systems[3].inverterOutput"/>
-                                            </div>
-                                            <div @onclick="CreateCustomSystem" class="mx-auto pt-4 w-24">
-                                                <Button style="pill" >
-                                                    <p  class="font-semibold">Create</p>
-                                                </Button>
-                                            </div>
-                                        </div>
+                            <div>
+                                <div class="gap-2 px-6">
+                                    <input class="text-center focus:outline-none" type="number" placeholder="Enter System Size" @bind="systems[3].inverterOutput"/>
+                                </div>
+                                <div @onclick="CreateCustomSystem" class="mx-auto pt-4 w-24">
+                                    <Button style="pill" >
+                                        <p  class="font-semibold">Create</p>
+                                    </Button>
+                                </div>
+                            </div>
                         }
                     }
                     else
                     {
-                                <div @onclick="CustomSystemSelected">
-                                    <Button style="pill" >
-                                        <p  class="font-semibold">Custom</p>
-                                    </Button>
-                                </div>
+                        <div @onclick="CustomSystemSelected">
+                            <Button style="pill" >
+                                <p  class="font-semibold">Custom</p>
+                            </Button>
+                        </div>
                     }
                         </div>
             }
             else
             {
-                    <SystemSizeSkeleton />
+                <SystemSizeSkeleton />
             }
 
         </div>
@@ -207,7 +232,7 @@
                                     var percentage = chargingLimitPercentage + "%";
                                 }
                                 <div style="height: @percentage" class='w-full transition-all rounded-lg @(chargingLimitPercentage > 0 && chargingLimitPercentage < 25 ? "bg-red-accent-500" : chargingLimitPercentage > 25 && chargingLimitPercentage < 50 ? "bg-yellow-accent-500" : chargingLimitPercentage > 50 && chargingLimitPercentage < 75 ? "bg-primary-500" : "bg-primary-800")'></div>
-                                <p class='absolute bottom-2 left-1/2 -translate-x-1/2 @(chargingLimitPercentage > 75 ? "text-primary-400" : chargingLimitPercentage < 25 ? "text-primary-100" : "text-primary-900") font-bold text-md'>@chargingLimitPercentage<span class='@(chargingLimitPercentage > 75 ? "text-primary-300" : chargingLimitPercentage < 25 ? "text-primary-300" :"text-primary-700")'>%</span></p>
+                                    <p class='absolute bottom-2 left-1/2 -translate-x-1/2 @(chargingLimitPercentage > 75 ? "text-primary-400" : chargingLimitPercentage < 25 ? "text-primary-100" : "text-primary-900") font-bold text-md'>@chargingLimitPercentage<span class='@(chargingLimitPercentage > 75 ? "text-primary-300" : chargingLimitPercentage < 25 ? "text-primary-300" :"text-primary-700")'>%</span></p>
                                 <div class="w-8 h-4 -z-10 bg-gray-300 rounded-md absolute -top-2 left-1/2 -translate-x-1/2"></div>
                             </div>
                             <p class="text-center">Battery Utilization</p>
@@ -366,7 +391,8 @@
     private List<ApplianceModel> applianceQuantities = new List<ApplianceModel>();
     private List<TabItemModel> tabs = new List<TabItemModel>
     {
-        new TabItemModel("Add", true),
+        new TabItemModel("Toggle", true),
+        new TabItemModel("Add", false),
         new TabItemModel("Remove", false)
     };
     private List<TabItemModel> categories = new List<TabItemModel>
@@ -379,9 +405,6 @@
     float dlh = 0f;
     float daylight = 12f;
     DaylightChart daylightChart = new DaylightChart();
-    private string homeSize = "Small";
-    private string homeType = "";
-    private string homeImage = "";
     private bool showCustomSystem = false;
     private bool displayCreatedCustomSystem = false;
     private string customPanels = "";
@@ -398,6 +421,10 @@
     private List<ApplianceModel> filteredAppliances = new List<ApplianceModel>();
     private Timer panelTimer = default!;
     private Timer batteryTimer = default!;
+    private string homeSize = "Small";
+    private string homeType = "";
+    private string homeImage = "";
+
 
     /// <summary>
     /// On initialisation, get the user id from local storage
diff --git a/src/apps/blazor-app/Pages/AdvancedCalculations.razor b/src/apps/blazor-app/Pages/AdvancedCalculations.razor
index d94a7fd8..8377811f 100644
--- a/src/apps/blazor-app/Pages/AdvancedCalculations.razor
+++ b/src/apps/blazor-app/Pages/AdvancedCalculations.razor
@@ -33,7 +33,7 @@
             <TabSkeleton />
         } else {
             <div class="relative flex flex-col lg:flex-row justify-evenly items-center w-full gap-4 lg:gap-0 mx-auto my-7">
-                <div class="flex flex-col sm:flex-row gap-4 w-full">
+                <div class="flex flex-col lg:flex-row gap-4 w-full">
                     <div @onclick="ResetCalculation" class="w-full cursor-pointer">
                         <Button css="h-14 bg-white rounded-full w-2/3 max-w-xs mx-auto right-10" style="outline">
                             <p class="text-[14px] sm:text-base">Reset</p>
diff --git a/src/apps/blazor-app/wwwroot/assets/Home.svg b/src/apps/blazor-app/wwwroot/assets/Home.svg
index 7b9a82ae..a5b76e29 100644
--- a/src/apps/blazor-app/wwwroot/assets/Home.svg
+++ b/src/apps/blazor-app/wwwroot/assets/Home.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+s<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M22 22L2 22" stroke="#1C274C" stroke-width="2." stroke-linecap="round"/>
 <path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="#1C274C" stroke-width="2" stroke-linecap="round"/>
 <path d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="#1C274C" stroke-width="2" stroke-linecap="round"/>

From cded593dce55929eddbdf67b0422e6c959586a5c Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sat, 21 Oct 2023 20:59:23 +0200
Subject: [PATCH 10/13] ready for demo

---
 .../Components/Advanced/BuildYourHome.razor   |  6 ++++--
 .../Components/Advanced/MobileBuildHome.razor | 17 ++++++++++++++++
 src/apps/blazor-app/wwwroot/css/app.css       | 20 ++++---------------
 3 files changed, 25 insertions(+), 18 deletions(-)
 create mode 100644 src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor

diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 113d3991..54378b8c 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -39,6 +39,8 @@
         </div>
     </div>
 </div>
+
+
 @* Add Appliances *@
 <div class="hidden lg:flex w-full h-full px-4 mb-20">
     <div class="w-4/12 grid grid-cols-2 justify-center scale-90 gap-4 -mt-4">
@@ -274,6 +276,8 @@
     </div>
 </div>
 
+<MobileBuildHome @bind-homeImage="homeImage" />
+
 
 
 <ModalPopup @ref="SystemModalPopup" Title=@customModalTitle>
@@ -358,8 +362,6 @@
 </ModalPopup>
 
 
-@* Mobile View Port *@
-
 @code {
     private SharedUtils.reportClass reportClass = new SharedUtils.reportClass();
     private SharedUtils.reportApplianceClass reportApplianceClass = new SharedUtils.reportApplianceClass();
diff --git a/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor b/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor
new file mode 100644
index 00000000..94bd4043
--- /dev/null
+++ b/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor
@@ -0,0 +1,17 @@
+@* Mobile Viewport *@
+<div class="flex flex-col lg:hidden w-full px-3 mx-auto justify-center items-center">
+    <Image ImageName="@homeImage" alt="Home" css="w-10/12 h-full mt-10" />
+    
+</div>
+
+@code {
+    [Parameter]
+    public string homeImage { get; set; }
+    public EventCallback<string> homeImageChanged { get; set; }
+
+    public void ChangeImage(string image)
+    {
+        homeImage = image;
+        homeImageChanged.InvokeAsync(image);
+    }  
+}
\ No newline at end of file
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 66f8662a..5de2e89e 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -1493,6 +1493,10 @@ video {
   width: 2.5rem;
 }
 
+.w-10\/12 {
+  width: 83.333333%;
+}
+
 .w-11 {
   width: 2.75rem;
 }
@@ -1743,19 +1747,11 @@ video {
   width: 100vw;
 }
 
-.min-w-\[50px\] {
-  min-width: 50px;
-}
-
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
 
-.min-w-\[100px\] {
-  min-width: 100px;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -4409,10 +4405,6 @@ html {
     width: 66.666667%;
   }
 
-  .md\:w-3\/4 {
-    width: 75%;
-  }
-
   .md\:w-\[45\%\] {
     width: 45%;
   }
@@ -4426,10 +4418,6 @@ html {
     width: 100%;
   }
 
-  .md\:w-1\/4 {
-    width: 25%;
-  }
-
   .md\:flex-shrink-0 {
     flex-shrink: 0;
   }

From 91f0d9808c38d93dfbb213e22c52c6da0061bf38 Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sun, 22 Oct 2023 02:25:08 +0200
Subject: [PATCH 11/13] Finally fixed slider size issue

---
 .../Components/Advanced/BuildYourHome.razor   | 151 +++++++++++++++++-
 .../Components/Advanced/MobileBuildHome.razor |  17 --
 src/apps/blazor-app/wwwroot/css/app.css       |   6 +
 3 files changed, 155 insertions(+), 19 deletions(-)
 delete mode 100644 src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor

diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 54378b8c..86f0c252 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -214,7 +214,7 @@
 
         </div>
     @* System details *@
-        <div class="flex justify-between gap-4 scale-75">
+        <div class="flex justify-between gap-4 w-full scale-75">
             @if (systems.Count > 0)
             {
                 <div class="flex flex-col w-full -mt-16 justify-center items-center gap-4">
@@ -276,7 +276,154 @@
     </div>
 </div>
 
-<MobileBuildHome @bind-homeImage="homeImage" />
+
+@* Mobile Viewport *@
+<div class="flex flex-col lg:hidden w-full px-3 mx-auto justify-center items-center">
+    <Image ImageName="@homeImage" alt="Home" css="w-10/12 h-full mt-10 mb-20" />
+
+    <div class="w-full px-1 flex flex-col justify-center items-center gap-4 -mt-4">
+    @* Select System Size *@
+        <div class="text-center mt-2 space-y-5">
+            <h1 class="text-blue-950 translate-y-8 font-semibold text-center text-3xl mb-5 ">Solar System</h1>
+            <div class="flex gap-3 w-full relative justify-center">
+                <h1 class="text-base font-medium text-center mb-2  text-primary-900">Inverter size</h1>
+                <div class="group">
+                    <Image ImageName="Info.svg" alt="Info" css="w-7 hover:-translate-y-1 transition-all duration-300" />
+                    <div
+                        class=" transform -scale-x-100 absolute hidden fade-in-active w-full -top-[70px] -translate-x-64 max-w-md group-hover:block transition-all duration-300 ease-in-out text-sm  bg-primary-200 shadow rounded-t-2xl rounded-r-2xl p-4 group-hover:-translate-y-10 ">
+                        <p class="text-gray-900 transform -scale-x-100">Your inverter determines how many appliances you can run at once</p>
+                    </div>
+                </div>
+            </div>
+            @if (systems.Count > 2)
+            {  
+                <div class="flex space-x-9">
+                    @{
+                        var small = systems[0].inverterOutput + "kw";
+                        var medium = systems[1].inverterOutput + "kw";
+                        var large = systems[2].inverterOutput + "kw";
+                    }
+                        <div onclick="@(() => SetSystemSize(0))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 0 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class=" font-semibold">@small</p>
+                        </div>
+                        <div onclick="@(() => SetSystemSize(1))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 1 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class="font-semibold">@medium</p>
+                        </div>
+                        <div onclick="@(() => SetSystemSize(2))"
+                            class="flex shadow-md transition-all duration-500 hover:cursor-pointer @(selectedSystem == 2 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-16 h-16">
+                            <p class="font-semibold">@large</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-center h-24">
+                    @if (showCustomSystem)
+                    {
+                        if (displayCreatedCustomSystem)
+                        {
+                            var customSize = systems[3].inverterOutput + "kw";
+                            <div @onclick="CreateCustomSystem"
+                                class="flex shadow-md transition-all duration-500 @(selectedSystem == 3 ? "bg-primary-500 scale-110 text-gray-100 " : "bg-gray-100 text-primary-900 hover:scale-110 ") rounded-2xl justify-center items-center w-24 h-16">
+                                <p class="font-semibold">@customSize</p>
+                            </div>
+                        }
+                        else
+                        {
+                            <div>
+                                <div class="gap-2 px-6">
+                                    <input class="text-center focus:outline-none" type="number" placeholder="Enter System Size" @bind="systems[3].inverterOutput"/>
+                                </div>
+                                <div @onclick="CreateCustomSystem" class="mx-auto pt-4 w-24">
+                                    <Button style="pill" >
+                                        <p  class="font-semibold">Create</p>
+                                    </Button>
+                                </div>
+                            </div>
+                        }
+                    }
+                    else
+                    {
+                        <div @onclick="CustomSystemSelected">
+                            <Button style="pill" >
+                                <p  class="font-semibold">Custom</p>
+                            </Button>
+                        </div>
+                    }
+                        </div>
+            }
+            else
+            {
+                <SystemSizeSkeleton />
+            }
+
+        </div>
+    @* System details *@
+        <div class="flex justify-between gap-4 mt-20 w-full">
+            @if (systems.Count > 0)
+            {
+                <div class="flex flex-col w-full -mt-16 justify-center items-center gap-20">
+                    <div class="mb-2 w-full flex flex-col justify-center items-center">
+                        <div @onclick='@(() => CustomSystemModal("Panels"))'>
+                            <Appliance css="scale-90 hover:shadow transition-all duration-300 hover:-translate-y-1" imageName="SolarPanels.svg" name="Number of Panels"count="@systems[selectedSystem].numberOfPanels" />
+                        </div>
+                        <input type="range" class="accent-primary-800 scale-150 w-2/3 cursor-pointer mt-3" min="4" max="20" step="1" value="@systems[selectedSystem].numberOfPanels" @oninput="ResetPanelTimer" @onchange="UpdateSelectedSystem"/>
+                    </div>
+                    <div class="flex flex-col gap-4 w-full justify-center items-center">
+                        <div class="flex gap-2 pr-2 justify-start items-start">
+                            <div class="flex flex-col gap-2 justify-center items-center w-full has-tooltip">
+                                <Tooltip pointer="50">
+                                    <p class="text-xl text-center">@tooltipService.GetTooltip("battery utilisation")</p>
+                                </Tooltip>
+                                <div class="h-28 shadow flex-col-reverse flex w-20 p-1 bg-gray-300 relative  rounded-lg">
+                                    @{
+                                        var percentage = chargingLimitPercentage + "%";
+                                    }
+                                    <div style="height: @percentage" class='w-full transition-all rounded-lg @(chargingLimitPercentage > 0 && chargingLimitPercentage < 25 ? "bg-red-accent-500" : chargingLimitPercentage > 25 && chargingLimitPercentage < 50 ? "bg-yellow-accent-500" : chargingLimitPercentage > 50 && chargingLimitPercentage < 75 ? "bg-primary-500" : "bg-primary-800")'></div>
+                                        <p class='absolute bottom-2 left-1/2 -translate-x-1/2 @(chargingLimitPercentage > 75 ? "text-primary-400" : chargingLimitPercentage < 25 ? "text-primary-100" : "text-primary-900") font-bold text-md'>@chargingLimitPercentage<span class='@(chargingLimitPercentage > 75 ? "text-primary-300" : chargingLimitPercentage < 25 ? "text-primary-300" :"text-primary-700")'>%</span></p>
+                                    <div class="w-8 h-4 -z-10 bg-gray-300 rounded-md absolute -top-2 left-1/2 -translate-x-1/2"></div>
+                                </div>
+                                <p class="text-center">Battery Utilization</p>
+                            </div>
+                            <div @onclick='@(() => CustomSystemModal("Batteries"))'>
+                                <Appliance css="scale-90 hover:shadow transition-all duration-300 hover:-translate-y-1" ImageName="Batteries.svg" name="Number of Batteries" count="@systems[selectedSystem].numberOfBatteries" />
+                            </div>
+                        </div>
+                        <input type="range" class="accent-primary-800 scale-150 w-2/3 custom-range cursor-pointer " min="1" max="6" step="1" value="@systems[selectedSystem].numberOfBatteries" @oninput="ResetBatteryTimer"  @onchange="UpdateSelectedSystem"/>
+                    </div>
+                </div>
+            }
+            else
+            {
+                <BatterySkeleton />
+            }
+        </div>
+        <div class="flex flex-col w-full mt-10 justify-center items-center gap-4 mb-20">
+            <h3 class="font-medium text-lg text-primary-900 text-left">Running Hours on Batteries</h3>
+            <div class="flex relative flex-col justify-center w-full has-tooltip">
+                <div>
+                    <Tooltip pointer="48">
+                        <p>@tooltipService.GetTooltip("running hours on batteries")</p>
+                    </Tooltip>
+                </div>
+                <DaylightChart hours="@dlh" daylightHours="@daylight" />
+                <div class="flex w-full justify-center absolute top-1/2 left-0 items-center gap-1 mt-5">
+                        @{
+                            if (dlh == (24 - daylight))
+                            {
+                                <p class="text-5xl text-primary-900 font-semibold">@dlh+</p>
+                            }
+                            else
+                            {
+                                <p class="text-5xl text-primary-900 font-semibold">@dlh</p>
+                            }
+                        }
+                    <p class="text-5xl text-gray-400 font-bold">h</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+</div>
 
 
 
diff --git a/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor b/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor
deleted file mode 100644
index 94bd4043..00000000
--- a/src/apps/blazor-app/Components/Advanced/MobileBuildHome.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@* Mobile Viewport *@
-<div class="flex flex-col lg:hidden w-full px-3 mx-auto justify-center items-center">
-    <Image ImageName="@homeImage" alt="Home" css="w-10/12 h-full mt-10" />
-    
-</div>
-
-@code {
-    [Parameter]
-    public string homeImage { get; set; }
-    public EventCallback<string> homeImageChanged { get; set; }
-
-    public void ChangeImage(string image)
-    {
-        homeImage = image;
-        homeImageChanged.InvokeAsync(image);
-    }  
-}
\ No newline at end of file
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 5de2e89e..4bb56d42 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -2033,6 +2033,12 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-\[\] {
+  --tw-scale-x: ;
+  --tw-scale-y: ;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-scale-x-100 {
   --tw-scale-x: -1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

From 80e0b62ba42e5391215d9d1910c139165c4001f2 Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sun, 22 Oct 2023 02:41:34 +0200
Subject: [PATCH 12/13] Calculations responsiveness done ready for variants

---
 .../Components/Advanced/BuildYourHome.razor   | 65 ++++++++++++++++++-
 .../Advanced/Skeletons/MapSkeleton.razor      |  2 +-
 .../Components/SolarScore/Results.razor       |  6 +-
 src/apps/blazor-app/wwwroot/css/app.css       | 14 ++++
 4 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
index 86f0c252..3b0365a6 100644
--- a/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
+++ b/src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
@@ -357,7 +357,7 @@
             }
 
         </div>
-    @* System details *@
+        @* System details *@
         <div class="flex justify-between gap-4 mt-20 w-full">
             @if (systems.Count > 0)
             {
@@ -423,6 +423,69 @@
         </div>
     </div>
     
+    @* Add Appliances *@
+    <div class="w-[100vw]  grid grid-cols-2 justify-center gap-4 mt-20">
+        <div class="flex mx-auto flex-col gap-4 col-span-2 items-center justify-center mb-4 -mt-8 w-full">
+            <div class="flex gap-3 w-full relative justify-center">
+                <h1 class="text-base font-medium text-center mb-2  text-primary-900">Select Appliances</h1>
+                <div class="group">
+                    <Image ImageName="Info.svg" alt="Info" css="w-7 hover:-translate-y-1 transition-all duration-300" />
+                    <div
+                        class="absolute hidden fade-in-active w-full -top-10 translate-x-10 max-w-md  group-hover:block transition-all duration-300 ease-in-out text-sm  bg-primary-200 shadow rounded-t-2xl rounded-r-2xl p-4 group-hover:-translate-y-10 ">
+                        <p class="text-gray-900">Click on the appliances to add them to your calculation, you can add multiple of the same appliances in the variants section below</p>
+                    </div>
+                </div>
+            </div>
+            <input class="block w-72 rounded-lg border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" type="text" placeholder="Search.." @bind-value="applianceSearch" @bind-value:event="oninput">
+                @if (appliances.Count > 0)
+                {
+                        <div class="flex">
+                            <div class="my-auto h-fit hover:cursor-pointer" @onclick="DecrementAppliancePage">
+                                <Image ImageName="Arrow-Left.svg" alt="Left Arrow"
+                                    css="w-12 rounded-full p-2 hover:bg-slate-200 hover:cursor-pointer" />
+                            </div>
+                            <div class="grid mx-auto gap-4 space-y-2 grid-cols-2 mt-2 justify-center w-[245px] @applianceAnimation">
+                                @{
+                                    filteredAppliances = getFilteredAppliances(applianceSearch);
+                                    if(filteredAppliances.Count <= 8)
+                                    {
+                                        appliancesPage = 0;
+                                    }
+                                    @for (int i = 0; i < 8 && filteredAppliances.Count > 0; i++)
+                                    {
+                                        
+                                        @if (filteredAppliances.Count > i + appliancesPage * 8)
+                                        {   
+                                            int applianceQuantity = 0;
+                                            foreach (ApplianceModel app in appliances.Where(app => app.type == filteredAppliances[i + appliancesPage * 8].type))
+                                            {
+                                                applianceQuantity += app.quantity;
+                                            }
+                                            ApplianceModel appliance = filteredAppliances[i + appliancesPage * 8];
+                                            <div @onclick="@(() => ToggleAppliance(appliance))">
+                                                <Appliance css="hover:shadow hover:cursor-pointer transition-all duration-300 hover:-translate-y-1 scale-1.7" imageName="@(appliance.type + ".svg")" name="@appliance.type" count="@applianceQuantity" />     
+                                            </div>
+                                        }
+                                    }
+                                }
+                            </div>
+                            <div class="my-auto h-fit hover:cursor-pointer" @onclick="IncrementAppliancePage">
+                                <Image ImageName="Arrow-Right.svg" alt="Right Arrow"
+                                    css="w-12 rounded-full p-2 hover:bg-slate-200 hover:cursor-pointer" />
+                            </div>
+                        </div>
+                }
+                else
+                {
+                <div class="grid mx-auto gap-4 space-y-2 grid-cols-2 mt-2 justify-center">
+                    @for (int i = 0; i < 8; i++)
+                    {
+                        <AppliancesSkeleton />
+                    }
+                </div>
+                }
+        </div>
+    </div>
 </div>
 
 
diff --git a/src/apps/blazor-app/Components/Advanced/Skeletons/MapSkeleton.razor b/src/apps/blazor-app/Components/Advanced/Skeletons/MapSkeleton.razor
index 06fd82ed..2bea3287 100644
--- a/src/apps/blazor-app/Components/Advanced/Skeletons/MapSkeleton.razor
+++ b/src/apps/blazor-app/Components/Advanced/Skeletons/MapSkeleton.razor
@@ -1,4 +1,4 @@
-<div class="flex items-center justify-center w-80 h-80 bg-gray-300 rounded animate-pulse">
+<div class="flex items-center justify-center w-full h-60 lg:w-80 lg:h-80 bg-gray-300 rounded animate-pulse">
     <svg class="w-10 h-10 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
         viewBox="0 0 20 18">
         <path
diff --git a/src/apps/blazor-app/Components/SolarScore/Results.razor b/src/apps/blazor-app/Components/SolarScore/Results.razor
index 0190dada..6da29c92 100644
--- a/src/apps/blazor-app/Components/SolarScore/Results.razor
+++ b/src/apps/blazor-app/Components/SolarScore/Results.razor
@@ -185,7 +185,7 @@
                         </div>
                     </div>
                     <div class="flex flex-col w-full md:w-1/2 mt-16 lg:-mt-16 justify-center items-center gap-4">
-                        <div class="-mt-10 mb-5 w-full flex flex-col">
+                        <div class="-mt-10 mb-5 w-full flex flex-col justify-center items-center gap-4">
                             <div class="has-tooltip">
                                 <Tooltip pointer="45">
                                         <p>@tooltipService.GetTooltip("number of panels")</p>
@@ -193,7 +193,7 @@
                                 <Appliance css="scale-90" imageName="SolarPanels.svg" name="Number of Panels"
                                     count="@numOfPanels" />
                             </div>
-                            <input type="range" class="accent-primary-800  cursor-pointer w-full " min="4" max="20"
+                            <input type="range" class="accent-primary-800 scale-150 w-2/3  cursor-pointer " min="4" max="20"
                                 step="1" @bind-value="@numOfPanels" @oninput="ResetPanelTimer" />
                         </div>
                         <div class="flex gap-2 pr-2 justify-start items-start">
@@ -231,7 +231,7 @@
                                     count="@numOfBatteries" />
                             </div>
                         </div>
-                        <input type="range" class="accent-primary-800  cursor-pointer w-full " min="1" max="6" step="1"
+                        <input type="range" class="accent-primary-800 scale-150 w-2/3  cursor-pointer " min="1" max="6" step="1"
                         @bind-value="@numOfBatteries" @oninput="ResetBatteryTimer" />
                     </div>
 
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 4bb56d42..5901beab 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -2553,6 +2553,16 @@ video {
   background-color: rgb(255 193 8 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -4633,6 +4643,10 @@ html {
     width: fit-content;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:flex-1 {
     flex: 1 1 0%;
   }

From 0fa00e7470de61ace7263e953c9e8a0e39ce60da Mon Sep 17 00:00:00 2001
From: Francois Smith <90509905+francoissmith@users.noreply.github.com>
Date: Sun, 22 Oct 2023 22:52:42 +0200
Subject: [PATCH 13/13] Fixed Finance Page

---
 .../Components/Advanced/Finanace.razor        | 24 ++++++++-------
 src/apps/blazor-app/wwwroot/css/app.css       | 29 ++++++-------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/apps/blazor-app/Components/Advanced/Finanace.razor b/src/apps/blazor-app/Components/Advanced/Finanace.razor
index 2a9b234f..5f332014 100644
--- a/src/apps/blazor-app/Components/Advanced/Finanace.razor
+++ b/src/apps/blazor-app/Components/Advanced/Finanace.razor
@@ -10,18 +10,21 @@
     <Subscript><p class="text-center">All calculations are derived from the monthly bill. Please keep in mind that these calculations are approximate, and costs may vary among different solar installers."</p></Subscript>
 </Heading>
 
-<div class="w-full flex">
-    <div class="flex flex-col gap-2 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
-        <p class="text-center text-white font-semibold">Select your monthly bill:</p>
-        <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
+<div class="w-full flex px-20">
+    <div class="flex flex-col gap-4 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
+        <div class="flex justify-center items-center">
+            <div class="flex flex-col gap-2 items-center justify-center">
+                <p class="text-center text-white font-semibold">Select your monthly bill:</p>
+                <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
+            </div>
+            <p class="text-2xl text-center text-primary-900 font-black self-center mx-4">OR</p>
+            <div class="flex flex-col gap-2 items-center justify-center">
+                <p class="text-center text-white font-semibold">Select your monthly electricity usage:</p>
+                <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">@monthlyUsage kWh</h1>
+            </div>
+        </div>
         <input type="range" class="accent-primary-800  cursor-pointer w-3/4" min="1000" max="7000" step="100" @bind="monthlyBill" @oninput="HandleBillSliderChange" />
     </div>
-    <p class="text-2xl text-center text-primary-900 font-black self-center mx-4">OR</p>
-    <div  class="flex flex-col gap-2 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
-        <p class="text-center text-white font-semibold">Select your monthly electricity usage:</p>
-        <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">@monthlyUsage kWh</h1>
-        <input type="range" class="accent-primary-800  cursor-pointer w-3/4" min="400" max="2800" step="20" @bind="monthlyUsage" @oninput="HandleUsageSliderChange" />
-    </div>  
 </div>
 
 <div class="flex gap-5 justify-center items-center mt-10">
@@ -136,6 +139,7 @@
 
     private void HandleBillSliderChange(ChangeEventArgs e)
     {
+
         if (int.TryParse(e.Value!.ToString(), out int newValue))
         {
             monthlyBill = newValue;
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 5901beab..88f6e269 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -2033,12 +2033,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-\[\] {
-  --tw-scale-x: ;
-  --tw-scale-y: ;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-scale-x-100 {
   --tw-scale-x: -1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2553,16 +2547,6 @@ video {
   background-color: rgb(255 193 8 / var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2779,6 +2763,11 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -4634,6 +4623,10 @@ html {
     width: 66.666667%;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:w-\[30\%\] {
     width: 30%;
   }
@@ -4643,10 +4636,6 @@ html {
     width: fit-content;
   }
 
-  .lg\:w-80 {
-    width: 20rem;
-  }
-
   .lg\:flex-1 {
     flex: 1 1 0%;
   }