Skip to content

Commit e2c6fd6

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Add two-column layout to docs pages
Implement a two-column layout for the documentation subpages, with a left-side summary/navigation and content on the right. Apply the change to the introduction page initially.
1 parent 519c8a0 commit e2c6fd6

1 file changed

Lines changed: 171 additions & 102 deletions

File tree

‎src/pages/docs/DocsIntroduction.tsx‎

Lines changed: 171 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -3,116 +3,185 @@ import { Badge } from "@/components/ui/badge";
33
import { BookOpen, Package, Wrench, Layers } from "lucide-react";
44

55
const DocsIntroduction = () => {
6+
const scrollToSection = (id: string) => {
7+
const element = document.getElementById(id);
8+
if (element) {
9+
element.scrollIntoView({ behavior: 'smooth' });
10+
}
11+
};
12+
613
return (
7-
<div className="mx-auto space-y-8">
8-
<div className="space-y-4">
9-
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
10-
Documentação Devitools
11-
</h1>
12-
<p className="text-xl text-muted-foreground">
13-
Bem-vindo à documentação oficial dos pacotes Devitools para PHP.
14-
</p>
14+
<div className="flex gap-8">
15+
{/* Sumário - Coluna Esquerda */}
16+
<div className="w-64 flex-shrink-0">
17+
<div className="sticky top-6 border rounded-lg bg-background/50 p-4">
18+
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wide text-muted-foreground">
19+
Nesta Página
20+
</h3>
21+
<nav className="space-y-2">
22+
<button
23+
onClick={() => scrollToSection('introducao')}
24+
className="block w-full text-left text-sm hover:text-primary transition-colors py-1"
25+
>
26+
Introdução
27+
</button>
28+
<button
29+
onClick={() => scrollToSection('requisitos')}
30+
className="block w-full text-left text-sm hover:text-primary transition-colors py-1"
31+
>
32+
Requisitos do Sistema
33+
</button>
34+
<button
35+
onClick={() => scrollToSection('pacotes')}
36+
className="block w-full text-left text-sm hover:text-primary transition-colors py-1"
37+
>
38+
Pacotes Principais
39+
</button>
40+
<div className="ml-3 space-y-1">
41+
<button
42+
onClick={() => scrollToSection('constructo')}
43+
className="block w-full text-left text-xs text-muted-foreground hover:text-primary transition-colors py-1"
44+
>
45+
• Constructo
46+
</button>
47+
<button
48+
onClick={() => scrollToSection('serendipity')}
49+
className="block w-full text-left text-xs text-muted-foreground hover:text-primary transition-colors py-1"
50+
>
51+
• Serendipity
52+
</button>
53+
<button
54+
onClick={() => scrollToSection('effulgence')}
55+
className="block w-full text-left text-xs text-muted-foreground hover:text-primary transition-colors py-1"
56+
>
57+
• Effulgence
58+
</button>
59+
</div>
60+
<button
61+
onClick={() => scrollToSection('instalacao')}
62+
className="block w-full text-left text-sm hover:text-primary transition-colors py-1"
63+
>
64+
Instalação Rápida
65+
</button>
66+
</nav>
67+
</div>
1568
</div>
1669

17-
<div className="prose prose-slate dark:prose-invert max-w-none">
18-
<h2>Introdução</h2>
19-
<p>
20-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
21-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
22-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
23-
</p>
24-
25-
<p>
26-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
27-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
28-
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
29-
</p>
70+
{/* Conteúdo Principal - Coluna Direita */}
71+
<div className="flex-1 space-y-8">
72+
<div className="space-y-4">
73+
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
74+
Documentação Devitools
75+
</h1>
76+
<p className="text-xl text-muted-foreground">
77+
Bem-vindo à documentação oficial dos pacotes Devitools para PHP.
78+
</p>
79+
</div>
3080

31-
<h3>Requisitos do Sistema</h3>
32-
<ul>
33-
<li>PHP 8.1 ou superior</li>
34-
<li>Composer para gerenciamento de dependências</li>
35-
<li>Conhecimento básico de PHP orientado a objetos</li>
36-
</ul>
37-
</div>
81+
<div className="prose prose-slate dark:prose-invert max-w-none">
82+
<h2 id="introducao">Introdução</h2>
83+
<p>
84+
O Devitools é um conjunto de ferramentas modernas para desenvolvimento PHP que visa simplificar e acelerar
85+
o processo de criação de aplicações robustas e escaláveis. Nossos pacotes fornecem soluções elegantes para
86+
os desafios mais comuns no desenvolvimento PHP contemporâneo.
87+
</p>
88+
89+
<p>
90+
Com uma arquitetura bem pensada e APIs intuitivas, o Devitools permite que desenvolvedores foquem no que
91+
realmente importa: criar valor para seus usuários. Nossos pacotes seguem as melhores práticas da comunidade
92+
PHP e são extensivamente testados para garantir a máxima confiabilidade.
93+
</p>
3894

39-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
40-
<Card className="hover:shadow-lg transition-shadow">
41-
<CardHeader>
42-
<div className="flex items-center space-x-2">
43-
<Wrench className="h-6 w-6 text-primary" />
44-
<CardTitle>Constructo</CardTitle>
45-
</div>
46-
<CardDescription>
47-
Ferramentas fundamentais para projetos PHP
48-
</CardDescription>
49-
</CardHeader>
50-
<CardContent>
51-
<p className="text-sm text-muted-foreground mb-4">
52-
Sistema completo de serialização, validação e geração de dados fake para acelerar o desenvolvimento PHP.
53-
</p>
54-
<div className="flex flex-wrap gap-2">
55-
<Badge variant="secondary">Serialização</Badge>
56-
<Badge variant="secondary">Validação</Badge>
57-
<Badge variant="secondary">Testing</Badge>
58-
</div>
59-
</CardContent>
60-
</Card>
95+
<h3 id="requisitos">Requisitos do Sistema</h3>
96+
<ul>
97+
<li>PHP 8.1 ou superior</li>
98+
<li>Composer para gerenciamento de dependências</li>
99+
<li>Conhecimento básico de PHP orientado a objetos</li>
100+
<li>Familiaridade com padrões PSR (recomendado)</li>
101+
</ul>
102+
</div>
61103

62-
<Card className="hover:shadow-lg transition-shadow">
63-
<CardHeader>
64-
<div className="flex items-center space-x-2">
65-
<Package className="h-6 w-6 text-accent" />
66-
<CardTitle>Serendipity</CardTitle>
67-
</div>
68-
<CardDescription>
69-
Extensão otimizada para Hyperf
70-
</CardDescription>
71-
</CardHeader>
72-
<CardContent>
73-
<p className="text-sm text-muted-foreground mb-4">
74-
Ferramentas avançadas para desenvolvimento com Hyperf, incluindo workers, rotas e tratamento de erros.
75-
</p>
76-
<div className="flex flex-wrap gap-2">
77-
<Badge variant="secondary">Hyperf</Badge>
78-
<Badge variant="secondary">Workers</Badge>
79-
<Badge variant="secondary">Async</Badge>
80-
</div>
81-
</CardContent>
82-
</Card>
104+
<div id="pacotes">
105+
<h2 className="text-2xl font-bold mb-6">Pacotes Principais</h2>
106+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
107+
<Card id="constructo" className="hover:shadow-lg transition-shadow">
108+
<CardHeader>
109+
<div className="flex items-center space-x-2">
110+
<Wrench className="h-6 w-6 text-primary" />
111+
<CardTitle>Constructo</CardTitle>
112+
</div>
113+
<CardDescription>
114+
Ferramentas fundamentais para projetos PHP
115+
</CardDescription>
116+
</CardHeader>
117+
<CardContent>
118+
<p className="text-sm text-muted-foreground mb-4">
119+
Sistema completo de serialização, validação e geração de dados fake para acelerar o desenvolvimento PHP.
120+
</p>
121+
<div className="flex flex-wrap gap-2">
122+
<Badge variant="secondary">Serialização</Badge>
123+
<Badge variant="secondary">Validação</Badge>
124+
<Badge variant="secondary">Testing</Badge>
125+
</div>
126+
</CardContent>
127+
</Card>
83128

84-
<Card className="hover:shadow-lg transition-shadow">
85-
<CardHeader>
86-
<div className="flex items-center space-x-2">
87-
<Layers className="h-6 w-6 text-success" />
88-
<CardTitle>Effulgence</CardTitle>
89-
</div>
90-
<CardDescription>
91-
Extensão otimizada para Laravel
92-
</CardDescription>
93-
</CardHeader>
94-
<CardContent>
95-
<p className="text-sm text-muted-foreground mb-4">
96-
Integração completa com Laravel, incluindo Eloquent, controllers simplificados e middlewares otimizados.
97-
</p>
98-
<div className="flex flex-wrap gap-2">
99-
<Badge variant="secondary">Laravel</Badge>
100-
<Badge variant="secondary">Eloquent</Badge>
101-
<Badge variant="secondary">Controllers</Badge>
102-
</div>
103-
</CardContent>
104-
</Card>
105-
</div>
129+
<Card id="serendipity" className="hover:shadow-lg transition-shadow">
130+
<CardHeader>
131+
<div className="flex items-center space-x-2">
132+
<Package className="h-6 w-6 text-accent" />
133+
<CardTitle>Serendipity</CardTitle>
134+
</div>
135+
<CardDescription>
136+
Extensão otimizada para Hyperf
137+
</CardDescription>
138+
</CardHeader>
139+
<CardContent>
140+
<p className="text-sm text-muted-foreground mb-4">
141+
Ferramentas avançadas para desenvolvimento com Hyperf, incluindo workers, rotas e tratamento de erros.
142+
</p>
143+
<div className="flex flex-wrap gap-2">
144+
<Badge variant="secondary">Hyperf</Badge>
145+
<Badge variant="secondary">Workers</Badge>
146+
<Badge variant="secondary">Async</Badge>
147+
</div>
148+
</CardContent>
149+
</Card>
150+
151+
<Card id="effulgence" className="hover:shadow-lg transition-shadow">
152+
<CardHeader>
153+
<div className="flex items-center space-x-2">
154+
<Layers className="h-6 w-6 text-success" />
155+
<CardTitle>Effulgence</CardTitle>
156+
</div>
157+
<CardDescription>
158+
Extensão otimizada para Laravel
159+
</CardDescription>
160+
</CardHeader>
161+
<CardContent>
162+
<p className="text-sm text-muted-foreground mb-4">
163+
Integração completa com Laravel, incluindo Eloquent, controllers simplificados e middlewares otimizados.
164+
</p>
165+
<div className="flex flex-wrap gap-2">
166+
<Badge variant="secondary">Laravel</Badge>
167+
<Badge variant="secondary">Eloquent</Badge>
168+
<Badge variant="secondary">Controllers</Badge>
169+
</div>
170+
</CardContent>
171+
</Card>
172+
</div>
173+
</div>
106174

107-
<div className="bg-muted/50 rounded-lg p-6">
108-
<h3 className="text-lg font-semibold mb-3">Instalação Rápida</h3>
109-
<p className="text-muted-foreground mb-4">
110-
Instale os pacotes Devitools via Composer para começar a usar em seus projetos PHP.
111-
</p>
112-
<div className="bg-background rounded border p-4 font-mono text-sm">
113-
composer require devitools/constructo<br />
114-
composer require devitools/serendipity<br />
115-
composer require devitools/effulgence
175+
<div id="instalacao" className="bg-muted/50 rounded-lg p-6">
176+
<h3 className="text-lg font-semibold mb-3">Instalação Rápida</h3>
177+
<p className="text-muted-foreground mb-4">
178+
Instale os pacotes Devitools via Composer para começar a usar em seus projetos PHP.
179+
</p>
180+
<div className="bg-background rounded border p-4 font-mono text-sm">
181+
composer require devitools/constructo<br />
182+
composer require devitools/serendipity<br />
183+
composer require devitools/effulgence
184+
</div>
116185
</div>
117186
</div>
118187
</div>

0 commit comments

Comments
 (0)