diana.dolgolyova
9e0aa5b5dc
- Add will-change to .hero-glow-orb (filter, transform) and .team-card-glitter::before (background-position) - Clear CSRF cookie on logout alongside auth cookie - Add max array length (100) validation on team reorder endpoint - Remove redundant isOpenDayClassBookedByPhone pre-check (DB UNIQUE constraint handles it) - Extract Schedule grid layout calculation into useMemo - Reduce HeroLogo sparkle animations on mobile (15 → 8 via hidden sm:block) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
162 lines
9.5 KiB
TypeScript
162 lines
9.5 KiB
TypeScript
interface HeroLogoProps {
|
|
className?: string;
|
|
size?: number;
|
|
}
|
|
|
|
// Heart SVG split into 3 sub-paths for independent stroke animation
|
|
const PATHS = [
|
|
// Main heart shape (largest, outer contour)
|
|
"M118.02,188.43 C118.04,184.10 120.51,173.30 122.96,166.79 C126.11,158.42 133.55,147.62 144.55,135.42 C165.53,112.15 170.96,101.38 170.99,82.98 C171.00,72.35 168.51,62.96 162.47,50.94 C160.00,46.02 157.78,42.00 157.53,42.00 C157.29,42.00 158.24,45.04 159.64,48.75 C163.04,57.78 165.96,71.24 165.96,78.00 C165.97,85.89 163.51,95.22 159.27,103.40 C156.31,109.09 152.52,113.57 140.17,126.00 C131.69,134.53 123.42,143.44 121.79,145.81 C116.23,153.88 110.87,167.99 109.81,177.28 C109.51,179.99 109.37,179.90 105.02,174.28 C102.55,171.10 98.74,166.54 96.55,164.15 L92.56,159.80 L95.53,157.70 C100.61,154.12 105.90,148.12 108.76,142.70 C111.22,138.02 111.50,136.50 111.47,127.50 C111.45,118.43 111.02,116.15 106.86,103.00 C101.17,85.06 99.60,76.75 100.25,68.17 C100.75,61.51 104.60,48.83 107.29,45.00 C108.57,43.16 108.76,43.69 109.31,50.84 C110.42,65.22 115.99,75.08 126.37,81.04 C133.31,85.02 133.82,84.76 128.92,79.75 C124.20,74.93 119.44,65.68 118.16,58.84 C116.46,49.75 119.09,39.24 125.73,28.59 L128.79,23.69 L130.02,29.59 C130.69,32.84 133.23,39.92 135.65,45.33 C143.15,62.02 144.36,69.90 141.53,83.29 C140.04,90.28 134.00,104.04 127.66,114.86 C125.68,118.24 124.39,120.97 124.78,120.93 C125.18,120.90 128.41,117.53 131.97,113.46 C145.06,98.47 150.50,85.84 150.46,70.50 C150.43,59.80 149.70,57.36 141.46,40.79 C137.98,33.80 134.83,26.02 134.45,23.49 C133.85,19.50 134.07,18.56 136.10,16.40 C139.50,12.77 147.93,7.39 153.86,5.06 L159.00,3.03 L159.00,9.32 C159.00,18.37 162.11,24.01 172.06,33.00 C176.46,36.97 180.72,41.50 181.53,43.06 C183.67,47.20 183.39,56.94 180.95,63.13 C178.14,70.25 180.87,67.95 184.97,59.74 C190.78,48.12 188.70,39.73 177.15,28.15 C173.28,24.27 169.43,20.06 168.61,18.80 C166.51,15.58 164.79,7.21 165.54,3.83 C166.16,1.00 166.17,1.00 174.33,1.01 C178.82,1.02 184.15,1.29 186.17,1.63 C189.69,2.21 189.81,2.37 189.29,5.62 C188.42,10.94 190.83,20.71 195.10,29.20 C197.26,33.49 199.19,37.00 199.40,37.00 C199.62,37.00 198.67,33.51 197.31,29.25 C195.35,23.12 194.91,19.90 195.17,13.83 C195.36,9.61 195.85,5.81 196.28,5.39 C197.35,4.31 205.52,8.43 211.67,13.15 C218.45,18.35 221.00,23.72 220.99,32.74 C220.98,36.46 220.28,41.98 219.42,45.00 C218.57,48.02 217.63,51.40 217.34,52.50 C216.30,56.51 222.34,45.32 224.52,39.20 C225.76,35.73 227.01,32.66 227.29,32.38 C227.57,32.09 228.79,34.48 229.99,37.68 C238.21,59.57 232.78,83.80 215.76,101.15 C209.43,107.60 207.42,108.54 209.17,104.25 C210.91,100.00 210.37,85.54 208.08,74.64 C206.93,69.22 205.95,62.24 205.90,59.14 C205.80,53.85 205.74,53.72 204.93,57.00 C204.45,58.92 204.13,68.15 204.22,77.50 C204.37,93.11 204.20,94.91 202.15,99.45 C198.99,106.51 192.06,115.46 190.76,114.16 C188.49,111.89 189.93,84.88 192.72,77.19 C194.09,73.45 189.30,79.05 186.68,84.26 C182.02,93.55 180.69,101.03 181.41,113.97 L182.05,125.50 L169.94,135.00 C153.90,147.58 132.06,170.01 124.13,182.05 C118.83,190.09 118.00,190.96 118.02,188.43 Z",
|
|
// Left inner detail
|
|
"M83.09,150.59 C78.00,145.44 77.78,144.99 78.44,141.34 C78.82,139.23 81.24,133.00 83.81,127.50 C88.47,117.57 88.50,117.43 88.49,107.00 C88.47,99.38 87.96,94.99 86.59,91.00 C84.28,84.21 77.06,69.61 76.36,70.30 C76.08,70.58 76.56,72.19 77.43,73.87 C79.91,78.65 82.99,92.88 82.99,99.57 C83.00,108.39 80.69,114.86 73.96,124.82 C70.68,129.67 68.00,134.17 68.00,134.82 C68.00,135.47 67.62,136.00 67.16,136.00 C66.07,136.00 57.00,128.93 57.00,128.07 C57.00,127.71 59.03,123.47 61.50,118.66 C66.60,108.75 67.24,103.18 64.48,92.59 C62.01,83.09 61.32,83.22 61.40,93.17 C61.45,100.19 61.02,103.39 59.69,106.10 C57.49,110.57 48.29,121.00 46.56,121.00 C44.40,121.00 39.79,109.24 39.24,102.34 C38.56,93.90 40.48,89.09 48.68,78.77 C62.32,61.60 65.53,49.22 60.98,31.41 C58.70,22.51 54.61,13.20 50.08,6.62 C47.54,2.92 47.30,2.10 48.60,1.60 C50.50,0.87 66.31,0.80 68.17,1.51 C69.18,1.90 69.42,4.19 69.15,10.95 C68.88,18.05 69.27,21.45 71.06,27.48 C72.30,31.66 73.77,35.36 74.33,35.70 C74.97,36.10 75.06,35.62 74.57,34.41 C74.15,33.36 73.57,28.88 73.27,24.45 C72.70,15.76 74.85,5.38 77.44,4.39 C79.59,3.56 92.09,10.37 97.73,15.45 C100.57,18.00 103.83,21.61 104.99,23.48 L107.09,26.88 L103.66,31.69 C94.93,43.97 91.54,55.17 91.64,71.50 C91.72,84.83 92.69,89.79 99.08,109.50 C105.86,130.41 104.79,139.90 94.39,151.01 C91.83,153.75 89.44,156.00 89.08,156.00 C88.72,156.00 86.03,153.57 83.09,150.59 Z",
|
|
// Far left small detail
|
|
"M29.50,109.90 C26.20,107.67 21.64,104.05 19.38,101.84 L15.26,97.83 L17.24,92.67 C19.86,85.83 19.20,74.50 15.57,64.04 C12.16,54.24 10.98,53.26 12.75,61.71 C14.48,69.97 13.94,81.02 11.53,86.50 L9.77,90.50 L6.92,84.50 C2.82,75.84 1.00,67.75 1.00,58.18 C1.00,42.04 6.09,29.69 17.39,18.40 C23.48,12.31 32.07,6.09 30.82,8.67 C30.59,9.13 28.88,12.62 27.02,16.44 C21.43,27.90 22.74,38.16 31.08,48.28 C35.14,53.21 36.55,53.01 33.93,47.87 C31.25,42.61 30.40,34.47 31.90,28.31 C33.17,23.08 42.81,3.00 44.05,3.00 C44.47,3.00 46.18,6.79 47.86,11.42 C58.07,39.63 56.90,53.23 42.67,72.14 C31.96,86.38 29.60,96.21 33.92,108.52 C34.98,111.54 35.77,113.99 35.67,113.97 C35.58,113.96 32.80,112.12 29.50,109.90 Z",
|
|
];
|
|
|
|
// Approximate path lengths for each sub-path
|
|
const PATH_LENGTHS = [1800, 700, 300];
|
|
|
|
// Animation config per sub-path: staggered delays for continuous feel
|
|
const ANIM_CONFIG = [
|
|
{ dur: "5s", delay: "0s" },
|
|
{ dur: "3s", delay: "1.5s" },
|
|
{ dur: "2s", delay: "3s" },
|
|
];
|
|
|
|
const FULL_PATH = PATHS.join(" ");
|
|
|
|
// Glitter sparkle positions (x, y) placed within the heart shape
|
|
const SPARKLES = [
|
|
{ x: 150, y: 30, delay: 0, dur: 2.4 },
|
|
{ x: 185, y: 55, delay: 1.1, dur: 2.0 },
|
|
{ x: 200, y: 85, delay: 0.5, dur: 2.8 },
|
|
{ x: 170, y: 110, delay: 2.0, dur: 2.2 },
|
|
{ x: 145, y: 75, delay: 1.6, dur: 2.6 },
|
|
{ x: 130, y: 50, delay: 0.3, dur: 2.1 },
|
|
{ x: 160, y: 140, delay: 2.5, dur: 2.4 },
|
|
{ x: 125, y: 160, delay: 1.8, dur: 2.0 },
|
|
{ x: 105, y: 100, delay: 0.8, dur: 2.5 },
|
|
{ x: 90, y: 70, delay: 1.3, dur: 2.3 },
|
|
{ x: 75, y: 45, delay: 2.2, dur: 2.1 },
|
|
{ x: 60, y: 80, delay: 0.6, dur: 2.7 },
|
|
{ x: 50, y: 55, delay: 1.9, dur: 2.0 },
|
|
{ x: 40, y: 95, delay: 0.2, dur: 2.4 },
|
|
{ x: 115, y: 130, delay: 1.4, dur: 2.6 },
|
|
];
|
|
|
|
export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
|
|
const h = Math.round(size * (192 / 234));
|
|
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 234 192"
|
|
width={size}
|
|
height={h}
|
|
className={className}
|
|
role="img"
|
|
aria-label="Black Heart logo"
|
|
>
|
|
<defs>
|
|
{/* Dark metal gradient for fill */}
|
|
<radialGradient id="metal-fill" cx="50%" cy="35%" r="65%" fx="50%" fy="30%">
|
|
<stop offset="0%" stopColor="#333" />
|
|
<stop offset="50%" stopColor="#1a1a1a" />
|
|
<stop offset="100%" stopColor="#111" />
|
|
</radialGradient>
|
|
|
|
{/* Gold glow filter for the stroke */}
|
|
<filter id="gold-glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
|
|
<feMerge>
|
|
<feMergeNode in="blur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
{/* Sparkle glow filter */}
|
|
<filter id="sparkle-glow" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
|
|
<feMerge>
|
|
<feMergeNode in="blur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
{/* Clip to heart shape so sparkles stay inside */}
|
|
<clipPath id="heart-clip">
|
|
<path d={FULL_PATH} fillRule="evenodd" />
|
|
</clipPath>
|
|
</defs>
|
|
|
|
{/* Base heart: dark metal */}
|
|
<path
|
|
fill="url(#metal-fill)"
|
|
fillRule="evenodd"
|
|
d={FULL_PATH}
|
|
/>
|
|
|
|
{/* Glitter sparkles on heart surface — odd-indexed hidden on mobile via CSS class */}
|
|
<g clipPath="url(#heart-clip)" filter="url(#sparkle-glow)">
|
|
{SPARKLES.map((s, i) => (
|
|
<circle key={`sparkle-${i}`} cx={s.x} cy={s.y} r="1.8" fill="#d4b87a" className={i % 2 ? "hidden sm:block" : ""}>
|
|
<animate
|
|
attributeName="opacity"
|
|
values="0;0;0.9;1;0.9;0;0"
|
|
dur={`${s.dur}s`}
|
|
begin={`${s.delay}s`}
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="r"
|
|
values="0.8;1.8;0.8"
|
|
dur={`${s.dur}s`}
|
|
begin={`${s.delay}s`}
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
))}
|
|
</g>
|
|
|
|
{/* Animated gold glint — one per sub-path, staggered */}
|
|
{PATHS.map((d, i) => {
|
|
const len = PATH_LENGTHS[i];
|
|
const dashLen = len * 0.15;
|
|
const gapLen = len * 0.85;
|
|
const { dur, delay } = ANIM_CONFIG[i];
|
|
|
|
return (
|
|
<path
|
|
key={i}
|
|
d={d}
|
|
fill="none"
|
|
stroke="#c9a96e"
|
|
strokeWidth="1.5"
|
|
strokeOpacity="0.6"
|
|
strokeDasharray={`${dashLen} ${gapLen}`}
|
|
filter="url(#gold-glow)"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values={`${len};0`}
|
|
dur={dur}
|
|
begin={delay}
|
|
repeatCount="indefinite"
|
|
/>
|
|
</path>
|
|
);
|
|
})}
|
|
|
|
{/* Constant gold edge highlight */}
|
|
<path
|
|
d={FULL_PATH}
|
|
fill="none"
|
|
stroke="#c9a96e"
|
|
strokeWidth="0.75"
|
|
strokeOpacity="0.3"
|
|
fillRule="evenodd"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|