diff --git a/img/hero-bg/layer1.svg b/img/hero-bg/layer1.svg
new file mode 100644
index 0000000..9180c3a
--- /dev/null
+++ b/img/hero-bg/layer1.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1440"
+   height="1185"
+   viewBox="0 0 1440 1185"
+   fill="none"
+   version="1.1"
+   id="svg25"
+   sodipodi:docname="website-bg.svg"
+   inkscape:export-filename="hero-bg/layer2.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview25"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050" />
+  <g
+     clip-path="url(#clip0_59_391)"
+     id="g15">
+    <path
+       d="m 1207.62,556.543 c -73.8,76.794 -76.87,227.92 -69.18,293.883 53.81,26.09 152.72,62.617 117.87,0 -34.85,-62.616 5.98,-212.167 30.75,-279.115 -10.25,-57.891 38.44,-116.667 64.06,-138.819 41,-46.077 68.34,-119.621 76.88,-150.634 -65.6,99.241 -87.12,41.35 -89.69,0 16.4,-38.988 -18.79,-72.363 -38.43,-84.178 C 1197.38,127.975 1159.79,70.183 1153.81,50 c -24.6,37.8061 58.09,133.897 102.5,177.216 32.8,44.895 34.17,126.021 30.75,160.972 -7.68,32.489 -10.25,25.105 -43.56,2.953 -26.65,-17.722 -38.44,-41.843 -41,-51.688 14.35,-51.983 -26.48,-77.778 -48.69,-84.178 13.67,5.415 38.95,25.401 30.75,62.026 -8.2,36.625 -64.91,-69.41 -92.25,-127.005 18.45,77.975 -41.85,37.412 -74.31,7.384 8.54,13.784 35.36,44.895 74.31,59.072 38.95,14.177 103.36,110.268 130.69,156.541 28.7,57.891 1.71,119.621 -15.38,143.25 z"
+       fill="#241d63"
+       id="path3" />
+    <path
+       d="m 256.375,558.074 c 73.8,84.151 76.875,249.756 69.188,322.04 -53.813,28.59 -152.726,68.615 -117.875,0 34.85,-68.616 -5.98,-232.495 -30.75,-305.857 C 187.188,510.82 138.5,446.412 112.875,422.137 71.875,371.647 44.5417,291.056 36,257.072 c 65.6,108.749 87.125,45.312 89.688,0 -16.4,-42.723 18.791,-79.297 38.437,-92.243 C 266.625,88.4458 304.208,25.1166 310.188,3 c 24.599,41.4283 -58.084,146.725 -102.5,194.195 -32.8,49.196 -34.167,138.094 -30.75,176.394 7.687,35.602 10.25,27.511 43.562,3.236 26.65,-19.419 38.438,-45.851 41,-56.64 -14.35,-56.964 26.479,-85.23 48.688,-92.243 -13.667,5.934 -38.95,27.835 -30.75,67.969 8.199,40.133 64.916,-76.06 92.25,-139.173 -18.45,85.445 41.854,40.996 74.312,8.091 -8.542,15.104 -35.362,49.196 -74.312,64.732 C 332.738,245.096 268.333,350.393 241,401.1 c -28.7,63.437 -1.708,131.081 15.375,156.974 z"
+       fill="#241d63"
+       id="path4" />
+  </g>
+  <defs
+     id="defs25">
+    <clipPath
+       id="clip0_59_391">
+      <rect
+         width="1440"
+         height="1185"
+         fill="#ffffff"
+         id="rect25"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/img/hero-bg/layer2.svg b/img/hero-bg/layer2.svg
new file mode 100644
index 0000000..6a72443
--- /dev/null
+++ b/img/hero-bg/layer2.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1440"
+   height="1185"
+   viewBox="0 0 1440 1185"
+   fill="none"
+   version="1.1"
+   id="svg25"
+   sodipodi:docname="website-bg.svg"
+   inkscape:export-filename="hero-bg/layer4.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview25"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050" />
+  <g
+     clip-path="url(#clip0_59_391)"
+     id="g15">
+    <ellipse
+       cx="248"
+       cy="1028.5"
+       rx="344"
+       ry="214.5"
+       fill="#241d63"
+       id="ellipse1" />
+    <ellipse
+       cx="678"
+       cy="1121.5"
+       rx="344"
+       ry="214.5"
+       fill="#241d63"
+       id="ellipse2" />
+    <ellipse
+       cx="1205"
+       cy="1050.5"
+       rx="344"
+       ry="214.5"
+       fill="#241d63"
+       id="ellipse3" />
+    <path
+       d="m 1386.1,705.142 c 31.34,11.343 6.53,49.805 -9.8,67.618 18.86,-6.543 56.81,-14.178 57.68,7.634 0.87,21.813 -25.76,33.809 -39.18,37.081 33.08,0 34.83,18.177 31.56,27.266 -14.8,22.684 -54.77,26.174 -72.91,25.084 -29.6,-3.49 -63.12,-18.177 -76.18,-25.084 -15.67,-10.47 -13.06,-25.448 -9.79,-31.628 9.57,-24.43 35.91,-12.361 47.88,-3.272 -29.6,-41.007 -18.14,-59.984 -8.71,-64.346 18.29,-12.215 35.19,13.087 41.36,27.265 -0.87,-73.289 25.03,-75.616 38.09,-67.618 z"
+       fill="#241d63"
+       id="path5" />
+    <path
+       d="m 81.614,615.515 c 48.84,2.838 30.106,67.433 14.6342,99.376 23.7778,-17.129 73.9288,-43.797 84.3168,-13.43 10.388,30.367 -22.015,58.435 -39.515,68.673 46.524,-13.873 56.609,11.007 55.836,25.181 -11.283,38.168 -66.033,59.848 -91.997,65.916 -43.0925,7.496 -96.3983,0.858 -117.6647,-3.398 -26.436,-8.181 -29.0555,-30.379 -27.0608,-40.455 3.2039,-38.436 45.30958,-32.474 65.9619,-24.688 -58.854,-45.365 -50.7066,-76.908 -39.2761,-87.009 20.57865,-24.877 54.9806,3.685 69.6092,21.075 C 24.4439,623.861 59.8894,609.722 81.614,615.515 Z"
+       fill="#241d63"
+       id="path6" />
+  </g>
+  <defs
+     id="defs25">
+    <clipPath
+       id="clip0_59_391">
+      <rect
+         width="1440"
+         height="1185"
+         fill="#ffffff"
+         id="rect25"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/img/hero-bg/layer3.svg b/img/hero-bg/layer3.svg
new file mode 100644
index 0000000..0d6787a
--- /dev/null
+++ b/img/hero-bg/layer3.svg
@@ -0,0 +1,335 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1440"
+   height="1185"
+   viewBox="0 0 1440 1185"
+   fill="none"
+   version="1.1"
+   id="svg25"
+   sodipodi:docname="website-bg.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview25"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050" />
+  <g
+     clip-path="url(#clip0_59_391)"
+     id="g15">
+    <g
+       filter="url(#filter0_d_59_391)"
+       id="g10">
+      <circle
+         cx="133"
+         cy="854"
+         r="8"
+         fill="#fed936"
+         id="circle10" />
+    </g>
+    <g
+       filter="url(#filter1_d_59_391)"
+       id="g11">
+      <circle
+         cx="1200"
+         cy="841"
+         r="12"
+         fill="#fed936"
+         id="circle11" />
+    </g>
+    <g
+       filter="url(#filter2_d_59_391)"
+       id="g12">
+      <circle
+         cx="1163.5"
+         cy="917.5"
+         r="6.5"
+         fill="#fed936"
+         id="circle12" />
+    </g>
+    <g
+       filter="url(#filter3_d_59_391)"
+       id="g13">
+      <circle
+         cx="175"
+         cy="627"
+         r="7"
+         fill="#fed936"
+         id="circle13" />
+    </g>
+    <g
+       filter="url(#filter4_d_59_391)"
+       id="g14">
+      <circle
+         cx="1300"
+         cy="634"
+         r="6"
+         fill="#fed936"
+         id="circle14" />
+    </g>
+  </g>
+  <defs
+     id="defs25">
+    <filter
+       id="filter0_d_59_391"
+       x="100"
+       y="821"
+       width="66"
+       height="66"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood15" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         result="hardAlpha"
+         id="feColorMatrix15" />
+      <feMorphology
+         radius="5"
+         operator="dilate"
+         in="SourceAlpha"
+         result="effect1_dropShadow_59_391"
+         id="feMorphology15" />
+      <feOffset
+         id="feOffset15" />
+      <feGaussianBlur
+         stdDeviation="10"
+         id="feGaussianBlur15" />
+      <feComposite
+         in2="hardAlpha"
+         operator="out"
+         id="feComposite15" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 1 0 0 0 0 0.863566 0 0 0 0 0.266667 0 0 0 1 0"
+         id="feColorMatrix16" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow_59_391"
+         id="feBlend16" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow_59_391"
+         result="shape"
+         id="feBlend17" />
+    </filter>
+    <filter
+       id="filter1_d_59_391"
+       x="1163"
+       y="804"
+       width="74"
+       height="74"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood17" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         result="hardAlpha"
+         id="feColorMatrix17" />
+      <feMorphology
+         radius="5"
+         operator="dilate"
+         in="SourceAlpha"
+         result="effect1_dropShadow_59_391"
+         id="feMorphology17" />
+      <feOffset
+         id="feOffset17" />
+      <feGaussianBlur
+         stdDeviation="10"
+         id="feGaussianBlur17" />
+      <feComposite
+         in2="hardAlpha"
+         operator="out"
+         id="feComposite17" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 1 0 0 0 0 0.863566 0 0 0 0 0.266667 0 0 0 1 0"
+         id="feColorMatrix18" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow_59_391"
+         id="feBlend18" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow_59_391"
+         result="shape"
+         id="feBlend19" />
+    </filter>
+    <filter
+       id="filter2_d_59_391"
+       x="1132"
+       y="886"
+       width="63"
+       height="63"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood19" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         result="hardAlpha"
+         id="feColorMatrix19" />
+      <feMorphology
+         radius="5"
+         operator="dilate"
+         in="SourceAlpha"
+         result="effect1_dropShadow_59_391"
+         id="feMorphology19" />
+      <feOffset
+         id="feOffset19" />
+      <feGaussianBlur
+         stdDeviation="10"
+         id="feGaussianBlur19" />
+      <feComposite
+         in2="hardAlpha"
+         operator="out"
+         id="feComposite19" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 1 0 0 0 0 0.863566 0 0 0 0 0.266667 0 0 0 1 0"
+         id="feColorMatrix20" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow_59_391"
+         id="feBlend20" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow_59_391"
+         result="shape"
+         id="feBlend21" />
+    </filter>
+    <filter
+       id="filter3_d_59_391"
+       x="143"
+       y="595"
+       width="64"
+       height="64"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood21" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         result="hardAlpha"
+         id="feColorMatrix21" />
+      <feMorphology
+         radius="5"
+         operator="dilate"
+         in="SourceAlpha"
+         result="effect1_dropShadow_59_391"
+         id="feMorphology21" />
+      <feOffset
+         id="feOffset21" />
+      <feGaussianBlur
+         stdDeviation="10"
+         id="feGaussianBlur21" />
+      <feComposite
+         in2="hardAlpha"
+         operator="out"
+         id="feComposite21" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 1 0 0 0 0 0.863566 0 0 0 0 0.266667 0 0 0 1 0"
+         id="feColorMatrix22" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow_59_391"
+         id="feBlend22" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow_59_391"
+         result="shape"
+         id="feBlend23" />
+    </filter>
+    <filter
+       id="filter4_d_59_391"
+       x="1269"
+       y="603"
+       width="62"
+       height="62"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood23" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         result="hardAlpha"
+         id="feColorMatrix23" />
+      <feMorphology
+         radius="5"
+         operator="dilate"
+         in="SourceAlpha"
+         result="effect1_dropShadow_59_391"
+         id="feMorphology23" />
+      <feOffset
+         id="feOffset23" />
+      <feGaussianBlur
+         stdDeviation="10"
+         id="feGaussianBlur23" />
+      <feComposite
+         in2="hardAlpha"
+         operator="out"
+         id="feComposite23" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 1 0 0 0 0 0.863566 0 0 0 0 0.266667 0 0 0 1 0"
+         id="feColorMatrix24" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow_59_391"
+         id="feBlend24" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow_59_391"
+         result="shape"
+         id="feBlend25" />
+    </filter>
+    <clipPath
+       id="clip0_59_391">
+      <rect
+         width="1440"
+         height="1185"
+         fill="#ffffff"
+         id="rect25"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/img/hero-bg/layer4.svg b/img/hero-bg/layer4.svg
new file mode 100644
index 0000000..701a224
--- /dev/null
+++ b/img/hero-bg/layer4.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1440"
+   height="1185"
+   viewBox="0 0 1440 1185"
+   fill="none"
+   version="1.1"
+   id="svg25"
+   sodipodi:docname="website-bg.svg"
+   inkscape:export-filename="hero-bg/layer3.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview25"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050" />
+  <g
+     clip-path="url(#clip0_59_391)"
+     id="g15">
+    <path
+       d="m -21.1678,790.882 c -48.9598,17.621 -10.2,77.375 15.29991,105.049 -29.46651,-10.166 -88.73961,-22.027 -90.09951,11.86 -1.36,33.887 40.2331,52.525 61.1997,57.608 -51.6798,0 -54.3998,28.239 -49.2998,42.361 23.1199,35.24 85.56624,40.66 113.8994,38.97 46.2398,-5.42 98.5991,-28.24 118.9991,-38.97 24.48,-16.268 20.4,-39.537 15.3,-49.138 -14.96,-37.954 -56.099,-19.203 -74.7994,-5.083 46.2394,-63.708 28.3334,-93.19 13.6004,-99.967 -28.5603,-18.977 -54.9668,20.333 -64.6001,42.359 1.36,-113.86 -39.099814,-117.474 -59.4997,-105.049 z"
+       fill="#5e38be"
+       id="path7" />
+    <ellipse
+       cx="344"
+       cy="214.5"
+       rx="344"
+       ry="214.5"
+       transform="matrix(-1,0,0,1,1655,956)"
+       fill="#5e38be"
+       id="ellipse7" />
+    <ellipse
+       cx="344"
+       cy="214.5"
+       rx="344"
+       ry="214.5"
+       transform="matrix(-1,0,0,1,1187,978)"
+       fill="#5e38be"
+       id="ellipse8" />
+    <ellipse
+       cx="344"
+       cy="206"
+       rx="344"
+       ry="206"
+       transform="matrix(-1,0,0,1,643,926)"
+       fill="#5e38be"
+       id="ellipse9" />
+    <path
+       d="m 1310.22,768.181 c -50.14,7.38 -24.79,72.105 -5.84,103.545 -26.14,-15.446 -80.37,-38.293 -88.26,-6.112 -7.89,32.182 28.16,58.09 47.17,67.021 -49.3,-10.019 -57.39,16.491 -55.27,30.999 15.2,38.226 73.72,55.526 101.08,59.396 45.16,3.77 99.55,-7.93 121.1,-14.25 26.52,-10.825 27.15,-33.894 24.16,-44.076 -6.89,-39.238 -49.79,-29.261 -70.37,-19.367 56.51,-52.032 45.16,-83.731 32.42,-93.076 -23.55,-23.705 -56.39,8.812 -69.87,28.034 23.45,-108.751 -14.44,-120.056 -36.32,-112.114 z"
+       fill="#5e38be"
+       id="path9" />
+    <path
+       d="m 258.146,764.219 c 44.556,0.351 30.282,59.741 17.575,89.392 20.898,-16.604 65.383,-43.051 76.136,-16.004 10.753,27.047 -17.524,53.956 -33.006,64.03 41.732,-14.687 51.974,7.401 51.878,20.281 -8.628,35.102 -57.509,57.238 -80.872,63.918 -38.883,8.752 -87.665,5.16 -107.196,2.27 -24.402,-6.211 -27.737,-26.208 -26.354,-35.43 1.266,-34.978 39.83,-31.489 58.953,-25.373 -55.49,-38.434 -49.43,-67.391 -39.464,-77.064 17.656,-23.48 50.179,0.839 64.234,15.934 -33.539,-91.791 -1.897,-106.216 18.116,-101.954 z"
+       fill="#5e38be"
+       id="path10" />
+  </g>
+  <defs
+     id="defs25">
+    <clipPath
+       id="clip0_59_391">
+      <rect
+         width="1440"
+         height="1185"
+         fill="#ffffff"
+         id="rect25"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/index.html b/index.html
index 53b835c..a05c986 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -36,185 +36,193 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
         src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg"
         alt="Major League Hacking 2024 Hackathon Season" style="width: 100%" /></a>
   </nav>
