feat: start over and layout
This commit is contained in:
@@ -190,3 +190,6 @@ dist
|
|||||||
# .pnp.*
|
# .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
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"plugins": {
|
||||||
|
"@pandacss/dev/postcss": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
-1
@@ -1,6 +1,5 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
/// <reference types="next/navigation-types/compat/navigation" />
|
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
|
|||||||
+6
-5
@@ -11,14 +11,15 @@
|
|||||||
"prepare": "husky install"
|
"prepare": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.11.1",
|
"@fontsource/open-sans": "^5.0.12",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@fontsource/permanent-marker": "^5.0.8",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||||
"@mui/material": "^5.14.9",
|
"entgamers-panda-preset": "0.0.7",
|
||||||
"formik": "^2.4.4",
|
"formik": "^2.4.4",
|
||||||
|
"framer-motion": "^10.16.4",
|
||||||
"gsap": "^3.12.2",
|
"gsap": "^3.12.2",
|
||||||
"isomorphic-fetch": "^3.0.0",
|
"isomorphic-fetch": "^3.0.0",
|
||||||
"next": "13.4.19",
|
"next": "13.4.19",
|
||||||
@@ -26,16 +27,16 @@
|
|||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"sharp": "^0.32.5",
|
"sharp": "^0.32.5",
|
||||||
"swiper": "^10.2.0",
|
|
||||||
"yup": "^1.2.0"
|
"yup": "^1.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.7.1",
|
"@commitlint/cli": "^17.7.1",
|
||||||
"@commitlint/config-conventional": "^17.7.0",
|
"@commitlint/config-conventional": "^17.7.0",
|
||||||
"@emotion/eslint-plugin": "^11.11.0",
|
"@pandacss/dev": "^0.15.0",
|
||||||
"@types/isomorphic-fetch": "^0.0.36",
|
"@types/isomorphic-fetch": "^0.0.36",
|
||||||
"@types/node": "20.6.0",
|
"@types/node": "20.6.0",
|
||||||
"@types/react": "18.2.21",
|
"@types/react": "18.2.21",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.4.0",
|
"@typescript-eslint/eslint-plugin": "^6.4.0",
|
||||||
"@typescript-eslint/parser": "^5.38.0",
|
"@typescript-eslint/parser": "^5.38.0",
|
||||||
"eslint": "^8.0.1",
|
"eslint": "^8.0.1",
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from '@pandacss/dev'
|
||||||
|
import entGamersPandaPreset from 'entgamers-panda-preset'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
presets: [entGamersPandaPreset],
|
||||||
|
gitignore: true,
|
||||||
|
preflight: true,
|
||||||
|
include: ['./src/**/*.{js,jsx,ts,tsx}'],
|
||||||
|
exclude: [],
|
||||||
|
outdir: 'src/styled-system',
|
||||||
|
jsxFactory: 'panda',
|
||||||
|
jsxFramework: 'react'
|
||||||
|
})
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@layer reset, base, tokens, recipes, utilities;
|
||||||
+38
-3
@@ -1,8 +1,43 @@
|
|||||||
import { type FC } from 'react'
|
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, type ReactNode } from 'react'
|
||||||
|
|
||||||
const RootLayout: FC = () => {
|
config.autoAddCss = false
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Home | EntGamers',
|
||||||
|
description: 'Una comunidad de jugadores, para jugadores'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RootLayoutProps {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const RootLayout: FC<RootLayoutProps> = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<div>RootLayout</div>
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main
|
||||||
|
className={css({
|
||||||
|
paddingBlock: 'medium',
|
||||||
|
minHeight: 'calc(100vh - 60px - 72px)'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default RootLayout
|
export default RootLayout
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
const HomePage: FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>
|
||||||
|
Home Page
|
||||||
|
</h1>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HomePage
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { type FC, type SVGProps } from 'react'
|
import { type FC, type SVGProps } from 'react'
|
||||||
|
|
||||||
const SvgComponent: FC<SVGProps<SVGSVGElement>> = (props) => (
|
const EntGamers: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||||
<svg
|
<svg
|
||||||
{...props}
|
{...props}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -375,4 +375,4 @@ const SvgComponent: FC<SVGProps<SVGSVGElement>> = (props) => (
|
|||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default SvgComponent
|
export default EntGamers
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
import Head from 'next/head'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
export interface SeoProps {
|
|
||||||
title?: string
|
|
||||||
description?: string
|
|
||||||
image?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const SITE_NAME = process.env.SITE_NAME ?? 'EntGamers'
|
|
||||||
|
|
||||||
const Seo: FC<SeoProps> = ({ title, description, image }) => {
|
|
||||||
return (
|
|
||||||
<Head>
|
|
||||||
{title !== undefined && (
|
|
||||||
<>
|
|
||||||
<title key="title">{`${title} - ${SITE_NAME}`}</title>
|
|
||||||
<meta key="og_title" property="og:title" content={title} />
|
|
||||||
<meta key="twitter_title" property="twitter:title" content={title} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{description !== undefined && (
|
|
||||||
<>
|
|
||||||
<meta key="description" name="description" content={description} />
|
|
||||||
<meta key="og_description" property="og:description" content={description} />
|
|
||||||
<meta key="twitter_description" property="twitter:description" content={description} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{image !== undefined && (
|
|
||||||
<>
|
|
||||||
<meta key="og_image" property="og:image" content={image} />
|
|
||||||
<meta key="twitter_image" property="twitter:image" content={image} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Head>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Seo
|
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import Typography from '@/components/ui/Typography'
|
||||||
|
import { css } from '@/styled-system/css'
|
||||||
|
import { Container } from '@/styled-system/jsx'
|
||||||
|
import { faChevronRight, faHeart } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
const Footer: FC = () => {
|
||||||
|
return (
|
||||||
|
<footer
|
||||||
|
className={css({
|
||||||
|
backgroundColor: 'surface',
|
||||||
|
color: 'text',
|
||||||
|
paddingY: 'medium'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
className={css({
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: { base: 'repeat(3, 1fr)', mdDown: '1fr' }
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h3" component='div'> Acerca de </Typography>
|
||||||
|
<ul className="fa-ul">
|
||||||
|
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/acerca-de"> EntGamers</NextLink></li>
|
||||||
|
<li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/clanes"> Clanes</NextLink></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h3" component='div'> Contacto </Typography>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</Container>
|
||||||
|
<Container
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Typography variant="body2" component='div'>
|
||||||
|
Hecho con <FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} /> por <a href="https://srjuggernaut.dev">SrJuggernaut</a>
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Footer
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
'use client'
|
||||||
|
import EntGamers from '@/assets/logos/EntGamers'
|
||||||
|
import Menu from '@/components/layout/Menu'
|
||||||
|
import { css } from '@/styled-system/css'
|
||||||
|
import { Container } from '@/styled-system/jsx'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import { useCallback, useEffect, useState, type FC } from 'react'
|
||||||
|
|
||||||
|
const Header: FC = () => {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(typeof window !== 'undefined' ? window.scrollY > 0 : false)
|
||||||
|
const handleScroll = useCallback(() => {
|
||||||
|
if (typeof window === 'undefined') return
|
||||||
|
console.log(window.scrollY)
|
||||||
|
setIsScrolled(window.scrollY > 0)
|
||||||
|
}, [])
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window === 'undefined') return
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: 'text',
|
||||||
|
minHeight: '60px',
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
zIndex: 'sticky',
|
||||||
|
boxShadow: 'none',
|
||||||
|
transitionProperty: 'background-color, box-shadow',
|
||||||
|
transitionDuration: '0.25s',
|
||||||
|
transitionTimingFunction: 'easeInOut',
|
||||||
|
willChange: 'background-color, box-shadow',
|
||||||
|
'&[data-scrolled=true]': {
|
||||||
|
backgroundColor: 'surface',
|
||||||
|
boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)'
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
data-scrolled={isScrolled}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<NextLink
|
||||||
|
href="/"
|
||||||
|
>
|
||||||
|
<EntGamers
|
||||||
|
width="40px"
|
||||||
|
/>
|
||||||
|
</NextLink>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Menu />
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
height: '60px'
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Header
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { useCallback, useState, type FC } from 'react'
|
||||||
|
|
||||||
|
interface MenuLink {
|
||||||
|
label: string
|
||||||
|
href: string
|
||||||
|
icon: IconDefinition
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuLinks: MenuLink[] = [
|
||||||
|
{ label: 'Home', href: '/', icon: faHome },
|
||||||
|
{ label: 'About', href: '/about', icon: faHome },
|
||||||
|
{ label: 'Contact', href: '/contact', icon: faHome }
|
||||||
|
]
|
||||||
|
|
||||||
|
const Menu: FC = () => {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||||
|
const pathName = usePathname()
|
||||||
|
const handleClickAway = useCallback(() => {
|
||||||
|
setIsMenuOpen(false)
|
||||||
|
}, [])
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className={iconButton({
|
||||||
|
color: 'primary'
|
||||||
|
})}
|
||||||
|
onClick={() => { setIsMenuOpen(!isMenuOpen) }}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faBars} />
|
||||||
|
</button>
|
||||||
|
<BackDrop
|
||||||
|
onClickAway={handleClickAway}
|
||||||
|
isOpen={isMenuOpen}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
width: { base: '250px', smDown: '100%' },
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: 'surface',
|
||||||
|
zIndex: 'modal'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
height: '60px',
|
||||||
|
borderBottom: '1px solid',
|
||||||
|
borderColor: 'border',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'right',
|
||||||
|
padding: '0 1rem'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className={iconButton({
|
||||||
|
color: 'danger'
|
||||||
|
})}
|
||||||
|
onClick={() => { setIsMenuOpen(!isMenuOpen) }}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTimes} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul
|
||||||
|
className={css({
|
||||||
|
listStyle: 'none',
|
||||||
|
padding: 0,
|
||||||
|
margin: 0
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{menuLinks.map((menuLink, index) => (
|
||||||
|
<li
|
||||||
|
key={`menu-link-${index}`}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'left',
|
||||||
|
padding: '1rem',
|
||||||
|
textDecoration: 'none',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: 'text',
|
||||||
|
transitionProperty: 'background-color',
|
||||||
|
transitionDuration: 'normal',
|
||||||
|
transitionTimingFunction: 'easeInOut',
|
||||||
|
willChange: 'background-color color',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'primary',
|
||||||
|
color: 'primary.contrast'
|
||||||
|
},
|
||||||
|
'&[data-active=true]': {
|
||||||
|
backgroundColor: 'info',
|
||||||
|
color: 'info.contrast'
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
href={menuLink.href}
|
||||||
|
data-active={pathName === menuLink.href}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={menuLink.icon} fixedWidth /> {menuLink.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</BackDrop>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Menu
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import { Container } from '@mui/material'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import Header from '@components/layouts/Header'
|
|
||||||
import Footer from '@components/layouts/Footer'
|
|
||||||
|
|
||||||
import { type ContainedProps } from '@interfaces'
|
|
||||||
|
|
||||||
const Contained: FC<ContainedProps> = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<Container
|
|
||||||
component="main"
|
|
||||||
sx={{
|
|
||||||
minHeight: 'calc(100vh - 92px)',
|
|
||||||
marginTop: '60px',
|
|
||||||
paddingBlock: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Container>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Contained
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { type FooterColumn } from '@interfaces'
|
|
||||||
import { Container, Paper, Typography } from '@mui/material'
|
|
||||||
import MuiLink from '@mui/material/Link'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
const Footer: FC = () => {
|
|
||||||
const columns: FooterColumn[] = [
|
|
||||||
{
|
|
||||||
title: 'Acerca de',
|
|
||||||
links: [
|
|
||||||
{ label: 'EntGamers', url: '/about' },
|
|
||||||
{ label: 'Clanes', url: '/clanes' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Contacto',
|
|
||||||
links: [
|
|
||||||
{ label: 'Facebook', url: 'https://www.facebook.com/EntGamers/' },
|
|
||||||
{ label: 'Twitter', url: 'https://twitter.com/EntGamers' },
|
|
||||||
{ label: 'Email', url: 'mailto:contacto@entgamers.pro' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
return (
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
paddingBlock: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Container
|
|
||||||
sx={(theme) => ({
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: '1fr',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
gridTemplateColumns: '1fr 1fr'
|
|
||||||
},
|
|
||||||
[theme.breakpoints.up('lg')]: {
|
|
||||||
gridTemplateColumns: '1fr 1fr 1fr'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{columns.map((column, index) => (
|
|
||||||
<div key={index}>
|
|
||||||
<Typography variant="h3" component="div" align="center">{column.title}</Typography>
|
|
||||||
{column.links.length > 0 && (
|
|
||||||
<ul className="fa-ul">
|
|
||||||
{column.links.map((link, index) => (
|
|
||||||
<li key={index}>
|
|
||||||
<FontAwesomeIcon icon={faAngleRight} listItem />
|
|
||||||
<MuiLink
|
|
||||||
component={NextLink}
|
|
||||||
href={link.url}
|
|
||||||
>
|
|
||||||
{link.label}
|
|
||||||
</MuiLink>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Container>
|
|
||||||
<Container>
|
|
||||||
<Typography variant="body2" component="div" align="center">
|
|
||||||
<p>
|
|
||||||
Creado por <MuiLink href="https://srjuggernaut.dev" target="_blank">SrJuggernaut</MuiLink> con <3
|
|
||||||
</p>
|
|
||||||
</Typography>
|
|
||||||
</Container>
|
|
||||||
</Paper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Footer
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './Footer'
|
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
import EntGamers from '@assets/logos/EntGamers'
|
|
||||||
import { faBars } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { type Link } from '@interfaces'
|
|
||||||
import { AppBar, Box, Container, Divider, IconButton, ListItemButton, NoSsr } from '@mui/material'
|
|
||||||
import dynamic from 'next/dynamic'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { useEffect, useState, type FC } from 'react'
|
|
||||||
|
|
||||||
const Drawer = dynamic(async () => await import('@mui/material/Drawer'), { ssr: false })
|
|
||||||
const List = dynamic(async () => await import('@mui/material/List'), { ssr: false })
|
|
||||||
const ListItemText = dynamic(async () => await import('@mui/material/ListItemText'), { ssr: false })
|
|
||||||
|
|
||||||
const MenuItems: Link[] = [
|
|
||||||
{ label: 'Home', url: '/' },
|
|
||||||
{ label: 'Clanes', url: '/clanes' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const Header: FC = () => {
|
|
||||||
const [scrolled, setScrolled] = useState(false)
|
|
||||||
const [openMenu, setOpenMenu] = useState(false)
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const handleScroll = (): void => {
|
|
||||||
if (window.scrollY > 15) {
|
|
||||||
setScrolled(true)
|
|
||||||
} else {
|
|
||||||
setScrolled(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.addEventListener('scroll', handleScroll)
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.removeEventListener('scroll', handleScroll)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<AppBar
|
|
||||||
position="fixed"
|
|
||||||
color={scrolled ? 'primary' : 'transparent'}
|
|
||||||
elevation={scrolled ? 4 : 0}
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
minHeight: '60px',
|
|
||||||
transition: 'background-color .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Container
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<NextLink href="/">
|
|
||||||
<EntGamers
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
/>
|
|
||||||
</NextLink>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
aria-label="menu"
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
aspectRatio: '1'
|
|
||||||
}}
|
|
||||||
onClick={() => { setOpenMenu(true) }}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faBars} size="xs" />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</AppBar>
|
|
||||||
<NoSsr>
|
|
||||||
<Drawer
|
|
||||||
open={openMenu}
|
|
||||||
onClose={() => { setOpenMenu(false) }}
|
|
||||||
anchor="right"
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={(theme) => ({
|
|
||||||
width: '100vw',
|
|
||||||
height: '100%',
|
|
||||||
[theme.breakpoints.up('xs')]: {
|
|
||||||
maxWidth: '300px'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
minHeight: '60px'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Divider />
|
|
||||||
<List
|
|
||||||
sx={{ paddingTop: '0' }}
|
|
||||||
>
|
|
||||||
{MenuItems.map(({ label, url }) => (
|
|
||||||
<ListItemButton
|
|
||||||
key={`menu-item-${label}`}
|
|
||||||
href={url}
|
|
||||||
component={NextLink}
|
|
||||||
selected={router.pathname === url}
|
|
||||||
>
|
|
||||||
<ListItemText primary={label} />
|
|
||||||
</ListItemButton>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
</Box>
|
|
||||||
</Drawer>
|
|
||||||
</NoSsr>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Header
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './Header'
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight'
|
|
||||||
import { Box, NoSsr, Typography } from '@mui/material'
|
|
||||||
import dynamic from 'next/dynamic'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import { type PositionJoinTeamProps } from '@interfaces'
|
|
||||||
|
|
||||||
const UnirseForm = dynamic(async () => await import('@components/pages/equipo/unirse/UnirseForm'), {
|
|
||||||
ssr: false,
|
|
||||||
suspense: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const PositionJoinTeam: FC<PositionJoinTeamProps> = (
|
|
||||||
{ benefits, description, requirements, title }
|
|
||||||
) => {
|
|
||||||
return (
|
|
||||||
<Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
marginBlock: '1rem'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1" align="center" gutterBottom>
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={theme => ({
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: '1fr',
|
|
||||||
gap: 2,
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
gridTemplateColumns: '1fr 1fr'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="h3" align="center" gutterBottom>
|
|
||||||
Rellenar formulario
|
|
||||||
</Typography>
|
|
||||||
<NoSsr>
|
|
||||||
<UnirseForm
|
|
||||||
role={title}
|
|
||||||
/>
|
|
||||||
</NoSsr>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Typography variant="h3" gutterBottom>
|
|
||||||
Requisitos
|
|
||||||
</Typography>
|
|
||||||
<ul className="fa-ul">
|
|
||||||
{requirements.map(({ title, description }, index) => (
|
|
||||||
<li key={index}>
|
|
||||||
<FontAwesomeIcon icon={faChevronRight} className="fa-li" />
|
|
||||||
<Typography variant="body1" gutterBottom>
|
|
||||||
<strong>{title}</strong>
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1" gutterBottom>
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<Typography variant="h3" gutterBottom>
|
|
||||||
Beneficios
|
|
||||||
</Typography>
|
|
||||||
<ul className="fa-ul">
|
|
||||||
{benefits.map(({ title, description }, index) => (
|
|
||||||
<li key={index}>
|
|
||||||
<FontAwesomeIcon icon={faChevronRight} className="fa-li" />
|
|
||||||
<Typography variant="body1" gutterBottom>
|
|
||||||
<strong>{title}</strong>
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1" gutterBottom>
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default PositionJoinTeam
|
|
||||||
@@ -1,133 +0,0 @@
|
|||||||
import { Box, Button, TextField, Typography } from '@mui/material'
|
|
||||||
import { useFormik } from 'formik'
|
|
||||||
import { useState, type FC } from 'react'
|
|
||||||
import { object, string } from 'yup'
|
|
||||||
|
|
||||||
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { type UnirseFormData, type UnirseFormProps } from '@interfaces'
|
|
||||||
|
|
||||||
const unirseFormSchema = object({
|
|
||||||
name: string().required('El nombre es requerido'),
|
|
||||||
email: string().email('El email no es válido').required('El email es requerido'),
|
|
||||||
role: string().required('El rol es requerido'),
|
|
||||||
discordUserName: string().matches(/^.{3,32}#[0-9]{4}$/, 'El formato correcto es userName#0000').required('El nombre de usuario de Discord es requerido'),
|
|
||||||
experience: string().required('La experiencia es requerida')
|
|
||||||
})
|
|
||||||
|
|
||||||
const UnirseForm: FC<UnirseFormProps> = ({ role }) => {
|
|
||||||
const [isSended, setIsSended] = useState(false)
|
|
||||||
const formik = useFormik<UnirseFormData>({
|
|
||||||
initialValues: {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
role: role ?? '',
|
|
||||||
discordUserName: '',
|
|
||||||
experience: ''
|
|
||||||
},
|
|
||||||
onSubmit: async (values) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/equipo/unirse/send-form', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(values)
|
|
||||||
})
|
|
||||||
if (response.ok) {
|
|
||||||
setIsSended(true)
|
|
||||||
formik.resetForm()
|
|
||||||
} else {
|
|
||||||
console.error('Error sending form')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
validationSchema: unirseFormSchema
|
|
||||||
})
|
|
||||||
return isSended
|
|
||||||
? (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'column',
|
|
||||||
marginBlock: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="body1" align="center" color={(theme) => theme.palette.success.main} gutterBottom>
|
|
||||||
¡Gracias por tu interés! Te contactaremos lo antes posible.
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
: (
|
|
||||||
<Box
|
|
||||||
component="form"
|
|
||||||
onSubmit={formik.handleSubmit}
|
|
||||||
>
|
|
||||||
<TextField
|
|
||||||
name="name"
|
|
||||||
label="Nombre"
|
|
||||||
placeholder="Escribe tu nombre"
|
|
||||||
value={formik.values.name}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error={formik.touched.name !== undefined && formik.errors.name !== undefined }
|
|
||||||
helperText={formik.touched.name !== undefined && formik.errors.name}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
name="email"
|
|
||||||
label="Correo electrónico"
|
|
||||||
placeholder="Usaremos este correo para contactarte"
|
|
||||||
value={formik.values.email}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error={formik.touched.email !== undefined && formik.errors.email !== undefined }
|
|
||||||
helperText={formik.touched.email !== undefined && formik.errors.email}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
name="discordUserName"
|
|
||||||
label="Nombre de usuario de Discord"
|
|
||||||
placeholder="userName#0000"
|
|
||||||
value={formik.values.discordUserName}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error={formik.touched.discordUserName !== undefined && formik.errors.discordUserName !== undefined }
|
|
||||||
helperText={formik.touched.discordUserName !== undefined && formik.errors.discordUserName}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
name="experience"
|
|
||||||
label="Experiencia"
|
|
||||||
placeholder="¿Tienes experiencia en el área? ¿Qué conocimientos tienes?"
|
|
||||||
value={formik.values.experience}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error={formik.touched.experience !== undefined && formik.errors.experience !== undefined }
|
|
||||||
helperText={formik.touched.experience !== undefined && formik.errors.experience}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
multiline
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
marginBlock: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
fullWidth
|
|
||||||
type="submit"
|
|
||||||
endIcon={formik.isSubmitting ? <FontAwesomeIcon icon={faSpinner} spin /> : undefined}
|
|
||||||
>
|
|
||||||
Enviar
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default UnirseForm
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
import { Box, Button, Container, Paper, Typography } from '@mui/material'
|
|
||||||
import Image from 'next/image'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import ClanesImage from '@assets/images/Clanes.png'
|
|
||||||
|
|
||||||
export interface ClanesProps {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const Clanes: FC<ClanesProps> = ({ description, title }) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id="clanes"
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url("/images/backgrounds/bricks.png")'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
variant='glass'
|
|
||||||
component={Container}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="h2"
|
|
||||||
align="center"
|
|
||||||
gutterBottom
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={(theme) => ({
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: '1fr',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
gridTemplateColumns: '1fr 1fr'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Image src={ClanesImage} alt="EntGamers" width={600} height={315} />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
textAlign: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="body1" gutterBottom >
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
<Button variant="contained" color="primary" LinkComponent={Link} component="a" href="/clanes">
|
|
||||||
Ver clanes
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Clanes
|
|
||||||
@@ -1,181 +0,0 @@
|
|||||||
import { Container, IconButton, Typography } from '@mui/material'
|
|
||||||
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import gsap, { Elastic, Linear } from 'gsap'
|
|
||||||
import ScrollTrigger from 'gsap/dist/ScrollTrigger'
|
|
||||||
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
|
|
||||||
import Image from 'next/image'
|
|
||||||
import { type FC, useEffect, useRef } from 'react'
|
|
||||||
|
|
||||||
import EntGamers from '@assets/images/EntGamers.png'
|
|
||||||
|
|
||||||
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
|
|
||||||
|
|
||||||
export interface HeroProps {
|
|
||||||
title: string
|
|
||||||
subtitle: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const Hero: FC<HeroProps> = ({ subtitle, title }) => {
|
|
||||||
const layer01 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer02 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer03 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer04 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer05 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer06 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const verMasButton = useRef<HTMLButtonElement | null>(null)
|
|
||||||
useEffect(() => {
|
|
||||||
const scrollTrigger = {
|
|
||||||
trigger: layer01.current,
|
|
||||||
start: 'top bottom',
|
|
||||||
end: 'bottom top',
|
|
||||||
toggleActions: 'play pause resume pause'
|
|
||||||
}
|
|
||||||
const timeLine = gsap.timeline({ duration: 1, repeat: -1, repeatDelay: 4, scrollTrigger })
|
|
||||||
const layer01Animation = gsap.to(layer01.current, { duration: 175, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer02Animation = gsap.to(layer02.current, { duration: 150, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer03Animation = gsap.to(layer03.current, { duration: 125, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer04Animation = gsap.to(layer04.current, { duration: 100, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer05Animation = gsap.to(layer05.current, { duration: 75, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer06Animation = gsap.to(layer06.current, { duration: 50, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
timeLine
|
|
||||||
.to(verMasButton.current, { y: '+=15', duration: 0.5 })
|
|
||||||
.to(verMasButton.current, { y: '-=15', ease: Elastic.easeOut.config(2, 0.1), duration: 3 })
|
|
||||||
return () => {
|
|
||||||
layer01Animation.kill()
|
|
||||||
layer02Animation.kill()
|
|
||||||
layer03Animation.kill()
|
|
||||||
layer04Animation.kill()
|
|
||||||
layer05Animation.kill()
|
|
||||||
layer06Animation.kill()
|
|
||||||
timeLine.kill()
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={layer01}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer01.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'top',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer02}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer02.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'bottom',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer03}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer03.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'bottom',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer04}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer04.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'bottom',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer05}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer05.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'bottom',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer06}
|
|
||||||
css={{
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer06.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'bottom',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Container
|
|
||||||
fixed
|
|
||||||
sx={(theme) => ({
|
|
||||||
display: 'grid',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
gridTemplateColumns: '1fr',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
gridTemplateColumns: '1fr 1fr'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Image src={EntGamers} alt="EntGamers" width={600} height={600} loading="eager" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h1" gutterBottom align="center">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h2" gutterBottom align="center">
|
|
||||||
{subtitle}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
<IconButton
|
|
||||||
ref={verMasButton}
|
|
||||||
sx={(theme) => ({
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '2rem',
|
|
||||||
right: '1rem',
|
|
||||||
aspectRatio: '1',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
bottom: '1rem',
|
|
||||||
right: 'calc(50% - 1rem)'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
onClick={() => {
|
|
||||||
gsap.to(window, { duration: 0.3, scrollTo: '#clanes' })
|
|
||||||
}}
|
|
||||||
color='primary'
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faArrowDown} fixedWidth />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Hero
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
// import { SocialSliderProps } from '@components/pages/home/socialNetworks/SocialSlider'
|
|
||||||
import { Container, Paper } from '@mui/material'
|
|
||||||
import gsap, { Linear } from 'gsap'
|
|
||||||
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
|
|
||||||
import ScrollTrigger from 'gsap/dist/ScrollTrigger'
|
|
||||||
import { type FC, useEffect, useRef } from 'react'
|
|
||||||
|
|
||||||
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
|
|
||||||
|
|
||||||
const SocialNetworks: FC = () => {
|
|
||||||
const layer01 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer02 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer03 = useRef<HTMLDivElement | null>(null)
|
|
||||||
const layer04 = useRef<HTMLDivElement | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const scrollTrigger = {
|
|
||||||
trigger: layer01.current,
|
|
||||||
start: 'top bottom',
|
|
||||||
end: 'bottom top',
|
|
||||||
toggleActions: 'play pause resume pause'
|
|
||||||
}
|
|
||||||
const layer02Animation = gsap.to(layer02.current, { duration: 150, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer03Animation = gsap.to(layer03.current, { duration: 60, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
const layer04Animation = gsap.to(layer04.current, { duration: 125, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
layer02Animation.kill()
|
|
||||||
layer03Animation.kill()
|
|
||||||
layer04Animation.kill()
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={layer01}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/SkyNightLayer01.png)',
|
|
||||||
backgroundPositionX: 'center',
|
|
||||||
backgroundPositionY: 'center',
|
|
||||||
backgroundSize: 'auto'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer02}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/SkyNightLayer02.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'center',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer03}
|
|
||||||
css={{
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/SkyNightLayer03.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'center',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref={layer04}
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/SkyNightLayer04.png)',
|
|
||||||
backgroundPositionX: '0',
|
|
||||||
backgroundPositionY: 'center',
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
component={Container}
|
|
||||||
variant='glass'
|
|
||||||
>
|
|
||||||
</Paper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SocialNetworks
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
import { Button, Container, Typography } from '@mui/material'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import ProfileCard, { type ProfileCardProps } from '@components/profiles/ProfileCard'
|
|
||||||
|
|
||||||
export interface TeamProps {
|
|
||||||
title: string
|
|
||||||
teamMembers: ProfileCardProps[]
|
|
||||||
viewTeamButtonText: string
|
|
||||||
joinTeamButtonText: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const Team: FC<TeamProps> = ({ title, teamMembers, joinTeamButtonText, viewTeamButtonText }) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
minHeight: '100vh',
|
|
||||||
backgroundImage: 'url(/images/backgrounds/MysteriousForest.jpg)',
|
|
||||||
backgroundPositionX: 'bottom',
|
|
||||||
backgroundPositionY: 'center',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundRepeat: 'repeat-x'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Container>
|
|
||||||
<Typography variant='h2' align="center" gutterBottom>{title}</Typography>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
||||||
gridGap: '1rem',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{teamMembers.map(({ avatar, biography, socialNetworks, userName, role }) => (
|
|
||||||
<ProfileCard
|
|
||||||
key={`profile-card-${userName}` }
|
|
||||||
avatar={avatar}
|
|
||||||
biography={biography}
|
|
||||||
socialNetworks={socialNetworks}
|
|
||||||
userName={userName}
|
|
||||||
role={role}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-around',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBlock: '16px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
href="/equipo"
|
|
||||||
variant="contained"
|
|
||||||
color="info"
|
|
||||||
component={NextLink}
|
|
||||||
>
|
|
||||||
{viewTeamButtonText}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
href="/equipo/unirse"
|
|
||||||
variant="contained"
|
|
||||||
color="success"
|
|
||||||
component={NextLink}
|
|
||||||
>
|
|
||||||
{joinTeamButtonText}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Team
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
import { faFacebook, faInstagram, faTiktok, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { Avatar, Card, CardContent, IconButton, Tooltip, Typography } from '@mui/material'
|
|
||||||
import NextImage from 'next/image'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import BadgeBook from '@assets/images/gaming/BadgeBook.png'
|
|
||||||
import BadgeShield from '@assets/images/gaming/BadgeShield.png'
|
|
||||||
import BadgeSword from '@assets/images/gaming/BadgeSword.png'
|
|
||||||
import ButtonA from '@assets/images/gaming/ButtonA.png'
|
|
||||||
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { type SocialLink } from '@interfaces'
|
|
||||||
|
|
||||||
export interface ProfileCardProps {
|
|
||||||
userName: string
|
|
||||||
biography: string
|
|
||||||
avatar: string
|
|
||||||
socialNetworks: SocialLink[]
|
|
||||||
role: 'user' | 'moderator' | 'collaborator' | 'admin'
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProfileCard: FC<ProfileCardProps> = ({ avatar, biography, socialNetworks, userName, role }) => {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
position: 'relative',
|
|
||||||
maxWidth: '300px',
|
|
||||||
overflow: 'visible'
|
|
||||||
}}
|
|
||||||
variant="gbaDialog"
|
|
||||||
>
|
|
||||||
{role !== 'user' && (
|
|
||||||
<Tooltip
|
|
||||||
title={role}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '5px',
|
|
||||||
right: '5px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NextImage
|
|
||||||
src={role === 'moderator' ? BadgeShield : role === 'collaborator' ? BadgeBook : BadgeSword}
|
|
||||||
alt={role}
|
|
||||||
width={30}
|
|
||||||
height={30}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: '-15px',
|
|
||||||
right: '0px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NextImage
|
|
||||||
src={ButtonA}
|
|
||||||
alt="Button A"
|
|
||||||
width={30}
|
|
||||||
height={30}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<CardContent
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexGrow: 0
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
sx={{
|
|
||||||
width: '120px',
|
|
||||||
height: '120px',
|
|
||||||
backgroundColor: 'transparent'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NextImage
|
|
||||||
src={avatar}
|
|
||||||
alt={userName}
|
|
||||||
width={150}
|
|
||||||
height={150}
|
|
||||||
/>
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
<Typography variant='h4' component="h3" align="center" sx={{ marginBlock: 1, flexGrow: 0, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
|
|
||||||
{userName}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='body1' align="center" sx={{ marginBlock: 1, flexGrow: 1 }}>
|
|
||||||
{biography.replace(/^(.{120}[^\s]*).*/, '$1…')}
|
|
||||||
</Typography>
|
|
||||||
<div
|
|
||||||
css={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
flexGrow: 0,
|
|
||||||
justifyContent: 'space-around',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginTop: 'auto'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{socialNetworks.map(({ socialNetwork, url, label }, i) => (
|
|
||||||
<Tooltip
|
|
||||||
key={`${userName}-${socialNetwork}-${i}`}
|
|
||||||
title={label}
|
|
||||||
placement="top"
|
|
||||||
arrow
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
color="inherit"
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
aspectRatio: '1'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{((socialNetwork) => {
|
|
||||||
switch (socialNetwork) {
|
|
||||||
case 'facebook':
|
|
||||||
return <FontAwesomeIcon icon={faFacebook} size="xs" />
|
|
||||||
case 'twitter':
|
|
||||||
return <FontAwesomeIcon icon={faTwitter} size="xs" />
|
|
||||||
case 'instagram':
|
|
||||||
return <FontAwesomeIcon icon={faInstagram} size="xs" />
|
|
||||||
case 'twitch':
|
|
||||||
return <FontAwesomeIcon icon={faTwitch} size="xs" />
|
|
||||||
case 'youtube':
|
|
||||||
return <FontAwesomeIcon icon={faYoutube} size="xs" />
|
|
||||||
case 'tiktok':
|
|
||||||
return <FontAwesomeIcon icon={faTiktok} size="xs" />
|
|
||||||
default:
|
|
||||||
return <FontAwesomeIcon icon={faGlobe} size="xs" />
|
|
||||||
}
|
|
||||||
})(socialNetwork)}
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default ProfileCard
|
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { css } from '@/styled-system/css'
|
||||||
|
import { AnimatePresence, motion } from 'framer-motion'
|
||||||
|
import { type FC, type ReactNode } from 'react'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
|
|
||||||
|
export interface BackDropProps {
|
||||||
|
children?: ReactNode
|
||||||
|
isOpen: boolean
|
||||||
|
onClickAway: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const BackDrop: FC<BackDropProps> = ({ isOpen, onClickAway, children }) => {
|
||||||
|
if (typeof window === 'undefined') return null
|
||||||
|
return createPortal((
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<motion.div
|
||||||
|
className={css({
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: 'modalBackdrop',
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
})}
|
||||||
|
onClick={(event) => {
|
||||||
|
if (event.target === event.currentTarget) {
|
||||||
|
onClickAway()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
), document.body)
|
||||||
|
}
|
||||||
|
export default BackDrop
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import { cx } from '@/styled-system/css'
|
||||||
|
import { typography, type TypographyVariantProps } from '@/styled-system/recipes'
|
||||||
|
import { type MergeOmitting } from '@/types/utilities'
|
||||||
|
import React, { type ElementType, type FC } from 'react'
|
||||||
|
|
||||||
|
type ComposedTypographyProps = MergeOmitting<React.HTMLAttributes<HTMLElement>, TypographyVariantProps>
|
||||||
|
|
||||||
|
export interface TypographyProps extends ComposedTypographyProps {
|
||||||
|
component?: ElementType
|
||||||
|
}
|
||||||
|
|
||||||
|
const variantToComponent = (variant: TypographyVariantProps['variant']): ElementType => {
|
||||||
|
switch (variant) {
|
||||||
|
case 'h1':
|
||||||
|
case 'h2':
|
||||||
|
case 'h3':
|
||||||
|
case 'h4':
|
||||||
|
case 'h5':
|
||||||
|
case 'h6':
|
||||||
|
return variant
|
||||||
|
case 'subtitle1':
|
||||||
|
case 'subtitle2':
|
||||||
|
return 'div'
|
||||||
|
case 'button':
|
||||||
|
case 'overline':
|
||||||
|
case 'srOnly':
|
||||||
|
case 'caption':
|
||||||
|
return 'span'
|
||||||
|
case 'body1':
|
||||||
|
case 'body2':
|
||||||
|
default:
|
||||||
|
return 'p'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isHeading = (text: string): boolean => {
|
||||||
|
return text.startsWith('h')
|
||||||
|
}
|
||||||
|
|
||||||
|
const Typography: FC<TypographyProps> = ({ children, className, component, ...rest }) => {
|
||||||
|
const [typographyRecipeArgs, allOtherTypographyProps] = typography.splitVariantProps(rest)
|
||||||
|
const Component = component ?? variantToComponent(typographyRecipeArgs.variant)
|
||||||
|
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||||
|
typographyRecipeArgs.color = typographyRecipeArgs.color !== undefined
|
||||||
|
? typographyRecipeArgs.color
|
||||||
|
: typeof typographyRecipeArgs.variant === 'string' && isHeading(typographyRecipeArgs.variant)
|
||||||
|
? 'primary'
|
||||||
|
: undefined
|
||||||
|
return (
|
||||||
|
<Component
|
||||||
|
className={cx(typography(typographyRecipeArgs), className)}
|
||||||
|
{...allOtherTypographyProps}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Component>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Typography
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { type ButtonProps } from '@mui/material'
|
|
||||||
|
|
||||||
export interface Link {
|
|
||||||
url: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Button extends Link {
|
|
||||||
variant: ButtonProps['variant']
|
|
||||||
color: ButtonProps['color']
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SocialLink extends Link {
|
|
||||||
socialNetwork: 'facebook' | 'twitter' | 'instagram' | 'twitch' | 'youtube' | 'tiktok' | string
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export * from './layouts'
|
|
||||||
export * from './pages'
|
|
||||||
export * from './seo'
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { type Link } from '@interfaces'
|
|
||||||
|
|
||||||
export interface FooterColumn {
|
|
||||||
title: string
|
|
||||||
links: Link[]
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import { type ReactNode } from 'react'
|
|
||||||
|
|
||||||
export interface ContainedProps {
|
|
||||||
children: ReactNode
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export * from './Footer'
|
|
||||||
export * from './contained'
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './unirse'
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './positionJoinTeam'
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { type EquipoUnirsePageProps } from '@interfaces'
|
|
||||||
|
|
||||||
export interface PositionJoinTeamProps {
|
|
||||||
title: EquipoUnirsePageProps['teamPositions'][number]['title']
|
|
||||||
description: EquipoUnirsePageProps['teamPositions'][number]['description']
|
|
||||||
requirements: EquipoUnirsePageProps['teamPositions'][number]['requirements']
|
|
||||||
benefits: EquipoUnirsePageProps['teamPositions'][number]['benefits']
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './equipo/unirse'
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
export interface TypeImage {
|
|
||||||
url: string
|
|
||||||
secureUrl?: number
|
|
||||||
type?: string
|
|
||||||
width?: number
|
|
||||||
height?: number
|
|
||||||
alt?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypeProfile {
|
|
||||||
firstName: string
|
|
||||||
lastName?: string
|
|
||||||
username?: string
|
|
||||||
gender?: 'male' | 'female' | string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypeVideo {
|
|
||||||
url: string
|
|
||||||
secureUrl?: string
|
|
||||||
type?: string
|
|
||||||
width?: string
|
|
||||||
height?: string
|
|
||||||
alt?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypeAudio {
|
|
||||||
url: string
|
|
||||||
secureUrl?: string
|
|
||||||
type?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SeoTypeProfile extends TypeProfile {
|
|
||||||
type: 'profile'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypeMusicSong {
|
|
||||||
type: 'music.song'
|
|
||||||
duration: number
|
|
||||||
album: string
|
|
||||||
albumDisc: number
|
|
||||||
albumTrack: number
|
|
||||||
musician: string | string[] | TypeProfile | TypeProfile[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TypeMusicAlbum {
|
|
||||||
type: 'music.album'
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Seo = {
|
|
||||||
title?: string
|
|
||||||
description?: string
|
|
||||||
image?: string | string[] | TypeImage | TypeImage[]
|
|
||||||
url?: string
|
|
||||||
audio?: string | string[] | TypeAudio | TypeAudio[]
|
|
||||||
determiner?: string
|
|
||||||
locale?: string
|
|
||||||
localeAlternate?: string
|
|
||||||
siteName?: string
|
|
||||||
video?: string | string[] | TypeVideo | TypeVideo[]
|
|
||||||
} & (
|
|
||||||
| SeoTypeProfile
|
|
||||||
| TypeMusicSong
|
|
||||||
)
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export * from './common'
|
|
||||||
export * from './components'
|
|
||||||
export * from './models'
|
|
||||||
export * from './pages'
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './profile'
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { type SocialLink } from '@interfaces'
|
|
||||||
|
|
||||||
export interface Profile {
|
|
||||||
id: string
|
|
||||||
userName: string
|
|
||||||
email: string
|
|
||||||
biography: string
|
|
||||||
avatar: string
|
|
||||||
socialNetworks: SocialLink[]
|
|
||||||
role: 'user' | 'admin' | 'moderator' | 'collaborator'
|
|
||||||
createdAt: string
|
|
||||||
updatedAt: string
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { type SeoProps as Seo } from '@components/Seo' // Temporary taken from components to later implement it in the interfaces folder
|
|
||||||
|
|
||||||
export interface ClanesPageProps {
|
|
||||||
seo?: Seo
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
benefitsTitle: string
|
|
||||||
benefitsDescription: string
|
|
||||||
benefits: string[]
|
|
||||||
requirementsTitle: string
|
|
||||||
requirementsDescription: string
|
|
||||||
requirements: string[]
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { type SeoProps as Seo } from '@components/Seo' // Temporary taken from components to later implement it in the interfaces folder
|
|
||||||
|
|
||||||
export interface EquipoPageProps {
|
|
||||||
seo?: Seo
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
administrationTitle: string
|
|
||||||
administrationDescription: string
|
|
||||||
collaboratorsTitle: string
|
|
||||||
collaboratorsDescription: string
|
|
||||||
moderatorsTitle: string
|
|
||||||
moderatorsDescription: string
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './unirse'
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { type SeoProps as Seo } from '@components/Seo' // Temporary taken from components to later implement it in the interfaces folder
|
|
||||||
|
|
||||||
export interface TeamPositionRequirements {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TeamPositionBenefits {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TeamPosition {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
requirements: TeamPositionRequirements[]
|
|
||||||
benefits: TeamPositionBenefits[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EquipoUnirsePageProps {
|
|
||||||
seo?: Seo
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
teamPositions: TeamPosition[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UnirseFormData {
|
|
||||||
name: string
|
|
||||||
email: string
|
|
||||||
discordUserName: string
|
|
||||||
experience: string
|
|
||||||
role: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UnirseFormProps {
|
|
||||||
role?: string
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export * from './clanes'
|
|
||||||
export * from './equipo'
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import Contained from '@components/layouts/Contained'
|
|
||||||
import { Box, Button, Typography } from '@mui/material'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
const Page404: FC = () => {
|
|
||||||
return (
|
|
||||||
<Contained>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
minHeight: 'calc(100vh - 120px)',
|
|
||||||
paddingBlock: 1
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="h1"
|
|
||||||
align="center"
|
|
||||||
sx={{
|
|
||||||
fontSize: '100px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
404
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h2"
|
|
||||||
align="center"
|
|
||||||
sx={(theme) => ({
|
|
||||||
color: theme.palette.text.primary
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
El árbol que buscas no está aquí
|
|
||||||
</Typography>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
marginBlock: 1
|
|
||||||
}}
|
|
||||||
href="/"
|
|
||||||
component={NextLink}
|
|
||||||
variant="contained"
|
|
||||||
>
|
|
||||||
Volver al inicio
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Contained>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Page404
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import Seo from '@components/Seo'
|
|
||||||
import { config } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import '@fortawesome/fontawesome-svg-core/styles.css'
|
|
||||||
import { CssBaseline, ThemeProvider } from '@mui/material'
|
|
||||||
import theme from '@styles/muiTheme'
|
|
||||||
import type { AppProps } from 'next/app'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
config.autoAddCss = false
|
|
||||||
|
|
||||||
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
|
|
||||||
return (
|
|
||||||
<ThemeProvider theme={theme}>
|
|
||||||
<CssBaseline/>
|
|
||||||
<Seo
|
|
||||||
title='EntGamers'
|
|
||||||
description='Comunidad Gamer'
|
|
||||||
image='/images/defaults/og.jpg'
|
|
||||||
/>
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</ThemeProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MyApp
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import Contained from '@components/layouts/Contained'
|
|
||||||
import { Typography } from '@mui/material'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
const About: FC = () => {
|
|
||||||
return (
|
|
||||||
<Contained>
|
|
||||||
<Typography variant='h1' align="center" gutterBottom>Sobre EntGamers</Typography>
|
|
||||||
<Typography variant='h2' gutterBottom>¿Qué es EntGamers?</Typography>
|
|
||||||
<Typography variant='body1'>
|
|
||||||
EntGamers es una comunidad de jugadores y para jugadores, surge del deseo de tener un espacio seguro, físico o virtual, para encontrar y conocer gente con los mismos gustos. Desde la idea inicial ha ido evolucionando con el paso del tiempo y el paso por otras comunidades hasta convertirse en lo que es ahora.
|
|
||||||
</Typography>
|
|
||||||
</Contained>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default About
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { Box, Typography } from '@mui/material'
|
|
||||||
import type { GetStaticProps, InferGetStaticPropsType } from 'next'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import Contained from '@components/layouts/Contained'
|
|
||||||
import { type ClanesPageProps } from '@interfaces'
|
|
||||||
import Seo from '@components/Seo'
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps<ClanesPageProps> = async () => {
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
seo: {
|
|
||||||
title: 'Clanes',
|
|
||||||
description: 'Los clanes son espacios donde compartir nuestros gustos con otros usuarios'
|
|
||||||
},
|
|
||||||
title: 'Clanes',
|
|
||||||
description: '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.',
|
|
||||||
benefitsTitle: 'Beneficios de los clanes',
|
|
||||||
benefitsDescription: 'La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.',
|
|
||||||
benefits: [
|
|
||||||
'Espacio en servidor de Discord',
|
|
||||||
'Apoyo de la administración con proyectos y eventos',
|
|
||||||
'Apoyo del equipo de moderación'
|
|
||||||
],
|
|
||||||
requirementsTitle: 'Requisitos para formar un clan',
|
|
||||||
requirementsDescription: 'Todos los clanes deben cumplir con los siguientes requisitos:',
|
|
||||||
requirements: [
|
|
||||||
'Tener un encargado',
|
|
||||||
'Ser inclusivos',
|
|
||||||
'Crear un reglamento interno (De acuerdo a la temática del clan)',
|
|
||||||
'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'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Clanes: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ benefits, benefitsDescription, benefitsTitle, description, requirements, requirementsDescription, requirementsTitle, seo, title }) => {
|
|
||||||
return (
|
|
||||||
<Contained>
|
|
||||||
<Seo {...seo} />
|
|
||||||
<Typography variant="h1" align="center" gutterBottom >
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={(theme) => ({
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(1fr)',
|
|
||||||
gridGap: 2,
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
gridTemplateColumns: 'repeat(2, 1fr)'
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom >
|
|
||||||
{benefitsTitle}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{benefitsDescription}
|
|
||||||
</Typography>
|
|
||||||
<ul className="fa-ul">
|
|
||||||
{benefits.map((benefit, index) => (
|
|
||||||
<li key={index}>
|
|
||||||
<FontAwesomeIcon icon={faChevronRight} listItem />
|
|
||||||
{benefit}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom>
|
|
||||||
{requirementsTitle}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{requirementsDescription}
|
|
||||||
</Typography>
|
|
||||||
<ul className="fa-ul">
|
|
||||||
{requirements.map((requirement, index) => (
|
|
||||||
<li key={index}>
|
|
||||||
<FontAwesomeIcon icon={faChevronRight} listItem />
|
|
||||||
{requirement}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</Box>
|
|
||||||
<Typography variant="body2" color={(theme) => theme.palette.warning.main}>
|
|
||||||
De momento el sistema de clanes está en desarrollo, por lo que no podemos ofrecerte acceso a los clanes hasta que esté listo. Sin embargo, puedes ir a nuestro servidor de discord para ver los clanes que tenemos disponibles, unirte a uno y convivir con otros usuarios.
|
|
||||||
</Typography>
|
|
||||||
</Contained>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Clanes
|
|
||||||
@@ -1,225 +0,0 @@
|
|||||||
import { Box, Button, Typography } from '@mui/material'
|
|
||||||
import { type GetStaticProps, type InferGetStaticPropsType } from 'next'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { type FC } from 'react'
|
|
||||||
|
|
||||||
import Seo from '@components/Seo'
|
|
||||||
import Contained from '@components/layouts/Contained'
|
|
||||||
import ProfileCard, { type ProfileCardProps } from '@components/profiles/ProfileCard'
|
|
||||||
import { type EquipoPageProps } from '@interfaces'
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps<EquipoPageProps> = async () => {
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
seo: {
|
|
||||||
title: 'Equipo',
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
title: 'Equipo',
|
|
||||||
description: '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!',
|
|
||||||
administrationTitle: 'Administradores',
|
|
||||||
administrationDescription: '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.',
|
|
||||||
moderatorsTitle: 'Moderadores',
|
|
||||||
moderatorsDescription: '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.',
|
|
||||||
collaboratorsTitle: 'Colaboradores',
|
|
||||||
collaboratorsDescription: 'Los colaboradores son los encargados de crear contenido para la comunidad, como artículos, tutoriales, vídeos, etc.'
|
|
||||||
},
|
|
||||||
revalidate: 300
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Equipo: FC<InferGetStaticPropsType<typeof getStaticProps>> = (
|
|
||||||
{ administrationDescription, administrationTitle, collaboratorsDescription, collaboratorsTitle, description, moderatorsDescription, moderatorsTitle, title, seo }
|
|
||||||
) => {
|
|
||||||
const administrators: ProfileCardProps[] = [
|
|
||||||
{
|
|
||||||
avatar: '/images/team/SrJuggernaut.png',
|
|
||||||
biography: 'Soy desarrollador web y me gusta jugar videojuegos.',
|
|
||||||
userName: 'SrJuggernaut',
|
|
||||||
role: 'admin',
|
|
||||||
socialNetworks: [
|
|
||||||
{ label: 'SrJuggernaut Facebook', socialNetwork: 'facebook', url: 'https://www.facebook.com/SrJuggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Twitter', socialNetwork: 'twitter', url: 'https://twitter.com/SrJuggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Youtube', socialNetwork: 'youtube', url: 'https://youtube.com/juggernautplays' },
|
|
||||||
{ label: 'SrJuggernaut Twitch', socialNetwork: 'twitch', url: 'https://twitch.tv/juggernautplays' },
|
|
||||||
{ label: 'SrJuggernaut Instagram', socialNetwork: 'instagram', url: 'https://www.instagram.com/sr_juggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Sitio web', socialNetwork: 'webpage', url: 'https://srjuggernaut.dev' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const moderators: ProfileCardProps[] = []
|
|
||||||
const collaborators: ProfileCardProps[] = []
|
|
||||||
return (
|
|
||||||
<Contained>
|
|
||||||
<Seo {...seo} />
|
|
||||||
<Typography variant="h1" align="center" gutterBottom >
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom >
|
|
||||||
{administrationTitle}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{administrationDescription}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
||||||
gridGap: '1rem',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{administrators.length > 0
|
|
||||||
? administrators.map(({ avatar, biography, socialNetworks, userName, role }) => (
|
|
||||||
<ProfileCard
|
|
||||||
key={`profile-card-${userName}`}
|
|
||||||
avatar={avatar}
|
|
||||||
biography={biography}
|
|
||||||
socialNetworks={socialNetworks}
|
|
||||||
userName={userName}
|
|
||||||
role={role}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
|
|
||||||
: (
|
|
||||||
<>
|
|
||||||
<Typography variant="body2" color={(theme) => theme.palette.warning.main } align="center" gutterBottom >
|
|
||||||
Ups, parece que ahora mismo no hay administradores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser administrador, puedes hacer click en el botón de abajo.
|
|
||||||
</Typography>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
href="/equipo/unirse"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
component={NextLink}
|
|
||||||
>
|
|
||||||
Quiero ser administrador
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom >
|
|
||||||
{moderatorsTitle}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{moderatorsDescription}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
||||||
gridGap: '1rem',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{moderators.length > 0
|
|
||||||
? moderators.map(({ avatar, biography, socialNetworks, userName, role }) => (
|
|
||||||
<ProfileCard
|
|
||||||
key={`profile-card-${userName}`}
|
|
||||||
avatar={avatar}
|
|
||||||
biography={biography}
|
|
||||||
socialNetworks={socialNetworks}
|
|
||||||
userName={userName}
|
|
||||||
role={role}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
: (
|
|
||||||
<>
|
|
||||||
<Typography variant="body2" color={(theme) => theme.palette.warning.main } align="center" gutterBottom >
|
|
||||||
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
href="/equipo/unirse"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
component={NextLink}
|
|
||||||
>
|
|
||||||
Quiero ser moderador
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Typography variant="h2" align="center" gutterBottom >
|
|
||||||
{collaboratorsTitle}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{collaboratorsDescription}
|
|
||||||
</Typography>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
||||||
gridGap: '1rem',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{collaborators.length > 0
|
|
||||||
? collaborators.map(({ avatar, biography, socialNetworks, userName, role }) => (
|
|
||||||
<ProfileCard
|
|
||||||
key={`profile-card-${userName}`}
|
|
||||||
avatar={avatar}
|
|
||||||
biography={biography}
|
|
||||||
socialNetworks={socialNetworks}
|
|
||||||
userName={userName}
|
|
||||||
role={role}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
: (
|
|
||||||
<>
|
|
||||||
<Typography variant="body2" color={(theme) => theme.palette.warning.main } align="center" gutterBottom >
|
|
||||||
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
justifyItems: 'center',
|
|
||||||
marginBlock: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
href="/equipo/unirse"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
component={NextLink}
|
|
||||||
>
|
|
||||||
Quiero ser colaborador
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
</Contained>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Equipo
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
import { Paper, Tab, Tabs, type Theme, Typography, useMediaQuery } from '@mui/material'
|
|
||||||
import { type GetStaticProps, type GetStaticPropsResult, type InferGetStaticPropsType } from 'next'
|
|
||||||
import { type FC, useState } from 'react'
|
|
||||||
|
|
||||||
import Contained from '@components/layouts/Contained'
|
|
||||||
import Seo from '@components/Seo'
|
|
||||||
import { type EquipoUnirsePageProps } from '@interfaces'
|
|
||||||
|
|
||||||
import 'swiper/css'
|
|
||||||
import 'swiper/css/virtual'
|
|
||||||
|
|
||||||
export const getStaticProps: GetStaticProps<EquipoUnirsePageProps> = async (): Promise<GetStaticPropsResult<EquipoUnirsePageProps>> => {
|
|
||||||
const props: EquipoUnirsePageProps = {
|
|
||||||
seo: {
|
|
||||||
title: 'Unirse al equipo',
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
title: 'Únete al Bosque',
|
|
||||||
description: '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.',
|
|
||||||
teamPositions: [
|
|
||||||
{
|
|
||||||
title: 'Administradores',
|
|
||||||
description: '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.',
|
|
||||||
requirements: [
|
|
||||||
{
|
|
||||||
title: 'Profesionalismo',
|
|
||||||
description: '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.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Constancia',
|
|
||||||
description: 'La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Proactividad',
|
|
||||||
description: '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.'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
benefits: [
|
|
||||||
{
|
|
||||||
title: 'Experiencia',
|
|
||||||
description: '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.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Acceso a software usado en los proyectos',
|
|
||||||
description: 'La comunidad tiene como objetivo proveer acceso al software usado para sus actividades a sus miembros.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Capacitación',
|
|
||||||
description: 'La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Moderadores',
|
|
||||||
description: '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.',
|
|
||||||
requirements: [
|
|
||||||
{
|
|
||||||
title: 'Imparcialidad',
|
|
||||||
description: 'La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
benefits: [
|
|
||||||
{
|
|
||||||
title: 'Experiencia',
|
|
||||||
description: '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.'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Colaboradores',
|
|
||||||
description: 'Los colaboradores son quienes se encargan de la creación de contenido para la comunidad, como videos, artículos, etc.',
|
|
||||||
requirements: [
|
|
||||||
{
|
|
||||||
title: 'Creatividad',
|
|
||||||
description: 'La comunidad busca gente que pueda aportar ideas y contenido de calidad para la comunidad.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Profesionalismo',
|
|
||||||
description: '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.'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
benefits: [
|
|
||||||
{
|
|
||||||
title: 'Experiencia',
|
|
||||||
description: '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.'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
props
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Unirse: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ title, seo, description, teamPositions }) => {
|
|
||||||
const [currentTab, setCurrentTab] = useState(0)
|
|
||||||
|
|
||||||
const isMediumOrBigger = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'))
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Contained>
|
|
||||||
<Seo {...seo} />
|
|
||||||
<Typography variant="h1" align="center" gutterBottom >
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
{description}
|
|
||||||
</Typography>
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
marginBlock: 1
|
|
||||||
}}
|
|
||||||
elevation={0}
|
|
||||||
>
|
|
||||||
<Tabs
|
|
||||||
value={currentTab}
|
|
||||||
onChange={(_, value) => { setCurrentTab(value) }}
|
|
||||||
variant={isMediumOrBigger ? 'fullWidth' : 'scrollable'}
|
|
||||||
scrollButtons
|
|
||||||
allowScrollButtonsMobile
|
|
||||||
aria-label="Unirse al equipo"
|
|
||||||
>
|
|
||||||
{teamPositions.map((position, index) => (
|
|
||||||
<Tab key={index} label={position.title} id={`pestaña-${position.title.replace(' ', '-')}`} aria-controls={`panel-pestaña-${position.title.replace(' ', '-')}`} />
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
</Paper>
|
|
||||||
|
|
||||||
</Contained>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Unirse
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import Seo from '@components/Seo'
|
|
||||||
import Footer from '@components/layouts/Footer'
|
|
||||||
import Header from '@components/layouts/Header'
|
|
||||||
import Clanes from '@components/pages/home/Clanes'
|
|
||||||
import Hero from '@components/pages/home/Hero'
|
|
||||||
import Team from '@components/pages/home/Team'
|
|
||||||
import type { NextPage } from 'next'
|
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Seo
|
|
||||||
title='Home'
|
|
||||||
description='Comunidad Gamer'
|
|
||||||
image='/images/defaults/og.jpg'
|
|
||||||
/>
|
|
||||||
<Header />
|
|
||||||
<Hero
|
|
||||||
title="EntGamers"
|
|
||||||
subtitle="Comunidad de y para los gamers"
|
|
||||||
/>
|
|
||||||
<Clanes
|
|
||||||
title='Clanes'
|
|
||||||
description='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.'
|
|
||||||
/>
|
|
||||||
<Team
|
|
||||||
title='Equipo'
|
|
||||||
teamMembers={[
|
|
||||||
{
|
|
||||||
avatar: '/images/team/SrJuggernaut.png',
|
|
||||||
biography: 'Soy desarrollador web y me gusta jugar videojuegos.',
|
|
||||||
userName: 'SrJuggernaut',
|
|
||||||
role: 'admin',
|
|
||||||
socialNetworks: [
|
|
||||||
{ label: 'SrJuggernaut Facebook', socialNetwork: 'facebook', url: 'https://www.facebook.com/SrJuggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Twitter', socialNetwork: 'twitter', url: 'https://twitter.com/SrJuggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Youtube', socialNetwork: 'youtube', url: 'https://youtube.com/juggernautplays' },
|
|
||||||
{ label: 'SrJuggernaut Twitch', socialNetwork: 'twitch', url: 'https://twitch.tv/juggernautplays' },
|
|
||||||
{ label: 'SrJuggernaut Instagram', socialNetwork: 'instagram', url: 'https://www.instagram.com/sr_juggernaut' },
|
|
||||||
{ label: 'SrJuggernaut Sitio web', socialNetwork: 'webpage', url: 'https://srjuggernaut.dev' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
viewTeamButtonText="Ve el equipo"
|
|
||||||
joinTeamButtonText="Únete al equipo"
|
|
||||||
/>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Home
|
|
||||||
@@ -1,241 +0,0 @@
|
|||||||
import { createTheme, type Interpolation, type Theme } from '@mui/material'
|
|
||||||
|
|
||||||
const glassStyle: Interpolation<{ theme: Theme }> = {
|
|
||||||
background: 'rgba( 28, 30, 33, 0.45 )',
|
|
||||||
boxShadow: '0 8px 32px 0 rgba( 31, 38, 135, 0.37 )',
|
|
||||||
backdropFilter: 'blur( 8px )',
|
|
||||||
borderRadius: '8px',
|
|
||||||
border: '1px solid rgba( 31, 38, 135, 0.18 )',
|
|
||||||
textShadow: '1px 1px 5px rgba(31, 38, 135, 0.60)'
|
|
||||||
}
|
|
||||||
|
|
||||||
const gbaStyle: Interpolation<{ theme: Theme }> = {
|
|
||||||
background: '#F8F8F8',
|
|
||||||
border: '2px solid #76604E',
|
|
||||||
borderRadius: '6px',
|
|
||||||
boxShadow: '2px 2px 0px #57899A, inset 0px 0px 0px 4px #D6E1F9',
|
|
||||||
color: '#010206'
|
|
||||||
}
|
|
||||||
|
|
||||||
const theme = createTheme({
|
|
||||||
components: {
|
|
||||||
MuiTypography: {
|
|
||||||
defaultProps: {
|
|
||||||
variantMapping: {
|
|
||||||
h1: 'h1',
|
|
||||||
h2: 'h2',
|
|
||||||
h3: 'h3',
|
|
||||||
h4: 'h4',
|
|
||||||
h5: 'h5',
|
|
||||||
h6: 'h6',
|
|
||||||
subtitle1: 'h2',
|
|
||||||
subtitle2: 'h3',
|
|
||||||
body1: 'p',
|
|
||||||
body2: 'span'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
MuiCssBaseline: {
|
|
||||||
styleOverrides: `
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
/* open-sans-300 - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
src: local(''),
|
|
||||||
url('/fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
||||||
url('/fonts/open-sans-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
||||||
}
|
|
||||||
/* open-sans-regular - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local(''),
|
|
||||||
url('/fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
||||||
url('/fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
||||||
}
|
|
||||||
/* open-sans-500 - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
src: local(''),
|
|
||||||
url('/fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
||||||
url('/fonts/open-sans-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
||||||
}
|
|
||||||
/* open-sans-700 - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local(''),
|
|
||||||
url('/fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
||||||
url('/fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
||||||
}
|
|
||||||
/* permanent-marker-regular - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Permanent Marker';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local(''),
|
|
||||||
url('/fonts/permanent-marker-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
||||||
url('/fonts/permanent-marker-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
||||||
}
|
|
||||||
:root {
|
|
||||||
--swiper-theme-color: #39B94A !important;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
},
|
|
||||||
MuiPaper: {
|
|
||||||
variants: [
|
|
||||||
{
|
|
||||||
props: { variant: 'glass' },
|
|
||||||
style: glassStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
props: { variant: 'gbaDialog' },
|
|
||||||
style: gbaStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
MuiCard: {
|
|
||||||
variants: [
|
|
||||||
{
|
|
||||||
props: { variant: 'glass' },
|
|
||||||
style: glassStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
props: { variant: 'gbaDialog' },
|
|
||||||
style: gbaStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
MuiContainer: {
|
|
||||||
defaultProps: {
|
|
||||||
fixed: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
MuiLink: {
|
|
||||||
defaultProps: {
|
|
||||||
underline: 'none'
|
|
||||||
},
|
|
||||||
styleOverrides: {
|
|
||||||
root: {
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontWeight: 500
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
palette: {
|
|
||||||
mode: 'dark',
|
|
||||||
background: {
|
|
||||||
default: '#1C1E21',
|
|
||||||
paper: '#313538'
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
primary: '#EFFAF0',
|
|
||||||
secondary: '#EFFAF0',
|
|
||||||
disabled: '#313538'
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
main: '#39B94A',
|
|
||||||
contrastText: '#1c1e21'
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
main: '#39b98a'
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
main: '#56CC9D'
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
main: '#6CC3D5'
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
main: '#FFCE67'
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
main: '#FF7851'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
typography: {
|
|
||||||
fontFamily: 'Open Sans',
|
|
||||||
fontSize: 16,
|
|
||||||
h1: {
|
|
||||||
fontSize: '2.5rem',
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
h2: {
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontSize: '2rem',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
h3: {
|
|
||||||
fontSize: '1.75rem',
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
h4: {
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontSize: '1.5rem',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
h5: {
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontSize: '1.25rem',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
h6: {
|
|
||||||
fontSize: '1rem',
|
|
||||||
fontFamily: 'Permanent Marker',
|
|
||||||
fontWeight: 400,
|
|
||||||
WebkitTextStroke: '1px #010206',
|
|
||||||
color: '#39B94A'
|
|
||||||
},
|
|
||||||
subtitle1: {
|
|
||||||
fontFamily: 'Open Sans',
|
|
||||||
fontSize: '2rem',
|
|
||||||
fontWeight: 400
|
|
||||||
},
|
|
||||||
subtitle2: {
|
|
||||||
fontFamily: 'Open Sans',
|
|
||||||
fontSize: '1.75rem',
|
|
||||||
fontWeight: 400
|
|
||||||
},
|
|
||||||
body1: {
|
|
||||||
fontSize: '1rem'
|
|
||||||
},
|
|
||||||
body2: {
|
|
||||||
fontSize: '0.88rem'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
fontWeight: 400,
|
|
||||||
fontSize: '1rem',
|
|
||||||
textTransform: 'none'
|
|
||||||
},
|
|
||||||
caption: {
|
|
||||||
fontSize: '.85rem'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
shape: {
|
|
||||||
borderRadius: 4
|
|
||||||
},
|
|
||||||
spacing: 16
|
|
||||||
})
|
|
||||||
|
|
||||||
export default theme
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export type MergeOmitting<ReplaceableType, ReplacerType> = Omit<ReplaceableType, keyof ReplacerType> & ReplacerType
|
||||||
+3
-34
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es6",
|
||||||
"lib": [
|
"lib": [
|
||||||
"dom",
|
"dom",
|
||||||
"dom.iterable",
|
"dom.iterable",
|
||||||
@@ -17,42 +17,11 @@
|
|||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"jsxImportSource": "@emotion/react",
|
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"baseUrl": "src",
|
"baseUrl": "src",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@adapters/*": [
|
"@/*": [
|
||||||
"adapters/*"
|
"*"
|
||||||
],
|
|
||||||
"@assets/*": [
|
|
||||||
"assets/*"
|
|
||||||
],
|
|
||||||
"@components/*": [
|
|
||||||
"components/*"
|
|
||||||
],
|
|
||||||
"@contexts/*": [
|
|
||||||
"contexts/*"
|
|
||||||
],
|
|
||||||
"@hooks/*": [
|
|
||||||
"hooks/*"
|
|
||||||
],
|
|
||||||
"@interfaces": [
|
|
||||||
"interfaces/"
|
|
||||||
],
|
|
||||||
"@pages/*": [
|
|
||||||
"pages/*"
|
|
||||||
],
|
|
||||||
"@public/*": [
|
|
||||||
"../public/*"
|
|
||||||
],
|
|
||||||
"@services/*": [
|
|
||||||
"services/*"
|
|
||||||
],
|
|
||||||
"@styles/*": [
|
|
||||||
"styles/*"
|
|
||||||
],
|
|
||||||
"@utilities/*": [
|
|
||||||
"utilities/*"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"typeRoots": [
|
"typeRoots": [
|
||||||
|
|||||||
Reference in New Issue
Block a user