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

Add option for alignment, image, toggle CTA buttons

Browse source
This commit is contained in:
Korbs 2024-02-02 16:10:42 -05:00
parent f51df87c25
commit e868695b96
No known key found for this signature in database
1 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/sections/Hero.astro
View file

@ -2,42 +2,62 @@
const { const {
Title, Title,
Description, Description,
CallToAction, CallToAction_Primary,
CallToAction_Secondary,
CallToAction_Primary_Text, CallToAction_Primary_Text,
CallToAction_Primary_Link, CallToAction_Primary_Link,
CallToAction_Secondary_Text, CallToAction_Secondary_Text,
CallToAction_Secondary_Link CallToAction_Secondary_Link,
Alignment,
Image
} = Astro.props } = Astro.props
if (Alignment === 'left') {
var AlignmentIsLeft = true
}
--- ---
<div class="hero"> <div style={'justify-content: ' + Alignment + '; text-align: ' + Alignment + '; background: url("' + Image + '")' } class="hero">
<div class="hero-content"> <div class="hero-content">
<h2>{Title}</h2> <h2>{Title}</h2>
<p>{Description}</p> <p>{Description}</p>
{CallToAction ?
<div class="call-to-actions"> <div class="call-to-actions">
{CallToAction_Primary ?
<a class="call-to-action" href={CallToAction_Primary_Link}>{CallToAction_Primary_Text}</a> <a class="call-to-action" href={CallToAction_Primary_Link}>{CallToAction_Primary_Text}</a>
:
null
}
{CallToAction_Secondary ?
<a id="secondary" class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a> <a id="secondary" class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a>
</div>
: :
null null
} }
</div> </div>
</div> </div>
</div>
{AlignmentIsLeft ?
<style lang="scss">
.hero {
padding-left: 60px;
h2 {
margin: 0px !important;
}
}
</style>
:
null
}
<style lang="scss"> <style lang="scss">
.hero { .hero {
background: url(/images/banners/Hero-Games.png);
background-position: top;
background-size: contain;
background-repeat: no-repeat;
min-height: 500px; min-height: 500px;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
align-items: center; align-items: center;
margin-top: -24px; margin-top: 0px;
.hero-content { .hero-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;