Link to Call for Speakers

assets/styles/elements/button.css

@@ -1,4 +1,5 @@
 .button {
+    all: unset;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -19,7 +20,7 @@
 }
 
 .button:hover {
-    color: white;
+    color: #ffffff;
     background: var(--color-primary-darker);
     border: 0.0625rem solid var(--color-primary-darker);
 }

assets/styles/layouts/partials/sections/event-title.css

@@ -26,14 +26,28 @@
     gap: 1.5625rem;
 }
 
+.event-title-section__footer-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5625rem;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 500px) {
+    .event-title-section__footer-buttons {
+        flex-direction: column;
+    }
+}
+
 .event-title-section__heading {
     min-height: 5rem;
     margin: 0;
     font-size: 3.75rem;
     color: white;
     font-weight: 800;
     line-height: 4.538125rem;
-    text-shadow: 0px 4px 4px #00000040;
+    text-shadow: 0 4px 4px #00000040;
 }
 
 .event-title-section__subheading {
@@ -43,5 +57,5 @@
     color: white;
     font-weight: 800;
     line-height: 1.815625rem;
-    text-shadow: 0px 4px 4px #00000040;
+    text-shadow: 0 4px 4px #00000040;
 }

docs/guides/feature-configuration.md

@@ -29,6 +29,15 @@ you may need to obtain the user's consent before establishing such connections
     of the page. To change the text of the banner, overwrite the corresponding
     translations.
 
+## Secondary Call to Action (CTA)
+
+The Event theme includes an optional **secondary call to action (CTA)** to engage users in additional actions related to the event, such as submitting a talk, joining a newsletter, participating in a giveaway, or other actions.
+
+### Parameters
+
+-   `secondaryCallToAction.label`: The label for the secondary CTA button that typically appears in the event banner.
+-   `secondaryCallToAction.url`: The URL to which users are redirected when they click the secondary CTA button.
+
 ## Countdown
 
 The home page displays a countdown that counts down till the start of the event.

hugo.spec.yaml

@@ -32,6 +32,9 @@ params:
                 - Country
             callToAction:
                 enableBanner: true
+            callToActionSecondary:
+                url: https://example.com
+                label: Sprecher:in werden
             featuredSessions:
                 - '729576'
                 - '729579'

hugo.yaml

@@ -78,6 +78,11 @@ params:
                     # 👇 Enter the URL of your ticket shop here.
                     url:
                 enableBanner: true
+            callToActionSecondary:
+                # 👇 Enter a secondary CTA link, e.g., for "Call for Speakers", "Join Newsletter", "Giveaway", etc.
+                url:
+                # 👇 Label text for the secondary CTA button.
+                label:
             socialLinks:
                 xUrl:
                 facebookUrl:

layouts/home.html

@@ -7,6 +7,7 @@
         "backgroundImage" .Site.Params.themes.event.images.titleBackground
         "eventbriteId" .Site.Params.themes.event.callToAction.eventbrite.eventId
         "ctaUrl" .Site.Params.themes.event.callToAction.other.url
+        "ctaSecondary" .Site.Params.themes.event.callToActionSecondary
         )
     }}
 

layouts/partials/sections/event-title.html

@@ -23,6 +23,21 @@ <h2 class="event-title-section__subheading">
             {{ partial "countdown.html" (dict "targetDate" $input.startDate) }}
         {{- end }}
 
-        {{- partial "cta/button.html" (dict "eventbriteId" $input.eventbriteId "ctaUrl" $input.ctaUrl) }}
+
+        <div class="event-title-section__footer-buttons">
+            {{- partial "cta/button.html" (dict "eventbriteId" $input.eventbriteId "ctaUrl" $input.ctaUrl "buttonClass" "button--scaled") }}
+
+            {{- with $input.ctaSecondary }}
+                {{- if .url }}
+                    <a
+                        href="{{ .url }}"
+                        class="button button--outlined button--scaled"
+                        rel="noopener noreferrer external"
+                        target="_blank">
+                        {{ .label }}
+                    </a>
+                {{- end }}
+            {{- end }}
+        </div>
     </div>
 </section>

tests/cta.spec.ts

@@ -4,3 +4,8 @@ test(`Should display the CTA banner`, async ({ page }) => {
     await page.goto('/');
     await expect(page.getByText('Sichern Sie sich jetzt Ihr Ticket!')).toBeVisible();
 });
+
+test(`Should display secondary CTA button in the banner when URL is provided`, async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText('Sprecher:in werden')).toBeVisible();
+});