Skip to content

Commit 27eb1a6

Browse files
enzosakamotoenzosakamoto
authored
Merge pull request #51 from knowlyai/feature/faq-page
Feature - Add FAQ Pages
2 parents 4924374 + 43f5980 commit 27eb1a6

13 files changed

Lines changed: 885 additions & 18 deletions

File tree

‎src/features/faq/pages/faq-bases-create.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { Background } from '@/shared/components/background'
2+
import { BackgroundBlobs } from '@/shared/components/background-blobs'
3+
import { Layout } from '@/shared/components/layout'
4+
import { Card, CardContent } from '@/shared/components/card'
5+
import { motion } from 'framer-motion'
6+
7+
export function FAQBasesCreatePage() {
8+
return (
9+
<Background className="relative isolate overflow-hidden py-24">
10+
<BackgroundBlobs />
11+
<Layout>
12+
<div className="mx-auto mb-8 w-full max-w-3xl">
13+
<div className="text-muted-foreground flex items-center gap-2 text-sm">
14+
<a href="/faq" className="text-primary font-medium hover:underline">
15+
FAQ
16+
</a>
17+
<span className="mx-1">{'>'}</span>
18+
<span className="text-foreground font-semibold">
19+
Criar nova base
20+
</span>
21+
</div>
22+
</div>
23+
<motion.h2
24+
className="text-foreground mb-12 text-center text-4xl font-bold sm:text-5xl"
25+
initial={{ opacity: 0, y: 20 }}
26+
animate={{ opacity: 1, y: 0 }}
27+
transition={{ duration: 0.6 }}
28+
>
29+
Como criar uma nova base de conhecimento?
30+
</motion.h2>
31+
<div className="mx-auto flex w-full max-w-3xl flex-col gap-12">
32+
{/* Seção 1: Passo a passo prático */}
33+
<Card className="bg-card w-full">
34+
<CardContent className="flex flex-col gap-6 p-8">
35+
<h2 className="text-foreground mb-2 text-2xl font-semibold">
36+
Passo a passo para criar sua base de conhecimento
37+
</h2>
38+
<ol className="text-muted-foreground flex list-inside list-decimal flex-col gap-4 text-lg">
39+
<li>
40+
Faça login na plataforma com seu usuário e senha.
41+
{/* Espaço para imagem de tela de login */}
42+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
43+
[Imagem da tela de login]
44+
</div>
45+
</li>
46+
<li>
47+
Acesse seu perfil e vá até a seção{' '}
48+
<b>Bases de conhecimento</b>.
49+
{/* Espaço para imagem do perfil */}
50+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
51+
[Imagem do perfil e menu de bases]
52+
</div>
53+
</li>
54+
<li>
55+
Clique no botão <b>Criar uma nova base</b>.
56+
{/* Espaço para imagem do botão */}
57+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
58+
[Imagem do botão Criar uma nova base]
59+
</div>
60+
</li>
61+
<li>
62+
Escolha o modelo de base de conhecimento desejado.
63+
{/* Espaço para imagem de seleção de modelo */}
64+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
65+
[Imagem da seleção de modelo]
66+
</div>
67+
</li>
68+
<li>
69+
Faça upload dos documentos que irão compor sua base.
70+
{/* Espaço para imagem de upload */}
71+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
72+
[Imagem da tela de upload]
73+
</div>
74+
</li>
75+
<li>
76+
Aguarde enquanto sua base é criada. <br />
77+
<span className="text-sm text-yellow-600 italic">
78+
Atenção: esse processo pode demorar alguns minutos,
79+
especialmente se você enviar muitos arquivos.
80+
</span>
81+
{/* Espaço para imagem de carregamento */}
82+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
83+
[Imagem de carregamento/criação da base]
84+
</div>
85+
</li>
86+
<li>
87+
Pronto! Sua base estará disponível para uso via API e para
88+
testes no ambiente sandbox.
89+
{/* Espaço para imagem de base criada */}
90+
<div className="bg-muted text-muted-foreground my-2 flex h-32 w-full items-center justify-center rounded-md text-sm">
91+
[Imagem da base criada e opções de uso]
92+
</div>
93+
</li>
94+
</ol>
95+
</CardContent>
96+
</Card>
97+
98+
{/* Seção 2: Como funciona por trás */}
99+
<Card className="bg-card w-full">
100+
<CardContent className="flex flex-col gap-4 p-8">
101+
<h2 className="text-foreground mb-2 text-2xl font-semibold">
102+
O que acontece por trás do sistema?
103+
</h2>
104+
<p className="text-muted-foreground text-lg">
105+
Após o upload dos arquivos, o sistema salva seus documentos e
106+
inicia o treinamento do modelo de IA escolhido utilizando
107+
exclusivamente os arquivos enviados por você. Nenhum dado
108+
externo é utilizado para treinar sua base, garantindo
109+
privacidade e personalização.
110+
</p>
111+
{/* Espaço para esquema ilustrativo */}
112+
<div className="bg-muted text-muted-foreground my-2 flex h-40 w-full items-center justify-center rounded-md text-sm">
113+
[Esquema ilustrativo do fluxo de criação da base]
114+
</div>
115+
</CardContent>
116+
</Card>
117+
118+
{/* Seção 3: Possíveis erros e soluções */}
119+
<Card className="bg-card w-full">
120+
<CardContent className="flex flex-col gap-4 p-8">
121+
<h2 className="text-foreground mb-2 text-2xl font-semibold">
122+
Possíveis erros e como resolver
123+
</h2>
124+
<ul className="text-muted-foreground flex list-disc flex-col gap-3 pl-4 text-lg">
125+
<li>
126+
<b>Limite de bases atingido:</b> Você já criou o máximo de
127+
bases permitido pelo seu plano.
128+
<br />
129+
<span className="text-sm">
130+
Solução: Assine um plano superior ou exclua uma base
131+
existente.
132+
</span>
133+
</li>
134+
<li>
135+
<b>Limite de armazenamento atingido:</b> Você já utilizou todo
136+
o espaço de arquivos do seu plano.
137+
<br />
138+
<span className="text-sm">
139+
Solução: Assine um plano superior ou remova arquivos de
140+
outras bases para liberar espaço.
141+
</span>
142+
</li>
143+
<li>
144+
<b>Modelo indisponível:</b> O modelo de base desejado não está
145+
disponível no seu plano.
146+
<br />
147+
<span className="text-sm">
148+
Solução: Assine um plano superior para acessar esse modelo.
149+
</span>
150+
</li>
151+
</ul>
152+
</CardContent>
153+
</Card>
154+
</div>
155+
</Layout>
156+
</Background>
157+
)
158+
}

