From ccee34f5c866bc3634b67cf6b4aecde56e261e28 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 25 Aug 2025 18:45:13 -0600
Subject: [PATCH] Quote Block md breakpoint

---
 app/components/QuoteBlock.js | 64 ++++++++++++++-------------
 app/components/QuoteDecor.js | 85 ++++++++++++++++++++++++------------
 2 files changed, 92 insertions(+), 57 deletions(-)

diff --git a/app/components/QuoteBlock.js b/app/components/QuoteBlock.js
index 50149af..04c57dd 100644
--- a/app/components/QuoteBlock.js
+++ b/app/components/QuoteBlock.js
@@ -7,39 +7,43 @@ 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}`}
     >
-      {/* DECORATIONS (behind content) */}
-      <QuoteDecor
-        className="pointer-events-none absolute z-0
-                    left-0 top-0
-                    w-full h-full"
-      />
+      <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
+          className="pointer-events-none absolute z-0
+                      left-0 top-0
+                      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-020)]">
-          <Image
-            src="assets/Quote_Avatar.svg"
-            alt="Quote Avatar"
-            width={64}
-            height={64}
-            className="filter sepia"
-          />
-          <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">
-              <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>
+        <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 md:w-[120px] md:h-[120px]"
+            />
+            <blockquote>
+              <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)] md:gap-[var(--spacing-scale-012)]">
+            <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>
-          </blockquote>
-        </div>
-        <div className="flex flex-col gap-[var(--spacing-scale-008)]">
-          <p className="font-inter font-normal text-[12px] leading-[120%] 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">
-            <span>"</span>The Tyranny of Structurelessness<span>"</span>
-          </p>
+            <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>
diff --git a/app/components/QuoteDecor.js b/app/components/QuoteDecor.js
index 6d7b9e9..e1b8ccb 100644
--- a/app/components/QuoteDecor.js
+++ b/app/components/QuoteDecor.js
@@ -3,37 +3,68 @@
 const QuoteDecor = ({ className = "" }) => {
   return (
     <svg
-      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
-      viewBox="0 0 1242 163"
+      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[1440px] ${className}`}
+      viewBox="400 0 442 163"
       aria-hidden="true"
       overflow="visible"
-      preserveAspectRatio="xMidYMid slice"
+      preserveAspectRatio="xMinYMin meet"
     >
       <g fill="currentColor">
-        {/* First ellipse - top left */}
-        <ellipse
-          cx="590"
-          cy="40"
-          rx="90"
-          ry="40"
-          transform="rotate(-35 600 80)"
-        />
-        {/* Second ellipse - middle */}
-        <ellipse
-          cx="608"
-          cy="100"
-          rx="90"
-          ry="40"
-          transform="rotate(-35 600 80)"
-        />
-        {/* Third ellipse - bottom right */}
-        <ellipse
-          cx="610"
-          cy="155"
-          rx="90"
-          ry="40"
-          transform="rotate(-35 600 80)"
-        />
+        {/* Mobile ellipses */}
+        <g className="md:hidden">
+          {/* First ellipse - top left */}
+          <ellipse
+            cx="490"
+            cy="80"
+            rx="300"
+            ry="100"
+            transform="rotate(-20 600 90)"
+          />
+          {/* Second ellipse - middle */}
+          <ellipse
+            cx="508"
+            cy="250"
+            rx="300"
+            ry="110"
+            transform="rotate(-25 600 90)"
+          />
+          {/* Third ellipse - bottom right */}
+          <ellipse
+            cx="550"
+            cy="420"
+            rx="300"
+            ry="120"
+            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>
   );