Add editable localized marquee settings

app/[locale]/(site)/page.tsx

@@ -14,8 +14,9 @@ import { getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { HomeHero } from "@/components/layout/home-hero";
+import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
 import { MotionFade } from "@/components/motion-fade";
-import { getSiteSettings } from "@/lib/app-config";
+import { getMarqueeSettings, getSiteSettings, splitMarqueeRowItems } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
@@ -60,7 +61,10 @@ export async function generateMetadata({
 
 export default async function HomePage({ params: { locale } }: HomePageProps) {
   const localeKey = resolveLocale(locale);
-  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
+  const [t, marqueeSettings] = await Promise.all([
+    getTranslations({ locale: localeKey, namespace: "homepage" }),
+    getMarqueeSettings(),
+  ]);
   const serviceItems = [
     t("serviceBrand"),
     t("serviceWebsite"),
@@ -70,6 +74,13 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
     t("serviceTracking"),
     t("serviceSystem"),
   ];
+  const marqueeLocale = marqueeSettings.locales[localeKey];
+  const marqueeRows: MarqueeRow[] = [
+    { direction: "left", duration: 126, items: splitMarqueeRowItems(marqueeLocale.row1) },
+    { direction: "right", duration: 220, items: splitMarqueeRowItems(marqueeLocale.row2) },
+    { direction: "left", duration: 168, items: splitMarqueeRowItems(marqueeLocale.row3) },
+    { direction: "right", duration: 144, items: splitMarqueeRowItems(marqueeLocale.row4) },
+  ];
 
   return (
     <>
@@ -141,6 +152,8 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
           </AppCard>
         </MotionFade>
       </Container>
+
+      <StackedMarqueeSection rows={marqueeRows} className="relative z-10 mt-2 pb-10 sm:pb-12 lg:pb-14" />
     </>
   );
 }