From d38d12a1e9edf6434a722f9b149eeb934e5f1bd5 Mon Sep 17 00:00:00 2001
From: Patti <139997703+Patticatti@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:24:59 -0700
Subject: [PATCH] fix(website): Squashed all website change commits from
 patti/fix-responsiveness (#6135)

---
 .../{ => logos}/cust-logo-bunq-gray.svg       |   0
 .../images/{ => logos}/cust-logo-bunq.svg     |   0
 .../images/{ => logos}/cust-logo-caktus.png   | Bin
 .../{ => logos}/cust-logo-corrdyn-gray.svg    |   0
 .../images/{ => logos}/cust-logo-corrdyn.svg  |   0
 .../{ => logos}/cust-logo-double11-gray.svg   |   0
 .../images/{ => logos}/cust-logo-double11.svg |   0
 .../images/{ => logos}/cust-logo-ipap.png     | Bin
 .../images/{ => logos}/cust-logo-mst-gray.svg |   0
 .../images/{ => logos}/cust-logo-mst.svg      |   0
 .../images/{ => logos}/cust-logo-nomobo.webp  | Bin
 .../images/{ => logos}/cust-logo-seb-gray.svg |   0
 .../images/{ => logos}/cust-logo-seb.svg      |   0
 .../images/{ => logos}/cust-logo-semicat.png  | Bin
 .../{ => logos}/cust-logo-square1-gray.svg    |   0
 .../images/{ => logos}/cust-logo-square1.svg  |   0
 .../{ => logos}/cust-logo-teracloud-gray.svg  |   0
 .../{ => logos}/cust-logo-teracloud.svg       |   0
 .../{ => logos}/cust-logo-wolfram-gray.svg    |   0
 .../images/{ => logos}/cust-logo-wolfram.svg  |   0
 website/public/images/play-icon.svg           |  31 ++
 website/public/images/ribbon.svg              | 268 +++++++++++++++++-
 website/src/app/page.tsx                      |  63 ++--
 .../src/components/CustomerLogos/index.tsx    | 185 ++++++------
 website/src/components/Footer/index.tsx       | 115 ++++----
 25 files changed, 489 insertions(+), 173 deletions(-)
 rename website/public/images/{ => logos}/cust-logo-bunq-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-bunq.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-caktus.png (100%)
 rename website/public/images/{ => logos}/cust-logo-corrdyn-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-corrdyn.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-double11-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-double11.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-ipap.png (100%)
 rename website/public/images/{ => logos}/cust-logo-mst-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-mst.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-nomobo.webp (100%)
 rename website/public/images/{ => logos}/cust-logo-seb-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-seb.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-semicat.png (100%)
 rename website/public/images/{ => logos}/cust-logo-square1-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-square1.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-teracloud-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-teracloud.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-wolfram-gray.svg (100%)
 rename website/public/images/{ => logos}/cust-logo-wolfram.svg (100%)
 create mode 100644 website/public/images/play-icon.svg

diff --git a/website/public/images/cust-logo-bunq-gray.svg b/website/public/images/logos/cust-logo-bunq-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-bunq-gray.svg
rename to website/public/images/logos/cust-logo-bunq-gray.svg
diff --git a/website/public/images/cust-logo-bunq.svg b/website/public/images/logos/cust-logo-bunq.svg
similarity index 100%
rename from website/public/images/cust-logo-bunq.svg
rename to website/public/images/logos/cust-logo-bunq.svg
diff --git a/website/public/images/cust-logo-caktus.png b/website/public/images/logos/cust-logo-caktus.png
similarity index 100%
rename from website/public/images/cust-logo-caktus.png
rename to website/public/images/logos/cust-logo-caktus.png
diff --git a/website/public/images/cust-logo-corrdyn-gray.svg b/website/public/images/logos/cust-logo-corrdyn-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-corrdyn-gray.svg
rename to website/public/images/logos/cust-logo-corrdyn-gray.svg
diff --git a/website/public/images/cust-logo-corrdyn.svg b/website/public/images/logos/cust-logo-corrdyn.svg
similarity index 100%
rename from website/public/images/cust-logo-corrdyn.svg
rename to website/public/images/logos/cust-logo-corrdyn.svg
diff --git a/website/public/images/cust-logo-double11-gray.svg b/website/public/images/logos/cust-logo-double11-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-double11-gray.svg
rename to website/public/images/logos/cust-logo-double11-gray.svg
diff --git a/website/public/images/cust-logo-double11.svg b/website/public/images/logos/cust-logo-double11.svg
similarity index 100%
rename from website/public/images/cust-logo-double11.svg
rename to website/public/images/logos/cust-logo-double11.svg
diff --git a/website/public/images/cust-logo-ipap.png b/website/public/images/logos/cust-logo-ipap.png
similarity index 100%
rename from website/public/images/cust-logo-ipap.png
rename to website/public/images/logos/cust-logo-ipap.png
diff --git a/website/public/images/cust-logo-mst-gray.svg b/website/public/images/logos/cust-logo-mst-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-mst-gray.svg
rename to website/public/images/logos/cust-logo-mst-gray.svg
diff --git a/website/public/images/cust-logo-mst.svg b/website/public/images/logos/cust-logo-mst.svg
similarity index 100%
rename from website/public/images/cust-logo-mst.svg
rename to website/public/images/logos/cust-logo-mst.svg
diff --git a/website/public/images/cust-logo-nomobo.webp b/website/public/images/logos/cust-logo-nomobo.webp
similarity index 100%
rename from website/public/images/cust-logo-nomobo.webp
rename to website/public/images/logos/cust-logo-nomobo.webp
diff --git a/website/public/images/cust-logo-seb-gray.svg b/website/public/images/logos/cust-logo-seb-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-seb-gray.svg
rename to website/public/images/logos/cust-logo-seb-gray.svg
diff --git a/website/public/images/cust-logo-seb.svg b/website/public/images/logos/cust-logo-seb.svg
similarity index 100%
rename from website/public/images/cust-logo-seb.svg
rename to website/public/images/logos/cust-logo-seb.svg
diff --git a/website/public/images/cust-logo-semicat.png b/website/public/images/logos/cust-logo-semicat.png
similarity index 100%
rename from website/public/images/cust-logo-semicat.png
rename to website/public/images/logos/cust-logo-semicat.png
diff --git a/website/public/images/cust-logo-square1-gray.svg b/website/public/images/logos/cust-logo-square1-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-square1-gray.svg
rename to website/public/images/logos/cust-logo-square1-gray.svg
diff --git a/website/public/images/cust-logo-square1.svg b/website/public/images/logos/cust-logo-square1.svg
similarity index 100%
rename from website/public/images/cust-logo-square1.svg
rename to website/public/images/logos/cust-logo-square1.svg
diff --git a/website/public/images/cust-logo-teracloud-gray.svg b/website/public/images/logos/cust-logo-teracloud-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-teracloud-gray.svg
rename to website/public/images/logos/cust-logo-teracloud-gray.svg
diff --git a/website/public/images/cust-logo-teracloud.svg b/website/public/images/logos/cust-logo-teracloud.svg
similarity index 100%
rename from website/public/images/cust-logo-teracloud.svg
rename to website/public/images/logos/cust-logo-teracloud.svg
diff --git a/website/public/images/cust-logo-wolfram-gray.svg b/website/public/images/logos/cust-logo-wolfram-gray.svg
similarity index 100%
rename from website/public/images/cust-logo-wolfram-gray.svg
rename to website/public/images/logos/cust-logo-wolfram-gray.svg
diff --git a/website/public/images/cust-logo-wolfram.svg b/website/public/images/logos/cust-logo-wolfram.svg
similarity index 100%
rename from website/public/images/cust-logo-wolfram.svg
rename to website/public/images/logos/cust-logo-wolfram.svg
diff --git a/website/public/images/play-icon.svg b/website/public/images/play-icon.svg
new file mode 100644
index 000000000..be4f895f3
--- /dev/null
+++ b/website/public/images/play-icon.svg
@@ -0,0 +1,31 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_iii_126_235)">
+<circle cx="12.5" cy="12" r="12" fill="white" fill-opacity="0.04"/>
+</g>
+<circle cx="12.5" cy="12" r="11.75" stroke="#FFDDC0" stroke-opacity="0.15" stroke-width="0.5"/>
+<path d="M16 11.134C16.6667 11.5189 16.6667 12.4811 16 12.866L11.5 15.4641C10.8333 15.849 10 15.3679 10 14.5981L10 9.40192C10 8.63212 10.8333 8.151 11.5 8.5359L16 11.134Z" fill="white" fill-opacity="0.7"/>
+<defs>
+<filter id="filter0_iii_126_235" x="-0.5" y="-4" width="25" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<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"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_126_235"/>
+<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"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.621024 0 0 0 0 0.309722 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_126_235" result="effect2_innerShadow_126_235"/>
+<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"/>
+<feOffset dx="-1" dy="1"/>
+<feGaussianBlur stdDeviation="0.8"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_126_235" result="effect3_innerShadow_126_235"/>
+</filter>
+</defs>
+</svg>
diff --git a/website/public/images/ribbon.svg b/website/public/images/ribbon.svg
index e26a703e2..692166975 100644
--- a/website/public/images/ribbon.svg
+++ b/website/public/images/ribbon.svg
@@ -1,3 +1,267 @@
-<svg width="1282" height="722" viewBox="0 0 1282 722" style="opacity: 0.375" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M89.008 721C126.541 571.325 324.559 402.175 639.059 352.097M639.059 352.097C953.558 302.02 1208.52 1.55641 1208.52 1.55641M639.059 352.097C324.559 402.175 165.368 571.325 127.835 721M639.059 352.097C953.558 302.02 1174.87 1.55641 1174.87 1.55641M639.059 352.097C324.559 402.175 200.312 571.325 162.779 721M639.059 352.097C953.558 302.02 1247.35 1.55641 1247.35 1.55641M639.059 352.097C324.559 402.175 90.3022 571.325 52.7694 721M639.059 352.097C953.558 302.02 1138.63 1.55641 1138.63 1.55641M639.059 352.097C324.559 402.175 236.551 571.325 199.018 721M639.059 352.097C953.558 302.02 1107.57 1.55641 1107.57 1.55641M639.059 352.097C324.559 402.175 270.201 571.325 232.668 721M639.059 352.097C953.558 302.02 1077.8 1.55641 1077.8 1.55641M639.059 352.097C324.559 402.175 306.44 571.325 268.907 721M639.059 352.097C953.558 302.02 1045.45 1.5564 1045.45 1.5564M639.059 352.097C953.558 302.02 1281 1.55641 1281 1.55641M639.059 352.097C324.559 402.175 55.3579 571.325 17.825 721M639.059 352.097C324.559 402.175 109.716 571.325 72.1829 721M639.059 352.097C324.559 402.175 144.66 571.325 107.127 721M639.059 352.097C324.559 402.175 183.487 571.325 145.954 721M639.059 352.097C324.559 402.175 73.4772 571.325 35.9443 721M639.059 352.097C324.559 402.175 219.726 571.325 182.193 721M639.059 352.097C324.559 402.175 253.376 571.325 215.843 721M639.059 352.097C324.559 402.175 289.615 571.325 252.082 721M639.059 352.097C324.559 402.175 38.5328 571.325 0.999912 721M639.059 352.097C953.558 302.02 1191.69 1.55641 1191.69 1.55641M639.059 352.097C953.558 302.02 1158.05 0.999995 1158.05 0.999995M639.059 352.097C953.558 302.02 1227.94 1.55641 1227.94 1.55641M639.059 352.097C953.558 302.02 1123.1 1.55641 1123.1 1.55641M639.059 352.097C953.558 302.02 1090.75 1.55641 1090.75 1.55641M639.059 352.097C953.558 302.02 1060.98 1.5564 1060.98 1.5564M639.059 352.097C953.558 302.02 1028.62 1.5564 1028.62 1.5564M639.059 352.097C953.558 302.02 1264.17 1.55641 1264.17 1.55641" stroke="#FF7300"/>
+<svg width="1440" height="826" viewBox="0 0 1440 826" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<mask id="mask0_126_175" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-231" y="-532" width="2026" height="2026">
+<rect width="1833" height="1032" transform="translate(-231 764.127) rotate(-45)" fill="url(#paint0_linear_126_175)"/>
+</mask>
+<g mask="url(#mask0_126_175)">
+<path opacity="0.19" d="M290.843 1285.97C98.3775 661.462 262.122 393.164 782.077 481.077C1302.03 568.99 1570.33 405.245 1586.97 -10.1565" stroke="url(#paint1_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.1" d="M270.784 1265.91C91.691 654.775 262.122 393.164 782.077 481.077C1302.03 568.99 1563.64 398.559 1566.91 -30.2161" stroke="url(#paint2_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.4" d="M250.724 1245.85C85.0043 648.089 262.122 393.164 782.077 481.077C1302.03 568.99 1556.96 391.872 1546.85 -50.2759" stroke="url(#paint3_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.75" d="M230.664 1225.79C78.3177 641.402 262.122 393.164 782.077 481.077C1302.03 568.99 1550.27 385.185 1526.79 -70.3355" stroke="url(#paint4_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.27" d="M210.605 1205.73C71.6312 634.716 262.122 393.164 782.077 481.077C1302.03 568.99 1543.58 378.499 1506.73 -90.3951" stroke="url(#paint5_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.95" d="M190.545 1185.67C64.9447 628.029 262.122 393.164 782.077 481.077C1302.03 568.99 1536.9 371.812 1486.67 -110.455" stroke="url(#paint6_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.3" d="M170.486 1165.61C58.2581 621.343 262.122 393.164 782.077 481.077C1302.03 568.99 1530.21 365.126 1466.61 -130.514" stroke="url(#paint7_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.12" d="M150.426 1145.55C51.5715 614.656 262.122 393.164 782.077 481.077C1302.03 568.99 1523.52 358.439 1446.55 -150.574" stroke="url(#paint8_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.92" d="M130.366 1125.49C44.8851 607.97 262.122 393.164 782.077 481.077C1302.03 568.99 1516.84 351.753 1426.49 -170.634" stroke="url(#paint9_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.41" d="M110.307 1105.43C38.1987 601.283 262.122 393.164 782.077 481.077C1302.03 568.99 1510.15 345.066 1406.43 -190.693" stroke="url(#paint10_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.37" d="M90.247 1085.37C31.512 594.596 262.122 393.164 782.077 481.077C1302.03 568.99 1503.46 338.38 1386.37 -210.753" stroke="url(#paint11_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.09" d="M70.1873 1065.31C24.8254 587.91 262.122 393.164 782.077 481.077C1302.03 568.99 1496.78 331.693 1366.31 -230.813" stroke="url(#paint12_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.11" d="M50.1278 1045.25C18.139 581.223 262.122 393.164 782.077 481.077C1302.03 568.99 1490.09 325.007 1346.25 -250.872" stroke="url(#paint13_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.16" d="M30.0681 1025.19C11.4523 574.537 262.122 393.164 782.077 481.077C1302.03 568.99 1483.4 318.32 1326.19 -270.932" stroke="url(#paint14_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.64" d="M10.0086 1005.14C4.76586 567.85 262.122 393.164 782.077 481.077C1302.03 568.99 1476.72 311.634 1306.14 -290.991" stroke="url(#paint15_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.52" d="M-10.0512 985.076C-1.92079 561.164 262.122 393.164 782.077 481.077C1302.03 568.99 1470.03 304.947 1286.08 -311.051" stroke="url(#paint16_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.29" d="M-30.1106 965.016C-8.60715 554.477 262.122 393.164 782.077 481.077C1302.03 568.99 1463.34 298.261 1266.02 -331.111" stroke="url(#paint17_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.3" d="M-50.1702 944.956C-15.2937 547.791 262.122 393.164 782.077 481.077C1302.03 568.99 1456.66 291.574 1245.96 -351.17" stroke="url(#paint18_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.37" d="M-70.23 924.897C-21.9804 541.104 262.122 393.164 782.077 481.077C1302.03 568.99 1449.97 284.887 1225.9 -371.23" stroke="url(#paint19_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.24" d="M-90.2897 904.837C-28.667 534.418 262.122 393.164 782.077 481.077C1302.03 568.99 1443.29 278.201 1205.84 -391.29" stroke="url(#paint20_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.64" d="M-110.349 884.778C-35.3533 527.731 262.122 393.164 782.077 481.077C1302.03 568.99 1436.6 271.514 1185.78 -411.349" stroke="url(#paint21_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.69" d="M-130.409 864.718C-42.04 521.044 262.122 393.164 782.077 481.077C1302.03 568.99 1429.91 264.828 1165.72 -431.409" stroke="url(#paint22_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.65" d="M-150.469 844.658C-48.7265 514.358 262.122 393.164 782.077 481.077C1302.03 568.99 1423.23 258.141 1145.66 -451.468" stroke="url(#paint23_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.13" d="M-170.528 824.599C-55.4129 507.672 262.122 393.164 782.077 481.077C1302.03 568.99 1416.54 251.455 1125.6 -471.528" stroke="url(#paint24_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.57" d="M-190.588 804.539C-62.0996 500.985 262.122 393.164 782.077 481.077C1302.03 568.99 1409.85 244.768 1105.54 -491.588" stroke="url(#paint25_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.19" d="M290.44 1285.57C97.9743 661.059 261.719 392.761 781.674 480.674C1301.63 568.587 1569.93 404.842 1586.57 -10.5597" stroke="url(#paint26_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.1" d="M270.381 1265.51C91.2878 654.372 261.719 392.761 781.674 480.674C1301.63 568.587 1563.24 398.155 1566.51 -30.6193" stroke="url(#paint27_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.4" d="M250.321 1245.45C84.6011 647.686 261.719 392.761 781.674 480.674C1301.63 568.586 1556.55 391.469 1546.45 -50.6791" stroke="url(#paint28_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.75" d="M230.261 1225.39C77.9145 640.999 261.719 392.761 781.674 480.674C1301.63 568.586 1549.87 384.782 1526.39 -70.7387" stroke="url(#paint29_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.27" d="M210.202 1205.33C71.228 634.313 261.719 392.761 781.674 480.674C1301.63 568.586 1543.18 378.096 1506.33 -90.7983" stroke="url(#paint30_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.95" d="M190.142 1185.27C64.5415 627.626 261.719 392.761 781.674 480.674C1301.63 568.586 1536.49 371.409 1486.27 -110.858" stroke="url(#paint31_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.3" d="M170.082 1165.21C57.8549 620.939 261.719 392.761 781.674 480.674C1301.63 568.586 1529.81 364.723 1466.21 -130.918" stroke="url(#paint32_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.12" d="M150.023 1145.15C51.1683 614.253 261.719 392.761 781.674 480.674C1301.63 568.586 1523.12 358.036 1446.15 -150.977" stroke="url(#paint33_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.92" d="M129.963 1125.09C44.4819 607.566 261.719 392.761 781.674 480.674C1301.63 568.586 1516.43 351.35 1426.09 -171.037" stroke="url(#paint34_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.41" d="M109.904 1105.03C37.7955 600.88 261.719 392.761 781.674 480.674C1301.63 568.587 1509.75 344.663 1406.03 -191.096" stroke="url(#paint35_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.37" d="M89.8438 1084.97C31.1088 594.193 261.719 392.761 781.674 480.674C1301.63 568.586 1503.06 337.976 1385.97 -211.156" stroke="url(#paint36_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.09" d="M69.7841 1064.91C24.4222 587.507 261.719 392.761 781.674 480.674C1301.63 568.586 1496.37 331.29 1365.91 -231.216" stroke="url(#paint37_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.11" d="M49.7246 1044.85C17.7358 580.82 261.719 392.761 781.674 480.674C1301.63 568.586 1489.69 324.603 1345.85 -251.275" stroke="url(#paint38_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.16" d="M29.6649 1024.79C11.0491 574.134 261.719 392.761 781.674 480.674C1301.63 568.586 1483 317.917 1325.79 -271.335" stroke="url(#paint39_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.64" d="M9.60537 1004.73C4.36266 567.447 261.719 392.761 781.674 480.674C1301.63 568.586 1476.31 311.23 1305.73 -291.395" stroke="url(#paint40_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.52" d="M-10.4544 984.672C-2.32398 560.761 261.719 392.761 781.674 480.674C1301.63 568.586 1469.63 304.544 1285.67 -311.454" stroke="url(#paint41_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.29" d="M-30.5138 964.613C-9.01035 554.074 261.719 392.761 781.674 480.674C1301.63 568.587 1462.94 297.857 1265.61 -331.514" stroke="url(#paint42_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.3" d="M-50.5734 944.553C-15.6969 547.388 261.719 392.761 781.674 480.674C1301.63 568.587 1456.26 291.171 1245.55 -351.573" stroke="url(#paint43_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.37" d="M-70.6332 924.494C-22.3836 540.701 261.719 392.761 781.674 480.674C1301.63 568.586 1449.57 284.484 1225.49 -371.633" stroke="url(#paint44_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.24" d="M-90.6929 904.434C-29.0702 534.014 261.719 392.761 781.674 480.674C1301.63 568.586 1442.88 277.798 1205.43 -391.693" stroke="url(#paint45_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.64" d="M-110.752 884.374C-35.7566 527.328 261.719 392.761 781.674 480.674C1301.63 568.586 1436.2 271.111 1185.37 -411.752" stroke="url(#paint46_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.69" d="M-130.812 864.315C-42.4432 520.641 261.719 392.761 781.674 480.674C1301.63 568.586 1429.51 264.425 1165.31 -431.812" stroke="url(#paint47_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.65" d="M-150.872 844.255C-49.1297 513.955 261.719 392.761 781.674 480.674C1301.63 568.586 1422.82 257.738 1145.25 -451.872" stroke="url(#paint48_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.13" d="M-170.931 824.195C-55.8161 507.268 261.719 392.761 781.674 480.674C1301.63 568.587 1416.14 251.052 1125.2 -471.931" stroke="url(#paint49_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+<path opacity="0.57" d="M-190.991 804.136C-62.5028 500.582 261.719 392.761 781.674 480.674C1301.63 568.587 1409.45 244.365 1105.14 -491.991" stroke="url(#paint50_linear_126_175)" stroke-width="2" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_126_175" x1="-39.7568" y1="548.446" x2="1833" y2="548.446" gradientUnits="userSpaceOnUse">
+<stop offset="0.00166626" stop-color="#B2B2B2" stop-opacity="0.248611"/>
+<stop offset="0.131666" stop-color="#C2C2C2" stop-opacity="0.403152"/>
+<stop offset="0.706666" stop-color="white"/>
+<stop offset="1" stop-color="#999999" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_126_175" x1="64745.9" y1="-63871.7" x2="111726" y2="-16891.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint2_linear_126_175" x1="64742.1" y1="-63875.4" x2="111382" y2="-17236" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_126_175" x1="64738.3" y1="-63879.3" x2="111088" y2="-17529.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_126_175" x1="64734.2" y1="-63883.3" x2="110842" y2="-17775.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint5_linear_126_175" x1="64730.1" y1="-63887.5" x2="110644" y2="-17973.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_126_175" x1="64725.7" y1="-63891.8" x2="110492" y2="-18125.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint7_linear_126_175" x1="64721.2" y1="-63896.4" x2="110384" y2="-18233.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint8_linear_126_175" x1="64716.4" y1="-63901.1" x2="110321" y2="-18296.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_126_175" x1="64711.5" y1="-63906.1" x2="110302" y2="-18315.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint10_linear_126_175" x1="64706.3" y1="-63911.2" x2="110327" y2="-18290.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint11_linear_126_175" x1="64700.9" y1="-63916.6" x2="110396" y2="-18221.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint12_linear_126_175" x1="64695.2" y1="-63922.3" x2="110510" y2="-18107.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint13_linear_126_175" x1="64689.3" y1="-63928.2" x2="110669" y2="-17949" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint14_linear_126_175" x1="64683.1" y1="-63934.5" x2="110873" y2="-17744.1" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint15_linear_126_175" x1="64676.5" y1="-63941" x2="111126" y2="-17491.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint16_linear_126_175" x1="64669.6" y1="-63947.9" x2="111427" y2="-17190.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint17_linear_126_175" x1="64662.4" y1="-63955.2" x2="111779" y2="-16838.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint18_linear_126_175" x1="64654.7" y1="-63962.8" x2="112184" y2="-16433.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint19_linear_126_175" x1="64646.6" y1="-63970.9" x2="112645" y2="-15972.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint20_linear_126_175" x1="64638" y1="-63979.5" x2="113165" y2="-15452.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint21_linear_126_175" x1="64628.9" y1="-63988.6" x2="113747" y2="-14870.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint22_linear_126_175" x1="64619.3" y1="-63998.3" x2="114396" y2="-14222" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint23_linear_126_175" x1="64609" y1="-64008.5" x2="115116" y2="-13501.9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint24_linear_126_175" x1="64598.1" y1="-64019.5" x2="115913" y2="-12704.9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint25_linear_126_175" x1="64586.4" y1="-64031.2" x2="116793" y2="-11824.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7D0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint26_linear_126_175" x1="64745.5" y1="-63872.1" x2="111725" y2="-16892.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint27_linear_126_175" x1="64741.7" y1="-63875.8" x2="111381" y2="-17236.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint28_linear_126_175" x1="64737.9" y1="-63879.7" x2="111087" y2="-17530.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint29_linear_126_175" x1="64733.8" y1="-63883.7" x2="110842" y2="-17775.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint30_linear_126_175" x1="64729.7" y1="-63887.9" x2="110644" y2="-17973.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint31_linear_126_175" x1="64725.3" y1="-63892.2" x2="110491" y2="-18126.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint32_linear_126_175" x1="64720.8" y1="-63896.8" x2="110384" y2="-18233.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint33_linear_126_175" x1="64716" y1="-63901.5" x2="110321" y2="-18296.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint34_linear_126_175" x1="64711.1" y1="-63906.5" x2="110302" y2="-18315.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint35_linear_126_175" x1="64705.9" y1="-63911.6" x2="110327" y2="-18290.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint36_linear_126_175" x1="64700.5" y1="-63917" x2="110396" y2="-18221.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint37_linear_126_175" x1="64694.8" y1="-63922.7" x2="110509" y2="-18108.1" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint38_linear_126_175" x1="64688.9" y1="-63928.6" x2="110668" y2="-17949.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint39_linear_126_175" x1="64682.7" y1="-63934.9" x2="110873" y2="-17744.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint40_linear_126_175" x1="64676.1" y1="-63941.4" x2="111125" y2="-17492.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint41_linear_126_175" x1="64669.2" y1="-63948.3" x2="111427" y2="-17191" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint42_linear_126_175" x1="64662" y1="-63955.6" x2="111779" y2="-16838.9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint43_linear_126_175" x1="64654.3" y1="-63963.3" x2="112184" y2="-16433.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint44_linear_126_175" x1="64646.2" y1="-63971.4" x2="112645" y2="-15972.9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint45_linear_126_175" x1="64637.6" y1="-63979.9" x2="113164" y2="-15453.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint46_linear_126_175" x1="64628.5" y1="-63989" x2="113746" y2="-14871.1" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint47_linear_126_175" x1="64618.9" y1="-63998.7" x2="114395" y2="-14222.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint48_linear_126_175" x1="64608.6" y1="-64008.9" x2="115115" y2="-13502.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint49_linear_126_175" x1="64597.7" y1="-64019.9" x2="115912" y2="-12705.4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+<linearGradient id="paint50_linear_126_175" x1="64586" y1="-64031.6" x2="116793" y2="-11825" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED6B0C"/>
+<stop offset="1" stop-color="#F44B2A"/>
+</linearGradient>
+</defs>
 </svg>
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index 05f6682df..1b25bccde 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -44,12 +44,19 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <section className="bg-neutral-900 bg-hero pt-24 xl:pt-32 pb-14">
-        <div className="flex flex-wrap mx-auto md:px-0 px-4 max-w-screen-md">
+      <section className="bg-neutral-900 bg-hero pt-28 xl:pt-32">
+        <div className="flex flex-col items-center mx-auto md:px-0 px-4 max-w-screen-md">
+          {/* <div className="absolute translate-y-16 justify-self-center self-center blur-[120px] bg-[rgba(94,82,239,0.5)] rounded-full w-[220px] h-[220px]" /> */}
+          {/* <button className="flex w-fit mb-2 gap-2 text-xs items-center p-1.5 text-neutral-500 font-manrope font-500 border-[1px] rounded-full border-neutral-900 hover:text-neutral-200 transition-all ">
+            <img src="/images/play-icon.svg" className="h-5 w-5" />
+            <Link href="/blog">
+              <p className="pe-4">Read our latest updates</p>
+            </Link>
+          </button> */}
           <h1
             className={
               manrope.className +
-              " mb-8 md:text-7xl text-4xl text-center shadow-inner font-medium tracking-tight leading-none text-neutral-300"
+              " mb-8 text-5xl sm:text-6xl md:text-7xl text-center drop-shadow-[inset_0_2px_0_0_rgba(255,255,255,100)] font-medium tracking-tight leading-none bg-gradient-to-b from-white from-70% to-slate-200 text-transparent bg-clip-text"
             }
           >
             Upgrade your VPN to zero-trust access
@@ -57,7 +64,7 @@ export default function Page() {
           <h3
             className={
               manrope.className +
-              " md:mt-0 my-4 text-xl text-center text-neutral-300"
+              " md:mt-0 my-4 text-xl text-center text-neutral-400"
             }
           >
             Firezone is a fast, flexible VPN replacement built on WireGuard®
@@ -84,7 +91,7 @@ export default function Page() {
             </div>
           </div>
         </div>
-        <div className="mt-16 max-w-screen-xl mx-auto">
+        <div className="pt-16 pb-8 max-w-screen-xl mx-auto">
           <div className="text-center text-sm mb-6 font-base text-neutral-600">
             Backed by{" "}
             <Image
@@ -103,9 +110,9 @@ export default function Page() {
       {/* TODO: ACLs for the rest of us */}
 
       {/* Feature section 1: Secure access to your most sensitive resources in minutes. */}
-      <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-white py-20 md:py-16">
+        <div className="sm:mx-auto px-16 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className=" tracking-tight font-bold inline-block">
             Supercharge your workforce in{" "}
             <span className="text-primary-450">minutes</span>.
           </h3>
@@ -180,9 +187,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 2: Achieve compliance in minutes, not weeks. */}
-      <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-white py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty  sm:text-center">
+          <h3 className=" tracking-tight font-bold inline-block">
             Achieve compliance{" "}
             <span className="text-primary-450">without </span>
             the headache.
@@ -216,9 +223,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 3: Add 2FA to WireGuard. */}
-      <section className="bg-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-neutral-50 py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className=" tracking-tight font-bold inline-block">
             Add <span className="text-primary-450">two-factor </span>
             auth to WireGuard.
           </h3>
@@ -255,9 +262,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 4: Say goodbye to bandwidth problems. */}
-      <section className="bg-neutral-900 text-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-neutral-900 text-neutral-50 py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className="tracking-tight font-bold inline-block">
             <Strike>Bandwidth problems.</Strike>
           </h3>
         </div>
@@ -286,9 +293,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 5: No more open firewall ports. */}
-      <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-white py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className="tracking-tight font-bold inline-block">
             Say <span className="text-primary-450">goodbye</span> to firewall
             configuration.
           </h3>
