Updated home page

COS301-SE-2023 · Jul 9, 2023 · 2f19c65 · 2f19c65
1 parent e3e0a6c
commit 2f19c65
Show file tree

Hide file tree

Showing 2 changed files with 237 additions and 55 deletions.
diff --git a/src/apps/blazor-app/Pages/Index.razor b/src/apps/blazor-app/Pages/Index.razor
@@ -8,7 +8,7 @@
   <BlazorApp.Section.Hero /> *@
 
   @* How it works *@
-  <div>
+  <div class="mt-10">
     <div class="w-fit mx-auto text-center">
       <div>
         <Heading>
@@ -21,69 +21,92 @@
         </Heading>
       </div>
     </div>
-      <div class="mt-8 space-y-10 lg:space-y-0 lg:flex justify-between max-w-[95%] mx-auto">
-        <div class="flex-col">
-          <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
+    <div class="mt-8 space-y-10 lg:space-y-0 lg:flex justify-between max-w-[95%] mx-auto">
+      <div class="flex-col">
+        <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
 
-            <svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"
-              fill="none">
-              <path opacity="0.5"
-                d="M6.25 27.1601C6.25 24.8622 6.25 23.7132 7.068 23.0431C7.35842 22.8052 7.7114 22.6147 8.10478 22.4837C9.21276 22.1148 10.6689 22.4781 13.5813 23.2048C15.8047 23.7595 16.9164 24.0369 18.0398 24.0082C18.4524 23.9977 18.8625 23.9565 19.2643 23.8855C20.3581 23.6919 21.3332 23.2053 23.2833 22.2322L26.1632 20.795C28.6612 19.5485 29.9102 18.9252 31.3439 18.7815C32.7776 18.6378 34.2017 18.9931 37.0498 19.7037L39.4764 20.3092C41.539 20.8238 42.5703 21.0811 43.1601 21.6938C43.75 22.3064 43.75 23.1201 43.75 24.7475V37.4233C43.75 39.7212 43.75 40.8701 42.932 41.5403C42.6416 41.7782 42.2886 41.9686 41.8952 42.0996C40.7872 42.4686 39.3311 42.1052 36.4187 41.3786C34.1953 40.8238 33.0836 40.5464 31.9602 40.5751C31.5476 40.5857 31.1375 40.6268 30.7357 40.6979C29.6419 40.8914 28.6668 41.378 26.7167 42.3511L23.8368 43.7883C21.3388 45.0349 20.0898 45.6581 18.6561 45.8018C17.2224 45.9456 15.7983 45.5902 12.9502 44.8796L10.5236 44.2741C8.46102 43.7595 7.42974 43.5022 6.83987 42.8896C6.25 42.277 6.25 41.4633 6.25 39.8359V27.1601Z"
-                fill="#1C274C" />
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M25 4.16663C18.0964 4.16663 12.5 9.48353 12.5 16.0423C12.5 22.5496 16.4896 30.1431 22.7142 32.8585C24.1652 33.4915 25.8348 33.4915 27.2858 32.8585C33.5104 30.1431 37.5 22.5496 37.5 16.0423C37.5 9.48353 31.9036 4.16663 25 4.16663ZM25 20.8333C27.3012 20.8333 29.1667 18.9678 29.1667 16.6666C29.1667 14.3654 27.3012 12.5 25 12.5C22.6988 12.5 20.8333 14.3654 20.8333 16.6666C20.8333 18.9678 22.6988 20.8333 25 20.8333Z"
-                fill="#1C274C" />
-            </svg>
-          </div>
+          <svg class="m-auto" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+            <path opacity="0.5"
+              d="M6.25 27.1601C6.25 24.8622 6.25 23.7132 7.068 23.0431C7.35842 22.8052 7.7114 22.6147 8.10478 22.4837C9.21276 22.1148 10.6689 22.4781 13.5813 23.2048C15.8047 23.7595 16.9164 24.0369 18.0398 24.0082C18.4524 23.9977 18.8625 23.9565 19.2643 23.8855C20.3581 23.6919 21.3332 23.2053 23.2833 22.2322L26.1632 20.795C28.6612 19.5485 29.9102 18.9252 31.3439 18.7815C32.7776 18.6378 34.2017 18.9931 37.0498 19.7037L39.4764 20.3092C41.539 20.8238 42.5703 21.0811 43.1601 21.6938C43.75 22.3064 43.75 23.1201 43.75 24.7475V37.4233C43.75 39.7212 43.75 40.8701 42.932 41.5403C42.6416 41.7782 42.2886 41.9686 41.8952 42.0996C40.7872 42.4686 39.3311 42.1052 36.4187 41.3786C34.1953 40.8238 33.0836 40.5464 31.9602 40.5751C31.5476 40.5857 31.1375 40.6268 30.7357 40.6979C29.6419 40.8914 28.6668 41.378 26.7167 42.3511L23.8368 43.7883C21.3388 45.0349 20.0898 45.6581 18.6561 45.8018C17.2224 45.9456 15.7983 45.5902 12.9502 44.8796L10.5236 44.2741C8.46102 43.7595 7.42974 43.5022 6.83987 42.8896C6.25 42.277 6.25 41.4633 6.25 39.8359V27.1601Z"
+              fill="#1C274C" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M25 4.16663C18.0964 4.16663 12.5 9.48353 12.5 16.0423C12.5 22.5496 16.4896 30.1431 22.7142 32.8585C24.1652 33.4915 25.8348 33.4915 27.2858 32.8585C33.5104 30.1431 37.5 22.5496 37.5 16.0423C37.5 9.48353 31.9036 4.16663 25 4.16663ZM25 20.8333C27.3012 20.8333 29.1667 18.9678 29.1667 16.6666C29.1667 14.3654 27.3012 12.5 25 12.5C22.6988 12.5 20.8333 14.3654 20.8333 16.6666C20.8333 18.9678 22.6988 20.8333 25 20.8333Z"
+              fill="#1C274C" />
+          </svg>
+        </div>
 
