CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Quote Block md breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-25 18:45:13 -06:00
parent 44a26cb8ea
commit ccee34f5c8
2 changed files with 92 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/QuoteDecor.js
+58 -27
View File
@@ -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>
);