xertica-ui 2.1.11 → 2.2.1

package/components/pages/template-content/TemplateContent.tsx

@@ -129,7 +129,7 @@ export function TemplateContent() {
 
   const handleFormSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    toast.success('Form submitted successfully!');
+    toast.success(t('templates.formSubmitSuccess'));
   };
 
   return (
@@ -144,8 +144,8 @@ export function TemplateContent() {
         showThemeToggle={true}
         showLanguageSelector={true}
         breadcrumbs={[
-          { label: 'Design System', href: '/home', icon: <Home className="w-4 h-4" /> },
-          { label: 'Página de Template' },
+          { label: t('nav.designSystem'), href: '/home', icon: <Home className="w-4 h-4" /> },
+          { label: t('templates.breadcrumb') },
         ]}
         renderLink={(href, props) => <Link to={href} {...props} />}
       />
@@ -157,36 +157,36 @@ export function TemplateContent() {
             <div className="max-w-6xl mx-auto space-y-8">
               {/* Page header */}
               <PageHeader
-                title="Página de Template"
-                subtitle="Template completo com componentes do Design System"
+                title={t('templates.title')}
+                subtitle={t('templates.subtitle')}
               />
 
               {/* Page Header Example */}
               <section>
-                <h3 className="mb-4">Header with Breadcrumbs</h3>
+                <h3 className="mb-4">{t('templates.headerWithBreadcrumbs.sectionTitle')}</h3>
                 <Card>
                   <CardHeader>
-                    <CardTitle>Main Header</CardTitle>
-                    <CardDescription>Example of Header with 4-level breadcrumbs</CardDescription>
+                    <CardTitle>{t('templates.headerWithBreadcrumbs.cardTitle')}</CardTitle>
+                    <CardDescription>{t('templates.headerWithBreadcrumbs.cardDescription')}</CardDescription>
                   </CardHeader>
                   <CardContent className="p-0 border-t bg-background overflow-hidden rounded-b-[var(--radius-lg)]">
                     <Header
                       className="border-b"
                       breadcrumbs={[
-                        { label: 'Dashboard', href: '#', icon: <Home className="w-4 h-4" /> },
-                        { label: 'Settings', href: '#', icon: <Settings className="w-4 h-4" /> },
-                        { label: 'Users', href: '#', icon: <Users className="w-4 h-4" /> },
-                        { label: 'Access Profile' },
+                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.dashboard'), href: '#', icon: <Home className="w-4 h-4" /> },
+                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.settings'), href: '#', icon: <Settings className="w-4 h-4" /> },
+                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.users'), href: '#', icon: <Users className="w-4 h-4" /> },
+                        { label: t('templates.headerWithBreadcrumbs.breadcrumbs.accessProfile') },
                       ]}
                       showLanguageSelector={true}
                       showThemeToggle={true}
                     />
                     <div className="p-6 min-h-[200px]">
-                      <h4 className="text-lg font-semibold mb-2">Example Content</h4>
+                      <h4 className="text-lg font-semibold mb-2">{t('templates.headerWithBreadcrumbs.exampleContentTitle')}</h4>
                       <p className="text-muted-foreground">
-                        Neste exemplo, o componente <strong>Header</strong> principal da aplicação
-                        agora suporta receber um array de breadcrumbs para navegações complexas com
-                        mais de 3 níveis.
+                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart1')}
+                        <strong>Header</strong>
+                        {t('templates.headerWithBreadcrumbs.exampleContentDescriptionPart2')}
                       </p>
                     </div>
                   </CardContent>
@@ -197,31 +197,26 @@ export function TemplateContent() {
 
               {/* Alert Examples */}
               <section>
-                <h3 className="mb-4">Alertas</h3>
+                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
                 <div className="grid gap-4 md:grid-cols-2">
                   <Alert variant="info">
-                    <AlertTitle>Informação</AlertTitle>
-                    <AlertDescription>
-                      Este é um exemplo de alerta informativo usando os componentes do Design
-                      System.
-                    </AlertDescription>
+                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
                   </Alert>
 
                   <Alert variant="destructive">
-                    <AlertTitle>Erro</AlertTitle>
-                    <AlertDescription>
-                      Ocorreu um erro ao processar sua solicitação.
-                    </AlertDescription>
+                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
                   </Alert>
 
                   <Alert variant="success">
-                    <AlertTitle>Sucesso</AlertTitle>
-                    <AlertDescription>Operação realizada com sucesso!</AlertDescription>
+                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
                   </Alert>
 
                   <Alert variant="warning">
-                    <AlertTitle>Aviso</AlertTitle>
-                    <AlertDescription>Atenção: Esta ação não pode ser desfeita.</AlertDescription>
+                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
                   </Alert>
                 </div>
               </section>
@@ -230,14 +225,14 @@ export function TemplateContent() {
 
               {/* Cards & Tabs */}
               <section>
-                <h3 className="mb-4">Cards & Abas</h3>
+                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
 
                 <Tabs defaultValue="overview" className="w-full">
                   <TabsList className="grid w-full grid-cols-4">
-                    <TabsTrigger value="overview">Visão Geral</TabsTrigger>
-                    <TabsTrigger value="forms">Formulários</TabsTrigger>
-                    <TabsTrigger value="data">Dados</TabsTrigger>
-                    <TabsTrigger value="settings">Configurações</TabsTrigger>
+                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
+                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
+                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
+                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
                   </TabsList>
 
                   {/* Overview Tab */}
@@ -245,8 +240,8 @@ export function TemplateContent() {
                     <div className="grid gap-4 md:grid-cols-3">
                       <Card>
                         <CardHeader>
-                          <CardTitle>Total de Usuários</CardTitle>
-                          <CardDescription>Últimos 30 dias</CardDescription>
+                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
+                          <CardDescription>{t('stats.last30Days')}</CardDescription>
                         </CardHeader>
                         <CardContent>
                           <div className="text-foreground">
@@ -262,8 +257,8 @@ export function TemplateContent() {
 
                       <Card>
                         <CardHeader>
-                          <CardTitle>Receita Total</CardTitle>
-                          <CardDescription>Mês atual</CardDescription>
+                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
+                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
                         </CardHeader>
                         <CardContent>
                           <div className="text-foreground">
@@ -279,8 +274,8 @@ export function TemplateContent() {
 
                       <Card>
                         <CardHeader>
-                          <CardTitle>Taxa de Conversão</CardTitle>
-                          <CardDescription>Semana atual</CardDescription>
+                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
+                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
                         </CardHeader>
                         <CardContent>
                           <div className="text-foreground">
@@ -297,13 +292,13 @@ export function TemplateContent() {
 
                     <Card>
                       <CardHeader>
-                        <CardTitle>Progresso & Sliders</CardTitle>
-                        <CardDescription>Exemplo de componentes de progresso</CardDescription>
+                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
+                        <CardDescription>{t('templates.overview.progressDescription')}</CardDescription>
                       </CardHeader>
                       <CardContent className="space-y-6">
                         <div className="space-y-2">
                           <div className="flex items-center justify-between">
-                            <Label>Progresso do Projeto</Label>
+                            <Label>{t('templates.overview.projectProgress')}</Label>
                             <span className="[font-size:var(--text-small)] text-muted-foreground">
                               {progress}%
                             </span>
@@ -329,7 +324,7 @@ export function TemplateContent() {
 
                         <div className="space-y-2">
                           <div className="flex items-center justify-between">
-                            <Label>Volume</Label>
+                            <Label>{t('templates.overview.volume')}</Label>
                             <span className="[font-size:var(--text-small)] text-muted-foreground">
                               {sliderValue[0]}%
                             </span>
@@ -341,7 +336,7 @@ export function TemplateContent() {
                             max={100}
                             step={1}
                             className="w-full"
-                            aria-label="Volume"
+                            aria-label={t('templates.overview.volume')}
                           />
                         </div>
                       </CardContent>
@@ -352,70 +347,68 @@ export function TemplateContent() {
                   <TabsContent value="forms" className="space-y-4">
                     <Card>
                       <CardHeader>
-                        <CardTitle>Formulário de Cadastro</CardTitle>
-                        <CardDescription>
-                          Preencha os campos abaixo para criar uma nova conta
-                        </CardDescription>
+                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
+                        <CardDescription>{t('templates.forms.registrationDescription')}</CardDescription>
                       </CardHeader>
                       <CardContent>
                         <form onSubmit={handleFormSubmit} className="space-y-4">
                           <div className="grid gap-4 md:grid-cols-2">
                             <div className="space-y-2">
-                              <Label htmlFor="firstName">Nome</Label>
-                              <Input id="firstName" placeholder="João" />
+                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
+                              <Input id="firstName" placeholder={t('templates.forms.firstNamePlaceholder')} />
                             </div>
                             <div className="space-y-2">
-                              <Label htmlFor="lastName">Sobrenome</Label>
-                              <Input id="lastName" placeholder="Silva" />
+                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
+                              <Input id="lastName" placeholder={t('templates.forms.lastNamePlaceholder')} />
                             </div>
                           </div>
 
                           <div className="space-y-2">
-                            <Label htmlFor="email">E-mail</Label>
+                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
                             <div className="relative">
                               <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                               <Input
                                 id="email"
                                 type="email"
-                                placeholder="john@example.com"
+                                placeholder={t('templates.forms.emailPlaceholder')}
                                 className="pl-10"
                               />
                             </div>
                           </div>
 
                           <div className="space-y-2">
-                            <Label htmlFor="phone">Telefone</Label>
+                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
                             <div className="relative">
                               <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                               <Input
                                 id="phone"
                                 type="tel"
-                                placeholder="(11) 99999-9999"
+                                placeholder={t('templates.forms.phonePlaceholder')}
                                 className="pl-10"
                               />
                             </div>
                           </div>
 
                           <div className="space-y-2">
-                            <Label htmlFor="role">Função</Label>
+                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
                             <Select>
                               <SelectTrigger id="role">
-                                <SelectValue placeholder="Selecione uma função" />
+                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
                               </SelectTrigger>
                               <SelectContent>
-                                <SelectItem value="developer">Desenvolvedor</SelectItem>
-                                <SelectItem value="designer">Designer</SelectItem>
-                                <SelectItem value="manager">Gerente</SelectItem>
-                                <SelectItem value="analyst">Analista</SelectItem>
+                                <SelectItem value="developer">{t('templates.forms.roles.developer')}</SelectItem>
+                                <SelectItem value="designer">{t('templates.forms.roles.designer')}</SelectItem>
+                                <SelectItem value="manager">{t('templates.forms.roles.manager')}</SelectItem>
+                                <SelectItem value="analyst">{t('templates.forms.roles.analyst')}</SelectItem>
                               </SelectContent>
                             </Select>
                           </div>
 
                           <div className="space-y-2">
-                            <Label htmlFor="bio">Biografia</Label>
+                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
                             <Textarea
                               id="bio"
-                              placeholder="Conte-nos um pouco sobre você..."
+                              placeholder={t('templates.forms.bioPlaceholder')}
                               rows={4}
                             />
                           </div>
@@ -423,27 +416,27 @@ export function TemplateContent() {
                           <Separator />
 
                           <div className="space-y-4">
-                            <h4>Preferências</h4>
+                            <h4>{t('templates.forms.preferences')}</h4>
 
                             <div className="space-y-3">
                               <div className="flex items-center space-x-2">
                                 <Checkbox id="newsletter" />
                                 <Label htmlFor="newsletter" className="font-normal">
-                                  Receber newsletter por e-mail
+                                  {t('templates.forms.newsletter')}
                                 </Label>
                               </div>
 
                               <div className="flex items-center space-x-2">
                                 <Checkbox id="notifications" />
                                 <Label htmlFor="notifications" className="font-normal">
-                                  Ativar notificações push
+                                  {t('templates.forms.pushNotifications')}
                                 </Label>
                               </div>
 
                               <div className="flex items-center space-x-2">
                                 <Checkbox id="updates" />
                                 <Label htmlFor="updates" className="font-normal">
-                                  Receber atualizações sobre novos recursos
+                                  {t('templates.forms.featureUpdates')}
                                 </Label>
                               </div>
                             </div>
@@ -451,24 +444,24 @@ export function TemplateContent() {
                             <Separator />
 
                             <div className="space-y-3">
-                              <Label>Tipo de Conta</Label>
-                              <RadioGroup defaultValue="personal" aria-label="Tipo de Conta">
+                              <Label>{t('templates.forms.accountType')}</Label>
+                              <RadioGroup defaultValue="personal" aria-label={t('templates.forms.accountType')}>
                                 <div className="flex items-center space-x-2">
                                   <RadioGroupItem value="personal" id="personal" />
                                   <Label htmlFor="personal" className="font-normal">
-                                    Pessoal
+                                    {t('templates.forms.accountPersonal')}
                                   </Label>
                                 </div>
                                 <div className="flex items-center space-x-2">
                                   <RadioGroupItem value="business" id="business" />
                                   <Label htmlFor="business" className="font-normal">
-                                    Empresarial
+                                    {t('templates.forms.accountBusiness')}
                                   </Label>
                                 </div>
                                 <div className="flex items-center space-x-2">
                                   <RadioGroupItem value="enterprise" id="enterprise" />
                                   <Label htmlFor="enterprise" className="font-normal">
-                                    Corporativo
+                                    {t('templates.forms.accountEnterprise')}
                                   </Label>
                                 </div>
                               </RadioGroup>
@@ -477,8 +470,8 @@ export function TemplateContent() {
                         </form>
                       </CardContent>
                       <CardFooter className="flex justify-between">
-                        <Button variant="outline">Cancelar</Button>
-                        <Button onClick={handleFormSubmit}>Criar Conta</Button>
+                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
+                        <Button onClick={handleFormSubmit}>{t('templates.forms.createAccount')}</Button>
                       </CardFooter>
                     </Card>
                   </TabsContent>
@@ -488,16 +481,16 @@ export function TemplateContent() {
                     <SectionErrorBoundary>
                     <Card>
                       <CardHeader>
-                        <CardTitle>Lista de Usuários</CardTitle>
-                        <CardDescription>Gerenciar usuários do sistema</CardDescription>
+                        <CardTitle>{t('templates.data.title')}</CardTitle>
+                        <CardDescription>{t('templates.data.description')}</CardDescription>
                       </CardHeader>
                       <CardContent>
                         <div className="mb-4">
                           <div className="relative">
                             <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                             <Input
-                              placeholder="Buscar usuários..."
-                              aria-label="Buscar usuários"
+                              placeholder={t('templates.data.searchPlaceholder')}
+                              aria-label={t('templates.data.searchPlaceholder')}
                               className="pl-10"
                             />
                           </div>
@@ -569,10 +562,10 @@ export function TemplateContent() {
                         </p>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm">
-                            Previous
+                            {t('common.previous')}
                           </Button>
                           <Button variant="outline" size="sm">
-                            Next
+                            {t('common.next')}
                           </Button>
                         </div>
                       </CardFooter>
@@ -584,15 +577,15 @@ export function TemplateContent() {
                   <TabsContent value="settings" className="space-y-4">
                     <Card>
                       <CardHeader>
-                        <CardTitle>Configurações do Sistema</CardTitle>
-                        <CardDescription>Gerenciar configurações gerais</CardDescription>
+                        <CardTitle>{t('templates.settings.title')}</CardTitle>
+                        <CardDescription>{t('templates.settings.description')}</CardDescription>
                       </CardHeader>
                       <CardContent className="space-y-6">
                         <div className="flex items-center justify-between">
                           <div className="space-y-1">
-                            <Label htmlFor="dark-mode">Dark Mode</Label>
+                            <Label htmlFor="dark-mode">{t('templates.settings.darkMode')}</Label>
                             <p className="text-muted-foreground">
-                              Enable dark theme in the interface
+                              {t('templates.settings.darkModeDescription')}
                             </p>
                           </div>
                           <Switch
@@ -606,9 +599,9 @@ export function TemplateContent() {
 
                         <div className="flex items-center justify-between">
                           <div className="space-y-1">
-                            <Label htmlFor="email-notifications">Email Notifications</Label>
+                            <Label htmlFor="email-notifications">{t('templates.settings.emailNotifications')}</Label>
                             <p className="text-muted-foreground">
-                              Receive important updates by email
+                              {t('templates.settings.emailNotificationsDescription')}
                             </p>
                           </div>
                           <Switch id="email-notifications" defaultChecked />
@@ -618,9 +611,9 @@ export function TemplateContent() {
 
                         <div className="flex items-center justify-between">
                           <div className="space-y-1">
-                            <Label htmlFor="push-notifications">Push Notifications</Label>
+                            <Label htmlFor="push-notifications">{t('templates.settings.pushNotifications')}</Label>
                             <p className="text-muted-foreground">
-                              Receive instant notifications in the browser
+                              {t('templates.settings.pushNotificationsDescription')}
                             </p>
                           </div>
                           <Switch id="push-notifications" />
@@ -629,15 +622,15 @@ export function TemplateContent() {
                         <Separator />
 
                         <div className="space-y-3">
-                          <Label>Language</Label>
+                          <Label>{t('templates.settings.language')}</Label>
                           <Select defaultValue="pt-br">
-                            <SelectTrigger aria-label="Idioma do sistema">
+                            <SelectTrigger aria-label={t('templates.settings.language')}>
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
-                              <SelectItem value="pt-br">Portuguese (Brazil)</SelectItem>
-                              <SelectItem value="en">English</SelectItem>
-                              <SelectItem value="es">Spanish</SelectItem>
+                              <SelectItem value="pt-br">{t('templates.settings.languages.ptBR')}</SelectItem>
+                              <SelectItem value="en">{t('templates.settings.languages.en')}</SelectItem>
+                              <SelectItem value="es">{t('templates.settings.languages.es')}</SelectItem>
                             </SelectContent>
                           </Select>
                         </div>
@@ -645,26 +638,26 @@ export function TemplateContent() {
                         <Separator />
 
                         <div className="space-y-3">
-                          <Label>Time Zone</Label>
+                          <Label>{t('templates.settings.timezone')}</Label>
                           <Select defaultValue="america-sao-paulo">
-                            <SelectTrigger aria-label="Fuso horário">
+                            <SelectTrigger aria-label={t('templates.settings.timezone')}>
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
                               <SelectItem value="america-sao-paulo">
-                                America/Sao Paulo (GMT-3)
+                                {t('templates.settings.timezones.saoPaulo')}
                               </SelectItem>
                               <SelectItem value="america-new-york">
-                                America/New York (GMT-5)
+                                {t('templates.settings.timezones.newYork')}
                               </SelectItem>
-                              <SelectItem value="europe-london">Europe/London (GMT+0)</SelectItem>
+                              <SelectItem value="europe-london">{t('templates.settings.timezones.london')}</SelectItem>
                             </SelectContent>
                           </Select>
                         </div>
                       </CardContent>
                       <CardFooter className="flex justify-between">
-                        <Button variant="outline">Restaurar Padrões</Button>
-                        <Button>Salvar Alterações</Button>
+                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
+                        <Button>{t('templates.settings.saveChanges')}</Button>
                       </CardFooter>
                     </Card>
                   </TabsContent>
@@ -675,15 +668,15 @@ export function TemplateContent() {
 
               {/* Button Variants */}
               <section>
-                <h3 className="mb-4">Botões</h3>
+                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
                 <Card>
                   <CardHeader>
-                    <CardTitle>Variações de Botão</CardTitle>
-                    <CardDescription>Diferentes estilos e tamanhos de botões</CardDescription>
+                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
+                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-6">
                     <div className="space-y-3">
-                      <Label>Variants</Label>
+                      <Label>{t('templates.buttons.variants')}</Label>
                       <div className="flex flex-wrap gap-3">
                         <Button variant="default">Default</Button>
                         <Button variant="secondary">Secondary</Button>
@@ -697,12 +690,12 @@ export function TemplateContent() {
                     <Separator />
 
                     <div className="space-y-3">
-                      <Label>Sizes</Label>
+                      <Label>{t('templates.buttons.sizes')}</Label>
                       <div className="flex flex-wrap items-center gap-3">
                         <Button size="sm">Small</Button>
                         <Button size="default">Default</Button>
                         <Button size="lg">Large</Button>
-                        <Button size="icon" aria-label="Configurações">
+                        <Button size="icon" aria-label={t('nav.settings')}>
                           <Settings className="h-4 w-4" />
                         </Button>
                       </div>
@@ -711,19 +704,19 @@ export function TemplateContent() {
                     <Separator />
 
                     <div className="space-y-3">
-                      <Label>With Icons</Label>
+                      <Label>{t('templates.buttons.withIcons')}</Label>
                       <div className="flex flex-wrap gap-3">
                         <Button>
                           <User className="mr-2 h-4 w-4" />
-                          Profile
+                          {t('templates.buttons.profile')}
                         </Button>
                         <Button variant="secondary">
                           <Mail className="mr-2 h-4 w-4" />
-                          Messages
+                          {t('templates.buttons.messages')}
                         </Button>
                         <Button variant="outline">
                           <Calendar className="mr-2 h-4 w-4" />
-                          Schedule
+                          {t('templates.buttons.schedule')}
                         </Button>
                       </div>
                     </div>
@@ -731,11 +724,11 @@ export function TemplateContent() {
                     <Separator />
 
                     <div className="space-y-3">
-                      <Label>States</Label>
+                      <Label>{t('templates.buttons.states')}</Label>
                       <div className="flex flex-wrap gap-3">
-                        <Button disabled>Disabled</Button>
+                        <Button disabled>{t('templates.buttons.disabled')}</Button>
                         <Button variant="outline" disabled>
-                          Outline Disabled
+                          {t('templates.buttons.outlineDisabled')}
                         </Button>
                       </div>
                     </div>
@@ -747,22 +740,20 @@ export function TemplateContent() {
 
               {/* Badges */}
               <section>
-                <h3 className="mb-4">Badges</h3>
+                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
                 <Card>
                   <CardHeader>
-                    <CardTitle>Variações de Badge</CardTitle>
-                    <CardDescription>
-                      Estilos diferentes de badge para status e tags
-                    </CardDescription>
+                    <CardTitle>{t('templates.badges.title')}</CardTitle>
+                    <CardDescription>{t('templates.badges.description')}</CardDescription>
                   </CardHeader>
                   <CardContent>
                     <div className="flex flex-wrap gap-3">
-                      <Badge variant="default">Padrão</Badge>
-                      <Badge variant="secondary">Secundário</Badge>
-                      <Badge variant="outline">Contorno</Badge>
-                      <Badge variant="destructive">Destrutivo</Badge>
-                      <Badge className="bg-success text-success-foreground">Sucesso</Badge>
-                      <Badge className="bg-warning text-warning-foreground">Aviso</Badge>
+                      <Badge variant="default">Default</Badge>
+                      <Badge variant="secondary">Secondary</Badge>
+                      <Badge variant="outline">Outline</Badge>
+                      <Badge variant="destructive">Destructive</Badge>
+                      <Badge className="bg-success text-success-foreground">Success</Badge>
+                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
                       <Badge className="bg-info text-info-foreground">Info</Badge>
                     </div>
                   </CardContent>
@@ -773,41 +764,41 @@ export function TemplateContent() {
 
               {/* Dialogs */}
               <section>
-                <h3 className="mb-4">Diálogos</h3>
+                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
                 <div className="grid gap-4 md:grid-cols-2">
                   <Card>
                     <CardHeader>
-                      <CardTitle>Diálogo</CardTitle>
-                      <CardDescription>Um modal interativo básico</CardDescription>
+                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
+                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
                     </CardHeader>
                     <CardContent className="flex justify-center py-6">
                       <Dialog>
                         <DialogTrigger asChild>
-                          <Button variant="outline">Editar Perfil</Button>
+                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
                         </DialogTrigger>
                         <DialogContent className="sm:max-w-[425px]">
                           <DialogHeader>
-                            <DialogTitle>Editar Perfil</DialogTitle>
+                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
                             <DialogDescription>
-                              Faça alterações no seu perfil aqui. Clique em salvar quando terminar.
+                              {t('templates.dialogs.editProfileDescription')}
                             </DialogDescription>
                           </DialogHeader>
                           <div className="grid gap-4 py-4">
                             <div className="grid grid-cols-4 items-center gap-4">
                               <Label htmlFor="name" className="text-right">
-                                Nome
+                                {t('templates.dialogs.name')}
                               </Label>
                               <Input id="name" defaultValue="John Doe" className="col-span-3" />
                             </div>
                             <div className="grid grid-cols-4 items-center gap-4">
                               <Label htmlFor="username" className="text-right">
-                                Usuário
+                                {t('templates.dialogs.username')}
                               </Label>
                               <Input id="username" defaultValue="@johndoe" className="col-span-3" />
                             </div>
                           </div>
                           <DialogFooter>
-                            <Button type="submit">Atualizar</Button>
+                            <Button type="submit">{t('templates.dialogs.update')}</Button>
                           </DialogFooter>
                         </DialogContent>
                       </Dialog>
@@ -816,26 +807,25 @@ export function TemplateContent() {
 
                   <Card>
                     <CardHeader>
-                      <CardTitle>Alerta de Diálogo</CardTitle>
-                      <CardDescription>Um alerta para decisões importantes</CardDescription>
+                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
+                      <CardDescription>{t('templates.dialogs.alertDialogDescription')}</CardDescription>
                     </CardHeader>
                     <CardContent className="flex justify-center py-6">
                       <AlertDialog>
                         <AlertDialogTrigger asChild>
-                          <Button variant="destructive">Excluir Conta</Button>
+                          <Button variant="destructive">{t('templates.dialogs.deleteAccount')}</Button>
                         </AlertDialogTrigger>
                         <AlertDialogContent className="sm:max-w-[425px]">
                           <AlertDialogHeader>
-                            <AlertDialogTitle>Você tem certeza absoluta?</AlertDialogTitle>
+                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
                             <AlertDialogDescription>
-                              Esta ação não pode ser desfeita. Isso excluirá permanentemente sua
-                              conta e removerá seus dados de nossos servidores.
+                              {t('templates.dialogs.deleteWarning')}
                             </AlertDialogDescription>
                           </AlertDialogHeader>
                           <AlertDialogFooter>
-                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
                             <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-                              Continuar
+                              {t('templates.dialogs.continue')}
                             </AlertDialogAction>
                           </AlertDialogFooter>
                         </AlertDialogContent>
@@ -856,17 +846,15 @@ export function TemplateContent() {
 
               {/* Header Variations */}
               <section>
-                <h3 className="mb-4">Variações de Cabeçalho</h3>
+                <h3 className="mb-4">{t('templates.headerVariations.sectionTitle')}</h3>
                 <Card>
                   <CardHeader>
-                    <CardTitle>Configurações do Cabeçalho Principal</CardTitle>
-                    <CardDescription>
-                      O Header é focado em navegação (breadcrumbs) e ações contextuais rápidas.
-                    </CardDescription>
+                    <CardTitle>{t('templates.headerVariations.cardTitle')}</CardTitle>
+                    <CardDescription>{t('templates.headerVariations.cardDescription')}</CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-6">
                     <div className="p-4 border rounded-[var(--radius-lg)] bg-muted/30">
-                      <h4 className="text-sm font-semibold mb-4">Elementos Visíveis</h4>
+                      <h4 className="text-sm font-semibold mb-4">{t('templates.headerVariations.visibleElements')}</h4>
                       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                         <div className="flex items-center space-x-2">
                           <Switch
@@ -875,7 +863,7 @@ export function TemplateContent() {
                             onCheckedChange={setShowHeaderActions}
                           />
                           <Label htmlFor="header-actions" className="cursor-pointer">
-                            Botões de Ação
+                            {t('templates.headerVariations.actionButtons')}
                           </Label>
                         </div>
                         <div className="flex items-center space-x-2">
@@ -885,7 +873,7 @@ export function TemplateContent() {
                             onCheckedChange={setShowHeaderBreadcrumbs}
                           />
                           <Label htmlFor="header-bread" className="cursor-pointer">
-                            Breadcrumbs
+                            {t('templates.headerVariations.breadcrumbsLabel')}
                           </Label>
                         </div>
                       </div>
@@ -893,20 +881,20 @@ export function TemplateContent() {
 
                     <div className="relative border rounded-[var(--radius-lg)] bg-muted/10 overflow-hidden shadow-inner">
                       <div className="p-4 bg-background/50 border-b text-xs font-mono text-muted-foreground">
-                        Visualização
+                        {t('templates.headerVariations.preview')}
                       </div>
                       <Header
-                        title={!showHeaderBreadcrumbs ? 'Página Atual' : undefined}
+                        title={!showHeaderBreadcrumbs ? t('templates.headerVariations.currentPage') : undefined}
                         breadcrumbs={
                           showHeaderBreadcrumbs
                             ? [
                                 {
-                                  label: 'Xertica UI',
+                                  label: t('templates.headerVariations.breadcrumbBrand'),
                                   href: '#',
                                   icon: <Home className="w-4 h-4" />,
                                 },
-                                { label: 'Configurações', href: '#' },
-                                { label: 'Perfil' },
+                                { label: t('templates.headerVariations.breadcrumbSettings'), href: '#' },
+                                { label: t('templates.headerVariations.breadcrumbProfile') },
                               ]
                             : undefined
                         }
@@ -916,20 +904,20 @@ export function TemplateContent() {
                                 {
                                   id: 'notify',
                                   icon: <Bell className="w-5 h-5" />,
-                                  onClick: () => toast('Notificações abertas'),
+                                  onClick: () => toast(t('templates.headerVariations.notificationsOpenedToast')),
                                 },
                                 {
                                   id: 'mail',
-                                  label: 'Mensagens',
+                                  label: t('templates.headerVariations.messagesLabel'),
                                   icon: <Mail className="w-5 h-5" />,
-                                  onClick: () => toast('Mensagens abertas'),
+                                  onClick: () => toast(t('templates.headerVariations.messagesOpenedToast')),
                                 },
                               ]
                             : undefined
                         }
                       />
                       <div className="h-32 flex items-center justify-center text-muted-foreground text-sm italic">
-                        Área de Conteúdo da Página
+                        {t('templates.headerVariations.contentArea')}
                       </div>
                     </div>
                   </CardContent>
@@ -940,23 +928,21 @@ export function TemplateContent() {
 
               {/* Sidebar Variations */}
               <section>
-                <h3 className="mb-4">Variações da Sidebar</h3>
+                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
                 <Card>
                   <CardHeader>
-                    <CardTitle>Sidebar Modo Assistente vs Padrão</CardTitle>
-                    <CardDescription>
-                      A Sidebar suporta flexibilidade através da propriedade variant.
-                    </CardDescription>
+                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
+                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
                   </CardHeader>
                   <CardContent>
                     <Tabs defaultValue="assistant" className="w-full">
                       <TabsList className="mb-4">
-                        <TabsTrigger value="assistant">Modo Assistente</TabsTrigger>
-                        <TabsTrigger value="default">Modo Padrão</TabsTrigger>
+                        <TabsTrigger value="assistant">{t('templates.sidebar.assistantMode')}</TabsTrigger>
+                        <TabsTrigger value="default">{t('templates.sidebar.defaultMode')}</TabsTrigger>
                       </TabsList>
 
                       <div className="mb-6 p-4 border rounded-[var(--radius-lg)] bg-muted/30">
-                        <h4 className="text-sm font-semibold mb-4">Configurações do Rodapé</h4>
+                        <h4 className="text-sm font-semibold mb-4">{t('templates.sidebarControls.footerSettings')}</h4>
                         <div className="flex flex-wrap gap-6 mt-2">
                           <div className="flex items-center space-x-2">
                             <Switch
@@ -965,7 +951,7 @@ export function TemplateContent() {
                               onCheckedChange={setShowSidebarUser}
                             />
                             <Label htmlFor="show-user" className="cursor-pointer">
-                              Perfil do Usuário
+                              {t('templates.sidebarControls.userProfile')}
                             </Label>
                           </div>
                           <div className="flex items-center space-x-2">
@@ -975,7 +961,7 @@ export function TemplateContent() {
                               onCheckedChange={setShowSidebarSettings}
                             />
                             <Label htmlFor="show-settings" className="cursor-pointer">
-                              Configurações
+                              {t('templates.sidebarControls.settings')}
                             </Label>
                           </div>
                           <div className="flex items-center space-x-2">
@@ -985,14 +971,14 @@ export function TemplateContent() {
                               onCheckedChange={setShowSidebarLogout}
                             />
                             <Label htmlFor="show-logout" className="cursor-pointer">
-                              Botão de Sair
+                              {t('templates.sidebarControls.logoutButton')}
                             </Label>
                           </div>
                         </div>
 
                         <div className="mt-6 pt-6 border-t">
                           <div className="flex items-center justify-between mb-4">
-                            <h4 className="text-sm font-semibold">Largura da Sidebar (Desktop)</h4>
+                            <h4 className="text-sm font-semibold">{t('templates.sidebarControls.sidebarWidthDesktop')}</h4>
                             <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
                               {sidebarWidth}px
                             </span>
@@ -1008,7 +994,7 @@ export function TemplateContent() {
                               max={450}
                               step={10}
                               className="flex-1"
-                              aria-label="Largura da Sidebar"
+                              aria-label={t('templates.sidebarControls.sidebarWidthAriaLabel')}
                             />
                             <span className="text-xs text-muted-foreground w-12">450px</span>
                           </div>
@@ -1025,35 +1011,35 @@ export function TemplateContent() {
                             width={sidebarWidth}
                             onToggle={() => {}}
                             user={{ email: 'admin@xertica.com' }}
-                            onLogout={() => toast('Saiu')}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
                             location={{ pathname: '/assistant/current' }}
                             navigate={() => {}}
                             variant="assistant"
                             search={{
                               show: true,
-                              placeholder: 'Buscar tópicos...',
+                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
                               filter: {
                                 show: true,
                                 content: (
                                   <div className="p-2 space-y-2">
                                     <div className="text-xs font-semibold uppercase text-muted-foreground px-2">
-                                      Filtrar por Status
+                                      {t('templates.sidebarControls.filterByStatus')}
                                     </div>
                                     <div className="flex flex-wrap gap-2 p-1">
                                       <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
-                                        Ativo
+                                        {t('templates.sidebarControls.filterActive')}
                                       </Badge>
                                       <Badge
                                         variant="outline"
                                         className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
                                       >
-                                        Arquivado
+                                        {t('templates.sidebarControls.filterArchived')}
                                       </Badge>
                                       <Badge
                                         variant="outline"
                                         className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
                                       >
-                                        Pendente
+                                        {t('templates.sidebarControls.filterPending')}
                                       </Badge>
                                     </div>
                                   </div>
@@ -1065,48 +1051,48 @@ export function TemplateContent() {
                               content: (
                                 <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
                                   <Plus className="w-4 h-4 mr-2" />
-                                  Nova Conversa
+                                  {t('templates.sidebar.newConversation')}
                                 </Button>
                               ),
                             }}
                             navigationGroups={[
                               {
                                 id: 'recent',
-                                label: 'Recentes',
+                                label: t('templates.sidebar.recent'),
                                 icon: Clock,
                                 items: [
                                   {
                                     path: '/assistant/refatoracao',
-                                    label: 'Refatoração da Sidebar',
-                                    description: 'Ativo agora',
+                                    label: t('templates.sidebar.items.sidebarRefactor'),
+                                    description: t('templates.sidebar.items.sidebarRefactorDescription'),
                                     actions: [
                                       {
-                                        label: 'Renomear',
+                                        label: t('templates.sidebar.actions.rename'),
                                         icon: FileEdit,
-                                        onClick: () => toast('Abrir renomear...'),
+                                        onClick: () => toast(t('templates.sidebar.actions.renameToast')),
                                       },
                                       {
-                                        label: 'Mover',
+                                        label: t('templates.sidebar.actions.move'),
                                         icon: ArrowRightLeft,
                                         children: [
                                           {
-                                            label: 'Projetos Ativos',
-                                            onClick: () => toast('Movido para Projetos Ativos'),
+                                            label: t('templates.sidebar.actions.moveActive'),
+                                            onClick: () => toast(t('templates.sidebar.actions.moveActiveToast')),
                                           },
                                           {
-                                            label: 'Monitoramento',
-                                            onClick: () => toast('Movido para Monitoramento'),
+                                            label: t('templates.sidebar.actions.moveMonitoring'),
+                                            onClick: () => toast(t('templates.sidebar.actions.moveMonitoringToast')),
                                           },
                                           {
-                                            label: 'Arquivar',
-                                            onClick: () => toast('Movido para Arquivo'),
+                                            label: t('templates.sidebar.actions.moveArchive'),
+                                            onClick: () => toast(t('templates.sidebar.actions.moveArchiveToast')),
                                           },
                                         ],
                                       },
                                       {
-                                        label: 'Limpar',
+                                        label: t('templates.sidebar.actions.clear'),
                                         icon: Trash2,
-                                        onClick: () => toast('Histórico Limpo!'),
+                                        onClick: () => toast(t('templates.sidebar.actions.clearToast')),
                                         variant: 'destructive',
                                       },
                                     ],
@@ -1115,24 +1101,24 @@ export function TemplateContent() {
                               },
                               {
                                 id: 'projects',
-                                label: 'Monitoramento de Projetos',
+                                label: t('templates.sidebar.constructionMonitoring'),
                                 icon: Map,
                                 actions: [
                                   {
-                                    label: 'Nova Categoria',
+                                    label: t('templates.sidebar.actions.newCategory'),
                                     icon: Plus,
-                                    onClick: () => toast('Criar nova categoria...'),
+                                    onClick: () => toast(t('templates.sidebar.actions.newCategoryToast')),
                                   },
                                   {
-                                    label: 'Arquivar Grupo',
+                                    label: t('templates.sidebar.actions.archiveGroup'),
                                     icon: Archive,
-                                    onClick: () => toast('Arquivando grupo...'),
+                                    onClick: () => toast(t('templates.sidebar.actions.archiveGroupToast')),
                                   },
                                 ],
                                 items: [
                                   {
                                     path: '/assistant/br163',
-                                    label: 'Restauração BR-163',
+                                    label: t('templates.sidebar.items.br163Restoration'),
                                     icon: () => (
                                       <div className="w-2 h-2 rounded-full bg-yellow-500" />
                                     ),
@@ -1143,7 +1129,7 @@ export function TemplateContent() {
                                           className="h-1.5 bg-sidebar-foreground/10"
                                         />
                                         <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
-                                          <span>Cuiabá, MT</span>
+                                          <span>{t('templates.sidebar.items.br163Location')}</span>
                                           <span>67%</span>
                                         </div>
                                       </div>
@@ -1163,7 +1149,7 @@ export function TemplateContent() {
                             style={{ left: `${sidebarWidth}px` }}
                           >
                             <p className="text-muted-foreground text-center">
-                              Conteúdo do Modo Assistente
+                              {t('templates.sidebar.assistantContent')}
                             </p>
                           </div>
                         </div>
@@ -1183,15 +1169,15 @@ export function TemplateContent() {
                               email: 'admin@xertica.com',
                               avatar: 'https://github.com/shadcn.png',
                             }}
-                            onLogout={() => toast('Saiu')}
-                            onSettingsClick={() => toast('Configurações clicadas')}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
+                            onSettingsClick={() => toast(t('templates.sidebar.settingsClickedToast'))}
                             location={{ pathname: '/home' }}
                             navigate={() => {}}
                             variant="default"
                             routes={[
-                              { path: '/home', label: 'Início', icon: Home },
-                              { path: '/dashboard', label: 'Dashboard', icon: Users },
-                              { path: '/settings', label: 'Configurações', icon: Settings },
+                              { path: '/home', label: t('templates.sidebar.routes.home'), icon: Home },
+                              { path: '/dashboard', label: t('templates.sidebar.routes.dashboard'), icon: Users },
+                              { path: '/settings', label: t('templates.sidebar.routes.settings'), icon: Settings },
                             ]}
                             footer={{
                               showUser: showSidebarUser,
@@ -1204,7 +1190,7 @@ export function TemplateContent() {
                             style={{ left: `${sidebarWidth}px` }}
                           >
                             <p className="text-muted-foreground text-center">
-                              Navegação Tradicional do Sistema
+                              {t('templates.sidebar.defaultContent')}
                             </p>
                           </div>
                         </div>
@@ -1219,23 +1205,23 @@ export function TemplateContent() {
               {/* Footer Note */}
               <Card className="mt-8">
                 <CardHeader>
-                  <CardTitle>Template Pronto para CLI</CardTitle>
-                  <CardDescription>Como usar este template</CardDescription>
+                  <CardTitle>{t('templates.footer.title')}</CardTitle>
+                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <p className="text-muted-foreground">
-                    Este template está pronto para ser usado como base para novos projetos. Todos os
-                    componentes usam as variáveis CSS definidas em{' '}
+                    {t('templates.footer.descriptionPart1')}
                     <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
-                      /styles/xertica/tokens.css
+                      xertica-ui
                     </code>
-                    and follow the Xertica UI CLI-first architecture.
+                    {t('templates.footer.descriptionPart2')}
                   </p>
                   <Alert variant="info">
-                    <AlertTitle>Dica</AlertTitle>
+                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
                     <AlertDescription>
-                      Copie este arquivo como ponto de partida para suas páginas. Todos os
-                      componentes são reutilizáveis e customizáveis através de variáveis CSS.
+                      {t('templates.footer.tipDescriptionPart1')}
+                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
+                      {t('templates.footer.tipDescriptionPart2')}
                     </AlertDescription>
                   </Alert>
                 </CardContent>