write full welcome announcement

frontend/components/Domain/Announcement/Announcements/2026-03-27_1_welcome.vue

@@ -1,13 +1,67 @@
 <template>
   <div>
-    Welcome to Mealie! This is a placeholder test announcement.
+    <p>
+      Welcome to Mealie! If this is your first time seeing announcements, here's what to expect.
+    </p>
+    <p>
+      Announcements are reserved for things like:
+      <ul class="ml-6">
+        <li>Important new features</li>
+        <li>Major changes</li>
+        <li>Anything that might require additional user actions (such as migration scripts)</li>
+      </ul>
+    </p>
+    <p>
+      While we generally keep everything in our <a href="https://github.com/mealie-recipes/mealie/releases" target="_blank">GitHub release notes</a>,
+      sometimes certain changes require some extra attention.
+      <span v-if="user?.admin">
+        For instance, as a server admin, you may want to <a href="https://github.com/mealie-recipes/mealie/releases/tag/v3.7.0" target="_blank">re-process your images</a>.
+        This reduces their filesize and fixes images that appear zoomed in on the home page.
+        This isn't a new feature, but rather something that may have been easy to miss.
+      </span>
+    </p>
+    <p>
+      Announcements are English-only; they're one-off messages from the maintainers, not a replacement for our release notes. Some elements may still be translated.
+    </p>
+    <hr class="mt-2 mb-4">
+    <p>
+      You can opt out of announcements in your user settings:
+      <br>
+      <v-btn class="mt-2" color="primary" to="/user/profile/edit">
+        {{ $t("profile.user-settings") }}
+      </v-btn>
+    </p>
+    <p v-if="user?.canManageHousehold" class="mt-3">
+      As {{ user?.admin ? "an admin" : "a household manager" }}, you can disable announcements for your entire household:
+      <br>
+      <v-btn class="mt-2" color="primary" to="/household">
+        {{ $t("profile.household-settings") }}
+      </v-btn>
+    </p>
+    <p v-if="user?.canManage" class="mt-3">
+      {{ user?.admin ? "You can also" : "As a group manager, you can" }} disable announcements for your entire group:
+      <br>
+      <v-btn class="mt-2" color="primary" to="/group">
+        {{ $t("profile.group-settings") }}
+      </v-btn>
+    </p>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { AnnouncementMeta } from "~/composables/use-announcements";
 
+const { user } = useMealieAuth();
+</script>
+
+<script lang="ts">
 export const meta: AnnouncementMeta = {
-  title: "Placeholder Title",
+  title: "Welcome to Mealie 🎉",
 };
 </script>
+
+<style scoped lang="css">
+p {
+  padding-bottom: 8px;
+}
+</style>