Move hero styles to css modules file

Author: itsamoreh

components/organisms/Hero/Hero.js

@@ -31,7 +31,7 @@ export default function Hero({
       className={cn(styles.hero, className)}
       style={{
         // These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
-        '--image-url': `url(${backgroundImage})`,
+        '--image-url': `url(${backgroundImage.url})`,
         '--image-tint-color': `#00000020`,
         '--image-fallback-color': `#000`
       }}
@@ -56,7 +56,7 @@ export default function Hero({
 }
 
 Hero.propTypes = {
-  backgroundImage: PropTypes.string,
+  backgroundImage: PropTypes.object,
   body: PropTypes.string,
   className: PropTypes.string,
   ctaText: PropTypes.string,

components/organisms/Hero/Hero.module.css

@@ -1,5 +1,5 @@
 .hero {
-  @apply container px-32 rounded;
+  @apply mb-12 container px-32 rounded;
 
   padding-top: 9.125rem;
   padding-bottom: 9.5rem;
@@ -10,12 +10,17 @@
   background-size: cover;
 
   & .content {
-    /* & .subtitle {
+    & .subtitle {
+      @apply text-sm opacity-80 mb-2 text-white;
     }
+
     & .title {
+      @apply font-bold text-xl mb-4 text-white;
     }
+
     & .body {
-    } */
+      @apply text-white;
+    }
 
     & .body + .button {
       @apply mt-16;