chore(deps): upgrade sharp to v0.34.5, add @types/bun, remove @types/node

Also adds DOCKER_BUILD env variable in prepare for moving out from github workflows

.dockerignore

@@ -0,0 +1,134 @@
+############################################################
+# Production-ready .dockerignore for a Next.js app
+# Keeps Docker builds fast, lean, and free of development files.
+############################################################
+
+# Dependencies (installed inside Docker, never copied)
+node_modules/
+.pnpm-store/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Next.js build outputs (always generated during `next build`)
+.next/
+out/
+dist/
+build/
+.vercel/
+
+# Tests and testing output (not needed in production images)
+coverage/
+.nyc_output/
+__tests__/
+__mocks__/
+jest/
+cypress/
+cypress/screenshots/
+cypress/videos/
+playwright-report/
+test-results/
+.vitest/
+vitest.config.*
+jest.config.*
+cypress.config.*
+playwright.config.*
+*.test.*
+*.spec.*
+
+# Local development and editor files
+.git/
+.gitignore
+.gitattributes
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+*.log
+
+# Environment variables (only commit template files)
+.env
+.env*.local
+.env.development
+.env.test
+.env.production.local
+
+# Docker configuration files (not needed inside build context)
+Dockerfile*
+.dockerignore
+compose.yaml
+compose.yml
+docker-compose*.yaml
+docker-compose*.yml
+
+# Documentation
+*.md
+docs/
+
+# CI/CD configuration files
+.github/
+.gitlab-ci.yml
+.travis.yml
+.circleci/
+Jenkinsfile
+
+# Cache directories and temporary data
+.cache/
+.parcel-cache/
+.eslintcache
+.stylelintcache
+.swc/
+.turbo/
+.tmp/
+.temp/
+
+# TypeScript build metadata
+*.tsbuildinfo
+
+# Sensitive or unnecessary configuration files
+*.pem
+.editorconfig
+.prettierrc*
+prettier.config.*
+.eslintrc*
+eslint.config.*
+.stylelintrc*
+stylelint.config.*
+.babelrc*
+*.iml
+*.ipr
+*.iws
+
+# OS-specific junk
+.DS_Store
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+
+# AI/ML tool metadata and configs
+.cursor/
+.cursorrules
+.copilot/
+.copilotignore
+.github/copilot/
+.gemini/
+.anthropic/
+.kiro
+.claude
+AGENTS.md
+.agents/
+
+# AI-generated temp files
+*.aider*
+*.copilot*
+*.chatgpt*
+*.claude*
+*.gemini*
+*.openai*
+*.anthropic*

.env.example

@@ -1,8 +1,3 @@
-#  App variables
-
-SITE_NAME="EntGamers"
-DISCORD_JOIN_WEBHOOK_URL="https://discord.com/api/webhooks/XXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
-
 # Deployment variables
 
 APP_NAME=""
@@ -14,4 +9,16 @@ DEPLOY_PATH=""
 # Github actions variables
 
 SSH_PRIVATE_KEY=""
-SSH_KNOWN_HOSTS=""
+SSH_KNOWN_HOSTS=""
+
+# Appwrite required variables
+
+NEXT_PUBLIC_APPWRITE_ENDPOINT=""
+NEXT_PUBLIC_APPWRITE_PROJECT_ID=""
+APPWRITE_API_KEY=""
+
+# Website Variables
+
+SITE_NAME="EntGamers"
+NEXT_PUBLIC_SITE_URL="https://entgamers.com"
+IMAGE_DOMAINS="https://domain.com,http://another.domain.com/route/"

.eslintrc.json

@@ -1,52 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "standard",
-    "plugin:@next/next/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react",
-    "@emotion",
-    "@typescript-eslint"
-  ],
-  "rules": {
-    "indent": [
-      "error",
-      2
-    ],
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": [
-      "error"
-    ],
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-filename-extension": [
-      "warn",
-      {
-        "extensions": [
-          ".tsx"
-        ]
-      }
-    ],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@emotion/pkg-renaming": "error",
-    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

.github/workflows/deploy-preview.yml

@@ -1,33 +0,0 @@
-name: CI deploy preview
-on:
-  push:
-    branches: ["preview"]
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: preview
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js preview
-        env:
-          # Deploy environment variables
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/deploy-production.yml

@@ -1,33 +0,0 @@
-name: CI deploy production
-on:
-  push:
-    branches: ["production"]
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: production
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js production
-        env:
-          # Deploy environment variables 
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/setup-preview.yml

@@ -1,31 +0,0 @@
-name: CI setup preview
-on:
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: preview
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js preview setup
-        env:
-          # Deploy environment variables
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/setup-production.yml

@@ -1,31 +0,0 @@
-name: CI setup production
-on:
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: production
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js production setup
-        env:
-          # Deploy environment variables 
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.gitignore

@@ -189,4 +189,10 @@ dist
 # and uncomment the following lines
 # .pnp.*
 
-# End of https://www.toptal.com/developers/gitignore/api/node,yarn,nextjs
+# End of https://www.toptal.com/developers/gitignore/api/node,yarn,nextjs
+
+# Panda Css
+src/styled-system
+
+# Vscode
+.vscode

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit "${1}"
+bunx --no -- commitlint --edit "${1}"

.husky/install.mts

@@ -0,0 +1,9 @@
+// Skip Husky install in production and CI
+
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+
+const husky = (await import('husky')).default
+
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1 @@
+bunx lint-staged --config lint-staged.config.ts

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run lint

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@pandacss/dev/postcss": {}
+  }
+}

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

Dockerfile

@@ -0,0 +1,52 @@
+
+
+FROM oven/bun:1.3-alpine AS builder
+
+WORKDIR /app
+
+COPY . .
+
+ARG NEXT_PUBLIC_APPWRITE_ENDPOINT=""
+ARG NEXT_PUBLIC_APPWRITE_PROJECT_ID=""
+
+ARG SITE_NAME="EntGamers"
+ARG NEXT_PUBLIC_SITE_URL="https://entgamers.pro"
+ARG IMAGE_DOMAINS="https://api.entgamers.pro"
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV CI=1
+ENV HUSKY=0
+ENV DOCKER_BUILD="true"
+
+
+RUN bun install --frozen-lockfile
+
+RUN --mount=type=secret,id=APPWRITE_API_KEY,env=APPWRITE_API_KEY \
+NEXT_PUBLIC_APPWRITE_ENDPOINT=${NEXT_PUBLIC_APPWRITE_ENDPOINT} \
+NEXT_PUBLIC_APPWRITE_PROJECT_ID=${NEXT_PUBLIC_APPWRITE_PROJECT_ID} \
+SITE_NAME=${SITE_NAME} \
+NEXT_PUBLIC_SITE_URL=${NEXT_PUBLIC_SITE_URL} \
+IMAGE_DOMAINS=${IMAGE_DOMAINS} \
+bun run build
+
+
+FROM oven/bun:1.3-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder --chown=bun:bun /app/public ./public
+COPY --from=builder --chown=bun:bun /app/.next/standalone ./
+COPY --from=builder --chown=bun:bun /app/.next/static ./.next/static
+
+
+USER bun
+
+EXPOSE 3000
+
+CMD ["bun", "server.js"]

commitlint.config.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] }

commitlint.config.ts

@@ -0,0 +1,5 @@
+import type { UserConfig } from '@commitlint/types'
+
+const Configuration: UserConfig = { extends: ['@commitlint/config-conventional'] }
+
+export default Configuration

ecosystem.config.js