-  <div id="hero" class="flex flex-col items-center justify-center h-screen bg-no-repeat bg-cover bg-enchanted-forest bg-center-bottom">
-    <div class="flex flex-col gap-6 md:gap-0">
-      <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-2.5">
-        <img class="md:max-lg:h-1/2" src="img/logo.png" alt="The logo of DandyHacks 2023" />
-        <div class="flex flex-col items-center md:items-start gap-4">
-          <h1 class="text-4xl lg:text-6xl">DandyHacks &OpenCurlyQuote;23</h1>
-          <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
-        </div>
-      </div>
-      <div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
-        <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
-        <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
+  <div class="wrapper scroll-smooth">
+    <div id="hero" class="flex flex-col items-center justify-center h-screen parallax">
+      <div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-1 bg-center-bottom"></div>
+      <div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-2 bg-center-bottom"></div>
+      <div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-3 bg-center-bottom"></div>
+      <div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-4 bg-center-bottom">
+        <div class="relative w-full h-full md:max-lg:portrait:h-3/6 -bottom-full bg-violet"></div>
       </div>
-    </div>
-  </div>
-  <div class="flex flex-row items-center justify-center bg-violet gap-[77px]">
-    <div id="about" class="absolute bottom-16 lg:bottom-[150px]"></div>
-    <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
-    <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
-      <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
-      <div class="text-base lg:text-xl">
-        <p>
-          DandyHacks is the University of Rochester’s annual 42-hour long
-          hackathon. This year will be our 11th anniversary, and we’re so excited
-          to hold this amazing milestone in-person! As a fully student-led
-          organization at a tier 1 research university, we embody our school’s
-          values, encouraging participants to question the world and learn more.
-          <br/>
-          <br/>
-          DandyHacks is very beginner-friendly, and we welcome students from all
-          backgrounds and majors. Participating in DandyHacks is not just about
-          winning; it is about collaborating with peers, learning from mentors,
-          and gaining valuable experiences. This year, DandyHacks will take place
-          on Nov 3-5 in the Feldman Ballroom. We hope to see you there!
-        </p>
+      <div class="flex flex-col gap-6 md:gap-0">
+        <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-2.5">
+          <img class="md:max-lg:h-1/2" src="img/logo.png" alt="The logo of DandyHacks 2023" />
+          <div class="flex flex-col items-center md:items-start gap-4">
+            <h1 class="text-4xl lg:text-6xl">DandyHacks &OpenCurlyQuote;23</h1>
+            <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
+          </div>
+        </div>
+        <div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
+        </div>
       </div>
     </div>
