Refatorar página de documentação

Renomeia "Ecossistema" para "Referência" e implementa um novo layout com duas colunas. A coluna esquerda exibirá uma lista de pacotes/ferramentas com links e um indicador de "em desenvolvimento", seguindo o padrão da página "Exemplos".

Author: lovable-dev[bot]

src/App.tsx

@@ -18,7 +18,7 @@ import DocsIntroduction from "./pages/docs/DocsIntroduction";
 import DocsGuides from "./pages/docs/DocsGuides";
 import DocsExamples from "./pages/docs/DocsExamples";
 import DocsTips from "./pages/docs/DocsTips";
-import DocsEcosystem from "./pages/docs/DocsEcosystem";
+import DocsReference from "./pages/docs/DocsReference";
 import DocsAbout from "./pages/docs/DocsAbout";
 import Privacy from "./pages/Privacy";
 import Terms from "./pages/Terms";
@@ -48,7 +48,7 @@ const App = () => (
               <Route path="guides" element={<DocsGuides />} />
               <Route path="examples" element={<DocsExamples />} />
               <Route path="tips" element={<DocsTips />} />
-              <Route path="ecosystem" element={<DocsEcosystem />} />
+              <Route path="reference" element={<DocsReference />} />
               <Route path="about" element={<DocsAbout />} />
               <Route index element={<DocsIntroduction />} />
             </Route>

src/pages/Docs.tsx

@@ -8,7 +8,7 @@ const Docs = () => {
     { label: "Guias", path: "/docs/guides" },
     { label: "Exemplos", path: "/docs/examples" },
     { label: "Dicas & Truques", path: "/docs/tips" },
-    { label: "Ecossistema", path: "/docs/ecosystem" },
+    { label: "Referência", path: "/docs/reference" },
     { label: "Sobre", path: "/docs/about" },
   ];
 

src/pages/docs/DocsReference.tsx

@@ -0,0 +1,74 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { BookOpen, Clock } from "lucide-react";
+import { Soon } from "@/components/Soon";
+
+const DocsReference = () => {
+  const packages = [
+    "constructo",
+    "serendipity", 
+    "effulgence",
+    "tevun",
+    "http",
+    "docekrize",
+    "dockerfile",
+    "arceau"
+  ];
+
+  return (
+    <div className="flex gap-8">
+      {/* Sumário - Coluna Esquerda */}
+      <div className="w-64 flex-shrink-0">
+        <div className="sticky top-6 p-4">
+          <nav className="space-y-2">
+            <h3 className="text-sm font-semibold text-foreground mb-3">Pacotes & Ferramentas</h3>
+            {packages.map((packageName) => (
+              <a
+                key={packageName}
+                href={`#${packageName}`}
+                className="flex items-center justify-between w-full text-left text-sm text-muted-foreground hover:text-primary py-2 px-2 rounded transition-colors"
+              >
+                <span>{packageName}</span>
+                <Soon className="ml-2" />
+              </a>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Conteúdo Principal - Coluna Direita */}
+      <div className="flex-1 space-y-8 border-l pl-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Referência de Pacotes
+          </h1>
+          <p className="text-xl text-muted-foreground">
+            Documentação detalhada dos pacotes e ferramentas Devitools.
+          </p>
+        </div>
+
+        <Card className="text-center py-12">
+          <CardHeader className="pb-4">
+            <div className="flex justify-center mb-4">
+              <div className="relative">
+                <BookOpen className="h-12 w-12 text-muted-foreground" />
+                <Clock className="h-6 w-6 text-amber-500 absolute -top-1 -right-1" />
+              </div>
+            </div>
+            <CardTitle className="text-2xl">Documentação em Desenvolvimento</CardTitle>
+            <CardDescription className="text-base">
+              Estamos preparando a documentação detalhada para cada pacote e ferramenta
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground">
+              Em breve você encontrará aqui a referência completa de todos os pacotes Devitools, 
+              incluindo APIs, exemplos de uso e guias de implementação para cada ferramenta.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default DocsReference;