@@ -2,42 +2,55 @@ module.exports = {
   apps: [
     {
       name: process.env.APP_NAME || 'entgamers-website',
-      script: 'yarn',
+      script: 'bun',
       args: 'run start',
       env: {
         NODE_ENV: 'production',
         PORT: process.env.PORT || 3000,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
     }
   ],
 
   deploy: {
     production: {
-      user: process.env.SSH_USERNAME,
-      host: process.env.DEPLOY_HOST,
-      ref: 'origin/production',
-      repo: 'https://github.com/SrJuggernaut/entgamers_pro',
-      path: process.env.DEPLOY_PATH,
+      'user': process.env.SSH_USERNAME,
+      'host': process.env.DEPLOY_HOST,
+      'ref': 'origin/production',
+      'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
+      'path': process.env.DEPLOY_PATH,
       'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
-      env: {
-        APP_NAME: process.env.APP_NAME,
+      'env': {
         PORT: process.env.PORT,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
 
     },
     preview: {
-      user: process.env.SSH_USERNAME,
-      host: process.env.DEPLOY_HOST,
-      ref: 'origin/preview',
-      repo: 'https://github.com/SrJuggernaut/entgamers_pro',
-      path: process.env.DEPLOY_PATH,
+      'user': process.env.SSH_USERNAME,
+      'host': process.env.DEPLOY_HOST,
+      'ref': 'origin/preview',
+      'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
+      'path': process.env.DEPLOY_PATH,
       'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
-      env: {
-        APP_NAME: process.env.APP_NAME,
+      'env': {
         PORT: process.env.PORT,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
     }
   }

eslint.config.mjs

@@ -0,0 +1,98 @@
+import eslintJs from '@eslint/js'
+import nextPlugin from '@next/eslint-plugin-next'
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import stylisticPlugin from '@stylistic/eslint-plugin'
+
+export default defineConfig([
+  globalIgnores([
+    'node_modules/',
+    'public/', 'src/styled-system/**/*', '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts']),
+
+  {
+    name: 'entgamers_pro/globals',
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    name: 'project/eslint-js',
+    files: ['**/*.{js,mjs,ts,tsx}'],
+    ...eslintJs.configs.recommended
+  },
+  {
+    name: 'project/typescript',
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      ...tseslint.configs.recommended
+    ],
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
+    }
+  },
+  {
+    name: 'project/react-next',
+    files: ['**/*.{jsx,tsx}'],
+    plugins: {
+      'react': reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      '@next/next': nextPlugin
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs['jsx-runtime'].rules,
+      ...reactHooksPlugin.configs['recommended-latest'].rules,
+      ...jsxA11yPlugin.configs.strict.rules,
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/no-unknown-property': 'off',
+      'react/jsx-no-target-blank': 'off',
+      'jsx-a11y/alt-text': ['warn', { elements: ['img'], img: ['Image'] }],
+      'jsx-a11y/media-has-caption': 'warn'
+    },
+    settings: {
+      react: {
+        version: '19'
+      }
+    }
+  },
+  {
+    name: 'project/stylistic',
+    files: ['**/*.{js,mjs,ts,tsx}'],
+    plugins: {
+      '@stylistic': stylisticPlugin
+    },
+    rules: {
+      // Remove legacy formatting rules from ESLint core
+      ...stylisticPlugin.configs['disable-legacy'].rules,
+      // Add recommended stylistic rules
+      ...stylisticPlugin.configs.recommended.rules,
+      '@stylistic/indent': ['warn', 2],
+      '@stylistic/quotes': ['warn', 'single', {
+        avoidEscape: true,
+        allowTemplateLiterals: 'always'
+      }],
+      '@stylistic/semi': ['warn', 'never'],
+      '@stylistic/comma-dangle': ['warn', 'never'],
+      '@stylistic/arrow-parens': ['warn', 'always', {
+        requireForBlockBody: true
+      }],
+      '@stylistic/brace-style': ['warn', '1tbs', {
+        allowSingleLine: true
+      }]
+    }
+  }
+])

lint-staged.config.ts

@@ -0,0 +1,7 @@
+import type { Configuration } from 'lint-staged'
+
+const config: Configuration = {
+  '*.{js,jsx,ts,tsx}': 'eslint --fix'
+}
+
+export default config

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -1,5 +0,0 @@
-/** @type {import('next').NextConfig} */
-
-module.exports = {
-  reactStrictMode: true
-}

next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from 'next'
+
+const imageDomains = (process.env.IMAGE_DOMAINS ?? '').split(',').map((domain) => {
+  return new URL(domain)
+})
+
+const IS_DOCKER_BUILD = process.env.DOCKER_BUILD === 'true'
+
+const nextConfig: NextConfig = {
+  output: IS_DOCKER_BUILD ? 'standalone' : undefined,
+  reactStrictMode: true,
+  images: {
+    remotePatterns: imageDomains
+  }
+}
+
+module.exports = nextConfig

package.json

@@ -1,52 +1,55 @@
 {
-  "name": "next-template",
+  "name": "entgamers_pro",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "develop": "next dev",
     "build": "next build",
-    "prestart": "yarn install && next build",
     "start": "next start",
-    "lint": "next lint",
-    "prepare": "husky install"
+    "lint": "eslint .",
+    "prepare": "panda codegen && bun ./.husky/install.mts"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/material": "^5.14.9",
-    "formik": "^2.4.4",
-    "gsap": "^3.12.2",
+    "@fontsource/open-sans": "^5.0.20",
+    "@fontsource/permanent-marker": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@tanstack/match-sorter-utils": "^8.11.8",
+    "@tanstack/react-table": "^8.19.3",
+    "appwrite": "^13.0.1",
+    "date-fns": "^4.1.0",
+    "entgamers-database": "0.0.26",
+    "entgamers-panda-preset": "0.1.5",
+    "formik": "^2.4.5",
+    "framer-motion": "^12.38.0",
     "isomorphic-fetch": "^3.0.0",
-    "next": "13.4.19",
-    "next-connect": "^1.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sharp": "^0.32.5",
-    "swiper": "^10.2.0",
-    "yup": "^1.2.0"
+    "lint-staged": "^16.4.0",
+    "next": "16.2.2",
+    "node-appwrite": "^11.1.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-redux": "^9.0.4",
+    "sharp": "^0.34.5",
+    "yup": "^1.3.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@emotion/eslint-plugin": "^11.11.0",
-    "@types/isomorphic-fetch": "^0.0.36",
-    "@types/node": "20.6.0",
-    "@types/react": "18.2.21",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "eslint": "^8.23.1",
-    "eslint-config-next": "latest",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.2.5",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.8",
-    "husky": "^8.0.3",
-    "typescript": "5.2.2"
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/js": "^10.0.1",
+    "@pandacss/dev": "^1.9.1",
+    "@types/bun": "^1.3.11",
+    "@types/isomorphic-fetch": "^0.0.39",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^10.1.0",
+    "eslint-config-next": "16.2.2",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.1.7",
+    "typescript": "*",
+    "typescript-eslint": "^8.58.0"
   }
 }

panda.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  presets: ['entgamers-panda-preset'],
+  gitignore: true,
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  outdir: 'src/styled-system',
+  jsxFactory: 'panda',
+  jsxFramework: 'react'
+})

src/app/Clanes.tsx

@@ -0,0 +1,68 @@
+import Typography from '@/components/ui/Typography'
+import { css, cx } from '@/styled-system/css'
+import { Center } from '@/styled-system/jsx'
+import { center, container } from '@/styled-system/patterns'
+import { button, card } from '@/styled-system/recipes'
+import NextImage from 'next/image'
+import NextLink from 'next/link'
+import { type FC } from 'react'
+
+const Clanes: FC = () => {
+  return (
+    <section
+      id="clanes"
+      className={cx(center({}), css({
+        minHeight: '75vh',
+        backgroundImage: 'url(/images/backgrounds/bricks.png)'
+      }))}
+    >
+      <div
+        className={cx(card({ variant: 'glass' }).body, container({}))}
+      >
+        <div
+          className={card({ variant: 'glass' }).content}
+        >
+          <Typography variant="h2" align="center">Clanes</Typography>
+          <div
+            className={css({
+              display: 'grid',
+              alignItems: 'center',
+              gridTemplateColumns: { base: '1fr 1fr', smDown: '1fr' },
+              gap: 'medium'
+            })}
+          >
+            <div
+              className={css({
+                order: { base: 0, smDown: 1 }
+              })}
+            >
+              <Typography variant="body1">Los clanes son espacios donde compartir nuestros gustos con otros usuarios, dándonos la oportunidad de organizar proyectos y eventos en los cuales formar parte.</Typography>
+              <Center>
+                <NextLink
+                  className={button()}
+                  href="/clanes"
+                >
+                  Ver Clanes
+                </NextLink>
+
+              </Center>
+            </div>
+            <div
+              className={css({
+                order: { base: 1, smDown: 0 }
+              })}
+            >
+              <NextImage
+                src="/images/Clanes.png"
+                alt="Clanes"
+                width={1200}
+                height={630}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+export default Clanes

src/app/FeedbackConsumer.tsx

@@ -0,0 +1,78 @@
+'use client'
+import IconButton from '@/components/ui/IconButton'
+import Typography from '@/components/ui/Typography'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import { useAppSelector } from '@/hooks/useAppSelector'
+import { removeAlert } from '@/state/feedbackSlice'
+import { css } from '@/styled-system/css'
+import { alert } from '@/styled-system/recipes/alert'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { AnimatePresence, motion } from 'framer-motion'
+import type { FC } from 'react'
+import { createPortal } from 'react-dom'
+
+const FeedbackConsumer: FC = () => {
+  const { alerts } = useAppSelector((state) => state.feedback)
+  const dispatch = useAppDispatch()
+  return (
+    <>
+      {alerts.length > 0 && createPortal(
+        (
+          <AnimatePresence>
+            <motion.div
+              key="alerts"
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'medium',
+                position: 'fixed',
+                bottom: 'medium',
+                left: 'medium',
+                padding: 'medium',
+                zIndex: 'modalBackdrop',
+                width: 'calc(100vw - 32px)',
+                maxWidth: '400px'
+              })}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, y: 0, transition: { duration: 0.3, ease: 'backIn' } }}
+              exit={{ opacity: 0, x: 400, transition: { duration: 0.3, ease: 'backOut' } }}
+            >
+              <AnimatePresence>
+                {alerts.map((currentAlert) => (
+                  <motion.div
+                    key={currentAlert.id}
+                    // This is a workaround for PandaCSS to auto-generate styles and avoid Alerts with non-generated styles. See https://panda-css.com/docs/guides/dynamic-styling#runtime-conditions
+                    className={alert({
+                      severity: currentAlert.severity === 'success' ? 'success' : currentAlert.severity === 'info' ? 'info' : currentAlert.severity === 'warning' ? 'warning' : currentAlert.severity === 'error' ? 'error' : undefined
+                    }).body}
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0, transition: { duration: 0.3, ease: 'backIn' } }}
+                    exit={{ opacity: 0, x: 400, transition: { duration: 0.3, ease: 'backOut' } }}
+                  >
+                    <IconButton
+                      size="small"
+                      className={alert().closeButton}
+                      onClick={() => dispatch(removeAlert(currentAlert.id))}
+                    >
+                      <FontAwesomeIcon icon={faTimes} size="sm" />
+                    </IconButton>
+                    <Typography variant="h3" component="div">
+                      {currentAlert.title}
+                    </Typography>
+                    <Typography variant="body1">
+                      {currentAlert.message}
+                    </Typography>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </motion.div>
+          </AnimatePresence>
+        ),
+        document.body,
+        'alerts'
+      )}
+    </>
+  )
+}
+export default FeedbackConsumer

src/app/Hero.tsx

@@ -0,0 +1,132 @@
+import Typography from '@/components/ui/Typography'
+import { css, cx } from '@/styled-system/css'
+import { Center, Container } from '@/styled-system/jsx'
+import { iconButton } from '@/styled-system/recipes'
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import NextImage from 'next/image'
+import { type FC } from 'react'
+
+const layerCss = css({
+  backgroundPositionY: 'bottom',
+  backgroundPositionX: 'x-start',
+  backgroundRepeat: 'repeat',
+  backgroundSize: 'initial',
+  height: '100vh',
+  width: '100%',
+  willChange: 'background-position-y',
+  animationName: 'bgMotion',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite'
+})
+
+const Hero: FC = () => {
+  return (
+    <section
+      className={cx(layerCss, css({
+        backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer01.png)',
+        marginTop: '-76px',
+        animationDuration: '175s',
+        position: 'relative'
+      }))}
+    >
+      <div
+        className={cx(layerCss, css({
+          backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer02.png)',
+          animationDuration: '150s'
+        }))}
+      >
+        <div
+          className={cx(layerCss, css({
+            backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer03.png)',
+            animationDuration: '125s'
+          }))}
+        >
+          <div
+            className={cx(layerCss, css({
+              backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer04.png)',
+              animationDuration: '100s'
+            }))}
+          >
+            <div
+              className={cx(layerCss, css({
+                backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer05.png)',
+                animationDuration: '75s'
+              }))}
+            >
+              <Center
+                className={cx(layerCss, css({
+                  backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer06.png)',
+                  animationDuration: '50s'
+                }))}
+              >
+                <Container
+                  className={css({
+                    display: 'grid',
+                    gridTemplateColumns: { base: '1fr 1fr', smDown: '1fr' },
+                    alignItems: 'center'
+                  })}
+                >
+                  <div
+                    className={css({
+                      order: { base: 0, smDown: 1 }
+                    })}
+                  >
+                    <Typography
+                      variant="h1"
+                      align="center"
+                    >
+                      EntGamers
+                    </Typography>
+                    <Typography
+                      variant="h2"
+                      align="center"
+                      color="text"
+                    >
+                      Comunidad de y para los gamers
+                    </Typography>
+                  </div>
+                  <div
+                    className={css({
+                      order: { base: 1, smDown: 0 }
+                    })}
+                  >
+                    <NextImage
+                      src="/images/EntGamers.png"
+                      alt="EntGamers"
+                      width={500}
+                      height={500}
+                      priority
+                    />
+                  </div>
+                </Container>
+              </Center>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a
+        href="#clanes"
+        className={cx(iconButton({
+          color: 'primary',
+          size: 'large'
+        }), css({
+          'position': 'absolute',
+          'bottom': '45px',
+          'right': '50%',
+          'animationName': 'bounce',
+          'animationDuration': '1s',
+          'animationIterationCount': 'infinite',
+          'transform': 'translateX(50%)',
+          'zIndex': 1,
+          '&:hover': {
+            animationPlayState: 'paused'
+          }
+        }))}
+      >
+        <FontAwesomeIcon icon={faArrowDown} size="lg" />
+      </a>
+    </section>
+  )
+}
+export default Hero

src/app/SessionConsumer.tsx

@@ -0,0 +1,57 @@
+'use client'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import { useAppSelector } from '@/hooks/useAppSelector'
+import { setClanes, setCurrentUser, setSession, setStatus } from '@/state/sessionSlice'
+import { AppwriteException } from 'appwrite'
+import { getClanes } from 'entgamers-database/frontend/clanes'
+import { getCurrentUser, getSession } from 'entgamers-database/frontend/session'
+import { type FC, useCallback, useEffect } from 'react'
+
+const SessionConsumer: FC = () => {
+  const { status, session, user, clanes } = useAppSelector((state) => state.session)
+  const dispatch = useAppDispatch()
+
+  const ensureSession = useCallback(async () => {
+    try {
+      dispatch(setStatus('loading'))
+      const currentSession = await getSession('current')
+      const currentUser = await getCurrentUser()
+      dispatch(setSession(currentSession))
+      dispatch(setCurrentUser(currentUser))
+    } catch (error) {
+      dispatch(setSession())
+      dispatch(setCurrentUser())
+      throw error
+    } finally {
+      dispatch(setStatus('idle'))
+    }
+  }, [dispatch])
+
+  useEffect(() => {
+    if (status !== 'initializing' || session !== undefined) return
+    ensureSession()
+      .catch((error) => {
+        if (error instanceof AppwriteException) {
+          console.error(error)
+        }
+      })
+  }, [status, session, ensureSession])
+
+  useEffect(() => {
+    if (user !== undefined && clanes === undefined) {
+      getClanes()
+        .then((clanes) => {
+          dispatch(setClanes(clanes))
+        })
+        .catch((error) => {
+          if (error instanceof AppwriteException) {
+            console.error(error)
+          }
+        })
+    } else if (user === undefined && clanes !== undefined) {
+      dispatch(setClanes())
+    }
+  }, [user, clanes, dispatch])
+  return null
+}
+export default SessionConsumer