-    <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
-  </div>
-  <div id="faq" class="relative px-5">
-    <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
-      <h2 class="text-5xl">FAQS</h2>
-      <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
-        <details>
-          <summary>
-            What is a hackathon?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            A hackathon is an event in which people meet to collaboratively
-            build their ideas using technology.
-          </p>
-        </details>
-        <details>
-          <summary>
-            Who is eligible to participate?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            Any graduate or undergraduate student over the age of 18 enrolled in
-            a North American institution of higher education is eligible. All hackers must be
-            vaccinated and are encouraged to mask while indoors.
-          </p>
-        </details>
-        <details>
-          <summary>
-            Do I have to pay to participate?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            Hackers do not have to pay to participate. Hackers just need to
-            register and check-in upon arrival. Registration will open up in
-            early September, but you may join discord and follow us on Instagram
-            <a href="https://www.instagram.com/dandyhacks">@dandyhacks</a> to
-            stay up to date on all things DandyHacks!
-          </p>
-        </details>
-        <details>
-          <summary>
-            Will the hackathon be in-person or virtual?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            The hackathon will be fully in-person with a couple online
-            workshops.
-          </p>
-        </details>
-        <details>
-          <summary>
-            What safety protocols are in place to protect the community?
-            <img src="img/icons/plus.png" />
-          </summary>
+    <div class="flex flex-row items-center justify-center gap-[77px] relative">
+      <div id="about" class="absolute -top-16 lg:-top-[150px]"></div>
+      <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
+      <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
+        <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
+        <div class="text-base lg:text-xl">
           <p>
