fix(website): Fix FeatureCards responsiveness (#6266)

Setting `max-w-` on the containing element instead of static `w-` on the
items within is preferred. Fixes this issue:

<img width="479" alt="Screenshot 2024-08-12 at 9 35 34 AM"
src="https://github.com/user-attachments/assets/68aa3844-74c1-4256-883d-a3168313c85b">

website/src/app/page.tsx

@@ -104,17 +104,16 @@ export default function Page() {
         </div>
       </section>
 
-      {/* TODO: ACLs for the rest of us */}
-
-      {/* Feature section 1: Secure access to your most sensitive resources in minutes. */}
       <section className="bg-white px-4 sm:px-8 md:px-16 py-20 md:py-16">
-        <ElevatorPitch />
-        <section className=" py-16 bg-white">
+        <div className="py-8 md:py-12">
+          <ElevatorPitch />
+        </div>
+        <div className="py-8 md:py-12">
           <BattleCard />
-        </section>
-        <section className="relative py-24 bg-white">
+        </div>
+        <div className="py-8 md:py-12">
           <FeatureCards />
-        </section>
+        </div>
       </section>
 
       {/* Feature section 2: Achieve compliance in minutes, not weeks. */}

website/src/components/ElevatorPitch/index.tsx

@@ -69,7 +69,7 @@ export default function ElevatorPitch() {
   };
 
   return (
-    <div className="flex w-full lg:flex-row flex-col justify-center gap-6 lg:gap-16 xl:gap-36 items-center my-8 md:my-16">
+    <div className="flex w-full lg:flex-row flex-col justify-center gap-6 lg:gap-16 xl:gap-36 items-center">
       <div className="flex flex-col w-full h-full justify-between lg:w-[480px] xl:w-[580px]">
         <div>
           <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">

website/src/components/FeatureCards/index.tsx

@@ -9,102 +9,93 @@ import UpgradeDiagram from "../Animations/UpgradeDiagram";
 
 export default function FeatureCards() {
   return (
-    <div className="flex w-full justify-center">
-      <div className="flex flex-col items-center mx-auto">
-        <div className="flex mb-8 lg:flex-row flex-col w-full items-start lg:items-end justify-between">
-          <div className="">
-            <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 lg:mb-4">
-              built for you
-            </h6>
-            <div className="mb-4 lg:mb-0 text-3xl md:text-4xl lg:text-5xl w-[460px] lg:w-[600px]">
-              <h3
-                className={` text-pretty text-left leading-tight tracking-tight font-bold inline-block ${manrope.className}`}
-              >
-                Simplify access management
-                <span className="text-primary-450"> with WireGuard.</span>
-              </h3>
-            </div>
-          </div>
-          <div className="">
-            <p
-              className={`text-lg mb-6 text-left text-pretty text-neutral-800 w-[400px] `}
+    <div className="max-w-screen-lg flex flex-col items-center mx-auto">
+      <div className="flex mb-8 lg:flex-row flex-col w-full items-start lg:items-end justify-between">
+        <div>
+          <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2 lg:mb-4">
+            built for you
+          </h6>
+          <div className="mb-4 lg:mb-0 text-3xl md:text-4xl lg:text-5xl">
+            <h3
+              className={` text-pretty text-left leading-tight tracking-tight font-bold inline-block ${manrope.className}`}
             >
-              Seamlessly manage thousands of lightweight tunnels to whatever
-              resources you need, whenever.
-            </p>
-            <ActionLink href="/kb/deploy/resources">
-              Protect your resources
-            </ActionLink>
+              Simplify access management
+              <span className="text-primary-450"> with WireGuard.</span>
+            </h3>
           </div>
         </div>
-        {/* <div className="relative w-[80%]">
-          <div className="absolute left-1/2 -translate-x-1/2 translate-y-1/2 blur-[120px] bg-primary-400 rounded-full w-[220px] h-[220px]" />
-          <UpgradeDiagram />
-        </div> */}
-
-        <div className="mt-8 items-stretch mx-auto gap-4 md:max-w-screen-lg grid md:grid-cols-3">
-          <SlideIn
-            direction="left"
-            delay={0.5}
-            duration={1}
-            className="flex flex-col p-5 md:p-8 border-[1px] rounded-xl border-neutral-300"
-          >
-            <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#FFE9EB] justify-center items-center mb-7">
-              <HiCloud color="#EF7E88" className="w-6 h-6 lg:w-7 lg:h-7" />
-            </div>
-            <h4
-              className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
-            >
-              Flexible
-            </h4>
-            <p className={`text-sm md:text-md semi-bold text-neutral-800`}>
-              Control access to VPCs, subnets, hosts by IP or DNS, and even
-              public SaaS apps.
-            </p>
-          </SlideIn>
-          <SlideIn
-            direction="left"
-            delay={0.75}
-            duration={1}
-            className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
-          >
-            <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#E3F5FF] justify-center items-center mb-7">
-              <HiLockClosed color="#719CF1" className="w-6 h-6 lg:w-7 lg:h-7" />
-            </div>
-            <h4
-              className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
-            >
-              Secure
-            </h4>
-            <p className={`text-sm md:text-md semi-bold text-neutral-800`}>
-              Users and groups automatically sync with your identity provider,
-              so access is revoked immediately.
-            </p>
-          </SlideIn>
-          <SlideIn
-            direction="left"
-            delay={1}
-            duration={1}
-            className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
-          >
-            <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#EFEAFF] justify-center items-center mb-7">
-              <HiMiniPuzzlePiece
-                color="#B195FE"
-                className="w-6 h-6 lg:w-7 lg:h-7"
-              />
-            </div>
-            <h4
-              className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
-            >
-              Granular
-            </h4>
-            <p className={`text-sm md:text-md semi-bold text-neutral-800`}>
-              Restrict access even further with port-level rules that control
-              access to services, even on the same host.
-            </p>
-          </SlideIn>
+        <div>
+          <p className="text-lg mb-6 text-left text-pretty text-neutral-800">
+            Seamlessly manage thousands of lightweight tunnels to whatever
+            resources you need, whenever.
+          </p>
+          <ActionLink href="/kb/deploy/resources">
+            Protect your resources
+          </ActionLink>
         </div>
       </div>
+      <div className="mt-8 items-stretch mx-auto gap-4 md:max-w-screen-lg grid md:grid-cols-3">
+        <SlideIn
+          direction="left"
+          delay={0.5}
+          duration={1}
+          className="flex flex-col p-5 md:p-8 border-[1px] rounded-xl border-neutral-300"
+        >
+          <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#FFE9EB] justify-center items-center mb-5">
+            <HiCloud color="#EF7E88" className="w-6 h-6 lg:w-7 lg:h-7" />
+          </div>
+          <h4
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+          >
+            Flexible
+          </h4>
+          <p className={`text-sm md:text-md semi-bold text-neutral-800`}>
+            Control access to VPCs, subnets, hosts by IP or DNS, and even public
+            SaaS apps.
+          </p>
+        </SlideIn>
+        <SlideIn
+          direction="left"
+          delay={0.75}
+          duration={1}
+          className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
+        >
+          <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#E3F5FF] justify-center items-center mb-5">
+            <HiLockClosed color="#719CF1" className="w-6 h-6 lg:w-7 lg:h-7" />
+          </div>
+          <h4
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+          >
+            Secure
+          </h4>
+          <p className={`text-sm md:text-md semi-bold text-neutral-800`}>
+            Users and groups automatically sync with your identity provider, so
+            access is revoked immediately.
+          </p>
+        </SlideIn>
+        <SlideIn
+          direction="left"
+          delay={1}
+          duration={1}
+          className="flex flex-col p-6 md:p-8 border-[1px] rounded-xl border-neutral-300"
+        >
+          <div className="h-12 w-12 md:h-14 md:w-14 flex rounded-xl bg-[#EFEAFF] justify-center items-center mb-5">
+            <HiMiniPuzzlePiece
+              color="#B195FE"
+              className="w-6 h-6 lg:w-7 lg:h-7"
+            />
+          </div>
+          <h4
+            className={`text-md md:text-lg tracking-tight text-neutral-900 font-semibold mb-1 ${manrope.className}`}
+          >
+            Granular
+          </h4>
+          <p className="text-sm md:text-md semi-bold text-neutral-800">
+            Restrict access even further with port-level rules that control
+            access to services, even on the same host.
+          </p>
+        </SlideIn>
+      </div>
     </div>
   );
 }