app/components/QuoteBlock.js

@@ -7,7 +7,10 @@ import QuoteDecor from "./QuoteDecor";
 const QuoteBlock = ({ className = "" }) => {
   return (
     <div
-      className={`py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden ${className}`}
+      className={`md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] ${className}`}
+    >
+      <div
+        className={`py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
       >
         {/* DECORATIONS (behind content) */}
         <QuoteDecor
@@ -16,33 +19,34 @@ const QuoteBlock = ({ className = "" }) => {
                       w-full h-full"
         />
 
-      <div className="flex flex-col gap-[var(--spacing-scale-024)] relative z-10">
+        <div className="flex flex-col gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] relative z-10">
           <div className="flex flex-col gap-[var(--spacing-scale-020)]">
             <Image
               src="assets/Quote_Avatar.svg"
               alt="Quote Avatar"
               width={64}
               height={64}
-            className="filter sepia"
+              className="filter sepia md:w-[120px] md:h-[120px]"
             />
             <blockquote>
-            <p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] [&>span]:font-bricolage-grotesque">
+              <p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] md:text-[36px] md:leading-[110%] md:tracking-[0px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] [&>span]:font-bricolage-grotesque">
                 <span>"</span>The rules of decision-making must be open and
                 available to everyone, and this can happen only if they are
                 formalized.<span>"</span>
               </p>
             </blockquote>
           </div>
-        <div className="flex flex-col gap-[var(--spacing-scale-008)]">
+          <div className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)]">
-          <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase">
+            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase">
               Jo Freeman
             </p>
-          <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] [&>span]:font-inter">
+            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] [&>span]:font-inter">
               <span>"</span>The Tyranny of Structurelessness<span>"</span>
             </p>
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

app/components/QuoteDecor.js

@@ -3,38 +3,69 @@
 const QuoteDecor = ({ className = "" }) => {
   return (
     <svg
-      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
+      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[1440px] ${className}`}
-      viewBox="0 0 1242 163"
+      viewBox="400 0 442 163"
       aria-hidden="true"
       overflow="visible"
-      preserveAspectRatio="xMidYMid slice"
+      preserveAspectRatio="xMinYMin meet"
     >
       <g fill="currentColor">
+        {/* Mobile ellipses */}
+        <g className="md:hidden">
           {/* First ellipse - top left */}
           <ellipse
-          cx="590"
+            cx="490"
-          cy="40"
+            cy="80"
-          rx="90"
+            rx="300"
-          ry="40"
+            ry="100"
-          transform="rotate(-35 600 80)"
+            transform="rotate(-20 600 90)"
           />
           {/* Second ellipse - middle */}
           <ellipse
-          cx="608"
+            cx="508"
-          cy="100"
+            cy="250"
-          rx="90"
+            rx="300"
-          ry="40"
+            ry="110"
-          transform="rotate(-35 600 80)"
+            transform="rotate(-25 600 90)"
           />
           {/* Third ellipse - bottom right */}
           <ellipse
-          cx="610"
+            cx="550"
-          cy="155"
+            cy="420"
-          rx="90"
+            rx="300"
-          ry="40"
+            ry="120"
-          transform="rotate(-35 600 80)"
+            transform="rotate(-25 600 90)"
           />
         </g>
+
+        {/* MD+ ellipses */}
+        <g className="hidden md:block">
+          {/* First ellipse - top left */}
+          <ellipse
+            cx="590"
+            cy="70"
+            rx="300"
+            ry="110"
+            transform="rotate(-30 600 90)"
+          />
+          {/* Second ellipse - middle */}
+          <ellipse
+            cx="680"
+            cy="250"
+            rx="300"
+            ry="110"
+            transform="rotate(-30 600 90)"
+          />
+          {/* Third ellipse - bottom right */}
+          <ellipse
+            cx="670"
+            cy="400"
+            rx="300"
+            ry="120"
+            transform="rotate(-30 600 90)"
+          />
+        </g>
+      </g>
     </svg>
   );
 };