0
t1enne 00bc662c7f Changed Logo and Header
logo has two variants. Changed story to reflect that. Updated header
2022-05-08 10:45:45 +02:00

176 lines
9.9 KiB
TypeScript

import React from 'react';
import cn from 'classnames';
import s from './Logo.module.scss'
interface Props {
variant: 'simple' | 'contrast'
}
export default function Logo({variant = 'simple'}: Props) {
const rootClassName = cn(
s.root,
{
[s.simple]: variant === 'simple',
[s.contrast]: variant === 'contrast',
}
)
return (
<div className={rootClassName}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 95.68623352050781 104.46271514892578"
className="logo-svg"
>
<g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)">
<g>
<g>
<g>
<g transform="matrix(1.0445680396949917 0 0 1.0445679172996596 36.34559138380523 18.877718021903796)">
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient120"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#1f2022" stopOpacity="1" />
<stop offset="1" stopColor="#635e69" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient120)"
d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient121"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#2087e2" stopOpacity="1" />
<stop offset="1" stopColor="#b63fff" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient121)"
d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient122"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#100f0f" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient122)"
d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient123"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#222020" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient123)"
d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"
/>
</g>
<g transform="matrix(0.9999999999999999 0 0 1 0 5.684341886080802e-14)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient124"
gradientTransform="rotate(-180 .5 .5)"
>
{' '}
<stop offset="0" stopColor="#1e1c1c" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient124)"
d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient125"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient125)"
d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient126"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient126)"
d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"
/>
</g>
</g>
</g>
<g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
<path fill="#000000" fillOpacity="1" d="" />
</g>
</g>
</g>
</g>
</svg>
</div>
);
}