Korbs/Contour
Korbs/Contour
Archived
Template
1
Fork 0
Code Issues Pull requests Activity

Add Hero component

Browse source
This commit is contained in:
Korbs 2024-02-02 08:39:55 -05:00
parent aef7256a61
commit 4060851483
No known key found for this signature in database
1 changed files with 69 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/components/sections/Hero.astro Normal file
View 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>