Make home page translatable, fix scrolling content animation timing (#4325)

* Make home page translatable, fix scrolling content animation timing

* intl:extract

apps/frontend/src/components/ui/news/LatestNewsRow.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="mx-2 p-4 !py-8 sm:mx-8 sm:p-32">
 		<div class="my-8 flex items-center justify-between">
-			<h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
+			<h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">
+				{{ formatMessage(messages.latestNews) }}
+			</h2>
 		</div>
 
 		<div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
@@ -17,7 +19,7 @@
 			<ButtonStyled color="brand" size="large">
 				<nuxt-link to="/news">
 					<NewspaperIcon />
-					View all news
+					{{ formatMessage(messages.viewAll) }}
 				</nuxt-link>
 			</ButtonStyled>
 		</div>
@@ -28,8 +30,11 @@
 import { NewspaperIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
 import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref } from 'vue'
 
+const { formatMessage } = useVIntl()
+
 const articles = ref(
 	rawArticles
 		.map((article) => ({
@@ -45,5 +50,16 @@ const articles = ref(
 		.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
 )
 
+const messages = defineMessages({
+	latestNews: {
+		id: 'ui.latest-news-row.latest-news',
+		defaultMessage: 'Latest news from Modrinth',
+	},
+	viewAll: {
+		id: 'ui.latest-news-row.view-all',
+		defaultMessage: 'View all news',
+	},
+})
+
 const latestArticles = computed(() => articles.value.slice(0, 3))
 </script>