SrJuggernaut
972ec0ea1f
- Add @fontsource/orbitron dependency for custom font styling - Create Hero.astro component featuring logo, title, and description - Update index.astro to render Hero component instead of basic heading - Enhances homepage visual appeal with responsive grid layout and Orbitron font for branding
52 lines
1.0 KiB
Plaintext
52 lines
1.0 KiB
Plaintext
---
|
|
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
|
|
import { containerClass } from '@/styles/container'
|
|
import '@fontsource/orbitron/900.css'
|
|
import { css, cx } from '@styled-system/css'
|
|
|
|
const heroContainerClass = cx(
|
|
containerClass,
|
|
css({
|
|
display: 'grid',
|
|
gridTemplateColumns: {
|
|
base: '1fr',
|
|
md: '1fr 1fr'
|
|
},
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '60vh',
|
|
gap: 'md'
|
|
})
|
|
)
|
|
|
|
const heroLogoClass = css({
|
|
fill: 'neutral.12',
|
|
width: '100%'
|
|
})
|
|
|
|
const heroHeaderClass = css({
|
|
fontSize: '50px',
|
|
fontFamily: 'Orbitron',
|
|
fontWeight: '900',
|
|
textAlign: 'center'
|
|
})
|
|
|
|
const heroDescriptionClass = css({
|
|
fontSize: 'h2',
|
|
color: 'neutral.12',
|
|
textAlign: 'center'
|
|
})
|
|
---
|
|
|
|
<section>
|
|
<div class={heroContainerClass}>
|
|
<div>
|
|
<SrJuggernautLogo className={heroLogoClass} />
|
|
</div>
|
|
<div>
|
|
<h1 class={heroHeaderClass}>SrJuggernaut Dev</h1>
|
|
<p class={heroDescriptionClass}>Unstoppable by design.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|