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