Add Hero component
This commit is contained in:
parent
aef7256a61
commit
4060851483
1 changed files with 69 additions and 0 deletions
69
src/components/sections/Hero.astro
Normal file
69
src/components/sections/Hero.astro
Normal file
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
const {
|
||||
Title,
|
||||
Description,
|
||||
CallToAction,
|
||||
CallToAction_Primary_Text,
|
||||
CallToAction_Primary_Link,
|
||||
CallToAction_Secondary_Text,
|
||||
CallToAction_Secondary_Link
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<h2>{Title}</h2>
|
||||
<p>{Description}</p>
|
||||
{CallToAction ?
|
||||
<div class="call-to-actions">
|
||||
<a class="call-to-action" href={CallToAction_Primary_Link}>{CallToAction_Primary_Text}</a>
|
||||
<a id="secondary" class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.hero {
|
||||
background: url(/images/banners/Hero-Games.png);
|
||||
background-position: top;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 500px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-top: -24px;
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2 {
|
||||
font-size: 46px;
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
}
|
||||
p {
|
||||
max-width: 420px;
|
||||
}
|
||||
.call-to-actions {
|
||||
margin-top: 24px;
|
||||
#secondary {
|
||||
background: rgba(29, 29, 29, 0.5);
|
||||
border: 1px rgb(33, 33, 33) solid;
|
||||
}
|
||||
a {
|
||||
background: rgba(4, 159, 255, 0.4);
|
||||
border: 1px rgba(4, 159, 255, 0.5) solid;
|
||||
border-radius: 3rem;
|
||||
padding: 10px 24px;
|
||||
text-decoration: none;
|
||||
margin: 0px 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in a new issue