-            <a href="https://www.rochester.edu/coronavirus-update/">University of Rochester COVID-19 protocols</a>.
+            DandyHacks is the University of Rochester’s annual 42-hour long
+            hackathon. This year will be our 11th anniversary, and we’re so excited
+            to hold this amazing milestone in-person! As a fully student-led
+            organization at a tier 1 research university, we embody our school’s
+            values, encouraging participants to question the world and learn more.
+            <br/>
+            <br/>
+            DandyHacks is very beginner-friendly, and we welcome students from all
+            backgrounds and majors. Participating in DandyHacks is not just about
+            winning; it is about collaborating with peers, learning from mentors,
+            and gaining valuable experiences. This year, DandyHacks will take place
+            on Nov 3-5 in the Feldman Ballroom. We hope to see you there!
           </p>
-        </details>
-        <details>
-          <summary>
-            Will I work individually or with a team?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            You can work individually or with a team. Each team can have a
-            maximum of 4 people, and don’t worry if you don’t have a team yet!
-            We will make time and communication channels for you to find a team.
-          </p>
-        </details>
-        <details>
-          <summary>
-            Can I start hacking before the event?
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            You may not start hacking before the event, but you can start
-            planning and gathering resources.
-          </p>
-        </details>
-        <details>
-          <summary>
-            I still have questions…
-            <img src="img/icons/plus.png" />
-          </summary>
-          <p>
-            Reach out to us at greetings@dandyhacks.net or reach out to us on
-            Instagram
-            <a href="https://www.instagram.com/dandyhacks">@dandyhacks</a>!
-          </p>
-        </details>
+        </div>
       </div>
