From 027fe678cb61dd172a435e9a44996f586aaa137b Mon Sep 17 00:00:00 2001
From: Patti <139997703+Patticatti@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:04:16 -0700
Subject: [PATCH] fix(website): Animate sliding customer logos, fix action link
 styling (#6309)

Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>
---
 .../images/logos/cust-logo-double11-gray.svg  |  35 ++-
 website/src/app/globals.css                   |   9 +
 website/src/app/page.tsx                      |  14 +-
 website/src/components/ActionLink/index.tsx   |   9 +-
 .../src/components/CustomerLogos/index.tsx    | 248 ++++++++++++------
 .../components/CustomerTestimonials/index.tsx |   2 +-
 6 files changed, 203 insertions(+), 114 deletions(-)

diff --git a/website/public/images/logos/cust-logo-double11-gray.svg b/website/public/images/logos/cust-logo-double11-gray.svg
index b31a4e2d7..52116c839 100644
--- a/website/public/images/logos/cust-logo-double11-gray.svg
+++ b/website/public/images/logos/cust-logo-double11-gray.svg
@@ -1,22 +1,17 @@
 <svg width="1068" height="1183" viewBox="0 0 1068 1183" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1310_842)">
-<path d="M0.62207 767.843H54.0692C92.6119 767.843 121.646 774.267 141.432 789.172C161.99 804.589 173.295 829.769 173.295 861.117C173.295 888.869 164.558 911.995 146.829 928.183C128.328 944.885 99.8069 953.878 55.0969 953.878H0.62207V767.843ZM55.6098 909.168C89.271 909.168 102.89 902.488 110.856 892.98C117.792 884.501 120.362 873.195 120.362 861.117C120.362 843.645 114.966 831.055 104.432 823.089C93.1249 814.61 76.1669 812.553 55.3533 812.553H53.5546V909.168H55.6098Z" fill="#F8F7F7"/>
-<path d="M290.99 765.017C347.005 765.017 390.431 807.157 390.431 860.861C390.431 914.565 347.005 956.705 290.99 956.705C234.974 956.705 191.549 914.565 191.549 860.861C191.549 807.157 234.974 765.017 290.99 765.017ZM290.99 909.168C317.2 909.168 337.498 887.842 337.498 860.861C337.498 833.882 317.2 812.553 290.99 812.553C264.78 812.553 244.481 833.882 244.481 860.861C244.481 887.842 264.78 909.168 290.99 909.168Z" fill="#F8F7F7"/>
-<path d="M586.497 865.744C586.497 894.007 581.101 913.537 570.823 927.156C556.946 945.656 531.509 956.705 500.418 956.705C469.84 956.705 443.117 946.17 428.984 926.384C419.221 912.766 414.337 892.98 414.337 865.744V767.843H467.27V862.66C467.27 880.647 469.327 891.181 474.465 898.376C479.605 905.571 488.598 910.71 501.446 910.71C513.008 910.71 521.488 906.599 526.884 899.918C532.794 892.723 535.62 880.903 535.62 862.66V767.843H586.497V865.744Z" fill="#F8F7F7"/>
-<path d="M616.826 767.843H674.383C703.932 767.843 722.176 771.184 735.024 778.379C748.386 785.831 757.38 797.907 757.38 814.61C757.38 832.083 747.358 843.388 729.115 850.327V850.84C755.066 859.577 765.087 876.022 765.087 896.577C765.087 918.162 754.039 934.863 732.712 944.372C718.579 950.795 699.822 953.878 677.21 953.878H616.826V767.843ZM681.064 842.104C696.996 842.104 704.447 837.221 704.447 825.916C704.447 820.005 702.392 815.638 696.739 812.812C692.884 810.755 686.974 809.985 675.926 809.985H669.758V842.104H681.064ZM677.466 911.738C692.627 911.738 700.335 910.452 704.703 908.141C709.843 905.314 712.155 900.689 712.155 894.007C712.155 881.418 703.419 876.022 686.46 876.022H669.758V911.738H677.466Z" fill="#F8F7F7"/>
-<path d="M786.677 767.843H839.61V909.168H917.21V953.878H786.677V767.843Z" fill="#F8F7F7"/>
-<path d="M943.17 767.843H1064.45V812.553H996.102V836.193H1053.92V878.333H996.102V909.168H1067.54V953.878H943.17V767.843Z" fill="#F8F7F7"/>
-<path d="M35.8291 996.236H157.111V1040.95H88.7616V1064.59H146.575V1106.73H88.7616V1137.56H160.194V1182.27H35.8291V996.236Z" fill="#F8F7F7"/>
-<path d="M191.549 996.236H244.481V1137.56H322.081V1182.27H191.549V996.236Z" fill="#F8F7F7"/>
-<path d="M348.041 996.236H469.323V1040.95H400.974V1064.59H458.788V1106.73H400.974V1137.56H472.406V1182.27H348.041V996.236Z" fill="#F8F7F7"/>
-<path d="M487.314 996.236H544.101L569.796 1068.95C575.192 1084.37 580.332 1099.28 585.213 1114.18H585.728C590.866 1099.02 596.52 1083.09 601.915 1068.44L628.381 996.236H682.856L611.679 1182.27H558.49L487.314 996.236Z" fill="#F8F7F7"/>
-<path d="M698.283 996.236H819.566V1040.95H751.216V1064.59H809.03V1106.73H751.216V1137.56H822.648V1182.27H698.283V996.236Z" fill="#F8F7F7"/>
-<path d="M933.402 1114.95C923.124 1101.07 914.13 1088.48 904.88 1075.12L904.366 1075.38C904.622 1091.05 904.88 1106.98 904.88 1122.66V1182.27H854.003V996.236H903.595L952.93 1063.56C963.209 1077.43 972.201 1090.02 981.453 1103.39L981.966 1103.13C981.709 1087.46 981.453 1071.52 981.453 1055.85V996.236H1032.33V1182.27H982.737L933.402 1114.95Z" fill="#F8F7F7"/>
-<path d="M854.474 149.363H833.223C759.855 149.363 683.587 1.16919 504.546 1.16919C338.99 1.16919 280.395 110.419 213.469 142.66C185.681 156.045 179.716 187.334 192.991 207.882C221.446 262.202 294.853 390.533 260.794 563.073L255.053 584.862C250.724 601.291 260.533 618.118 276.962 622.447L312.861 631.906C329.29 636.235 346.117 626.426 350.446 609.997L359.222 576.69C359.284 576.454 359.314 576.218 359.371 575.981C369.131 540.154 380.547 464.23 360.688 365.985H360.704C360.688 365.894 360.673 365.803 360.673 365.708C360.673 364.893 361.334 364.232 362.149 364.232C362.435 364.232 362.705 364.318 362.934 364.456C455.26 435.51 464.257 640.586 671.035 640.586C757.999 640.586 818.352 581.973 818.352 510.406C818.352 443.407 769.156 390.322 693.721 390.322C691.631 390.322 689.612 390.368 687.627 390.436C687.096 390.454 686.561 390.469 686.036 390.49C684.413 390.561 682.826 390.654 681.273 390.767C680.257 390.839 679.262 390.924 678.273 391.013C677.953 391.043 677.642 391.076 677.326 391.108C667.36 392.069 658.754 393.887 651.366 396.342C639.513 400.158 631.072 405.161 624.885 409.461C623.759 410.195 622.645 410.96 621.559 411.789L618.107 414.421L607.85 422.244C595.582 431.603 593.222 449.134 602.58 461.403L629.109 496.184C638.467 508.452 655.999 510.812 668.268 501.454C676.733 494.997 682.567 490.882 689.396 489.099C690.07 488.932 690.762 488.79 691.461 488.659C691.887 488.58 692.314 488.5 692.751 488.438C693.3 488.356 693.858 488.289 694.425 488.234C695.487 488.138 696.561 488.06 697.708 488.06C706.291 488.06 721.013 495.857 721.013 510.406C721.013 529.256 705.065 543.54 671.035 543.54C575.055 543.54 556.402 466.546 506.952 386.06C619.636 382.617 687.508 338.934 715.885 320.742C717.896 319.692 719.861 318.5 721.759 317.14L722.996 316.254C723.145 316.163 723.315 316.056 723.46 315.969C725.947 314.47 728.175 312.843 730.173 311.113L737.775 305.667C749.537 297.242 752.241 280.877 743.815 269.116L717.578 232.491C709.153 220.73 692.788 218.026 681.028 226.451L671.671 233.153C670.976 233.54 670.35 233.95 669.803 234.381C669.269 234.802 668.527 235.375 667.608 236.064L665.011 237.924C664.728 238.127 664.458 238.343 664.18 238.551C644.849 252.204 584.377 288.876 491.525 288.876C447.726 288.876 412.188 278.976 383.48 264.543C380.522 262.908 377.511 261.296 374.431 259.711C345.115 243.19 323.563 222.099 308.049 203.031C305.153 199.472 305.701 194.246 309.232 191.317C333.85 170.908 362.234 147.035 395.535 128.617C395.063 132.749 394.796 136.942 394.796 141.199C394.796 201.813 443.932 250.949 504.546 250.949C565.159 250.949 614.296 201.813 614.296 141.199C614.296 137.293 614.084 133.436 613.686 129.635C687.377 172.653 739.895 245.269 830.498 246.714C831.347 246.758 832.2 246.782 833.059 246.782H854.474C869.639 246.782 881.933 234.488 881.933 219.323V176.822C881.933 161.657 869.639 149.363 854.474 149.363Z" fill="#F8F7F7"/>
-</g>
-<defs>
-<clipPath id="clip0_1310_842">
-<rect width="1068" height="1182" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
+    <g clip-path="url(#clip0_1310_842)">
+        <path d="M0.62207 767.843H54.0692C92.6119 767.843 121.646 774.267 141.432 789.172C161.99 804.589 173.295 829.769 173.295 861.117C173.295 888.869 164.558 911.995 146.829 928.183C128.328 944.885 99.8069 953.878 55.0969 953.878H0.62207V767.843ZM55.6098 909.168C89.271 909.168 102.89 902.488 110.856 892.98C117.792 884.501 120.362 873.195 120.362 861.117C120.362 843.645 114.966 831.055 104.432 823.089C93.1249 814.61 76.1669 812.553 55.3533 812.553H53.5546V909.168H55.6098Z" fill="#F8F7F7"/>
+        <path d="M290.99 765.017C347.005 765.017 390.431 807.157 390.431 860.861C390.431 914.565 347.005 956.705 290.99 956.705C234.974 956.705 191.549 914.565 191.549 860.861C191.549 807.157 234.974 765.017 290.99 765.017ZM290.99 909.168C317.2 909.168 337.498 887.842 337.498 860.861C337.498 833.882 317.2 812.553 290.99 812.553C264.78 812.553 244.481 833.882 244.481 860.861C244.481 887.842 264.78 909.168 290.99 909.168Z" fill="#F8F7F7"/>
+        <path d="M586.497 865.744C586.497 894.007 581.101 913.537 570.823 927.156C556.946 945.656 531.509 956.705 500.418 956.705C469.84 956.705 443.117 946.17 428.984 926.384C419.221 912.766 414.337 892.98 414.337 865.744V767.843H467.27V862.66C467.27 880.647 469.327 891.181 474.465 898.376C479.605 905.571 488.598 910.71 501.446 910.71C513.008 910.71 521.488 906.599 526.884 899.918C532.794 892.723 535.62 880.903 535.62 862.66V767.843H586.497V865.744Z" fill="#F8F7F7"/>
+        <path d="M616.826 767.843H674.383C703.932 767.843 722.176 771.184 735.024 778.379C748.386 785.831 757.38 797.907 757.38 814.61C757.38 832.083 747.358 843.388 729.115 850.327V850.84C755.066 859.577 765.087 876.022 765.087 896.577C765.087 918.162 754.039 934.863 732.712 944.372C718.579 950.795 699.822 953.878 677.21 953.878H616.826V767.843ZM681.064 842.104C696.996 842.104 704.447 837.221 704.447 825.916C704.447 820.005 702.392 815.638 696.739 812.812C692.884 810.755 686.974 809.985 675.926 809.985H669.758V842.104H681.064ZM677.466 911.738C692.627 911.738 700.335 910.452 704.703 908.141C709.843 905.314 712.155 900.689 712.155 894.007C712.155 881.418 703.419 876.022 686.46 876.022H669.758V911.738H677.466Z" fill="#F8F7F7"/>
+        <path d="M786.677 767.843H839.61V909.168H917.21V953.878H786.677V767.843Z" fill="#F8F7F7"/>
+        <path d="M943.17 767.843H1064.45V812.553H996.102V836.193H1053.92V878.333H996.102V909.168H1067.54V953.878H943.17V767.843Z" fill="#F8F7F7"/>
+        <path d="M35.8291 996.236H157.111V1040.95H88.7616V1064.59H146.575V1106.73H88.7616V1137.56H160.194V1182.27H35.8291V996.236Z" fill="#F8F7F7"/>
+        <path d="M191.549 996.236H244.481V1137.56H322.081V1182.27H191.549V996.236Z" fill="#F8F7F7"/>
+        <path d="M348.041 996.236H469.323V1040.95H400.974V1064.59H458.788V1106.73H400.974V1137.56H472.406V1182.27H348.041V996.236Z" fill="#F8F7F7"/>
+        <path d="M487.314 996.236H544.101L569.796 1068.95C575.192 1084.37 580.332 1099.28 585.213 1114.18H585.728C590.866 1099.02 596.52 1083.09 601.915 1068.44L628.381 996.236H682.856L611.679 1182.27H558.49L487.314 996.236Z" fill="#F8F7F7"/>
+        <path d="M698.283 996.236H819.566V1040.95H751.216V1064.59H809.03V1106.73H751.216V1137.56H822.648V1182.27H698.283V996.236Z" fill="#F8F7F7"/>
+        <path d="M933.402 1114.95C923.124 1101.07 914.13 1088.48 904.88 1075.12L904.366 1075.38C904.622 1091.05 904.88 1106.98 904.88 1122.66V1182.27H854.003V996.236H903.595L952.93 1063.56C963.209 1077.43 972.201 1090.02 981.453 1103.39L981.966 1103.13C981.709 1087.46 981.453 1071.52 981.453 1055.85V996.236H1032.33V1182.27H982.737L933.402 1114.95Z" fill="#F8F7F7"/>
+        <path d="M854.474 149.363H833.223C759.855 149.363 683.587 1.16919 504.546 1.16919C338.99 1.16919 280.395 110.419 213.469 142.66C185.681 156.045 179.716 187.334 192.991 207.882C221.446 262.202 294.853 390.533 260.794 563.073L255.053 584.862C250.724 601.291 260.533 618.118 276.962 622.447L312.861 631.906C329.29 636.235 346.117 626.426 350.446 609.997L359.222 576.69C359.284 576.454 359.314 576.218 359.371 575.981C369.131 540.154 380.547 464.23 360.688 365.985H360.704C360.688 365.894 360.673 365.803 360.673 365.708C360.673 364.893 361.334 364.232 362.149 364.232C362.435 364.232 362.705 364.318 362.934 364.456C455.26 435.51 464.257 640.586 671.035 640.586C757.999 640.586 818.352 581.973 818.352 510.406C818.352 443.407 769.156 390.322 693.721 390.322C691.631 390.322 689.612 390.368 687.627 390.436C687.096 390.454 686.561 390.469 686.036 390.49C684.413 390.561 682.826 390.654 681.273 390.767C680.257 390.839 679.262 390.924 678.273 391.013C677.953 391.043 677.642 391.076 677.326 391.108C667.36 392.069 658.754 393.887 651.366 396.342C639.513 400.158 631.072 405.161 624.885 409.461C623.759 410.195 622.645 410.96 621.559 411.789L618.107 414.421L607.85 422.244C595.582 431.603 593.222 449.134 602.58 461.403L629.109 496.184C638.467 508.452 655.999 510.812 668.268 501.454C676.733 494.997 682.567 490.882 689.396 489.099C690.07 488.932 690.762 488.79 691.461 488.659C691.887 488.58 692.314 488.5 692.751 488.438C693.3 488.356 693.858 488.289 694.425 488.234C695.487 488.138 696.561 488.06 697.708 488.06C706.291 488.06 721.013 495.857 721.013 510.406C721.013 529.256 705.065 543.54 671.035 543.54C575.055 543.54 556.402 466.546 506.952 386.06C619.636 382.617 687.508 338.934 715.885 320.742C717.896 319.692 719.861 318.5 721.759 317.14L722.996 316.254C723.145 316.163 723.315 316.056 723.46 315.969C725.947 314.47 728.175 312.843 730.173 311.113L737.775 305.667C749.537 297.242 752.241 280.877 743.815 269.116L717.578 232.491C709.153 220.73 692.788 218.026 681.028 226.451L671.671 233.153C670.976 233.54 670.35 233.95 669.803 234.381C669.269 234.802 668.527 235.375 667.608 236.064L665.011 237.924C664.728 238.127 664.458 238.343 664.18 238.551C644.849 252.204 584.377 288.876 491.525 288.876C447.726 288.876 412.188 278.976 383.48 264.543C380.522 262.908 377.511 261.296 374.431 259.711C345.115 243.19 323.563 222.099 308.049 203.031C305.153 199.472 305.701 194.246 309.232 191.317C333.85 170.908 362.234 147.035 395.535 128.617C395.063 132.749 394.796 136.942 394.796 141.199C394.796 201.813 443.932 250.949 504.546 250.949C565.159 250.949 614.296 201.813 614.296 141.199C614.296 137.293 614.084 133.436 613.686 129.635C687.377 172.653 739.895 245.269 830.498 246.714C831.347 246.758 832.2 246.782 833.059 246.782H854.474C869.639 246.782 881.933 234.488 881.933 219.323V176.822C881.933 161.657 869.639 149.363 854.474 149.363Z" fill="#F8F7F7"/>
+    </g>
 </svg>
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index 78bbd3bc5..8ae355d58 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -82,4 +82,13 @@
   .dark-scroll::-ms-scrollbar-button {
     display: none;
   }
