From 126ed17da984e356fe4fb3d5e1fdfc2dd5a87fe1 Mon Sep 17 00:00:00 2001
From: Codemod Bot <codemod[bot]@users.noreply.github.com>
Date: Tue, 4 Nov 2025 21:03:26 +0000
Subject: [PATCH] [DRAFT] refactor: Run i18n-pro-codemod Campaign shard

---
 .../components/ui/SpacingTable.tsx            |  12 +-
 .../content/design/components/alert.basic.tsx |  12 +-
 .../design/components/avatar.indicator.tsx    |  14 +-
 .../content/design/components/badge.dots.tsx  |  12 +-
 .../design/components/button.icons.tsx        |  34 ++-
 .../design/components/checkbox.basic.tsx      |  18 +-
 .../design/components/dialog.basic.tsx        |  13 +-
 .../components/dropdown.avatarTrigger.tsx     |  22 +-
 .../design/components/emptyScreen.border.tsx  |  22 +-
 .../content/design/components/form.addOns.tsx |  20 +-
 .../content/design/components/input.types.tsx |  12 +-
 .../components/multiInputField.paste.tsx      |  23 +-
 .../design/components/rangeslider.basic.tsx   |  13 +-
 .../design/components/section.withIcon.tsx    |   9 +-
 .../design/components/select.field.tsx        |  24 ++-
 .../content/design/components/switch.tsx      |  34 ++-
 .../design/components/textarea.sizes.tsx      |  20 +-
 .../settings/platform/members/layout.tsx      |   5 +-
 messages/en.json                              | 197 ++++++++++++++++++
 .../ui/components/filter-select/index.tsx     |   7 +-
 .../navigation/tabs/HorizontalTabItem.tsx     |   5 +-
 21 files changed, 412 insertions(+), 116 deletions(-)
 create mode 100644 messages/en.json

diff --git a/apps/ui-playground/components/ui/SpacingTable.tsx b/apps/ui-playground/components/ui/SpacingTable.tsx
index 6d8f296a63079f..86d2af6faf62e9 100644
--- a/apps/ui-playground/components/ui/SpacingTable.tsx
+++ b/apps/ui-playground/components/ui/SpacingTable.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import React from "react";
 import { Toaster } from "react-hot-toast";
