diff --git a/src/app/Team.tsx b/src/app/Team.tsx
index 918e594..3017974 100644
--- a/src/app/Team.tsx
+++ b/src/app/Team.tsx
@@ -1,26 +1,15 @@
import { css, cx } from '@/styled-system/css'
import { Container } from '@/styled-system/jsx'
import { center } from '@/styled-system/patterns'
-import { card, iconButton } from '@/styled-system/recipes'
-import { type IconDefinition } from '@fortawesome/fontawesome-svg-core'
+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'
-interface TeamMember {
- image: string
- name: string
- role: 'moderator' | 'administrator' | 'collaborator'
- description: string
- socialNetworks: Array<{
- label: string
- url: string
- icon: IconDefinition
- }>
-}
-
const team: TeamMember[] = [
{
image: '/images/team/SrJuggernaut.png',
@@ -41,66 +30,93 @@ const team: TeamMember[] = [
const Team: FC = () => {
return (
-
- {team.map((member, index) => (
-
+
+
+ {team.map((member, index) => (
-
-
-
-
{member.name}
-
{member.description}
- {member.socialNetworks.map((socialNetwork, index) => (
-
-
-
- ))}
+
+
+
+
{member.name}
+
{member.description}
+
+ {member.socialNetworks.map((socialNetwork, index) => (
+
+
+
+ ))}
+
-
- ))}
-
+ ))}
+
+
+
+
+ Ver el equipo completo
+
+
+ Únete al equipo
+
+
)
}
diff --git a/src/app/clanes/page.tsx b/src/app/clanes/page.tsx
new file mode 100644
index 0000000..ac7e6c2
--- /dev/null
+++ b/src/app/clanes/page.tsx
@@ -0,0 +1,59 @@
+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 (
+
+ Clanes
+ 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.
+
+
+
Beneficios de los clanes
+
La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.
+
+ - Espacio en el servidor de Discord.
+ - Apoyo de la administración con proyectos y eventos.
+ - Apoyo del equipo de moderación.
+
+
+
+
Requisitos para formar un clan
+
Todos los clanes deben cumplir con los siguientes requisitos:
+
+ - Tener un encargado.
+ - Fomentar el compañerismo y la comunidad.
+ - Aportar contenido de forma periódica para la comunidad.
+ - Realizar al menos una actividad mensual con los integrantes.
+
+
+
+ Clanes activos
+
+ Esta sección está en construcción. Puedes ver los clanes activos en nuestro
Servidor de Discord.
+
+
+ )
+}
+export default ClanesPage
diff --git a/src/app/equipo/page.tsx b/src/app/equipo/page.tsx
new file mode 100644
index 0000000..5434fc2
--- /dev/null
+++ b/src/app/equipo/page.tsx
@@ -0,0 +1,130 @@
+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, 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 EquipoPage: FC = () => {
+ return (
+
+ Equipo
+
+ 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!
+
+ Administradores
+
+ 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.
+
+
+ {team.map((member, index) => (
+
+
+
+
+
+
{member.name}
+
{member.description}
+
+ {member.socialNetworks.map((socialNetwork, index) => (
+
+
+
+ ))}
+
+
+
+ ))}
+
+ Moderadores
+
+ 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.
+
+
+ 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.
+
+
+ ¡Quiero ser moderador!
+
+
+
+ Colaboradores
+
+ Los colaboradores son los encargados de crear contenido para la comunidad, como artículos, tutoriales, vídeos, eventos etc.
+
+
+ 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.
+
+
+
+ ¡Quiero ser colaborador!
+
+
+
+ )
+}
+export default EquipoPage
diff --git a/src/app/equipo/unirse/page.tsx b/src/app/equipo/unirse/page.tsx
new file mode 100644
index 0000000..7d78e31
--- /dev/null
+++ b/src/app/equipo/unirse/page.tsx
@@ -0,0 +1,32 @@
+import Typography from '@/components/ui/Typography'
+import { css } from '@/styled-system/css'
+import { Container } from '@/styled-system/jsx'
+import { type FC } from 'react'
+
+const EquipoUnirsePage: FC = () => {
+ return (
+
+ Únete al Bosque
+
+ 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.
+
+
+ Esta sección está en construcción. Puedes unirte contactándonos mediante nuestro
Servidor de Discord.
+
+
+ )
+}
+
+export default EquipoUnirsePage
diff --git a/src/assets/icons/trees.ts b/src/assets/icons/trees.ts
new file mode 100644
index 0000000..37a2c6b
--- /dev/null
+++ b/src/assets/icons/trees.ts
@@ -0,0 +1,15 @@
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+const trees: IconDefinition = {
+ icon: [
+ 640,
+ 512,
+ [],
+ 'f7c5',
+ 'M298.4 288H329c9 0 17-5 20.88-13c3.75-8.125 2.5-17.38-3.375-24.12L268.4 160h28.88c9.127 0 17.38-5.375 20.88-13.62c3.625-8.125 1.875-17.62-4.25-24.12L203.6 4.875c-6-6.5-17.25-6.5-23.25 0L69.97 122.3c-6 6.5-7.75 16-4.125 24.12C69.34 154.6 77.59 160 86.72 160h28.88L37.46 250.9c-5.875 6.875-7.125 16-3.375 24.12C37.96 283 45.84 288 54.96 288h30.63l-79.88 90.5c-6 6.75-7.377 16.12-3.625 24.25C5.834 410.8 14.08 416 23.09 416H160v64C160 497.7 174.3 512 192 512S224 497.7 224 480V416h136.9c9 0 17.25-5.25 21-13.25c3.75-8.125 2.5-17.5-3.5-24.25L298.4 288zM634.3 378.5L554.4 288h30.63c9 0 17-5 20.88-13c3.75-8.125 2.5-17.38-3.375-24.12L524.4 160h28.88c9.125 0 17.38-5.375 20.88-13.62c3.625-8.125 1.875-17.62-4.25-24.12l-110.3-117.4c-6-6.5-17.25-6.5-23.25 0l-95.14 101.3c11.13 15.38 14 35.25 6.377 52.88c-4 9.375-10.38 17.12-18.25 22.75l41.5 48.25c14 16.25 17.13 39.25 8.002 58.62c-4.25 8.875-10.5 16.12-18.13 21.5l41.63 47.13c8.625 9.875 13.37 14.2 13.62 26.7L416 480C416 497.7 430.3 512 448 512C465.7 512 480 497.7 480 480V416h136.9c9.002 0 17.25-5.25 21-13.25C641.7 394.6 640.3 385.3 634.3 378.5z'
+ ],
+ iconName: 'trees',
+ prefix: 'fas'
+}
+
+export default trees
diff --git a/src/components/layout/Menu.tsx b/src/components/layout/Menu.tsx
index 9582ce3..b5de733 100644
--- a/src/components/layout/Menu.tsx
+++ b/src/components/layout/Menu.tsx
@@ -1,9 +1,11 @@
+import trees from '@/assets/icons/trees'
import BackDrop from '@/components/ui/BackDrop'
import { css } from '@/styled-system/css'
import { iconButton } from '@/styled-system/recipes'
import { type IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faBars, faHome, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faHome, faTimes, faUsers } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import NextLink from 'next/link'
import { usePathname } from 'next/navigation'
import { useCallback, useState, type FC } from 'react'
@@ -15,8 +17,8 @@ interface MenuLink {
const menuLinks: MenuLink[] = [
{ label: 'Home', href: '/', icon: faHome },
- { label: 'About', href: '/about', icon: faHome },
- { label: 'Contact', href: '/contact', icon: faHome }
+ { label: 'Clanes', href: '/clanes', icon: trees },
+ { label: 'Equipo', href: '/equipo', icon: faUsers }
]
const Menu: FC = () => {
@@ -81,8 +83,9 @@ const Menu: FC = () => {
{menuLinks.map((menuLink, index) => (
{ setIsMenuOpen(false) }}
>
- {
data-active={pathName === menuLink.href}
>
{menuLink.label}
-
+
))}
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 0000000..40ec753
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,13 @@
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+export interface TeamMember {
+ image: string
+ name: string
+ role: 'moderator' | 'administrator' | 'collaborator'
+ description: string
+ socialNetworks: Array<{
+ label: string
+ url: string
+ icon: IconDefinition
+ }>
+}