Create Hero component

index.ts

@@ -1,8 +1,9 @@
 // Blocks
 import CallToAction from "./src/blocks/CallToAction.astro";
+import Hero from "./src/blocks/Hero.astro"
 
 // Components
 import Image from "./src/Image.astro";
 
 // Export
-export {CallToAction, Image}
+export {CallToAction, Image, Hero}

src/blocks/Hero.astro

@@ -0,0 +1,48 @@
+---
+// Properties
+const {
+    Title,
+    Description,
+
+    ImageSource,
+    ImageAlt,
+} = Astro.props
+
+// Components
+import Image from '../Image.astro'
+---
+
+<div class="pd-hero">
+    <Image Source={ImageSource} Alt={ImageAlt}/>
+    <div class="pd-hero-content">
+        <h2>{Title}</h2>
+        <p>{Description}</p>
+    </div>
+</div>
+
+<style>
+.pd-hero {
+    position: relative;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    img {
+        position: absolute;
+        z-index: -1;
+        border-radius: 12px;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        opacity: 0.5 !important;
+        filter: brightness(0.75);
+    }
+    .pd-hero-content {
+        margin-left: 10%;
+        color: var(--pandora-text);
+        * {margin: 0px}
+        h2 {font-size: 48px}
+        p {font-size: 24px}
+    }
+}
+</style>