docs(i18n): update PT-BR translations for learn sidebar, UI description, and component labels

Refined wording and improved consistency across translated files, including:
- sidebarLearn.json
- describing-the-ui.md
- SocialBanner.tsx
- Tag.tsx
- TopNav.tsx
- MDXComponents.tsx

Ensures clearer terminology and alignment with React documentation guidelines.

Author: Lucas-Steffen

src/components/Layout/TopNav/TopNav.tsx

@@ -310,7 +310,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                Procurar
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>

src/components/MDX/MDXComponents.tsx

@@ -182,7 +182,7 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
         <div className="flex-col">
           <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            Pronto para aprender sobre este assunto?
           </h2>
           {children}
           {path ? (

src/components/SocialBanner.tsx

@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Join us for React Conf on Oct 7-8.';
+const bannerText = 'Participe da conferência React nos dias 7 e 8 de outubro.';
 const bannerLink = 'https://conf.react.dev/';
-const bannerLinkText = 'Learn more.';
+const bannerLinkText = 'Saiba mais.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);

src/components/Tag.tsx

@@ -7,23 +7,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: 'Fundamentos',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: 'Intermediário',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: 'Avançado',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
     name: 'Experimental',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: 'Obsoleto',
     classes: 'bg-red-40 text-white',
   },
 };

src/content/learn/describing-the-ui.md

@@ -526,34 +526,33 @@ Leia **[Mantendo Seus Componentes Puros](/learn/keeping-components-pure)** para
 
 </LearnMore>
 
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Sua interface de usuário como uma árvore {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+O React utiliza árvores para modelar as relações entre componentes e módulos.
 
-A React render tree is a representation of the parent and child relationship between components. 
+Uma árvore de renderização React é uma representação da relação pai-filho entre componentes.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Componente raiz'. It has two arrows extending down to two nodes labelled 'Componente A' and 'Componente C'. Each of the arrows is labelled with 'renders'. 'Componente A' has a single 'renders' arrow to a node labelled 'Componente B'. 'Componente C' has a single 'renders' arrow to a node labelled 'Componente D'.">
 
-An example React render tree.
+Um exemplo de árvore de renderização React.
 
 </Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Os componentes próximos ao topo da árvore, perto do componente raiz, são considerados componentes de nível superior. Componentes sem componentes filhos são componentes folha. Essa categorização de componentes é útil para entender o fluxo de dados e o desempenho de renderização.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+Modelar o relacionamento entre módulos JavaScript é outra maneira útil de entender seu aplicativo. Chamamos isso de árvore de dependências de módulos.
 
 <Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
 
-An example module dependency tree.
+Um exemplo de árvore de dependências de módulos.
 
 </Diagram>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+Uma árvore de dependências é frequentemente usada por ferramentas de compilação para agrupar todo o código JavaScript relevante para o cliente baixar e renderizar. Um pacote muito grande prejudica a experiência do usuário em aplicativos React. Compreender a árvore de dependências do módulo é útil para depurar esses problemas.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
-
+Leia **[Sua interface de usuário como uma árvore](/learn/understanding-your-ui-as-a-tree)** Aprenda como criar árvores de dependências de renderização e de módulos para um aplicativo React e como elas são modelos mentais úteis para melhorar a experiência do usuário e o desempenho.
 </LearnMore>
 
 

src/sidebarLearn.json

@@ -62,7 +62,7 @@
       "canary": true,
       "routes": [
         {
-          "title": "Introduction",
+          "title": "Introdução",
           "path": "/learn/react-compiler/introduction"
         },
         {
@@ -85,8 +85,8 @@
     },
     {
       "title": "Descrevendo a IU",
-      "tags": [],
       "path": "/learn/describing-the-ui",
+      "tags": ["foundation"],
       "routes": [
         {
           "title": "Seu Primeiro Componente",
@@ -121,7 +121,7 @@
           "path": "/learn/keeping-components-pure"
         },
         {
-          "title": "Your UI as a Tree",
+          "title": "Sua interface de usuário como uma árvore",
           "path": "/learn/understanding-your-ui-as-a-tree"
         }
       ]