+
+  @keyframes slide {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
 }
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index c83faa89e..7309b142f 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <section className="bg-neutral-950 bg-hero pt-28 mb-16 xl:pt-32">
+      <section className="bg-neutral-950 bg-hero pt-28 mb-16">
         <div className="flex flex-col items-center mx-auto md:px-0 px-4 max-w-screen-md">
           <h1
             className={
@@ -55,21 +55,17 @@ export default function Page() {
           >
             Upgrade your VPN to zero-trust access
           </h1>
-          <h3
-            className={
-              manrope.className + "my-4 text-xl text-center text-neutral-400"
-            }
-          >
+          <h3 className={"text-xl text-center text-neutral-400"}>
             Firezone is a fast, flexible VPN replacement built on WireGuard®
             that protects your most valuable resources without tedious
             configuration.
           </h3>
-          <div className="flex sm:flex-row flex-col-reverse items-center justify-center sm:gap-x-6 md:gap-x-12 mt-4 w-full">
+          <div className="flex sm:flex-row flex-col-reverse items-center justify-center sm:gap-x-6 md:gap-x-12 mt-10 w-full">
             <div className="flex items-center my-4 mr-4">
               <ActionLink
                 size="lg"
                 href="https://app.firezone.dev/sign_up"
-                color="white"
+                color="neutral-100"
                 transitionColor="primary-450"
               >
                 Get started for free
@@ -86,7 +82,7 @@ export default function Page() {
             </div>
           </div>
         </div>
-        <div className="pt-16 pb-8 max-w-screen-xl mx-auto">
+        <div className="pt-16 pb-4 max-w-screen-xl mx-auto">
           <div className="text-center text-sm mb-6 font-base text-neutral-600">
             Backed by{" "}
             <Image
diff --git a/website/src/components/ActionLink/index.tsx b/website/src/components/ActionLink/index.tsx
index 2c2f64213..a3a26e2c9 100644
--- a/website/src/components/ActionLink/index.tsx
+++ b/website/src/components/ActionLink/index.tsx
@@ -47,14 +47,17 @@ export default function ActionLink({
     ${Size[size].link}
     ${border && `${Size[size].border} border-current`}
     ${(transitionColor && `hover:text-${transitionColor}`) || ""}
-    ${(border && transitionColor && `hover:border-${transitionColor}`) || ""}
+    ${
+      border && transitionColor ? `hover:border-${transitionColor}` : ""
+    } duration-50
+    transform transition
   `;
 
   const iconClasses = `
-    group-hover:translate-x-1 group-hover:scale-110 duration-100 transform
+    group-hover:translate-x-1 group-hover:scale-110 duration-100
     transition
-    ${Size[size].icon}
     ${(transitionColor && `group-hover:text-${transitionColor}`) || ""}
+    ${Size[size].icon}
   `;
 
   return (
diff --git a/website/src/components/CustomerLogos/index.tsx b/website/src/components/CustomerLogos/index.tsx
index a2e2aecaf..18c534e41 100644
--- a/website/src/components/CustomerLogos/index.tsx
+++ b/website/src/components/CustomerLogos/index.tsx
@@ -4,85 +4,171 @@ import Marquee from "react-fast-marquee";
 
 export function CustomerLogosGrayscale() {
   return (
-    <div className="fade-side">
-      <div className="mx-8 grid grid-cols-3 md:grid-cols-7 gap-4">
-        <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 hidden md:block">
-          <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 className="fade-side inline-block overflow-hidden whitespace-nowrap mx-auto">
+      <div
+        className="inline-flex w-fit"
+        style={{ animation: "14s slide infinite linear" }}
+      >
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://corrdyn.com"
+        >
+          <Image
+            alt="corrdyn logo"
+            src="/images/logos/cust-logo-corrdyn-gray.svg"
+            width={125}
+            height={125}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://square1.io"
+        >
+          <Image
+            alt="square1 logo"
+            src="/images/logos/cust-logo-square1-gray.svg"
+            width={100}
+            height={100}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://bunq.com"
+        >
+          <Image
+            alt="bunq logo"
+            src="/images/logos/cust-logo-bunq-gray.svg"
+            width={80}
+            height={60}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://wolfram.com"
+        >
+          <Image
+            alt="wolfram logo"
+            src="/images/logos/cust-logo-wolfram-gray.svg"
+            width={60}
+            height={75}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://sebgroup.com"
+        >
+          <Image
+            alt="seb logo"
+            src="/images/logos/cust-logo-seb-gray.svg"
+            width={75}
+            height={75}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://teracloud.com"
+        >
+          <Image
+            alt="teracloud logo"
+            src="/images/logos/cust-logo-teracloud-gray.svg"
+            width={125}
+            height={125}
+            className="  "
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://double11.co.uk"
+        >
+          <Image
+            alt="double11 logo"
+            src="/images/logos/cust-logo-double11-gray.svg"
+            width={50}
+            height={50}
+          />
+        </Link>
+      </div>
+      <div
+        className="inline-flex w-fit whitespace-nowrap"
+        style={{ animation: "14s slide infinite linear" }}
+      >
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://corrdyn.com"
+        >
+          <Image
+            alt="corrdyn logo"
+            src="/images/logos/cust-logo-corrdyn-gray.svg"
+            width={125}
+            height={125}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://square1.io"
+        >
+          <Image
+            alt="square1 logo"
+            src="/images/logos/cust-logo-square1-gray.svg"
+            width={100}
+            height={100}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://bunq.com"
+        >
+          <Image
+            alt="bunq logo"
+            src="/images/logos/cust-logo-bunq-gray.svg"
+            width={80}
+            height={60}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://wolfram.com"
+        >
+          <Image
+            alt="wolfram logo"
+            src="/images/logos/cust-logo-wolfram-gray.svg"
+            width={60}
+            height={75}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://sebgroup.com"
+        >
+          <Image
+            alt="seb logo"
+            src="/images/logos/cust-logo-seb-gray.svg"
+            width={75}
+            height={75}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://teracloud.com"
+        >
+          <Image
+            alt="teracloud logo"
+            src="/images/logos/cust-logo-teracloud-gray.svg"
+            width={125}
+            height={125}
+          />
+        </Link>
+        <Link
+          className="h-12 mr-20 place-content-center"
+          href="https://double11.co.uk"
+        >
+          <Image
+            alt="double11 logo"
+            src="/images/logos/cust-logo-double11-gray.svg"
+            width={50}
+            height={50}
+          />
+        </Link>
       </div>
     </div>
   );
@@ -102,8 +188,8 @@ export function CustomerLogosColored() {
           <Image
             alt="bunq logo"
             src="/images/logos/cust-logo-bunq.svg"
-            width={150}
-            height={150}
+            width={100}
+            height={60}
           />
         </Link>
         <Link
diff --git a/website/src/components/CustomerTestimonials/index.tsx b/website/src/components/CustomerTestimonials/index.tsx
index f596c0fef..6288bab5d 100644
--- a/website/src/components/CustomerTestimonials/index.tsx
+++ b/website/src/components/CustomerTestimonials/index.tsx
@@ -81,7 +81,7 @@ const TestimonialBox = ({
           alt="author portrait"
           width={128}
           height={128}
-          className="w-10 h-10 sm:h-12 sm:h-12 md:h-16 md:w-16 rounded-full"
+          className="w-10 h-10 sm:h-12 md:h-16 md:w-16 rounded-full"
         />
         <div>
           <p className="text-md md:text-lg text-neutral-50">{authorName}</p>