src/app/Social.tsx

@@ -0,0 +1,75 @@
+import Typography from '@/components/ui/Typography'
+import { css, cx } from '@/styled-system/css'
+import { Center } from '@/styled-system/jsx'
+import { container } from '@/styled-system/patterns'
+import { button, card } from '@/styled-system/recipes'
+import { type FC } from 'react'
+
+const layerCss = css({
+  backgroundPositionY: 'bottom',
+  backgroundPositionX: 'x-start',
+  backgroundRepeat: 'repeat',
+  backgroundSize: 'initial',
+  minHeight: '75vh',
+  width: '100%',
+  willChange: 'background-position-y',
+  animationName: 'bgMotion',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite'
+})
+
+const Social: FC = () => {
+  return (
+    <section
+      className={css({
+        backgroundImage: 'url(/images/backgrounds/SkyNightLayer01.png)',
+        backgroundPositionY: 'center',
+        backgroundPositionX: 'center'
+      })}
+    >
+      <div
+        className={cx(layerCss, css({
+          backgroundImage: 'url(/images/backgrounds/SkyNightLayer02.png)',
+          animationDuration: '150s'
+        }))}
+      >
+        <div
+          className={cx(layerCss, css({
+            backgroundImage: 'url(/images/backgrounds/SkyNightLayer03.png)',
+            animationDuration: '125s'
+          }))}
+        >
+
+          <Center
+            className={cx(layerCss, css({
+              backgroundImage: 'url(/images/backgrounds/SkyNightLayer04.png)',
+              animationDuration: '100s'
+            }))}
+          >
+            <div
+              className={cx(card({ variant: 'glass' }).body, container({}))}
+            >
+              <div
+                className={card({ variant: 'glass' }).content}
+              >
+                <Typography variant="h2" align="center">Redes Sociales</Typography>
+                <Typography variant="body1">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non?
+                </Typography>
+                <Center>
+                  <a
+                    className={button()}
+                    href="/links"
+                  >
+                    Nuestros Links
+                  </a>
+                </Center>
+              </div>
+            </div>
+          </Center>
+        </div>
+      </div>
+    </section>
+  )
+}
+export default Social

src/app/StateProvider.tsx

@@ -0,0 +1,19 @@
+'use client'
+import store from '@/state/store'
+import { type FC, type ReactNode } from 'react'
+import { Provider } from 'react-redux'
+
+export interface StateProviderProps {
+  children: ReactNode
+}
+
+const StateProvider: FC<StateProviderProps> = ({ children }) => {
+  return (
+    <Provider
+      store={store}
+    >
+      {children}
+    </Provider>
+  )
+}
+export default StateProvider

src/app/Team.tsx

@@ -0,0 +1,123 @@
+import { css, cx } from '@/styled-system/css'
+import { Container } from '@/styled-system/jsx'
+import { center } from '@/styled-system/patterns'
+import { button, card, iconButton } from '@/styled-system/recipes'
+import { type TeamMember } from '@/types/User'
+import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import NextImage from 'next/image'
+import NextLink from 'next/link'
+import { type FC } from 'react'
+
+const team: TeamMember[] = [
+  {
+    image: '/images/team/SrJuggernaut.png',
+    name: 'SrJuggernaut',
+    role: 'administrator',
+    description: 'Soy desarrollador web y me gusta jugar videojuegos.',
+    socialNetworks: [
+      { url: 'https://www.facebook.com/SrJuggernaut', label: 'SrJuggernaut Facebook', icon: faFacebook },
+      { url: 'https://twitter.com/SrJuggernaut', label: 'SrJuggernaut Twitter', icon: faTwitter },
+      { url: 'https://youtube.com/juggernautplays', label: 'SrJuggernaut YouTube', icon: faYoutube },
+      { url: 'https://twitch.tv/juggernautplays', label: 'SrJuggernaut Twitch', icon: faTwitch },
+      { url: 'https://www.instagram.com/sr_juggernaut', label: 'SrJuggernaut Instagram', icon: faInstagram },
+      { url: 'https://srjuggernaut.dev/', label: 'SrJuggernaut Website', icon: faGlobe }
+    ]
+  }
+]
+
+const Team: FC = () => {
+  return (
+    <section
+      className={center({
+        minHeight: '75vh',
+        backgroundImage: 'url(/images/backgrounds/MysteriousForest.jpg)'
+      })}
+    >
+
+      <Container>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 'medium',
+            flexWrap: 'wrap'
+          })}
+        >
+          {team.map((member, index) => (
+            <div
+              key={`team-member-${index}`}
+              className={cx(card({ variant: 'retro' }).body, css({
+                maxWidth: '300px',
+                textAlign: 'center'
+              }))}
+            >
+              <div
+                className={cx(card({ variant: 'retro' }).media, center())}
+              >
+                <NextImage
+                  src={member.image}
+                  alt={member.name}
+                  width={120}
+                  height={120}
+                />
+              </div>
+              <div
+                className={card({ variant: 'retro' }).content}
+              >
+                <h3>{member.name}</h3>
+                <p>{member.description}</p>
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: 'small',
+                    flexWrap: 'wrap'
+                  })}
+                >
+                  {member.socialNetworks.map((socialNetwork, index) => (
+                    <a
+                      key={`team-member-${index}-social-network`}
+                      className={iconButton()}
+                      href={socialNetwork.url}
+                    >
+                      <FontAwesomeIcon icon={socialNetwork.icon} />
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+
+        </div>
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-evenly',
+            gap: 'medium',
+            paddingBlock: 'large',
+            width: '100%'
+          })}
+        >
+          <NextLink
+            className={button({ color: 'info' })}
+            href="/equipo"
+          >
+            Ver el equipo completo
+          </NextLink>
+          <NextLink
+            className={button({ color: 'primary' })}
+            href="/equipo/unirse"
+          >
+            Únete al equipo
+          </NextLink>
+        </div>
+      </Container>
+    </section>
+  )
+}
+export default Team

src/app/clanes/page.tsx

@@ -0,0 +1,100 @@
+import Typography from '@/components/ui/Typography'
+import { css } from '@/styled-system/css'
+import { Container } from '@/styled-system/jsx'
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { FC } from 'react'
+
+const ClanesPage: FC = () => {
+  return (
+    <Container>
+      <Typography variant="h1" align="center">Clanes</Typography>
+      <Typography variant="body1">Los clanes son espacios donde compartir nuestros gustos con otros usuarios, dándonos la oportunidad de organizar proyectos y eventos en los cuales formar parte.</Typography>
+      <div
+        className={css({
+          display: 'grid',
+          gridTemplateColumns: { base: '1fr 1fr', smDown: '1fr' },
+          gap: 'medium'
+        })}
+      >
+        <div>
+          <Typography variant="h2">Beneficios de los clanes</Typography>
+          <Typography variant="body1">La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.</Typography>
+          <ul className="fa-ul">
+            <li>
+              <span className="fa-li"><FontAwesomeIcon icon={faChevronRight} /></span>
+              {' '}
+              Espacio en el servidor de Discord.
+            </li>
+            <li>
+              <span className="fa-li"><FontAwesomeIcon icon={faChevronRight} /></span>
+              {' '}
+              Apoyo de la administración con proyectos y eventos.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Apoyo del equipo de moderación.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <Typography variant="h2">Requisitos para formar un clan</Typography>
+          <Typography variant="body1">Todos los clanes deben cumplir con los siguientes requisitos:</Typography>
+          <ul className="fa-ul">
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Tener un encargado.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Fomentar el compañerismo y la comunidad.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Aportar contenido de forma periódica para la comunidad.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Realizar al menos una actividad mensual con los integrantes.
+            </li>
+          </ul>
+        </div>
+      </div>
+      <Typography variant="h2">Clanes activos</Typography>
+      <div
+        className={css({
+          'backgroundColor': 'info',
+          'color': 'info.contrast',
+          'borderRadius': 'medium',
+          'padding': 'medium',
+          'marginBlock': 'medium',
+          '& a': {
+            color: 'info.contrast',
+            fontWeight: 'bold'
+          }
+        })}
+      >
+        Esta sección está en construcción. Puedes ver los clanes activos en nuestro
+        {' '}
+        <a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>
+        .
+      </div>
+    </Container>
+  )
+}
+export default ClanesPage

src/app/cuenta/CuentaTabs.tsx

@@ -0,0 +1,79 @@
+'use client'
+import Button from '@/components/ui/Button'
+import ButtonGroup from '@/components/ui/ButtonGroup'
+import useSession from '@/hooks/useSession'
+import { css } from '@/styled-system/css'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState, type FC } from 'react'
+import UpdateEmail from './UpdateEmail'
+import UpdatePassword from './UpdatePassword'
+import UpdateUserName from './UpdateUserName'
+import UpdateUserPreferences from './UpdateUserPreferences'
+
+type Tab = 'perfil' | 'login'
+
+const CuentaTabs: FC = () => {
+  useSession('/login')
+  const [currentTab, setCurrentTab] = useState<Tab>('perfil')
+
+  return (
+    <>
+      <ButtonGroup
+        fullWidth={true}
+      >
+        <Button
+          fullWidth
+          onClick={() => { setCurrentTab('perfil') }}
+          disabled={currentTab === 'perfil'}
+        >
+          Perfil
+        </Button>
+        <Button
+          fullWidth
+          onClick={() => { setCurrentTab('login') }}
+          disabled={currentTab === 'login'}
+        >
+          Login
+        </Button>
+      </ButtonGroup>
+      <div
+        className={css({
+          overflow: 'hidden',
+          marginTop: 'medium'
+        })}
+      >
+        <AnimatePresence
+          initial={false}
+          mode="wait"
+        >
+          {currentTab === 'login' && (
+            <motion.div
+              transition={{ duration: 0.15, ease: 'easeInOut' }}
+              initial={{ opacity: 0, x: '-100%' }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: '100%' }}
+              key="login"
+            >
+              <UpdateEmail />
+              <UpdatePassword />
+            </motion.div>
+          )}
+          {currentTab === 'perfil' && (
+            <motion.div
+              transition={{ duration: 0.15, ease: 'easeInOut' }}
+              initial={{ opacity: 0, x: '-100%' }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: '100%' }}
+              key="perfil"
+            >
+              <UpdateUserName />
+              <UpdateUserPreferences />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  )
+}
+
+export default CuentaTabs

src/app/cuenta/UpdateEmail.tsx

