feat: many design changes

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -1,13 +1,19 @@
 .frame-type-cloonar_hero {
   position: relative;
   z-index: 1;
+  /* Use a relative path to correctly load the image */
   background: #cecece;
+  background-repeat: repeat;
+  background: url('../../../Images/background.jpg') repeat;
 }
 
 
 .frame-type-cloonar_hero + .frame {
     margin-top: -10rem;
 }
+.frame-type-cloonar_hero .container {
+    padding-bottom: 3rem;
+}
 
 /* Inner container with white background and padding */
 .frame-type-cloonar_hero .hero-inner {
@@ -23,22 +29,26 @@
 }
 
 .frame-type-cloonar_hero .hero-subheader {
-  font-size: 1rem;
-  color: #3c6418;
-  margin-bottom: 0.5rem;
+  font-size: 2rem;
+  color: var(--bs-primary);
+  margin-bottom: 0rem;
+  line-height: 1;
 }
 
 .frame-type-cloonar_hero .hero-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #3c6418;
-  margin: 0 0 1rem 0;
-  line-height: 1.2;
   text-transform: uppercase;
+  font-size: 4rem;
+  color: var(--bs-primary);
+  line-height: 1;
+  margin-bottom: 2rem;
+}
+
+.frame-type-cloonar_hero h4 {
+    text-transform: uppercase;
 }
 
 .frame-type-cloonar_hero .hero-text {
-  font-size: 0.9rem;
+  font-size: 1rem;
   color: #333;
   line-height: 1.4;
   margin-bottom: 1rem;
@@ -49,19 +59,19 @@
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
+
 }
 
 .frame-type-cloonar_hero .social-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #3c6418;
-  color: #fff;
-  font-size: 1rem;
+  background: var(--bs-primary);
+  color: var(--bs-yellow);
+  font-size: 1.5rem;
+  padding: 2.375rem;
   text-decoration: none;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
   transition: background 0.3s;
 }
 
@@ -71,23 +81,30 @@
 
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
+  align-self: flex-end;
 }
 
 .frame-type-cloonar_hero .hero-image {
-  max-width: 200px;
   width: 100%;
   height: auto;
   border-radius: 0.5rem;
 }
 
+.frame-type-cloonar_hero img {
+    width: 100%;
+}
+
 @media (min-width: 768px) {
+    .frame-type-cloonar_hero .container {
+        padding-bottom: 4rem;
+    }
+
   .frame-type-cloonar_hero .hero-subheader {
-    font-size: 1.2rem;
+    font-size: 3rem;
   }
 
   .frame-type-cloonar_hero .hero-title {
-    font-size: 2rem;
-    margin-bottom: 1.2rem;
+    font-size: 5rem;
   }
 
   .frame-type-cloonar_hero .hero-text {
@@ -96,24 +113,23 @@
 
   .frame-type-cloonar_hero .social-icon {
     width: 2.5rem;
-    height: 2.5rem;
-    font-size: 1.2rem;
+    height: 2rem;
+    font-size: 2rem;
   }
 
   .frame-type-cloonar_hero .hero-image {
-    max-width: 250px;
   }
 }
 
 @media (min-width: 992px) {
   .frame-type-cloonar_hero .hero {
     display: grid;
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: 1fr 40% 7.125rem;
+    grid-template-rows: auto auto 1fr;
     grid-template-areas:
-      "subheader image icons"
-      "title    image icons"
-      "text     image icons"
-      "social   image icons";
+      "subheader    image social"
+      "title        image social"
+      "text         image social";
     align-items: start;
     justify-items: start;
     text-align: left;
@@ -121,14 +137,10 @@
 
   .frame-type-cloonar_hero .hero-subheader {
     grid-area: subheader;
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
   }
 
   .frame-type-cloonar_hero .hero-title {
     grid-area: title;
-    font-size: 3rem;
-    margin-bottom: 1.5rem;
   }
 
   .frame-type-cloonar_hero .hero-text {
@@ -144,6 +156,7 @@
     gap: 1rem;
     margin-bottom: 0;
     align-items: flex-start;
+    align-self: center;
   }
 
   .frame-type-cloonar_hero .hero-image-wrapper {
@@ -155,6 +168,5 @@
   }
 
   .frame-type-cloonar_hero .hero-image {
-    max-width: 300px;
   }
 }

packages/base/ContentBlocks/ContentElements/hero/config.yaml

@@ -4,6 +4,9 @@ group: default
 prefixFields: true
 prefixType: full
 fields:
+  -
+    identifier: subheader
+    useExistingField: true
   -
     identifier: header
     useExistingField: true

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -7,16 +7,16 @@
   <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
 
   <div class="hero-inner">
+    <!-- Inline style with f:uri.resource to ensure correct path -->
     <div class="hero">
-      <div class="hero-subheader">{data.subheader}</div>
-      <h2 class="hero-title">{data.header}</h2>
+      <h2 class="hero-subheader">{data.subheader}</h2>
+      <h1 class="hero-title">{data.header}</h1>
       <div class="hero-text">
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-        <a href="#" class="social-icon">X</a>
-        <a href="#" class="social-icon">Instagram</a>
-        <a href="#" class="social-icon">TikTok</a>
+            <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
+            <a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">