From e868695b96f78a5740c5e70ad3e9676ff65228ab Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Fri, 2 Feb 2024 16:10:42 -0500
Subject: [PATCH] Add option for alignment, image, toggle CTA buttons

---
 src/components/sections/Hero.astro | 48 +++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index d6f85bf..c25fae9 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -2,42 +2,62 @@
 const {
     Title,
     Description,
-    CallToAction,
+    CallToAction_Primary,
+    CallToAction_Secondary,
     CallToAction_Primary_Text,
     CallToAction_Primary_Link,
     CallToAction_Secondary_Text,
-    CallToAction_Secondary_Link
+    CallToAction_Secondary_Link,
+    Alignment,
+    Image
 } = 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">
         <h2>{Title}</h2>
         <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>
+                :
+                null
+            }
+            {CallToAction_Secondary ?
                 <a id="secondary" class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a>
-            </div>
-            :
-            null
-        }
+                :
+                null
+            }
+        </div>
     </div>
 </div>
 
+{AlignmentIsLeft ?
+    <style lang="scss">
+        .hero {
+            padding-left: 60px;
+            h2 {
+                margin: 0px !important;
+            }
+        }
+    </style>
+    :
+    null
+}
+
 <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;
+    margin-top: 0px;
     .hero-content {
         display: flex;
         flex-direction: column;