@@ -0,0 +1,129 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import Input from '@/components/ui/form/Input'
+import PasswordInput from '@/components/ui/form/PasswordInput'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useSession from '@/hooks/useSession'
+import { addAlert } from '@/state/feedbackSlice'
+import { nanoid } from '@reduxjs/toolkit'
+import { AppwriteException } from 'appwrite'
+import { updateEmail } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import { object, string } from 'yup'
+
+interface UpdateEmailData {
+  email: string
+  password: string
+}
+
+const updateEmailSchema = object({
+  email: string().email('El correo electrónico no es válido').required('El correo electrónico es requerido'),
+  password: string().required('La contraseña es requerida')
+})
+
+const UpdateEmail: FC = () => {
+  const { status, session } = useSession('/login')
+  const dispatch = useAppDispatch()
+
+  const formik = useFormik<UpdateEmailData>({
+    initialValues: {
+      email: '',
+      password: ''
+    },
+    onSubmit: async ({ email, password }) => {
+      try {
+        await updateEmail(email, password)
+        dispatch(addAlert({
+          id: nanoid(),
+          title: 'Correo actualizado',
+          message: 'Ahora puedes iniciar sesión',
+          severity: 'success'
+        }))
+      } catch (error) {
+        if (error instanceof AppwriteException) {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: error.message,
+            title: 'Error mientras se actualizaba el correo',
+            severity: 'error'
+          }))
+        } else {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: 'Error desconocido',
+            title: 'Error mientras se actualizaba el correo',
+            severity: 'error'
+          }))
+        }
+      }
+    },
+    validationSchema: updateEmailSchema,
+    validateOnMount: true
+  })
+
+  if (status !== 'idle' || session === undefined) {
+    // TODO: Replace with Skeleton
+    return null
+  }
+
+  return (
+    <>
+      <Typography variant="h2">Cambia tu correo</Typography>
+      <form
+        onSubmit={formik.handleSubmit}
+      >
+        <FormGroup>
+          <label
+            htmlFor="email"
+          >
+            Correo
+          </label>
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            status={formik.touched.email !== undefined && formik.errors.email !== undefined ? 'danger' : undefined}
+          />
+          {formik.touched.email !== undefined && formik.errors.email !== undefined && (
+            <Typography variant="caption" color="danger">{formik.errors.email}</Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <label
+            htmlFor="password"
+          >
+            Contraseña
+          </label>
+          <PasswordInput
+            id="password"
+            name="password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            status={formik.touched.password !== undefined && formik.errors.password !== undefined ? 'danger' : undefined}
+            fullWidth
+          />
+          {formik.touched.password !== undefined && formik.errors.password !== undefined && (
+            <Typography variant="caption" color="danger">{formik.errors.password}</Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <Button
+            type="submit"
+            disabled={formik.isSubmitting || !formik.isValid}
+          >
+            Actualizar contraseña
+          </Button>
+        </FormGroup>
+      </form>
+    </>
+  )
+}
+
+export default UpdateEmail

src/app/cuenta/UpdatePassword.tsx

@@ -0,0 +1,160 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import PasswordInput from '@/components/ui/form/PasswordInput'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useSession from '@/hooks/useSession'
+import { addAlert } from '@/state/feedbackSlice'
+import { nanoid } from '@reduxjs/toolkit'
+import { AppwriteException } from 'appwrite'
+import { updatePassword } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import { object, ref, string } from 'yup'
+
+interface UpdatePasswordData {
+  password: string
+  confirmPassword: string
+  currentPassword: string
+}
+
+const updatePasswordSchema = object({
+  password: string()
+    .min(6, 'La contraseña debe tener al menos 6 caracteres')
+    .matches(/[a-z]/, 'La contraseña debe tener al menos una letra minúscula')
+    .matches(/[A-Z]/, 'La contraseña debe tener al menos una letra mayúscula')
+    .matches(/[0-9]/, 'La contraseña debe tener al menos un número')
+    .required('La contraseña es requerida'),
+  confirmPassword: string().oneOf([ref('password')], 'Las contraseñas no coinciden').required('La confirmación de la contraseña es requerida'),
+  currentPassword: string().required('La contraseña actual es requerida')
+})
+
+const UpdatePassword: FC = () => {
+  const { status, session } = useSession('/login')
+  const dispatch = useAppDispatch()
+
+  const formik = useFormik<UpdatePasswordData>({
+    initialValues: {
+      password: '',
+      confirmPassword: '',
+      currentPassword: ''
+    },
+    onSubmit: async ({ password, currentPassword }) => {
+      try {
+        await updatePassword(password, currentPassword)
+        dispatch(addAlert({
+          id: nanoid(),
+          title: 'Contrasenya actualizada',
+          message: 'Ahora puedes iniciar sesión',
+          severity: 'success'
+        }))
+      } catch (error) {
+        if (error instanceof AppwriteException) {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: error.message,
+            title: 'Error mientras se actualizaba la contraseña',
+            severity: 'error'
+          }))
+        } else {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: 'Error desconocido',
+            title: 'Error mientras se actualizaba la contraseña',
+            severity: 'error'
+          }))
+        }
+      }
+    },
+    validationSchema: updatePasswordSchema,
+    validateOnMount: true
+  })
+
+  if (status !== 'idle' || session === undefined) {
+    // TODO: Replace with Skeleton
+    return null
+  }
+
+  return (
+    <>
+      <Typography variant="h2">Actualizar contraseña</Typography>
+      <form
+        onSubmit={formik.handleSubmit}
+      >
+        <FormGroup>
+          <label
+            htmlFor="password"
+          >
+            Nueva contraseña
+          </label>
+          <PasswordInput
+            id="password"
+            name="password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            status={formik.touched.password !== undefined && formik.errors.password !== undefined ? 'danger' : undefined}
+            fullWidth
+          />
+          {formik.touched.password !== undefined && formik.errors.password !== undefined && (
+            <Typography variant="caption" color="danger">
+              {formik.errors.password}
+            </Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <label
+            htmlFor="confirmPassword"
+          >
+            Confirmar nueva contraseña
+          </label>
+          <PasswordInput
+            id="confirmPassword"
+            name="confirmPassword"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.confirmPassword}
+            status={formik.touched.confirmPassword !== undefined && formik.errors.confirmPassword !== undefined ? 'danger' : undefined}
+            fullWidth
+          />
+          {formik.touched.confirmPassword !== undefined && formik.errors.confirmPassword !== undefined && (
+            <Typography variant="caption" color="danger">
+              {formik.errors.confirmPassword}
+            </Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <label
+            htmlFor="currentPassword"
+          >
+            Contraseña actual
+          </label>
+          <PasswordInput
+            id="currentPassword"
+            name="currentPassword"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.currentPassword}
+            status={formik.touched.currentPassword !== undefined && formik.errors.currentPassword !== undefined ? 'danger' : undefined}
+            fullWidth
+          />
+          {formik.touched.currentPassword !== undefined && formik.errors.currentPassword !== undefined && (
+            <Typography variant="caption" color="danger">
+              {formik.errors.currentPassword}
+            </Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <Button
+            type="submit"
+            disabled={formik.isSubmitting || !formik.isValid}
+          >
+            Actualizar contraseña
+          </Button>
+        </FormGroup>
+      </form>
+    </>
+  )
+}
+export default UpdatePassword

src/app/cuenta/UpdateUserName.tsx

@@ -0,0 +1,114 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import Input from '@/components/ui/form/Input'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useSession from '@/hooks/useSession'
+import { addAlert } from '@/state/feedbackSlice'
+import { nanoid } from '@reduxjs/toolkit'
+import { AppwriteException } from 'appwrite'
+import { updateName } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import { useEffect, type FC } from 'react'
+import { object, string } from 'yup'
+
+interface UpdateUserNameData {
+  name: string
+}
+
+const UpdateUserNameSchema = object({
+  name: string().required('El nombre es requerido')
+})
+
+const UpdateUserName: FC = () => {
+  const { status, session, user } = useSession('/login')
+  const dispatch = useAppDispatch()
+
+  const formik = useFormik<UpdateUserNameData>({
+    initialValues: {
+      name: ''
+    },
+    onSubmit: async ({ name }) => {
+      try {
+        await updateName(name)
+        dispatch(addAlert({
+          id: nanoid(),
+          title: 'Nombre actualizado',
+          message: 'Se actualizo correctamente el nombre',
+          severity: 'success'
+        }))
+      } catch (error) {
+        if (error instanceof AppwriteException) {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: error.message,
+            title: 'Error mientras se actualizaba el nombre',
+            severity: 'error'
+          }))
+        } else {
+          dispatch(addAlert({
+            id: nanoid(),
+            message: 'Error desconocido',
+            title: 'Error mientras se actualizaba el nombre',
+            severity: 'error'
+          }))
+        }
+      }
+    },
+    validationSchema: UpdateUserNameSchema,
+    validateOnMount: true,
+    initialTouched: { name: true }
+  })
+
+  useEffect(() => {
+    if (status === 'idle' && session !== undefined && user !== undefined) {
+      formik.setValues({
+        name: user?.name ?? ''
+      })
+        .catch(console.error)
+    }
+  }, [status, session, user, formik])
+
+  if (status !== 'idle' || session === undefined) {
+    // TODO: Replace with Skeleton
+    return null
+  }
+  return (
+    <>
+      <Typography variant="h2">Cambia tu nombre de usuario</Typography>
+      <form
+        onSubmit={formik.handleSubmit}
+      >
+        <FormGroup>
+          <label
+            htmlFor="name"
+          >
+            Nombre de usuario
+          </label>
+          <Input
+            id="name"
+            name="name"
+            type="text"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.name}
+            status={formik.touched.name !== undefined && formik.errors.name !== undefined ? 'danger' : undefined}
+          />
+          {formik.touched.name !== undefined && formik.errors.name !== undefined && (
+            <Typography variant="caption" color="danger">{formik.errors.name}</Typography>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <Button
+            type="submit"
+            disabled={formik.isSubmitting || !formik.isValid}
+          >
+            Actualizar nombre de usuario
+          </Button>
+        </FormGroup>
+      </form>
+    </>
+  )
+}
+export default UpdateUserName

src/app/cuenta/UpdateUserPreferences.tsx

@@ -0,0 +1,111 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import TextArea from '@/components/ui/form/TextArea'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useManageError from '@/hooks/useManageError'
+import useSession from '@/hooks/useSession'
+import { setCurrentUser } from '@/state/sessionSlice'
+import { updatePreferences, type UserPreferences } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import { useEffect, type FC } from 'react'
+import { array, object, string, type ObjectSchema } from 'yup'
+
+const socialLinksSchema: ObjectSchema<UserPreferences> = object({
+  bio: string().max(280, 'La descripción debe tener menos de 280 caracteres'),
+  profilePicture: string().url('La imagen debe ser una URL'),
+  socialLinks: array().of(
+    object({
+      label: string().required('La etiqueta es requerida'),
+      url: string().url('La URL debe ser una URL').required('La URL es requerida')
+    })
+  ).min(0)
+})
+
+const UpdateUserPreferences: FC = () => {
+  const { status, session, user } = useSession('/login')
+  const dispatch = useAppDispatch()
+  const { manageError } = useManageError()
+
+  const formik = useFormik<UserPreferences>({
+    initialValues: {
+      bio: '',
+      profilePicture: '',
+      socialLinks: []
+    },
+    onSubmit: async ({ bio, profilePicture, socialLinks }) => {
+      try {
+        const updatedUserWithPreferences = await updatePreferences({ bio, profilePicture, socialLinks })
+        dispatch(setCurrentUser(updatedUserWithPreferences))
+      } catch (error) {
+        manageError(error, 'Error mientras se actualizaba las preferencias', ' Error desconocido mientras se actualizaba las preferencias', 'error')
+      }
+    },
+    validationSchema: socialLinksSchema,
+    validateOnMount: true
+  })
+
+  useEffect(() => {
+    if (status === 'idle' && session !== undefined) {
+      formik.setValues({
+        bio: user?.prefs.bio ?? '',
+        profilePicture: user?.prefs.profilePicture ?? '',
+        socialLinks: user?.prefs.socialLinks ?? []
+      })
+        .catch(console.error)
+    }
+  }, [status, user, formik, session])
+
+  if (status !== 'idle' || session === undefined) {
+    // TODO: Replace with Skeleton
+    return null
+  }
+
+  return (
+    <>
+      <Typography
+        variant="h3"
+      >
+        Preferencias
+      </Typography>
+      <form
+        onSubmit={formik.handleSubmit}
+      >
+        <FormGroup>
+          <label
+            htmlFor="bio"
+          >
+            Biografia
+          </label>
+          <TextArea
+            id="bio"
+            name="bio"
+            value={formik.values.bio}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            disabled={formik.isSubmitting}
+            status={formik.touched.bio !== undefined && formik.errors.bio !== undefined ? 'danger' : undefined}
+          />
+          {formik.touched.bio !== undefined && formik.errors.bio !== undefined && (
+            <Typography variant="caption" color="danger">
+              {formik.errors.bio}
+            </Typography>
+          )}
+        </FormGroup>
+        {/* TODO: Add Profile Picture and Social Links fields */}
+        <FormGroup>
+          <Button
+            type="submit"
+            disabled={formik.isSubmitting || !formik.isValid}
+            fullWidth
+          >
+            Actualizar
+          </Button>
+        </FormGroup>
+      </form>
+    </>
+  )
+}
+
+export default UpdateUserPreferences

src/app/cuenta/page.tsx

@@ -0,0 +1,17 @@
+import Typography from '@/components/ui/Typography'
+import { Container } from '@/styled-system/jsx'
+import type { FC } from 'react'
+import CuentaTabs from './CuentaTabs'
+
+const CuentaPage: FC = () => {
+  return (
+    <Container>
+      <Typography variant="h1" align="center">Cuenta</Typography>
+      <Typography variant="body1">
+        Desde aquí puedes administrar las preferencias y ajustes de tu cuenta.
+      </Typography>
+      <CuentaTabs />
+    </Container>
+  )
+}
+export default CuentaPage

src/app/dashboard/_components/DashboardTabs.tsx

@@ -0,0 +1,73 @@
+'use client'
+import TeamApplications from '@/app/dashboard/_components/TeamApplications'
+import Button from '@/components/ui/Button'
+import ButtonGroup from '@/components/ui/ButtonGroup'
+import Typography from '@/components/ui/Typography'
+import useSession from '@/hooks/useSession'
+import { css } from '@/styled-system/css'
+import { ADMIN_CLAN_ID } from 'entgamers-database/frontend/clanes/administrative'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState, type FC } from 'react'
+
+type Tab = undefined | 'teamApplications'
+
+const DashboardTabs: FC = () => {
+  const { clanes, belongToClan } = useSession('/login')
+
+  const [currentTab, setCurrentTab] = useState<Tab>(undefined)
+
+  return (
+    <>
+      {clanes !== undefined && (
+        <ButtonGroup
+          fullWidth
+        >
+          <Button fullWidth onClick={() => { setCurrentTab(undefined) }} disabled={currentTab === undefined}>
+            Panel
+          </Button>
+          {belongToClan(ADMIN_CLAN_ID) && (
+            <Button fullWidth onClick={() => { setCurrentTab('teamApplications') }} disabled={currentTab === 'teamApplications'}>
+              Aplicaciones
+            </Button>
+          )}
+        </ButtonGroup>
+      )}
+      <div
+        className={css({
+          overflow: 'hidden',
+          marginTop: 'medium'
+        })}
+      >
+        <AnimatePresence
+          initial={false}
+          mode="wait"
+        >
+          {currentTab === undefined && (
+            <motion.div
+              transition={{ duration: 0.15, ease: 'easeInOut' }}
+              initial={{ opacity: 0, x: '-100%' }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: '100%' }}
+              key="dashboard"
+            >
+              <Typography variant="body1">Selecciona una de las opciones de arriba para comenzar.</Typography>
+            </motion.div>
+          )}
+          {currentTab === 'teamApplications' && (
+            <motion.div
+              transition={{ duration: 0.15, ease: 'easeInOut' }}
+              initial={{ opacity: 0, x: '-100%' }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: '100%' }}
+              key="teamApplications"
+            >
+              <TeamApplications />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  )
+}
+
+export default DashboardTabs