‎src/features/faq/pages/faq-bases-others.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Background } from '@/shared/components/background'
2+
import { BackgroundBlobs } from '@/shared/components/background-blobs'
3+
import { Layout } from '@/shared/components/layout'
4+
import { Card, CardContent } from '@/shared/components/card'
5+
import { motion } from 'framer-motion'
6+
import { ArrowRightCircle } from 'lucide-react'
7+
8+
const topics = [
9+
{
10+
title: 'Como editar uma base de conhecimento',
11+
link: '/faq/bases/edit'
12+
},
13+
{
14+
title: 'Como excluir uma base de conhecimento',
15+
link: '/faq/bases/delete'
16+
},
17+
{
18+
title: 'Compartilhamento de bases entre usuários',
19+
link: '/faq/bases/sharing'
20+
},
21+
{
22+
title: 'Limites de armazenamento e documentos',
23+
link: '/faq/bases/limits'
24+
},
25+
{
26+
title: 'Erros comuns ao gerenciar bases',
27+
link: '/faq/bases/errors'
28+
}
29+
]
30+
31+
export function FAQBasesOthersPage() {
32+
return (
33+
<Background className="relative isolate overflow-hidden py-24">
34+
<BackgroundBlobs />
35+
<Layout>
36+
<div className="mx-auto mb-8 w-full max-w-3xl">
37+
<div className="text-muted-foreground flex items-center gap-2 text-sm">
38+
<a href="/faq" className="text-primary font-medium hover:underline">
39+
FAQ
40+
</a>
41+
<span className="mx-1">{'>'}</span>
42+
<span className="text-foreground font-semibold">
43+
Bases de conhecimento
44+
</span>
45+
</div>
46+
</div>
47+
<motion.h2
48+
className="text-foreground mb-12 text-center text-3xl font-semibold sm:text-5xl"
49+
initial={{ opacity: 0, y: 20 }}
50+
animate={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.6 }}
52+
>
53+
Com qual tema você quer ajuda?
54+
</motion.h2>
55+
<div className="mx-auto flex w-full max-w-3xl flex-col gap-8">
56+
<Card className="bg-card w-full">
57+
<CardContent className="flex flex-col divide-y divide-gray-200 p-0">
58+
{topics.map((item) => (
59+
<a
60+
key={item.title}
61+
href={item.link}
62+
className="hover:bg-muted/60 flex items-center justify-between gap-4 px-6 py-5 transition-colors"
63+
>
64+
<div className="text-foreground font-semibold">
65+
{item.title}
66+
</div>
67+
<ArrowRightCircle className="h-5 w-5 text-gray-400" />
68+
</a>
69+
))}
70+
</CardContent>
71+
</Card>
72+
</div>
73+
</Layout>
74+
</Background>
75+
)
76+
}

0 commit comments

Comments
 (0)