Bump

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}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudovanilla/pandora",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "author": "SudoVanilla",
   "displayName": "Pandora",
   "description": "Astro component library built for SudoVanilla related websites and projects.",

src/Image.astro

@@ -18,12 +18,8 @@ const {
     fit={Fit} 
     format={Format} 
     quality={Quality}
-    onload="this.style.opacity = '1'"
+    onload="this.style.transition = '1s opacity, 1s box-shadow'; this.style.opacity = '1'"
     inferSize
 />
 
-<style>
-img {
-    opacity: 0; /* Fade in when it's loaded, see "onload" in component */
-}
-</style>
+<style>img {opacity: 0}</style>

src/blocks/CallToAction.astro

@@ -8,6 +8,7 @@ const {
     ImageAlt,
 
     Label,
+    LabelType,
     Shadow,
 
     PrimaryAction,
@@ -38,7 +39,7 @@ import Image from '../Image.astro'
         <div class="pd-cta-end-actions">
             {SecondaryActionText ? <a id="cta-secondary" href={SecondaryAction}>{SecondaryActionText}</a> : null}
             {PrimaryActionText ? <a id="cta-primary" href={PrimaryAction}>{PrimaryActionText}</a> : null}
-            {Label ? <p id="cta-label">{Label}</p> : null}
+            {Label ? <p class={'pd-cta-label pd-cta-label-' + LabelType}>{Label}</p> : null}
         </div>
     </div>
 </div>
@@ -98,7 +99,7 @@ import Image from '../Image.astro'
                     0.3s background,
                     0.6s color;
             }
-            #cta-label {
+            .pd-cta-label {
                 border-color: rgb(247, 247, 149);
                 background: rgb(247, 247, 149);
                 color: black !important;
@@ -109,6 +110,14 @@ import Image from '../Image.astro'
                 transition:
                     0.3s background,
                     0.6s color;
+                &.pd-cta-label-Note {
+                    background-color: #1f6feb;
+                    color: white !important;
+                }
+                &.pd-cta-label-Warning {
+                    background-color: #da3633;
+                    color: white !important;
+                }
             }
         }
     }

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>