Adicionar menu "Exemplos"

Cria um novo item de menu chamado "Exemplos" após "Guias", com uma mensagem indicando que estará pronto em breve.

Author: lovable-dev[bot]

src/App.tsx

@@ -16,6 +16,7 @@ import DocsSerendipity from "./pages/DocsSerendipity";
 import DocsEffulgence from "./pages/DocsEffulgence";
 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 DocsAbout from "./pages/docs/DocsAbout";
@@ -45,6 +46,7 @@ const App = () => (
             <Route path="/docs" element={<Docs />}>
               <Route path="introduction" element={<DocsIntroduction />} />
               <Route path="guides" element={<DocsGuides />} />
+              <Route path="examples" element={<DocsExamples />} />
               <Route path="tips" element={<DocsTips />} />
               <Route path="ecosystem" element={<DocsEcosystem />} />
               <Route path="about" element={<DocsAbout />} />

src/pages/Docs.tsx

@@ -6,6 +6,7 @@ const Docs = () => {
   const navigationItems = [
     { label: "Introdução", path: "/docs/introduction" },
     { label: "Guias", path: "/docs/guides" },
+    { label: "Exemplos", path: "/docs/examples" },
     { label: "Dicas & Truques", path: "/docs/tips" },
     { label: "Ecossistema", path: "/docs/ecosystem" },
     { label: "Sobre", path: "/docs/about" },

src/pages/docs/DocsExamples.tsx

@@ -0,0 +1,54 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Code, Clock } from "lucide-react";
+
+const DocsExamples = () => {
+  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">
+            <div className="block w-full text-left text-sm text-muted-foreground py-1">
+              Em Desenvolvimento
+            </div>
+          </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">
+            Exemplos Práticos
+          </h1>
+          <p className="text-xl text-muted-foreground">
+            Exemplos práticos e casos de uso dos pacotes Devitools.
+          </p>
+        </div>
+
+        <Card className="text-center py-12">
+          <CardHeader className="pb-4">
+            <div className="flex justify-center mb-4">
+              <div className="relative">
+                <Code 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">Exemplos em Desenvolvimento</CardTitle>
+            <CardDescription className="text-base">
+              Estamos preparando exemplos práticos e detalhados para cada pacote
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground">
+              Em breve você encontrará aqui exemplos completos de uso dos pacotes Devitools, 
+              incluindo casos de uso comuns, implementações de referência e código de exemplo pronto para usar.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default DocsExamples;