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 + }> +}