feat: static pages
This commit is contained in:
+79
-63
@@ -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 (
|
||||
<section
|
||||
className={center({
|
||||
className={css({
|
||||
minHeight: '75vh',
|
||||
backgroundImage: 'url(/images/backgrounds/MysteriousForest.jpg)'
|
||||
})}
|
||||
>
|
||||
<Container
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 'medium',
|
||||
flexWrap: 'wrap'
|
||||
})}
|
||||
<div
|
||||
className={center()}
|
||||
>
|
||||
{team.map((member, index) => (
|
||||
<div
|
||||
key={`team-member-${index}`}
|
||||
className={cx(card({ variant: 'retro' }).body, css({
|
||||
maxWidth: '300px',
|
||||
textAlign: 'center'
|
||||
}))}
|
||||
>
|
||||
|
||||
<Container
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
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({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: 'small',
|
||||
flexWrap: 'wrap'
|
||||
})}
|
||||
className={cx(card({ variant: 'retro' }).media, center())}
|
||||
>
|
||||
{member.socialNetworks.map((socialNetwork, index) => (
|
||||
<a
|
||||
key={`team-member-${index}-social-network`}
|
||||
className={iconButton()}
|
||||
href={socialNetwork.url}
|
||||
>
|
||||
<FontAwesomeIcon icon={socialNetwork.icon} fixedWidth />
|
||||
</a>
|
||||
))}
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user