merge: release/1.0.0 into main

README.md

@@ -2,83 +2,72 @@
 
 # Stack Builder
 
-O **Stack Builder** é uma ferramenta para montar rapidamente o setup de um projeto. Você escolhe a stack e as tecnologias desejadas, e a aplicação gera comandos prontos para copiar e colar no terminal, agilizando o início do desenvolvimento.
+**Stack Builder** is a tool designed to quickly set up a project environment. You choose the stack and desired technologies, and the application generates ready-to-use commands that you can copy and paste into the terminal, speeding up the start of development.
 
-Além disso, o Stack Builder sugere uma estrutura de pastas organizada, seguindo boas práticas para cada stack escolhida.
+In addition, Stack Builder suggests an organized folder structure, following best practices for each selected stack.
 
-## 🚀 Demonstração
+## 🚀 Demo
 
-Confira abaixo uma prévia visual do Stack Builder em ação:
+Check out a visual preview of Stack Builder in action below:
 
-### Edição de texto com formatação
+### Editing with Formatting
 
 ![Demonstração1](/docs/Demontração%201.gif)
-A interface permite selecionar opções de stack e visualizar rapidamente os comandos e a estrutura recomendada para o projeto.
+The interface allows you to select stack options and quickly view the commands and the recommended project structure.
 
-## 📦 Funcionalidades
+## 📦 Features
 
-- ✅ Geração automática de comandos para setup do projeto
-- ✅ Sugestão de estrutura de pastas baseada em boas práticas
-- ✅ Interface responsiva e amigável
-- ✅ Temas com estilização moderna via TailwindCSS e shadcn/ui
-- ✅ Ícones interativos com lucide-react
-- ✅ Suporte para 10 idiomas
-- 🔧 Construído com Next.js + TypeScript, garantindo performance e escalabilidade
-- 🔧 Código limpo com padronização via Biome
+- ✅ Automatic generation of setup commands
+- ✅ Folder structure suggestions based on best practices
+- ✅ Responsive and user-friendly interface
+- ✅ Modern themed styling with TailwindCSS and shadcn/ui
+- ✅ Interactive icons with lucide-react
+- ✅ Support for 10 languages
+- 🔧 Built with Vite + React + TypeScript, ensuring performance and scalability
+- 🔧 Clean code with standardization via ESLint
 
-## 🛠️ Tecnologias Utilizadas
+## 🛠️ Technologies Used
 
