diff --git a/static/css/styles.css b/static/css/styles.css
index a92aa416..8c9f9ff8 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -748,7 +748,7 @@ input[type=file] {
   color: rgb(49 74 87 / var(--tw-text-opacity));
 }
 
-.dark #signup_form input[type=email],.dark
+.dark #signup_form input[type=email],.dark 
   #signup_form input[type=password] {
   --tw-bg-opacity: 1;
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
@@ -973,20 +973,20 @@ input[type=file] {
   right: 0px;
 }
 
-.-right-2 {
-  right: -0.5rem;
-}
-
-.-top-\[2px\] {
-  top: -2px;
+.top-0 {
+  top: 0px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-top-\[2px\] {
+  top: -2px;
 }
 
 .top-10 {
@@ -1041,18 +1041,14 @@ input[type=file] {
   order: 1;
 }
 
-.order-last {
-  order: 9999;
-}
-
-.order-first {
-  order: -9999;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .float-right {
   float: right;
 }
@@ -1104,11 +1100,6 @@ input[type=file] {
   margin-bottom: 0.75rem;
 }
 
-.mx-10 {
-  margin-left: 2.5rem;
-  margin-right: 2.5rem;
-}
-
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1207,8 +1198,12 @@ input[type=file] {
   margin-right: 0.75rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
+.-ml-6 {
+  margin-left: -1.5rem;
+}
+
+.-mr-6 {
+  margin-right: -1.5rem;
 }
 
 .mt-12 {
@@ -1263,6 +1258,10 @@ input[type=file] {
   margin-top: -0.25rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -1287,6 +1286,10 @@ input[type=file] {
   margin-left: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -1331,6 +1334,14 @@ input[type=file] {
   height: 100%;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -1363,8 +1374,12 @@ input[type=file] {
   height: 8rem;
 }
 
-.h-12 {
-  height: 3rem;
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-2 {
+  height: 0.5rem;
 }
 
 .max-h-\[470px\] {
@@ -1391,6 +1406,18 @@ input[type=file] {
   width: 12rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -1475,6 +1502,15 @@ input[type=file] {
   width: 0.25rem;
 }
 
+.w-min {
+  width: -moz-min-content;
+  width: min-content;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1495,6 +1531,11 @@ input[type=file] {
   max-width: 42rem;
 }
 
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1507,6 +1548,10 @@ input[type=file] {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -1567,6 +1612,10 @@ input[type=file] {
   grid-auto-rows: minmax(0, 1fr);
 }
 
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1575,6 +1624,10 @@ input[type=file] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1587,6 +1640,10 @@ input[type=file] {
   grid-template-rows: repeat(5, minmax(0, 1fr));
 }
 
+.grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1611,6 +1668,10 @@ input[type=file] {
   justify-content: flex-start;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1619,6 +1680,10 @@ input[type=file] {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .justify-items-center {
   justify-items: center;
 }
@@ -1635,10 +1700,27 @@ input[type=file] {
   gap: 2rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-0 {
+  gap: 0px;
+}
+
 .gap-y-10 {
   row-gap: 2.5rem;
 }
 
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1769,6 +1851,10 @@ input[type=file] {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1787,6 +1873,10 @@ input[type=file] {
   white-space: nowrap;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1873,6 +1963,15 @@ input[type=file] {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1926,6 +2025,21 @@ input[type=file] {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(167 243 208 / var(--tw-bg-opacity));
+}
+
+.bg-sky-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+}
+
+.bg-silver {
+  --tw-bg-opacity: 1;
+  background-color: rgb(181 201 211 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2018,6 +2132,10 @@ input[type=file] {
   padding: 1.25rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2026,10 +2144,6 @@ input[type=file] {
   padding: 0.75rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -2038,6 +2152,10 @@ input[type=file] {
   padding: 10px;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2093,6 +2211,11 @@ input[type=file] {
   padding-bottom: 2.75rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2169,12 +2292,20 @@ input[type=file] {
   padding-left: 1.25rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pr-20 {
+  padding-right: 5rem;
 }
 
 .pr-3 {
@@ -2209,8 +2340,8 @@ input[type=file] {
   padding-left: 1.5rem;
 }
 
-.pb-1 {
-  padding-bottom: 0.25rem;
+.pt-2 {
+  padding-top: 0.5rem;
 }
 
 .pb-16 {
@@ -2342,6 +2473,10 @@ input[type=file] {
   letter-spacing: 0.05em;
 }
 
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2367,6 +2502,16 @@ input[type=file] {
   color: rgb(5 26 38 / var(--tw-text-opacity));
 }
 
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-sky-600 {
   --tw-text-opacity: 1;
   color: rgb(2 132 199 / var(--tw-text-opacity));
@@ -2396,11 +2541,6 @@ input[type=file] {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
 .text-sky-400 {
   --tw-text-opacity: 1;
   color: rgb(56 189 248 / var(--tw-text-opacity));
@@ -2440,6 +2580,11 @@ input[type=file] {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2476,6 +2621,11 @@ input[type=file] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-red-200 {
+  --tw-shadow-color: #fecaca;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2492,6 +2642,12 @@ input[type=file] {
   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);
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2506,10 +2662,8 @@ input[type=file] {
   transition-duration: 150ms;
 }
 
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+.duration-500 {
+  transition-duration: 500ms;
 }
 
 .duration-200 {
@@ -2528,6 +2682,10 @@ input[type=file] {
   transition-duration: 150ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -2536,10 +2694,6 @@ input[type=file] {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .last\:border-0:last-child {
   border-width: 0px;
 }
@@ -2558,16 +2712,16 @@ input[type=file] {
   border-color: transparent;
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2601,11 +2755,21 @@ input[type=file] {
   color: rgb(244 202 31 / 0.6);
 }
 
+.hover\:shadow-\[0_0_5px_5px_rgba\(0\2c 0\2c 0\2c 0\.05\)\]:hover {
+  --tw-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
+  --tw-shadow-colored: 0 0 5px 5px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:drop-shadow-\[0_15px_15px_rgba\(0\2c 100\2c 100\2c 0\.05\)\]:hover {
   --tw-drop-shadow: drop-shadow(0 15px 15px rgba(0,100,100,0.05));
   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);
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:text-charcoal:focus {
   --tw-text-opacity: 1;
   color: rgb(23 42 52 / var(--tw-text-opacity));
@@ -2627,6 +2791,10 @@ input[type=file] {
   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));
 }
 
+.group:hover .group-hover\:\[text-shadow\:_0_0_5px_rgb\(0_0_0_\/_15\%\)\] {
+  text-shadow: 0 0 5px rgb(0 0 0 / 15%);
+}
+
 .peer:checked ~ .peer-checked\:text-orange {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -2679,6 +2847,11 @@ input[type=file] {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-green\/40 {
   background-color: rgb(90 213 153 / 0.4);
 }
@@ -2688,6 +2861,10 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-opacity-10 {
+  --tw-bg-opacity: 0.1;
+}
+
 .dark .dark\:font-medium {
   font-weight: 500;
 }
@@ -2702,6 +2879,11 @@ input[type=file] {
   color: rgb(255 159 0 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-white\/70 {
   color: rgb(255 255 255 / 0.7);
 }
@@ -2715,11 +2897,6 @@ input[type=file] {
   color: rgb(23 42 52 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-white\/60 {
   color: rgb(255 255 255 / 0.6);
 }
@@ -2762,6 +2939,20 @@ input[type=file] {
   color: rgb(244 202 31 / 0.8);
 }
 
+.dark .dark\:hover\:shadow-\[0_0_5px_5px_rgba\(0\2c 100\2c 100\2c 0\.05\)\]:hover {
+  --tw-shadow: 0 0 5px 5px rgba(0,100,100,0.05);
+  --tw-shadow-colored: 0 0 5px 5px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dark .group:hover .dark\:group-hover\:\[text-shadow\:_0_0px_5px_rgb\(255_255_255_\/_25\%\)\] {
+  text-shadow: 0 0px 5px rgb(255 255 255 / 25%);
+}
+
+.dark .group:hover .dark\:group-hover\:\[text-shadow\:_0_0_5px_rgb\(255_255_255_\/_25\%\)\] {
+  text-shadow: 0 0 5px rgb(255 255 255 / 25%);
+}
+
 @media (min-width: 640px) {
   .sm\:mt-24 {
     margin-top: 6rem;
@@ -2795,6 +2986,10 @@ input[type=file] {
     width: 25%;
   }
 
+  .sm\:max-w-xl {
+    max-width: 36rem;
+  }
+
   .sm\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -2845,10 +3040,6 @@ input[type=file] {
     order: 9999;
   }
 
-  .md\:order-first {
-    order: -9999;
-  }
-
   .md\:float-right {
     float: right;
   }
@@ -2878,6 +3069,11 @@ input[type=file] {
     margin-right: auto;
   }
 
+  .md\:my-5 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
   .md\:mt-14 {
     margin-top: 3.5rem;
   }
@@ -2926,6 +3122,10 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -3006,6 +3206,10 @@ input[type=file] {
     max-width: 48rem;
   }
 
+  .md\:max-w-full {
+    max-width: 100%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3022,6 +3226,10 @@ input[type=file] {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .md\:grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -3114,6 +3322,10 @@ input[type=file] {
     border-bottom-width: 0px;
   }
 
+  .md\:border-r {
+    border-right-width: 1px;
+  }
+
   .md\:border-orange {
     --tw-border-opacity: 1;
     border-color: rgb(255 159 0 / var(--tw-border-opacity));
@@ -3195,6 +3407,11 @@ input[type=file] {
     padding-bottom: 2.75rem;
   }
 
+  .md\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
   .md\:pl-6 {
     padding-left: 1.5rem;
   }
@@ -3265,10 +3482,22 @@ input[type=file] {
     display: flex;
   }
 
+  .lg\:w-1\/5 {
+    width: 20%;
+  }
+
+  .lg\:w-2\/5 {
+    width: 40%;
+  }
+
   .lg\:min-w-\[300px\] {
     min-width: 300px;
   }
 
+  .lg\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+
   .lg\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
@@ -3281,6 +3510,10 @@ input[type=file] {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:justify-between {
     justify-content: space-between;
   }
@@ -3289,9 +3522,9 @@ input[type=file] {
     row-gap: 0px;
   }
 
-  .lg\:gap-x-10 {
-    -moz-column-gap: 2.5rem;
-         column-gap: 2.5rem;
+  .lg\:gap-x-2 {
+    -moz-column-gap: 0.5rem;
+         column-gap: 0.5rem;
   }
 
   .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
@@ -3312,10 +3545,30 @@ input[type=file] {
     margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .lg\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .lg\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .lg\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -3332,4 +3585,9 @@ input[type=file] {
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
     margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
+
+  .xl\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
 }
diff --git a/templates/homepage_beta.html b/templates/homepage_beta.html
index 861bf8ab..0fe8bdd7 100644
--- a/templates/homepage_beta.html
+++ b/templates/homepage_beta.html
@@ -1,398 +1,366 @@
-{% extends "base.html" %} {% load static %} {% block content %}
-<!-- Homepage Hero Section -->
-<main>
-  {% comment %}<div class="mx-10 text-right">
-    <button class="py-2 text-xs rounded-full cursor-pointer" @click="darkMode = !darkMode"><i class="inline-block mr-1 font-semibold text-white fas fa-sun"></i><i class="inline-block mr-1 font-semibold text-black fas fa-moon"></i></button>
-  </div>{% endcomment %}
-
-  {% comment %} Section 1 {% endcomment %}
-  <div class="px-4 my-0 mx-auto md:my-4">
-
-    <div
-      class="grid grid-rows-1 auto-rows-fr md:grid-cols-2 md:gap-x-10 md:mb-10 page-container"
-    >
-      <div class="order-last h-full md:order-first">
-        <h1 class="text-4xl font-extrabold md:text-6xl">Boost your C++</h1>
-        <p
-          class="mx-auto mt-3 max-w-md text-base md:mt-5 md:max-w-3xl md:text-lg md:text-xl"
-        >
-          Home to 165+ free, peer-reviewed, portable libraries to increase your
-          productivity across all industry domains.
-        </p>
-
-        <select id="version" name="version" class="block py-1 pr-8 pl-5 mb-3 w-48 text-sm text-black bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:text-white dark:bg-black dark:border-slate">
+{% extends "base.html" %}
+{% load static %}
+{% debug %}
+{% block content %}
+  <main>
+    {% comment %} Homepage Hero {% endcomment %}
+    <div class="px-6 md:px-4 my-4 mx-auto">
+      <div class="grid grid-rows-1 auto-rows-fr md:grid-cols-2 md:gap-x-10 md:mb-10">
+        <div class="h-full">
+          <h1 class="text-4xl font-extrabold md:text-6xl">Boost your C++</h1>
+          <p class="my-3 max-w-md text-base md:my-5 md:max-w-3xl md:text-xl">
+            Home to 165+ free, peer-reviewed, portable libraries to increase your
+            productivity across all industry domains.
+          </p>
+          <select id="version"
+                  name="version"
+                  class="block py-1 pr-8 pl-5 mb-3 w-48 text-sm text-black bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block  dark:text-white dark:bg-black dark:border-slate">
             <option>Boost 1.82.0 - Apr/23</option>
-            {% for v in versions %}
-            <option value="{{ v.pk }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
+            {% for v in versions122 %}
+              <option value="{{ v.pk }}"
+                      {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
             {% endfor %}
-        </select>
-
-        <div class="justify-center mt-5 space-y-3 max-w-md lg:flex lg:justify-between lg:mt-8 lg:space-y-0">
-            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-sm font-medium text-white rounded-md border md:py-4 md:px-4 md:text-base lg:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
-              <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download Latest
-            </a>
-            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-sm font-medium bg-gray-300 rounded-md border md:py-4 md:px-10 md:text-base lg:text-lg border-steel text-slate dark:bg-charcoal dark:text-orange">
-              Version Details <i class="pl-2 fas fa-chevron-right text-slate dark:text-orange"></i>
-            </a>
-
+          </select>
+          <a href="{% url 'releases' %}"
+             class="block whitespace-nowrap w-min py-3 mb-3 px-8 text-sm font-medium text-white rounded-md border  md:text-base lg:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
+            <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download Latest
+          </a>
+          <a href="{% url 'releases' %}"
+             class="text-xs  text-slate dark:text-sky-600">
+            Version Details <i class="pl-1 fas fa-chevron-right text-slate dark:text-sky-600"></i>
+          </a>
         </div>
-
-      </div>
-
-      <div class="order-first h-full md:order-last">
-        <div id="scene03"></div>
       </div>
     </div>
-  </div>
-
-  {% comment %} Section 2 {% endcomment %}
-  <div class="px-4 my-0 mx-auto md:my-4">
-
-    <div
-      class="grid grid-cols-1 grid-rows-2 gap-y-10 lg:grid-cols-5 lg:grid-rows-1 lg:gap-y-0 lg:gap-x-10 lg:mb-10 page-container bg-gray-400 dark:bg-gray-900  bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)]"
-    >
-      <div class="flex flex-col col-span-1 p-5 h-full lg:col-span-2">
-
-        <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
-            Libraries
-        </h3>
-
-        <div>
-            <select onchange="this.form.submit()"
-                    name="library"
-                    class="block pr-11 pl-5 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:border-slate"
-                    id="id_library"
-            >
-              <option value="">Accumulators</option>
-
-            </select>
-            <select onchange="this.form.submit()"
-                    name="category"
-                    class="block pr-11 pl-5 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:border-slate"
-                    id="id_category"
-            >
-              <option value="">Filter by category</option>
-              {% for c in categories %}
-                <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
-              {% endfor %}
-            </select>
-        </div>
-
-        <p
-          class="mx-auto w-full text-sm align-left"
-        >
-        Framework for incremental calculation, and collection of statistical accumulators.
-        </p>
-
-        <div class="px-2 pt-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
-            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://boost.org/libs/accumulators">
-              <i class="float-right mt-3 fas fa-folder"></i>
-              Documentation
-              <span class="block text-xs text-sky-600">boost.org/libs/accumulators</span>
+    {% comment %} Section 2 {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="grid grid-cols-1 grid-rows-2 gap-y-10 lg:grid-cols-5 lg:grid-rows-1 lg:gap-y-0 lg:gap-x-2 lg:mb-10 bg-gray-400 dark:bg-gray-900  bg-opacity-10 rounded-md drop-shadow-md transition-all ease-in-out duration-500 transform hover:shadow-[0_0_5px_5px_rgba(0,0,0,0.05)] dark:hover:shadow-[0_0_5px_5px_rgba(0,100,100,0.05)]">
+        <div class="flex flex-col col-span-1 p-5 h-full lg:col-span-2 relative">
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">library spotlight</span>
+          </div>
+          <div class="absolute top-0 right-0 p-2 group">
+            <a href="{% url 'libraries' %}"
+               class="text-sm font-medium md:text-base lg:text-base text-slate dark:text-sky-600 group-hover:[text-shadow:_0_0_5px_rgb(0_0_0_/_15%)] dark:group-hover:[text-shadow:_0_0px_5px_rgb(255_255_255_/_25%)]">
+              All Libraries <i class="pl-1 fas fa-chevron-right text-slate dark:text-sky-600 group-hover:[text-shadow:_0_0_5px_rgb(0_0_0_/_15%)] dark:group-hover:[text-shadow:_0_0_5px_rgb(255_255_255_/_25%)]"></i>
             </a>
-            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://github.com/boostorg/accumulators/issues">
-              <i class="float-right mt-3 fas fa-bug"></i>
-              GitHub Issues
-              <span class="block text-xs text-sky-600">github.com/boostorg/accumulators/issues</span>
-            </a>
-            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 keychainify-checked" href="https://github.com/boostorg/accumulators">
-              <i class="float-right mt-3 fab fa-github"></i>
-              Source Code
-              <span class="block text-xs text-sky-600">github.com/boostorg/accumulators</span>
-            </a>
-
-            <div class="inline-block py-1 px-2 w-full rounded cursor-pointer hover:bg-gray-100">
-              <a class="inline-block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Since 2008</a>
-              <span class="float-right"><a class="inline-block float-right py-1 px-2 rounded cursor-pointer hover:bg-gray-100">C++03</a></span>
+          </div>
+          <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">Accumulators</h3>
+          <span class="mx-auto w-full text-sm align-left pb-1">
+            Framework for incremental calculation, and collection of statistical accumulators.
+          </span>
+          <div class="px-4 py-4 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
+            <div class="flex items-center relative">
+              <input type="text"
+                     class="flex flex-grow bg-sky-200 dark:bg-white text-gray-600 text-xs pr-20  h-7 border-transparent focus:border-transparent focus:ring-0"
+                     value="vcpkg install boost-accumulators"
+                     readOnly="readOnly" />
+              <button class="flex items-center justify-center absolute right-0 top-0 h-full w-8 shadow bg-silver font-semibold">
+                <svg fill="#000000"
+                     viewBox="-8 -5 50 50"
+                     version="1.1"
+                     preserveAspectRatio="xMidYMid meet"
+                     xmlns="http://www.w3.org/2000/svg"
+                     xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <path d="M22.6,4H21.55a3.89,3.89,0,0,0-7.31,0H13.4A2.41,2.41,0,0,0,11,6.4V10H25V6.4A2.41,2.41,0,0,0,22.6,4ZM23,8H13V6.25A.25.25,0,0,1,13.25,6h2.69l.12-1.11A1.24,1.24,0,0,1,16.61,4a2,2,0,0,1,3.15,1.18l.09.84h2.9a.25.25,0,0,1,.25.25Z" class="clr-i-outline clr-i-outline-path-1">
+                  </path>
+                  <path d="M33.25,18.06H21.33l2.84-2.83a1,1,0,1,0-1.42-1.42L17.5,19.06l5.25,5.25a1,1,0,0,0,.71.29,1,1,0,0,0,.71-1.7l-2.84-2.84H33.25a1,1,0,0,0,0-2Z" class="clr-i-outline clr-i-outline-path-2">
+                  </path>
+                  <path d="M29,16h2V6.68A1.66,1.66,0,0,0,29.35,5H27.08V7H29Z" class="clr-i-outline clr-i-outline-path-3"></path>
+                  <path d="M29,31H7V7H9V5H6.64A1.66,1.66,0,0,0,5,6.67V31.32A1.66,1.66,0,0,0,6.65,33H29.36A1.66,1.66,0,0,0,31,31.33V22.06H29Z" class="clr-i-outline clr-i-outline-path-4">
+                  </path>
+                </svg>
+              </button>
             </div>
-
-            <span class="block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Categories:
-
-                <a class="inline text-sky-600 keychainify-checked" href="/libraries/?category=math">Math</a>
-
-            </span>
-
+            <div class="flex items-center relative">
+              <input type="text"
+                     class="flex flex-grow bg-sky-200 dark:bg-white text-gray-600 text-xs pr-20  h-7 border-transparent focus:border-transparent focus:ring-0"
+                     value="conan install boost-accumulators"
+                     readOnly="readOnly" />
+              <button class="flex items-center justify-center absolute right-0 top-0 h-full w-8 shadow bg-silver font-semibold">
+                <svg fill="#000000"
+                     viewBox="-8 -5 50 50"
+                     version="1.1"
+                     preserveAspectRatio="xMidYMid meet"
+                     xmlns="http://www.w3.org/2000/svg"
+                     xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <path d="M22.6,4H21.55a3.89,3.89,0,0,0-7.31,0H13.4A2.41,2.41,0,0,0,11,6.4V10H25V6.4A2.41,2.41,0,0,0,22.6,4ZM23,8H13V6.25A.25.25,0,0,1,13.25,6h2.69l.12-1.11A1.24,1.24,0,0,1,16.61,4a2,2,0,0,1,3.15,1.18l.09.84h2.9a.25.25,0,0,1,.25.25Z" class="clr-i-outline clr-i-outline-path-1">
+                  </path>
+                  <path d="M33.25,18.06H21.33l2.84-2.83a1,1,0,1,0-1.42-1.42L17.5,19.06l5.25,5.25a1,1,0,0,0,.71.29,1,1,0,0,0,.71-1.7l-2.84-2.84H33.25a1,1,0,0,0,0-2Z" class="clr-i-outline clr-i-outline-path-2">
+                  </path>
+                  <path d="M29,16h2V6.68A1.66,1.66,0,0,0,29.35,5H27.08V7H29Z" class="clr-i-outline clr-i-outline-path-3"></path>
+                  <path d="M29,31H7V7H9V5H6.64A1.66,1.66,0,0,0,5,6.67V31.32A1.66,1.66,0,0,0,6.65,33H29.36A1.66,1.66,0,0,0,31,31.33V22.06H29Z" class="clr-i-outline clr-i-outline-path-4">
+                  </path>
+                </svg>
+              </button>
+            </div>
+            <div class="flex items-center relative">
+              <input type="text"
+                     class="flex flex-grow bg-sky-200 dark:bg-white text-gray-600 text-xs pr-20  h-7 border-transparent focus:border-transparent focus:ring-0"
+                     value="apt-get boost-accumulators"
+                     readOnly="readOnly" />
+              <button class="flex items-center justify-center absolute right-0 top-0 h-full w-8 shadow bg-silver font-semibold">
+                <svg fill="#000000"
+                     viewBox="-8 -5 50 50"
+                     version="1.1"
+                     preserveAspectRatio="xMidYMid meet"
+                     xmlns="http://www.w3.org/2000/svg"
+                     xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <path d="M22.6,4H21.55a3.89,3.89,0,0,0-7.31,0H13.4A2.41,2.41,0,0,0,11,6.4V10H25V6.4A2.41,2.41,0,0,0,22.6,4ZM23,8H13V6.25A.25.25,0,0,1,13.25,6h2.69l.12-1.11A1.24,1.24,0,0,1,16.61,4a2,2,0,0,1,3.15,1.18l.09.84h2.9a.25.25,0,0,1,.25.25Z" class="clr-i-outline clr-i-outline-path-1">
+                  </path>
+                  <path d="M33.25,18.06H21.33l2.84-2.83a1,1,0,1,0-1.42-1.42L17.5,19.06l5.25,5.25a1,1,0,0,0,.71.29,1,1,0,0,0,.71-1.7l-2.84-2.84H33.25a1,1,0,0,0,0-2Z" class="clr-i-outline clr-i-outline-path-2">
+                  </path>
+                  <path d="M29,16h2V6.68A1.66,1.66,0,0,0,29.35,5H27.08V7H29Z" class="clr-i-outline clr-i-outline-path-3"></path>
+                  <path d="M29,31H7V7H9V5H6.64A1.66,1.66,0,0,0,5,6.67V31.32A1.66,1.66,0,0,0,6.65,33H29.36A1.66,1.66,0,0,0,31,31.33V22.06H29Z" class="clr-i-outline clr-i-outline-path-4">
+                  </path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col col-span-1 p-5 h-full lg:col-span-3">
+          <iframe width="100%"
+                  height="100%"
+                  src="https://godbolt.org/e#g:!((g:!((g:!((h:codeEditor,i:(filename:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,selection:(endColumn:1,endLineNumber:26,positionColumn:1,positionLineNumber:26,selectionStartColumn:1,selectionStartLineNumber:26,startColumn:1,startLineNumber:26),source:'//+Compile+with+-O3+-march%3Dnative+to+see+autovectorization%0A//+assumes+input+is+aligned+on+64-byte+boundary+and+that%0A//+length+is+a+multiple+of+64.%0Aint+testFunction(int*+input,+int+length)+%7B%0A++//+Alignment+hints+supported+on+GCC+4.7%2B+and+any+compiler%0A++//+supporting+the+appropriate+builtin+(clang+3.6%2B).%0A%23ifndef+__has_builtin%0A%23define+__has_builtin(x)+0%0A%23endif%0A%23if+__GNUC__+%3E+4+%5C%0A++++%7C%7C+(__GNUC__+%3D%3D+4+%26%26+__GNUC_MINOR__+%3E%3D+7)+%5C%0A++++%7C%7C+__has_builtin(__builtin_assume_aligned)%0A++input+%3D+static_cast%3Cint*%3E(__builtin_assume_aligned(input,+64))%3B%0A%23endif%0A%23if+_MSC_VER%0A++__assume((length+%26+63)+%3D%3D+0)%3B%0A%23else%0A++if+(length+%26+63)+__builtin_unreachable()%3B%0A%23endif%0A++int+sum+%3D+0%3B%0A++for+(int+i+%3D+0%3B+i+%3C+length%3B+%2B%2Bi)+%7B%0A++++sum+%2B%3D+input%5Bi%5D%3B%0A++%7D%0A++return+sum%3B%0A%7D%0A'),l:'5',n:'0',o:'C%2B%2B+source+%231',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0'),(g:!((h:compiler,i:(compiler:arm1020,deviceViewOpen:'1',filters:(b:'0',binary:'1',binaryObject:'1',commentOnly:'0',debugCalls:'1',demangle:'0',directives:'0',execute:'1',intel:'0',libraryCode:'0',trim:'1'),flagsViewOpen:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,libs:!(),options:'',overrides:!(),selection:(endColumn:1,endLineNumber:1,positionColumn:1,positionLineNumber:1,selectionStartColumn:1,selectionStartLineNumber:1,startColumn:1,startLineNumber:1),source:1),l:'5',n:'0',o:'+ARM+gcc+10.2+(linux)+(Editor+%231)',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0')),l:'2',n:'0',o:'',t:'0')),version:4"></iframe>
         </div>
-
       </div>
-
-      <div class="flex flex-col col-span-1 p-5 h-full md:mb-10 lg:col-span-3">
-
-        <h3 class="pb-2 mb-4 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
-            Compiler Explorer
-        </h3>
-
-        <iframe width="100%" height="100%" src="https://godbolt.org/e#g:!((g:!((g:!((h:codeEditor,i:(filename:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,selection:(endColumn:1,endLineNumber:26,positionColumn:1,positionLineNumber:26,selectionStartColumn:1,selectionStartLineNumber:26,startColumn:1,startLineNumber:26),source:'//+Compile+with+-O3+-march%3Dnative+to+see+autovectorization%0A//+assumes+input+is+aligned+on+64-byte+boundary+and+that%0A//+length+is+a+multiple+of+64.%0Aint+testFunction(int*+input,+int+length)+%7B%0A++//+Alignment+hints+supported+on+GCC+4.7%2B+and+any+compiler%0A++//+supporting+the+appropriate+builtin+(clang+3.6%2B).%0A%23ifndef+__has_builtin%0A%23define+__has_builtin(x)+0%0A%23endif%0A%23if+__GNUC__+%3E+4+%5C%0A++++%7C%7C+(__GNUC__+%3D%3D+4+%26%26+__GNUC_MINOR__+%3E%3D+7)+%5C%0A++++%7C%7C+__has_builtin(__builtin_assume_aligned)%0A++input+%3D+static_cast%3Cint*%3E(__builtin_assume_aligned(input,+64))%3B%0A%23endif%0A%23if+_MSC_VER%0A++__assume((length+%26+63)+%3D%3D+0)%3B%0A%23else%0A++if+(length+%26+63)+__builtin_unreachable()%3B%0A%23endif%0A++int+sum+%3D+0%3B%0A++for+(int+i+%3D+0%3B+i+%3C+length%3B+%2B%2Bi)+%7B%0A++++sum+%2B%3D+input%5Bi%5D%3B%0A++%7D%0A++return+sum%3B%0A%7D%0A'),l:'5',n:'0',o:'C%2B%2B+source+%231',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0'),(g:!((h:compiler,i:(compiler:arm1020,deviceViewOpen:'1',filters:(b:'0',binary:'1',binaryObject:'1',commentOnly:'0',debugCalls:'1',demangle:'0',directives:'0',execute:'1',intel:'0',libraryCode:'0',trim:'1'),flagsViewOpen:'1',fontScale:14,fontUsePx:'0',j:1,lang:c%2B%2B,libs:!(),options:'',overrides:!(),selection:(endColumn:1,endLineNumber:1,positionColumn:1,positionLineNumber:1,selectionStartColumn:1,selectionStartLineNumber:1,startColumn:1,startLineNumber:1),source:1),l:'5',n:'0',o:'+ARM+gcc+10.2+(linux)+(Editor+%231)',t:'0')),k:50,l:'4',n:'0',o:'',s:0,t:'0')),l:'2',n:'0',o:'',t:'0')),version:4"></iframe>
-
-      </div>
-
     </div>
-
-  </div>
-
-
-  {% comment %} Section 3 - News {% endcomment %}
-  <div class="px-4 my-0 mx-auto md:my-4">
-
-    <div
-        class="page-container bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)] md:mb-10"
-    >
+    {% comment %} Section 3 - Events {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md  transition-all ease-in-out duration-500 transform hover:shadow-[0_0_5px_5px_rgba(0,0,0,0.05)] dark:hover:shadow-[0_0_5px_5px_rgba(0,100,100,0.05)]">
         <div class="p-5 w-full">
-            <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-300 text-orange dark:border-slate">
-                News from Boost and C++
-            </h3>
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">schedule of events</span>
+          </div>
         </div>
-
-    <div class="grid grid-cols-1 grid-rows-2 gap-y-10 md:grid-cols-2 md:grid-rows-1 md:gap-x-10 lg:gap-y-0">
-
-
-        <div class="flex flex-col col-span-1 p-5 h-full border-gray-200 md:mb-10 dark:border-slate">
-
+        <div class="h-full flex flex-col justify-center items-center pb-4">
+          <div class="w-4/5 mx-auto relative"
+               x-data="{ activeSlide: 1, slides: [1, 2, 3] }">
+            <!-- Slides -->
+            <div x-show="activeSlide === 1"
+                 class="py-0 px-12 font-bold text-5xl h-full flex items-center text-white rounded-lg">
+              <div class="w-full">
+                <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">May 2023</h3>
+                <span class="mx-auto w-full text-sm align-left pb-1">
+                  29th: SAM review
+                  <br />
+                </span>
+              </div>
+            </div>
+            <div x-show="activeSlide === 2"
+                 class="py-0 px-12 font-bold text-5xl h-full flex items-center text-white rounded-lg">
+              <div class="w-full">
+                <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">June 2023</h3>
+                <span class="mx-auto w-full text-sm align-left pb-1">
+                  29th: SAM review
+                  <br />
+                </span>
+              </div>
+            </div>
+            <div x-show="activeSlide === 3"
+                 class="py-0 px-12 font-bold text-5xl h-full flex items-center text-white rounded-lg">
+              <div class="w-full">
+                <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">July 2023</h3>
+                <span class="mx-auto w-full text-sm align-left pb-1">
+                  29th: SAM review
+                  <br />
+                </span>
+              </div>
+            </div>
+            <!-- Prev/Next Arrows -->
+            <div class="absolute inset-0 flex">
+              <div class="flex items-center justify-start w-1/2">
+                <button class="bg-gray-400 text-white font-bold  rounded-full w-12 h-12 -ml-6"
+                        x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">&#8592;</button>
+              </div>
+              <div class="flex items-center justify-end w-1/2">
+                <button class="bg-gray-400 text-white font-bold  rounded-full w-12 h-12 -mr-6"
+                        x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">&#8594;</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% comment %} Section 4 - News {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)] md:mb-10">
+        <div class="p-5 w-full">
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">news from boost and c++</span>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 grid-rows-2 gap-y-10 md:grid-cols-2 md:grid-rows-1 md:gap-x-10 lg:gap-y-0">
+          <div class="flex flex-col col-span-1 p-5 pt-0 h-full border-gray-200 md:mb-10 dark:border-slate">
             <div class="">
-                <h3 class="mb-2 text-xl">Name of Article</h3>
-                <p class="mb-3">Category | 4/5/22</p>
-                <p class="mb-3">Boost.MySQL is an Asio-based network client which lets you access MySQL
-                    and MariaDB databases using your own data types New in Boost 1.82.0,
-                    check it out here https://https://boost.org/libs/mysql Get Boost:
-                    https://boost.org/users/history/version_1_82_0.html #boost #cpp
-                    #cplusplus #mysql #mariadb #database... <a href="" class="text-sky-600">Read&nbsp;More</a></p>
-
-                <img src="{% static 'img/fpo/news-1.png' %}" class="news-image" />
+              <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">Article Name</h3>
+              <p class="mb-3">Category | 4/5/22</p>
+              <p class="mb-3 overflow-x-auto">
+                Boost.MySQL is an Asio-based network client which lets you access MySQL
+                and MariaDB databases using your own data types New in Boost 1.82.0,
+                check it out here https://https://boost.org/libs/mysql Get Boost:
+                https://boost.org/users/history/version_1_82_0.html #boost #cpp
+                #cplusplus #mysql #mariadb #database... <a href="" class="text-sky-600">Read&nbsp;More</a>
+              </p>
+              <img src="{% static 'img/fpo/news-1.png' %}" class="news-image" />
             </div>
-            </div>
-
-        <div class="flex flex-col col-span-1 p-5 h-full md:mb-10">
-
+          </div>
+          <div class="flex flex-col col-span-1 p-5 pt-0 h-full md:mb-10">
             <div class="">
-                <h3 class="mb-2 text-xl">Name of Article</h3>
-                <p class="mb-3">Category | 4/5/22</p>
-                <p class="mb-3">Boost 1.82.0 is released for the Spring season! Release Notes:
-                    https://boost.org/users/history/version_1_82_0.html Downloads:
-                    http://boost.org/users/news/version_1.82.0 Direct Download:
-                    https://boostorg.jfrog.io/artifactory/main/release/1.82.0 #boost #cpp
-                    #cplusplus <a href="" class="text-sky-600">Read&nbsp;More</a></p>
-
-                    <img src="{% static 'img/fpo/news-2.png' %}" class="news-image" />
+              <h3 class="pb-2 mb-2 text-2xl capitalize border-b border-gray-400 text-orange dark:border-slate">Article Name</h3>
+              <p class="mb-3">Category | 4/5/22</p>
+              <p class="mb-3 overflow-x-auto">
+                Boost 1.82.0 is released for the Spring season! Release Notes:
+                https://boost.org/users/history/version_1_82_0.html Downloads:
+                http://boost.org/users/news/version_1.82.0 Direct Download:
+                https://boostorg.jfrog.io/artifactory/main/release/1.82.0 #boost #cpp
+                #cplusplus <a href="" class="text-sky-600">Read&nbsp;More</a>
+              </p>
+              <img src="{% static 'img/fpo/news-2.png' %}" class="news-image" />
             </div>
-
-        </div>
-
-        </div>
-
-    </div>
-
-</div>
-
-
-    <div class="flex justify-center">
-        <div class="py-3 px-3 mx-auto mt-6 mb-4 text-xl text-center rounded-lg border border-black transition duration-200 ease-in transform cursor-pointer hover:text-white hover:bg-opacity-60 hover:border-transparent hover:-translate-y-1 active:translate-y-0 bg-orange dark:border-orange dark:bg-charcoal dark:text-orange hover:bg-orange hover:dark:bg-purple hover:dark:text-white">
-            Test Button
-        </div>
-    </div>
-
-
-
-  <!---------- SECTION - 05 ------------>
-
-  <hr class="line-breaker" />
-  <h2 style="margin: 20px 0px">Activity Apr21,2023 - May20,2023</h2>
-  <div class="section-05">
-    <div class="activity-containers">
-      <fieldset style="margin: 0px 3px">
-        <legend>Code</legend>
-        <select class="activity-select">
-          <option value="option1">Option 1</option>
-          <option value="option2">Option 2</option>
-          <option value="option3">Option 3</option>
-        </select>
-      </fieldset>
-    </div>
-    <div class="activity-containers">
-      <fieldset style="margin: 0px 3px"><legend>Downloads</legend></fieldset>
-    </div>
-    <div class="activity-containers">
-      <fieldset style="margin: 0px 3px"><legend>Community</legend></fieldset>
-    </div>
-  </div>
-</main>
-
-<!--  <main class="px-4 my-16 mx-auto sm:mt-24">
-  <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">
-  <div class="border_red">
-  <div class="md:flex md:h-full">
-    <div class="order-1 mt-6 w-full text-center md:order-2 md:mt-3 md:w-1/2 md:h-full">
-      &lt;!&ndash;<div id="scene03"></div>&ndash;&gt;
-    </div>
-    <div class="text-left md:w-1/2 md:h-full">
-      <div class="h-full md:flex md:flex-col md:justify-between">
-        <div>
-          <h1 class="text-4xl font-extrabold md:text-6xl">
-            <span class="block xl:inline">Boost your C++ </span>
-          </h1>
-          <p class="mx-auto mt-3 max-w-md text-base text-lg md:mt-5 md:mb-11 md:max-w-3xl md:text-xl">Home to 165+ free, peer-reviewed, portable libraries to increase your productivity across all industry domains.</p>
-          <div class="mt-5">
-            <select onchange="this.form.submit()"
-                    name="version"
-                    class="block py-1 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
-                    id="id_version"
-            >
-              {% for v in versions %}
-                <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>Boost {{ v.display_name }}</option>
-              {% endfor %}
-            </select>
-          </div>
-        </div>
-        <div class="md:mb-8">
-          <div class="justify-center space-y-3 md:flex md:justify-between md:space-y-0">
-            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
-              <i class="pr-2 text-white fas fa-arrow-circle-down dark:text-orange"></i> Download
-            </a>
-            <a href="{% url 'releases' %}" class="flex justify-center items-center">Release notes</a>
-          </div>
-          <div class="justify-center mt-5 space-y-3 md:flex md:justify-between md:space-y-0">
-            <a href="{% url 'releases' %}" class="flex justify-center items-center py-3 px-8 text-base font-medium text-white rounded-md border md:py-4 md:px-4 md:text-lg border-orange bg-orange dark:bg-charcoal dark:text-orange">
-              BSL Logo
-            </a>
-            <a href="{% url 'releases' %}" class="flex justify-center items-center">License</a>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-
-
-    &lt;!&ndash; Select a library &ndash;&gt;
-  <div class="portion">
-    <div class="rounded-md md:flex">
-      <div class="text-left md:w-1/2">
-        <form action="/homepage-beta/" method="get">
-          <div>
-            <label for="id_library" hidden="true">Libraries</label>
-            <select onchange="this.form.submit()"
-                    name="library"
-                    class="block py-2 pr-11 pl-5 mb-2 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
-                    id="id_library"
-            >
-              <option value="" {% if library is None %}selected="selected"{% endif %}>Select a library</option>
-              {% for l in libraries %}
-                <option value="{{ l.slug }}" {% if library == l %}selected="selected"{% endif %}>{{ l.name }}</option>
-              {% endfor %}
-            </select>
-            <label for="id_category" hidden="true">Categories:</label>
-            <select onchange="this.form.submit()"
-                    name="category"
-                    class="block py-2 pr-11 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
-                    id="id_category"
-            >
-              <option value="">Filter by category</option>
-              {% for c in categories %}
-                <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
-              {% endfor %}
-            </select>
+    {% comment %} Section 5 - Activity {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)] md:mb-10">
+        <div class="p-5 w-full">
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">activity April 21, 2023 - May 20, 2023</span>
+          </div>
+        </div>
+        
+          <div class="grid grid-cols-1 md:grid-cols-3 group justify-around">
+            <div class="p-10 flex flex-col items-center text-center group">
+              <span class="p-5 rounded-full bg-red-500 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     class="h-10 w-10"
+                     fill="none"
+                     viewBox="0 0 24 24"
+                     stroke="currentColor"
+                     stroke-width="1.5">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </span>
+              <div class="mx-auto mt-2">
+                <div class="grid grid-cols-2 row-gap-8 gap-x-3">
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">6,801</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Commits</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">1,023</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">CI Runs</p>
+                  </div>
+                </div>
+                <div class="grid grid-cols-3">
+                  <div class="col-span-3">Pull Requests</div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">210</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Open</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">15</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">New</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">50</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Active</p>
+                  </div>
+                </div>
+                <div class="grid grid-cols-3">
+                  <div class="col-span-3">Issues</div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">210</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Open</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">15</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">New</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">50</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Active</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="p-10 flex flex-col items-center text-center group">
+              <span class="p-5 rounded-full bg-red-500 text-white">
+                <svg
+                        xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                    </svg>
+              </span>
+              <div class="mx-auto mt-2">
+                <div class="grid grid-rows-3">
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">500,000</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">JFrog</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">177,000</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Conan</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">226,000</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">vcpkg</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="p-10 flex flex-col items-center text-center group">
+              <span class="p-5 rounded-full bg-red-500 text-white">
+                <svg
+                        xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
+                    </svg>
+              </span>
+              <div class="mx-auto mt-2">
+                <div class="grid grid-rows-2">
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">500,000</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Mailing List Messages</p>
+                  </div>
+                  <div class="text-center">
+                    <h6 class="text-base font-bold">177,000</h6>
+                    <p class="pt-0 text-xs font-medium tracking-widest text-gray-400 uppercase">Slack Posts
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </form>
-      </div>
-    <div>
-      <div class="rounded-md md:flex">
-      <div class="text-left md:w-1/2">
-
-        <form method="post" action="{% url 'home-beta' %}">
-          {% csrf_token %}
-          <label for="code">Code:</label>
-          <textarea name="code" id="" rows="10" cols="50">{{ request.POST.code }}</textarea>
-          <button type="submit">Run</button>
-        </form>
-      </div>
-    </div>
-
-    {% if output %}
-      <div class="output">{{ output }}</div>
-    {% endif %}
-    {% if error %}
-      <div class="error">{{ error }}</div>
-    {% endif %}
-    </div>
-    </div>
-  </div>
-
-    &lt;!&ndash; Seven equal div portions &ndash;&gt;
-{#    <div class="grid gap-6 mt-12 sm:grid-cols-1 md:grid-cols-1 md:mt-16 lg:grid-cols-0">#}
-      &lt;!&ndash; Simple fixed-size portion &ndash;&gt;
-      <div class="portion">
-        <h2 class="text-xl font-semibold">Simple Fixed Size</h2>
-        <p class="mt-4">This portion has a fixed size and can be used to display important information or a call-to-action.</p>
-      </div>
-
-      &lt;!&ndash; Description, Copy Commands, Code Explore &ndash;&gt;
-      <div class="portion">
-        <h2 class="text-xl font-semibold">Description, Copy Commands, Code Explore</h2>
-        <p class="mt-4">Here, you can provide a brief description of a library, along with some copy commands for installation or usage. You can also embed an interactive code explorer to showcase the library's features and demonstrate how it can be used.</p>
-        <div class="mt-6">
-          &lt;!&ndash; Code explorer embed code here &ndash;&gt;
         </div>
       </div>
-
-      &lt;!&ndash; One-row Calendar &ndash;&gt;
-      <div class="portion">
-        <h2 class="text-xl font-semibold">One-row Calendar</h2>
-        <div class="mt-4">
-          &lt;!&ndash; One-row calendar implementation here &ndash;&gt;
-        </div>
-      </div>
-
-      &lt;!&ndash; Two News Portions &ndash;&gt;
-      <div class="portion">
-        <h2 class="text-xl font-semibold">News Portion 1</h2>
-        <p class="mt-4">Stay updated with the latest news, updates, and announcements related to the Boost library.</p>
-      </div>
-      <div class="portion">
-        <h2 class="text-xl font-semibold">News Portion 2</h2>
-        <p class="mt-4">More news and updates to keep you informed about the Boost library community and its developments.</p>
-      </div>
-
-      &lt;!&ndash; Code, Download, Community &ndash;&gt;
-      <div class="portion">
-        <h2 class="text-xl font-semibold">Code</h2>
-        <p class="mt-4">View the code repository of the Boost library on GitHub and explore the source code, contribute to its development, and download the latest versions.</p>
-      </div>
-      <div class="portion">
-        <div class="py-3 px-6 dark:text-white text-slate">
-          <h5
-            class="text-xl font-bold leading-tight text-orange">
-            New to Boost?
-          </h5>
-          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
-          <ul class="flex flex-wrap mt-2 text-sm">
-            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="portion">
-          <div class="py-3 px-6 dark:text-white text-slate">
-          <h5
-            class="text-xl font-bold leading-tight text-orange">
-            Contributor Guide
-          </h5>
-          <p class="py-1 text-white border-b border-gray-700">This is how you can help</p>
-          <ul class="flex flex-wrap mt-2 text-sm">
-            <li class="w-1/2"><a href="/doc/contributor-guide/intro.html">Becoming a Contributor</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/license-requirements.html">License Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/portability-requirements.html">Portability Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/organization-requirements.html">Organization Requirements</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/library-design-guidelines.html">Library Design Guidelines</a></li>
-            <li class="w-1/2"><a href="/doc/contributor-guide/antora.html">Antora Guide</a></li>
-          </ul>
+    
+    {% comment %} Section 6 - New to Boost {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)] md:mb-10">
+        <div class="p-5 w-full">
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">new to boost?</span>
+          </div>
         </div>
+        <div class="h-full flex flex-col justify-center items-center pb-4"></div>
       </div>
     </div>
+    {% comment %} Section 7 - Contribute {% endcomment %}
+    <div class="px-4 my-4 mx-auto">
+      <div class="bg-gray-400 dark:bg-gray-900 bg-opacity-10 rounded-md drop-shadow-md hover:drop-shadow-[0_15px_15px_rgba(0,100,100,0.05)] md:mb-10">
+        <div class="p-5 w-full">
+          <div class="mb-6">
+            <span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-emerald-700 bg-emerald-200 dark:bg-opacity-10">contribute</span>
+          </div>
+        </div>
+        <div class="h-full flex flex-col justify-center items-center pb-4"></div>
+      </div>
     </div>
-  </main>-->
-<!-- End Homepage Hero Section -->
-
-{% endblock %} {% block footer_js %} {% endblock %}
+  </main>
+{% endblock content %}
+{% block footer_js %}
+{% endblock footer_js %}