+      <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
     </div>
-    <div id="sponsoring" class="flex-col items-center hidden mb-24 lg:flex gap-20">
-      <h2 class="text-5xl">Sponsoring</h2>
-      <div class="flex flex-row gap-24">
-        <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
-          <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
-          <p>Sponsors enable us to:</p>
-          <ul class="list-disc list-inside">
-            <li>Keep the entire event <b>free for all of our attendees</b></li>
-            <li>Send us mentors and workshop leaders and <b>gain recognition
-                from our hackers</b></li>
-          </ul>
+    <div id="faq" class="relative px-5 bg-deep-purple">
+      <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
+        <h2 class="text-5xl">FAQS</h2>
+        <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
+          <details>
+            <summary>
+              What is a hackathon?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              A hackathon is an event in which people meet to collaboratively
+              build their ideas using technology.
+            </p>
+          </details>
+          <details>
+            <summary>
+              Who is eligible to participate?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              Any graduate or undergraduate student over the age of 18 enrolled in
+              a North American institution of higher education is eligible. All hackers must be
+              vaccinated and are encouraged to mask while indoors.
+            </p>
+          </details>
+          <details>
+            <summary>
+              Do I have to pay to participate?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              Hackers do not have to pay to participate. Hackers just need to
+              register and check-in upon arrival. Registration will open up in
+              early September, but you may join discord and follow us on Instagram
+              <a href="https://www.instagram.com/dandyhacks">@dandyhacks</a> to
+              stay up to date on all things DandyHacks!
+            </p>
+          </details>
+          <details>
+            <summary>
+              Will the hackathon be in-person or virtual?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              The hackathon will be fully in-person with a couple online
+              workshops.
+            </p>
+          </details>
+          <details>
+            <summary>
+              What safety protocols are in place to protect the community?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              <a href="https://www.rochester.edu/coronavirus-update/">University of Rochester COVID-19 protocols</a>.
+            </p>
+          </details>
+          <details>
+            <summary>
+              Will I work individually or with a team?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              You can work individually or with a team. Each team can have a
+              maximum of 4 people, and don’t worry if you don’t have a team yet!
+              We will make time and communication channels for you to find a team.
+            </p>
+          </details>
+          <details>
+            <summary>
+              Can I start hacking before the event?
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              You may not start hacking before the event, but you can start
+              planning and gathering resources.
+            </p>
+          </details>
+          <details>
+            <summary>
+              I still have questions…
+              <img src="img/icons/plus.png" />
+            </summary>
+            <p>
+              Reach out to us at greetings@dandyhacks.net or reach out to us on
+              Instagram
+              <a href="https://www.instagram.com/dandyhacks">@dandyhacks</a>!
+            </p>
+          </details>
         </div>