src/app/dashboard/_components/TeamApplications.tsx

@@ -0,0 +1,14 @@
+import ApplicationsList from '@/app/dashboard/_components/teamApplications/ApplicationsList'
+import Typography from '@/components/ui/Typography'
+import { type FC } from 'react'
+
+const TeamApplications: FC = () => {
+  return (
+    <>
+      <Typography variant="h2">Aplicaciones</Typography>
+      <ApplicationsList />
+    </>
+  )
+}
+
+export default TeamApplications

src/app/dashboard/_components/teamApplications/ApplicationsFilter.tsx

@@ -0,0 +1,48 @@
+import DebouncedInput from '@/components/ui/form/DebouncedInput'
+import { type Column } from '@tanstack/react-table'
+import { type TeamApplication, type TeamApplicationRole, type TeamApplicationStatus } from 'entgamers-database/types/teamApplications'
+import { type FC } from 'react'
+import RoleSelector from './RoleSelector'
+import StatusSelector from './StatusSelector'
+
+export interface ApplicationsFilterProps {
+  column: Column<TeamApplication, unknown>
+}
+
+const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
+  const columnFilterValue = column.getFilterValue()
+  switch (column.id) {
+    case 'status':
+      return (
+        <StatusSelector
+          id={`${column.id}-status-filter`}
+          value={columnFilterValue as TeamApplicationStatus}
+          onChange={(value) => { column.setFilterValue(value) }}
+          allowEmpty
+        />
+      )
+    case 'role':
+      return (
+        <RoleSelector
+          id={`${column.id}-role-filter`}
+          value={columnFilterValue as TeamApplicationRole}
+          onChange={(value) => { column.setFilterValue(value) }}
+          allowEmpty
+        />
+      )
+    default:
+      return (
+        <DebouncedInput
+          fullWidth
+          type="text"
+          value={(columnFilterValue ?? '') as string}
+          onChange={(value) => { column.setFilterValue(value) }}
+          placeholder="Buscar..."
+          className="w-36 border shadow rounded"
+          list={column.id + 'list'}
+        />
+      )
+  }
+}
+
+export default ApplicationsFilter

src/app/dashboard/_components/teamApplications/ApplicationsList.tsx

@@ -0,0 +1,280 @@
+import IconButton from '@/components/ui/IconButton'
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table'
+import useManageError from '@/hooks/useManageError'
+import { css } from '@/styled-system/css'
+import { formatDate } from '@/utilities/date'
+import type { TeamApplication, TeamApplicationList } from '@/utilities/teamApplication'
+import { faChevronLeft, faChevronRight, faSort, faSortAsc, faSortDesc } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, type ColumnFiltersState, type PaginationState, type RowData, type SortingState } from '@tanstack/react-table'
+import { getAllTeamApplications, updateTeamApplication } from 'entgamers-database/frontend/database/teamApplications'
+import { Query } from 'entgamers-database/lib/appwrite'
+import { useEffect, useState, type FC } from 'react'
+import ApplicationsFilter from './ApplicationsFilter'
+import StatusUpdater from './StatusUpdater'
+
+declare module '@tanstack/table-core' {
+  interface TableMeta<TData extends RowData> {
+    updateRow: (id: string, value: Partial<TData>) => Promise<void>
+  }
+}
+
+const columnHelper = createColumnHelper<TeamApplication>()
+
+const columns = [
+  columnHelper.accessor('$id', {
+    header: 'ID',
+    enableColumnFilter: false
+  }),
+  columnHelper.accessor('status', {
+    header: 'Estado',
+    cell: StatusUpdater,
+    getUniqueValues() {
+      return ['Pending', 'Accepted', 'Rejected']
+    }
+  }),
+  columnHelper.accessor('role', {
+    header: 'Rol'
+  }),
+  columnHelper.accessor('name', {
+    header: 'Nombre'
+  }),
+  columnHelper.accessor('message', {
+    header: 'Mensaje',
+    minSize: 450
+  }),
+  columnHelper.accessor('email', {
+    header: 'Correo'
+  }),
+  columnHelper.accessor('discord', {
+    header: 'Discord'
+  }),
+  columnHelper.accessor('$createdAt', {
+    header: 'Creado',
+    enableColumnFilter: false,
+    cell: (info) => {
+      return formatDate(new Date(info.getValue()))
+    }
+  }),
+  columnHelper.accessor('$updatedAt', {
+    header: 'Actualizado',
+    enableColumnFilter: false,
+    cell: (info) => {
+      return formatDate(new Date(info.getValue()))
+    }
+  })
+]
+
+const ApplicationsList: FC = () => {
+  const { manageError } = useManageError()
+  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 })
+  const [sorting, setSorting] = useState<SortingState>([{ id: '$createdAt', desc: true }])
+  const [applications, setApplications] = useState<TeamApplicationList>({ total: 0, documents: [] })
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([{ id: 'status', value: 'Pending' }])
+
+  const table = useReactTable({
+    data: applications.documents,
+    columns,
+    initialState: {
+      columnVisibility: {
+        $id: false,
+        email: false
+      }
+    },
+    state: {
+      pagination,
+      sorting,
+      columnFilters
+    },
+    meta: {
+      updateRow: async (id: string, value: Partial<TeamApplication>) => {
+        const updatedTeamApplication = await updateTeamApplication(id, value)
+        const newApplications = applications.documents.map((application) => application.$id === updatedTeamApplication.$id ? updatedTeamApplication : application)
+        setApplications({ total: applications.total, documents: newApplications })
+      }
+    },
+    manualPagination: true,
+    rowCount: applications.total,
+    onPaginationChange: setPagination,
+    enableSorting: true,
+    manualSorting: true,
+    onSortingChange: setSorting,
+    manualFiltering: true,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel()
+  })
+
+  useEffect(() => {
+    const query: string[] = [
+      Query.limit(pagination.pageSize),
+      Query.offset(pagination.pageIndex * pagination.pageSize)
+    ]
+    if (sorting.length > 0) {
+      const sort: string = sorting[0].desc ? Query.orderDesc(sorting[0].id) : Query.orderAsc(sorting[0].id)
+      query.push(sort)
+    }
+    if (columnFilters.length > 0) {
+      const filter: string[] = columnFilters.map((columnFilter) => {
+        return Query.contains(columnFilter.id, columnFilter.value as string)
+      })
+      query.push(...filter)
+    }
+    getAllTeamApplications(query)
+      .then((applicationList) => { setApplications(applicationList) })
+      .catch((error) => {
+        if (error instanceof Error && error.name === 'AbortError') return
+        manageError(error, 'Error al obtener las aplicaciones', 'Error desconocido al obtener las aplicaciones', 'error')
+      })
+  }, [pagination, sorting, columnFilters, manageError])
+
+  // TODO: Better UI Controls for: column visibility. Quantity selector.
+  return (
+    <>
+      <div
+        className={css({
+          display: 'flex',
+          gap: 'small',
+          marginBottom: 'small'
+        })}
+      >
+        {table.getAllLeafColumns().map((column) => (
+          <div key={column.id}>
+            <label htmlFor={`${column.id}-view`}>
+              <input
+                type="checkbox"
+                id={`${column.id}-view`}
+                checked={column.getIsVisible()}
+                onChange={column.getToggleVisibilityHandler()}
+              />
+              {' '}
+              {column.columnDef.header?.toString() ?? column.id}
+            </label>
+          </div>
+        ))}
+      </div>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHeadCell
+                    key={header.id}
+                    className={css({
+                      'verticalAlign': 'top',
+                      'position': 'relative',
+                      '&:hover > [data-is-resizing]': {
+                        backgroundColor: 'border'
+                      }
+                    })}
+                    style={{ minWidth: header.getSize() }}
+                  >
+                    <div
+                      className={css({
+                        display: 'flex',
+                        flexDirection: 'column'
+                      })}
+                    >
+                      <div
+                        className={css({
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          gap: 'small'
+                        })}
+                      >
+                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }
+                        {header.column.getCanSort() && (
+                          <IconButton
+                            size="small"
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            <FontAwesomeIcon icon={header.column.getIsSorted() === 'asc' ? faSortAsc : header.column.getIsSorted() === 'desc' ? faSortDesc : faSort} size="sm" />
+                          </IconButton>
+                        )}
+                      </div>
+                      {header.column.getCanFilter()
+                        ? (
+                          <ApplicationsFilter column={header.column} />
+                        )
+                        : null}
+                    </div>
+                    <button
+                      type="button"
+                      className={css({
+                        'position': 'absolute',
+                        'top': 0,
+                        'right': 0,
+                        'height': '100%',
+                        'width': '5px',
+                        'cursor': 'col-resize',
+                        'userSelect': 'none',
+                        'touchAction': 'none',
+                        '&:hover': {
+                          backgroundColor: 'border'
+                        },
+                        '&[data-is-resizing=true]': {
+                          backgroundColor: 'primary'
+                        }
+                      })}
+                      style={{
+                        transform: `translateX(${1 * (table.getState().columnSizingInfo
+                          .deltaOffset ?? 0)}px)`
+                      }}
+                      data-is-resizing={header.column.getIsResizing()}
+                      onDoubleClick={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      onMouseDown={header.getResizeHandler()}
+                    />
+                  </TableHeadCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableHead>
+          <TableBody>
+            {table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div
+        className={css({
+          display: 'flex',
+          gap: 'small',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingBlock: 'medium'
+        })}
+      >
+        <IconButton
+          onClick={() => { table.previousPage() }}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </IconButton>
+        Pagina
+        {' '}
+        {table.getState().pagination.pageIndex + 1}
+        {' '}
+        de
+        {' '}
+        {table.getPageCount()}
+        <IconButton
+          onClick={() => { table.nextPage() }}
+          disabled={!table.getCanNextPage()}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </IconButton>
+      </div>
+    </>
+  )
+}
+
+export default ApplicationsList

