feat: static homepage
This commit is contained in:
@@ -0,0 +1,68 @@
|
|||||||
|
import Typography from '@/components/ui/Typography'
|
||||||
|
import { css, cx } from '@/styled-system/css'
|
||||||
|
import { Center } from '@/styled-system/jsx'
|
||||||
|
import { center, container } from '@/styled-system/patterns'
|
||||||
|
import { button, card } from '@/styled-system/recipes'
|
||||||
|
import NextImage from 'next/image'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
const Clanes: FC = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="clanes"
|
||||||
|
className={cx(center({}), css({
|
||||||
|
minHeight: '75vh',
|
||||||
|
backgroundImage: 'url(/images/backgrounds/bricks.png)'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(card({ variant: 'glass' }).body, container({}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={card({ variant: 'glass' }).content}
|
||||||
|
>
|
||||||
|
<Typography variant="h2" align='center'>Clanes</Typography>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
display: 'grid',
|
||||||
|
alignItems: 'center',
|
||||||
|
gridTemplateColumns: { base: '1fr 1fr', smDown: '1fr' },
|
||||||
|
gap: 'medium'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
order: { base: 0, smDown: 1 }
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Typography variant="body1">Los clanes son espacios donde compartir nuestros gustos con otros usuarios, dándonos la oportunidad de organizar proyectos y eventos en los cuales formar parte.</Typography>
|
||||||
|
<Center>
|
||||||
|
<NextLink
|
||||||
|
className={button()}
|
||||||
|
href="/clanes"
|
||||||
|
>
|
||||||
|
Ver Clanes
|
||||||
|
</NextLink>
|
||||||
|
|
||||||
|
</Center>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
order: { base: 1, smDown: 0 }
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<NextImage
|
||||||
|
src="/images/Clanes.png"
|
||||||
|
alt="Clanes"
|
||||||
|
width={1200}
|
||||||
|
height={630}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Clanes
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import Typography from '@/components/ui/Typography'
|
||||||
|
import { css, cx } from '@/styled-system/css'
|
||||||
|
import { Center, Container } from '@/styled-system/jsx'
|
||||||
|
import { iconButton } from '@/styled-system/recipes'
|
||||||
|
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import NextImage from 'next/image'
|
||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
const layerCss = css({
|
||||||
|
backgroundPositionY: 'bottom',
|
||||||
|
backgroundPositionX: 'x-start',
|
||||||
|
backgroundRepeat: 'repeat',
|
||||||
|
backgroundSize: 'initial',
|
||||||
|
height: '100vh',
|
||||||
|
width: '100%',
|
||||||
|
willChange: 'background-position-y',
|
||||||
|
animationName: 'bgMotion',
|
||||||
|
animationTimingFunction: 'linear',
|
||||||
|
animationIterationCount: 'infinite'
|
||||||
|
})
|
||||||
|
|
||||||
|
const Hero: FC = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer01.png)',
|
||||||
|
marginTop: '-76px',
|
||||||
|
animationDuration: '175s',
|
||||||
|
position: 'relative'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer02.png)',
|
||||||
|
animationDuration: '150s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer03.png)',
|
||||||
|
animationDuration: '125s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer04.png)',
|
||||||
|
animationDuration: '100s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer05.png)',
|
||||||
|
animationDuration: '75s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<Center
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForestNightLayer06.png)',
|
||||||
|
animationDuration: '50s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
className={css({
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: { base: '1fr 1fr', smDown: '1fr' },
|
||||||
|
alignItems: 'center'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
order: { base: 0, smDown: 1 }
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h1"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
EntGamers
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="h2"
|
||||||
|
align="center"
|
||||||
|
color="text"
|
||||||
|
>
|
||||||
|
Comunidad de y para los gamers
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
order: { base: 1, smDown: 0 }
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<NextImage
|
||||||
|
src="/images/EntGamers.png"
|
||||||
|
alt="EntGamers"
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Center>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#clanes"
|
||||||
|
className={cx(iconButton({
|
||||||
|
color: 'primary',
|
||||||
|
size: 'large'
|
||||||
|
}), css({
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '45px',
|
||||||
|
right: '50%',
|
||||||
|
animationName: 'bounce',
|
||||||
|
animationDuration: '1s',
|
||||||
|
animationIterationCount: 'infinite',
|
||||||
|
transform: 'translateX(50%)',
|
||||||
|
zIndex: 1,
|
||||||
|
'&:hover': {
|
||||||
|
animationPlayState: 'paused'
|
||||||
|
}
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faArrowDown} size='lg' fixedWidth />
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Hero
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import Typography from '@/components/ui/Typography'
|
||||||
|
import { css, cx } from '@/styled-system/css'
|
||||||
|
import { Center } from '@/styled-system/jsx'
|
||||||
|
import { container } from '@/styled-system/patterns'
|
||||||
|
import { button, card } from '@/styled-system/recipes'
|
||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
const layerCss = css({
|
||||||
|
backgroundPositionY: 'bottom',
|
||||||
|
backgroundPositionX: 'x-start',
|
||||||
|
backgroundRepeat: 'repeat',
|
||||||
|
backgroundSize: 'initial',
|
||||||
|
minHeight: '75vh',
|
||||||
|
width: '100%',
|
||||||
|
willChange: 'background-position-y',
|
||||||
|
animationName: 'bgMotion',
|
||||||
|
animationTimingFunction: 'linear',
|
||||||
|
animationIterationCount: 'infinite'
|
||||||
|
})
|
||||||
|
|
||||||
|
const Social: FC = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className={css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/SkyNightLayer01.png)',
|
||||||
|
backgroundPositionY: 'center',
|
||||||
|
backgroundPositionX: 'center'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/SkyNightLayer02.png)',
|
||||||
|
animationDuration: '150s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/SkyNightLayer03.png)',
|
||||||
|
animationDuration: '125s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
|
||||||
|
<Center
|
||||||
|
className={cx(layerCss, css({
|
||||||
|
backgroundImage: 'url(/images/backgrounds/SkyNightLayer04.png)',
|
||||||
|
animationDuration: '100s'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(card({ variant: 'glass' }).body, container({}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={card({ variant: 'glass' }).content}
|
||||||
|
>
|
||||||
|
<Typography variant="h2" align='center'>Redes Sociales</Typography>
|
||||||
|
<Typography variant="body1">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non?
|
||||||
|
</Typography>
|
||||||
|
<Center>
|
||||||
|
<a
|
||||||
|
className={button()}
|
||||||
|
href="/links"
|
||||||
|
>
|
||||||
|
Nuestros Links
|
||||||
|
</a>
|
||||||
|
</Center>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Center>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Social
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import { css, cx } from '@/styled-system/css'
|
||||||
|
import { Container } from '@/styled-system/jsx'
|
||||||
|
import { center } from '@/styled-system/patterns'
|
||||||
|
import { card, iconButton } from '@/styled-system/recipes'
|
||||||
|
import { type IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
|
||||||
|
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import NextImage from 'next/image'
|
||||||
|
import { type FC } from 'react'
|
||||||
|
|
||||||
|
interface TeamMember {
|
||||||
|
image: string
|
||||||
|
name: string
|
||||||
|
role: 'moderator' | 'administrator' | 'collaborator'
|
||||||
|
description: string
|
||||||
|
socialNetworks: Array<{
|
||||||
|
label: string
|
||||||
|
url: string
|
||||||
|
icon: IconDefinition
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
const team: TeamMember[] = [
|
||||||
|
{
|
||||||
|
image: '/images/team/SrJuggernaut.png',
|
||||||
|
name: 'SrJuggernaut',
|
||||||
|
role: 'administrator',
|
||||||
|
description: 'Soy desarrollador web y me gusta jugar videojuegos.',
|
||||||
|
socialNetworks: [
|
||||||
|
{ url: 'https://www.facebook.com/SrJuggernaut', label: 'SrJuggernaut Facebook', icon: faFacebook },
|
||||||
|
{ url: 'https://twitter.com/SrJuggernaut', label: 'SrJuggernaut Twitter', icon: faTwitter },
|
||||||
|
{ url: 'https://youtube.com/juggernautplays', label: 'SrJuggernaut YouTube', icon: faYoutube },
|
||||||
|
{ url: 'https://twitch.tv/juggernautplays', label: 'SrJuggernaut Twitch', icon: faTwitch },
|
||||||
|
{ url: 'https://www.instagram.com/sr_juggernaut', label: 'SrJuggernaut Instagram', icon: faInstagram },
|
||||||
|
{ url: 'https://srjuggernaut.dev/', label: 'SrJuggernaut Website', icon: faGlobe }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const Team: FC = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className={center({
|
||||||
|
minHeight: '75vh',
|
||||||
|
backgroundImage: 'url(/images/backgrounds/MysteriousForest.jpg)'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 'medium',
|
||||||
|
flexWrap: 'wrap'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{team.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={`team-member-${index}`}
|
||||||
|
className={cx(card({ variant: 'retro' }).body, css({
|
||||||
|
maxWidth: '300px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(card({ variant: 'retro' }).media, center())}
|
||||||
|
>
|
||||||
|
<NextImage
|
||||||
|
src={member.image}
|
||||||
|
alt={member.name}
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={card({ variant: 'retro' }).content}
|
||||||
|
>
|
||||||
|
<h3>{member.name}</h3>
|
||||||
|
<p>{member.description}</p>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 'small',
|
||||||
|
flexWrap: 'wrap'
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{member.socialNetworks.map((socialNetwork, index) => (
|
||||||
|
<a
|
||||||
|
key={`team-member-${index}-social-network`}
|
||||||
|
className={iconButton()}
|
||||||
|
href={socialNetwork.url}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={socialNetwork.icon} fixedWidth />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Team
|
||||||
+8
-3
@@ -1,11 +1,16 @@
|
|||||||
|
import Clanes from '@/app/Clanes'
|
||||||
|
import Hero from '@/app/Hero'
|
||||||
|
import Social from '@/app/Social'
|
||||||
|
import Team from '@/app/Team'
|
||||||
import { type FC } from 'react'
|
import { type FC } from 'react'
|
||||||
|
|
||||||
const HomePage: FC = () => {
|
const HomePage: FC = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>
|
<Hero />
|
||||||
Home Page
|
<Clanes />
|
||||||
</h1>
|
<Social />
|
||||||
|
<Team />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user