From 40608514832bfbf7982f4cf24bf2231bdb9bc54a Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Fri, 2 Feb 2024 08:39:55 -0500
Subject: [PATCH] Add Hero component

---
 src/components/sections/Hero.astro | 69 ++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/sections/Hero.astro

diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
new file mode 100644
index 0000000..d6f85bf
--- /dev/null
+++ b/src/components/sections/Hero.astro
@@ -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>
\ No newline at end of file