Website: Animated logo

website/package.json

@@ -20,6 +20,7 @@
 	"dependencies": {
 		"@heroicons/react": "^2.1.5",
 		"@icons-pack/react-simple-icons": "^10.0.0",
+		"@lottiefiles/react-lottie-player": "^3.5.4",
 		"@mux/mux-video-react": "^0.12.0",
 		"@sentry/nextjs": "^8.33.1",
 		"@socialincome/shared": "^1.0.0",

website/src/components/logos/si-animated-logo.tsx

@@ -0,0 +1,9 @@
+import { Player } from '@lottiefiles/react-lottie-player';
+import { HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import file from './si-logo-animation.json';
+
+export function SIAnimatedLogo({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+	return <Player src={file} autoplay keepLastFrame className={twMerge('[&>svg]:!w-auto', className)} {...props} />;
+}

website/src/components/logos/si-logo-animation.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":60,"ip":0,"op":170,"w":2300,"h":248,"nm":"Social Income Animation 2 (Knapp erangeschnitten)","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Socia","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[498.95,123.868,0],"to":[0,0,0],"ti":[0,0,0]},{"t":111,"s":[411.95,123.868,0]}],"ix":2,"l":2},"a":{"a":0,"k":[411.45,122.868,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,53.186],[-49.246,0],[-0.492,-38.904],[0,0],[16.744,0],[0,-32.009],[-20.683,0],[-0.492,18.713],[0,0],[45.306,0]],"o":[[0,-53.678],[47.768,0],[0,0],[-1.969,-19.698],[-21.176,0],[0,32.01],[17.236,0],[0,0],[0,38.904],[-49.246,0]],"v":[[399.877,157.094],[481.133,68.452],[557.464,133.949],[510.188,133.949],[481.133,102.924],[447.153,156.109],[481.133,210.773],[509.695,179.748],[557.464,179.748],[481.133,245.737]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,53.679],[-52.201,0],[-0.492,-53.186],[52.2,0]],"o":[[0,-53.678],[52.2,0],[0,53.679],[-52.201,0]],"v":[[208.803,157.094],[293.999,68.452],[379.686,157.094],[293.999,245.737]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-33.487],[-24.623,0],[-0.492,32.995],[24.622,0]],"o":[[0,32.995],[24.622,0],[0,-33.98],[-24.623,0]],"v":[[256.571,157.094],[293.999,210.773],[331.917,157.094],[293.999,103.416]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,52.201],[0,0],[-28.07,0],[0,17.729],[30.533,8.865],[0,0],[0,30.532],[-52.693,0],[-1.478,-48.261],[0,0],[25.115,0],[0,-15.758],[-30.04,-8.864],[0,0],[0,-33.487],[54.662,0]],"o":[[0,0],[0,28.07],[24.131,0],[0,-15.759],[0,0],[-33.98,-9.849],[0,-41.859],[52.693,0],[0,0],[0,-23.145],[-20.684,0],[0,14.282],[0,0],[41.367,12.312],[0,45.306],[-58.603,0]],"v":[[0,161.034],[51.215,161.034],[97.507,207.326],[137.396,178.27],[96.522,145.768],[57.618,134.441],[4.432,69.929],[94.06,0],[181.225,78.793],[130.994,78.793],[90.613,37.92],[54.663,65.004],[92.582,94.06],[126.069,103.909],[187.627,169.898],[96.522,245.737]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[0,32.995],[-51.215,5.417],[0,0],[16.744,0],[0.985,-14.774],[0,0],[-46.292,0],[-12.803,-12.311],[0,-31.025],[0,0],[0,0],[-3.447,-13.789],[0,0],[0.492,6.402],[27.578,0]],"o":[[0,-49.738],[0,0],[0,-16.744],[-19.205,0],[0,0],[1.97,-36.442],[24.622,0],[13.297,12.804],[0,0],[0,0],[0,23.639],[0,0],[-1.478,-7.88],[-13.789,15.758],[-36.934,0]],"v":[[662.358,194.029],[773.654,134.441],[773.654,126.069],[746.568,99.969],[716.036,124.592],[668.759,124.592],[747.061,68.452],[802.216,86.18],[817.975,144.291],[818.467,144.291],[818.467,181.717],[822.9,239.827],[781.533,239.827],[779.071,218.652],[723.423,243.274]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[0,-24.623],[-14.773,0],[0,30.04],[0,0]],"o":[[0,12.803],[24.131,0],[0,0],[-32.503,3.94]],"v":[[710.126,193.537],[735.734,213.235],[773.654,169.898],[773.654,164.481]],"c":true},"ix":2},"nm":"Path 6","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[587.012,241.305],[587.012,73.376],[632.81,73.376],[632.81,241.305]],"c":true},"ix":2},"nm":"Path 7","mn":"ADBE Vector Shape - Group","hd":false},{"ind":7,"ty":"sh","ix":8,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[587.012,49.246],[587.012,4.925],[632.81,4.925],[632.81,49.246]],"c":true},"ix":2},"nm":"Path 8","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.980392156863,0.78431372549,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Vereinigungsmenge 1","np":10,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-1,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"L 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":41,"s":[-90]},{"i":{"x":[0.968],"y":[0.694]},"o":{"x":[0.478],"y":[0.002]},"t":84,"s":[-90]},{"t":120,"s":[-40]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":86,"s":[993.218,245.215,0],"to":[0,0,0],"ti":[0,0,0]},{"t":111,"s":[882.218,245.215,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-117.944,23.884,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[235.888,47.769],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.980392156863,0.78431372549,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Rechteck 23","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3641,"st":41,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"L 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":84,"s":[0]},{"t":114,"s":[100]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":41,"s":[-90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":111,"s":[-90]},{"t":126,"s":[-65]}],"ix":10},"p":{"a":0,"k":[1075.063,244.956,0],"ix":2,"l":2},"a":{"a":0,"k":[-117.944,23.884,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[235.888,47.769],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.980392156863,0.78431372549,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Rechteck 22","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":62,"op":3641,"st":41,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Income","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":86,"s":[1657.916,126.331,0],"to":[0,0,0],"ti":[0,0,0]},{"t":111,"s":[1752.916,126.331,0]}],"ix":2,"l":2},"a":{"a":0,"k":[545.891,120.406,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,53.678],[-52.2,0],[0,-53.186],[52.201,0]],"o":[[0,-53.679],[52.694,0],[0,53.678],[-52.2,0]],"v":[[448.138,152.17],[533.333,63.527],[619.021,152.17],[533.333,240.813]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,-33.487],[-24.622,0],[0,32.995],[24.623,0]],"o":[[0,32.995],[24.623,0],[0,-33.98],[-24.622,0]],"v":[[495.906,152.17],[533.333,205.848],[571.253,152.17],[533.333,98.492]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,53.186],[-49.246,0],[-0.492,-38.904],[0,0],[16.743,0],[0,-32.009],[-20.684,0],[-0.492,18.714],[0,0],[45.306,0]],"o":[[0,-53.679],[47.768,0],[0,0],[-1.97,-19.698],[-21.176,0],[0,32.01],[17.236,0],[0,0],[0,38.904],[-49.246,0]],"v":[[270.852,152.17],[352.109,63.527],[428.44,129.024],[381.164,129.024],[352.109,97.999],[318.128,151.185],[352.109,205.848],[380.671,174.823],[428.44,174.823],[352.109,240.813]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,54.663],[-51.215,0],[0,-56.14],[0.985,-4.432],[0,0],[-27.086,0],[-4.925,13.296],[0,0],[42.845,0]],"o":[[0,-50.231],[51.709,0],[0,1.477],[0,0],[0,24.623],[15.759,0],[0,0],[-9.85,36.442],[-55.648,0]],"v":[[929.763,150.692],[1012.989,63.527],[1091.782,155.125],[1090.797,164.481],[976.055,164.481],[1012.989,207.818],[1042.537,185.657],[1090.797,185.657],[1013.481,240.32]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[0.985,-24.131],[0,0],[18.714,0]],"o":[[0,0],[-0.985,-24.131],[-18.714,0]],"v":[[974.577,133.456],[1045.491,133.456],[1010.526,95.537]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[17.236,0],[0,-36.934],[0,0],[0,0],[0,0],[16.743,0],[0,-36.934],[0,0],[0,0],[0,0],[0,0],[0,0],[-22.161,0],[-9.849,-19.206],[-24.13,0],[-0.492,-41.367],[0,0]],"o":[[0,0],[0,-21.668],[-21.668,0],[0,0],[0,0],[0,0],[0,-21.668],[-22.161,0],[0,0],[0,0],[0,0],[0,0],[0,0],[10.342,-16.251],[23.638,0],[11.327,-18.714],[42.845,0],[0,0],[0,0]],"v":[[855.401,236.38],[855.401,133.949],[830.779,99.969],[798.769,153.647],[798.769,236.38],[752.971,236.38],[752.971,133.949],[727.855,99.969],[695.845,153.647],[695.845,235.888],[650.047,235.888],[650.047,67.959],[690.428,67.959],[689.936,91.598],[742.629,65.497],[790.889,91.598],[846.537,65.497],[901.201,133.949],[901.201,236.38]],"c":true},"ix":2},"nm":"Path 6","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[22.653,0],[0,-38.904],[0,0],[0,0],[0,0],[0,0],[0,0],[-21.175,0],[0.492,-43.336],[0,0]],"o":[[0,0],[0,-24.622],[-21.176,0],[0,0],[0,0],[0,0],[0,0],[0,0],[12.312,-15.759],[47.768,0],[0,0],[0,0]],"v":[[196.492,236.38],[196.492,143.305],[169.406,99.969],[136.411,153.155],[136.411,236.38],[90.613,236.38],[90.613,68.452],[133.456,68.452],[133.456,90.613],[186.642,65.497],[242.29,142.813],[242.29,236.38]],"c":true},"ix":2},"nm":"Path 7","mn":"ADBE Vector Shape - Group","hd":false},{"ind":7,"ty":"sh","ix":8,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,235.888],[0,0],[47.768,0],[47.768,235.888]],"c":true},"ix":2},"nm":"Path 8","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.980392156863,0.78431372549,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Vereinigungsmenge 2","np":10,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3641,"st":41,"bm":0}],"markers":[]}

