fix(website): Fix graphics and adjust elevator image size (#6391)

Fix conditions graphic and adjust elevator image size

---------

Signed-off-by: Patti <139997703+Patticatti@users.noreply.github.com>
Signed-off-by: Jamil <jamilbk@users.noreply.github.com>
Co-authored-by: Jamil <jamilbk@users.noreply.github.com>

website/src/components/ElevatorPitch/index.tsx

@@ -105,12 +105,13 @@ export default function ElevatorPitch() {
               ))}
             </div>
           </div>
-          <div className="max-w-1/2">
+          <div className="lg:max-w-1/2">
             <Image
               src="/images/elevator-pitch.png"
-              width={563}
-              height={594}
+              width={500}
+              height={500}
               alt="Elevator pitch graphic"
+              className="mx-auto"
             />
           </div>
         </div>

website/src/components/FeatureSection/index.tsx

@@ -16,12 +16,12 @@ export default function FeatureSection({
   cta: React.ReactNode;
 }) {
   const copy = (
-    <div className="mx-auto p-4 min-w-[320px] max-w-[480px]">
+    <div className="mx-auto flex flex-col items-center lg:items-start text-center lg:text-left p-4 min-w-[320px] max-w-[700px] lg:max-w-[480px]">
       <h6 className="uppercase text-sm font-semibold text-primary-450 tracking-wide mb-2">
         {titleCaption}
       </h6>
       <h3
-        className={`mb-4 text-3xl md:text-4xl lg:text-5xl leading-8 text-pretty tracking-tight font-bold inline-block ${manrope.className}`}
+        className={`mb-4 text-center lg:text-left text-3xl md:text-4xl lg:text-5xl leading-8 text-pretty tracking-tight font-bold inline-block ${manrope.className}`}
       >
         {title}
       </h3>
@@ -36,7 +36,11 @@ export default function FeatureSection({
   return (
     <section className="py-16">
       <div
-        className={`max-w-screen-xl mx-auto flex justify-between items-center ${reverse ? "flex-wrap-reverse" : "flex-wrap"}`}
+        className={`max-w-screen-xl mx-auto flex justify-between lg:flex-row items-center ${
+          reverse
+            ? "flex-col-reverse"
+            : "flex-col"
+        }`}
       >
         {reverse ? graphic : copy}
         {reverse ? copy : graphic}