feat: static pages

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 { button, card, iconButton } from '@/styled-system/recipes'
-import { type IconDefinition } from '@fortawesome/fontawesome-svg-core'
+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 (
     <section
-      className={center({
+      className={css({
         minHeight: '75vh',
         backgroundImage: 'url(/images/backgrounds/MysteriousForest.jpg)'
       })}
     >
-      <Container
+      <div
-        className={css({
+        className={center()}
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 'medium',
-          flexWrap: 'wrap'
-        })}
       >
-        {team.map((member, index) => (
+
-          <div
+        <Container
-            key={`team-member-${index}`}
+          className={css({
-            className={cx(card({ variant: 'retro' }).body, css({
+            display: 'flex',
-              maxWidth: '300px',
+            flexDirection: 'column',
-              textAlign: 'center'
+            alignItems: 'center',
-            }))}
+            justifyContent: 'center',
-          >
+            gap: 'medium',
+            flexWrap: 'wrap'
+          })}
+        >
+          {team.map((member, index) => (
             <div
-              className={cx(card({ variant: 'retro' }).media, center())}
+              key={`team-member-${index}`}
+              className={cx(card({ variant: 'retro' }).body, css({
+                maxWidth: '300px',
+                textAlign: '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({
+                className={cx(card({ variant: 'retro' }).media, center())}
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: 'small',
-                  flexWrap: 'wrap'
-                })}
               >
-                {member.socialNetworks.map((socialNetwork, index) => (
+                <NextImage
-                  <a
+                  src={member.image}
-                    key={`team-member-${index}-social-network`}
+                  alt={member.name}
-                    className={iconButton()}
+                  width={120}
-                    href={socialNetwork.url}
+                  height={120}
-                  >
+                />
-                    <FontAwesomeIcon icon={socialNetwork.icon} fixedWidth />
+              </div>
-                  </a>
+              <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} fixedWidth />
+                    </a>
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
+          ))}
-        ))}
+        </Container>
-      </Container>
+      </div>
+      <div
+        className={css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+          gap: 'medium',
+          marginBlock: 'medium'
+        })}
+      >
+        <NextLink
+          className={button({ color: 'info' })}
+          href="/equipo"
+        >
+          Ver el equipo completo
+        </NextLink>
+        <NextLink
+          className={button({ color: 'primary' })}
+          href="/equipo/join"
+        >
+          Únete al equipo
+        </NextLink>
+      </div>
     </section>
   )
 }

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 (
+    <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><FontAwesomeIcon icon={faChevronRight} listItem /> Espacio en el servidor de Discord.</li>
+            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Apoyo de la administración con proyectos y eventos.</li>
+            <li><FontAwesomeIcon icon={faChevronRight} listItem /> 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><FontAwesomeIcon icon={faChevronRight} listItem /> Tener un encargado.</li>
+            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Fomentar el compañerismo y la comunidad.</li>
+            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Aportar contenido de forma periódica para la comunidad.</li>
+            <li><FontAwesomeIcon icon={faChevronRight} listItem /> 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/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 (
+    <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>
+      <Container
+        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} fixedWidth />
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </Container>
+      <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>
+      <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.
+        <div className={center()}>
+          <NextLink
+            className={button({ color: 'info' })}
+            href="/equipo/unirse"
+          >
+            ¡Quiero ser moderador!
+          </NextLink>
+        </div>
+      </Typography>
+      <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>
+      <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"
+        >
+          ¡Quiero ser colaborador!
+        </NextLink>
+      </div>
+    </Container>
+  )
+}
+export default EquipoPage

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 (
+    <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>
+      <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 unirte contactándonos mediante nuestro <a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>.
+      </div>
+    </Container>
+  )
+}
+
+export default EquipoUnirsePage

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

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: 'Clanes', href: '/clanes', icon: trees },
-  { label: 'Contact', href: '/contact', icon: faHome }
+  { label: 'Equipo', href: '/equipo', icon: faUsers }
 ]
 
 const Menu: FC = () => {
@@ -81,8 +83,9 @@ const Menu: FC = () => {
               {menuLinks.map((menuLink, index) => (
                 <li
                   key={`menu-link-${index}`}
+                  onClick={() => { setIsMenuOpen(false) }}
                 >
-                  <a
+                  <NextLink
                     className={css({
                       display: 'flex',
                       alignItems: 'center',
@@ -108,7 +111,7 @@ const Menu: FC = () => {
                     data-active={pathName === menuLink.href}
                   >
                     <FontAwesomeIcon icon={menuLink.icon} fixedWidth />&nbsp;{menuLink.label}
-                  </a>
+                  </NextLink>
                 </li>
               ))}
             </ul>

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