@@ -318,9 +325,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 6: Runs everywhere your business does. */}
-      <section className="bg-neutral-50 py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-neutral-50 py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className="tracking-tight font-bold inline-block">
             Runs <span className="text-primary-450">everywhere </span>
             your business does.
           </h3>
@@ -451,9 +458,9 @@ export default function Page() {
       </section>
 
       {/* Feature section 7: Open source for transparency and trust. */}
-      <section className="bg-white py-8 md:py-16">
-        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-center">
-          <h3 className="text-xl sm:text-2xl md:text-6xl tracking-tight font-bold inline-block">
+      <section className="bg-white py-20 md:py-16">
+        <div className="sm:mx-auto px-4 mb-4 md:mb-8 sm:text-4xl md:text-6xl text-pretty sm:text-center">
+          <h3 className="tracking-tight font-bold inline-block">
             <span className="text-primary-450">Open source</span> for
             transparency and trust.
           </h3>
@@ -494,7 +501,7 @@ export default function Page() {
       </section>
 
       {/* Use cases */}
-      <section className="border-t border-neutral-200 py-8 md:py-16 bg-neutral-100">
+      <section className="border-t border-neutral-200 py-20 md:py-16 bg-neutral-100">
         <div className="mx-auto max-w-screen-lg">
           <div className="px-4 flex flex-wrap">
             <h3 className="mb-2 text-2xl md:text-4xl tracking-tight font-bold mr-1">
@@ -517,7 +524,7 @@ export default function Page() {
               />
             </h3>
           </div>
-          <div className="px-4 flex flex-wrap mt-8">
+          <div className="px-4 flex flex-wrap mt-4">
             <h3 className="mb-2 text-xl md:text-2xl tracking-tight font-semibold">
               Here are just a few ways customers are using Firezone:
             </h3>
diff --git a/website/src/components/CustomerLogos/index.tsx b/website/src/components/CustomerLogos/index.tsx
index 0882cf943..2cbb539fa 100644
--- a/website/src/components/CustomerLogos/index.tsx
+++ b/website/src/components/CustomerLogos/index.tsx
@@ -4,83 +4,90 @@ import Marquee from "react-fast-marquee";
 
 export function CustomerLogosGrayscale() {
   return (
-    <div className="mx-8 grid grid-cols-3 md:grid-cols-7 gap-8">
-      <div className="content-center">
-        <Link href="https://corrdyn.com">
-          <Image
-            alt="corrdyn logo"
-            src="/images/cust-logo-corrdyn-gray.svg"
-            width={125}
-            height={125}
-            className="opacity-75 md:opacity-25 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center">
-        <Link href="https://square1.io">
-          <Image
-            alt="square1 logo"
-            src="/images/cust-logo-square1-gray.svg"
-            width={100}
-            height={100}
-            className="opacity-75 md:opacity-50 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center">
-        <Link href="https://bunq.com">
-          <Image
-            alt="bunq logo"
-            src="/images/cust-logo-bunq-gray.svg"
-            width={100}
-            height={100}
-            className="opacity-75 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center">
-        <Link href="https://wolfram.com">
-          <Image
-            alt="wolfram logo"
-            src="/images/cust-logo-wolfram-gray.svg"
-            width={75}
-            height={75}
-            className="opacity-75 md:opacity-100 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center">
-        <Link href="https://sebgroup.com">
-          <Image
-            alt="seb logo"
-            src="/images/cust-logo-seb-gray.svg"
-            width={75}
-            height={75}
-            className="opacity-75 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center">
-        <Link href="https://teracloud.com">
-          <Image
-            alt="teracloud logo"
-            src="/images/cust-logo-teracloud-gray.svg"
-            width={125}
-            height={125}
-            className="opacity-75 md:opacity-50 mx-auto"
-          />
-        </Link>
-      </div>
-      <div className="content-center col-start-2 md:col-auto">
-        <Link href="https://double11.co.uk">
-          <Image
-            alt="double11 logo"
-            src="/images/cust-logo-double11-gray.svg"
-            width={70}
-            height={70}
-            className="opacity-75 md:opacity-25 mx-auto"
-          />
-        </Link>
+    <div
+      style={{
+        maskImage:
+          "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 35%, rgb(0, 0, 0) 65%, rgba(0, 0, 0, 0) 100%)",
+      }}
+    >
+      <div className="mx-8 grid grid-cols-3 md:grid-cols-7 gap-8">
+        <div className="content-center">
+          <Link href="https://corrdyn.com">
+            <Image
+              alt="corrdyn logo"
+              src="/images/logos/cust-logo-corrdyn-gray.svg"
+              width={125}
+              height={125}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center">
+          <Link href="https://square1.io">
+            <Image
+              alt="square1 logo"
+              src="/images/logos/cust-logo-square1-gray.svg"
+              width={100}
+              height={100}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center">
+          <Link href="https://bunq.com">
+            <Image
+              alt="bunq logo"
+              src="/images/logos/cust-logo-bunq-gray.svg"
+              width={100}
+              height={100}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center">
+          <Link href="https://wolfram.com">
+            <Image
+              alt="wolfram logo"
+              src="/images/logos/cust-logo-wolfram-gray.svg"
+              width={75}
+              height={75}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center">
+          <Link href="https://sebgroup.com">
+            <Image
+              alt="seb logo"
+              src="/images/logos/cust-logo-seb-gray.svg"
+              width={75}
+              height={75}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center">
+          <Link href="https://teracloud.com">
+            <Image
+              alt="teracloud logo"
+              src="/images/logos/cust-logo-teracloud-gray.svg"
+              width={125}
+              height={125}
+              className="  mx-auto"
+            />
+          </Link>
+        </div>
+        <div className="content-center col-start-2 md:col-auto">
+          <Link href="https://double11.co.uk">
+            <Image
+              alt="double11 logo"
+              src="/images/logos/cust-logo-double11-gray.svg"
+              width={70}
+              height={70}
+              className=" mx-auto"
+            />
+          </Link>
+        </div>
       </div>
     </div>
   );
@@ -99,7 +106,7 @@ export function CustomerLogosColored() {
         <Link href="https://bunq.com" className="mx-12 flex items-center">
           <Image
             alt="bunq logo"
-            src="/images/cust-logo-bunq.svg"
+            src="/images/logos/cust-logo-bunq.svg"
             width={150}
             height={150}
           />
@@ -110,7 +117,7 @@ export function CustomerLogosColored() {
         >
           <Image
             alt="caktus logo"
-            src="/images/cust-logo-caktus.png"
+            src="/images/logos/cust-logo-caktus.png"
             width={150}
             height={150}
           />
@@ -118,7 +125,7 @@ export function CustomerLogosColored() {
         <Link href="https://corrdyn.com" className="mx-12 flex items-center">
           <Image
             alt="corrdyn logo"
-            src="/images/cust-logo-corrdyn.svg"
+            src="/images/logos/cust-logo-corrdyn.svg"
             width={150}
             height={150}
           />
@@ -126,7 +133,7 @@ export function CustomerLogosColored() {
         <Link href="https://double11.co.uk" className="mx-12 flex items-center">
           <Image
             alt="double11 logo"
-            src="/images/cust-logo-double11.svg"
+            src="/images/logos/cust-logo-double11.svg"
             width={150}
             height={150}
           />
@@ -134,7 +141,7 @@ export function CustomerLogosColored() {
         <Link href="https://ipap.com" className="mx-12 flex items-center">
           <Image
             alt="ipap logo"
-            src="/images/cust-logo-ipap.png"
+            src="/images/logos/cust-logo-ipap.png"
             width={150}
             height={150}
           />
@@ -142,7 +149,7 @@ export function CustomerLogosColored() {
         <Link href="https://mst.nl" className="mx-12 flex items-center">
           <Image
             alt="mst logo"
-            src="/images/cust-logo-mst.svg"
+            src="/images/logos/cust-logo-mst.svg"
             width={150}
             height={150}
           />
@@ -150,7 +157,7 @@ export function CustomerLogosColored() {
         <Link href="https://nomobo.tv" className="mx-12 flex items-center">
           <Image
             alt="nomobo logo"
-            src="/images/cust-logo-nomobo.webp"
+            src="/images/logos/cust-logo-nomobo.webp"
             width={150}
             height={150}
           />
@@ -158,7 +165,7 @@ export function CustomerLogosColored() {
         <Link href="https://sebgroup.com" className="mx-12 flex items-center">
           <Image
             alt="seb logo"
-            src="/images/cust-logo-seb.svg"
+            src="/images/logos/cust-logo-seb.svg"
             width={150}
             height={150}
           />
@@ -166,7 +173,7 @@ export function CustomerLogosColored() {
         <Link href="https://semicat.com" className="mx-12 flex items-center">
           <Image
             alt="semicat logo"
-            src="/images/cust-logo-semicat.png"
+            src="/images/logos/cust-logo-semicat.png"
             width={150}
             height={150}
           />
@@ -177,7 +184,7 @@ export function CustomerLogosColored() {
         >
           <Image
             alt="square1 logo"
-            src="/images/cust-logo-square1.svg"
+            src="/images/logos/cust-logo-square1.svg"
             width={150}
             height={150}
           />
@@ -185,7 +192,7 @@ export function CustomerLogosColored() {
         <Link href="https://teracloud.com" className="mx-12 flex items-center">
           <Image
             alt="teracloud logo"
-            src="/images/cust-logo-teracloud.svg"
+            src="/images/logos/cust-logo-teracloud.svg"
             width={150}
             height={150}
           />
@@ -193,7 +200,7 @@ export function CustomerLogosColored() {
         <Link href="https://wolfram.com" className="mx-12 flex items-center">
           <Image
             alt="wolfram logo"
-            src="/images/cust-logo-wolfram.svg"
+            src="/images/logos/cust-logo-wolfram.svg"
             width={150}
             height={150}
           />
diff --git a/website/src/components/Footer/index.tsx b/website/src/components/Footer/index.tsx
index f0358ab92..baf747bb5 100644
--- a/website/src/components/Footer/index.tsx
+++ b/website/src/components/Footer/index.tsx
@@ -17,26 +17,68 @@ import {
 
 export default function Footer() {
   return (
-    <footer className="pt-12 relative bg-neutral-900 text-neutral-500">
+    <footer className="relative bg-neutral-900 p-16 text-neutral-500">
+      <div className="flex flex-col justify-center items-center text-center">
+        <h3 className="text-neutral-200 mb-4 text-4xl md:text-6xl text-pretty tracking-tight justify-center font-semibold">
+          Ready to get started?
+        </h3>
+        <h4 className="text-neutral-200 text-md tracking-tight">
+          Give your organization the protection it deserves.
+        </h4>
+        <div className="flex justify-center items-end w-fit gap-4 mt-8">
+          <div className="mx-auto">
+            <button
+              type="button"
+              className="text-sm w-48 inline-flex shadow-lg justify-center items-center py-2 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-500 duration-50 transform transition"
+            >
+              <Link href="/contact/sales">Book a demo</Link>
+              <HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
+            </button>
+            <p className="mt-3 text-xs text-neutral-400">
+              Get a personalized walkthrough of Firezone.
+            </p>
+          </div>
+          <div className="mx-auto">
+            <button
+              type="button"
+              className="group text-sm w-48 inline-flex justify-center items-center py-2 px-5 font-semibold text-center text-white rounded hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
+            >
+              <Link
+                href="https://app.firezone.dev/sign_up"
+                className="text-neutral-300 group inline-flex items-center py-0.5 text-sm font-semibold border-b-[1px] border-neutral-200 hover:border-primary-450 hover:text-primary-450 transition transform duration-50"
+              >
+                Try Firezone for free
+                <HiArrowLongRight className="group-hover:translate-x-1 group-hover:scale-110 duration-50 transition transform ml-2 -mr-1 w-5 h-5" />
+              </Link>
+            </button>
+            <p className="mt-3 text-xs text-neutral-400">
+              No credit card required. Cancel anytime.
+            </p>
+          </div>
+        </div>
+      </div>
       <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
-        <div className="grid md:grid-cols-3 gap-12">
+        <div className="flex justify-between gap-12">
           <div className="flex md:flex-col justify-between">
-            <Link href="/">
-              <Image
-                width={150}
-                height={150}
-                src="/images/logo-text-dark.svg"
-                alt="Firezone Logo"
-              />
-            </Link>
-            <Link href="https://www.ycombinator.com/companies/firezone">
-              <Image
-                width={125}
-                height={125}
-                src="/images/yc-logo.svg"
-                alt="YC Logo"
-              />
-            </Link>
+            <div className="">
+              <Link href="/">
+                <Image
+                  width={150}
+                  height={150}
+                  src="/images/logo-text-dark.svg"
+                  alt="Firezone Logo"
+                  className="mb-4"
+                />
+              </Link>
+              <Link href="https://www.ycombinator.com/companies/firezone">
+                <Image
+                  width={125}
+                  height={125}
+                  src="/images/yc-logo.svg"
+                  alt="YC Logo"
+                />
+              </Link>
+            </div>
             <Link href="https://trust.firezone.dev">
               <Image
                 alt="SOC2 badge"
@@ -46,42 +88,7 @@ export default function Footer() {
               />
             </Link>
           </div>
-          <div className="flex flex-col justify-center text-center">
-            <h3 className="text-neutral-200 mb-4 text-3xl md:text-4xl tracking-tight justify-center font-semibold">
-              Ready to get started?
-            </h3>
-            <h4 className="text-neutral-200 text-md tracking-tight justify-center">
-              Give your organization the protection it deserves.
-            </h4>
-            <div className="w-full flex flex-wrap justify-between mt-8">
-              <div className="mb-8 mx-auto">
-                <button
-                  type="button"
-                  className="text-md w-48 inline-flex justify-center items-center py-3 px-5 font-semibold text-center text-primary-450 rounded border border-primary-450 bg-neutral-100 hover:ring-2 hover:ring-primary-400 duration-50 transform transition"
-                >
-                  <Link href="https://app.firezone.dev/sign_up">
-                    Sign up now
-                  </Link>
-                </button>
-                <p className="mt-3 text-xs text-neutral-400">
-                  No credit card required. Cancel anytime.
-                </p>
-              </div>
-              <div className="mx-auto">
-                <button
-                  type="button"
-                  className="text-md w-48 inline-flex shadow-lg justify-center items-center py-3 px-5 font-semibold text-center text-white rounded bg-primary-450 hover:ring-2 hover:ring-primary-500 duration-50 transform transition"
-                >
-                  <Link href="/contact/sales">Book a demo</Link>
-                  <HiArrowLongRight className="ml-2 -mr-1 w-6 h-6" />
-                </button>
-                <p className="mt-3 text-xs text-neutral-400">
-                  Get a personalized walkthrough of Firezone.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="text-sm grid grid-cols-2 content-end md:text-right">
+          <div className="text-sm w-1/3 grid grid-cols-2 content-end md:text-right">
             <div>
               <h2 className="mb-6 font-semibold uppercase md:justify-end">
                 Company