56 lines
1.2 KiB
Plaintext
56 lines
1.2 KiB
Plaintext
---
|
|
import { css } from '@styled-system/css'
|
|
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
|
|
|
|
const heroSectionClass = css({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '50vh',
|
|
background:
|
|
'linear-gradient(172deg, {colors.neutral.3} 0%, {colors.neutral.1} 78%)'
|
|
})
|
|
|
|
const heroContainerClass = css({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 'sm'
|
|
})
|
|
|
|
const heroLogoClass = css({
|
|
fill: 'neutral.12',
|
|
width: {
|
|
base: '100%',
|
|
sm: 'breakpoint-sm'
|
|
},
|
|
height: '100%'
|
|
})
|
|
|
|
const heroTitleClass = css({
|
|
fontFamily: 'orbitron',
|
|
fontSize: 'calc(2rem + 2vw)',
|
|
textAlign: 'center',
|
|
fontWeight: '900',
|
|
color: 'neutral.12'
|
|
})
|
|
|
|
const heroDescriptionClass = css({
|
|
color: 'neutral.11',
|
|
textAlign: 'center',
|
|
fontSize: 'large'
|
|
})
|
|
---
|
|
|
|
<section class={heroSectionClass}>
|
|
<div class={heroContainerClass}>
|
|
<SrJuggernautLogo className={heroLogoClass} />
|
|
<h1 class={heroTitleClass}>Juggernaut Plays</h1>
|
|
<p class={heroDescriptionClass}>
|
|
A veces hago cosas en internet, luego hablo de ellas.
|
|
</p>
|
|
</div>
|
|
</section>
|