-        <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
-          <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
-          <p>As a sponsor, you will be able to:</p>
-          <ul class="list-disc list-inside">
-            <li>
-              Connect with top students, and get early access to resumes and
-              portfolios.
-            </li>
-            <li>
-              Showcase your products and see talented students make cool hacks
-              with them.
-            </li>
-            <li>
-              Inspire the next generation of developers to find pride and joy in
-              building awesome things.
-            </li>
-            <li>Attract next generation talent for tech development programs.</li>
-          </ul>
+      </div>
+      <div id="sponsoring" class="flex-col items-center hidden mb-24 lg:flex gap-20">
+        <h2 class="text-5xl">Sponsoring</h2>
+        <div class="flex flex-row gap-24">
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
+            <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
+            <p>Sponsors enable us to:</p>
+            <ul class="list-disc list-inside">
+              <li>Keep the entire event <b>free for all of our attendees</b></li>
+              <li>Send us mentors and workshop leaders and <b>gain recognition
+                  from our hackers</b></li>
+            </ul>
+          </div>
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
+            <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
+            <p>As a sponsor, you will be able to:</p>
+            <ul class="list-disc list-inside">
+              <li>
+                Connect with top students, and get early access to resumes and
+                portfolios.
+              </li>
+              <li>
+                Showcase your products and see talented students make cool hacks
+                with them.
+              </li>
+              <li>
+                Inspire the next generation of developers to find pride and joy in
+                building awesome things.
+              </li>
+              <li>Attract next generation talent for tech development programs.</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <footer class="flex gap-8 lg:gap-0 flex-col lg:flex-row items-center justify-between lg:px-24 lg:py-12 lg:bg-groundboi lg:bg-no-repeat lg:bg-center-top lg:bg-[length:344px_auto] text-xl">
-    <div class="flex flex-col items-center gap-5">
-      <span class="hidden font-bold lg:inline">greetings@dandyhacks.net</span>
-      <div class="flex gap-2.5 items-center">
-        <a href="mailto:greetings@dandyhacks.net"><img src="img/social/mail.svg"></a>
-        <a href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
-        <a href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
-        <a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
+    <footer class="flex gap-8 lg:gap-0 flex-col lg:flex-row items-center justify-between lg:px-24 lg:py-12 lg:bg-groundboi lg:bg-no-repeat lg:bg-center-top lg:bg-[length:344px_auto] text-xl">
+      <div class="flex flex-col items-center gap-5">
+        <span class="hidden font-bold lg:inline">greetings@dandyhacks.net</span>
+        <div class="flex gap-2.5 items-center">
+          <a href="mailto:greetings@dandyhacks.net"><img src="img/social/mail.svg"></a>
+          <a href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
+          <a href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
+          <a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
+        </div>
       </div>
