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
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'
|
||||
@@ -0,0 +1 @@
|
||||
export * from './positionJoinTeam'
|
||||
@@ -0,0 +1,8 @@
|
||||
import { 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']
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './equipo'
|
||||
export * from './equipo/unirse'
|
||||
@@ -0,0 +1,63 @@
|
||||
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
|
||||
)
|
||||
@@ -0,0 +1,7 @@
|
||||
export * from './common'
|
||||
export * from './components'
|
||||
export * from './components/layouts'
|
||||
export * from './models/profile'
|
||||
export * from './pages'
|
||||
export * from './pages/clanes'
|
||||
export * from './pages/equipo'
|
||||
@@ -0,0 +1,13 @@
|
||||
import { 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
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { 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[]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { 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
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './unirse'
|
||||
@@ -0,0 +1,37 @@
|
||||
import { 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
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './clanes'
|
||||
export * from './equipo'
|
||||
export * from './equipo/index'
|
||||
export * from './equipo'
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import NextLink from 'next/link'
|
||||
|
||||
import Contained from '@components/layouts/Contained'
|
||||
|
||||
const Page404 = () => {
|
||||
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>
|
||||
<NextLink href="/">
|
||||
<Button
|
||||
sx={{
|
||||
marginBlock: 1
|
||||
}}
|
||||
component="a"
|
||||
variant="contained"
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</NextLink>
|
||||
</Box>
|
||||
</Contained>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page404
|
||||
+18
-1
@@ -1,8 +1,25 @@
|
||||
import { config } from '@fortawesome/fontawesome-svg-core'
|
||||
import { CssBaseline, ThemeProvider } from '@mui/material'
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
import Seo from '@components/Seo'
|
||||
import theme from '@styles/muiTheme'
|
||||
|
||||
import '@fortawesome/fontawesome-svg-core/styles.css'
|
||||
|
||||
config.autoAddCss = false
|
||||
|
||||
const MyApp = ({ Component, pageProps }: AppProps) => {
|
||||
return (
|
||||
<Component {...pageProps} />
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline/>
|
||||
<Seo
|
||||
title='EntGamers'
|
||||
description='Comunidad Gamer'
|
||||
image='/images/defaults/og.jpg'
|
||||
/>
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Typography } from '@mui/material'
|
||||
|
||||
import Contained from '@components/layouts/Contained'
|
||||
|
||||
const About = () => {
|
||||
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
|
||||
@@ -0,0 +1,45 @@
|
||||
import { NextApiRequest, NextApiResponse } from 'next'
|
||||
import nextConnect from 'next-connect'
|
||||
|
||||
const handler = nextConnect<NextApiRequest, NextApiResponse>({
|
||||
onError: (error, req, res) => {
|
||||
res.status(501).json({ error: `Sorry something Happened! ${error.message}` })
|
||||
},
|
||||
onNoMatch: (req, res) => {
|
||||
res.status(405).json({ error: `Method '${req.method}' Not Allowed` })
|
||||
}
|
||||
})
|
||||
|
||||
handler.post(
|
||||
async (req, res) => {
|
||||
const bodyToSend = JSON.stringify({
|
||||
content: 'Nueva solicitud de unirse a equipo',
|
||||
embeds: [
|
||||
{
|
||||
title: 'Solicitud de unirse a equipo',
|
||||
color: 3782986,
|
||||
fields: Object.entries(req.body).map(([key, value]) => ({
|
||||
name: key,
|
||||
value,
|
||||
inline: false
|
||||
})),
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
]
|
||||
})
|
||||
const response = await fetch(process.env.DISCORD_JOIN_WEBHOOK_URL || '', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: bodyToSend
|
||||
})
|
||||
if (response.ok) {
|
||||
res.status(200).json({ message: 'Form sent' })
|
||||
} else {
|
||||
res.status(500).json({ message: 'Something went wrong' })
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default handler
|
||||
@@ -1,12 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
type Data = {
|
||||
message: string
|
||||
}
|
||||
|
||||
export const hello = (req: NextApiRequest, res: NextApiResponse<Data>) => {
|
||||
res.status(200).json({ message: 'Hello!' })
|
||||
}
|
||||
|
||||
export default hello
|
||||
@@ -0,0 +1,100 @@
|
||||
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 { FC } from 'react'
|
||||
|
||||
import Contained from '@components/layouts/Contained'
|
||||
import { 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
|
||||
@@ -0,0 +1,228 @@
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import { GetStaticProps, InferGetStaticPropsType } from 'next'
|
||||
import NextLink from 'next/link'
|
||||
import { FC } from 'react'
|
||||
|
||||
import ProfileCard, { ProfileCardProps } from '@components/profiles/ProfileCard'
|
||||
import Contained from '@components/layouts/Contained'
|
||||
import Seo from '@components/Seo'
|
||||
import { 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
|
||||
}}
|
||||
>
|
||||
<NextLink href="/equipo/unirse" passHref>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
component="a"
|
||||
>
|
||||
Quiero ser administrador
|
||||
</Button>
|
||||
</NextLink>
|
||||
</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
|
||||
}}
|
||||
>
|
||||
<NextLink href="/equipo/unirse" passHref>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
component="a"
|
||||
>
|
||||
Quiero ser moderador
|
||||
</Button>
|
||||
</NextLink>
|
||||
</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
|
||||
}}
|
||||
>
|
||||
<NextLink href="/equipo/unirse" passHref>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
component="a"
|
||||
>
|
||||
Quiero ser colaborador
|
||||
</Button>
|
||||
</NextLink>
|
||||
</Box>
|
||||
|
||||
</Contained>
|
||||
)
|
||||
}
|
||||
export default Equipo
|
||||
@@ -0,0 +1,157 @@
|
||||
import { GetStaticProps, GetStaticPropsResult, InferGetStaticPropsType } from 'next'
|
||||
import { Paper, Tab, Tabs, Theme, Typography, useMediaQuery } from '@mui/material'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { Swiper as SwiperClass, Virtual } from 'swiper'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
|
||||
import Contained from '@components/layouts/Contained'
|
||||
import PositionJoinTeam from '@components/pages/equipo/unirse/PositionJoinTeam'
|
||||
import Seo from '@components/Seo'
|
||||
import { 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 [currenSwiper, setCurrenSwiper] = useState<SwiperClass | undefined>(undefined)
|
||||
|
||||
const isMediumOrBigger = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'))
|
||||
|
||||
useEffect(() => {
|
||||
if (currenSwiper) {
|
||||
currenSwiper.slideToLoop(currentTab)
|
||||
}
|
||||
}, [currentTab])
|
||||
|
||||
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>
|
||||
<Swiper
|
||||
spaceBetween={50}
|
||||
modules={[Virtual]}
|
||||
allowTouchMove={false}
|
||||
onSwiper={(swiper) => { setCurrenSwiper(swiper) }}
|
||||
onSlideChange={(swiper) => { setCurrentTab(swiper.activeIndex) }}
|
||||
virtual
|
||||
>
|
||||
{teamPositions.map((position, index) => (
|
||||
<SwiperSlide key={index} >
|
||||
<PositionJoinTeam {...position} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Contained>
|
||||
)
|
||||
}
|
||||
|
||||
export default Unirse
|
||||
+78
-1
@@ -1,9 +1,86 @@
|
||||
import type { NextPage } from 'next'
|
||||
|
||||
import Clanes from '@components/pages/home/Clanes'
|
||||
import Hero from '@components/pages/home/Hero'
|
||||
import SocialNetworks from '@components/pages/home/SocialNetworks'
|
||||
import Team from '@components/pages/home/Team'
|
||||
import Header from '@components/layouts/Header'
|
||||
import Footer from '@components/layouts/Footer'
|
||||
import Seo from '@components/Seo'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Next Js</h1>
|
||||
<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.'
|
||||
/>
|
||||
<SocialNetworks
|
||||
socialNetworks={[
|
||||
{
|
||||
socialNetwork: 'facebook',
|
||||
description: 'Puedes seguirnos en Facebook para ver memes sobre videojuegos, información sobre los Clanes, la comunidad, eventos, etc. o formar parte del grupo para interactuar mas de cerca con otros integrantes de la comunidad',
|
||||
links: [
|
||||
{
|
||||
label: 'Pagina de Facebook',
|
||||
url: 'https://www.facebook.com/EntGamers/',
|
||||
variant: 'contained',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
label: 'Grupo de Facebook',
|
||||
url: 'https://www.facebook.com/groups/EntGamers/',
|
||||
variant: 'contained',
|
||||
color: 'primary'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
socialNetwork: 'twitter',
|
||||
description: 'Puedes seguirnos en Twitter para enterarte de las noticias mas recientes sobre la comunidad, eventos y demás información.',
|
||||
links: [
|
||||
{
|
||||
label: 'Twitter',
|
||||
url: 'https://twitter.com/EntGamers',
|
||||
variant: 'contained',
|
||||
color: 'primary'
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
import { createTheme } from '@mui/material'
|
||||
|
||||
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+ */
|
||||
}
|
||||
`
|
||||
},
|
||||
MuiPaper: {
|
||||
variants: [
|
||||
{
|
||||
props: { variant: 'glass' },
|
||||
style: {
|
||||
backdropFilter: 'blur(8px)',
|
||||
background: 'rgba(239, 250, 240, 0.05)',
|
||||
border: '1px solid rgba(239, 250, 240, 0.15)',
|
||||
borderRadius: '3px',
|
||||
boxShadow: '3px 3px 1px 0px rgba(28,30,33,0.69)'
|
||||
}
|
||||
},
|
||||
{
|
||||
props: { variant: 'gbaDialog' },
|
||||
style: {
|
||||
background: '#F8F8F8',
|
||||
border: '2px solid #76604E',
|
||||
borderRadius: '6px',
|
||||
boxShadow: '2px 2px 0px #57899A, inset 0px 0px 0px 4px #D6E1F9',
|
||||
color: '#010206'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
MuiCard: {
|
||||
variants: [
|
||||
{
|
||||
props: { variant: 'glass' },
|
||||
style: {
|
||||
backdropFilter: 'blur(8px)',
|
||||
background: 'rgba(239, 250, 240, 0.05)',
|
||||
border: '1px solid rgba(239, 250, 240, 0.15)',
|
||||
borderRadius: '3px',
|
||||
boxShadow: '3px 3px 1px 0px rgba(28,30,33,0.69)'
|
||||
}
|
||||
},
|
||||
{
|
||||
props: { variant: 'gbaDialog' },
|
||||
style: {
|
||||
background: '#F8F8F8',
|
||||
border: '2px solid #76604E',
|
||||
borderRadius: '6px',
|
||||
boxShadow: '2px 2px 0px #57899A, inset 0px 0px 0px 4px #D6E1F9',
|
||||
color: '#010206'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
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'
|
||||
},
|
||||
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
|
||||
Reference in New Issue
Block a user