-          <div class="text-center max-w-sm mx-auto">
-            <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Choose Location</h1>
-            <p class="text-[#1A202C] font-normal">Choose your location to determine solar potential. Our platform
-              provides accurate results tailored to your specific area.</p>
-          </div>
+        <div class="text-center max-w-sm mx-auto">
+          <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Choose Location</h1>
+          <p class="text-[#1A202C] font-normal">Choose your location to determine solar potential. Our platform
+            provides accurate results tailored to your specific area.</p>
         </div>
-        <div class="flex-col">
-          <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
+      </div>
+
+      <div class="flex-col">
+        <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
-              <path opacity="0.5"
-                d="M19.9841 6.66728C19.4768 7.09958 19.2231 7.31576 18.9522 7.49733C18.3312 7.91359 17.6337 8.20249 16.9002 8.3473C16.5802 8.41047 16.248 8.43699 15.5835 8.49001L15.5835 8.49001L15.5835 8.49001C13.9139 8.62324 13.0792 8.68986 12.3827 8.93585C10.7719 9.50482 9.50485 10.7719 8.93588 12.3827C8.68989 13.0791 8.62327 13.9139 8.49004 15.5834L8.49004 15.5835L8.49004 15.5835C8.43702 16.248 8.4105 16.5802 8.34733 16.9002C8.20252 17.6337 7.91362 18.3311 7.49736 18.9522C7.31578 19.2231 7.0996 19.4768 6.66726 19.9841L6.66722 19.9841C5.5809 21.2589 5.03771 21.8963 4.71919 22.5627C3.98248 24.104 3.98248 25.8959 4.71919 27.4372C5.03771 28.1036 5.58088 28.741 6.66721 30.0158L6.66722 30.0158L6.66731 30.0159C7.09957 30.5231 7.3158 30.7769 7.49736 31.0478C7.91362 31.6688 8.20252 32.3663 8.34733 33.0998C8.4105 33.4197 8.43702 33.752 8.49004 34.4165L8.49004 34.4165C8.62327 36.086 8.68989 36.9208 8.93588 37.6172C9.50485 39.2281 10.7719 40.4951 12.3827 41.0641C13.0792 41.3101 13.9139 41.3767 15.5835 41.5099C16.248 41.5629 16.5802 41.5895 16.9002 41.6526C17.6337 41.7974 18.3312 42.0863 18.9522 42.5026C19.2231 42.6842 19.4768 42.9003 19.9841 43.3326L19.9842 43.3327C21.2589 44.4191 21.8963 44.9622 22.5627 45.2808C24.1041 46.0175 25.8959 46.0175 27.4373 45.2808C28.1037 44.9622 28.7411 44.4191 30.0158 43.3327L30.0159 43.3327C30.5232 42.9003 30.7769 42.6842 31.0478 42.5026C31.6688 42.0863 32.3663 41.7974 33.0998 41.6526C33.4198 41.5895 33.752 41.5629 34.4165 41.5099C36.086 41.3767 36.9208 41.3101 37.6173 41.0641C39.2281 40.4951 40.4951 39.2281 41.0641 37.6172C41.3101 36.9208 41.3767 36.086 41.5099 34.4165C41.563 33.752 41.5895 33.4197 41.6527 33.0998C41.7975 32.3663 42.0864 31.6688 42.5026 31.0478C42.6842 30.7768 42.9004 30.5231 43.3328 30.0158C44.4191 28.741 44.9623 28.1036 45.2808 27.4372C46.0175 25.8959 46.0175 24.104 45.2808 22.5627C44.9623 21.8963 44.4191 21.2589 43.3328 19.9841L43.3327 19.984C42.9004 19.4767 42.6842 19.2231 42.5026 18.9522C42.0864 18.3311 41.7975 17.6337 41.6527 16.9002C41.5895 16.5802 41.563 16.2479 41.5099 15.5835C41.3767 13.9139 41.3101 13.0791 41.0641 12.3827C40.4951 10.7719 39.2281 9.50482 37.6173 8.93585C36.9208 8.68986 36.0861 8.62324 34.4165 8.49001L34.4165 8.49001C33.752 8.43699 33.4198 8.41047 33.0998 8.3473C32.3663 8.20249 31.6688 7.91359 31.0478 7.49733C30.7769 7.31574 30.5232 7.09956 30.0158 6.66719L30.0158 6.66718C28.7411 5.58085 28.1037 5.03768 27.4373 4.71916C25.8959 3.98245 24.1041 3.98245 22.5627 4.71916C21.8963 5.03768 21.2589 5.58086 19.9842 6.66719L19.9841 6.66728Z"
-                fill="#1C274C" />
-              <path
-                d="M32.981 17.0209C33.6432 17.6831 33.6432 18.7566 32.981 19.4188L19.4167 32.9831C18.7545 33.6452 17.681 33.6452 17.0188 32.9831C16.3567 32.3209 16.3567 31.2474 17.0188 30.5852L30.5832 17.0209C31.2453 16.3588 32.3189 16.3588 32.981 17.0209Z"
-                fill="#1C274C" />
-              <path
-                d="M32.9125 30.6538C32.9125 31.9024 31.9003 32.9145 30.6517 32.9145C29.4032 32.9145 28.391 31.9024 28.391 30.6538C28.391 29.4052 29.4032 28.3931 30.6517 28.3931C31.9003 28.3931 32.9125 29.4052 32.9125 30.6538Z"
-                fill="#1C274C" />
-              <path
-                d="M19.3481 21.6109C20.5967 21.6109 21.6088 20.5988 21.6088 19.3502C21.6088 18.1016 20.5967 17.0895 19.3481 17.0895C18.0996 17.0895 17.0874 18.1016 17.0874 19.3502C17.0874 20.5988 18.0996 21.6109 19.3481 21.6109Z"
-                fill="#1C274C" />
-            </svg>
-          </div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+            <path opacity="0.5"
+              d="M19.9841 6.66728C19.4768 7.09958 19.2231 7.31576 18.9522 7.49733C18.3312 7.91359 17.6337 8.20249 16.9002 8.3473C16.5802 8.41047 16.248 8.43699 15.5835 8.49001L15.5835 8.49001L15.5835 8.49001C13.9139 8.62324 13.0792 8.68986 12.3827 8.93585C10.7719 9.50482 9.50485 10.7719 8.93588 12.3827C8.68989 13.0791 8.62327 13.9139 8.49004 15.5834L8.49004 15.5835L8.49004 15.5835C8.43702 16.248 8.4105 16.5802 8.34733 16.9002C8.20252 17.6337 7.91362 18.3311 7.49736 18.9522C7.31578 19.2231 7.0996 19.4768 6.66726 19.9841L6.66722 19.9841C5.5809 21.2589 5.03771 21.8963 4.71919 22.5627C3.98248 24.104 3.98248 25.8959 4.71919 27.4372C5.03771 28.1036 5.58088 28.741 6.66721 30.0158L6.66722 30.0158L6.66731 30.0159C7.09957 30.5231 7.3158 30.7769 7.49736 31.0478C7.91362 31.6688 8.20252 32.3663 8.34733 33.0998C8.4105 33.4197 8.43702 33.752 8.49004 34.4165L8.49004 34.4165C8.62327 36.086 8.68989 36.9208 8.93588 37.6172C9.50485 39.2281 10.7719 40.4951 12.3827 41.0641C13.0792 41.3101 13.9139 41.3767 15.5835 41.5099C16.248 41.5629 16.5802 41.5895 16.9002 41.6526C17.6337 41.7974 18.3312 42.0863 18.9522 42.5026C19.2231 42.6842 19.4768 42.9003 19.9841 43.3326L19.9842 43.3327C21.2589 44.4191 21.8963 44.9622 22.5627 45.2808C24.1041 46.0175 25.8959 46.0175 27.4373 45.2808C28.1037 44.9622 28.7411 44.4191 30.0158 43.3327L30.0159 43.3327C30.5232 42.9003 30.7769 42.6842 31.0478 42.5026C31.6688 42.0863 32.3663 41.7974 33.0998 41.6526C33.4198 41.5895 33.752 41.5629 34.4165 41.5099C36.086 41.3767 36.9208 41.3101 37.6173 41.0641C39.2281 40.4951 40.4951 39.2281 41.0641 37.6172C41.3101 36.9208 41.3767 36.086 41.5099 34.4165C41.563 33.752 41.5895 33.4197 41.6527 33.0998C41.7975 32.3663 42.0864 31.6688 42.5026 31.0478C42.6842 30.7768 42.9004 30.5231 43.3328 30.0158C44.4191 28.741 44.9623 28.1036 45.2808 27.4372C46.0175 25.8959 46.0175 24.104 45.2808 22.5627C44.9623 21.8963 44.4191 21.2589 43.3328 19.9841L43.3327 19.984C42.9004 19.4767 42.6842 19.2231 42.5026 18.9522C42.0864 18.3311 41.7975 17.6337 41.6527 16.9002C41.5895 16.5802 41.563 16.2479 41.5099 15.5835C41.3767 13.9139 41.3101 13.0791 41.0641 12.3827C40.4951 10.7719 39.2281 9.50482 37.6173 8.93585C36.9208 8.68986 36.0861 8.62324 34.4165 8.49001L34.4165 8.49001C33.752 8.43699 33.4198 8.41047 33.0998 8.3473C32.3663 8.20249 31.6688 7.91359 31.0478 7.49733C30.7769 7.31574 30.5232 7.09956 30.0158 6.66719L30.0158 6.66718C28.7411 5.58085 28.1037 5.03768 27.4373 4.71916C25.8959 3.98245 24.1041 3.98245 22.5627 4.71916C21.8963 5.03768 21.2589 5.58086 19.9842 6.66719L19.9841 6.66728Z"
+              fill="#1C274C" />
+            <path
+              d="M32.981 17.0209C33.6432 17.6831 33.6432 18.7566 32.981 19.4188L19.4167 32.9831C18.7545 33.6452 17.681 33.6452 17.0188 32.9831C16.3567 32.3209 16.3567 31.2474 17.0188 30.5852L30.5832 17.0209C31.2453 16.3588 32.3189 16.3588 32.981 17.0209Z"
+              fill="#1C274C" />
+            <path
+              d="M32.9125 30.6538C32.9125 31.9024 31.9003 32.9145 30.6517 32.9145C29.4032 32.9145 28.391 31.9024 28.391 30.6538C28.391 29.4052 29.4032 28.3931 30.6517 28.3931C31.9003 28.3931 32.9125 29.4052 32.9125 30.6538Z"
+              fill="#1C274C" />
+            <path
+              d="M19.3481 21.6109C20.5967 21.6109 21.6088 20.5988 21.6088 19.3502C21.6088 18.1016 20.5967 17.0895 19.3481 17.0895C18.0996 17.0895 17.0874 18.1016 17.0874 19.3502C17.0874 20.5988 18.0996 21.6109 19.3481 21.6109Z"
+              fill="#1C274C" />
+          </svg>
+        </div>
 