-    </div>
-    <div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
-      <a class="font-bold" href="http://mlh.io/code-of-conduct" target="_blank"><span>MLH Code of Conduct</span></a>
-      <span>© 2023 DandyHacks</span>
-    </div>
-  </footer>
+      <div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
+        <a class="font-bold" href="http://mlh.io/code-of-conduct" target="_blank"><span>MLH Code of Conduct</span></a>
+        <span>© 2023 DandyHacks</span>
+      </div>
+    </footer>
+  </div>
   <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
   <script src="script.js"></script>
 </body>
diff --git a/main.css b/main.css
index ba43545..6f4e729 100644
--- a/main.css
+++ b/main.css
@@ -49,4 +49,36 @@
     position: relative;
     z-index: 10;
   }
+
+  /* Parallax effect */
+
+  .wrapper {
+    perspective: 10px;
+    height: 100vh;
+    overflow-x: hidden;
+  }
+
+  .parallax {
+    transform-style: preserve-3d;
+  }
+
+  .parallax > div.bg-cover {
+    z-index: -1;
+  }
+
+  .parallax > div.bg-enchanted-forest-layer-1 {
+    transform: translateZ(-20px) scale(3);
+  }
+
+  .parallax > div.bg-enchanted-forest-layer-2 {
+    transform: translateZ(-15px) scale(2.5);
+  }
+
+  .parallax > div.bg-enchanted-forest-layer-3 {
+    transform: translateZ(-10px) scale(2);
+  }
+
+  .parallax > div.bg-enchanted-forest-layer-4 {
+    transform: translateZ(-5px) scale(1.5);
+  }
 }
diff --git a/script.js b/script.js
index 103ac97..3d198d7 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
+    const wrapper = document.querySelector('.wrapper');
     const navBar = document.querySelector('nav');
     const navigationLinks = navBar.querySelectorAll('li');
     const hamburgerCheckbox = navBar.querySelector('.peer');
@@ -17,11 +18,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Navbar appears on scroll down and hides on scroll up
 
-    let lastScrollY = window.scrollY;
+    let lastScrollY = wrapper.scrollTop;
 
