feat: static site
* feat: mui support & basic theming * feat: entgamers favicon * feat: public images until dynamic content can be used * feat: entgamers & gaming assets * feat: eslint extra rules * feat: mui theme modifications * feat: fontawesome, gsap, bundle analyzer * feat: common interfaces * feat: basic layout * chore: upadted dependencies * chore: updated dependencies * feat: updated link styles * feat: layout now have better interfaces * feat: basic seo component * feat: static website * feat: env variable rules in .gitignore * feat: added lint to pre-commit
This commit is contained in:
GitHub
@@ -0,0 +1,3 @@
|
|||||||
|
SITE_NAME="EntGamers"
|
||||||
|
|
||||||
|
DISCORD_JOIN_WEBHOOK_URL="https://discord.com/api/webhooks/XXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
|
||||||
+6
-1
@@ -18,6 +18,7 @@
|
|||||||
},
|
},
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"react",
|
"react",
|
||||||
|
"@emotion",
|
||||||
"@typescript-eslint"
|
"@typescript-eslint"
|
||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
@@ -37,7 +38,11 @@
|
|||||||
".tsx"
|
".tsx"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
"no-unused-vars": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "error",
|
||||||
|
"@emotion/pkg-renaming": "error",
|
||||||
|
"react/no-unknown-property": ["error", { "ignore": ["css"] }]
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"react": {
|
"react": {
|
||||||
|
|||||||
+2
-4
@@ -27,10 +27,8 @@ yarn-error.log*
|
|||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env
|
.env
|
||||||
.env.local
|
.env.*
|
||||||
.env.development.local
|
!.env.example
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|||||||
Executable
+4
@@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npm run lint
|
||||||
+7
-2
@@ -1,6 +1,11 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
||||||
|
enabled: process.env.ANALYZE === 'true',
|
||||||
|
openAnalyzer: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const nextConfig = withBundleAnalyzer({
|
||||||
reactStrictMode: true
|
reactStrictMode: true
|
||||||
}
|
})
|
||||||
|
|
||||||
module.exports = nextConfig
|
module.exports = nextConfig
|
||||||
|
|||||||
+29
-14
@@ -10,26 +10,41 @@
|
|||||||
"postinstall": "husky install"
|
"postinstall": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "12.2.5",
|
"@emotion/react": "^11.10.4",
|
||||||
|
"@emotion/styled": "^11.10.4",
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^6.2.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||||
|
"@mui/material": "^5.10.6",
|
||||||
|
"formik": "^2.2.9",
|
||||||
|
"gsap": "^3.11.1",
|
||||||
|
"next": "12.3.1",
|
||||||
|
"next-connect": "^0.13.0",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0",
|
||||||
|
"sharp": "^0.31.0",
|
||||||
|
"swiper": "^8.4.2",
|
||||||
|
"yup": "^0.32.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.0.3",
|
"@commitlint/cli": "^17.1.2",
|
||||||
"@commitlint/config-conventional": "^17.0.3",
|
"@commitlint/config-conventional": "^17.1.0",
|
||||||
"@types/node": "18.7.3",
|
"@emotion/eslint-plugin": "^11.10.0",
|
||||||
"@types/react": "18.0.17",
|
"@next/bundle-analyzer": "^12.3.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
"@types/node": "18.7.18",
|
||||||
"@typescript-eslint/parser": "^5.33.0",
|
"@types/react": "18.0.20",
|
||||||
"eslint": "^8.0.1",
|
"@typescript-eslint/eslint-plugin": "^5.38.0",
|
||||||
"eslint-config-next": "12.2.5",
|
"@typescript-eslint/parser": "^5.38.0",
|
||||||
|
"eslint": "^8.23.1",
|
||||||
|
"eslint-config-next": "12.3.1",
|
||||||
"eslint-config-standard": "^17.0.0",
|
"eslint-config-standard": "^17.0.0",
|
||||||
"eslint-plugin-import": "^2.25.2",
|
"eslint-plugin-import": "^2.25.2",
|
||||||
"eslint-plugin-n": "^15.0.0",
|
"eslint-plugin-n": "^15.2.5",
|
||||||
"eslint-plugin-node": "^11.1.0",
|
"eslint-plugin-node": "^11.1.0",
|
||||||
"eslint-plugin-promise": "^6.0.0",
|
"eslint-plugin-promise": "^6.0.1",
|
||||||
"eslint-plugin-react": "^7.30.1",
|
"eslint-plugin-react": "^7.31.8",
|
||||||
"husky": "^8.0.1",
|
"husky": "^8.0.1",
|
||||||
"typescript": "4.7.4"
|
"typescript": "4.8.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
Binary file not shown.
|
After Width: | Height: | Size: 630 B |
Binary file not shown.
|
After Width: | Height: | Size: 255 B |
Binary file not shown.
|
After Width: | Height: | Size: 269 B |
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
Binary file not shown.
|
After Width: | Height: | Size: 268 B |
Binary file not shown.
|
After Width: | Height: | Size: 253 B |
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
Binary file not shown.
|
After Width: | Height: | Size: 269 B |
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 461 B |
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
Binary file not shown.
|
After Width: | Height: | Size: 465 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,378 @@
|
|||||||
|
import { FC, SVGProps } from 'react'
|
||||||
|
|
||||||
|
const SvgComponent:FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||||
|
<svg
|
||||||
|
{...props}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 551.73 614.78"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<radialGradient
|
||||||
|
id="a"
|
||||||
|
cx={241.07}
|
||||||
|
cy={372.19}
|
||||||
|
r={6.56}
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop offset={0} stopColor="#fefd81" />
|
||||||
|
<stop offset={1} stopColor="#e5a541" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="b" cx={335.55} cy={372.19} r={6.56} xlinkHref="#a" />
|
||||||
|
</defs>
|
||||||
|
<g data-name="Tronco">
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#80725c'
|
||||||
|
}}
|
||||||
|
d="m149.78 275.36 41.36 77.16-1.51 88.77 8.57 21.18 7.06-2.52 166.93 14.12 11.6-94.31 20.68-93.3-254.69-11.1z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#4d4435',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m318.23 380.77-7.56-13.11-1.01-6.56 15.13-34.8 13.11-14.62-16.14-5.55-3.53-10.59 52.45-3.03 10.59 18.66-63.04 69.6z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M236 384.8a45.26 45.26 0 0 1-15.64 9.08c3.62-2.82 11.52-6.76 12.11-11.6s3.53 2.52 3.53 2.52Z"
|
||||||
|
style={{
|
||||||
|
fill: '#d7c5a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#4d4435',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m289.99 435.24-2.52-14.63 3.53-5.04 5.04-6.56 1.01-15.63-2.52-18.16-6.05-24.71 7.06-17.65 3.02-19.17 8.57 17.15-4.03 16.64-4.03 5.05 1.51 11.09 2.02 10.09 8.57 10.08 8.07 15.64 5.55 20.17-19.67 20.17-15.13-4.53z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#d7c5a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m190.63 321.26 8.08 22.19 6.55-10.59 1.01 82.71 14.12 13.61v13.12l-12.1 11.59-21.69-41.85 3.03-40.35.5-22.19-9.58-19.16 10.08-9.08zM271.33 375.72l-6.56-1.51-13.11-28.75-8.07-5.54a18.84 18.84 0 0 0 2 10.08c-8.2-5.29-35.81-22.69-35.81-22.69l7.57 9.58 24.2 20.17 9.59 6.06 7.06 14.62 2 4.54 5 1ZM276.37 410l2.52-12.61-1.51-10.09 4.54-11.6-1-12.1-6.56 15.64-4.53 6.55s6.29 18.21 6.54 24.21Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#4d4435',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m279.9 355.55-15.63-28.74-14.12-5.55 11.09 9.08L268.3 349l-3.53 5.54 8.07 22.19h4.54l3.53-12.6-1.01-8.58z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#d7c5a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m319.24 382.28-13.11-12.1-1.01-7.57 8.57-18.66-6.56 4.54 4.55-13.11-11.61 16.64-.5 9.58 3.03 13.62 11.6 9.58 5.04-2.52z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Ojos">
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#4d4435',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m275.36 407.5-9.07-10.59-22.2-2.53-13.61 3.53-18.16-5.04 14.12.51 18.16-6.06 17.65-5.04 9.58 4.54 3.53 20.68z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#4d4435',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m244.09 394.38-12.1 8.07 4.54-6.55 7.56-1.52zM230.98 397.91l-9.58 3.03 6.05-5.04 3.53 2.01z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Rasgos Faciales">
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m226.95 446.83.5-19.16-16.64-16.64-5.55-20.17 1.52 25.71 11.09 11.1 2.52 26.22 6.56-7.06zM277.88 356.56l1 7.57-2.52 8.06-14.12 7.57s-2.52-.25-2.52-4.54-12.1-26.73-12.1-26.73l1 8.57-34.29-23.2 8.58 10.14-17.65 1.51L238 361.6s-15.63-4.54-19.16 1S228 381.78 236 384.3c-3.28 4.54-14.63 9.08-14.63 9.08s17.9.25 33.79-7.57c12.36-5.8 18.91 12.61 20.68 25.22.75-9.08-1.52-27.24-1.52-27.24s11.13-8.79 3.56-27.23ZM302.09 356.56l-1 7.57 2.53 8.06 14.12 7.57s2.52-.25 2.52-4.54 12.1-26.73 12.1-26.73l-1 8.57 34.3-23.2-8.6 10.14 17.66 1.51-32.79 16.09s15.64-4.54 19.17 1-9.1 19.18-17.1 21.7c3.28 4.54 14.63 9.08 14.63 9.08s-17.91.25-33.79-7.57c-12.36-5.8-18.91 12.61-20.68 25.22-.76-9.08 1.51-27.24 1.51-27.24s-11.09-8.82-3.53-27.23Z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m274.5 316.1-6.17 18.15 10.95 20.83-.69 20.92 6.19-25.01-7.3-13.89 5.38-25.79-8.36 4.79zM305.98 316.61l6.17 18.15-10.95 20.83.69 20.91-6.19-25.01 7.3-13.89-5.38-25.79 8.36 4.8zM387.68 306.01l6.17 18.16L382.9 345l.69 20.91-6.19-25.01 7.3-13.89-5.38-25.79 8.36 4.79zM318.74 350.51l22.19-33.79 1 11.09-17.14 26.23-6.05-3.53z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="M279.4 364.13 272.34 350l8.57 10.6-1.51 3.53zM300.58 363.62l7.06-14.12-8.57 10.59 1.51 3.53z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Barba Base">
|
||||||
|
<path
|
||||||
|
d="M392.87 344.46S392 408 431.71 434.23c-9.21.5-17.15 1-17.15 1s6.17 25.77-2.56 41.86-23.54 37.83-22.15 46.91c-5.68-2.52-4.54-14.63-4.54-14.63s-5.43 16.14-25.72 29.76c-15.26 10.59-20.68 23.2-20.68 23.2l.5-14.63s-4.87 13.79-21.18 29.76-26.06 27.4-27.23 37.32c-2.69-10.76-19-124.91-3.53-173.49 4.87-12.28 14.79-21 39.84-19.67s48.92 31.27 48.92 31.27 14.29-47.75 10.59-105.41c.34-3.19 6.05-3.02 6.05-3.02Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M188.62 344.46s.88 63.54-38.83 89.77c9.2.5 17.14 1 17.14 1s-6.18 25.72 2.52 41.85S193 514.92 191.64 524c5.68-2.52 4.54-14.63 4.54-14.63s5.43 16.14 25.72 29.76c15.26 10.59 20.68 23.2 20.68 23.2l-.5-14.63s4.87 13.79 21.18 29.76 26.06 27.4 27.23 37.32c2.69-10.76 19-124.91 3.53-173.49-4.87-12.28-14.79-21-39.84-19.67s-48.92 31.27-48.92 31.27-14.26-47.75-10.59-105.41c-.34-3.19-6.05-3.02-6.05-3.02Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m182.71 310.05-6.17 18.15 10.96 20.83-.69 20.91 6.19-25.01-7.31-13.88 5.38-25.8-8.36 4.8zM212.83 460.45v-24.71l-14.63-23.7 2.52-26.23 1.52-39.84-6.56 28.24-11.1 56.49 29.76 32.27"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Barba Claro">
|
||||||
|
<path
|
||||||
|
d="M230.48 540.64a80.33 80.33 0 0 0-10.09-14.12c-5.67-6-24.33-27-16.14-54a130 130 0 0 0 5.55-14.13 120.14 120.14 0 0 0-.5 15.13c1.89-13.11 7.18-21.68 11.09-25.72-4.16 19.2-5.67 60.81 10.61 76.7a68 68 0 0 1-14.12-12.61s13.12 23.71 13.6 28.75ZM175.51 427.17s-12 19.67-10.09 35.3c1.13 6.81 1.51 9.58 1.51 9.58s-4.41-9.33-4.54-17.15 2.46-21 8.07-26.22c4.92-4.54 7.2-12.66 7.06-16.64-.14-4.22 2.37 9-2 15.13Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M165.92 464s-5.71-8.14-3.53-22.69c.51-5.65 9.42-16.88 11.1-18.66s5-9.59 5-9.59-5 16.75-10.59 21.69-3.53 18.16-3.53 18.16l1.55 11.09Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M166.93 447.84s3.78-15.63 11.6-18.66c-7.56-.75-13.11 7.06-13.11 7.06l1.51 11.6ZM238 519.46s-.47 22.12 5.55 33.28c10.47 19.41 28.2 32 31.27 36.82-3-12.11-10.13-25.21-16.64-32.28s-17.11-13.36-20.18-37.82ZM182.86 466.58s2.64 7.49 3.74 9c-2.86-3.73-14.69-8.31-7-28.81 1-5.24 2.66-9.64 2.42-11.85.62 5.37-.73 29.8 8.07 42.68"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M274.35 587s.63-6.7-5-18.66c-2.39-6.16-4.66-5.69-6.05-12.11s-2.4 6.92-.5 18.66A33 33 0 0 0 274.35 587ZM216.36 513.41a41.49 41.49 0 0 0-6.07-6.66c-3.29-2.76-14.19-12.39-11.73-26.9a67.39 67.39 0 0 0 1.92-7.67 64.49 64.49 0 0 0 .72 7.87c.12-6.92 2.28-11.7 4-14.05-.89 10.2 1 31.85 10.36 39a35.21 35.21 0 0 1-8-5.6s8.24 11.42 8.82 14ZM178.24 474.07s-10.85-23.72 3.64-40.32c-1.18 16.27-6.4 32.09-3.64 40.32Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M180.22 466.17s-7.57-16.75 2.71-28.55c-.89 11.51-4.63 22.73-2.71 28.55ZM201.23 427.17S199 448.85 191.64 461c2-7.82 4.17-16.9 3.54-21.19-1.39 5.3-6.06 12.61-6.06 12.61s7.19-19.92 6.06-35.3c2.64 13.62 1.51 15.13 1.51 15.13l4.54-5ZM241.33 440.15s-20 7.53-17.66 24.77c5.57-8.48 3.22-9.89 17.66-24.77Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M223.42 466s11.2-29.1 28.24-39.84c-10.34-.19-28.78 12-36.41 20.32 9.28-6.1 13-6.8 13-6.8s-5.87 10.21-4.82 26.32ZM186.07 422s6.91-15.32 2.59-25.19M244.05 438.12s7.12-10.64 15.22-11.82"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Barba Detalles">
|
||||||
|
<path
|
||||||
|
d="M167.44 473.06s-3.6-11.4-.51-29.76c.82-3.85-3 5.55-3 5.55l-1.52-6.55s-3.15 16.13 5.05 30.76ZM183.07 452.89s2.35 17.46 7.57 24.2c-2.75-2-6.56-8.06-6.56-8.06l4 8.06s-9.25-5.83-10.08-10.59c.48 6.45.5 8.58.5 8.58s-4.31-6.14-4.54-17.15a57.09 57.09 0 0 1 .51-7.57l1.53 10.09.5-7.56s2.15 10.6 5.05 14.62a61.11 61.11 0 0 0-1.51-7.56l2.52 5.54s-.31-8.47.5-12.6ZM274.86 588.55s-1.85-10.81-6.05-15.63-8.09-5.19-10.09-9.59c3 8 6 15.64 6 15.64s5.42 6.93 10.09 9.58Z"
|
||||||
|
style={{
|
||||||
|
fill: '#889065',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M266.79 581a37.68 37.68 0 0 0-9.58-15.13c-6.92-6.3-14-14.39-16.65-21.19 1 4.93 9 22.07 26.23 36.32ZM201.23 428.68s-6.18 25.47-10.09 34.29c6.68-8.57 7.06-12.1 7.06-12.1a30.86 30.86 0 0 1-3 17.15 96.83 96.83 0 0 0 12.1-27.74l-6.05 11.6v-23.2Z"
|
||||||
|
style={{
|
||||||
|
fill: '#889065',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Barba Sombra">
|
||||||
|
<path
|
||||||
|
d="M212.7 488.2s.34 4.88 10 19.79 3.9 10.84 3.9 10.84-11.11-13.83-13.9-30.63ZM255.76 563.15s-3.66-3.31-9-20.2-6-9.85-6-9.85 3.49 17.35 15 30ZM170.85 430.24s-2.39 4.29-2.49 22.11-2.66 11.27-2.66 11.27-1.75-17.68 5.15-33.38ZM208.14 500.58s1.48 4.66 14.31 16.9 6.35 9.62 6.35 9.62-14-10.81-20.66-26.52Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m304.11 429.69 9.58-16.64-13.62 5.54 7.57-27.73 10.09-10.09 1.51-29.76 41.36-44.88 20.17-2.52 9.08 47.91 2.52 71.61-11.1 39.34-77.16-32.78z"
|
||||||
|
data-name="Sombra Facial"
|
||||||
|
/>
|
||||||
|
<g data-name="Ojo Izq">
|
||||||
|
<path
|
||||||
|
d="M241.07 365.64a6.56 6.56 0 1 1-6.56 6.55 6.56 6.56 0 0 1 6.56-6.55Z"
|
||||||
|
style={{
|
||||||
|
fillRule: 'evenodd',
|
||||||
|
fill: 'url(#a)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M241.32 365.64a5.3 5.3 0 1 1-5.29 5.29 5.3 5.3 0 0 1 5.29-5.29Z"
|
||||||
|
style={{
|
||||||
|
fill: '#080c17',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#07090e',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m229.97 368.16 22.19 8.57-1-10.08-9.08-3.03-12.11 4.54z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Ojo Derecho">
|
||||||
|
<path
|
||||||
|
d="M335.55 365.64a6.56 6.56 0 1 1-6.56 6.55 6.56 6.56 0 0 1 6.56-6.55Z"
|
||||||
|
style={{
|
||||||
|
fillRule: 'evenodd',
|
||||||
|
fill: 'url(#b)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M335.3 365.64a5.3 5.3 0 1 1-5.3 5.29 5.29 5.29 0 0 1 5.3-5.29Z"
|
||||||
|
style={{
|
||||||
|
fill: '#080c17',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m346.64 368.16-22.19 8.57 1.01-10.08 9.08-3.03 12.1 4.54z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
d="m178 341.43-3 1.51-4-.5-3 1-3.59 5.56-8.07-1v3l-7.56-1.51-4-1.51h-4.58s2-2.78-1.51-3-4-5-4-5l.5-3.53-12.1.5-2-3-4.54-2.52 1-5.54 2-4-3.55-6.18.5-6.56 4-3.53-1.51-3-.5-5.05 3-1.51 1.52-4-5.55-5.55-2.52 1-9.08-.51-5.55 1.52-5 7.56-4 .5-5.54 5.55-3.53-3.53-6.06-.5-5.54-2.52-1-6.56-2.52-3.53-3-3-4-.5-2 1-6.56 2.52L44.5 284l-4.54 3-8.07 1-2.52-5.55-1.51-5.54-5.55-2-4-1-4-5-1.51-5.05 3-5-3-3-7.8-3.7-.5-6a5.08 5.08 0 0 1 1-3.53c1.26-1.51 6.55-2.52 6.55-2.52l.51-4-2-2 .51-4 1.51-3.53-3.53-3-5-5.55-3.53-.5L3 211.31l1.51-8.57L3 198.2l5-6 3-3-1.52-4 1.52-4h7.06l5-.5 2-4 3.53 2 5.54-1 1.68-4.7-.51-8.06 3-4h5.55l8.15 1.45 4.53 1.52 4 .5.5-4.54-4.54-1.51.51-5 .5-5 4-2.52-2-3s-2.27-1.52-2-2.53 4.5-5.65 4.5-5.65l5.55-3h4l.51-4-2.52-6.06 4-7.06 3.62-3.54h2.52l7.57 4 5 1 3.53-2 3-2-4.54-3-.5-7.07 5-2.52 7.56.51 4.7-4.6 3.53-4 11.6-1 6 3.53 5.55 2.52 3 1-1.52-7.06 3-10.09-2.52-5 1-4 3-4V61l3.53-3 6.06-4 1-6.55 4.54-4 12.11-2 4-4.54 5.55-12.61 12.1-10.59 9.08-.51L212.32 3l14.12-.51 8.58 3 5-3L244.6 1l19.67-1 7.06 1.51 9.58 3 3 .5 2.52-3L290 4l2.52 2.53 7.57 3 .5-3.53 6.56 3 3 1.51 3 2.52 2.52-.5 1.51 3.53 1.51 2.52 6.56 2 4-2.52 4.53 5.54 2 3.53v3.53l3.53 2.53 3.53 1 1.52 4 2 6.56 6.06.5v4.54l1.58 3.67.5 3.53 1.52 1.51 8.07 2 5 1 5-4 6.17-1.5 2.52 2 4-1h4.54l1.51-2 7.06-3 5.11 4 5.54-2.52 2 3 5 2 8.62 2.52 3.53 3.53 2 4.54 2 4 4 1.51h4.54l4.53 1.51 4.54 4.54 2.53-1.51 4-.5 2 8.06 2.52 3.54v7.06l1 5 2.52 3.53-1 3.53 5.55 1h4.54l3 6 1 10.59 2 4 4.54 1.51 4 7.06 1.51 5.55.51 6.05-4 6 6.06 6.05h4l3 2 6.05 3.53 4.54 5v6.56l-2.52 4-3.53 5s-.51 5.29-.51 6.05v5l-3.53 5.05 3.53 4 4 2.52 2 5.05 5.55.5 3-3.53 8.07 1.51 5.54.51 3.54 1 2.52 5 3.53 3.53 3 4.54-1.19 3.03 2 5.55 2 2.52 2.53 4.54 1 3.53-1.51 3-3 4-3 3-6.56 2.53-1.51 3-.5 7.06-3.53 3-3.54 1-4.55-3.39-4 2.52-1.51 2 1 5 2.52 4.54 1.51 3-2 5-5.55 5.55-3.53 3.53-.51 4.53-3 3-2 3-3 5-8.57.5-6.05 4-1.52 3.53-5 2.52-4.54.51-5.54-.51-2-3-2.71-2.28h-6v3l.51 4 2.52 3-3 5.55-6.55 1.51-.58 6.66v5l-5 3.53-5.55-.5-4 2 .5 2-7.56 1.51-2.52 5-4-2-4.54-4h-8.57l-3.66-3.48-1-6.06-6-3-4.54-2 1-4.54v-2.52l-5.05 4-2 2.52-4.54-.5-4.54-19.67-3.53-10.59-11.1-11.09-5.54-5.55-13.62 7.06-10.59.5-4.54-6.05h-22.73l-8.58-1-21.69 6.05-14.62-8.62-10.59 4h-10.09l-9.11 3.61-12.1 4.53-10.09-4.53-10.59 1.51 3 7.56-9.08 9.08-6 9.08-8.07 5.55-3.53 4"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
data-name="Hojas Base"
|
||||||
|
/>
|
||||||
|
<g data-name="Hojas Claro">
|
||||||
|
<path
|
||||||
|
d="M151.8 158.86s.06.23.2.65a55.22 55.22 0 0 0 24 29.11c19.42 11.64 27.74 23.7 27.74 23.7l11.1 14.68s4.29-.55 19.17 6.55 23.95 12.57 24.21 15.64 7.56 21.18 7.56 21.18 7.31 5 9.58 9.58 6.05 17.15 6.05 17.15l1 8.07-15.13-8.58-12.6 4.54-7.06-1-22.7 8.57s-8.75-1.1-17.65-2c-4.46-.46 0 6.05 0 6.05l-9.58 11.1-5.55 7.06-2.52 2.52h-2l-5 4.54-2 2.52-3.53 1-2.52 1.51-3.53-.5-2.52 1-3.6 5.5-9.08-1.51 1 3.53-11.6-3h-6.06l1.52-2-2-1h-1.51l-3-3 1.51-5.55-13.61.5v-2.52l-3.53-1.51-2-1 .5-6.05 2.53-4-3.53-5v-7.57l4.53-4-1.59-2.72-1-5.55 3-.51 2-3.53-5-6.55-2.52 1-8.57-.51-6.56 2-5 7.56h-3.56l-6.56 6.06-3.53-4h-5l-6.56-3-1-7.06-4.54-5.55-5-1L52 286l-7.57-2-4.54 3.53-4 .5h-4.62l-4-11.09-9.07-3-4.54-5.55-1.52-4.54 4-5-7.57-5-3.53-2-1-7.57s4.8-4.45 8.07-3.53c.38-2.47.51-4.53.51-4.53l-2-1.52V231l2.52-5s-7.21-2.88-9.14-8.13c-2.14-.08-4 0-4 0l1.51-3 1.52-3 1-9.08-1.51-4.59 8.07-9.58-1-3 1.52-5H23.2l2-4.54 3.53 2.52 5.54-1 1.52-5-1-7.56 3.53-4h6.55l15.64 4 .5-5-4.54-1.51V155l1.53-7.23 4-2-4.54-4.54v-1.53l5-6 4.54-2.52h4.53s.76-6.23 0-6.06-2-3-2-3l4-9.08 3.53-2.52h2.52s4.54 2.35 5 2.52 5 3 5 3h2.52l5.55-2 8.07 13.11 1 9.58 3 5.05 5.55.5-5.55 8.07 3.53 3 4 .5a8.28 8.28 0 0 1 2.52-.5c1 0 9.08 1.51 9.08 1.51s-.51 4.62-1 5.55 1.51 6.05 1.51 6.05h4.54l5.55-1.51 5.55-3.53"
|
||||||
|
style={{
|
||||||
|
fill: '#96a166',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M222.41 305.62s-25-8.4-40.35-11.6c8.91-.16 13.62 1 13.62 1s22.53 7.23 26.73 10.59Z"
|
||||||
|
style={{
|
||||||
|
fill: 'none',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Hojas Medio">
|
||||||
|
<path
|
||||||
|
d="m126.08 90.28 7.57 8.57 5 8.14 1.51 2.45v5l9.59 6h9.58l11.6-4-11.6-.5-10.09-3.53-5.55-16.14-17.65-6ZM37.83 231.49l-2.53-8.07-2.52-11.1 5-6.55 8.57-4.54 8.07-3 6.55-6 5-6.05 4-8.58s1.51 23.71 1.51 26.73 4.54 17.15 4.54 17.15L89.27 230l-.51 5.55-6.05-1-10.09 1-8.57 1L55 236l-8.07-.51-8.6-2.49-.5-1.51ZM150.29 247.63l-7.57-4.54-5.54-8.58-6.05-6.55-6.56-8.58 10.09-11.09 12.6-4.54 2.52 2.52 11.6-6.05-1.51-8.57-1.01-6.56 4.04-3.53 5.04 1.01 10.59 8.07 6.05 4.54 4.04 1.51 9.58 9.08 6.56 7.06 4.54 7.06 2.52 2.02-23.2 9.58-8.07 7.06-6.56 3.02-16.14 4.04-7.56 2.02zM97.33 159.87l-1.51-7.56 3.53-8.07-8.57-8.07 1-7.06 7.06-1.51 1.51-11.1 6 11.6 1.52 9.08 3.53 5h5.6l-6 8.07 2.52 3.53 5 .5 2-1 10.09 1.51v7.56a2.25 2.25 0 0 1-2 1.52c-1.51 0-8.57 1.51-8.57 1.51l-13.11-.5-9.59-5ZM147.77 332.35l-3.03-3.02-2.52-1.52 2.02-7.56.5-4.04v-5.54l2.52-1.52 5.55-5.04 3.53-3.03 3.53.51 7.57.5 19.67-2.52 3.52 10.59v10.09l-12.1 9.58-30.76 2.52zM133.65 283.94l-15.13-19.67 15.13.5v-4.54l9.08 3.53 6.05 4 3-8.58 17.65 19.67s3.28 11.6 2 11.6-37.82-6.55-37.82-6.55ZM266.29 291l-1.01-3.03-3.53-2.02-2.52-4.03 3.02-7.56 8.07-4.55 7.56 6.06 7.06 14.62-2.01 9.08-16.64-7.06M219.89 297.05l-14.63-8.57-2.02-1.52-9.58-7.56-9.08-8.58-1.51-6.55 6.56-1.01 6.55-2.52 11.6 1.01 4.54-4.54.51-7.57.5-5.55 7.06-8.57 5.55-3.02 3.53-1.01 20.17 9.07 14.63 16.14 1.51 14.12-5.04 3.54-6.05 7.06-8.07 3.02-6.56 4.04-7.56 3.02-9.08.51-3.53 5.04zM117.51 286.46l-8.07-6.56-4.54-1.51-6.56-11.6-1.01-9.08 2.02-6.05H93.3l-7.06 3.03-7.56 3.02-7.57 6.56-6.56 3.53h-7.56l-1.01 5.04-3.53 4.54-4.03 5.04-3.54 1.52 5.55 1 1.52 1.01 7.06-3.02h4.03l3.53 2.01 2.52 4.04.51 5.55 2.52 3.02 5.04 1.01 5.05 1.01 3.02 4.04 6.56-7.57 3.02 1.01 4.54-7.06 6.05-2.02 12.11-1.51z"
|
||||||
|
style={{
|
||||||
|
fill: '#889065',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Hojas Detalles">
|
||||||
|
<path
|
||||||
|
d="M123.06 248.63s-10.59-12.48-8.58-34.79a22.32 22.32 0 0 0 1-3l3.53 8.57s16.2 25 19.67 28.75 4 6.56 4 6.56v3.53l-12.11-7.06 2 5-9.58-7.57Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="m125.58 245.1-11.1-8.57-9.08-3.53 6.56-.5-8.07-8.58-5.55-10.08-3-5.55-4.54-5.55-2-13.11-3.53-19.17 2.52-15.13v-16.14l-11.6-8.06-5 .5h-4.62L63 133.14l-5.55 6.05v1.52l4 4 .5 1.52-4.54 1.51-1 6s.07 2.89 0 3.53a3 3 0 0 0 .51 1.51l4 .51-.5 3v2l7.56-3 2-3-.5-4 6.55 2 2 6.56-1.51 12.61s2.69 4.4 3 5 3 4.54 3 4.54l-9.08-5.55 3.53-12.61-7.56 6-2 10.6L65.9 191l1 5.55.5 4.54-4-8.58-.4 8.21-.5 5.55a38.43 38.43 0 0 0-1.52 4c-.06.63 4.54 6.55 4.54 6.55l2 2.52a25.89 25.89 0 0 0 1.51 3.53c.44.54 5 2 5 2l6.55 2.52 19.17 11.1 7.06 5 18.66 1.51Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="m130.62 166.43-6.05-.51-9.08.51-6.56.5-3.53 1-4.53-3-14.13-1-.5-2-1.51-12.61 1.51-7.06s2.52 4.29 2.52 5.55 2 7.56 2 7.56l5 2.53 8.58 1.51 6.55 2.52 9.58 1.51 12.61-3-2.52 6.05ZM100.36 243.59l-18.66-8.07-17.65 2.02-21.69-1.51-20.67-2.02-5.55-6.05-3.53-2.02-2.52-1.51-3.03-2.52-3.03-3.54 2.02-2.01 3.03 2.01 4.54 5.55 10.59 3.03 4.54 2.52h6.55l9.58-.5 1.01 2.52 7.57 2.52 9.58-1.01 8.07-1.51 10.09.5 2.01-2.02-3.53-7.06 5.55 1.01 8.07 4.04 10.09 14.62 3.53 4.04-6.56-3.03z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m139.7 253.17-15.13-11.6 1.01 8.58-22.7 3.02v13.62l9.08 12.61-4.54 2.02-10.09-9.59-4.03-12.1 3.53-7.57 2.02-8.07-7.57-9.58 21.69 6.05 10.59-2.52 16.14 15.13z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="m201.23 288-11.6-4.54-29.76-29.25-.5-5-.51-3 20.68-4L193.16 231l17.65-4.54 5-.5-.5-8.57-13.11 5.54s-14.63 6.81-17.15 8.07-13.62 8.58-13.62 8.58l-10.09 1-15.63 6.56-12.1-.5 7.06 8.57h6.55l7.57 11.6 7.06 16.64"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="m184.08 301.59-9.08 2-15.63-1.52-5.55-4.54-4.54 1.52-5.55-2.53-1.51-3.52-10.09 1-11.6 2.52 2-3.53L118 287l-12.61-8.57 2-6.56 7.06 1.52 4 5.54 11.6 2.52 4.54.51-3-6.56-5-7.56 12.6 8.07 16.14 4.54-2.52-6.56 7.06 7.06 1.51-13.62 2.53-4 12.1 12.1c.76.76 13.11 7.57 13.11 7.57l8.58 2.52h6.05l3.53 2 5 5 5.55 3-33.79 6ZM249.14 291.5l6.55-4.54.51-1 5-2.52v-5l3.53-3.53 4.54-3.53-2-3.53-2-2.52s-3.87 6.38-4.54 7.06-4.54 5-4.54 5l-8.57 4.54-5 1-2.52 4-30.76-3.53 25.21 9.08 14.63-1Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
d="m282.93 300.58-3.03-7.06-3.02-3.53-8.58-2.52-3.53 1.51-23.2 9.58h-12.6l-9.08-3.02-5.05-3.53 15.64 14.62 16.14-6.05 7.56 1.01 12.61-4.54 15.13 8.57 4.54-2.52-2.52-2.02"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M231 307.14 216.36 293l-23.71-6.55-10.08-5 6.55 13.12-3 4.54-4-1 1.52 9.08 3 5-2.52 5-5 6.56-9.12 4.57-10.09 3-15.13-3s-4.28 5.29-5.55 5.54-4.53 3-4.53 3v4l1 2.52 4 1.51v2l-.51 1h5.55l11.1 3 1-3 4.53 1h4l3-5 2-1H175l6.05-2 6.56-7.07h2l17.65-20.17-1.51-4v-1.52l1-1 18.16 2 6-2Z"
|
||||||
|
style={{
|
||||||
|
fill: '#05080f',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Hojas Brillos">
|
||||||
|
<path
|
||||||
|
d="M104.33 246a79.49 79.49 0 0 0-11.17-13.28c-6.13-5.58-26.39-25-20.36-52.52a131.74 131.74 0 0 0 4.41-14.51 119.7 119.7 0 0 0 .7 15.12c.84-13.22 5.44-22.19 9-26.52-2.63 19.43-.84 61 16.63 75.58a68.14 68.14 0 0 1-15.08-11.45s15 22.59 15.85 27.58ZM266.16 287.77a49.74 49.74 0 0 0-9.76 4.53c-4.33 2.77-19.21 11.74-34.78 3.71a81.05 81.05 0 0 0-8-5 76.07 76.07 0 0 0 9.19 2c-7.8-2.63-12.44-6.82-14.47-9.65 11.24 4.69 36.49 10.32 48 2.23a42 42 0 0 1-9.28 7.16s15.95-5.29 19.09-5ZM131.72 254.94s-20.64-16-15.52-37.38c6.51 14.94 9.24 31.38 15.52 37.38ZM223.61 306.32a80 80 0 0 0-17-3.29c-8.28-.48-36.22-2.8-48.86-28A130 130 0 0 0 152 261a118.64 118.64 0 0 0 10.06 11.31c-7.66-10.81-9.73-20.67-9.67-26.29 10.18 16.76 37.74 48 60.47 48.28a68 68 0 0 1-18.92.59s25.83 8.15 29.67 11.46Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M142.85 256s-24.06-10.07-24.66-32.1c10.16 12.76 17.05 27.93 24.66 32.1ZM96.77 240.07a56.35 56.35 0 0 0-9.84-6.81c-5.09-2.63-22.07-11.91-23.16-30.86a85.13 85.13 0 0 0 .23-10.19 81.92 81.92 0 0 0 3.26 9.79c-1.88-8.76-.49-15.36 1.08-18.78 1.84 13.1 10.7 39.92 24.94 46.51a48.21 48.21 0 0 1-12.08-5s14 12.25 15.57 15.36ZM197.69 296.53a62.79 62.79 0 0 0-13.63.81c-6.41 1.25-28.17 4.94-42.72-11.88a102.85 102.85 0 0 0-7.08-9.65 94.3 94.3 0 0 0 9.87 6.7c-7.95-6.78-11.44-13.93-12.5-18.24 11 10.84 38.12 29.34 55.52 25.14a53.16 53.16 0 0 1-14.31 4.14s21.28 1.19 24.85 3Z"
|
||||||
|
style={{
|
||||||
|
fill: '#ced7a8',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g data-name="Hojas SOmbras">
|
||||||
|
<path
|
||||||
|
d="M116 226.33s10.53 16.92 15 27c-2.19-1.39-9.93-15.82-9.93-15.82M229.33 294s15-2.63 23.48-3c-1.61 1.16-14.07 2.52-14.07 2.52"
|
||||||
|
style={{
|
||||||
|
fill: '#889065',
|
||||||
|
fillRule: 'evenodd'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default SvgComponent
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import Head from 'next/head'
|
||||||
|
import { FC } from 'react'
|
||||||
|
|
||||||
|
export type 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 && (
|
||||||
|
<>
|
||||||
|
<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 && (
|
||||||
|
<>
|
||||||
|
<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 && (
|
||||||
|
<>
|
||||||
|
<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,27 @@
|
|||||||
|
import { Container } from '@mui/material'
|
||||||
|
import { FC } from 'react'
|
||||||
|
|
||||||
|
import Header from '@components/layouts/Header'
|
||||||
|
import Footer from '@components/layouts/Footer'
|
||||||
|
|
||||||
|
import { 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
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import { Container, Paper, Typography } from '@mui/material'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import MuiLink from '@mui/material/Link'
|
||||||
|
|
||||||
|
import { FooterColumn } from '@interfaces'
|
||||||
|
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
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 />
|
||||||
|
<NextLink href={link.url} passHref>
|
||||||
|
<MuiLink>
|
||||||
|
{link.label}
|
||||||
|
</MuiLink>
|
||||||
|
</NextLink>
|
||||||
|
</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
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './Footer'
|
||||||
@@ -0,0 +1,139 @@
|
|||||||
|
import { faBars } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { AppBar, Box, Container, IconButton, NoSsr, ListItemButton, Divider } from '@mui/material'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import dynamic from 'next/dynamic'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
import EntGamers from '@assets/logos/EntGamers'
|
||||||
|
|
||||||
|
import { Link } from '@interfaces'
|
||||||
|
|
||||||
|
const Drawer = dynamic(() => import('@mui/material/Drawer'), { ssr: false })
|
||||||
|
const List = dynamic(() => import('@mui/material/List'), { ssr: false })
|
||||||
|
const ListItemText = dynamic(() => import('@mui/material/ListItemText'), { ssr: false })
|
||||||
|
|
||||||
|
const MenuItems: Link[] = [
|
||||||
|
{ label: 'Home', url: '/' },
|
||||||
|
{ label: 'Clanes', url: '/clanes' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [scrolled, setScrolled] = useState(false)
|
||||||
|
const [openMenu, setOpenMenu] = useState(false)
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
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="/">
|
||||||
|
<a>
|
||||||
|
<EntGamers
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</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 }) => (
|
||||||
|
<NextLink key={`menu-item-${label}`} href={url} passHref>
|
||||||
|
<ListItemButton
|
||||||
|
component="a"
|
||||||
|
selected={router.pathname === url}
|
||||||
|
>
|
||||||
|
<ListItemText primary={label} />
|
||||||
|
</ListItemButton>
|
||||||
|
</NextLink>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
</NoSsr>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Header
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './Header'
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
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 { FC } from 'react'
|
||||||
|
|
||||||
|
import { PositionJoinTeamProps } from '@interfaces'
|
||||||
|
|
||||||
|
const UnirseForm = dynamic(() => 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
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import { useFormik } from 'formik'
|
||||||
|
import { Box, Button, TextField, Typography } from '@mui/material'
|
||||||
|
import { FC, useState } from 'react'
|
||||||
|
import { object, string } from 'yup'
|
||||||
|
|
||||||
|
import { UnirseFormData, UnirseFormProps } from '@interfaces'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
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 && !!formik.errors.name}
|
||||||
|
helperText={formik.touched.name && 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 && !!formik.errors.email}
|
||||||
|
helperText={formik.touched.email && 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 && !!formik.errors.discordUserName}
|
||||||
|
helperText={formik.touched.discordUserName && 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 && !!formik.errors.experience}
|
||||||
|
helperText={formik.touched.experience && 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
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import { Box, Button, Container, Paper, Typography } from '@mui/material'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { 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
|
||||||
@@ -0,0 +1,181 @@
|
|||||||
|
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 { 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
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import gsap, { Linear } from 'gsap'
|
||||||
|
import ScrollTrigger from 'gsap/dist/ScrollTrigger'
|
||||||
|
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
|
||||||
|
import { Container, Paper } from '@mui/material'
|
||||||
|
import { FC, useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
import SocialSlider, { SocialSliderProps } from '@components/pages/home/socialNetworks/SocialSlider'
|
||||||
|
|
||||||
|
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
|
||||||
|
|
||||||
|
export interface SocialNetworksProps {
|
||||||
|
socialNetworks: SocialSliderProps['slides']
|
||||||
|
}
|
||||||
|
|
||||||
|
const SocialNetworks: FC<SocialNetworksProps> = ({ socialNetworks }) => {
|
||||||
|
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'
|
||||||
|
>
|
||||||
|
<SocialSlider
|
||||||
|
slides={socialNetworks}
|
||||||
|
/>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SocialNetworks
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import { Container, Button, Typography } from '@mui/material'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import { FC } from 'react'
|
||||||
|
|
||||||
|
import ProfileCard, { 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'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NextLink href="/equipo" passHref>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="info"
|
||||||
|
component="a"
|
||||||
|
>
|
||||||
|
{viewTeamButtonText}
|
||||||
|
</Button>
|
||||||
|
</NextLink>
|
||||||
|
<NextLink href="/equipo/unirse" passHref>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="success"
|
||||||
|
component="a"
|
||||||
|
>
|
||||||
|
{joinTeamButtonText}
|
||||||
|
</Button>
|
||||||
|
</NextLink>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Team
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
|
||||||
|
import { Button, Typography } from '@mui/material'
|
||||||
|
import { Navigation, Pagination, A11y } from 'swiper'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||||
|
|
||||||
|
import 'swiper/css'
|
||||||
|
import 'swiper/css/navigation'
|
||||||
|
import 'swiper/css/pagination'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { Button as ButtonType } from '@interfaces'
|
||||||
|
|
||||||
|
export interface SlideProps {
|
||||||
|
socialNetwork: 'facebook' | 'twitter' | 'instagram' | 'youtube' | 'twitch'
|
||||||
|
description: string
|
||||||
|
links: ButtonType[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const Slide:FC<SlideProps> = ({ description, socialNetwork, links }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
marginInline: '36px',
|
||||||
|
marginBlock: '16px',
|
||||||
|
padding: '16px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="body1" component="div" align="center" >
|
||||||
|
{{
|
||||||
|
facebook: <FontAwesomeIcon style={{ filter: 'drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)' }}icon={faFacebook} size="5x" fixedWidth />,
|
||||||
|
twitter: <FontAwesomeIcon style={{ filter: 'drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)' }}icon={faTwitter} size="5x" fixedWidth />,
|
||||||
|
instagram: <FontAwesomeIcon style={{ filter: 'drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)' }}icon={faInstagram} size="5x" fixedWidth />,
|
||||||
|
youtube: <FontAwesomeIcon style={{ filter: 'drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)' }}icon={faYoutube} size="5x" fixedWidth />,
|
||||||
|
twitch: <FontAwesomeIcon style={{ filter: 'drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)' }}icon={faTwitch} size="5x" fixedWidth />
|
||||||
|
}[socialNetwork]}
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={(theme) => ({ textShadow: `2px 2px 2px ${theme.palette.background.default}` })} variant="body1" align="center" >
|
||||||
|
{description}
|
||||||
|
</Typography>
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-around',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBlock: '1rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{links.map(({ url, label, color, variant }) => (
|
||||||
|
<Button
|
||||||
|
key={url}
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
variant={variant}
|
||||||
|
color={color}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SocialSliderProps {
|
||||||
|
slides: SlideProps[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const SocialSlider: FC<SocialSliderProps> = ({ slides }) => {
|
||||||
|
return (
|
||||||
|
<Swiper
|
||||||
|
modules={[Navigation, Pagination, A11y]}
|
||||||
|
spaceBetween={16}
|
||||||
|
slidesPerView={1}
|
||||||
|
navigation
|
||||||
|
pagination={{ clickable: true }}
|
||||||
|
scrollbar={{ draggable: true }}
|
||||||
|
>
|
||||||
|
{slides.map(({ socialNetwork, description, links }) => (
|
||||||
|
|
||||||
|
<SwiperSlide
|
||||||
|
key={socialNetwork}
|
||||||
|
>
|
||||||
|
<Slide
|
||||||
|
socialNetwork={socialNetwork}
|
||||||
|
description={description}
|
||||||
|
links={links}
|
||||||
|
/>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SocialSlider
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
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 { FC } from 'react'
|
||||||
|
|
||||||
|
import { SocialLink } from '@interfaces'
|
||||||
|
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
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'
|
||||||
|
|
||||||
|
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}
|
||||||
|
width={30}
|
||||||
|
height={30}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
css={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '-15px',
|
||||||
|
right: '0px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NextImage
|
||||||
|
src={ButtonA}
|
||||||
|
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}
|
||||||
|
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,15 @@
|
|||||||
|
import { 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
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export * from './layouts'
|
||||||
|
export * from './pages/equipo'
|
||||||
|
export * from './pages/equipo/unirse'
|
||||||
|
export * from './pages'
|
||||||
|
export * from './seo'
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { Link } from '@interfaces'
|
||||||
|
|
||||||
|
export interface FooterColumn {
|
||||||
|
title: string
|
||||||
|
links: Link[]
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { ReactNode } from 'react'
|
||||||
|
|
||||||
|
export interface ContainedProps {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './Footer'
|
||||||
|
export * from './contained'
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from './unirse'
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user