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/QuoteBlock.js
+34 -30
View File
@@ -7,39 +7,43 @@ import QuoteDecor from "./QuoteDecor";
const QuoteBlock = ({ className = "" }) => { const QuoteBlock = ({ className = "" }) => {
return ( return (
<div <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) */} <div
<QuoteDecor 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`}
className="pointer-events-none absolute z-0 >
left-0 top-0 {/* DECORATIONS (behind content) */}
w-full h-full" <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-024)] md:gap-[var(--spacing-scale-048)] relative z-10">
<div className="flex flex-col gap-[var(--spacing-scale-020)]"> <div className="flex flex-col gap-[var(--spacing-scale-020)]">
<Image <Image
src="assets/Quote_Avatar.svg" src="assets/Quote_Avatar.svg"
alt="Quote Avatar" alt="Quote Avatar"
width={64} width={64}
height={64} height={64}
className="filter sepia" className="filter sepia md:w-[120px] md:h-[120px]"
/> />
<blockquote> <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 <span>"</span>The rules of decision-making must be open and
available to everyone, and this can happen only if they are available to everyone, and this can happen only if they are
formalized.<span>"</span> 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> </p>
</blockquote> <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">
</div> <span>"</span>The Tyranny of Structurelessness<span>"</span>
<div className="flex flex-col gap-[var(--spacing-scale-008)]"> </p>
<p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase"> </div>
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>
</div> </div>
</div> </div>
</div> </div>
app/components/QuoteDecor.js
+58 -27
View File
@@ -3,37 +3,68 @@
const QuoteDecor = ({ className = "" }) => { const QuoteDecor = ({ className = "" }) => {
return ( return (
<svg <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" aria-hidden="true"
overflow="visible" overflow="visible"
preserveAspectRatio="xMidYMid slice" preserveAspectRatio="xMinYMin meet"
> >
<g fill="currentColor"> <g fill="currentColor">
{/* First ellipse - top left */} {/* Mobile ellipses */}
<ellipse <g className="md:hidden">
cx="590" {/* First ellipse - top left */}
cy="40" <ellipse
rx="90" cx="490"
ry="40" cy="80"
transform="rotate(-35 600 80)" rx="300"
/> ry="100"
{/* Second ellipse - middle */} transform="rotate(-20 600 90)"
<ellipse />
cx="608" {/* Second ellipse - middle */}
cy="100" <ellipse
rx="90" cx="508"
ry="40" cy="250"
transform="rotate(-35 600 80)" rx="300"
/> ry="110"
{/* Third ellipse - bottom right */} transform="rotate(-25 600 90)"
<ellipse />
cx="610" {/* Third ellipse - bottom right */}
cy="155" <ellipse
rx="90" cx="550"
ry="40" cy="420"
transform="rotate(-35 600 80)" 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> </g>
</svg> </svg>
); );