From c62541f69b8b5f0ba1e06cbba000f3e482d74871 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Thu, 5 Dec 2024 12:53:10 +0100
Subject: [PATCH] Update Use of Funds content and design

- Fix missing styles in local selector
- Add a new Use of Funds page
- Remove old styles and unused components

Ticket: https://phabricator.wikimedia.org/T381411
---
 src/components/layout/LocaleSelector.vue      |   4 +-
 src/components/pages/DonationConfirmation.vue |   1 +
 src/components/pages/UseOfFunds.vue           | 423 ++++++++++++++----
 .../pages/use_of_funds/BenefitsIcon.vue       | 105 +++++
 .../pages/use_of_funds/CallToAction.vue       |  49 ++
 src/components/pages/use_of_funds/Company.ts  |   6 -
 .../pages/use_of_funds/CompanyBudgets.vue     |  40 --
 .../pages/use_of_funds/CompanyCitation.vue    |  22 -
 .../FundsDistributionAccordion.vue            |  30 --
 .../pages/use_of_funds/UseOfFundsContent.ts   |  40 ++
 src/components/shared/icons/ChevronDown.vue   |   2 +-
 src/scss/use_of_funds/CompanyBudgets.scss     |  47 --
 src/scss/use_of_funds/FundsContent.scss       | 194 --------
 .../FundsDistributionAccordion.scss           |  60 ---
 src/scss/use_of_funds/variables.scss          |   4 -
 15 files changed, 542 insertions(+), 485 deletions(-)
 create mode 100644 src/components/pages/use_of_funds/BenefitsIcon.vue
 create mode 100644 src/components/pages/use_of_funds/CallToAction.vue
 delete mode 100644 src/components/pages/use_of_funds/Company.ts
 delete mode 100644 src/components/pages/use_of_funds/CompanyBudgets.vue
 delete mode 100644 src/components/pages/use_of_funds/CompanyCitation.vue
 delete mode 100644 src/components/pages/use_of_funds/FundsDistributionAccordion.vue
 create mode 100644 src/components/pages/use_of_funds/UseOfFundsContent.ts
 delete mode 100644 src/scss/use_of_funds/CompanyBudgets.scss
 delete mode 100644 src/scss/use_of_funds/FundsContent.scss
 delete mode 100644 src/scss/use_of_funds/FundsDistributionAccordion.scss
 delete mode 100644 src/scss/use_of_funds/variables.scss

diff --git a/src/components/layout/LocaleSelector.vue b/src/components/layout/LocaleSelector.vue
index 000dc10da..7dc379f4e 100644
--- a/src/components/layout/LocaleSelector.vue
+++ b/src/components/layout/LocaleSelector.vue
@@ -137,12 +137,10 @@ useDetectOutsideClick( localeSelectorRef, handleLocaleItemBlur );
 		}
 
 		.chevron-down-icon {
+			--chevron-stroke: #{colors.$primary};
 			width: 10px;
 			margin-left: 4px;
 			margin-top: 3px;
-			path {
-				stroke: colors.$primary;
-			}
 		}
 	}
 
