fix(i18n): make outdated banner stand out

Co-authored-by: ~hedy <hedyhyry@gmail.com>

src/components/home/Home.astro

@@ -12,15 +12,9 @@ import { isOutdated as i18nIsOutdated } from "../../i18n/utils";
 ---
 
 <main class="grid place-items-center">
-	<Hero />
+	{i18nIsOutdated(lang) && <I18nOutdated />}
 
-	{
-		i18nIsOutdated(lang) && (
-			<div class="prose prose-invert py-16 px-4 max-w-4xl">
-				<I18nOutdated />
-			</div>
-		)
-	}
+	<Hero />
 
 	<div class="prose prose-invert py-16 px-4 max-w-4xl">
 		<Values />

src/components/i18n/Outdated.astro

@@ -6,7 +6,11 @@ const { lang } = Astro.params as Params;
 const translation = useTranslations(lang);
 ---
 
-<section id="i18n-outdated">
+<section
+	id="i18n-outdated"
+	class="prose prose-invert w-full max-w-4xl bg-yellow-800 bg-opacity-50 border-l-4 border-orange-500 text-orange-100 p-4"
+	role="alert"
+>
 	<h2>{translation("i18n-outdated.title")}</h2>
 	<p class="description">
 		{translation("i18n-outdated.description")}