src/app/dashboard/_components/teamApplications/RoleSelector.tsx

@@ -0,0 +1,46 @@
+import { css } from '@/styled-system/css'
+import { type TeamApplicationRole } from 'entgamers-database/types/teamApplications'
+import { type FC } from 'react'
+
+export interface RoleSelectorProps {
+  id: string
+  value: TeamApplicationRole
+  onChange: (role: TeamApplicationRole) => void
+  allowEmpty?: boolean
+}
+
+const RoleSelector: FC<RoleSelectorProps> = ({ id, value, onChange, allowEmpty }) => {
+  /* TODO: Change for Select UI Component when it's ready */
+  return (
+    <select
+      id={`${id}-status`}
+      className={css({
+        'width': '100%',
+        'border': 'none',
+        'background': 'transparent',
+        'color': 'inherit',
+        'outline': 'none',
+        'cursor': 'pointer',
+        'fontSize': 'inherit',
+        'fontWeight': 'inherit',
+        'lineHeight': 'inherit',
+        'padding': '0',
+        'borderRadius': '0',
+        '&:focus': {
+          outline: 'none'
+        }
+      })}
+      value={value}
+      onChange={(event) => {
+        onChange(event.target.value as TeamApplicationRole)
+      }}
+    >
+      {allowEmpty === true && <option value="">Todos</option>}
+      <option value="Admin">Administrador</option>
+      <option value="Collaborator">Colaborador</option>
+      <option value="Moderator">Moderador</option>
+    </select>
+  )
+}
+
+export default RoleSelector

src/app/dashboard/_components/teamApplications/StatusSelector.tsx

@@ -0,0 +1,46 @@
+import { css } from '@/styled-system/css'
+import { type TeamApplicationStatus } from 'entgamers-database/types/teamApplications'
+import { type FC } from 'react'
+
+export interface StatusSelectorProps {
+  id: string
+  value: TeamApplicationStatus
+  onChange: (status: TeamApplicationStatus) => void
+  allowEmpty?: boolean
+}
+
+const StatusSelector: FC<StatusSelectorProps> = ({ id, value, onChange, allowEmpty }) => {
+  /* TODO: Change for Select UI Component when it's ready */
+  return (
+    <select
+      id={`${id}-status`}
+      className={css({
+        'width': '100%',
+        'border': 'none',
+        'background': 'transparent',
+        'color': 'inherit',
+        'outline': 'none',
+        'cursor': 'pointer',
+        'fontSize': 'inherit',
+        'fontWeight': 'inherit',
+        'lineHeight': 'inherit',
+        'padding': '0',
+        'borderRadius': '0',
+        '&:focus': {
+          outline: 'none'
+        }
+      })}
+      value={value}
+      onChange={(event) => {
+        onChange(event.target.value as TeamApplicationStatus)
+      }}
+    >
+      {allowEmpty === true && <option value="">Todos</option>}
+      <option value="Pending">Pendiente</option>
+      <option value="Accepted">Aceptado</option>
+      <option value="Rejected">Rechazado</option>
+    </select>
+  )
+}
+
+export default StatusSelector

src/app/dashboard/_components/teamApplications/StatusUpdater.tsx

@@ -0,0 +1,21 @@
+import { type CellContext } from '@tanstack/react-table'
+import { type TeamApplication, type TeamApplicationStatus } from 'entgamers-database/types/teamApplications'
+import { type FC } from 'react'
+import StatusSelector from './StatusSelector'
+
+const StatusUpdater: FC<CellContext<TeamApplication, TeamApplicationStatus>> = ({ cell: { id, row }, table }) => {
+  return (
+    <>
+      <StatusSelector
+        id={`${id}-status`}
+        value={row.original.status}
+        onChange={(status) => {
+          table.options.meta?.updateRow(row.original.$id, { status })
+            .catch(console.error)
+        }}
+      />
+    </>
+  )
+}
+
+export default StatusUpdater

src/app/dashboard/page.tsx

@@ -0,0 +1,15 @@
+import Typography from '@/components/ui/Typography'
+import { Container } from '@/styled-system/jsx'
+import { type FC } from 'react'
+import DashboardTabs from './_components/DashboardTabs'
+
+const page: FC = () => {
+  return (
+    <Container>
+      <Typography variant="h1" align="center">Panel de control</Typography>
+      <DashboardTabs />
+    </Container>
+  )
+}
+
+export default page

src/app/equipo/page.tsx

@@ -0,0 +1,234 @@
+import Typography from '@/components/ui/Typography'
+import { css, cx } from '@/styled-system/css'
+import { Container } from '@/styled-system/jsx'
+import { center } from '@/styled-system/patterns'
+import { button, card } from '@/styled-system/recipes'
+import { getClanMembers } from 'entgamers-database/backend/clanes'
+import { getUser } from 'entgamers-database/backend/users'
+import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamers-database/lib/env'
+import { type UserList } from 'entgamers-database/types/user'
+import NextImage from 'next/image'
+import NextLink from 'next/link'
+import { type Models } from 'node-appwrite'
+import { type FC } from 'react'
+
+interface GetTeamsResponse {
+  admins: UserList & { id: string }
+  moderators: UserList & { id: string }
+  collaborators: UserList & { id: string }
+}
+
+const getTeams = async (): Promise<GetTeamsResponse> => {
+  // await ensureAdministrativeClans()
+
+  const adminMembers: Models.MembershipList = await getClanMembers(ADMIN_CLAN_ID)
+  const moderatorMembers: Models.MembershipList = await getClanMembers(MODERATOR_CLAN_ID)
+  const collaboratorMembers: Models.MembershipList = await getClanMembers(COLLABORATOR_CLAN_ID)
+
+  const adminsPromises = adminMembers.memberships.map(async (membership) => await getUser(membership.userId))
+  const moderatorsPromises = moderatorMembers.memberships.map(async (membership) => await getUser(membership.userId))
+  const collaboratorsPromises = collaboratorMembers.memberships.map(async (membership) => await getUser(membership.userId))
+
+  const [admins, moderators, collaborators] = await Promise.all([
+    Promise.all(adminsPromises), Promise.all(moderatorsPromises), Promise.all(collaboratorsPromises)
+  ])
+
+  return { admins: { id: ADMIN_CLAN_ID, total: admins.length, users: admins }, moderators: { id: MODERATOR_CLAN_ID, total: moderators.length, users: moderators }, collaborators: { id: COLLABORATOR_CLAN_ID, total: collaborators.length, users: collaborators } }
+}
+
+const EquipoPage: FC = async () => {
+  const { admins, moderators, collaborators } = await getTeams()
+  return (
+    <Container>
+      <Typography variant="h1" align="center">Equipo</Typography>
+      <Typography variant="body1">
+        El equipo de EntGamers está formado por personas que se dedican a la administración de la comunidad, a la organización de eventos y a la creación de contenido. EntGamers siempre intenta recompensar a sus miembros más activos, por lo que si quieres formar parte de nuestro equipo, ¡no dudes en contactar con nosotros!
+      </Typography>
+      <Typography variant="h2" align="center">Administradores</Typography>
+      <Typography variant="body1">
+        Los administradores son quienes se encargan de que todo funcione como es debido en la comunidad, desde la moderación de los grupos hasta la organización de eventos.
+      </Typography>
+      {admins.total >= 1
+        ? (
+          <Container
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'medium',
+              flexWrap: 'wrap',
+              padding: 'medium',
+              width: '100%'
+            })}
+          >
+            {admins.users.map((user, index) => (
+              <div
+                key={`admin-${index}`}
+                className={cx(card({ variant: 'retro' }).body, css({
+                  maxWidth: '300px',
+                  textAlign: 'center'
+                }))}
+              >
+                <div
+                  className={cx(card({ variant: 'retro' }).media, center())}
+                >
+                  <NextImage
+                    src={user.prefs.profilePicture !== undefined && user.prefs.profilePicture.trim() !== '' ? user.prefs.profilePicture.trim() : '/images/EntGamers.png'}
+                    alt={user.name !== '' ? user.name : `Usuario ${index + 1} avatar`}
+                    width={120}
+                    height={120}
+                  />
+                </div>
+                <div
+                  className={card({ variant: 'retro' }).content}
+                >
+                  <Typography variant="h3" align="center">{user.name !== '' ? user.name : `Usuario ${index + 1}`}</Typography>
+                  {user.prefs.bio !== undefined && user.prefs.bio !== '' && (
+                    <Typography variant="body1">{user.prefs.bio}</Typography>
+                  )}
+                </div>
+              </div>
+            ))}
+          </Container>
+        )
+        : (
+          <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay administradores, pero en EntGamers siempre estamos estamos buscando gente que quiera organizar cosas para la comunidad, puedes contactarnos para formar parte de nuestro equipo haciendo click en el siguiente enlace.
+          </Typography>
+        )}
+      <div className={center()}>
+        <NextLink
+          className={button({ color: 'info' })}
+          href={`/equipo/unirse?role=${ADMIN_CLAN_ID}`}
+        >
+          ¡Quiero ser Administrador!
+        </NextLink>
+      </div>
+      <Typography variant="h2" align="center">Moderadores</Typography>
+      <Typography variant="body1">
+        Los moderadores son los encargados de mantener el orden en los grupos de la comunidad, así como de ayudar a los usuarios a resolver sus dudas.
+      </Typography>
+      {moderators.total >= 1
+        ? (
+          <Container
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'medium',
+              flexWrap: 'wrap',
+              padding: 'medium',
+              width: '100%'
+            })}
+          >
+            {moderators.users.map((user, index) => (
+              <div
+                key={`moderator-${index}`}
+                className={cx(card({ variant: 'retro' }).body, css({
+                  maxWidth: '300px',
+                  textAlign: 'center'
+                }))}
+              >
+                <div
+                  className={cx(card({ variant: 'retro' }).media, center())}
+                >
+                  <NextImage
+                    src={user.prefs.profilePicture !== undefined && user.prefs.profilePicture.trim() !== '' ? user.prefs.profilePicture.trim() : '/images/EntGamers.png'}
+                    alt={user.name !== '' ? user.name : `Usuario ${index + 1} avatar`}
+                    width={120}
+                    height={120}
+                  />
+                </div>
+                <div
+                  className={card({ variant: 'retro' }).content}
+                >
+                  <Typography variant="h3" align="center">{user.name !== '' ? user.name : `Usuario ${index + 1}`}</Typography>
+                  {user.prefs.bio !== undefined && user.prefs.bio !== '' && (
+                    <Typography variant="body1">{user.prefs.bio}</Typography>
+                  )}
+                </div>
+              </div>
+            ))}
+          </Container>
+        )
+        : (
+          <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay moderadores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser moderador, puedes hacer click en el botón de abajo.
+          </Typography>
+        )}
+      <div className={center()}>
+        <NextLink
+          className={button({ color: 'info' })}
+          href={`/equipo/unirse?role=${moderators.id}`}
+        >
+          ¡Quiero ser moderador!
+        </NextLink>
+      </div>
+      <Typography variant="h2" align="center">Colaboradores</Typography>
+      <Typography variant="body1">
+        Los colaboradores son los encargados de crear contenido para la comunidad, como artículos, tutoriales, vídeos, eventos etc.
+      </Typography>
+      {collaborators.total >= 1
+        ? (
+          <Container
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 'medium',
+              flexWrap: 'wrap',
+              padding: 'medium',
+              width: '100%'
+            })}
+          >
+            {collaborators.users.map((user, index) => (
+              <div
+                key={`collaborator-${index}`}
+                className={cx(card({ variant: 'retro' }).body, css({
+                  maxWidth: '300px',
+                  textAlign: 'center'
+                }))}
+              >
+                <div
+                  className={cx(card({ variant: 'retro' }).media, center())}
+                >
+                  <NextImage
+                    src={user.prefs.profilePicture !== undefined && user.prefs.profilePicture.trim() !== '' ? user.prefs.profilePicture.trim() : '/images/EntGamers.png'}
+                    alt={user.name !== '' ? user.name : `Usuario ${index + 1} avatar`}
+                    width={120}
+                    height={120}
+                  />
+                </div>
+                <div
+                  className={card({ variant: 'retro' }).content}
+                >
+                  <Typography variant="h3" align="center">{user.name !== '' ? user.name : `Usuario ${index + 1}`}</Typography>
+                  {user.prefs.bio !== undefined && user.prefs.bio !== '' && (
+                    <Typography variant="body1">{user.prefs.bio}</Typography>
+                  )}
+                </div>
+              </div>
+            ))}
+          </Container>
+        )
+        : (
+          <Typography variant="body2" color="info">
+            Ups, parece que ahora mismo no hay colaboradores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser colaborador, puedes hacer click en el botón de abajo.
+          </Typography>
+        )}
+      <div className={center()}>
+        <NextLink
+          className={button({ color: 'info' })}
+          href={`/equipo/unirse?role=${collaborators.id}`}
+        >
+          ¡Quiero ser colaborador!
+        </NextLink>
+      </div>
+    </Container>
+  )
+}
+
+export default EquipoPage

