feat: initial design for hero

2024-12-12 17:23:29 +01:00
parent 2bac342a5e
commit 869df50c01
2 changed files with 97 additions and 14 deletions
--- a/packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
+++ b/packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
@@ -1,3 +1,73 @@
-.frame-type-cloonar_hero .container {
+.frame-type-cloonar_hero {
+    position: relative;
    display: flex;
+    flex-direction: column;
+    padding-bottom: 3rem; /* Space for overlap */
+    background: #f9f9f9;
 }
+
+.frame-type-cloonar_hero .hero-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2.5rem;
+    color: #3c3c3c;
+}
+
+.frame-type-cloonar_hero .hero-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+.frame-type-cloonar_hero .hero-text {
+    flex: 1;
+    font-size: 1.2rem;
+    color: #3c3c3c;
+    line-height: 1.6;
+}
+
+.frame-type-cloonar_hero .hero-image-wrapper {
+    position: relative;
+    flex: 1;
+}
+
+.frame-type-cloonar_hero .hero-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+.frame-type-cloonar_hero .hero-social-icons {
+    position: absolute;
+    right: -10%;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.frame-type-cloonar_hero .social-icon {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background-color: #3c3c3c;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 50%;
+    text-decoration: none;
+    font-size: 1.2rem;
+}
+
+.frame-type-cloonar_hero .next-section-overlap {
+    position: absolute;
+    bottom: 2rem;
+    width: 100%;
+    height: 2rem;
+    background: #ffffff;
+    z-index: 10;
+}
+
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -1,18 +1,31 @@
-<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-    xmlns:cb="http://typo3.org/ns/TYPO3/CMS/ContentBlocks/ViewHelpers"
-    xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
-	  data-namespace-typo3-fluid="true">
-
 <f:layout name="Default" />
-<f:section name="Main">

-    <f:asset.css identifier="hero" href="{cb:assetPath()}/frontend.css"/>
-    <div class="textpic textpic-{data.imageorient}">
-        <div class="textpic-item textpic-gallery">
-            <f:image image="{data.image.0}" alt="Wobi" />
-        </div>
-        <div class="textpic-item textpic-text">
-            <f:format.html>{data.bodytext}</f:format.html>
+<f:section name="Main">
+  <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
+  <div class="hero">
+    <header class="hero-header">
+      <h1>{data.header}</h1>
+    </header>
+    <div class="hero-content">
+      <div class="hero-text">
+        <f:format.html>{data.bodytext}</f:format.html>
+      </div>
+      <div class="hero-image-wrapper">
+        <f:if condition="{data.image}">
+          <f:then>
+            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+          </f:then>
+          <f:else>
+            <p>No image available</p>
+          </f:else>
+        </f:if>
+        <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>
        </div>
+      </div>
    </div>
+    <div class="next-section-overlap"></div>
+  </div>
 </f:section>