feat: add associtaionLogo to stage

src/extensions/components/stage/stage.styles.scss

@@ -15,10 +15,11 @@ $gridSpacing: $grid-base-four;
 	@include breakpoint($fromXLarge) {
 		display: flex;
 		padding: 60px $grid-base-ten $grid-base-ten;
+		justify-content: space-between;
 	}
 
 	&__headline {
-		margin-top: auto;
+		margin-top: 20px;
 		word-break: normal;
 		text-align: left;
 
@@ -150,4 +151,19 @@ $gridSpacing: $grid-base-four;
 			height: 225px;
 		}
 	}
+
+	&__associationLogoWrapper {
+		flex-grow: 1;
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+	}
+
+	&__associationLogo {
+		width: 100%;
+		height: 280px;
+		background-repeat: no-repeat;
+		background-size: contain;
+		background-position: center left;
+	}
 }

src/extensions/components/stage/stage.tsx

@@ -23,7 +23,9 @@ export const Stage = ({
 	const rootNodeRef = useRef();
 	const tenant = useTenant();
 	const [isAnimationDone, setIsAnimationDone] = useState(false);
-	const isTenantLoaded = tenant != null;
+	const isTenantLoaded = tenant !== null;
+	const hasAssociationLogo =
+		isTenantLoaded && tenant?.theming.associationLogo;
 
 	function onAnimationEnd(event) {
 		// Ignore animations of children
@@ -44,6 +46,7 @@ export const Stage = ({
 			})}
 		>
 			{hasAnimation ? <Spinner className="stage__spinner" /> : null}
+
 			<Link
 				to={config.urls.home}
 				className="stage__logo"
@@ -53,10 +56,22 @@ export const Stage = ({
 					})`
 				}}
 			></Link>
+
 			<div className="stage__headline">
 				<h1>{tenant?.name || t('app.stage.title')}</h1>
 				<h4>{tenant?.content.claim || t('app.claim')}</h4>
 			</div>
+
+			{hasAssociationLogo && (
+				<div className="stage__associationLogoWrapper">
+					<div
+						className="stage__associationLogo"
+						style={{
+							backgroundImage: `url(${tenant.theming.associationLogo})`
+						}}
+					/>
+				</div>
+			)}
 		</div>
 	);
 };