website/src/components/navbar/navbar-client.tsx

@@ -3,6 +3,7 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { getFlagComponentByCurrency } from '@/components/country-flags';
 import { DonateIcon } from '@/components/logos/donate-icon';
+import { SIAnimatedLogo } from '@/components/logos/si-animated-logo';
 import { SIIcon } from '@/components/logos/si-icon';
 import { SILogo } from '@/components/logos/si-logo';
 import { useI18n } from '@/components/providers/context-providers';
@@ -74,7 +75,7 @@ const MobileNavigation = ({ lang, region, languages, regions, currencies, naviga
 		return (
 			<div className="flex h-16 flex-row justify-between p-5 md:hidden">
 				<Link href={`/${lang}/${region}`}>
-					<SILogo className="mr-auto h-6" />
+					<SIAnimatedLogo className="mr-auto h-6" />
 				</Link>
 				<Bars3Icon className="text-accent h-6 cursor-pointer stroke-2" onClick={() => setVisibleSection('main')} />
 			</div>
@@ -266,7 +267,7 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
 		<div className="hidden h-20 flex-row items-baseline justify-between gap-x-4 overflow-hidden px-8 py-6 transition-[height] duration-500 ease-in group-hover/navbar:h-96 md:flex lg:group-hover/navbar:h-64">
 			<div className="flex h-full flex-1 shrink-0 basis-1/4 flex-col">
 				<Link href={`/${lang}/${region}`}>
-					<SILogo className="mr-auto hidden h-6 lg:block" />
+					<SIAnimatedLogo className="mr-auto hidden h-6 lg:block" />
 					<SIIcon className="-mb-2.5 block h-9 lg:hidden" />
 				</Link>
 				<div className="mt-6 hidden h-full flex-col justify-start group-hover/navbar:flex group-active/navbar:flex">