@@ -19,14 +21,17 @@ export const SpacingTable: React.FC<SpacingTableProps> = ({ tokens }) => {
       <Toaster position="bottom-right" />
       <div className="space-y-6">
         <div className="grid grid-cols-3 gap-4">
-          {tokens.map((token, index) => (
+          {tokens.map((token, index) =>  {
+const t = useTranslations("spacing-table");
+
+return (
             <div
               key={index}
               className="border-subtle bg-default group relative overflow-hidden rounded-lg border">
               <div className="flex items-center gap-4 p-4">
                 <div className="w-[100px] space-y-1">
                   <p className="text-emphasis text-sm font-medium">
-                    {token.name === "px" ? "px" : `${token.name} (${token.pixels})`}
+                    {token.name === "px" ? t('token.display-format_0') : t('token.display-format_1', { "tokenName": token.name, "tokenPixels": token.pixels })}
                   </p>
                 </div>
                 <div className="bg-subtle relative h-8 rounded">
@@ -37,7 +42,8 @@ export const SpacingTable: React.FC<SpacingTableProps> = ({ tokens }) => {
                 </div>
               </div>
             </div>
-          ))}
+          )
+})}
         </div>
       </div>
     </>
diff --git a/apps/ui-playground/content/design/components/alert.basic.tsx b/apps/ui-playground/content/design/components/alert.basic.tsx
index b42cffd50bf3c9..af128f0859feff 100644
--- a/apps/ui-playground/content/design/components/alert.basic.tsx
+++ b/apps/ui-playground/content/design/components/alert.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -9,14 +11,18 @@ const severities = ["neutral", "info", "warning", "error"] as const;
 export const BasicExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="not-prose space-y-4">
-      {severities.map((severity) => (
+      {severities.map((severity) =>  {
+const t = useTranslations("alert-basic-demo");
+
+return (
         <Alert
           key={severity}
           severity={severity}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert`}
+          title={t('titles.severity-alert', { "severityCharAt0ToUpperCaseSeveritySlice1": severity.charAt(0).toUpperCase() + severity.slice(1) })}
           message={`This is a ${severity} alert message to show important information to users.`}
         />
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git a/apps/ui-playground/content/design/components/avatar.indicator.tsx b/apps/ui-playground/content/design/components/avatar.indicator.tsx
index 25f41bad280010..4bb10e0e5f397f 100644
--- a/apps/ui-playground/content/design/components/avatar.indicator.tsx
+++ b/apps/ui-playground/content/design/components/avatar.indicator.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -6,20 +8,24 @@ import { Avatar } from "@calcom/ui/components/avatar";
 
 const sampleImage = "https://cal.com/stakeholder/peer.jpg";
 
-export const IndicatorExample: React.FC = () => (
+export const IndicatorExample: React.FC = () =>  {
+const t = useTranslations("avatar-indicator-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <Avatar
           size="md"
-          alt="With indicator"
+          alt={t('alt-text.with-indicator')}
           imageSrc={sampleImage}
           indicator={
             <div className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white" />
           }
         />
-        <span className="text-subtle text-xs">With Status Indicator</span>
+        <span className="text-subtle text-xs">{t('labels.status-indicator-description')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/badge.dots.tsx b/apps/ui-playground/content/design/components/badge.dots.tsx
index 7f39362a50fd80..8dd5056e13f241 100644
--- a/apps/ui-playground/content/design/components/badge.dots.tsx
+++ b/apps/ui-playground/content/design/components/badge.dots.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -20,14 +22,18 @@ const variants = [
 export const DotsExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-4">
-      {variants.map((variant) => (
+      {variants.map((variant) =>  {
+const t = useTranslations("badge-dots-demo");
+
+return (
         <div key={variant} className="flex flex-col items-center gap-2">
           <Badge variant={variant} withDot>
             {variant}
           </Badge>
-          <span className="text-subtle text-xs">Dot</span>
+          <span className="text-subtle text-xs">{t('labels.dot-indicator')}</span>
         </div>
-      ))}
+      )
+})}
     </div>
   </RenderComponentWithSnippet>
 );
diff --git a/apps/ui-playground/content/design/components/button.icons.tsx b/apps/ui-playground/content/design/components/button.icons.tsx
index 1c1b24c1e33de5..81ca20fe344ac8 100644
--- a/apps/ui-playground/content/design/components/button.icons.tsx
+++ b/apps/ui-playground/content/design/components/button.icons.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
@@ -7,36 +9,48 @@ import { Button } from "@calcom/ui/components/button";
 
 const colors = ["primary", "secondary", "minimal", "destructive"] as const;
 
-export const IconsExample: React.FC = () => (
+export const IconsExample: React.FC = () =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       <div>
-        <h3 className="text-default mb-4 text-sm">Start Icon</h3>
+        <h3 className="text-default mb-4 text-sm">{t('sections.start-icon-heading')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} StartIcon="calendar">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">Start Icon</span>
+              <span className="text-subtle text-xs">{t('labels.start-icon-caption')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
 
       <div>
-        <h3 className="text-default mb-4 text-sm">End Icon</h3>
+        <h3 className="text-default mb-4 text-sm">{t('sections.end-icon-heading')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-icons-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} EndIcon="arrow-right">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">End Icon</span>
+              <span className="text-subtle text-xs">{t('labels.end-icon-caption')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/checkbox.basic.tsx b/apps/ui-playground/content/design/components/checkbox.basic.tsx
index e8f353f9cecfa7..ee863aa4c3f85e 100644
--- a/apps/ui-playground/content/design/components/checkbox.basic.tsx
+++ b/apps/ui-playground/content/design/components/checkbox.basic.tsx
@@ -1,31 +1,37 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Checkbox } from "@calcom/ui/components/form";
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FC = () =>  {
+const t = useTranslations("checkbox-basic-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap gap-4">
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-unchecked" />
-        <span className="text-subtle text-xs">Unchecked</span>
+        <span className="text-subtle text-xs">{t('states.unchecked')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-checked" defaultChecked />
-        <span className="text-subtle text-xs">Checked</span>
+        <span className="text-subtle text-xs">{t('states.checked')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-disabled" disabled />
-        <span className="text-subtle text-xs">Disabled</span>
+        <span className="text-subtle text-xs">{t('states.disabled')}</span>
       </div>
 
       <div className="flex flex-col items-center justify-center gap-2">
         <Checkbox id="basic-disabled-checked" disabled defaultChecked />
-        <span className="text-subtle text-xs">Disabled Checked</span>
+        <span className="text-subtle text-xs">{t('states.disabled-checked')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/dialog.basic.tsx b/apps/ui-playground/content/design/components/dialog.basic.tsx
index 6c5eb0a568df97..7e368c3e9f026f 100644
--- a/apps/ui-playground/content/design/components/dialog.basic.tsx
+++ b/apps/ui-playground/content/design/components/dialog.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,23 +9,22 @@ import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 
 export const BasicExample: React.FC = () => {
+const t = useTranslations("dialog-basic-demo");
+
   const [open, setOpen] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="space-y-2">
-        <Button onClick={() => setOpen(true)}>Open Basic Dialog</Button>
+        <Button onClick={() => setOpen(true)}>{t('buttons.open-dialog')}</Button>
         <Dialog open={open} onOpenChange={setOpen}>
           <DialogContent
             title="Basic Dialog"
             description="This is a basic dialog with a title and description.">
-            <p className="text-default text-sm">
-              Dialogs are used to display content that requires user attention or interaction. They appear
-              above the page content and must be closed before interacting with the page again.
-            </p>
+            <p className="text-default text-sm">{t('content.description')}</p>
             <DialogFooter>
               <DialogClose />
-              <Button>Action</Button>
+              <Button>{t('buttons.action')}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
diff --git a/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx
index 1b980fa104fc1c..b182712157901b 100644
--- a/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx
+++ b/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -12,27 +14,31 @@ import {
   DropdownMenuSeparator,
 } from "@calcom/ui/components/dropdown";
 
-export const AvatarTriggerExample: React.FC = () => (
+export const AvatarTriggerExample: React.FC = () =>  {
+const t = useTranslations("dropdown-avatar-trigger");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex flex-wrap items-center gap-8">
       <div className="flex flex-col items-center gap-2">
         <Dropdown>
           <DropdownMenuTrigger asChild>
             <button className="cursor-pointer">
-              <Avatar size="sm" imageSrc="https://cal.com/stakeholder/peer.jpg" alt="Avatar" />
+              <Avatar size="sm" imageSrc="https://cal.com/stakeholder/peer.jpg" alt={t('avatar.alt-text')} />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuLabel>Profile</DropdownMenuLabel>
+            <DropdownMenuLabel>{t('menu.profile-label')}</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownItem>View Profile</DropdownItem>
-            <DropdownItem>Settings</DropdownItem>
+            <DropdownItem>{t('menu.view-profile')}</DropdownItem>
+            <DropdownItem>{t('menu.settings')}</DropdownItem>
             <DropdownMenuSeparator />
-            <DropdownItem className="text-error">Sign out</DropdownItem>
+            <DropdownItem className="text-error">{t('menu.sign-out')}</DropdownItem>
           </DropdownMenuContent>
         </Dropdown>
-        <span className="text-subtle text-xs">Avatar Menu</span>
+        <span className="text-subtle text-xs">{t('demo.caption')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/emptyScreen.border.tsx b/apps/ui-playground/content/design/components/emptyScreen.border.tsx
index f7c5d987fd84f7..2b9562e589e2e1 100644
--- a/apps/ui-playground/content/design/components/emptyScreen.border.tsx
+++ b/apps/ui-playground/content/design/components/emptyScreen.border.tsx
@@ -1,20 +1,25 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
-export const BorderExample: React.FC = () => (
+export const BorderExample: React.FC = () =>  {
+const t = useTranslations("empty-screen-border-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       {/* Without Border */}
       <div>
-        <h4 className="text-emphasis mb-4 text-sm font-medium">Without Border</h4>
+        <h4 className="text-emphasis mb-4 text-sm font-medium">{t('sections.without-border')}</h4>
         <EmptyScreen
           Icon="grid-3x3"
           headline="No apps installed"
-          description="Browse available apps in the marketplace"
-          buttonText="Browse Apps"
+          description={t('empty-states.no-apps.description')}
+          buttonText={t('buttons.browse-apps')}
           buttonOnClick={() => alert("Browse Apps clicked")}
           border={false}
         />
@@ -22,16 +27,17 @@ export const BorderExample: React.FC = () => (
 
       {/* With Solid Border */}
       <div>
-        <h4 className="text-emphasis mb-4 text-sm font-medium">With Solid Border</h4>
+        <h4 className="text-emphasis mb-4 text-sm font-medium">{t('sections.with-solid-border')}</h4>
         <EmptyScreen
           Icon="mail"
           headline="No messages"
-          description="Your inbox is empty"
-          buttonText="Compose"
+          description={t('empty-states.no-messages.description')}
+          buttonText={t('buttons.compose')}
           buttonOnClick={() => alert("Compose clicked")}
           dashedBorder={false}
         />
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/form.addOns.tsx b/apps/ui-playground/content/design/components/form.addOns.tsx
index 74883658f132ef..f45d2cbea1bbf2 100644
--- a/apps/ui-playground/content/design/components/form.addOns.tsx
+++ b/apps/ui-playground/content/design/components/form.addOns.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useForm } from "react-hook-form";
@@ -14,6 +16,8 @@ type FormValues = {
 };
 
 export const AddOnsExample: React.FC = () => {
+const t = useTranslations("form-addons-demo");
+
   const form = useForm<FormValues>({
     defaultValues: {
       website: "",
@@ -30,36 +34,32 @@ export const AddOnsExample: React.FC = () => {
     <RenderComponentWithSnippet>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <InputField
-          label="Website"
+          label={t('labels.website')}
           addOnLeading="https://"
           {...form.register("website")}
           error={form.formState.errors.website?.message}
         />
         <InputField
-          label="Website"
+          label={t('labels.website-with-subdomain')}
           addOnLeading="apple.cal.com/team/seeded-team/"
           {...form.register("website")}
           error={form.formState.errors.website?.message}
         />
         <InputField
-          label="GitHub Username"
+          label={t('labels.github-username')}
           addOnLeading={<Icon name="github" className="text-subtle h-4 w-4" />}
           {...form.register("githubUsername")}
           error={form.formState.errors.githubUsername?.message}
         />
         <InputField
-          label="Custom Domain"
+          label={t('labels.custom-domain')}
           addOnSuffix=".cal.com"
           {...form.register("customDomain")}
           error={form.formState.errors.customDomain?.message}
         />
         <div className="flex justify-end space-x-2">
-          <Button color="minimal" type="button" onClick={() => form.reset()}>
-            Reset
-          </Button>
-          <Button type="submit" loading={form.formState.isSubmitting}>
-            Submit
-          </Button>
+          <Button color="minimal" type="button" onClick={() => form.reset()}>{t('buttons.reset')}</Button>
+          <Button type="submit" loading={form.formState.isSubmitting}>{t('buttons.submit')}</Button>
         </div>
       </form>
     </RenderComponentWithSnippet>
diff --git a/apps/ui-playground/content/design/components/input.types.tsx b/apps/ui-playground/content/design/components/input.types.tsx
index e9cbc4e3fbe886..b923f449d3d67c 100644
--- a/apps/ui-playground/content/design/components/input.types.tsx
+++ b/apps/ui-playground/content/design/components/input.types.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -15,11 +17,14 @@ export const TypesExample: React.FC = () => (
           <div key={type} className="flex flex-col space-y-2">
             <h3 className="text-emphasis text-sm capitalize">{type}</h3>
             <div className="flex flex-wrap items-center gap-4">
-              {sizes.map((size) => (
+              {sizes.map((size) =>  {
+const t = useTranslations("input-types-demo");
+
+return (
                 <div key={size} className="flex flex-col items-center gap-2">
                   <Input
                     type={type}
-                    placeholder={`Enter ${type}...`}
+                    placeholder={t('placeholders.enter-type', { "type": type })}
                     defaultValue={
                       type === "email"
                         ? "example@cal.com"
@@ -36,7 +41,8 @@ export const TypesExample: React.FC = () => (
                   />
                   <span className="text-subtle text-xs">{size}</span>
                 </div>
-              ))}
+              )
+})}
             </div>
           </div>
         ))}
diff --git a/apps/ui-playground/content/design/components/multiInputField.paste.tsx b/apps/ui-playground/content/design/components/multiInputField.paste.tsx
index ea6fe03f96bbb7..dafa6a4966d738 100644
--- a/apps/ui-playground/content/design/components/multiInputField.paste.tsx
+++ b/apps/ui-playground/content/design/components/multiInputField.paste.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useForm, FormProvider } from "react-hook-form";
@@ -13,6 +15,8 @@ type FormValues = {
 };
 
 export const PasteExample: React.FC = () => {
+const t = useTranslations("multi-input-field-demo");
+
   const methods = useForm<FormValues>();
 
   return (
@@ -21,10 +25,8 @@ export const PasteExample: React.FC = () => {
         <div className="space-y-6">
           <div className="space-y-4">
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Default Delimiters (Newline and Comma)</h3>
-              <p className="text-subtle text-xs">
-                Try pasting: &ldquo;Option 1, Option 2&rdquo; or multiple lines
-              </p>
+              <h3 className="text-emphasis text-sm">{t('sections.default-delimiters.title')}</h3>
+              <p className="text-subtle text-xs">{t('sections.default-delimiters.description')}</p>
               <MultiOptionInput<FormValues>
                 fieldArrayName="newlineOptions"
                 optionPlaceholders={["Paste here..."]}
@@ -33,8 +35,8 @@ export const PasteExample: React.FC = () => {
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Comma Only Delimiter</h3>
-              <p className="text-subtle text-xs">Try pasting: &ldquo;First, Second, Third&rdquo;</p>
+              <h3 className="text-emphasis text-sm">{t('sections.comma-delimiter.title')}</h3>
+              <p className="text-subtle text-xs">{t('sections.comma-delimiter.description')}</p>
               <MultiOptionInput<FormValues>
                 fieldArrayName="commaOptions"
                 optionPlaceholders={["Paste here..."]}
@@ -44,9 +46,8 @@ export const PasteExample: React.FC = () => {
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Key-Value Pair Paste Support</h3>
-              <p className="text-subtle text-xs">
-                Try pasting: &ldquo;NODE_ENV=production&rdquo; or &ldquo;KEY1:value1, KEY2:value2&rdquo;
+              <h3 className="text-emphasis text-sm">{t('sections.key-value-pairs.title')}</h3>
+              <p className="text-subtle text-xs">{t('sections.key-value-pairs.description')}
               </p>
               <MultiOptionInput<FormValues>
                 fieldArrayName="keyValueOptions"
@@ -59,8 +60,8 @@ export const PasteExample: React.FC = () => {
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Custom Delimiters (Semicolon and Pipe)</h3>
-              <p className="text-subtle text-xs">Try pasting: &ldquo;One;Two|Three&rdquo;</p>
+              <h3 className="text-emphasis text-sm">{t('sections.custom-delimiters.title')}</h3>
+              <p className="text-subtle text-xs">{t('sections.custom-delimiters.description')}</p>
               <MultiOptionInput<FormValues>
                 fieldArrayName="customOptions"
                 optionPlaceholders={["Paste here..."]}
diff --git a/apps/ui-playground/content/design/components/rangeslider.basic.tsx b/apps/ui-playground/content/design/components/rangeslider.basic.tsx
index a2908933981d3b..c11a7dd03709ee 100644
--- a/apps/ui-playground/content/design/components/rangeslider.basic.tsx
+++ b/apps/ui-playground/content/design/components/rangeslider.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -6,6 +8,8 @@ import { useState } from "react";
 import { RangeSlider } from "@calcom/ui/components/form";
 
 export const BasicExample: React.FC = () => {
+const t = useTranslations("rangeslider-demo");
+
   const [singleValue, setSingleValue] = useState([50]);
   const [rangeValue, setRangeValue] = useState([20, 80]);
   const [steppedValue, setSteppedValue] = useState([25]);
@@ -16,7 +20,7 @@ export const BasicExample: React.FC = () => {
         <div className="w-full max-w-[300px] space-y-6">
           <div className="space-y-2">
             <div className="flex justify-between">
-              <span className="text-default text-sm">Single Value: {singleValue[0]}%</span>
+              <span className="text-default text-sm">{t('labels.single-value')}{singleValue[0]}%</span>
             </div>
             <RangeSlider
               value={singleValue}
@@ -30,8 +34,7 @@ export const BasicExample: React.FC = () => {
         <div className="w-full max-w-[300px] space-y-6">
           <div className="space-y-2">
             <div className="flex justify-between">
-              <span className="text-default text-sm">
-                Range: {rangeValue[0]}% - {rangeValue[1]}%
+              <span className="text-default text-sm">{t('labels.range')}{rangeValue[0]}% - {rangeValue[1]}%
               </span>
             </div>
             <RangeSlider
@@ -47,7 +50,7 @@ export const BasicExample: React.FC = () => {
         <div className="w-full max-w-[300px] space-y-6">
           <div className="space-y-2">
             <div className="flex justify-between">
-              <span className="text-default text-sm">Step Size 25: {steppedValue[0]}%</span>
+              <span className="text-default text-sm">{t('labels.step-size-25')}{steppedValue[0]}%</span>
             </div>
             <RangeSlider
               value={steppedValue}
@@ -61,7 +64,7 @@ export const BasicExample: React.FC = () => {
         <div className="w-full max-w-[300px] space-y-6">
           <div className="space-y-2">
             <div className="flex justify-between">
-              <span className="text-default text-sm">Disabled: 50%</span>
+              <span className="text-default text-sm">{t('labels.disabled')}</span>
             </div>
             <RangeSlider value={[50]} max={100} step={1} disabled aria-label="Disabled" />
           </div>
diff --git a/apps/ui-playground/content/design/components/section.withIcon.tsx b/apps/ui-playground/content/design/components/section.withIcon.tsx
index 7e1e0326305d41..de01faaa88603f 100644
--- a/apps/ui-playground/content/design/components/section.withIcon.tsx
+++ b/apps/ui-playground/content/design/components/section.withIcon.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,6 +9,8 @@ import { Switch } from "@calcom/ui/components/form";
 import { Section } from "@calcom/ui/components/section";
 
 export const WithIconExample = () => {
+const t = useTranslations("section-with-icon-demo");
+
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -20,10 +24,7 @@ export const WithIconExample = () => {
         </Section.Header>
         {isOpen && (
           <Section.Content>
-            <p>
-              This section demonstrates how to include an icon in the header and uses FormKit auto-animate for
-              smooth transitions when toggling content visibility.
-            </p>
+            <p>{t('descriptions.icon-animation-feature')}</p>
           </Section.Content>
         )}
       </Section>
diff --git a/apps/ui-playground/content/design/components/select.field.tsx b/apps/ui-playground/content/design/components/select.field.tsx
index d020cfd6bbef39..0b26ca4450d3a7 100644
--- a/apps/ui-playground/content/design/components/select.field.tsx
+++ b/apps/ui-playground/content/design/components/select.field.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -14,6 +16,8 @@ const options = [
 ];
 
 export const FieldExample: React.FC = () => {
+const t = useTranslations("select-field-demo");
+
   const handleValueChange = (newValue: unknown, actionMeta: { action: string }) => {
     showToast(`Selected: ${JSON.stringify(newValue)}, Action: ${actionMeta.action}`, "success");
   };
@@ -22,41 +26,41 @@ export const FieldExample: React.FC = () => {
     <RenderComponentWithSnippet>
       <div className="space-y-4 md:w-80">
         <SelectField
-          label="Flavor"
+          label={t('labels.flavor')}
           options={options}
           onChange={handleValueChange}
-          placeholder="Choose a flavor..."
+          placeholder={t('placeholders.choose-flavor')}
         />
 
         <SelectField
-          label="Required Field"
+          label={t('labels.required-field')}
           options={options}
           required
           onChange={handleValueChange}
-          placeholder="This field is required..."
+          placeholder={t('placeholders.required-field')}
         />
 
-        <SelectField label="With Error" options={options} />
+        <SelectField label={t('labels.with-error')} options={options} />
       </div>
       <div className="mt-4 space-y-4 md:w-80">
         <SelectField
-          label="Flavor"
+          label={t('labels.flavor-small')}
           options={options}
           onChange={handleValueChange}
-          placeholder="Choose a flavor... (small)"
+          placeholder={t('placeholders.choose-flavor-small')}
           size="sm"
         />
 
         <SelectField
-          label="Required Field"
+          label={t('labels.required-field-small')}
           options={options}
           required
           onChange={handleValueChange}
-          placeholder="This field is required... (small)"
+          placeholder={t('placeholders.required-field-small')}
           size="sm"
         />
 
-        <SelectField label="With Error (small)" options={options} size="sm" />
+        <SelectField label={t('labels.with-error-small')} options={options} size="sm" />
       </div>
     </RenderComponentWithSnippet>
   );
diff --git a/apps/ui-playground/content/design/components/switch.tsx b/apps/ui-playground/content/design/components/switch.tsx
index e4ce1d769bd172..bb222be66b78ee 100644
--- a/apps/ui-playground/content/design/components/switch.tsx
+++ b/apps/ui-playground/content/design/components/switch.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -6,49 +8,57 @@ import { useState } from "react";
 import { Switch } from "@calcom/ui/components/form";
 
 export const BasicExample = () => {
+const t = useTranslations("switch-playground");
+
   const [checked, setChecked] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
-        <Switch label="Basic switch with label" checked={checked} onCheckedChange={setChecked} />
+        <Switch label={t('examples.basic-label')} checked={checked} onCheckedChange={setChecked} />
       </div>
     </RenderComponentWithSnippet>
   );
 };
 
 export const LabelPositionExample = () => {
+const t = useTranslations("switch-playground");
+
   const [checked, setChecked] = useState(false);
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
-        <Switch label="Label on trailing side (default)" checked={checked} onCheckedChange={setChecked} />
-        <Switch label="Label on leading side" labelOnLeading checked={checked} onCheckedChange={setChecked} />
+        <Switch label={t('examples.label-trailing-default')} checked={checked} onCheckedChange={setChecked} />
+        <Switch label={t('examples.label-leading')} labelOnLeading checked={checked} onCheckedChange={setChecked} />
       </div>
     </RenderComponentWithSnippet>
   );
 };
 
 export const StatesExample = () => {
+const t = useTranslations("switch-playground");
+
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
-        <Switch label="Enabled switch" checked />
-        <Switch label="Disabled switch" disabled />
-        <Switch label="Disabled and checked switch" disabled defaultChecked />
+        <Switch label={t('states.enabled-label')} checked />
+        <Switch label={t('states.disabled-label')} disabled />
+        <Switch label={t('states.disabled-checked-label')} disabled defaultChecked />
       </div>
     </RenderComponentWithSnippet>
   );
 };
 
 export const ControlledExample = () => {
+const t = useTranslations("switch-playground");
+
   const [checked, setChecked] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
         <Switch
-          label={`Switch is ${checked ? "on" : "off"}`}
+          label={t('controlled.dynamic-status')}
           checked={checked}
           onCheckedChange={setChecked}
         />
@@ -58,12 +68,14 @@ export const ControlledExample = () => {
 };
 
 export const WithPadding = () => {
+const t = useTranslations("switch-playground");
+
   const [checked, setChecked] = useState(false);
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
         <Switch
-          label={`Switch is ${checked ? "on" : "off"}`}
+          label={t('controlled.dynamic-status-with-padding')}
           checked={checked}
           onCheckedChange={setChecked}
           padding
@@ -74,13 +86,15 @@ export const WithPadding = () => {
 };
 
 export const SwitchSizes = () => {
+const t = useTranslations("switch-playground");
+
   const [checked, setChecked] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="flex flex-col space-y-4">
-        <Switch label="Small switch" size="sm" checked={checked} onCheckedChange={setChecked} />
-        <Switch label="Medium switch" checked={checked} onCheckedChange={setChecked} />
+        <Switch label={t('sizes.small-label')} size="sm" checked={checked} onCheckedChange={setChecked} />
+        <Switch label={t('sizes.medium-label')} checked={checked} onCheckedChange={setChecked} />
       </div>
     </RenderComponentWithSnippet>
   );
diff --git a/apps/ui-playground/content/design/components/textarea.sizes.tsx b/apps/ui-playground/content/design/components/textarea.sizes.tsx
index 58ad6c4d38267c..f9b6a6bb098941 100644
--- a/apps/ui-playground/content/design/components/textarea.sizes.tsx
+++ b/apps/ui-playground/content/design/components/textarea.sizes.tsx
@@ -1,30 +1,36 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { TextAreaField } from "@calcom/ui/components/form";
 
-export const SizesExample: React.FC = () => (
+export const SizesExample: React.FC = () =>  {
+const t = useTranslations("textarea-sizes-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-4 md:w-80">
       <div className="space-y-2">
-        <h3 className="text-emphasis text-sm">Default Height</h3>
-        <TextAreaField name="default" placeholder="Default height textarea..." />
+        <h3 className="text-emphasis text-sm">{t('sections.default-height')}</h3>
+        <TextAreaField name="default" placeholder={t('placeholders.default-height')} />
       </div>
 
       <div className="space-y-2">
-        <h3 className="text-emphasis text-sm">Custom Height (6 rows)</h3>
-        <TextAreaField name="Taller" placeholder="Taller textarea..." rows={6} />
+        <h3 className="text-emphasis text-sm">{t('sections.custom-height')}</h3>
+        <TextAreaField name="Taller" placeholder={t('placeholders.taller-textarea')} rows={6} />
       </div>
 
       <div className="space-y-2">
         <h3 className="text-emphasis text-sm">Auto-growing</h3>
         <TextAreaField
           name="grows"
-          placeholder="This textarea grows with content..."
+          placeholder={t('placeholders.auto-growing')}
           className="min-h-[100px]"
         />
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/web/app/(use-page-wrapper)/settings/platform/members/layout.tsx b/apps/web/app/(use-page-wrapper)/settings/platform/members/layout.tsx
index 76a42b69f98dfd..16680905d2cb1d 100644
--- a/apps/web/app/(use-page-wrapper)/settings/platform/members/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/platform/members/layout.tsx
@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { getTranslate } from "app/_utils";
 
 import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";
@@ -5,13 +6,15 @@ import Shell from "@calcom/features/shell/Shell";
 import { Button } from "@calcom/ui/components/button";
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
+const t = await getTranslations("platform-members-layout");
+
   const t = await getTranslate();
 
   return (
     <Shell
       heading={
         <div className="flex">
-          <h1>Member management</h1>
+          <h1>{t('headings.member-management')}</h1>
           <Button
             tooltip="Only teammates invited as admins can create OAuth clients while teammates invited as members have read only access"
             tooltipSide="right"
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 00000000000000..4e76308f7f9cec
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,197 @@
+{
+  "horizontal-tab-item": {
+    "accessibility": {
+      "avatar-alt-text": "avatar"
+    }
+  },
+  "filter-select": {
+    "actions": {
+      "clear-filter": "Clear filter"
+    }
+  },
+  "platform-members-layout": {
+    "headings": {
+      "member-management": "Member management"
+    }
+  },
+  "textarea-sizes-demo": {
+    "sections": {
+      "default-height": "Default Height",
+      "custom-height": "Custom Height (6 rows)"
+    },
+    "placeholders": {
+      "default-height": "Default height textarea...",
+      "taller-textarea": "Taller textarea...",
+      "auto-growing": "This textarea grows with content..."
+    }
+  },
+  "switch-playground": {
+    "examples": {
+      "basic-label": "Basic switch with label",
+      "label-trailing-default": "Label on trailing side (default)",
+      "label-leading": "Label on leading side"
+    },
+    "states": {
+      "enabled-label": "Enabled switch",
+      "disabled-label": "Disabled switch",
+      "disabled-checked-label": "Disabled and checked switch"
+    },
+    "controlled": {
+      "dynamic-status": "Switch is {checked,select,true{on} other{off}}",
+      "dynamic-status-with-padding": "Switch is {checked,select,true{on} other{off}}"
+    },
+    "sizes": {
+      "small-label": "Small switch",
+      "medium-label": "Medium switch"
+    }
+  },
+  "select-field-demo": {
+    "labels": {
+      "flavor": "Flavor",
+      "required-field": "Required Field",
+      "with-error": "With Error",
+      "flavor-small": "Flavor",
+      "required-field-small": "Required Field",
+      "with-error-small": "With Error (small)"
+    },
+    "placeholders": {
+      "choose-flavor": "Choose a flavor...",
+      "required-field": "This field is required...",
+      "choose-flavor-small": "Choose a flavor... (small)",
+      "required-field-small": "This field is required... (small)"
+    }
+  },
+  "section-with-icon-demo": {
+    "descriptions": {
+      "icon-animation-feature": "This section demonstrates how to include an icon in the header and uses FormKit auto-animate for smooth transitions when toggling content visibility."
+    }
+  },
+  "rangeslider-demo": {
+    "labels": {
+      "single-value": "Single Value:",
+      "range": "Range:",
+      "step-size-25": "Step Size 25:",
+      "disabled": "Disabled: 50%"
+    }
+  },
+  "multi-input-field-demo": {
+    "sections": {
+      "default-delimiters": {
+        "title": "Default Delimiters (Newline and Comma)",
+        "description": "Try pasting: “Option 1, Option 2” or multiple lines"
+      },
+      "comma-delimiter": {
+        "title": "Comma Only Delimiter",
+        "description": "Try pasting: “First, Second, Third”"
+      },
+      "key-value-pairs": {
+        "title": "Key-Value Pair Paste Support",
+        "description": "Try pasting: “NODE_ENV=production” or “KEY1:value1, KEY2:value2”"
+      },
+      "custom-delimiters": {
+        "title": "Custom Delimiters (Semicolon and Pipe)",
+        "description": "Try pasting: “One;Two|Three”"
+      }
+    }
+  },
+  "input-types-demo": {
+    "placeholders": {
+      "enter-type": "Enter {type}..."
+    }
+  },
+  "form-addons-demo": {
+    "labels": {
+      "website": "Website",
+      "website-with-subdomain": "Website",
+      "github-username": "GitHub Username",
+      "custom-domain": "Custom Domain"
+    },
+    "buttons": {
+      "reset": "Reset",
+      "submit": "Submit"
+    }
+  },
+  "empty-screen-border-demo": {
+    "sections": {
+      "without-border": "Without Border",
+      "with-solid-border": "With Solid Border"
+    },
+    "empty-states": {
+      "no-apps": {
+        "description": "Browse available apps in the marketplace"
+      },
+      "no-messages": {
+        "description": "Your inbox is empty"
+      }
+    },
+    "buttons": {
+      "browse-apps": "Browse Apps",
+      "compose": "Compose"
+    }
+  },
+  "dropdown-avatar-trigger": {
+    "avatar": {
+      "alt-text": "Avatar"
+    },
+    "menu": {
+      "profile-label": "Profile",
+      "view-profile": "View Profile",
+      "settings": "Settings",
+      "sign-out": "Sign out"
+    },
+    "demo": {
+      "caption": "Avatar Menu"
+    }
+  },
+  "dialog-basic-demo": {
+    "buttons": {
+      "open-dialog": "Open Basic Dialog",
+      "action": "Action"
+    },
+    "content": {
+      "description": "Dialogs are used to display content that requires user attention or interaction. They appear above the page content and must be closed before interacting with the page again."
+    }
+  },
+  "checkbox-basic-demo": {
+    "states": {
+      "unchecked": "Unchecked",
+      "checked": "Checked",
+      "disabled": "Disabled",
+      "disabled-checked": "Disabled Checked"
+    }
+  },
+  "button-icons-demo": {
+    "sections": {
+      "start-icon-heading": "Start Icon",
+      "end-icon-heading": "End Icon"
+    },
+    "labels": {
+      "start-icon-caption": "Start Icon",
+      "end-icon-caption": "End Icon"
+    }
+  },
+  "badge-dots-demo": {
+    "labels": {
+      "dot-indicator": "Dot"
+    }
+  },
+  "avatar-indicator-demo": {
+    "alt-text": {
+      "with-indicator": "With indicator"
+    },
+    "labels": {
+      "status-indicator-description": "With Status Indicator"
+    }
+  },
+  "alert-basic-demo": {
+    "titles": {
+      "severity-alert": "{severityCharAt0ToUpperCaseSeveritySlice1} Alert"
+    }
+  },
+  "spacing-table": {
+    "token": {
+      "display-format_0": "px",
+      "display-format_1": "{tokenName} ({tokenPixels})"
+    }
+  }
+}
diff --git a/packages/ui/components/filter-select/index.tsx b/packages/ui/components/filter-select/index.tsx
index 4634a6a8c3d06e..69b84911c5728d 100644
--- a/packages/ui/components/filter-select/index.tsx
+++ b/packages/ui/components/filter-select/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import classNames from "@calcom/ui/classNames";
 
 import { Badge } from "../badge/Badge";
@@ -42,6 +43,8 @@ export function FilterSelect({
   emptyText = "No results",
   testId,
 }: FilterSelectProps) {
+const t = useTranslations("filter-select");
+
   const selectedOption = options.find((option) => option.value === selectedValue);
 
   return (
@@ -90,9 +93,7 @@ export function FilterSelect({
               <>
                 <CommandSeparator />
                 <CommandGroup>
-                  <CommandItem onSelect={() => onChange(null)} className="justify-center text-center">
-                    Clear filter
-                  </CommandItem>
+                  <CommandItem onSelect={() => onChange(null)} className="justify-center text-center">{t('actions.clear-filter')}</CommandItem>
                 </CommandGroup>
               </>
             )}
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index efe349b5b98aa7..306d71fbfce97f 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -33,6 +34,8 @@ const HorizontalTabItem = function ({
   matchFullPath,
   ...props
 }: HorizontalTabItemProps) {
+const t = useTranslations("horizontal-tab-item");
+
   const isCurrent = useUrlMatchesCurrentUrl(href, matchFullPath) || props?.isActive;
   const { t } = useLocale();
 
@@ -65,7 +68,7 @@ const HorizontalTabItem = function ({
           aria-hidden="true"
         />
       )}
-      {avatar && <Avatar size="xs" imageSrc={avatar} alt="avatar" className="-ml-0.5 me-1" />} {t(name)}
+      {avatar && <Avatar size="xs" imageSrc={avatar} alt={t('accessibility.avatar-alt-text')} className="-ml-0.5 me-1" />} {t(name)}
     </Link>
   );
 };