feat(new-frontend): add new-frontend with HeroUI v3 landing page and docker service
This commit is contained in:
Gabriel Menezes
parent
1a5a835d33
commit
727cf62f7d
34 changed files with 5364 additions and 0 deletions
|
|
@ -120,6 +120,28 @@ services:
|
|||
- "traefik.http.routers.frontend.entrypoints=web"
|
||||
- "traefik.http.services.frontend.loadbalancer.server.port=80"
|
||||
|
||||
frontend2:
|
||||
build:
|
||||
context: ./new-frontend
|
||||
dockerfile: Dockerfile
|
||||
args:
|
||||
VITE_API_URL: ${VITE_API_URL:-https://api-task3.beetech.dev}
|
||||
container_name: bee-task-frontend2
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
depends_on:
|
||||
- backend
|
||||
networks:
|
||||
- proxy
|
||||
- internal
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.docker.network=proxy"
|
||||
- "traefik.http.routers.frontend2.rule=Host(`task3.beetech.dev`)"
|
||||
- "traefik.http.routers.frontend2.entrypoints=web"
|
||||
- "traefik.http.services.frontend2.loadbalancer.server.port=80"
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
minio_data:
|
||||
|
|
|
|||
24
new-frontend/.gitignore
vendored
Normal file
24
new-frontend/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
new-frontend/.oxlintrc.json
Normal file
8
new-frontend/.oxlintrc.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
6
new-frontend/Caddyfile
Normal file
6
new-frontend/Caddyfile
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
:80 {
|
||||
root * /srv
|
||||
encode gzip
|
||||
try_files {path} /index.html
|
||||
file_server
|
||||
}
|
||||
20
new-frontend/Dockerfile
Normal file
20
new-frontend/Dockerfile
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
FROM node:22-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install --legacy-peer-deps
|
||||
|
||||
COPY . .
|
||||
|
||||
ARG VITE_API_URL
|
||||
ENV VITE_API_URL=$VITE_API_URL
|
||||
|
||||
RUN npm run build
|
||||
|
||||
FROM caddy:2-alpine
|
||||
|
||||
COPY Caddyfile /etc/caddy/Caddyfile
|
||||
COPY --from=build /app/dist /srv
|
||||
|
||||
EXPOSE 80
|
||||
16
new-frontend/GEMINI.md
Normal file
16
new-frontend/GEMINI.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Diretrizes do Projeto: new-frontend (Bee Task v3)
|
||||
|
||||
Este arquivo contém as diretrizes e boas práticas para o desenvolvimento do novo frontend do sistema Bee Task.
|
||||
|
||||
## 1. Componentes
|
||||
- **Uso do HeroUI**: Sempre que possível, dê preferência para a utilização dos componentes nativos do **HeroUI v3**.
|
||||
- Evite criar componentes customizados do zero para elementos de interface comuns (como botões, inputs, modais, etc.) se já houver uma alternativa equivalente e madura na biblioteca.
|
||||
|
||||
## 2. Estilização e Temas
|
||||
- **Tailwind CSS v4**: O projeto utiliza a versão mais recente do Tailwind de forma integrada.
|
||||
- **Tema Centralizado**: Sempre utilize o CSS definido no arquivo global `src/index.css` e as variáveis do nosso tema customizado.
|
||||
- Evite espalhar cores em hexadecimal ou estilos repetitivos diretamente no código `className`; utilize as variáveis globais de cor e estilo do tema para manter uma identidade visual coerente e facilitar a manutenção.
|
||||
|
||||
## 3. Tecnologias
|
||||
- **React 19 + TypeScript**: Manter tipagem estrita para maior segurança.
|
||||
- **Vite**: Usado para tooling rápido e eficiente.
|
||||
32
new-frontend/README.md
Normal file
32
new-frontend/README.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the Oxlint configuration
|
||||
|
||||
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"options": {
|
||||
"typeAware": true
|
||||
},
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
|
||||
19
new-frontend/index.html
Normal file
19
new-frontend/index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bee Task | Gestão Ágil, Time Tracking & Produtividade para Equipes</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3364
new-frontend/package-lock.json
generated
Normal file
3364
new-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
new-frontend/package.json
Normal file
35
new-frontend/package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "new-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/inter": "^5.3.0",
|
||||
"@heroui/react": "^3.2.6",
|
||||
"@heroui/system": "^2.4.28",
|
||||
"@heroui/theme": "^2.4.26",
|
||||
"framer-motion": "^14.1.0",
|
||||
"lucide-react": "^1.55.0",
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"@types/node": "^24.13.3",
|
||||
"@types/react": "^19.2.18",
|
||||
"@types/react-dom": "^19.2.7",
|
||||
"@vitejs/plugin-react": "^6.1.1",
|
||||
"autoprefixer": "^10.6.1",
|
||||
"oxlint": "^1.81.0",
|
||||
"postcss": "^8.5.29",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.3.0"
|
||||
}
|
||||
}
|
||||
1
new-frontend/public/favicon.svg
Normal file
1
new-frontend/public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
new-frontend/public/icons.svg
Normal file
24
new-frontend/public/icons.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
184
new-frontend/src/App.css
Normal file
184
new-frontend/src/App.css
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
31
new-frontend/src/App.tsx
Normal file
31
new-frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Navbar } from "./components/landing/Navbar"
|
||||
import { Hero } from "./components/landing/Hero"
|
||||
import { Stats } from "./components/landing/Stats"
|
||||
import { Features } from "./components/landing/Features"
|
||||
import { FeatureTabs } from "./components/landing/FeatureTabs"
|
||||
import { Workflow } from "./components/landing/Workflow"
|
||||
import { Testimonials } from "./components/landing/Testimonials"
|
||||
import { Faq } from "./components/landing/Faq"
|
||||
import { CtaSection } from "./components/landing/CtaSection"
|
||||
import { Footer } from "./components/landing/Footer"
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-app-bg text-text-main font-sans selection:bg-brand-soft selection:text-brand flex flex-col">
|
||||
<Navbar />
|
||||
<main className="flex-1">
|
||||
<Hero />
|
||||
<Stats />
|
||||
<Features />
|
||||
<FeatureTabs />
|
||||
<Workflow />
|
||||
<Testimonials />
|
||||
<Faq />
|
||||
<CtaSection />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
BIN
new-frontend/src/assets/hero.png
Normal file
BIN
new-frontend/src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
new-frontend/src/assets/react.svg
Normal file
1
new-frontend/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
1
new-frontend/src/assets/vite.svg
Normal file
1
new-frontend/src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
87
new-frontend/src/components/landing/CtaSection.tsx
Normal file
87
new-frontend/src/components/landing/CtaSection.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import { useState, type FormEvent } from "react"
|
||||
import { Button } from "@heroui/react"
|
||||
import { ArrowRight, Sparkles, CheckCircle2, ShieldCheck } from "lucide-react"
|
||||
|
||||
export const CtaSection = () => {
|
||||
const [email, setEmail] = useState("")
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (email) {
|
||||
setSubmitted(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="comecar" className="py-20 relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="relative rounded-3xl bg-gradient-to-br from-brand via-brand-strong to-[#0a4d47] p-8 sm:p-14 lg:p-16 text-white shadow-2xl overflow-hidden">
|
||||
{/* Subtle background glow */}
|
||||
<div className="absolute -right-20 -top-20 w-96 h-96 bg-accent/20 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -left-20 -bottom-20 w-96 h-96 bg-brand-soft/10 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto text-center space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-white text-xs font-semibold">
|
||||
<Sparkles className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Experimente o Novo Bee Task v3</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight leading-tight">
|
||||
Pronto para elevar a produtividade e o controle da sua equipe?
|
||||
</h2>
|
||||
|
||||
<p className="text-base sm:text-lg text-white/80 max-w-2xl mx-auto">
|
||||
Crie seu workspace em menos de 1 minuto. Comece a rastrear horas reais,
|
||||
organizar projetos e gerenciar seu squad com precisão cirúrgica.
|
||||
</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="bg-white/15 backdrop-blur-md border border-white/20 p-6 rounded-2xl max-w-md mx-auto space-y-2">
|
||||
<div className="flex items-center justify-center gap-2 text-white font-bold text-lg">
|
||||
<CheckCircle2 className="w-6 h-6 text-accent" />
|
||||
Workspace em preparação!
|
||||
</div>
|
||||
<p className="text-xs text-white/80">
|
||||
Enviamos o link de ativação para <strong>{email}</strong>.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="flex flex-col sm:flex-row items-center justify-center gap-3 max-w-md mx-auto pt-2"
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="Seu melhor e-mail profissional"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full sm:w-80 px-4 py-3 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-accent text-sm"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full sm:w-auto bg-accent hover:bg-[#b45309] text-white font-bold text-sm px-6 py-3 rounded-xl shadow-lg shadow-black/20 flex items-center justify-center gap-2 transition-all duration-200"
|
||||
>
|
||||
Criar Conta
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-white/70 pt-2 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<ShieldCheck className="w-4 h-4 text-accent" />
|
||||
Sem compromisso ou cartão
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>Setup em 60 segundos</span>
|
||||
<span>•</span>
|
||||
<span>Suporte técnico direto do time</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
86
new-frontend/src/components/landing/Faq.tsx
Normal file
86
new-frontend/src/components/landing/Faq.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { useState } from "react"
|
||||
import { Card, CardContent } from "@heroui/react"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
|
||||
export const Faq = () => {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0)
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: "Como funciona a contagem de tempo de uma tarefa?",
|
||||
a: "Cada tarefa possui métodos nativos de start() e stop(). Quando você clica em Iniciar, um novo registro de sessão (TaskHistoryItem) é criado com o timestamp de início exato. Ao pausar, o término é computado e gravado no banco de dados. Tarefas não permitem execuções concorrentes acidentais.",
|
||||
},
|
||||
{
|
||||
q: "O que são os Workspaces e como funciona o Multi-tenancy?",
|
||||
a: "Cada Workspace é uma Organização isolada no banco de dados. Você pode pertencer a múltiplas organizações (ex: empresa principal, squads de consultoria ou projetos de clientes) e alternar entre elas com papéis distintos (Owner, Admin e Membro).",
|
||||
},
|
||||
{
|
||||
q: "O que é o painel Member Detail no Org Dashboard?",
|
||||
a: "É uma visão analítica específica para gestores e líderes técnicos avaliarem as métricas consolidadas de cada membro da equipe: horas totais gastas por semana/mês, categorias em que mais atuou e principais tarefas entregues.",
|
||||
},
|
||||
{
|
||||
q: "Onde ficam armazenados os avatares e anexos?",
|
||||
a: "O Bee Task utiliza MinIO com bucket privado (S3-compatible). O upload é processado diretamente pelo backend Quarkus, gerando URLs públicas seguras para renderização no frontend.",
|
||||
},
|
||||
{
|
||||
q: "Qual a diferença entre a versão antiga e este new-frontend v3?",
|
||||
a: "O new-frontend foi reescrito do zero utilizando React 19, TypeScript, Tailwind CSS v4 e a biblioteca de componentes HeroUI v3. A interface possui alta responsividade, design system refinado com fontes Plus Jakarta Sans e uma UX muito mais rápida e elegante.",
|
||||
},
|
||||
]
|
||||
|
||||
const toggle = (idx: number) => {
|
||||
setOpenIndex(openIndex === idx ? null : idx)
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="faq" className="py-24">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-xs uppercase font-extrabold tracking-widest text-brand">
|
||||
Tire Suas Dúvidas
|
||||
</p>
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-text-main">
|
||||
Perguntas Frequentes
|
||||
</h2>
|
||||
<p className="text-text-muted text-base">
|
||||
Esclarecimentos diretos sobre a arquitetura, regras de negócio e recursos do Bee Task.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, idx) => {
|
||||
const isOpen = openIndex === idx
|
||||
return (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-surface border border-border-soft rounded-2xl overflow-hidden transition-all duration-200"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(idx)}
|
||||
className="w-full text-left p-5 sm:p-6 flex items-center justify-between gap-4 font-bold text-text-main hover:text-brand transition-colors"
|
||||
>
|
||||
<span className="text-base sm:text-lg flex items-center gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-accent" />
|
||||
{faq.q}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`w-5 h-5 text-text-muted transition-transform duration-200 shrink-0 ${
|
||||
isOpen ? "rotate-180 text-brand" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<CardContent className="px-6 pb-6 pt-0 text-sm sm:text-base text-text-muted leading-relaxed border-t border-border-soft/60 mt-1">
|
||||
{faq.a}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
393
new-frontend/src/components/landing/FeatureTabs.tsx
Normal file
393
new-frontend/src/components/landing/FeatureTabs.tsx
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
import { useState } from "react"
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Chip,
|
||||
ChipLabel,
|
||||
} from "@heroui/react"
|
||||
import {
|
||||
Clock,
|
||||
Building2,
|
||||
BarChart3,
|
||||
ShieldCheck,
|
||||
Check,
|
||||
Calendar,
|
||||
} from "lucide-react"
|
||||
|
||||
export const FeatureTabs = () => {
|
||||
const [activeTab, setActiveTab] = useState<"tracking" | "workspaces" | "analytics" | "security">("tracking")
|
||||
|
||||
return (
|
||||
<section id="time-tracking" className="py-24 bg-surface/60 border-y border-border-soft">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
|
||||
<div className="text-center max-w-3xl mx-auto space-y-3">
|
||||
<p className="text-xs uppercase font-extrabold tracking-widest text-brand">
|
||||
Visão Detalhada dos Módulos
|
||||
</p>
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-text-main">
|
||||
Projetado de ponta a ponta com a arquitetura Bee Task
|
||||
</h2>
|
||||
<p className="text-text-muted text-base">
|
||||
Alterne entre os pilares da plataforma para entender como cada recurso foi estruturado.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tab Buttons */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-2 max-w-3xl mx-auto p-1.5 bg-surface-muted rounded-2xl border border-border-soft">
|
||||
<button
|
||||
onClick={() => setActiveTab("tracking")}
|
||||
className={`flex items-center gap-2 px-5 py-3 rounded-xl text-sm font-bold transition-all ${
|
||||
activeTab === "tracking"
|
||||
? "bg-surface text-brand shadow-sm border border-border-soft"
|
||||
: "text-text-muted hover:text-text-main"
|
||||
}`}
|
||||
>
|
||||
<Clock className="w-4 h-4 text-brand" />
|
||||
Time Tracking Nativo
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("workspaces")}
|
||||
className={`flex items-center gap-2 px-5 py-3 rounded-xl text-sm font-bold transition-all ${
|
||||
activeTab === "workspaces"
|
||||
? "bg-surface text-accent shadow-sm border border-border-soft"
|
||||
: "text-text-muted hover:text-text-main"
|
||||
}`}
|
||||
>
|
||||
<Building2 className="w-4 h-4 text-accent" />
|
||||
Workspaces & Squads
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("analytics")}
|
||||
className={`flex items-center gap-2 px-5 py-3 rounded-xl text-sm font-bold transition-all ${
|
||||
activeTab === "analytics"
|
||||
? "bg-surface text-brand shadow-sm border border-border-soft"
|
||||
: "text-text-muted hover:text-text-main"
|
||||
}`}
|
||||
>
|
||||
<BarChart3 className="w-4 h-4 text-brand" />
|
||||
Analytics & Member Detail
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("security")}
|
||||
className={`flex items-center gap-2 px-5 py-3 rounded-xl text-sm font-bold transition-all ${
|
||||
activeTab === "security"
|
||||
? "bg-surface text-brand-strong shadow-sm border border-border-soft"
|
||||
: "text-text-muted hover:text-text-main"
|
||||
}`}
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4 text-brand-strong" />
|
||||
Segurança & MinIO
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Content Display */}
|
||||
<div className="bg-surface border border-border-soft rounded-3xl p-6 sm:p-10 shadow-panel transition-all">
|
||||
{activeTab === "tracking" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-6 space-y-5">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-bold">
|
||||
<span>Mecanismo Core de Produtividade</span>
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-text-main">
|
||||
Sem cronômetros externos. O tempo é propriedade da tarefa.
|
||||
</h3>
|
||||
<p className="text-text-muted leading-relaxed text-sm sm:text-base">
|
||||
No Bee Task, o rastreamento não é uma camada solta. Cada tarefa possui seu próprio vetor de sessões
|
||||
(<code className="font-mono text-xs text-brand font-bold">TaskHistoryItem</code>),
|
||||
registrando o carimbo exato de início e término. Se você pausar para um café ou trocar de foco, a
|
||||
plataforma garante histórico fiel.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-sm font-medium text-text-main">
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Proteção contra múltiplas execuções concorrentes na mesma tarefa
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Finalização automática e data de conclusão (<code className="font-mono text-xs">finishedAt</code>)
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Totalizador instantâneo de horas dedicadas ao projeto
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Visual Mockup for Tracking */}
|
||||
<div className="lg:col-span-6">
|
||||
<Card className="bg-surface-muted border border-border-soft rounded-2xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-border-soft pb-3">
|
||||
<span className="text-xs font-bold text-text-muted uppercase tracking-wider">
|
||||
Histórico Auditável de Sessões
|
||||
</span>
|
||||
<Chip className="bg-brand-soft text-brand text-xs font-semibold">
|
||||
<ChipLabel>3 Sessões Registradas</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="bg-surface p-3.5 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-text-main">Sessão #1 • Planejamento e Arquitetura</p>
|
||||
<p className="text-[11px] text-text-muted">10:00:15 → 11:30:20 (01h 30m)</p>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-brand">Finalizado</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3.5 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-text-main">Sessão #2 • Codificação dos Endpoints</p>
|
||||
<p className="text-[11px] text-text-muted">13:15:00 → 15:45:00 (02h 30m)</p>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-brand">Finalizado</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3.5 rounded-xl border border-brand/30 ring-2 ring-brand/10 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-text-main">Sessão #3 • Testes Unitários & CI/CD</p>
|
||||
<p className="text-[11px] text-text-muted">Iniciado às 16:00:00 (em execução)</p>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-accent animate-pulse">00h 42m 19s</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "workspaces" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-6 space-y-5">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-soft text-accent text-xs font-bold">
|
||||
<span>Isolamento Corporativo & Squads</span>
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-text-main">
|
||||
Uma conta, múltiplos workspaces totalmente independentes
|
||||
</h3>
|
||||
<p className="text-text-muted leading-relaxed text-sm sm:text-base">
|
||||
Ideal para agências, consultorias e empresas de tecnologia. Mude de organização sem fazer logout.
|
||||
Convide membros, atribua papéis rigorosos (<code className="font-mono text-xs">OWNER</code>,{" "}
|
||||
<code className="font-mono text-xs">ADMIN</code>, <code className="font-mono text-xs">MEMBER</code>)
|
||||
e gerencie o status dos convites.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-sm font-medium text-text-main">
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-accent stroke-[3]" />
|
||||
Separação completa de dados por entidade organizacional
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-accent stroke-[3]" />
|
||||
Visão de status de membro: Ativo ou Pendente de confirmação
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-accent stroke-[3]" />
|
||||
Projetos e categorias pertencentes ao escopo da empresa
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Visual Mockup for Workspaces */}
|
||||
<div className="lg:col-span-6">
|
||||
<Card className="bg-surface-muted border border-border-soft rounded-2xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-border-soft pb-3">
|
||||
<span className="text-xs font-bold text-text-muted uppercase tracking-wider">
|
||||
Workspaces Vinculados
|
||||
</span>
|
||||
<Button className="bg-accent text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow-sm">
|
||||
+ Novo Workspace
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="bg-surface p-4 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-soft text-accent flex items-center justify-center font-bold">
|
||||
BT
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-text-main">BeeTech Soluções Globais</p>
|
||||
<p className="text-xs text-text-muted">14 Projetos • 28 Membros</p>
|
||||
</div>
|
||||
</div>
|
||||
<Chip className="bg-accent-soft text-accent text-xs font-bold">
|
||||
<ChipLabel>OWNER</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-4 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft text-brand flex items-center justify-center font-bold">
|
||||
CL
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-text-main">Cliente Alpha • Fintech</p>
|
||||
<p className="text-xs text-text-muted">4 Projetos • 8 Membros</p>
|
||||
</div>
|
||||
</div>
|
||||
<Chip className="bg-brand-soft text-brand text-xs font-bold">
|
||||
<ChipLabel>ADMIN</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "analytics" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-6 space-y-5">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-bold">
|
||||
<span>Inteligência Operacional</span>
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-text-main">
|
||||
Painel de controle gerencial e estatísticas por colaborador
|
||||
</h3>
|
||||
<p className="text-text-muted leading-relaxed text-sm sm:text-base">
|
||||
O módulo de Org Dashboard consolida os indicadores mais críticos para tomada de decisão:
|
||||
distribuição de tempo por categoria, top tasks mais demoradas, progresso de projetos e a aba
|
||||
exclusiva <strong>Member Detail</strong>, que detalha o rendimento e horas de cada desenvolvedor.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-sm font-medium text-text-main">
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Filtro flexível por intervalo de datas (mensal, semanal, customizado)
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Ranking de tarefas mais pesadas da sprint
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Relatório consolidado de taxa de conclusão e entrega no prazo
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Visual Mockup for Analytics */}
|
||||
<div className="lg:col-span-6">
|
||||
<Card className="bg-surface-muted border border-border-soft rounded-2xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-border-soft pb-3">
|
||||
<span className="text-xs font-bold text-text-muted uppercase tracking-wider">
|
||||
Resumo da Semana (Org Dashboard)
|
||||
</span>
|
||||
<span className="text-xs text-text-muted font-medium flex items-center gap-1">
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
Últimos 30 dias
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft">
|
||||
<p className="text-xs text-text-muted font-semibold">Total Horas Rastreadas</p>
|
||||
<p className="text-xl font-bold font-mono text-brand mt-1">342.5h</p>
|
||||
<span className="text-[11px] text-emerald-600 font-semibold">+14% vs mês anterior</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft">
|
||||
<p className="text-xs text-text-muted font-semibold">Taxa de Conclusão</p>
|
||||
<p className="text-xl font-bold font-mono text-accent mt-1">92.8%</p>
|
||||
<span className="text-[11px] text-text-muted">118 tarefas entregues</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3.5 rounded-xl border border-border-soft space-y-2">
|
||||
<p className="text-xs font-bold text-text-main">Top Demandas por Categoria</p>
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div>
|
||||
<div className="flex justify-between font-medium mb-1">
|
||||
<span>Backend Core & APIs</span>
|
||||
<span className="font-mono font-bold">140h (41%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-border-soft h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-brand h-full rounded-full w-[41%]" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between font-medium mb-1">
|
||||
<span>Frontend & UX</span>
|
||||
<span className="font-mono font-bold">112h (33%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-border-soft h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-accent h-full rounded-full w-[33%]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "security" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-6 space-y-5">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-soft text-brand-strong text-xs font-bold">
|
||||
<span>Stack Confiável & Nuvem Privada</span>
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-text-main">
|
||||
Segurança corporativa com Quarkus, JWT & MinIO S3
|
||||
</h3>
|
||||
<p className="text-text-muted leading-relaxed text-sm sm:text-base">
|
||||
O backend foi desenvolvido com a robustez e baixo consumo de memória do ecossistema Quarkus.
|
||||
Autenticação padronizada com tokens JWT SmallRye e upload descentralizado de avatares com
|
||||
balde MinIO, garantindo que suas informações corporativas fiquem sob seu total controle.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-sm font-medium text-text-main">
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Chaves criptográficas assimétricas (PEM) para assinatura de tokens
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
MinIO Bucket privado com links anônimos controlados
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Check className="w-4 h-4 text-brand stroke-[3]" />
|
||||
Migrações de banco seguras gerenciadas via Flyway / Hibernate
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Visual Mockup for Security */}
|
||||
<div className="lg:col-span-6">
|
||||
<Card className="bg-surface-muted border border-border-soft rounded-2xl p-6 space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-border-soft pb-3">
|
||||
<span className="text-xs font-bold text-text-muted uppercase tracking-wider">
|
||||
Arquitetura de Serviços Integrados
|
||||
</span>
|
||||
<Chip className="bg-emerald-100 text-emerald-800 text-xs font-semibold">
|
||||
<ChipLabel>Status: 100% Operacional</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 font-mono text-xs">
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<span className="text-text-main font-semibold">Backend API (Quarkus REST)</span>
|
||||
<span className="text-brand font-bold">:8081 [JWT Auth]</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<span className="text-text-main font-semibold">Storage MinIO (S3 Avatars)</span>
|
||||
<span className="text-accent font-bold">:9000 [Bucket: avatars]</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<span className="text-text-main font-semibold">PostgreSQL Relational DB</span>
|
||||
<span className="text-brand-strong font-bold">:5432 [Pooled]</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface p-3 rounded-xl border border-border-soft flex items-center justify-between">
|
||||
<span className="text-text-main font-semibold">Frontend SPA (React 19 + HeroUI)</span>
|
||||
<span className="text-text-muted font-bold">:80 [Caddy Edge]</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
135
new-frontend/src/components/landing/Features.tsx
Normal file
135
new-frontend/src/components/landing/Features.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
Chip,
|
||||
ChipLabel,
|
||||
} from "@heroui/react"
|
||||
import {
|
||||
Clock,
|
||||
Building2,
|
||||
FolderKanban,
|
||||
BarChart3,
|
||||
ShieldCheck,
|
||||
Tag,
|
||||
Flame,
|
||||
FileSpreadsheet,
|
||||
} from "lucide-react"
|
||||
|
||||
export const Features = () => {
|
||||
const features = [
|
||||
{
|
||||
title: "Time Tracking Nativo por Tarefa",
|
||||
description:
|
||||
"Inicie e pause o cronômetro com 1 clique diretamente na tarefa. Cada segundo é registrado em um histórico auditável (start, end, duration).",
|
||||
icon: <Clock className="w-6 h-6 text-brand" />,
|
||||
tag: "Core Backend",
|
||||
accentBg: "bg-brand-soft",
|
||||
},
|
||||
{
|
||||
title: "Workspaces Multi-Tenancy & RBAC",
|
||||
description:
|
||||
"Isole empresas, clientes e squads com segurança. Controle granular de permissões com papéis de Owner, Admin e Membro com fluxo de convites.",
|
||||
icon: <Building2 className="w-6 h-6 text-accent" />,
|
||||
tag: "Multi-Org",
|
||||
accentBg: "bg-accent-soft",
|
||||
},
|
||||
{
|
||||
title: "Projetos com Cores & Ícones Customizáveis",
|
||||
description:
|
||||
"Dê identidade própria a cada projeto. Defina paleta de cores, ícones representativos e descrições claras para acelerar a organização visual.",
|
||||
icon: <FolderKanban className="w-6 h-6 text-brand" />,
|
||||
tag: "Visual",
|
||||
accentBg: "bg-brand-soft",
|
||||
},
|
||||
{
|
||||
title: "Dashboards Executivos & Member Detail",
|
||||
description:
|
||||
"Métricas consolidadas de produtividade por período: horas por categoria, top tasks demoradas e visão de desempenho individual de cada colaborador.",
|
||||
icon: <BarChart3 className="w-6 h-6 text-accent" />,
|
||||
tag: "Analytics",
|
||||
accentBg: "bg-accent-soft",
|
||||
},
|
||||
{
|
||||
title: "Upload de Avatares com MinIO S3",
|
||||
description:
|
||||
"Armazenamento de alta performance para fotos de perfil e ativos integrado ao MinIO S3 compatível com nuvem e autenticação via JWT Quarkus.",
|
||||
icon: <ShieldCheck className="w-6 h-6 text-brand" />,
|
||||
tag: "Infra & Segurança",
|
||||
accentBg: "bg-brand-soft",
|
||||
},
|
||||
{
|
||||
title: "Categorias & Badges Coloridos",
|
||||
description:
|
||||
"Classifique tarefas como Bug, Feature, DevOps, Design ou Suporte. Filtre seu backlog instantaneamente com alta legibilidade.",
|
||||
icon: <Tag className="w-6 h-6 text-accent" />,
|
||||
tag: "Organização",
|
||||
accentBg: "bg-accent-soft",
|
||||
},
|
||||
{
|
||||
title: "Monitoramento de Ritmo & Prevenção de Burnout",
|
||||
description:
|
||||
"Ideia Inteligente: Alertas visuais quando um membro excede horas consecutivas em uma tarefa, estimulando pausas saudáveis e ritmo sustentável.",
|
||||
icon: <Flame className="w-6 h-6 text-danger" />,
|
||||
tag: "Nova Feature",
|
||||
accentBg: "bg-danger-soft",
|
||||
},
|
||||
{
|
||||
title: "Relatórios de Faturamento para Clientes",
|
||||
description:
|
||||
"Ideia Inteligente: Transforme horas rastreadas em extratos prontos para faturamento, com rateio por projeto e exportação automatizada.",
|
||||
icon: <FileSpreadsheet className="w-6 h-6 text-brand" />,
|
||||
tag: "Nova Feature",
|
||||
accentBg: "bg-brand-soft",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="features" className="py-24 relative">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-bold tracking-wide uppercase">
|
||||
<span>Funcionalidades Robustas</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-main tracking-tight">
|
||||
Tudo o que sua equipe precisa para entregar mais e medir melhor
|
||||
</h2>
|
||||
<p className="text-base sm:text-lg text-text-muted">
|
||||
Do microgerenciamento de tempo na tarefa aos relatórios executivos da diretoria:
|
||||
uma experiência unificada feita para times de tecnologia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{features.map((feat, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="bg-surface border border-border-soft rounded-2xl p-6 shadow-xs hover:shadow-panel hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<CardHeader className="p-0 pb-4 flex items-center justify-between">
|
||||
<div className={`p-3 rounded-2xl ${feat.accentBg}`}>
|
||||
{feat.icon}
|
||||
</div>
|
||||
<Chip className="bg-surface-muted text-text-muted text-[11px] font-semibold px-2 py-0.5 border border-border-soft">
|
||||
<ChipLabel>{feat.tag}</ChipLabel>
|
||||
</Chip>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 space-y-2">
|
||||
<CardTitle className="text-lg font-bold text-text-main">
|
||||
{feat.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-text-muted leading-relaxed">
|
||||
{feat.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
112
new-frontend/src/components/landing/Footer.tsx
Normal file
112
new-frontend/src/components/landing/Footer.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { Chip, ChipLabel } from "@heroui/react"
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer className="border-t border-border-soft bg-surface py-12 text-sm text-text-muted">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 pb-12 border-b border-border-soft">
|
||||
{/* Brand Info */}
|
||||
<div className="space-y-4 md:col-span-1">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-brand flex items-center justify-center text-sm shadow-sm">
|
||||
<span>🐝</span>
|
||||
</div>
|
||||
<span className="font-extrabold text-lg text-text-main">
|
||||
Bee<span className="text-accent">Task</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-text-muted leading-relaxed">
|
||||
Plataforma de alta performance para gestão de tarefas, controle de horas
|
||||
e dashboards operacionais multi-empresas.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="font-medium text-text-main">Serviços Operacionais (v3)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links: Produto */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-text-main">
|
||||
Produto
|
||||
</h4>
|
||||
<ul className="space-y-2 text-xs font-medium">
|
||||
<li>
|
||||
<a href="#features" className="hover:text-brand transition-colors">
|
||||
Funcionalidades
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#time-tracking" className="hover:text-brand transition-colors">
|
||||
Time Tracking & Cronômetro
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#workspaces" className="hover:text-brand transition-colors">
|
||||
Workspaces Multi-Tenancy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#analytics" className="hover:text-brand transition-colors">
|
||||
Dashboards & Member Detail
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Links: Arquitetura & Stack */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-text-main">
|
||||
Arquitetura
|
||||
</h4>
|
||||
<ul className="space-y-2 text-xs font-medium">
|
||||
<li>
|
||||
<span className="text-text-muted">Backend: Quarkus 3 REST</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-text-muted">Frontend: React 19 + HeroUI v3</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-text-muted">Storage: MinIO S3 Object Storage</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-text-muted">Database: PostgreSQL 16</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Links: BeeTech Group */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-text-main">
|
||||
BeeTech Group
|
||||
</h4>
|
||||
<p className="text-xs text-text-muted">
|
||||
Soluções modernas de engenharia de software e inteligência operacional.
|
||||
</p>
|
||||
<div className="pt-2">
|
||||
<Chip className="bg-surface-muted text-text-muted text-[11px] font-semibold border border-border-soft">
|
||||
<ChipLabel>task3.beetech.dev</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-text-muted">
|
||||
<p>© {new Date().getFullYear()} BeeTech Group. Todos os direitos reservados.</p>
|
||||
<div className="flex items-center gap-6">
|
||||
<a href="#" className="hover:text-brand transition-colors">
|
||||
Termos de Uso
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand transition-colors">
|
||||
Privacidade
|
||||
</a>
|
||||
<a href="#" className="hover:text-brand transition-colors">
|
||||
Status do Sistema
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
280
new-frontend/src/components/landing/Hero.tsx
Normal file
280
new-frontend/src/components/landing/Hero.tsx
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
import { useState, useEffect } from "react"
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
Chip,
|
||||
ChipLabel,
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
} from "@heroui/react"
|
||||
import {
|
||||
Play,
|
||||
Square,
|
||||
Clock,
|
||||
Sparkles,
|
||||
CheckCircle2,
|
||||
FolderKanban,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Flame,
|
||||
ArrowRight,
|
||||
} from "lucide-react"
|
||||
|
||||
export const Hero = () => {
|
||||
// Interactive mock task timer state
|
||||
const [isRunning, setIsRunning] = useState(true)
|
||||
const [seconds, setSeconds] = useState(5082) // 01:24:42
|
||||
|
||||
useEffect(() => {
|
||||
let interval: ReturnType<typeof setInterval>
|
||||
if (isRunning) {
|
||||
interval = setInterval(() => {
|
||||
setSeconds((prev) => prev + 1)
|
||||
}, 1000)
|
||||
}
|
||||
return () => clearInterval(interval)
|
||||
}, [isRunning])
|
||||
|
||||
const formatTime = (totalSeconds: number) => {
|
||||
const hrs = Math.floor(totalSeconds / 3600)
|
||||
const mins = Math.floor((totalSeconds % 3600) / 60)
|
||||
const secs = totalSeconds % 60
|
||||
return `${hrs.toString().padStart(2, "0")}:${mins
|
||||
.toString()
|
||||
.padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative pt-12 pb-20 md:pt-20 md:pb-32 overflow-hidden">
|
||||
{/* Decorative ambient glows */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[650px] h-[350px] bg-gradient-to-tr from-accent/15 via-brand/20 to-transparent blur-3xl pointer-events-none rounded-full -z-10" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
|
||||
{/* Left Column: Value Proposition */}
|
||||
<div className="lg:col-span-7 text-center lg:text-left space-y-6">
|
||||
{/* Top pill badge */}
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-surface border border-border-soft shadow-xs text-xs font-semibold text-brand">
|
||||
<span className="flex h-2 w-2 rounded-full bg-accent animate-pulse" />
|
||||
<span>Bee Task v3 • Produtividade de Alta Performance</span>
|
||||
<Sparkles className="w-3.5 h-3.5 text-accent" />
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-text-main leading-[1.12]">
|
||||
Onde o foco da sua equipe vira{" "}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand via-brand-strong to-accent">
|
||||
horas produtivas reais.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-lg sm:text-xl text-text-muted max-w-2xl mx-auto lg:mx-0 leading-relaxed">
|
||||
O ecossistema completo para gestão ágil, <strong>time tracking auditável</strong>,
|
||||
workspaces multi-empresas e métricas gerenciais em tempo real. Sem burocracia,
|
||||
projetado para quem entrega código e valor.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
|
||||
<a href="#comecar" className="w-full sm:w-auto">
|
||||
<Button className="w-full sm:w-auto bg-brand hover:bg-brand-strong text-white font-bold text-base px-7 py-3.5 rounded-xl shadow-xl shadow-brand/20 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2.5">
|
||||
Criar Workspace Grátis
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</a>
|
||||
<a href="#preview" className="w-full sm:w-auto">
|
||||
<Button className="w-full sm:w-auto bg-surface hover:bg-surface-muted text-text-main font-semibold text-base px-6 py-3.5 rounded-xl border border-border-soft shadow-xs transition-colors duration-150 flex items-center justify-center gap-2">
|
||||
<Play className="w-4 h-4 text-accent fill-accent" />
|
||||
Ver Demonstração Interativa
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Bullet Proof Highlights */}
|
||||
<div className="pt-4 flex flex-wrap items-center justify-center lg:justify-start gap-y-2 gap-x-6 text-xs sm:text-sm font-medium text-text-muted">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand" />
|
||||
<span>Multi-tenancy nativo</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand" />
|
||||
<span>Controle de horas por segundo</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand" />
|
||||
<span>Arquitetura Quarkus + React</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: High-Fidelity Interactive Preview Card */}
|
||||
<div id="preview" className="lg:col-span-5 relative">
|
||||
{/* Floating badge top right */}
|
||||
<div className="absolute -top-4 -right-2 sm:-right-4 z-20 bg-surface border border-border-soft p-3 rounded-2xl shadow-panel flex items-center gap-3 backdrop-blur-md">
|
||||
<div className="w-9 h-9 rounded-xl bg-accent-soft flex items-center justify-center text-accent">
|
||||
<Flame className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold text-text-muted uppercase tracking-wider">
|
||||
Ritmo da Sprint
|
||||
</p>
|
||||
<p className="text-sm font-bold text-text-main">
|
||||
94.8% no Prazo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card HeroUI container */}
|
||||
<Card className="bg-surface/90 backdrop-blur-md border border-border-soft rounded-3xl p-6 shadow-panel relative z-10 transition-all hover:shadow-2xl">
|
||||
<CardHeader className="p-0 pb-4 flex items-center justify-between border-b border-border-soft">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<span className="w-3 h-3 rounded-full bg-yellow-400" />
|
||||
<span className="w-3 h-3 rounded-full bg-emerald-400" />
|
||||
<span className="text-xs font-semibold text-text-muted ml-2">
|
||||
Squad Core • Bee Task v3
|
||||
</span>
|
||||
</div>
|
||||
<Chip className="bg-accent-soft text-accent text-xs font-semibold px-2 py-0.5 border border-accent/20">
|
||||
<ChipLabel>Org: BeeTech Principal</ChipLabel>
|
||||
</Chip>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 py-5 space-y-4">
|
||||
{/* Active Task simulation */}
|
||||
<div className="bg-surface-muted/80 rounded-2xl p-4 border border-border-soft space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Chip className="bg-brand-soft text-brand text-[11px] font-semibold px-2 py-0.5">
|
||||
<ChipLabel>Feature</ChipLabel>
|
||||
</Chip>
|
||||
<span className="text-xs font-medium text-text-muted flex items-center gap-1">
|
||||
<FolderKanban className="w-3.5 h-3.5 text-brand" />
|
||||
API Task 3.0
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span
|
||||
className={`inline-block w-2 h-2 rounded-full ${
|
||||
isRunning ? "bg-emerald-500 animate-ping" : "bg-zinc-400"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs font-semibold text-text-muted">
|
||||
{isRunning ? "EM ANDAMENTO" : "PAUSADO"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-bold text-text-main">
|
||||
Refatoração do Mecanismo de Notificações & MinIO S3
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-text-muted">
|
||||
Implementação de upload direto de avatares com presigned URL e auditoria de log com Quarkus.
|
||||
</p>
|
||||
|
||||
{/* Real-time interactive tracker block */}
|
||||
<div className="bg-surface rounded-xl p-3 border border-border-soft flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-lg bg-brand-soft text-brand flex items-center justify-center">
|
||||
<Clock className="w-4 h-4 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-text-muted">
|
||||
Tempo Rastreado
|
||||
</p>
|
||||
<p className="text-lg font-mono font-bold text-text-main">
|
||||
{formatTime(seconds)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Button */}
|
||||
<Button
|
||||
onClick={() => setIsRunning(!isRunning)}
|
||||
className={`text-xs font-semibold px-4 py-2 rounded-xl flex items-center gap-1.5 transition-all ${
|
||||
isRunning
|
||||
? "bg-danger-soft text-danger hover:bg-danger/20 border border-danger/30"
|
||||
: "bg-brand text-white hover:bg-brand-strong shadow-md shadow-brand/20"
|
||||
}`}
|
||||
>
|
||||
{isRunning ? (
|
||||
<>
|
||||
<Square className="w-3.5 h-3.5 fill-current" />
|
||||
Pausar
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-3.5 h-3.5 fill-current" />
|
||||
Iniciar
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtask / team member preview */}
|
||||
<div className="flex items-center justify-between pt-1 px-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex -space-x-2 overflow-hidden">
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-brand text-white text-[10px] font-bold">
|
||||
GB
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-accent text-white text-[10px] font-bold">
|
||||
AL
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-brand-strong text-white text-[10px] font-bold">
|
||||
CR
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-text-muted">
|
||||
3 membros com sessões ativas
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="text-xs font-semibold text-brand flex items-center gap-1">
|
||||
<TrendingUp className="w-3.5 h-3.5" />
|
||||
+18.4h hoje
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="p-0 pt-3 border-t border-border-soft flex items-center justify-between text-xs text-text-muted">
|
||||
<span>Auditoria de sessões ativa</span>
|
||||
<span className="font-mono text-[11px] text-text-main font-semibold">
|
||||
Última sincronia: agora
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Bottom floating badge */}
|
||||
<div className="absolute -bottom-4 -left-2 sm:-left-4 z-20 bg-surface border border-border-soft p-3 rounded-2xl shadow-panel flex items-center gap-3 backdrop-blur-md">
|
||||
<div className="w-9 h-9 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Users className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold text-text-muted uppercase tracking-wider">
|
||||
Permissões RBAC
|
||||
</p>
|
||||
<p className="text-sm font-bold text-text-main">
|
||||
Owner • Admin • Member
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
82
new-frontend/src/components/landing/Navbar.tsx
Normal file
82
new-frontend/src/components/landing/Navbar.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Button, Chip, ChipLabel } from "@heroui/react"
|
||||
import { ArrowRight } from "lucide-react"
|
||||
|
||||
export const Navbar = () => {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 backdrop-blur-md bg-surface/85 border-b border-border-soft transition-all duration-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-brand flex items-center justify-center shadow-md shadow-accent/20">
|
||||
<span className="text-xl select-none">🐝</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-extrabold text-xl tracking-tight text-text-main">
|
||||
Bee<span className="text-accent">Task</span>
|
||||
</span>
|
||||
<Chip className="bg-brand-soft text-brand text-xs font-semibold px-2 py-0.5 border border-brand/20">
|
||||
<ChipLabel>v3.0</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
<p className="text-[11px] font-medium text-text-muted leading-tight">
|
||||
by BeeTech Group
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="hidden md:flex items-center gap-8 text-sm font-medium text-text-muted">
|
||||
<a
|
||||
href="#features"
|
||||
className="hover:text-brand transition-colors duration-150 flex items-center gap-1.5"
|
||||
>
|
||||
Funcionalidades
|
||||
</a>
|
||||
<a
|
||||
href="#time-tracking"
|
||||
className="hover:text-brand transition-colors duration-150"
|
||||
>
|
||||
Time Tracking
|
||||
</a>
|
||||
<a
|
||||
href="#workspaces"
|
||||
className="hover:text-brand transition-colors duration-150"
|
||||
>
|
||||
Workspaces
|
||||
</a>
|
||||
<a
|
||||
href="#analytics"
|
||||
className="hover:text-brand transition-colors duration-150"
|
||||
>
|
||||
Analytics & Gestão
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
className="hover:text-brand transition-colors duration-150"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="#login"
|
||||
className="text-sm font-semibold text-text-main hover:text-brand px-3 py-2 transition-colors"
|
||||
>
|
||||
Entrar
|
||||
</a>
|
||||
<a href="#comecar">
|
||||
<Button
|
||||
className="bg-brand hover:bg-brand-strong text-white font-semibold text-sm px-5 py-2.5 rounded-xl shadow-lg shadow-brand/25 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] flex items-center gap-2"
|
||||
>
|
||||
Começar Agora
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
77
new-frontend/src/components/landing/Stats.tsx
Normal file
77
new-frontend/src/components/landing/Stats.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import React from "react"
|
||||
import { Card, CardContent } from "@heroui/react"
|
||||
import { CheckCircle2, Clock, Building2, Users } from "lucide-react"
|
||||
|
||||
export const Stats: React.FC = () => {
|
||||
const stats = [
|
||||
{
|
||||
label: "Tarefas Finalizadas",
|
||||
value: "84.500+",
|
||||
subtext: "Entregues com ciclo completo",
|
||||
icon: <CheckCircle2 className="w-5 h-5 text-brand" />,
|
||||
highlightColor: "bg-brand-soft",
|
||||
},
|
||||
{
|
||||
label: "Horas Rastreadas",
|
||||
value: "12.350h",
|
||||
subtext: "Com controle auditável em tempo real",
|
||||
icon: <Clock className="w-5 h-5 text-accent" />,
|
||||
highlightColor: "bg-accent-soft",
|
||||
},
|
||||
{
|
||||
label: "Organizações & Workspaces",
|
||||
value: "480+",
|
||||
subtext: "Isolamento multi-tenancy rigoroso",
|
||||
icon: <Building2 className="w-5 h-5 text-brand" />,
|
||||
highlightColor: "bg-brand-soft",
|
||||
},
|
||||
{
|
||||
label: "Colaboradores Ativos",
|
||||
value: "3.200+",
|
||||
subtext: "Equipes de tecnologia e squads ágeis",
|
||||
icon: <Users className="w-5 h-5 text-accent" />,
|
||||
highlightColor: "bg-accent-soft",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="py-12 border-y border-border-soft bg-surface/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-10">
|
||||
<p className="text-xs uppercase font-extrabold tracking-widest text-brand">
|
||||
Métricas da Plataforma (Public Stats API)
|
||||
</p>
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold text-text-main mt-1">
|
||||
Resultados mensuráveis entregues todos os dias
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{stats.map((item, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="bg-surface border border-border-soft rounded-2xl p-6 shadow-xs hover:shadow-panel transition-all duration-200"
|
||||
>
|
||||
<CardContent className="p-0 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-text-muted">
|
||||
{item.label}
|
||||
</span>
|
||||
<div className={`p-2.5 rounded-xl ${item.highlightColor}`}>
|
||||
{item.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-3xl sm:text-4xl font-extrabold font-mono text-text-main tracking-tight">
|
||||
{item.value}
|
||||
</p>
|
||||
<p className="text-xs text-text-muted mt-1">{item.subtext}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
94
new-frontend/src/components/landing/Testimonials.tsx
Normal file
94
new-frontend/src/components/landing/Testimonials.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
} from "@heroui/react"
|
||||
import { Star } from "lucide-react"
|
||||
|
||||
export const Testimonials = () => {
|
||||
const reviews = [
|
||||
{
|
||||
name: "Gabriel Ramos",
|
||||
role: "Lead Software Architect",
|
||||
company: "BeeTech Group",
|
||||
initials: "GR",
|
||||
comment:
|
||||
"O time tracking nativo acoplado à tarefa transformou nossa dinâmica de sprint. Acabou aquela história de esquecer de apontar horas no fim do dia; agora é 1 clique e tudo fica auditado no backend Quarkus.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Mariana Siqueira",
|
||||
role: "Engineering Manager",
|
||||
company: "Fintech Nexus",
|
||||
initials: "MS",
|
||||
comment:
|
||||
"O recurso de Member Detail e a visão por categoria no Org Dashboard nos deram a clareza necessária para balancear a carga dos desenvolvedores antes que qualquer gargalo se formasse.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Lucas Vasconcelos",
|
||||
role: "CTO & Co-founder",
|
||||
company: "CloudScale Labs",
|
||||
initials: "LV",
|
||||
comment:
|
||||
"O suporte a múltiplos workspaces isolados nos permitiu centralizar tanto nossos projetos internos quanto o acompanhamento dos squads dos clientes em uma única ferramenta super leve e rápida.",
|
||||
rating: 5,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-surface/50 border-t border-border-soft">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
|
||||
<div className="text-center max-w-3xl mx-auto space-y-3">
|
||||
<p className="text-xs uppercase font-extrabold tracking-widest text-brand">
|
||||
Feedback de Líderes Técnicos
|
||||
</p>
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-text-main">
|
||||
Desenvolvido por quem vive os desafios de entregar software
|
||||
</h2>
|
||||
<p className="text-base text-text-muted">
|
||||
Veja como equipes ágeis aumentaram a precisão do acompanhamento de horas e o foco nas sprints.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{reviews.map((rev, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-surface border border-border-soft rounded-3xl p-7 shadow-xs hover:shadow-panel transition-all duration-200 flex flex-col justify-between"
|
||||
>
|
||||
<CardContent className="p-0 space-y-4">
|
||||
<div className="flex items-center gap-1 text-accent">
|
||||
{[...Array(rev.rating)].map((_, i) => (
|
||||
<Star key={i} className="w-4 h-4 fill-accent" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-text-muted italic leading-relaxed">
|
||||
"{rev.comment}"
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
<div className="pt-6 border-t border-border-soft flex items-center gap-3.5">
|
||||
<Avatar className="w-10 h-10 rounded-full">
|
||||
<AvatarFallback className="bg-brand-soft text-brand font-bold text-xs">
|
||||
{rev.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-text-main">
|
||||
{rev.name}
|
||||
</h4>
|
||||
<p className="text-xs text-text-muted">
|
||||
{rev.role} • {rev.company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
79
new-frontend/src/components/landing/Workflow.tsx
Normal file
79
new-frontend/src/components/landing/Workflow.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { Card, CardContent } from "@heroui/react"
|
||||
import { Building2, UserPlus, PlayCircle, LineChart } from "lucide-react"
|
||||
|
||||
export const Workflow = () => {
|
||||
const steps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Crie seu Workspace",
|
||||
description:
|
||||
"Crie a organização para sua empresa ou squad, personalize os projetos e categorize os tipos de demandas com paleta de cores própria.",
|
||||
icon: <Building2 className="w-5 h-5 text-brand" />,
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Convide sua Equipe",
|
||||
description:
|
||||
"Adicione colaboradores com papéis seguros (Owner, Admin, Membro). Cada um terá seu perfil com avatar customizado e controle de acesso.",
|
||||
icon: <UserPlus className="w-5 h-5 text-accent" />,
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Inicie o Time Tracking",
|
||||
description:
|
||||
"Cada membro dá o play nas suas tarefas. O cronômetro acompanha o trabalho sem distrações, calculando horas produtivas segundo a segundo.",
|
||||
icon: <PlayCircle className="w-5 h-5 text-brand" />,
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Analise Métricas & Entregas",
|
||||
description:
|
||||
"Descubra as tarefas mais demoradas, visualize a distribuição por categoria e veja o desempenho consolidado de cada membro do time.",
|
||||
icon: <LineChart className="w-5 h-5 text-accent" />,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="workspaces" className="py-24">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
|
||||
<div className="text-center max-w-3xl mx-auto space-y-4">
|
||||
<p className="text-xs uppercase font-extrabold tracking-widest text-brand">
|
||||
Fluxo de Trabalho Descomplicado
|
||||
</p>
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold text-text-main">
|
||||
Da criação do workspace ao primeiro relatório em 4 passos
|
||||
</h2>
|
||||
<p className="text-base text-text-muted">
|
||||
Uma esteira intuitiva feita para eliminar atrito e focar no que realmente importa: entregar software.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
|
||||
{steps.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-surface border border-border-soft rounded-2xl p-6 shadow-xs relative overflow-hidden group hover:shadow-panel hover:-translate-y-1 transition-all duration-200"
|
||||
>
|
||||
<div className="absolute -right-3 -top-3 text-6xl font-extrabold font-mono text-border-soft/60 select-none group-hover:text-brand/10 transition-colors">
|
||||
{item.step}
|
||||
</div>
|
||||
<CardContent className="p-0 space-y-4 relative z-10">
|
||||
<div className="w-11 h-11 rounded-xl bg-surface-muted border border-border-soft flex items-center justify-center">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-text-main">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-text-muted mt-2 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
59
new-frontend/src/index.css
Normal file
59
new-frontend/src/index.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@import "tailwindcss";
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
|
||||
--color-app-bg: #f5f1e8;
|
||||
--color-app-bg-strong: #ebe4d7;
|
||||
--color-surface: #fffdf8;
|
||||
--color-surface-muted: #f6efe2;
|
||||
--color-border-soft: #e7dcc9;
|
||||
--color-border-strong: #cdbba0;
|
||||
--color-text-main: #1f2937;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-brand: #0f766e;
|
||||
--color-brand-strong: #115e59;
|
||||
--color-brand-soft: #ccfbf1;
|
||||
--color-accent: #d97706;
|
||||
--color-accent-soft: #ffedd5;
|
||||
|
||||
--color-success: #10b981;
|
||||
--color-success-soft: #ecfdf5;
|
||||
--color-warning: #f59e0b;
|
||||
--color-warning-soft: #fffbeb;
|
||||
--color-danger: #ef4444;
|
||||
--color-danger-soft: #fef2f2;
|
||||
|
||||
--shadow-panel:
|
||||
0 22px 60px rgba(79, 62, 35, 0.08), 0 6px 18px rgba(79, 62, 35, 0.06);
|
||||
}
|
||||
|
||||
:root {
|
||||
color: var(--color-text-main);
|
||||
background-color: var(--color-app-bg);
|
||||
font-family: var(--font-sans);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(217, 119, 6, 0.12), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 24%),
|
||||
linear-gradient(180deg, var(--color-app-bg) 0%, #f8f5ef 100%);
|
||||
}
|
||||
13
new-frontend/src/main.tsx
Normal file
13
new-frontend/src/main.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { HeroUIProvider } from '@heroui/system'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<HeroUIProvider>
|
||||
<App />
|
||||
</HeroUIProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
15
new-frontend/tailwind.config.js
Normal file
15
new-frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { heroui } from "@heroui/theme";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
darkMode: "class",
|
||||
plugins: [heroui()]
|
||||
};
|
||||
26
new-frontend/tsconfig.app.json
Normal file
26
new-frontend/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
new-frontend/tsconfig.json
Normal file
7
new-frontend/tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
23
new-frontend/tsconfig.node.json
Normal file
23
new-frontend/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
8
new-frontend/vite.config.ts
Normal file
8
new-frontend/vite.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
})
|
||||
Loading…
Reference in a new issue