Localisation for core languages

.gitignore

@@ -41,4 +41,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.prompts/*
+.prompts/*PRD.md
+PRD.md
+PRD-*.md

app/(home)/sections/10_NewEraQuote.tsx

@@ -1,6 +1,8 @@
+import { useTranslations } from "next-intl";
 import { Box, Container, Text, Heading } from "@chakra-ui/react";
 
 export default function NewEraQuoteSection() {
+  const t = useTranslations("landing");
   return (
     <Box
       py={{ base: 14, md: 24 }}
@@ -10,7 +12,7 @@ export default function NewEraQuoteSection() {
     >
       <Container maxW="2xl">
         <Heading textAlign="center" size={{ base: "3xl", md: "4xl" }}>
-          The marker of a new era
+          {t("newEraQuote.attribution")}
         </Heading>
         <Text fontSize="lg" mb="4">
           World Resources Institute tools have been transforming global

app/(home)/sections/11_CTA.tsx

@@ -1,10 +1,13 @@
 import { Box, Button, Container, Heading, Text } from "@chakra-ui/react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { CaretRightIcon } from "@phosphor-icons/react";
 
 const LANDING_PAGE_VERSION = process.env.NEXT_PUBLIC_LANDING_PAGE_VERSION;
 
 export default function CTASection() {
+  const t = useTranslations("landing");
+  const tc = useTranslations("common");
   return (
     <Box
       py={{ base: 10, md: 24 }}
@@ -28,16 +31,15 @@ export default function CTASection() {
           >
             <Box display="flex" flexDir="column" gap="2">
               <Heading size="md" as="p">
-                How will you use monitoring intelligence?{" "}
+                {t("cta.heading")}
               </Heading>
               <Text fontSize="sm" color="fg.muted">
-                Join the future of ecosystem monitoring and help us shape what
-                comes next.
+                {t("cta.description")}
               </Text>
             </Box>
             <Button asChild variant="solid" colorPalette="primary" rounded="lg">
               <Link href="/app">
-                {LANDING_PAGE_VERSION === "public" ? "Explore the preview" : "Try the preview"}
+                {LANDING_PAGE_VERSION === "public" ? tc("nav.explorePreview") : t("cta.tryPreview")}
                 <CaretRightIcon weight="bold" />
               </Link>
             </Button>

app/(home)/sections/12_Footer.tsx

@@ -5,9 +5,11 @@ import {
   Text,
   Link as ChakraLink,
 } from "@chakra-ui/react";
+import { useTranslations } from "next-intl";
 import LclLogo from "../../components/LclLogo";
 
 export default function FooterSection() {
+  const t = useTranslations("common");
   return (
     <Box
       as="footer"
@@ -30,7 +32,7 @@ export default function FooterSection() {
           <Flex alignItems="center" gap={4}>
             <LclLogo width={32} avatarOnly />
             <Text fontSize={{ base: "3xl", md: "5xl" }} fontWeight="semibold" lineHeight="1">
-              Global Nature Watch
+              {t("appName")}
             </Text>
           </Flex>
         </Flex>
@@ -50,7 +52,7 @@ export default function FooterSection() {
             w={{ base: "full", md: "auto" }}
             flex={{ md: 2 }}
             >
-              <Text>{new Date().getFullYear()} Global Nature Watch</Text>
+              <Text>{t("footer.copyrightLong", { year: new Date().getFullYear() })}</Text>
             <ChakraLink
               textDecoration="underline"
               textDecorationStyle="dotted"

app/(home)/sections/1_Hero.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
@@ -30,6 +31,8 @@ export default function LandingHero({
   promptIndex,
   setPromptIndex,
 }: PromptMarqueeProps) {
+  const t = useTranslations("landing");
+  const tc = useTranslations("common");
   const router = useRouter();
   const [promptTimer, setPromptTimer] = useState(10);
   const [animationKey, setAnimationKey] = useState(0);
@@ -158,15 +161,13 @@ export default function LandingHero({
               color="fg.inverted"
               mb={0}
             >
-              Tackle nature’s toughest monitoring challenges
+              {t("hero.heading")}
             </Heading>
             <Text
               fontSize="lg"
               textShadow="2px 2px 5px hsla(225, 52%, 11%, 0.75)"
             >
-              Global Nature Watch is an open, AI-powered system that transforms groundbreaking
-              land monitoring data into intelligence to understand Earth&rsquo;s landscapes.
-              Test the preview and help shape the future of land monitoring.
+              {t("hero.description")}
             </Text>
           </Container>
           <Container
@@ -244,10 +245,10 @@ export default function LandingHero({
                       }}
                     >
                       <ArrowsClockwiseIcon />
-                      New Suggestion
+                      {t("hero.newSuggestion")}
                     </Button>
                     <Text fontSize="xs" color="fg.subtle">
-                      Automatically updating in {promptTimer}s
+                      {t("hero.autoUpdating", { seconds: promptTimer })}
                     </Text>
                   </Flex>
                   <Button
@@ -259,7 +260,7 @@ export default function LandingHero({
                     disabled={sendingPrompt}
                   >
                     {sendingPrompt ? <Spinner size="sm" mr={2} /> : null}
-                    {sendingPrompt ? "Sending" : "Go"}
+                    {sendingPrompt ? t("hero.sending") : t("hero.go")}
                     <CaretRightIcon weight="bold" />
                   </Button>
                 </Flex>
@@ -282,19 +283,19 @@ export default function LandingHero({
             >
               <Text>
                 <Badge size="xs" fontSize="8px" rounded="4px" mr="1">
-                  PREVIEW
+                  {tc("preview")}
                 </Badge>
-                Global Nature Watch is
+                {t("hero.previewBadgePrefix")}
                 {LANDING_PAGE_VERSION === "closed"
-                  ? " in closed preview."
+                  ? t("hero.previewBadgeClosed")
                   : LANDING_PAGE_VERSION === "limited"
-                  ? " in limited preview."
-                  : " in preview."}
+                  ? t("hero.previewBadgeLimited")
+                  : t("hero.previewBadgePublic")}
               </Text>
               <Tooltip
                 openDelay={100}
                 closeDelay={300}
-                content="This is an early version of Global Nature Watch. Our agent may make mistakes and some features are still in development. Your usage and feedback will help us enhance it!"
+                content={t("hero.previewTooltip")}
               >
                 <Box
                   color="fg.inverted"
@@ -306,7 +307,7 @@ export default function LandingHero({
                   alignItems="center"
                 >
                   <QuestionIcon />
-                  What does preview mean?
+                  {t("hero.whatDoesPreviewMean")}
                 </Box>
               </Tooltip>
             </Box>

app/(home)/sections/3_TrustedPlatforms.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import NextImage from "next/image";
 import {
   Box,
@@ -45,6 +46,7 @@ const PARTNER_ORGS = [
 ];
 
 export default function TrustedPlatformsSection() {
+  const t = useTranslations("landing");
   return (
     <Box
       py={{ base: 14, md: 24 }}
@@ -55,8 +57,7 @@ export default function TrustedPlatformsSection() {
       <Container id="testimonials">
         <Container textAlign="center" maxW="3xl">
           <Heading size={{ base: "3xl", md: "4xl" }}>
-            Building upon the legacy of World Resources Institute&rsquo;s
-            trusted platforms
+            {t("trustedPlatforms.heading")}
           </Heading>
           <Text fontSize="lg">
             Global Nature Watch is built on the trusted data and research of Global

app/(home)/sections/4_FeaturesTabs.tsx

@@ -8,41 +8,29 @@ import {
   Image,
 } from "@chakra-ui/react";
 import { CaretRightIcon } from "@phosphor-icons/react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 
 const LANDING_PAGE_VERSION = process.env.NEXT_PUBLIC_LANDING_PAGE_VERSION;
 
-const FEATURE_TABS = [
-  {
-    value: "feature-tab-1",
-    label: "Explore trusted data with an AI assistant",
-    description:
-      "Ask a question in plain language and our assistant will suggest the most useful available datasets and analyses for your work.",
-    caption:
-      "Quickly find the most relevant data for your work.",
-    image: "/feature-tab-1.webp",
-  },
-  {
-    value: "feature-tab-2",
-    label: "Tailored answers to your context",
-    description:
-      "Explore how Global Nature Watch's assistant can shape responses to your needs, from comparing regions to highlighting local patterns that may be most relevant to your work.",
-    caption:
-      "Shape responses to your needs.",
-    image: "/feature-tab-2.webp",
-  },
-  {
-    value: "feature-tab-3",
-    label: "Insights you can act on",
-    description:
-      "Global Nature Watch's assistant helps translate analyses into clear takeaways. It offers a starting point for reports, policies or field decisions while opening the door to dive deeper.",
-    caption:
-      "Generate clear takeaways from complex data.",
-    image: "/feature-tab-3.webp",
-  },
+const TAB_IMAGES = [
+  "/feature-tab-1.webp",
+  "/feature-tab-2.webp",
+  "/feature-tab-3.webp",
 ];
 
 export default function FeaturesTabsSection() {
+  const t = useTranslations("landing");
+  const tc = useTranslations("common");
+
+  const tabs = TAB_IMAGES.map((image, i) => ({
+    value: `feature-tab-${i + 1}`,
+    label: t(`features.tabs.${i}.label`),
+    description: t(`features.tabs.${i}.description`),
+    caption: t(`features.tabs.${i}.caption`),
+    image,
+  }));
+
   return (
     <Box
       py={{ base: 14, md: 24 }}
@@ -53,11 +41,10 @@ export default function FeaturesTabsSection() {
       <Container id="use-cases">
         <Container textAlign="center" maxW="3xl" px={0}>
           <Heading size={{ base: "3xl", md: "4xl" }}>
-          Get answers to your toughest questions about landscapes, backed by data
+            {t("features.heading")}
           </Heading>
           <Text fontSize="lg">
-          Global Nature Watch is testing new ways to make geospatial information easier to use.
-          Try asking in plain language and explore the insights it can provide.
+            {t("features.description")}
           </Text>
           {LANDING_PAGE_VERSION !== "closed" && (
             <Button
@@ -68,7 +55,7 @@ export default function FeaturesTabsSection() {
               rounded="lg"
             >
               <Link href="/app">
-                Explore the preview
+                {tc("nav.explorePreview")}
                 <CaretRightIcon weight="bold" />
               </Link>
             </Button>
@@ -82,7 +69,7 @@ export default function FeaturesTabsSection() {
             defaultValue="feature-tab-1"
           >
             <Tabs.List borderEndWidth={0} gap={6}>
-              {FEATURE_TABS.map((tab) => (
+              {tabs.map((tab) => (
                 <Tabs.Trigger
                   key={tab.value}
                   value={tab.value}
@@ -124,7 +111,7 @@ export default function FeaturesTabsSection() {
                 </Tabs.Trigger>
               ))}
             </Tabs.List>
-            {FEATURE_TABS.map((tab) => (
+            {tabs.map((tab) => (
               <Tabs.Content
                 key={tab.value}
                 value={tab.value}

app/(home)/sections/5_SupportWorkTabs.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import {
   Box,
   Button,
@@ -44,6 +45,7 @@ const SUPPORT_TABS = [
   },
 ];
 export default function SupportWorkTabsSection() {
+  const t = useTranslations("landing");
   return (
     <Box
       id="about"
@@ -64,7 +66,7 @@ export default function SupportWorkTabsSection() {
           px={0}
         >
           <Heading size={{ base: "3xl", md: "4xl" }} color="fg.inverted">
-            See how monitoring intelligence can support your work
+            {t("supportWork.heading")}
           </Heading>
           <Text fontSize="md" mb="4">
             Global Nature Watch makes advanced monitoring data easy to use,