Second pass on localization

app/components/RuleStack/RuleStack.view.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import { useTranslation } from "../../contexts/MessagesContext";
 import RuleCard from "../RuleCard";
 import Button from "../Button";
 import { getAssetPath } from "../../../lib/assetUtils";
@@ -8,77 +11,79 @@ export function RuleStackView({
   className,
   onTemplateClick,
 }: RuleStackViewProps) {
+  const t = useTranslation("ruleStack");
+
   return (
     <section
       className={`w-full bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-032)] xmd:py-[var(--spacing-scale-056)] xmd:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-096)] flex flex-col gap-[var(--spacing-scale-024)] xmd:gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] ${className}`}
     >
       <div className="flex flex-col gap-[18px] xmd:grid xmd:grid-cols-2 lg:gap-[var(--spacing-scale-024)]">
         <RuleCard
-          title="Consensus clusters"
-          description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
+          title={t("cards.consensusClusters.title")}
+          description={t("cards.consensusClusters.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Sociocracy.svg")}
-              alt="Sociocracy"
+              alt={t("cards.consensusClusters.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
-          onClick={() => onTemplateClick("Consensus clusters")}
+          onClick={() => onTemplateClick(t("cards.consensusClusters.title"))}
         />
         <RuleCard
-          title="Consensus"
-          description="Decisions that affect the group collectively should involve participation of all participants."
+          title={t("cards.consensus.title")}
+          description={t("cards.consensus.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Consensus.svg")}
-              alt="Consensus"
+              alt={t("cards.consensus.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
-          onClick={() => onTemplateClick("Consensus")}
+          onClick={() => onTemplateClick(t("cards.consensus.title"))}
         />
         <RuleCard
-          title="Elected Board"
-          description="An elected board determines policies and organizes their implementation."
+          title={t("cards.electedBoard.title")}
+          description={t("cards.electedBoard.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_ElectedBoard.svg")}
-              alt="Elected Board"
+              alt={t("cards.electedBoard.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-red)]"
-          onClick={() => onTemplateClick("Elected Board")}
+          onClick={() => onTemplateClick(t("cards.electedBoard.title"))}
         />
         <RuleCard
-          title="Petition"
-          description="All participants can propose and vote on proposals for the group."
+          title={t("cards.petition.title")}
+          description={t("cards.petition.description")}
           icon={
             <Image
               src={getAssetPath("assets/Icon_Petition.svg")}
-              alt="Petition"
+              alt={t("cards.petition.iconAlt")}
               width={40}
               height={40}
               className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
             />
           }
           backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
-          onClick={() => onTemplateClick("Petition")}
+          onClick={() => onTemplateClick(t("cards.petition.title"))}
         />
       </div>
 
       {/* See all templates button */}
       <div className="flex justify-center">
         <Button variant="outlined" size="large">
-          See all templates
+          {t("button.seeAllTemplates")}
         </Button>
       </div>
     </section>