adilallo
83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
|
|
interface QuoteDecorProps {
|
|
className?: string;
|
|
}
|
|
|
|
const QuoteDecor = memo<QuoteDecorProps>(({ className = "" }) => {
|
|
return (
|
|
<svg
|
|
className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
|
|
viewBox="400 0 442 163"
|
|
aria-hidden="true"
|
|
overflow="visible"
|
|
preserveAspectRatio="xMinYMin meet"
|
|
style={{ width: "100%", height: "100%" }}
|
|
>
|
|
<g fill="currentColor">
|
|
{/* 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>
|
|
);
|
|
});
|
|
|
|
QuoteDecor.displayName = "QuoteDecor";
|
|
|
|
export default QuoteDecor;
|