src/app/equipo/unirse/ApplyForm.tsx

@@ -0,0 +1,409 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import Input from '@/components/ui/form/Input'
+import TextArea from '@/components/ui/form/TextArea'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useManageError from '@/hooks/useManageError'
+import { addAlert } from '@/state/feedbackSlice'
+import { css } from '@/styled-system/css'
+import { teamApplicationDataSchema } from '@/utilities/teamApplication'
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
+import { nanoid } from '@reduxjs/toolkit'
+import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamers-database/frontend/clanes/administrative'
+import { createTeamApplication, type TeamApplicationData } from 'entgamers-database/frontend/database/teamApplications'
+import { useFormik } from 'formik'
+import { AnimatePresence, motion } from 'framer-motion'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { useEffect, type FC } from 'react'
+
+const ApplyForm: FC = () => {
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+  const router = useRouter()
+  const { manageError } = useManageError()
+  const dispatch = useAppDispatch()
+
+  const formik = useFormik <Omit<TeamApplicationData, 'status'>>({
+    initialValues: {
+      name: '',
+      email: '',
+      discord: '',
+      message: '',
+      role: 'Moderator'
+    },
+    onSubmit: async (values) => {
+      try {
+        await createTeamApplication(values)
+        dispatch(addAlert({
+          id: nanoid(),
+          title: 'Formulario enviado',
+          message: 'Gracias por interesarte en unirte al equipo',
+          severity: 'success'
+        }))
+      } catch (error) {
+        manageError(error, 'Error al enviar el formulario', 'Error desconocido al enviar el formulario', 'error')
+      }
+    },
+    validationSchema: teamApplicationDataSchema,
+    validateOnMount: true
+  })
+  useEffect(() => {
+    if (searchParams.has('role')) {
+      formik.setFieldValue('role', searchParams.get('role'))
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          router.replace(pathname)
+        })
+    }
+  }, [searchParams, formik, pathname, router])
+
+  return (
+    <form
+      onSubmit={formik.handleSubmit}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          flexDirection: { base: 'column', md: 'row' },
+          justifyContent: 'space-evenly',
+          gap: 'medium'
+        })}
+      >
+        <Button
+          type="button"
+          onClick={() => {
+            formik.setFieldValue('role', MODERATOR_CLAN_ID)
+              .catch((error) => {
+                console.error(error)
+              })
+          }}
+          disabled={formik.values.role === MODERATOR_CLAN_ID}
+        >
+          Moderador
+        </Button>
+        <Button
+          type="button"
+          onClick={() => {
+            formik.setFieldValue('role', ADMIN_CLAN_ID)
+              .catch((error) => {
+                console.error(error)
+              })
+          }}
+          disabled={formik.values.role === ADMIN_CLAN_ID}
+        >
+          Administrador
+        </Button>
+        <Button
+          type="button"
+          onClick={() => {
+            formik.setFieldValue('role', COLLABORATOR_CLAN_ID)
+              .catch((error) => {
+                console.error(error)
+              })
+          }}
+          disabled={formik.values.role === 'Collaborator'}
+        >
+          Colaborador
+        </Button>
+      </div>
+      <div
+        className={css({
+          display: 'grid',
+          gridTemplateColumns: { base: '1fr', md: '1fr 1fr' },
+          gap: 'medium'
+        })}
+      >
+        {formik.submitCount <= 0
+          ? (
+            <div
+              className={css({
+                order: { base: 2, md: 1 }
+              })}
+            >
+              <FormGroup>
+                <label htmlFor="name">Nombre</label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={formik.values.name}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                />
+                {formik.touched.name !== undefined && formik.errors.name !== undefined
+                  ? (
+                    <Typography variant="caption" color="danger">
+                      {formik.errors.name}
+                    </Typography>
+                  )
+                  : (
+                    <Typography variant="caption" color="info">
+                      Tu nombre.
+                    </Typography>
+                  )}
+              </FormGroup>
+              <FormGroup>
+                <label htmlFor="email">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={formik.values.email}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                />
+                {formik.touched.email !== undefined && formik.errors.email !== undefined
+                  ? (
+                    <Typography variant="caption" color="danger">
+                      {formik.errors.email}
+                    </Typography>
+                  )
+                  : (
+                    <Typography variant="caption" color="info">
+                      Tu email, para poder contactarte.
+                    </Typography>
+                  )}
+              </FormGroup>
+              <FormGroup>
+                <label htmlFor="discord">Nombre de Discord</label>
+                <Input
+                  id="discord"
+                  type="text"
+                  value={formik.values.discord}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                />
+                {formik.touched.discord !== undefined && formik.errors.discord !== undefined
+                  ? (
+                    <Typography variant="caption" color="danger">
+                      {formik.errors.discord}
+                    </Typography>
+                  )
+                  : (
+                    <Typography variant="caption" color="info">
+                      Tu nombre de Discord, para poder contactarte.
+                    </Typography>
+                  )}
+              </FormGroup>
+              <FormGroup>
+                <label htmlFor="message">Mensaje</label>
+                <TextArea
+                  id="message"
+                  value={formik.values.message}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                />
+                {formik.touched.message !== undefined && formik.errors.message !== undefined
+                  ? (
+                    <Typography variant="caption" color="danger">
+                      {formik.errors.message}
+                    </Typography>
+                  )
+                  : (
+                    <Typography variant="caption" color="info">
+                      ¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc.
+                    </Typography>
+                  )}
+              </FormGroup>
+              <div
+                className={css({
+                  paddingBlock: 'medium'
+                })}
+              >
+                <Button
+                  type="submit"
+                  disabled={!formik.isValid || !formik.dirty}
+                  fullWidth
+
+                >
+                  Enviar
+                </Button>
+              </div>
+            </div>
+          )
+          : (
+            <div
+              className={css({
+                order: { base: 2, md: 1 },
+                paddingBlock: 'medium'
+              })}
+            >
+              <div
+                className={css({
+                  backgroundColor: 'surface',
+                  borderRadius: 'medium',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                })}
+              >
+                <Typography variant="h2" align="center">¡Gracias por interesarte en unirte al equipo!</Typography>
+                <Typography variant="body1">
+                  El equipo de EntGamers se pondrá en contacto contigo a la brevedad posible.
+                </Typography>
+              </div>
+            </div>
+          )}
+        <div
+          className={css({
+            overflow: 'hidden',
+            order: { base: 1, md: 2 },
+            paddingBlock: 'medium'
+          })}
+        >
+          <AnimatePresence mode="wait" initial={false}>
+            {formik.values.role === MODERATOR_CLAN_ID && (
+              <motion.div
+                key="motion-moderator"
+                transition={{ duration: 0.15, ease: 'easeInOut' }}
+                initial={{ opacity: 0, x: '-250px' }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: '250px' }}
+              >
+                <Typography variant="h2" align="center">Moderadores</Typography>
+                <Typography variant="body1">
+                  El equipo de moderación de EntGamers se encarga de moderar los distintos espacios en los que se desenvuelve la comunidad, como los grupos de Facebook, Discord, Etc.
+                </Typography>
+                <Typography variant="h3">Requisitos</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Imparcialidad</strong>
+                    <br />
+                    La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.
+                  </li>
+                </ul>
+                <Typography variant="h3">Beneficios</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Experiencia</strong>
+                    <br />
+                    Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
+                  </li>
+                </ul>
+              </motion.div>
+            )}
+            {formik.values.role === COLLABORATOR_CLAN_ID && (
+              <motion.div
+                key="motion-collaborator"
+                transition={{ duration: 0.15, ease: 'easeInOut' }}
+                initial={{ opacity: 0, x: '-250px' }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: '250px' }}
+              >
+                <Typography variant="h2" align="center">Colaborador</Typography>
+                <Typography variant="body1">
+                  Los colaboradores son personas ajenas al staff central de EntGamers que nos ayudan a traer contenido, eventos y actividades a la comunidad.
+                </Typography>
+                <Typography variant="h3">Requisitos</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Profesionalismo</strong>
+                    <br />
+                    La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
+                  </li>
+                </ul>
+                <Typography variant="h3">Beneficios</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Apoyo</strong>
+                    <br />
+                    Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos.
+                  </li>
+                </ul>
+              </motion.div>
+            )}
+            {formik.values.role === ADMIN_CLAN_ID && (
+              <motion.div
+                key="motion-administrator"
+                transition={{ duration: 0.15, ease: 'easeInOut' }}
+                initial={{ opacity: 0, x: '-250px' }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: '250px' }}
+              >
+                <Typography variant="h2" align="center">Administradores</Typography>
+                <Typography variant="body1">
+                  Los administradores son quienes se encargan de que todo funcione como es debido en la comunidad, desde la moderación de los grupos hasta la organización de eventos y actividades. Son los responsables de que la comunidad siga creciendo y mejorando.
+                </Typography>
+                <Typography variant="h3">Requisitos</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Profesionalismo</strong>
+                    <br />
+                    La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
+                  </li>
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Constancia</strong>
+                    <br />
+                    La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.
+                  </li>
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Proactividad</strong>
+                    <br />
+                    La comunidad esta en constante crecimiento, por eso, buscamos gente que ayude a buscar nuevas oportunidades para diferentes proyectos y actividades de interés a la comunidad.
+                  </li>
+                </ul>
+                <Typography variant="h3">Beneficios</Typography>
+                <ul className="fa-ul">
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Experiencia</strong>
+                    <br />
+                    Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
+                  </li>
+                  <li>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Capacitación</strong>
+                    <br />
+                    La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.
+                  </li>
+                  <li></li>
+                </ul>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default ApplyForm

src/app/equipo/unirse/page.tsx

@@ -0,0 +1,22 @@
+import Typography from '@/components/ui/Typography'
+import { Container } from '@/styled-system/jsx'
+import { ensureTeamApplicationsCollection } from 'entgamers-database/backend/database/teamApplications'
+import { Suspense, type FC } from 'react'
+import ApplyForm from './ApplyForm'
+
+const EquipoUnirsePage: FC = async () => {
+  await ensureTeamApplicationsCollection()
+  return (
+    <Container>
+      <Typography variant="h1" align="center">Únete al Bosque</Typography>
+      <Typography variant="body1">
+        El equipo de EntGamers está formado por personas que se dedican a la administración de la comunidad, a la organización de eventos y a la creación de contenido. Aquí podrás enterarte cuales son las funciones de cada uno de los miembros del equipo y como puedes unirte a nosotros.
+      </Typography>
+      <Suspense fallback={<Typography variant="body1">Cargando...</Typography>}>
+        <ApplyForm />
+      </Suspense>
+    </Container>
+  )
+}
+
+export default EquipoUnirsePage

src/app/global.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

src/app/layout.tsx

@@ -0,0 +1,51 @@
+import '@/app/global.css'
+import Footer from '@/components/layout/Footer'
+import Header from '@/components/layout/Header'
+import { css } from '@/styled-system/css'
+import '@fontsource/open-sans/latin-300.css'
+import '@fontsource/open-sans/latin-400.css'
+import '@fontsource/open-sans/latin-700.css'
+import '@fontsource/permanent-marker/latin-400.css'
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import type { Metadata } from 'next'
+import type { FC, ReactNode } from 'react'
+import FeedbackConsumer from './FeedbackConsumer'
+import SessionConsumer from './SessionConsumer'
+import StateProvider from './StateProvider'
+
+config.autoAddCss = false
+
+export const metadata: Metadata = {
+  title: 'Home | EntGamers',
+  description: 'Una comunidad de jugadores, para jugadores',
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'https://entgamers.pro')
+}
+
+interface RootLayoutProps {
+  children: ReactNode
+}
+
+const RootLayout: FC<RootLayoutProps> = ({ children }) => {
+  return (
+    <html lang="en">
+      <body>
+        <StateProvider>
+          <Header />
+          <main
+            className={css({
+              paddingBlock: 'medium',
+              minHeight: 'calc(100vh - 60px - 72px)'
+            })}
+          >
+            {children}
+          </main>
+          <Footer />
+          <FeedbackConsumer />
+          <SessionConsumer />
+        </StateProvider>
+      </body>
+    </html>
+  )
+}
+export default RootLayout