-- **Linguagem/Framework:**
+- **Language/Framework:**
   - [TypeScript](https://www.typescriptlang.org/)
-  - [React](https://react.dev/) com [Vite](https://vite.dev/)
+  - [React](https://react.dev/) with [Vite](https://vite.dev/)
 
-- **Gerenciamento de estado:**
-  - [Zustand](https://zustand-demo.pmnd.rs/)
-
-- **Estilização:**
+- **Styling:**
   - [TailwindCSS](https://tailwindcss.com/)
   - [shadcn/ui](https://ui.shadcn.com/)
 
-- **Ícones:**
+- **Icons:**
   - [lucide-react](https://lucide.dev/)
 
-- **Formatação & Qualidade de Código:**
+- **Formatting & Code Quality:**
   - [ESLint](https://eslint.org/)
   - [Prettier](https://prettier.io/)
 
-- **Outras ferramentas:**
-  - [Git](https://git-scm.com/) & [GitHub](https://github.com/)
+- **Other tools:**
+  - [Git](https://git-scm.com/) and [GitHub](https://github.com/)
 
-## ⚙ Instalação
+## ⚙ Installation
 
-Para rodar o projeto localmente, siga os passos abaixo.
+To run the project locally, follow the steps below.
 
 > [!NOTE]  
-> **Dica**: Antes de começar, certifique-se de ter o **Node.js** instalado na versão mais recente.
+> **Tip**: Before starting, make sure you have **Node.js** installed in the latest version.
 
-1. Clone o repositório:
+1. Clone the repository:
 
    ```bash
    git clone https://github.com/FelipeRicard0/stack-builder.git
    ```
 
-2. Instale as dependências:
+2. Install dependencies:
    ```bash
    pnpm install
    ```
-3. Rode o projeto:
+3. Run the project:
    ```bash
    pnpm run dev
    ```
 
-## 📁 Variáveis de Ambiente
-
-Crie um arquivo `.env` na raiz do projeto e adicione as seguinte variáveis:
-
-```env
-VITE_API_KEY=url_da_api
-```
-
-## Licença
+## License
 
-Distribuído sob a licença personalizada de uso não comercial. Veja [`LICENSE`](https://github.com/FelipeRicard0/stack-builder/blob/main/LICENSE) para mais informações.
+Distributed under a custom non-commercial use license. See [`LICENSE`](https://github.com/FelipeRicard0/stack-builder/blob/main/LICENSE) for more information.

index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>stack-builder</title>
+    <title>Stack Builder</title>
     <meta
       name="description"
-      content="Ferramenta para montar setups de projetos, gerando comandos prontos e sugerindo estruturas de pastas organizadas conforme a stack."
+      content="Tool for assembling project setups, generating ready-to-use commands and suggesting organized folder structures according the stack."
     />
     <link rel="shortcut icon" href="Logo_dark.svg" type="image/x-icon" />
   </head>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-builder",
   "private": true,
-  "version": "0.5.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,10 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/react-router-hash-link": "^2.4.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "i18next": "^25.8.0",
     "lucide-react": "^0.563.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

src/App.tsx

@@ -1,12 +1,50 @@
-import { Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useParams } from "react-router-dom";
 import Buildpage from "./pages/Builder";
 import LandingPage from "./pages/LandingPage";
+import i18n from "./i18n";
+import { useEffect } from "react";
+
+function LangLayout() {
+  const { lang } = useParams();
+
+  const supported = [
+    "ar",
+    "bn",
+    "en",
+    "es",
+    "fr",
+    "hi",
+    "ja",
+    "pt",
+    "ru",
+    "zh",
+  ];
+  const validLang = supported.includes(String(lang)) ? lang : "en";
+
+  useEffect(() => {
+    i18n.changeLanguage(validLang);
+  }, [validLang]);
+
+  if (lang !== validLang) {
+    return <Navigate to={`/${validLang}`} replace />;
+  }
+
+  return (
+    <Routes>
+      <Route index element={<LandingPage />} />
+      <Route path="builder" element={<Buildpage />} />
+    </Routes>
+  );
+}
 
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/builder" element={<Buildpage />} />
+      <Route
+        path="/"
+        element={<Navigate to={navigator.language.split("-")[0]} replace />}
+      />
+      <Route path="/:lang/*" element={<LangLayout />} />
     </Routes>
   );
 }

src/components/command-step.tsx

@@ -35,16 +35,11 @@ export default function CommandStep({ step, index }: CommandStepProps) {
             {step.label}
           </span>
         </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 px-2"
-          onClick={handleCopy}
-        >
+        <Button variant="ghost" size={"icon-sm"} onClick={handleCopy}>
           {copied ? (
-            <Check className="text-foreground h-3.5 w-3.5" />
+            <Check className="text-foreground size-3.5" />
           ) : (
-            <Copy className="h-3.5 w-3.5" />
+            <Copy className="size-3.5" />
           )}
         </Button>
       </div>

src/components/theme-provider.tsx

@@ -23,7 +23,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 export function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  storageKey = "stack-builder-theme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(

src/i18n.ts

@@ -12,7 +12,7 @@ import ru from "./locales/ru.json";
 import ja from "./locales/ja.json";
 
 i18n.use(initReactI18next).init({
-  lng: navigator.language,
+  lng: navigator.language.split("-")[0],
   fallbackLng: "en",
   resources: {
     pt: { translation: pt },