[TASK] make success hero image bigger on promotion site

TYPO3incubator · Apr 12, 2024 · 041b50d · 041b50d
1 parent 2451a98
commit 041b50d
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 6 deletions.
diff --git a/assets/scss/base/_global.scss b/assets/scss/base/_global.scss
@@ -117,6 +117,19 @@ html {
         }
     }
 
+    .link {
+        @apply underline;
+
+        &:hover,
+        &:focus {
+            @apply no-underline;
+        }
+
+        &:focus {
+            @apply ring ring-2 ring-primary-200
+        }
+    }
+
     .rte {
         a:not(.btn) {
             @apply underline;
@@ -131,6 +144,10 @@ html {
             }
         }
 
+        .btn {
+            @apply my-4;
+        }
+
         h1 {
             @apply font-bold font-heading block text-2xl my-5;
         }

diff --git a/local_packages/success/Configuration/Sets/SetsPromotion/settings.yaml b/local_packages/success/Configuration/Sets/SetsPromotion/settings.yaml
@@ -12,10 +12,10 @@ ui:
     color:
       primary: "rgb(255, 135, 0)"
       secondary: "rgb(71, 128, 113)"
-      light: "rgb(163, 208, 196)"
-      primarytext: "var(--color-whitetext)"
-      secondarytext: "var(--color-blacktext)"
-      lighttext: "var(--color-whitetext)"
+      light: "rgb(199, 230, 222)"
+      primarytext: "white"
+      secondarytext: "white"
+      lighttext: "black"
   dark:
     color:
 

diff --git a/local_packages/success/Resources/Private/Templates/SetsPromotion/Content/SuccessHero.html b/local_packages/success/Resources/Private/Templates/SetsPromotion/Content/SuccessHero.html
@@ -0,0 +1,72 @@
+<html
+    data-namespace-typo3-fluid="true"
+    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+>
+<f:layout name="Default"/>
+<f:section name="Main">
+    <f:if condition="{data.imageorient} > 1">
+        <f:then>
+            <f:render section="Beside" arguments="{_all}"/>
+        </f:then>
+        <f:else>
+            <f:render section="Fullwidth" arguments="{_all}"/>
+        </f:else>
+    </f:if>
+</f:section>
+
+<f:section name="Fullwidth">
+    <div class="{f:if(condition: data.assets, then:'background-black')} relative min-h-screen flex items-center">
+        <f:if condition="{data.assets}">
+            <f:image image="{data.assets.0}" class="object-cover w-full h-full img-darken absolute top-0 left-0" width="1400"></f:image>
+        </f:if>
+        <div class="container px-5 py-12 mx-auto z-10 relative">
+            <div class="grid gap-5 md:grid-cols-2">
+                <div class="{f:if(condition: '{data.imageorient} == 1', then: 'col-start-2')}">
+                    <f:render partial="Content/Header"
+                              arguments="{headerLayout: data.header_layout, headerStyle: data.header_style, header: data.header, overline: data.overline}"/>
+
+                    <f:if condition="{data.bodytext}">
+                        <div class="rte mt-4">{data.bodytext -> f:format.html(parseFuncTSPath: 'lib.parseFunc')}</div>
+                    </f:if>
+
+                    <div class="mt-5">
+                        <f:render partial="Content/Button"
+                                  arguments="{buttonLink: data.button_link, buttonStyle: data.button_style, buttonLabel: data.button_label}"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</f:section>
+
+<f:section name="Beside">
+    <div class="min-h-screen flex items-center pt-24">
+        <div class="container px-5 mx-auto">
+            <div class="grid gap-5 md:grid-cols-2">
+                <div class="flex items-center">
+                    <div>
+                        <f:render partial="Content/Header"
+                                  arguments="{headerLayout: data.header_layout, headerStyle: data.header_style, header: data.header, overline: data.overline}"/>
+
+                        <f:if condition="{data.bodytext}">
+                            <div class="rte mt-4">{data.bodytext -> f:format.html(parseFuncTSPath: 'lib.parseFunc')}</div>
+                        </f:if>
+                        <div class="mt-5">
+                            <f:render partial="Content/Button"
+                                      arguments="{buttonLink: data.button_link, buttonStyle: data.button_style, buttonLabel: data.button_label}"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="order-first md:order-2 mb-5 md:mb-0 md:flex justify-center items-center{f:if(condition: '{data.imageorient} == 3', then: ' order-first')}">
+                    <div class="aspect-square rounded overflow-hidden rotate-right">
+                        <f:if condition="{data.assets}">
+                            <f:image image="{data.assets.0}" class="object-cover h-full w-100" width="600"></f:image>
+                        </f:if>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</f:section>
+</html>
diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Content/SuccessFeatures.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Content/SuccessFeatures.html
@@ -39,7 +39,7 @@
 
                             <div>
                                 <div class="heading-lg my-1">{feature.header}</div>
-                                <div>{feature.text -> f:format.html(parseFuncTSPath: 'lib.parseFunc')}</div>
+                                <div class="rte">{feature.text -> f:format.html(parseFuncTSPath: 'lib.parseFunc')}</div>
                             </div>
                         </div>
                     </f:for>

diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Content/SuccessHero.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Content/SuccessHero.html
@@ -15,7 +15,7 @@
 </f:section>
 
 <f:section name="Fullwidth">
-    <div class="relative min-h-screen flex items-center">
+    <div class="{f:if(condition: data.assets, then:'background-black')} relative min-h-screen flex items-center">
         <f:if condition="{data.assets}">
             <f:image image="{data.assets.0}" class="object-cover w-full h-full img-darken absolute top-0 left-0" width="1400"></f:image>
         </f:if>