src/app/login/LoginForm.tsx

@@ -0,0 +1,112 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import Input from '@/components/ui/form/Input'
+import PasswordInput from '@/components/ui/form/PasswordInput'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import { useAppSelector } from '@/hooks/useAppSelector'
+import useManageError from '@/hooks/useManageError'
+import { setCurrentUser, setSession, setStatus } from '@/state/sessionSlice'
+import { getCurrentUser, login } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import NextLink from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useEffect, type FC } from 'react'
+import { object, string } from 'yup'
+
+interface LoginData {
+  email: string
+  password: string
+}
+
+const loginSchema = object({
+  email: string().email('El correo electrónico no es válido').required('El correo electrónico es requerido'),
+  password: string().required('La contraseña es requerida')
+})
+
+const LoginForm: FC = () => {
+  const dispatch = useAppDispatch()
+  const { manageError } = useManageError()
+  const session = useAppSelector((state) => state.session)
+  const router = useRouter()
+
+  const formik = useFormik<LoginData>({
+    initialValues: {
+      email: '',
+      password: ''
+    },
+    onSubmit: async ({ email, password }) => {
+      dispatch(setStatus('loading'))
+      try {
+        const session = await login(email, password)
+        const user = await getCurrentUser()
+        dispatch(setSession(session))
+        dispatch(setCurrentUser(user))
+      } catch (error) {
+        manageError(error, 'Error mientras se iniciaba sesión', 'Error desconocido mientras se iniciaba sesión', 'error')
+      } finally {
+        dispatch(setStatus('idle'))
+      }
+    },
+    validationSchema: loginSchema,
+    validateOnMount: true
+  })
+
+  useEffect(() => {
+    if (session.status === 'idle' && session.session !== undefined) {
+      router.push('/')
+    }
+  }, [session, router])
+
+  return (
+    <form
+      onSubmit={formik.handleSubmit}
+    >
+      <FormGroup>
+        <label htmlFor="email">Correo electrónico</label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          onChange={formik.handleChange}
+          value={formik.values.email}
+          status={formik.touched.email !== undefined && formik.errors.email !== undefined ? 'danger' : undefined}
+          onBlur={formik.handleBlur}
+          fullWidth
+        />
+        {formik.touched.email !== undefined && formik.errors.email !== undefined && (
+          <Typography variant="caption" color="danger">{formik.errors.email}</Typography>
+        )}
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="password">Contraseña</label>
+        <PasswordInput
+          id="password"
+          name="password"
+          onChange={formik.handleChange}
+          value={formik.values.password}
+          status={formik.touched.password !== undefined && formik.errors.password !== undefined ? 'danger' : undefined}
+          onBlur={formik.handleBlur}
+          fullWidth
+        />
+        {formik.touched.password !== undefined && formik.errors.password !== undefined && (
+          <Typography variant="caption" color="danger">{formik.errors.password}</Typography>
+        )}
+      </FormGroup>
+      <Typography variant="caption" color="muted">
+        ¿Perdiste tu contraseña?
+        {' '}
+        <NextLink href="/recover-password">Recupérala</NextLink>
+      </Typography>
+      <FormGroup>
+        <Button
+          type="submit"
+        >
+          Iniciar sesión
+        </Button>
+      </FormGroup>
+    </form>
+  )
+}
+export default LoginForm

src/app/login/page.tsx

@@ -0,0 +1,54 @@
+import LoginForm from '@/app/login/LoginForm'
+import Typography from '@/components/ui/Typography'
+import { css, cx } from '@/styled-system/css'
+import { Center } from '@/styled-system/jsx'
+import { container } from '@/styled-system/patterns'
+import { card } from '@/styled-system/recipes'
+import NextLink from 'next/link'
+import { type FC } from 'react'
+
+const LoginPage: FC = () => {
+  return (
+    <>
+      <Center
+        className={cx(
+          container(),
+          css({
+            minHeight: 'calc(100vh - 60px - 72px)'
+          }))}
+      >
+        <div
+          className={cx(
+            card().body,
+            css({
+              width: '100%',
+              maxWidth: { sm: 'breakpoint-sm' },
+              overflow: 'visible'
+            })
+          )}
+        >
+          <div
+            className={
+              card().header
+            }
+          >
+            <Typography align="center" variant="h1">
+              Iniciar sesión
+            </Typography>
+          </div>
+          <div
+            className={card().content}
+          >
+            <LoginForm />
+            <Typography variant="caption" align="center">
+              ¿No tienes una cuenta?
+              {' '}
+              <NextLink href="/register">Regístrate</NextLink>
+            </Typography>
+          </div>
+        </div>
+      </Center>
+    </>
+  )
+}
+export default LoginPage

src/app/not-found.tsx

@@ -0,0 +1,22 @@
+import Typography from '@/components/ui/Typography'
+import { css } from '@/styled-system/css'
+import { Center } from '@/styled-system/jsx'
+import { button } from '@/styled-system/recipes'
+import NextLink from 'next/link'
+import { type FC } from 'react'
+
+const NotFoundPage: FC = () => {
+  return (
+    <Center
+      flexDirection="column"
+      width="100%"
+      height="calc(100vh - 60px - 72px)"
+      gap="medium"
+    >
+      <Typography variant="h1" className={css({ fontSize: '100px' })}>404</Typography>
+      <Typography variant="h2" color="text">El árbol que buscas no está aquí</Typography>
+      <NextLink className={button({})} href="/">Volver Al inicio</NextLink>
+    </Center>
+  )
+}
+export default NotFoundPage

src/app/opengraph-image.alt.txt

@@ -0,0 +1 @@
+EntGamers

src/app/page.tsx

@@ -0,0 +1,18 @@
+import Clanes from '@/app/Clanes'
+import Hero from '@/app/Hero'
+import Social from '@/app/Social'
+import Team from '@/app/Team'
+import { type FC } from 'react'
+
+const HomePage: FC = async () => {
+  return (
+    <>
+      <Hero />
+      <Clanes />
+      <Social />
+      <Team />
+    </>
+  )
+}
+
+export default HomePage

src/app/recover-password/CreateRecoverPasswordForm.tsx

@@ -0,0 +1,89 @@
+'use client'
+import Button from '@/components/ui/Button'
+import Typography from '@/components/ui/Typography'
+import FormGroup from '@/components/ui/form/FormGroup'
+import Input from '@/components/ui/form/Input'
+import { useAppDispatch } from '@/hooks/useAppDispatch'
+import useManageError from '@/hooks/useManageError'
+import { addAlert } from '@/state/feedbackSlice'
+import { nanoid } from '@reduxjs/toolkit'
+import { createPasswordRecovery } from 'entgamers-database/frontend/session'
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import { object, string } from 'yup'
+
+interface RecoverPasswordData {
+  email: string
+}
+
+const recoverPasswordSchema = object({
+  email: string().email('El correo electrónico no es válido').required('El correo electrónico es requerido')
+})
+
+const CreateRecoverPasswordForm: FC = () => {
+  const { manageError } = useManageError()
+  const dispatch = useAppDispatch()
+
+  const formik = useFormik<RecoverPasswordData>({
+    initialValues: {
+      email: ''
+    },
+    onSubmit: async ({ email }) => {
+      try {
+        const callBackUrl = `${process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'}/recover-password`
+        await createPasswordRecovery(email, callBackUrl)
+        dispatch(addAlert({
+          id: nanoid(),
+          title: 'Solicitud de recuperación de contraseña enviada',
+          message: 'Si el correo electrónico está registrado, se enviarán instrucciones para la recuperación de contraseña',
+          severity: 'success'
+        }))
+      } catch (error) {
+        manageError(error, 'Error mientras se registraba', 'Error desconocido mientras se registraba', 'error')
+      }
+    },
+    validationSchema: recoverPasswordSchema,
+    validateOnMount: true
+  })
+  return (
+    <form
+      onSubmit={formik.handleSubmit}
+    >
+      <FormGroup>
+        <label htmlFor="email">
+          Correo electrónico
+        </label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          value={formik.values.email}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          status={formik.touched.email !== undefined && formik.errors.email !== undefined ? 'danger' : 'success'}
+        />
+        {formik.touched.email !== undefined && formik.errors.email !== undefined
+          ? (
+            <Typography variant="caption" color="danger">
+              {formik.errors.email}
+            </Typography>
+          )
+          : (
+            <Typography variant="caption" color="info">
+              Por favor, introduce el correo electrónico con el que te has registrado. Te enviaremos un correo con instrucciones para la recuperación de contraseña
+            </Typography>
+          )}
+      </FormGroup>
+      <FormGroup>
+        <Button
+          type="submit"
+          disabled={formik.isSubmitting}
+        >
+          Enviar correo de recuperación
+        </Button>
+      </FormGroup>
+    </form>
+  )
+}
+
+export default CreateRecoverPasswordForm

src/app/recover-password/ManageRecoverPassword.tsx

@@ -0,0 +1,24 @@
+'use client'
+import CreateRecoverPasswordForm from '@/app/recover-password/CreateRecoverPasswordForm'
+import { useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import UpdateRecoverPasswordForm, { type UpdateRecoverPasswordFormProps } from './UpdateRecoverPasswordForm'
+
+const ManageRecoverPassword: FC = () => {
+  const searchParams = useSearchParams()
+  const userId = searchParams.get('userId')
+  const secret = searchParams.get('secret')
+  const recoverData: UpdateRecoverPasswordFormProps | undefined = (userId !== null && secret !== null) ? { userId, secret } : undefined
+
+  if (recoverData === undefined) {
+    return <CreateRecoverPasswordForm />
+  } else {
+    return (
+      <UpdateRecoverPasswordForm
+        {...recoverData}
+      />
+    )
+  }
+}
+
+export default ManageRecoverPassword