Initial implementation of localization

app/page.tsx

@@ -1,4 +1,6 @@
 import dynamic from "next/dynamic";
+import messages from "../messages/en/index";
+import { getTranslation } from "../lib/i18n/getTranslation";
 import HeroBanner from "./components/HeroBanner";
 import AskOrganizer from "./components/AskOrganizer";
 
@@ -39,31 +41,34 @@ const QuoteBlock = dynamic(() => import("./components/QuoteBlock"), {
 });
 
 export default function Page() {
+  // Use direct message access for server components
+  // This maintains type safety without requiring external i18n libraries
+  const t = (key: string) => getTranslation(messages, key);
+
   const heroBannerData = {
-    title: "Collaborate",
-    subtitle: "with clarity",
-    description:
-      "Help your community make important decisions in a way that reflects its unique values.",
-    ctaText: "Learn how CommunityRule works",
-    ctaHref: "#",
+    title: t("heroBanner.title"),
+    subtitle: t("heroBanner.subtitle"),
+    description: t("heroBanner.description"),
+    ctaText: t("heroBanner.ctaText"),
+    ctaHref: t("heroBanner.ctaHref"),
   };
 
   const numberedCardsData = {
-    title: "How CommunityRule works",
-    subtitle: "Here's a quick overview of the process, from start to finish.",
+    title: t("numberedCards.title"),
+    subtitle: t("numberedCards.subtitle"),
     cards: [
       {
-        text: "Document how your community makes decisions",
+        text: t("numberedCards.cards.card1.text"),
         iconShape: "blob",
         iconColor: "green",
       },
       {
-        text: "Build an operating manual for a successful community",
+        text: t("numberedCards.cards.card2.text"),
         iconShape: "gear",
         iconColor: "purple",
       },
       {
-        text: "Get a link to your manual for your group to review and evolve",
+        text: t("numberedCards.cards.card3.text"),
         iconShape: "star",
         iconColor: "orange",
       },
@@ -71,16 +76,15 @@ export default function Page() {
   };
 
   const featureGridData = {
-    title: "We've got your back, every step of the way",
-    subtitle:
-      "Use our toolkit to improve, document, and evolve your organization.",
+    title: t("featureGrid.title"),
+    subtitle: t("featureGrid.subtitle"),
   };
 
   const askOrganizerData = {
-    title: "Still have questions?",
-    subtitle: "Get answers from an experienced organizer",
-    buttonText: "Ask an organizer",
-    buttonHref: "#contact",
+    title: t("askOrganizer.title"),
+    subtitle: t("askOrganizer.subtitle"),
+    buttonText: t("askOrganizer.buttonText"),
+    buttonHref: t("askOrganizer.buttonHref"),
   };
 
   return (