-          <div class="text-center max-w-sm mx-auto">
-            <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Get a solar score</h1>
-            <p class="text-[#1A202C] font-normal">Obtain your solar score effortlessly. Our platform calculates your solar score based on multiple key factors.</p>
-          </div>
+        <div class="text-center max-w-sm mx-auto">
+          <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Get a solar score</h1>
+          <p class="text-[#1A202C] font-normal">Obtain your solar score effortlessly. Our platform calculates your solar
+            score based on multiple key factors.</p>
         </div>
-        <div class="flex-col">
-          <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
+      </div>
+      <div class="flex-col">
+        <div class="bg-[#bebebe] rounded-[30px] p-8 w-[106px] h-[106px] mx-auto">
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
-              <path opacity="0.5"
-                d="M12.9627 9.58547C13.8888 8.96662 14.8613 8.42988 15.869 7.97862C18.727 6.69868 20.1561 6.0587 22.0572 7.29038C23.9583 8.52206 23.9583 10.5425 23.9583 14.5833V17.7083C23.9583 21.6367 23.9583 23.6009 25.1787 24.8212C26.3991 26.0416 28.3633 26.0416 32.2917 26.0416H35.4167C39.4575 26.0416 41.4779 26.0416 42.7096 27.9428C43.9413 29.8439 43.3013 31.2729 42.0213 34.131C41.5701 35.1386 41.0333 36.1111 40.4145 37.0373C38.2398 40.292 35.1487 42.8288 31.5323 44.3267C27.9158 45.8247 23.9364 46.2167 20.0972 45.453C16.258 44.6893 12.7314 42.8044 9.96351 40.0365C7.1956 37.2685 5.31062 33.742 4.54696 29.9028C3.78329 26.0636 4.17523 22.0841 5.67322 18.4677C7.1712 14.8512 9.70795 11.7602 12.9627 9.58547Z"
-                fill="#1C274C" />
-              <path
-                d="M44.6792 14.727C42.988 10.4339 39.5661 7.01198 35.2729 5.32071C32.0614 4.05552 29.1667 6.96484 29.1667 10.4166V18.75C29.1667 19.9005 30.0994 20.8333 31.25 20.8333H39.5833C43.0351 20.8333 45.9444 17.9386 44.6792 14.727Z"
-                fill="#1C274C" />
-            </svg>
-          </div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+            <path opacity="0.5"
+              d="M12.9627 9.58547C13.8888 8.96662 14.8613 8.42988 15.869 7.97862C18.727 6.69868 20.1561 6.0587 22.0572 7.29038C23.9583 8.52206 23.9583 10.5425 23.9583 14.5833V17.7083C23.9583 21.6367 23.9583 23.6009 25.1787 24.8212C26.3991 26.0416 28.3633 26.0416 32.2917 26.0416H35.4167C39.4575 26.0416 41.4779 26.0416 42.7096 27.9428C43.9413 29.8439 43.3013 31.2729 42.0213 34.131C41.5701 35.1386 41.0333 36.1111 40.4145 37.0373C38.2398 40.292 35.1487 42.8288 31.5323 44.3267C27.9158 45.8247 23.9364 46.2167 20.0972 45.453C16.258 44.6893 12.7314 42.8044 9.96351 40.0365C7.1956 37.2685 5.31062 33.742 4.54696 29.9028C3.78329 26.0636 4.17523 22.0841 5.67322 18.4677C7.1712 14.8512 9.70795 11.7602 12.9627 9.58547Z"
+              fill="#1C274C" />
+            <path
+              d="M44.6792 14.727C42.988 10.4339 39.5661 7.01198 35.2729 5.32071C32.0614 4.05552 29.1667 6.96484 29.1667 10.4166V18.75C29.1667 19.9005 30.0994 20.8333 31.25 20.8333H39.5833C43.0351 20.8333 45.9444 17.9386 44.6792 14.727Z"
+              fill="#1C274C" />
+          </svg>
+        </div>
 
-          <div class="text-center max-w-sm mx-auto">
-            <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Get a report</h1>
-            <p class="text-[#1A202C] font-normal">Gain comprehensive insights with a detailed solar report for informed decision-making.</p>
-          </div>
+        <div class="text-center max-w-sm mx-auto">
+          <h1 class="text-[#000F52] font-semibold text-2xl leading-[150%] tracking-tight	">Get a report</h1>
+          <p class="text-[#1A202C] font-normal">Gain comprehensive insights with a detailed solar report for informed
+            decision-making.</p>
         </div>
       </div>
+    </div>
+
+  </div>
+  @* Unlock your full potential *@
+  <div class="mt-28">
+    <div>
+      <Image ImageName="Banhoek-landscape.jpg" css="w-full h-[50rem] object-fit -z-10" alt="background image" />
+    </div>
+  </div>
+
+  @* Frequently Asked Questions *@
+  <div>
+    <div class="w-fit mx-auto text-center my-20">
+      <Heading>
+        <Header>
+          <h1>Frequently Asked Questions</h1>
+        </Header>
+        <Subscript>
+          <h1>Discover answers to common solar energy questions.</h1>
+        </Subscript>
+      </Heading>
+    </div>
   </div>
 </div>