diff --git a/src/components/pages/DonationConfirmation.vue b/src/components/pages/DonationConfirmation.vue
index 723ebb777..cb7e9c2a8 100644
--- a/src/components/pages/DonationConfirmation.vue
+++ b/src/components/pages/DonationConfirmation.vue
@@ -234,6 +234,7 @@ h2.icon-title {
 }
 
 .mobile-call-to-action {
+	--chevron-stroke: #{colors.$white};
 	position: fixed;
 	bottom: 0;
 	height: 64px;
diff --git a/src/components/pages/UseOfFunds.vue b/src/components/pages/UseOfFunds.vue
index 85dad5b8d..07b3175ff 100644
--- a/src/components/pages/UseOfFunds.vue
+++ b/src/components/pages/UseOfFunds.vue
@@ -1,94 +1,361 @@
 <template>
-	<div class="use_of_funds">
-		<div class="use_of_funds__section">
-			<div class="use_of_funds__section_intro">
-				<h1 v-if="content.provisional !== ''" v-html="content.intro.dynamicHeadline.provisional"></h1>
-				<h1 v-else v-html="content.intro.dynamicHeadline.published"></h1>
-				<div>{{ content.intro.text }}</div>
+	<div class="use-of-funds">
+		<h1>{{ content.title }}</h1>
+		<p class="use-of-funds-summary-text">{{ content.summary }}</p>
+
+		<div class="use-of-funds-usage">
+			<div class="use-of-funds-usage-accordion">
+				<details v-for="( accordionItem, index ) in content.accordion.items" :key="index">
+					<summary tabindex="0">
+						{{ accordionItem.title }}
+						<ChevronDown/>
+					</summary>
+					<div v-html="accordionItem.content"/>
+				</details>
 			</div>
+			<p class="use-of-funds-summary-text" v-html="content.accordion.summary"/>
 		</div>
 
-		<FundsDistributionAccordion :application-of-funds-data="content.applicationOfFundsData" />
+		<CallToAction :text="content.callToAction"/>
 
-		<div class="use_of_funds__section">
-			<p class="use_of_funds__info_text" v-html="content.detailedReports.mixed.text"></p>
-		</div>
-		<div class="use_of_funds__section use_of_funds__section--two-cols">
-			<div class="use_of_funds__column">
-				<div class="use_of_funds__benefits_list">
-					<h2>{{ content.benefitsList.headline }}</h2>
-					<ul class="use_of_funds__icon-list">
-						<li v-for="benefit in content.benefitsList.benefits"
-								:class="'use_of_funds__icon-list_item--' + benefit.icon"
-								:key=benefit.text>
-							{{ benefit.text }}
-						</li>
-					</ul>
-				</div>
-			</div>
-			<div class="use_of_funds__column">
-				<div class="use_of_funds__comparison">
-					<h2>{{ content.comparison.headline }}</h2>
-					<p v-for="text in content.comparison.paragraphs" :key="text">{{ text }}</p>
-					<h3>{{ content.comparison.subhead }}</h3>
-					<CompanyBudgets
-						:companies="content.comparison.companies"
-						:citation-label="content.comparison.citationLabel"
-					/>
-				</div>
-			</div>
+		<div class="use-of-funds-benefits">
+			<h2>{{ content.benefits.title }}</h2>
+
+			<ul>
+				<li v-for="( benefitItem, index ) in content.benefits.items" :key="index">
+					<BenefitsIcon :icon="benefitItem.icon"/>
+					<span>{{ benefitItem.content }}</span>
+				</li>
+			</ul>
 		</div>
-		<div class="use_of_funds__section use_of_funds__section--orgchart">
-			<div class="use_of_funds__orgchart_text">
-				<h2>{{ content.orgchart.headline }}</h2>
-				<div>
-					<p v-for="para in content.orgchart.paragraphs" :key="para" v-html="highlightOrganisation( para )"></p>
-				</div>
+
+		<div class="use-of-funds-revenue-comparison">
+			<div class="use-of-funds-revenue-comparison-content">
+				<h2>{{ content.revenueComparison.title }}</h2>
+				<p v-for="( paragraph, index ) in content.revenueComparison.content" :key="index">
+					{{ paragraph }}
+				</p>
 			</div>
-			<div class="use_of_funds__orgchart_image">
-				<img :src="'/resources/'+$i18n.locale.replace('-', '_')+'/WMDE-funds-forwarding.svg'" :alt="content.orgchart.imageAltText" />
+
+			<div class="use-of-funds-revenue-comparison-companies">
+				<h3>{{ content.revenueComparison.companies.title }}</h3>
+				<ul>
+					<li v-for="company in content.revenueComparison.companies.items" :key="company.name">
+						<span class="use-of-funds-companies-company">{{ company.name }}</span>
+						<span class="use-of-funds-companies-graph">
+							<span class="use-of-funds-companies-budget-line" :style="{ width: ( company.budget / highestBudget * 100 ) + '%' }">&#xa0;</span>
+						</span>
+						<span class="use-of-funds-companies-number">
+							{{ company.budgetString }}
+						</span>
+						<span class="use-of-funds-companies-link">
+							<a v-if="company.link !== ''" class="company_budgets__citation_link" :href="company.link" target="_blank">
+								{{ company.linkText }}
+							</a>
+							<span v-else>&nbsp;</span>
+						</span>
+					</li>
+				</ul>
 			</div>
 		</div>
-		<div class="banner_model__section use_of_funds__section--call_to_action">
-			<a class="use_of_funds__call-to-action-button" href="/">{{ content.callToAction }}</a>
-		</div>
+
+		<CallToAction :text="content.callToAction"/>
+
+		<p v-html="content.closingParagraph"/>
 	</div>
 </template>
 
-<script lang="ts">
-
-import CompanyBudgets from '@src/components/pages/use_of_funds/CompanyBudgets.vue';
-import FundsDistributionAccordion from '@src/components/pages/use_of_funds/FundsDistributionAccordion.vue';
-import { defineComponent } from 'vue';
-export default defineComponent( {
-	name: 'use-of-funds',
-	components: {
-		CompanyBudgets,
-		FundsDistributionAccordion,
-	},
-	props: {
-		content: {
-			type: Object,
-			required: true,
-		},
-		assetsPath: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		const highlightOrganisation = ( content: string ): string => {
-			return content.replace( /<(wmf|wmde)>([^<]*)<\/\1>/g, '<span class="use_of_funds__org--$1">$2</span>' );
-		};
-		return {
-			highlightOrganisation,
-		};
-	},
-} );
+<script setup lang="ts">
+
+import { UseOfFundsContent } from '@src/components/pages/use_of_funds/UseOfFundsContent';
+import BenefitsIcon from '@src/components/pages/use_of_funds/BenefitsIcon.vue';
+import { computed } from 'vue';
+import { Company } from '@src/components/pages/use_of_funds/Company';
+import CallToAction from '@src/components/pages/use_of_funds/CallToAction.vue';
+import ChevronDown from '@src/components/shared/icons/ChevronDown.vue';
+
+interface Props {
+	content: UseOfFundsContent
+}
+
+const props = defineProps<Props>();
+
+const highestBudget = computed( () => props.content.revenueComparison.companies.items.reduce( ( budget: number, company: Company ) =>
+	Math.max( budget, company.budget ), 0 )
+);
+
 </script>
 
 <style lang="scss">
-@import '../../scss/use_of_funds/FundsContent';
-@import '../../scss/use_of_funds/CompanyBudgets';
-@import'../../scss/use_of_funds/FundsDistributionAccordion';
+@use '@src/scss/settings/colors';
+@use '@src/scss/settings/units';
+@use '@src/scss/settings/breakpoints';
+@use 'sass:map';
+
+.use-of-funds {
+	--text-color: #{colors.$black};
+
+	--usage-1-background: #ecfffb;
+	--usage-1-color: #10826b;
+	--usage-2-background: #ffefef;
+	--usage-2-color: #9d0000;
+	--usage-3-background: #d7edff;
+	--usage-3-color: #154985;
+	--usage-4-background: #f3f3f3;
+	--usage-4-color: #555555;
+
+	--benefits-list-icon: #{colors.$black};
+	--benefits-background: #{colors.$gray-lighter};
+
+	--budget-line-background: #cecece;
+	--budget-line-background-wikipedia: #{colors.$primary};
+
+	--call-to-action-color: #{colors.$white};
+	--call-to-action-background: #{colors.$primary};
+	--call-to-action-background-hover: #{colors.$primary-hover};
+
+	color: var( --text-color );
+
+	h2 {
+		font-weight: bold;
+		font-size: 18px;
+
+		@include breakpoints.tablet-up {
+			font-size: 22px;
+		}
+
+		@include breakpoints.desktop-up {
+			font-size: 24px;
+		}
+	}
+
+	&-summary-text {
+		@include breakpoints.tablet-up {
+			font-size: 18px;
+		}
+	}
+
+	&-usage {
+		margin-bottom: map.get( units.$spacing, 'small' );
+		display: block;
+
+		@include breakpoints.desktop-up {
+			margin-bottom: map.get( units.$spacing, 'large' );
+		}
+
+		&-accordion {
+			margin-bottom: map.get( units.$spacing, 'small' );
+		}
+
+		details {
+			summary {
+				position: relative;
+				list-style-type: none;
+				font-size: 18px;
+				font-weight: bold;
+				padding: 14px 46px 14px 14px;
+				cursor: pointer;
+
+				&::-webkit-details-marker {
+					display: none;
+				}
+
+				svg {
+					position: absolute;
+					right: 14px;
+					top: 50%;
+					margin-top: -5px;
+				}
+			}
+
+			> div {
+				padding: 0 46px 14px 14px;
+			}
+
+			&[open] summary svg {
+				transform: rotate( 180deg );
+			}
+
+			&:nth-child( 1 ) {
+				--chevron-stroke: var( --usage-1-color );
+				background: var( --usage-1-background );
+				summary {
+					color: var( --usage-1-color );
+				}
+			}
+
+			&:nth-child( 2 ) {
+				--chevron-stroke: var( --usage-2-color );
+				background: var( --usage-2-background );
+				summary {
+					color: var(--usage-2-color);
+				}
+			}
+
+			&:nth-child( 3 ) {
+				--chevron-stroke: var( --usage-3-color );
+				background: var( --usage-3-background );
+				summary {
+					color: var(--usage-3-color);
+				}
+			}
+
+			&:nth-child( 4 ) {
+				--chevron-stroke: var( --usage-4-color );
+				background: var( --usage-4-background );
+				summary {
+					color: var(--usage-4-color);
+				}
+			}
+		}
+	}
+
+	&-benefits {
+		background: var( --benefits-background );
+		margin: 0 ( -( map.get( units.$spacing, 'small' ) ) ) map.get( units.$spacing, 'small' );
+		padding: map.get( units.$spacing, 'small' );
+
+		@include breakpoints.tablet-up {
+			margin: 0 ( -( map.get( units.$spacing, 'large' ) ) ) map.get( units.$spacing, 'large' );
+			padding: map.get( units.$spacing, 'large' );
+		}
+
+		h2 {
+			margin-bottom: map.get( units.$spacing, 'medium' );
+
+			@include breakpoints.tablet-up {
+				text-align: center;
+				margin-bottom: map.get( units.$spacing, 'large' );
+			}
+		}
+
+		ul {
+			list-style-type: none;
+			padding: 0;
+			margin: 0;
+
+			li {
+				display: flex;
+				margin-bottom: map.get( units.$spacing, 'medium' );
+
+				@include breakpoints.tablet-up {
+					font-size: 18px;
+					margin-bottom: map.get( units.$spacing, 'large' );
+					margin-right: map.get( units.$spacing, 'large' );
+				}
+
+				@include breakpoints.desktop-up {
+					font-size: 20px;
+					margin-bottom: map.get( units.$spacing, 'x-large' );
+					margin-right: map.get( units.$spacing, 'xx-large' );
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+
+	&-benefits-icon {
+		display: block;
+		width: 48px;
+		height: 52px;
+		margin-right: map.get( units.$spacing, 'x-small' );
+
+		svg {
+			width: 48px;
+			height: 52px;
+		}
+
+		@include breakpoints.tablet-up {
+			width: 60px;
+			height: 65px;
+			margin: 0 map.get( units.$spacing, 'large' ) 0;
+
+			svg {
+				width: 60px;
+				height: 65px;
+			}
+		}
+
+		@include breakpoints.desktop-up {
+			margin: 0 map.get( units.$spacing, 'xx-large' ) 0;
+		}
+	}
+
+	&-revenue-comparison {
+		margin: 0 0 map.get( units.$spacing, 'small' );
+
+		h3 {
+			font-size: 18px;
+			font-weight: bold;
+		}
+
+		&-content {
+			margin-bottom: map.get( units.$spacing, 'small' );
+
+			@include breakpoints.desktop-up {
+				margin-bottom: map.get( units.$spacing, 'large' );
+			}
+		}
+
+		@include breakpoints.tablet-up {
+			display: flex;
+			margin: 0 ( -( map.get( units.$spacing, 'small' ) ) ) map.get( units.$spacing, 'large' );
+
+			&-content,
+			&-companies {
+				width: 50%;
+				padding: 0 map.get( units.$spacing, 'small' );
+				margin-bottom: 0;
+			}
+		}
+
+		ul {
+			list-style-type: none;
+			padding: 0;
+
+			li {
+				display: flex;
+			}
+
+			li:last-child {
+				.use-of-funds-companies-company {
+					font-weight: bold;
+				}
+				.use-of-funds-companies-budget-line {
+					background: var( --budget-line-background-wikipedia );
+				}
+			}
+		}
+	}
+
+	&-companies {
+		&-company {
+			flex: 0 0 80px;
+		}
+		&-graph {
+			flex: 1 0 auto;
+			display: flex;
+			padding: 5px 0;
+			align-items: center;
+		}
+		&-number {
+			flex: 0 0 85px;
+			text-align: right;
+			white-space: nowrap;
+		}
+		&-link {
+			flex: 0 0 50px;
+			font-size: 14px;
+			text-align: right;
+		}
+		&-budget-line {
+			background: var( --budget-line-background );
+			min-width: 3px;
+			height: 10px;
+		}
+	}
+}
 </style>
diff --git a/src/components/pages/use_of_funds/BenefitsIcon.vue b/src/components/pages/use_of_funds/BenefitsIcon.vue
new file mode 100644
index 000000000..d900c0cc6
--- /dev/null
+++ b/src/components/pages/use_of_funds/BenefitsIcon.vue
@@ -0,0 +1,105 @@
+<template>
+	<!-- eslint-disable -->
+	<span class="use-of-funds-benefits-icon">
+		<svg v-if="icon === 'hand'" width="100%" height="100%" viewBox="0 0 46 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round;stroke-miterlimit: 2;">
+			<rect id="Hand" x="0" y="0" width="46" height="43" style="fill: none;"/>
+			<clipPath id="_clip1">
+				<rect id="Hand1" x="0" y="0" width="46" height="43"/>
+			</clipPath>
+			<g clip-path="url(#_clip1)">
+				<g>
+					<path d="M23.359,1.972C22.851,1.972 22.402,2.147 22.127,2.288C21.095,2.808 20.285,3.87 20.11,4.929C19.817,6.711 20.583,8.767 22.39,11.04C23.959,13.019 25.818,14.739 27.923,16.162C30.246,13.765 31.817,10.709 33.338,7.748C34.137,6.197 34.865,4.145 33.808,3.173C33.111,2.53 31.866,2.686 31.05,3.158C29.994,3.768 29.196,4.892 28.493,5.883C28.438,5.962 28.373,6.029 28.301,6.086C28.297,6.557 27.942,6.969 27.45,7.042C26.899,7.117 26.392,6.755 26.312,6.224C25.961,3.965 25.303,2.677 24.241,2.169C23.941,2.026 23.642,1.972 23.359,1.972ZM28.052,18.395C27.865,18.395 27.677,18.345 27.509,18.24C24.936,16.618 22.682,14.597 20.806,12.237C18.649,9.518 17.75,6.956 18.136,4.618C18.411,2.953 19.616,1.358 21.207,0.554C22.525,-0.112 23.917,-0.16 25.121,0.417C26.494,1.073 27.268,2.301 27.725,3.581C28.349,2.792 29.08,2.029 30.033,1.479C31.467,0.65 33.691,0.38 35.181,1.753C36.748,3.195 36.731,5.506 35.128,8.624C33.489,11.811 31.632,15.422 28.744,18.124C28.553,18.303 28.304,18.395 28.052,18.395Z" style="fill: var( --benefits-list-icon );"/>
+				</g>
+				<path d="M27.75,33.115C27.162,33.115 26.512,33.079 25.793,33.006C25.71,32.998 25.627,32.978 25.548,32.946L18.033,29.922C17.556,29.73 17.321,29.174 17.505,28.68C17.69,28.188 18.227,27.943 18.704,28.134L26.099,31.111C29.733,31.463 30.125,30.659 30.129,30.65C30.284,30.294 29.645,29.171 28.821,28.334C28.058,27.934 23.35,25.555 16.622,24.167C14.239,23.677 13.449,24.091 13.441,24.095C13.033,24.41 12.481,24.305 12.175,23.883C11.868,23.458 11.98,22.837 12.389,22.519C12.67,22.302 13.832,21.638 16.982,22.288C24.595,23.856 29.592,26.585 29.801,26.7C29.873,26.741 29.938,26.79 29.998,26.846C30.446,27.282 32.643,29.545 31.815,31.44C31.321,32.569 30.013,33.115 27.75,33.115Z" style="fill: var( --benefits-list-icon );"/>
+				<g>
+					<path d="M28.856,40.621C27.657,40.621 26.34,40.403 24.723,40.111C20.979,39.432 16.329,36.983 16.133,36.88C15.653,36.625 15.464,36.019 15.712,35.525C15.958,35.03 16.549,34.834 17.028,35.091C17.074,35.115 21.613,37.504 25.062,38.129C29.151,38.87 30.576,38.999 33.278,36.762C35.913,34.58 41.955,25.335 43.247,23.341C43.106,22.942 42.831,22.405 42.395,22.216C41.795,21.955 40.944,22.385 40.331,22.791C38.725,23.862 37.697,25.378 36.608,26.982C35.323,28.875 33.995,30.831 31.678,31.94C31.189,32.172 30.607,31.956 30.379,31.452C30.15,30.949 30.363,30.35 30.852,30.116C32.692,29.234 33.816,27.58 35.005,25.829C36.154,24.137 37.341,22.387 39.27,21.103C40.74,20.122 42.052,19.874 43.171,20.369C44.819,21.097 45.228,23.101 45.27,23.326C45.317,23.582 45.266,23.847 45.126,24.065C44.823,24.537 37.686,35.694 34.505,38.329C32.423,40.054 30.793,40.621 28.856,40.621Z" style="fill: var( --benefits-list-icon );"/>
+				</g>
+				<path d="M2.336,27.79L8.821,40.051L16.647,37.482L10.43,23.346L2.336,27.79ZM8.32,42.202C7.951,42.202 7.598,42.006 7.423,41.674L0.109,27.846C-0.133,27.386 0.041,26.824 0.507,26.568L10.416,21.128C10.667,20.99 10.962,20.962 11.238,21.052C11.51,21.14 11.73,21.337 11.842,21.59L18.921,37.685C19.03,37.932 19.026,38.213 18.912,38.457C18.799,38.701 18.583,38.889 18.319,38.976L8.645,42.15C8.537,42.186 8.428,42.202 8.32,42.202Z" style="fill: var( --benefits-list-icon );"/>
+			</g>
+		</svg>
+
+		<svg v-if="icon === 'smartphone'" width="100%" height="100%" viewBox="0 0 28 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule: evenodd;clip-rule: evenodd;stroke-linejoin: round;stroke-miterlimit: 2;">
+			<g>
+				<path d="M25.606,44.28C25.606,47.186 23.241,49.551 20.335,49.551L7.363,49.551C4.456,49.551 2.091,47.186 2.091,44.28L2.091,8.363C2.091,5.456 4.456,3.091 7.363,3.091L20.335,3.091C23.241,3.091 25.606,5.456 25.606,8.363L25.606,44.28ZM20.335,1L7.363,1C3.303,1 0.001,4.303 0.001,8.363L0.001,44.28C0.001,48.34 3.303,51.641 7.363,51.641L20.335,51.641C24.394,51.641 27.697,48.34 27.697,44.28L27.697,8.363C27.697,4.303 24.394,1 20.335,1Z" style="fill: var( --benefits-list-icon );"/>
+			</g>
+			<path d="M21.829,17.859L19.277,17.859C18.797,17.859 18.409,18.248 18.409,18.728C18.409,19.196 18.781,19.571 19.244,19.589L16.099,27.198L14.41,23.53L16.272,19.592L16.544,19.596L16.556,19.596C17.03,19.596 17.418,19.215 17.425,18.74C17.432,18.26 17.048,17.866 16.568,17.859L14.715,17.833C14.256,17.85 13.841,18.21 13.834,18.689C13.829,19.062 14.062,19.378 14.391,19.505L13.461,21.471L12.572,19.541C12.911,19.426 13.16,19.117 13.165,18.74C13.172,18.26 12.788,17.866 12.308,17.859L10.455,17.833C10.014,17.85 9.581,18.21 9.574,18.689C9.567,19.169 9.951,19.563 10.431,19.57L10.675,19.573L12.492,23.52L10.86,26.971L8.187,19.569C8.6,19.503 8.922,19.16 8.922,18.728C8.922,18.248 8.533,17.859 8.053,17.859L5.501,17.859C5.021,17.859 4.632,18.248 4.632,18.728C4.632,19.208 5.021,19.596 5.501,19.596L6.35,19.596L9.935,29.526C10.055,29.856 10.36,30.082 10.711,30.098C10.725,30.099 10.739,30.099 10.752,30.099C11.087,30.099 11.393,29.907 11.538,29.602L13.44,25.58L15.353,29.732C15.495,30.041 15.803,30.237 16.142,30.237L16.159,30.237C16.504,30.231 16.813,30.02 16.945,29.701L21.121,19.596L21.829,19.596C22.309,19.596 22.698,19.208 22.698,18.728C22.698,18.248 22.309,17.859 21.829,17.859Z" style="fill: var( --benefits-list-icon );"/>
+			<path d="M13.931,45.072C12.989,45.072 12.222,44.306 12.222,43.364C12.222,42.422 12.989,41.656 13.931,41.656C14.873,41.656 15.639,42.422 15.639,43.364C15.639,44.306 14.873,45.072 13.931,45.072ZM13.931,39.918C12.031,39.918 10.485,41.464 10.485,43.364C10.485,45.264 12.031,46.81 13.931,46.81C15.831,46.81 17.377,45.264 17.377,43.364C17.377,41.464 15.831,39.918 13.931,39.918Z" style="fill: var( --benefits-list-icon );"/>
+		</svg>
+
+		<svg v-if="icon === 'world'" width="43" height="41" viewBox="0 0 43 41" fill="none"
+			xmlns="http://www.w3.org/2000/svg">
+			<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="41" height="41">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.263306H41.7376V40.9589H1V0.263306Z" fill="white"/>
+			</mask>
+			<g mask="url(#mask0)">
+				<path fill-rule="evenodd" clip-rule="evenodd"
+					d="M21.3682 2.33571C11.2807 2.33571 3.07636 10.5334 3.07636 20.6109C3.07636 30.6883 11.2807 38.8861 21.3682 38.8861C31.4557 38.8861 39.6615 30.6883 39.6615 20.6109C39.6615 10.5334 31.4557 2.33571 21.3682 2.33571ZM21.3682 40.9589C10.1371 40.9589 1 31.8323 1 20.6109C1 9.39096 10.1371 0.262878 21.3682 0.262878C32.6007 0.262878 41.7379 9.39096 41.7379 20.6109C41.7379 31.8323 32.6007 40.9589 21.3682 40.9589Z"
+					style="fill: var( --benefits-list-icon );"/>
+			</g>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M14.8965 5.93539C14.723 6.03955 14.5511 6.14519 14.3805 6.25083C13.7261 6.65406 13.4331 7.08705 13.4273 7.22096C13.4579 7.22394 13.6736 7.25667 13.8471 7.16442C14.2246 6.96801 14.5467 6.46807 14.8309 6.02764C14.8513 5.99491 14.8717 5.96515 14.8965 5.93539ZM18.9077 40C18.7153 40 18.5243 39.9435 18.3582 39.8378C16.4386 38.6073 16.2039 36.3531 15.9984 34.3667C15.8833 33.2493 15.7739 32.1928 15.4125 31.3269C14.8979 30.0904 13.8033 29.1515 12.6431 28.1561C12.3953 27.9433 12.149 27.7306 11.907 27.5163C9.78485 25.6251 8.78789 23.6968 8.93947 21.7833C9.09251 19.8728 10.4772 18.0873 12.4682 17.2362C14.2683 16.4684 16.2243 16.516 17.7256 16.644C19.1088 16.7392 20.1422 15.0058 20.7369 13.1057C18.7882 12.3216 16.443 12.881 14.7347 13.5432C13.9243 13.8571 13.1299 14.2231 12.3356 14.5877C10.7221 15.3302 9.05316 16.0994 7.22976 16.4521C6.93096 16.5101 6.62051 16.4297 6.38438 16.2333C6.14826 16.0369 6.00979 15.7438 6.00396 15.4313C5.98938 14.3065 5.96461 12.6058 6.94991 11.3291C8.00955 9.94982 9.7659 9.63587 10.9961 9.51832L11.5427 9.47071C12.079 9.42756 12.6023 9.38441 13.0804 9.28621C12.4842 9.16717 11.9362 8.82495 11.6112 8.21341C10.9494 6.97099 11.6155 5.49199 13.3107 4.44747C14.6604 3.61274 16.0596 2.82711 17.472 2.10993C17.985 1.85103 18.6016 2.06529 18.8567 2.58607C19.1103 3.10684 18.9018 3.73921 18.3902 3.9996C17.4224 4.49062 16.4604 5.01585 15.5174 5.56639C15.5728 5.55597 15.634 5.55002 15.6938 5.55151C16.0188 5.55151 16.3249 5.70774 16.5202 5.97408C16.9793 6.59901 17.1411 7.39356 16.9779 8.21639C16.7767 9.22669 16.1019 10.1819 15.2157 10.7102C14.0963 11.3782 12.8268 11.4824 11.7074 11.5746L11.187 11.6178C9.83732 11.7472 9.00652 12.0686 8.57363 12.6311C8.28795 13.0016 8.15968 13.4911 8.10429 14.058C9.23244 13.7039 10.3358 13.195 11.4873 12.6653C12.3181 12.2829 13.1533 11.899 14.003 11.5717C16.3453 10.664 19.721 9.93792 22.4933 11.649C22.878 11.8856 23.0675 12.3498 22.964 12.7962C22.2863 15.6947 20.5095 19.0128 17.5536 18.745C16.2885 18.6408 14.6545 18.5887 13.2655 19.1824C12.2102 19.6333 11.101 20.6644 10.9975 21.9559C10.9028 23.1641 11.6651 24.5018 13.2655 25.9287C13.4972 26.134 13.7348 26.3364 13.9724 26.5417C15.2682 27.6517 16.6062 28.8004 17.3146 30.5026C17.7956 31.6587 17.9267 32.9219 18.0535 34.1435C18.176 35.3368 18.2882 36.4171 18.6963 37.1967L24.289 27.2232C25.111 25.759 25.78 24.4422 25.6547 23.1492C25.5935 22.5258 25.1737 21.8577 24.6344 21.5244C24.4012 21.3831 24.0543 21.2432 23.7001 21.389C23.2351 21.5809 22.7017 21.4039 22.4379 20.9709C22.1711 20.5364 22.2484 19.9725 22.6215 19.6288C25.7494 16.7437 31.1686 14.79 35.2439 15.0698C35.5762 15.0936 36.1301 15.1338 36.6067 15.5132C37.3078 16.0682 37.3618 16.9312 37.3953 17.446L37.455 18.4652C37.5891 20.8772 37.7932 24.5211 38.8368 26.1816C39.1443 26.6726 39.0044 27.3243 38.5249 27.6383C38.041 27.9508 37.404 27.8094 37.0965 27.3199C35.7614 25.1921 35.5486 21.3741 35.3926 18.5858L35.3328 17.5844C35.3285 17.4847 35.3168 17.3076 35.2949 17.1901C35.2279 17.1826 35.1477 17.1767 35.0982 17.1737C32.2997 16.9639 28.5917 18.0739 25.8398 19.8073C26.863 20.5022 27.5903 21.7134 27.7098 22.9424C27.911 25.0091 26.8543 26.8943 26.0832 28.2707L19.8041 39.4688C19.6641 39.7188 19.4309 39.8988 19.1584 39.9688C19.0753 39.9896 18.9922 40 18.9077 40Z"
+				style="fill: var( --benefits-list-icon );"/>
+		</svg>
+
+		<svg v-if="icon === 'megaphone'" width="48" height="40" viewBox="0 0 48 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M5.35351 26.3994L7.97715 30.8601L31.3683 24.0597L24.235 9.93396L5.35351 26.3994ZM7.09883 33L3 26.0299L24.8189 7L34 25.1777L7.09883 33Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M18.2456 37.0159C17.2088 37.0159 16.1768 36.7438 15.2712 36.2154C13.8712 35.3992 12.876 34.0326 12.5432 32.4646C12.4392 31.9771 12.756 31.5006 13.2536 31.3984C13.7432 31.2993 14.2344 31.6091 14.34 32.0966C14.5704 33.1849 15.2344 34.0971 16.2072 34.6632C17.1832 35.2309 18.3128 35.3662 19.3976 35.0454L22.636 34.0813C24.3624 33.5686 25.3672 31.7617 24.8792 30.0553L24.5 28.7438C24.3608 28.2641 24.6456 27.7656 25.1336 27.6303C25.6184 27.4904 26.1288 27.7734 26.2664 28.2515L26.644 29.5647C27.4056 32.2115 25.8456 35.0123 23.1672 35.8081L19.9288 36.7721C19.3784 36.9357 18.812 37.0159 18.2456 37.0159Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M32.5966 16.6337C32.235 16.6337 31.8942 16.423 31.7486 16.0754C31.555 15.6147 31.7774 15.0878 32.2462 14.8975L46.4062 9.16366C46.8702 8.97336 47.4126 9.19196 47.6046 9.65275C47.7982 10.1135 47.5742 10.6404 47.1054 10.8307L32.947 16.5661C32.8318 16.6117 32.7134 16.6337 32.5966 16.6337Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M30.5136 12.335C30.2464 12.335 29.9792 12.2202 29.7984 11.9985C29.48 11.6101 29.544 11.0423 29.9392 10.7294L38.152 4.23276C38.544 3.92137 39.1264 3.98113 39.4432 4.36958C39.76 4.75802 39.6976 5.32418 39.3024 5.63713L31.088 12.1353C30.92 12.269 30.7168 12.335 30.5136 12.335Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M35.0346 21.7417C34.5962 21.7417 34.2074 21.4303 34.1322 20.99C34.0474 20.4993 34.3834 20.0338 34.8826 19.9505L45.7034 18.145C46.1978 18.057 46.6746 18.392 46.761 18.8826C46.8458 19.3749 46.5098 19.8404 46.009 19.9237L35.1898 21.7291C35.137 21.7386 35.0858 21.7417 35.0346 21.7417Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="43" height="40">
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.27832H42.4176V40H0V0.27832Z" fill="white"/>
+			</mask>
+			<g mask="url(#mask0)">
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M5.9776 2.24099C3.7824 2.24099 1.9968 3.99606 1.9968 6.15531V34.1217C1.9968 36.281 3.7824 38.0376 5.9776 38.0376H36.44C38.6352 38.0376 40.4208 36.281 40.4208 34.1217V6.15531C40.4208 3.99606 38.6352 2.24099 36.44 2.24099H5.9776ZM36.44 40.0003H5.9776C2.68 40.0003 0 37.363 0 34.1217V6.15531C0 2.91408 2.68 0.27832 5.9776 0.27832H36.44C39.7376 0.27832 42.4176 2.91408 42.4176 6.15531V34.1217C42.4176 37.363 39.7376 40.0003 36.44 40.0003Z"
+				style="fill: var( --benefits-list-icon );"/>
+			</g>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M1.4514 8.2161C0.960199 8.2161 0.561799 7.82608 0.558599 7.34328C0.556999 6.8589 0.953799 6.46417 1.4466 6.46259L40.8642 6.28174H40.869C41.3586 6.28174 41.757 6.67176 41.7602 7.15456C41.7618 7.63893 41.365 8.03367 40.8738 8.03524L1.4562 8.2161H1.4514Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M7.61062 4.33201C7.61062 5.05072 7.01862 5.6326 6.28742 5.6326C5.55782 5.6326 4.96582 5.05072 4.96582 4.33201C4.96582 3.61331 5.55782 3.03143 6.28742 3.03143C7.01862 3.03143 7.61062 3.61331 7.61062 4.33201Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M10.736 4.33201C10.736 5.05072 10.144 5.6326 9.41437 5.6326C8.68317 5.6326 8.09277 5.05072 8.09277 4.33201C8.09277 3.61331 8.68317 3.03143 9.41437 3.03143C10.144 3.03143 10.736 3.61331 10.736 4.33201Z"
+				style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd"
+				d="M14.1028 4.33201C14.1028 5.05072 13.5108 5.6326 12.7796 5.6326C12.05 5.6326 11.458 5.05072 11.458 4.33201C11.458 3.61331 12.05 3.03143 12.7796 3.03143C13.5108 3.03143 14.1028 3.61331 14.1028 4.33201Z"
+				style="fill: var( --benefits-list-icon );"/>
+		</svg>
+
+		<svg v-if="icon === 'twentyfourseven'" width="37" height="43" viewBox="0 0 37 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="5" width="35" height="38">
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M2.23926 5.88763H36.7962V42.6058H2.23926V5.88763Z" fill="white"/>
+			</mask>
+			<g mask="url(#mask0)">
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M3.34286 42.6058C3.06724 42.6058 2.79161 42.5012 2.57724 42.2905C2.13828 41.8572 2.12516 41.1414 2.54807 40.6902L34.8968 6.23471C35.3197 5.78495 36.0197 5.77 36.4572 6.20333C36.8977 6.63666 36.9122 7.3524 36.4893 7.80216L4.13766 42.2591C3.92182 42.4892 3.63307 42.6058 3.34286 42.6058Z" style="fill: var( --benefits-list-icon );"/>
+			</g>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M25.0852 39.5769C24.8858 39.5769 24.6835 39.5178 24.5027 39.3965C23.9962 39.0555 23.8485 38.3462 24.1698 37.8112L31.9678 24.9022L25.5329 24.7067C24.9346 24.6885 24.4611 24.161 24.4783 23.5275C24.4955 22.8954 25.0092 22.4407 25.5946 22.4135L33.9449 22.6651C34.3352 22.6772 34.6896 22.9106 34.8732 23.2759C35.0569 23.6411 35.0397 24.0807 34.8302 24.4293L26.0035 39.0464C25.7954 39.389 25.4439 39.5769 25.0852 39.5769Z" style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M9.93671 22.4135H9.92688L1.34652 22.327C0.919538 22.3226 0.537502 22.0531 0.374575 21.643C0.211648 21.2313 0.29873 20.7596 0.597897 20.4418C3.48002 17.3802 11.028 7.93623 8.0181 4.79557C7.03352 3.7687 6.07843 3.31752 5.1739 3.45375C3.64576 3.68374 2.36341 5.54704 1.99823 6.24432C1.71872 6.78339 1.07404 6.98114 0.557166 6.6911C0.041698 6.39959 -0.150725 5.73015 0.127375 5.19108C0.200411 5.04899 1.9575 1.70324 4.85928 1.25939C6.46187 1.02062 8.03355 1.67541 9.52097 3.22817C13.5899 7.46894 7.09813 16.2068 3.76936 20.1341L9.94654 20.1957C10.535 20.2015 11.0056 20.704 11 21.3148C10.9943 21.9242 10.5196 22.4135 9.93671 22.4135Z" style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M14.136 14.3365C13.7789 14.3365 13.4398 14.1712 13.2253 13.8888C12.9912 13.583 12.9357 13.1821 13.0767 12.8281L17.8162 0.90836C18.0427 0.339221 18.7014 0.0568463 19.2865 0.276308C19.8701 0.497234 20.1627 1.13806 19.9346 1.71013L15.8478 11.9897L23.7784 11.3943C24.386 11.3416 24.9486 11.8039 24.9966 12.414C25.0446 13.0241 24.5765 13.5567 23.9509 13.6035L14.223 14.3336C14.1945 14.3351 14.166 14.3365 14.136 14.3365Z" style="fill: var( --benefits-list-icon );"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M21 19.3846C20.4478 19.3846 20 18.8712 20 18.238V8.41579C20 7.78268 20.4478 7.26923 21 7.26923C21.5522 7.26923 22 7.78268 22 8.41579V18.238C22 18.8712 21.5522 19.3846 21 19.3846Z" style="fill: var( --benefits-list-icon );"/>
+		</svg>
+	</span>
+</template>
+
+<script setup lang="ts">
+/* stylelint-disable */
+interface Props {
+	icon: 'hand' | 'smartphone' | 'world' | 'megaphone' | 'twentyfourseven';
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/src/components/pages/use_of_funds/CallToAction.vue b/src/components/pages/use_of_funds/CallToAction.vue
new file mode 100644
index 000000000..6b266f7a7
--- /dev/null
+++ b/src/components/pages/use_of_funds/CallToAction.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="call-to-action">
+		<a href="https://spenden.wikimedia.de">{{ text }}</a>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	text: string;
+}
+
+defineProps<Props>();
+
+</script>
+
+<style lang="scss">
+@use '@src/scss/settings/colors';
+@use '@src/scss/settings/units';
+@use '@src/scss/settings/breakpoints';
+@use "sass:color";
+@use "sass:map";
+
+.call-to-action {
+	text-align: center;
+	margin-bottom: map.get( units.$spacing, 'small' );
+
+	@include breakpoints.tablet-up {
+		margin-bottom: map.get( units.$spacing, 'large' );
+	}
+
+	a {
+		padding: map.get( units.$spacing, 'small' ) map.get( units.$spacing, 'large' );
+		border: 0;
+		border-radius: 5px;
+		background: var( --call-to-action-background );
+		color: var( --call-to-action-color );
+		font-size: 18px;
+		font-weight: bold;
+		cursor: pointer;
+		display: inline-block;
+		&:hover,
+		&:focus {
+			color: var( --call-to-action-color );
+			background: var( --call-to-action-background-hover );
+			text-decoration: none;
+		}
+	}
+}
+</style>
diff --git a/src/components/pages/use_of_funds/Company.ts b/src/components/pages/use_of_funds/Company.ts
deleted file mode 100644
index a3641fd30..000000000
--- a/src/components/pages/use_of_funds/Company.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Company {
-	name: string;
-	budget: number;
-	budgetString: string;
-	budgetCitation?: string
-}
diff --git a/src/components/pages/use_of_funds/CompanyBudgets.vue b/src/components/pages/use_of_funds/CompanyBudgets.vue
deleted file mode 100644
index b1726ad33..000000000
--- a/src/components/pages/use_of_funds/CompanyBudgets.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-	<ul class="company_budgets">
-		<li
-			class="company_budgets__row"
-			v-for="company in companies"
-			:key="company.name"
-			:class="`company_budgets__row--${ company.name.toLowerCase() }`"
-		>
-			<span class="company_budgets__col--company">{{ company.name }}</span>
-			<span class="company_budgets__col--graph">
-				<span class="company_budgets__budget_line" :style="{ width: ( company.budget / highestBudget * 100 ) + '%' }">&#xa0;</span>
-			</span>
-			<span class="company_budgets__col--number">
-				{{ company.budgetString }}
-			</span>
-			<span class="company_budgets__col--citation">
-				<CompanyCitation :company="company" :citation-label="citationLabel"/>
-			</span>
-		</li>
-	</ul>
-</template>
-
-<script setup lang="ts">
-
-import { computed } from 'vue';
-import CompanyCitation from './CompanyCitation.vue';
-import { Company } from '@src/components/pages/use_of_funds/Company';
-
-interface Props {
-	companies: Company[];
-	citationLabel: string;
-}
-
-const props = defineProps<Props>();
-
-const highestBudget = computed( () => props.companies.reduce( ( budget: number, company: Company ) =>
-	Math.max( budget, company.budget ), 0 )
-);
-
-</script>
diff --git a/src/components/pages/use_of_funds/CompanyCitation.vue b/src/components/pages/use_of_funds/CompanyCitation.vue
deleted file mode 100644
index f6d031ef6..000000000
--- a/src/components/pages/use_of_funds/CompanyCitation.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<a v-if="company.budgetCitation"
-		class="company_budgets__citation_link"
-		:href=company.budgetCitation
-		target="_blank">
-		{{ citationLabel }}
-	</a>
-	<span v-else>&nbsp;</span>
-</template>
-
-<script setup lang="ts">
-
-import { Company } from '@src/components/pages/use_of_funds/Company';
-
-interface Props {
-	company: Company;
-	citationLabel: String;
-}
-
-defineProps<Props>();
-
-</script>
diff --git a/src/components/pages/use_of_funds/FundsDistributionAccordion.vue b/src/components/pages/use_of_funds/FundsDistributionAccordion.vue
deleted file mode 100644
index e38e2ccbc..000000000
--- a/src/components/pages/use_of_funds/FundsDistributionAccordion.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-	<div class="funds_distribution_accordion">
-		<details
-			v-for="( fundsItem, index ) in applicationOfFundsData"
-			:key="index"
-			class="funds_distribution_info_item"
-			:style="{ 'border-left': `10px solid ${ fundsItem.colour }` }"
-		>
-			<summary
-				class="funds_distribution_info_item__title"
-				tabindex="0"
-			>
-				{{ fundsItem.title }} {{ fundsItem.percentage }}%
-			</summary>
-			<div class="funds_distribution_info_item__text">
-				{{ fundsItem.text }}
-			</div>
-		</details>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { FundsItem } from '@src/view_models/useOfFunds';
-
-interface Props {
-	applicationOfFundsData: FundsItem[]
-}
-
-defineProps<Props>();
-</script>
diff --git a/src/components/pages/use_of_funds/UseOfFundsContent.ts b/src/components/pages/use_of_funds/UseOfFundsContent.ts
new file mode 100644
index 000000000..76d9735d5
--- /dev/null
+++ b/src/components/pages/use_of_funds/UseOfFundsContent.ts
@@ -0,0 +1,40 @@
+interface AccordionItem {
+	title: string;
+	content: string;
+}
+
+interface BenefitsItem {
+	icon: 'hand' | 'smartphone' | 'world' | 'megaphone' | 'twentyfourseven';
+	content: string;
+}
+
+interface RevenueComparisonItem {
+	name: string;
+	budget: number;
+	budgetString: string;
+	link: string;
+	linkText: string;
+}
+
+export interface UseOfFundsContent {
+	title: string;
+	summary: string;
+	callToAction: string;
+	accordion: {
+		items: AccordionItem[];
+		summary: string;
+	};
+	benefits: {
+		title: string;
+		items: BenefitsItem[];
+	};
+	revenueComparison: {
+		title: string;
+		content: string[];
+		companies: {
+			title: string;
+			items: RevenueComparisonItem[];
+		};
+	};
+	closingParagraph: string;
+}
diff --git a/src/components/shared/icons/ChevronDown.vue b/src/components/shared/icons/ChevronDown.vue
index af9587d59..999f8a469 100644
--- a/src/components/shared/icons/ChevronDown.vue
+++ b/src/components/shared/icons/ChevronDown.vue
@@ -1,5 +1,5 @@
 <template>
 	<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="chevron-down-icon">
-		<path d="M2 1.5L9 8.5L16 1.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M2 1.5L9 8.5L16 1.5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="stroke: var( --chevron-stroke )"/>
 	</svg>
 </template>
diff --git a/src/scss/use_of_funds/CompanyBudgets.scss b/src/scss/use_of_funds/CompanyBudgets.scss
deleted file mode 100644
index 6c2a7628d..000000000
--- a/src/scss/use_of_funds/CompanyBudgets.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use "../settings/colors";
-
-.use_of_funds .company_budgets {
-	list-style-type: none;
-	padding: 0;
-
-	&__row {
-		display: flex;
-	}
-
-	&__col {
-		&--company {
-			flex: 0 0 80px;
-		}
-		&--graph {
-			flex: 1 0 auto;
-			display: flex;
-			padding: 5px 0;
-			align-items: center;
-		}
-		&--number {
-			flex: 0 0 85px;
-			text-align: right;
-			white-space: nowrap;
-		}
-		&--citation {
-			flex: 0 0 50px;
-			font-size: 14px;
-			text-align: right;
-		}
-	}
-
-	&__budget_line {
-		background: #cecece;
-		min-width: 3px;
-		height: 10px;
-	}
-
-	&__row--wikipedia {
-		.company_budgets__col--company {
-			font-weight: bold;
-		}
-		.company_budgets__budget_line {
-			background: colors.$primary;
-		}
-	}
-}
diff --git a/src/scss/use_of_funds/FundsContent.scss b/src/scss/use_of_funds/FundsContent.scss
deleted file mode 100644
index 6610bce94..000000000
--- a/src/scss/use_of_funds/FundsContent.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-@use "../settings/colors";
-@use 'sass:color';
-@import './variables';
-@import '../variables';
-$padding: 32px;
-$padding_mobile: 16px;
-
-.use_of_funds {
-	background-color: #ffffff;
-	padding: $padding_mobile;
-	line-height: 1.5;
-	margin: -18px;
-	@media ( min-width: $use_of_funds_breakpoint_l ) {
-		padding: $padding;
-	}
-
-	h2 {
-		font-size: 24px;
-		font-weight: bold;
-		border: 0;
-		padding-top: 0;
-	}
-
-	h3 {
-		font-size: 1em;
-		font-weight: bold;
-		margin-top: 1em;
-	}
-	&__content {
-		font-size: 14px;
-	}
-	&__column--info {
-		flex: 1 1 auto;
-		flex-basis: 50%;
-		font-size: 12px;
-		padding-bottom: 12px;
-
-		a {
-			white-space: nowrap;
-		}
-	}
-	&__info_text {
-		margin-bottom: 18px;
-	}
-	&__section--two-cols {
-		@media ( min-width: $use_of_funds_breakpoint_l ) {
-			display: flex;
-		}
-	}
-	&__section--orgchart {
-		padding-top: $padding;
-		@media ( min-width: $use_of_funds_breakpoint_s ) {
-			display: flex;
-		}
-		@media ( min-width: $use_of_funds_breakpoint_l ) {
-			font-size: 18px;
-		}
-	}
-	&__section--call_to_action {
-		text-align: center;
-		padding: $padding 0;
-	}
-	&__column {
-		flex: 1 1 auto;
-		flex-basis: 50%;
-		display: flex;
-		flex-direction: column;
-	}
-	&__section_intro {
-		margin-bottom: 34px;
-		width: 100%;
-
-		@media ( min-width: $use_of_funds_breakpoint_s ) {
-			display: table;
-		}
-		h1 {
-			@media ( min-width: $use_of_funds_breakpoint_s ) {
-				display: table-cell;
-				width: 30%;
-			}
-		}
-		div {
-			@media ( min-width: $use_of_funds_breakpoint_s ) {
-				font-size: 18px;
-				display: table-cell;
-				padding-left: 72px;
-			}
-		}
-	}
-
-	&__benefits_list {
-		background: #f4f4f4;
-		padding: $padding_mobile;
-		margin: $padding_mobile (-$padding_mobile) 0 (-$padding_mobile);
-		flex: 1 1 auto;
-		@media ( min-width: $use_of_funds_breakpoint_l ) {
-			padding: $padding;
-			margin: 0;
-		}
-	}
-	&__comparison {
-		background: #ebebeb;
-		padding: $padding_mobile;
-		flex: 1 1 auto;
-		margin: 0 (-$padding_mobile);
-		@media ( min-width: $use_of_funds_breakpoint_l ) {
-			padding: $padding;
-			margin: 0;
-		}
-	}
-
-	&__icon-list {
-		margin: 0;
-		padding: 0;
-
-		li {
-			margin: 0 0 14px 90px;
-			padding: 0;
-			position: relative;
-			list-style: none;
-
-			&:before {
-				content: ' ';
-				position: absolute;
-				left: -90px;
-				width: 48px;
-				height: 52px;
-				background-repeat: no-repeat;
-				background-position-x: center;
-			}
-		}
-
-		&_item--hand:before {
-			background: url( '/skins/laika/images/Icon_hand_holding_heart.svg' );
-		}
-
-		&_item--smartphone:before {
-			background: url( '/skins/laika/images/Icon_letter_W_on_smartphone.svg' );
-		}
-
-		&_item--world:before {
-			background: url( '/skins/laika/images/Icon_world.svg' );
-		}
-
-		&_item--megaphone:before {
-			background: url( '/skins/laika/images/Icon_werbung.svg' );
-		}
-
-		&_item--twentyfourseven:before {
-			background: url( '/skins/laika/images/Icon_24_7.svg' );
-		}
-	}
-
-	&__orgchart_text {
-		flex: 1 1 auto;
-	}
-	&__orgchart_image {
-		flex: 1 1 100%;
-		img {
-			padding: 0 50px;
-		}
-	}
-
-	&__org {
-		display: inline-block;
-	}
-	&__org--wmf {
-		background-color: rgba( 184, 233, 134, 0.5 );
-	}
-	&__org--wmfg {
-		background-color: rgba( 248, 231, 28, 0.5 );
-	}
-	&__org--wmde {
-		background-color: rgba( 245, 166, 35, 0.5 );
-	}
-
-	&__call-to-action-button {
-		padding: 15px;
-		border: 0;
-		border-radius: 5px;
-		background: colors.$primary;
-		color: colors.$white;
-		font-size: 18px;
-		font-weight: bold;
-		cursor: pointer;
-		display: inline-block;
-		&:hover,
-		&:focus {
-			color: colors.$white;
-			background: color.adjust( colors.$primary, $lightness: -5% );
-			text-decoration: none;
-		}
-	}
-}
diff --git a/src/scss/use_of_funds/FundsDistributionAccordion.scss b/src/scss/use_of_funds/FundsDistributionAccordion.scss
deleted file mode 100644
index f82068ed9..000000000
--- a/src/scss/use_of_funds/FundsDistributionAccordion.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import './variables';
-
-.funds_distribution_accordion {
-	padding-bottom: 16px;
-	display: block;
-
-	.funds_distribution_info_item {
-		summary {
-			list-style-type: none;
-
-			&::-webkit-details-marker {
-				display: none;
-			}
-		}
-
-		&__title {
-			font-weight: bold;
-			cursor: pointer;
-			border-top: 1px solid #979797;
-			line-height: 36px;
-			position: relative;
-			padding-left: 10px;
-		}
-
-		&__text {
-			padding-left: 10px;
-		}
-
-		&:last-child {
-			border-bottom: 1px solid #979797;
-		}
-
-		&.active:last-child .funds_distribution_info_item__title {
-			border-bottom: 0;
-		}
-
-		&.active:last-child .funds_distribution_info_item__text {
-			border-bottom: 1px solid #979797;
-			padding-bottom: 1em;
-		}
-
-		&__title:after {
-			background: url( '/skins/laika/images/Chevron-left.svg' ) no-repeat center;
-			height: 36px;
-			width: 36px;
-			position: absolute;
-			content: '';
-			right: 0;
-			opacity: 0.5;
-			/* stylelint-disable-next-line function-parentheses-space-inside */
-			transform: rotate(-90deg);
-		}
-
-		&[open] .funds_distribution_info_item__title:after {
-			/* stylelint-disable-next-line function-parentheses-space-inside */
-			transform: rotate(90deg);
-		}
-	}
-}
-
diff --git a/src/scss/use_of_funds/variables.scss b/src/scss/use_of_funds/variables.scss
deleted file mode 100644
index aa7cb6b5d..000000000
--- a/src/scss/use_of_funds/variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$use_of_funds_breakpoint_xs: 600px;
-$use_of_funds_breakpoint_s: 768px;
-$use_of_funds_breakpoint_m: 800px;
-$use_of_funds_breakpoint_l: 1090px;