-    window.addEventListener('scroll', () => {
-        window.scrollY - lastScrollY > 0 ? hideNavBar() : showNavBar();
-        lastScrollY = window.scrollY;
+    wrapper.addEventListener('scroll', () => {
+        wrapper.scrollTop - lastScrollY > 0 ? hideNavBar() : showNavBar();
+        lastScrollY = wrapper.scrollTop;
     });
 
     function hideNavBar() {
diff --git a/styles.css b/styles.css
index d161b02..f4f1239 100644
--- a/styles.css
+++ b/styles.css
@@ -639,8 +639,12 @@ h1, h2, h3, h4, h5, h6 {
   inset: -0.25rem;
 }
 
-.bottom-16 {
-  bottom: 4rem;
+.-bottom-full {
+  bottom: -100%;
+}
+
+.-top-16 {
+  top: -4rem;
 }
 
 .end-1 {
@@ -822,6 +826,10 @@ h1, h2, h3, h4, h5, h6 {
   height: 2rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1887,8 +1895,20 @@ h1, h2, h3, h4, h5, h6 {
   background-color: rgb(94 56 190 / var(--tw-bg-opacity));
 }
 
-.bg-enchanted-forest {
-  background-image: url('img/website-bg.svg');
+.bg-enchanted-forest-layer-1 {
+  background-image: url('img/hero-bg/layer1.svg');
+}
+
+.bg-enchanted-forest-layer-2 {
+  background-image: url('img/hero-bg/layer2.svg');
+}
+
+.bg-enchanted-forest-layer-3 {
+  background-image: url('img/hero-bg/layer3.svg');
+}
+
+.bg-enchanted-forest-layer-4 {
+  background-image: url('img/hero-bg/layer4.svg');
 }
 
 .decoration-slice {
@@ -2650,6 +2670,38 @@ canvas {
   z-index: 10;
 }
 
+/* Parallax effect */
+
+.wrapper {
+  perspective: 10px;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.parallax {
+  transform-style: preserve-3d;
+}
+
+.parallax > div.bg-cover {
+  z-index: -1;
+}
+
+.parallax > div.bg-enchanted-forest-layer-1 {
+  transform: translateZ(-20px) scale(3);
+}
+
+.parallax > div.bg-enchanted-forest-layer-2 {
+  transform: translateZ(-15px) scale(2.5);
+}
+
+.parallax > div.bg-enchanted-forest-layer-3 {
+  transform: translateZ(-10px) scale(2);
+}
+
+.parallax > div.bg-enchanted-forest-layer-4 {
+  transform: translateZ(-5px) scale(1.5);
+}
+
 @font-face {
   font-family: "Katahdin Round";
 
@@ -2832,10 +2884,6 @@ canvas {
     .md\:max-lg\:h-1\/2 {
       height: 50%;
     }
-
-    .md\:max-lg\:gap-8 {
-      gap: 2rem;
-    }
   }
 }
 
@@ -2844,8 +2892,8 @@ canvas {
     position: relative;
   }
 
-  .lg\:bottom-\[150px\] {
-    bottom: 150px;
+  .lg\:-top-\[150px\] {
+    top: -150px;
   }
 
   .lg\:mb-0 {
@@ -2888,10 +2936,6 @@ canvas {
     gap: 5rem;
   }
 
-  .lg\:gap-16 {
-    gap: 4rem;
-  }
-
   .lg\:self-start {
     align-self: flex-start;
   }
@@ -2912,10 +2956,6 @@ canvas {
     background-repeat: no-repeat;
   }
 
-  .lg\:p-0 {
-    padding: 0px;
-  }
-
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2926,11 +2966,6 @@ canvas {
     padding-right: 2.5rem;
   }
 
-  .lg\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
@@ -2984,3 +3019,13 @@ canvas {
     }
   }
 }
+
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    @media (orientation: portrait) {
+      .md\:max-lg\:portrait\:h-3\/6 {
+        height: 50%;
+      }
+    }
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 9000550..bce0b1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,10 @@ module.exports = {
       'fireflies': "url('img/website-bg2.png')",
       'plus-icon': "url('img/icons/plus.png')",
       'groundboi': "url('img/sticker2-no_border.png')",
+      'enchanted-forest-layer-1': "url('img/hero-bg/layer1.svg')",
+      'enchanted-forest-layer-2': "url('img/hero-bg/layer2.svg')",
+      'enchanted-forest-layer-3': "url('img/hero-bg/layer3.svg')",
+      'enchanted-forest-layer-4': "url('img/hero-bg/layer4.svg')",
     },
     extend: {
       backgroundPosition: {