feat(case-study): add intro text and project fields (#155)

21stdigital · Aug 2, 2024 · 7fb144e · 7fb144e
1 parent d60ae4d
commit 7fb144e
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 59 deletions.
diff --git a/content/collections/case_studies/sportfive.md b/content/collections/case_studies/sportfive.md
@@ -5,7 +5,7 @@ title: 'Von der Vision zur Konversion'
 teaser_text: 'Entdecke, wie wir SPORTFIVE dabei unterstützt haben, seine digitale Präsenz neu zu gestalten und eine Website zu schaffen, die nicht nur informiert, sondern aktiv zur Kundengewinnung beiträgt.'
 client: 4e44b30b-df14-4025-9bfa-edc245cc0560
 updated_by: 7b2bf1c2-0b8e-44d9-a774-98d3580bee37
-updated_at: 1716888409
+updated_at: 1722528810
 modules:
   -
     id: lw97vzb8
@@ -17,7 +17,7 @@ modules:
             type: text
             text: 'Als weltweit führender Sportrechtevermarkter nutzt SPORTFIVE sein vielfältiges Dienstleistungsportfolio, um Marken und Rechteinhaber mit maßgeschneiderten, kreativen Lösungen zusammenzuführen und deren globale Reichweite sowie Sichtbarkeit effektiv zu steigern. Ursprünglich bestand die Webpräsenz von SPORTFIVE aus einer einfachen Single-Page-Website, ergänzt durch diverse themenspezifische Satellitenseiten, die nicht das volle Potenzial des Unternehmens ausschöpften.'
     type: text
-    enabled: true
+    enabled: false
     grid_position: start
   -
     id: lw95pbu6
@@ -177,4 +177,12 @@ modules:
     person: db2dee11-1ab2-4b71-a7b1-670f575dc5dc
     type: team_cta
     enabled: true
+intro_text:
+  -
+    type: paragraph
+    content:
+      -
+        type: text
+        text: 'Als weltweit führender Sportrechtevermarkter nutzt SPORTFIVE sein vielfältiges Dienstleistungsportfolio, um Marken und Rechteinhaber mit maßgeschneiderten, kreativen Lösungen zusammenzuführen und deren globale Reichweite sowie Sichtbarkeit effektiv zu steigern. Ursprünglich bestand die Webpräsenz von SPORTFIVE aus einer einfachen Single-Page-Website, ergänzt durch diverse themenspezifische Satellitenseiten, die nicht das volle Potenzial des Unternehmens ausschöpften.'
+project_url: 'https://sportfive.com'
 ---
diff --git a/content/collections/case_studies/telekom-electronic-beats.md b/content/collections/case_studies/telekom-electronic-beats.md
@@ -4,27 +4,9 @@ blueprint: case_study
 title: 'Vom Musikmagazin zur preisgekrönten digitalen Publishing-Plattform'
 teaser_text: 'Erfahre, wie wir die Deutsche Telekom dabei unterstützt haben, ein traditionelles Printmagazin in eine agile, preisgekrönte digitale Plattform zu transformieren, die die elektronische Musik- und Kulturlandschaft Europas prägt.'
 client: da68ef99-69e2-4d9f-8e60-fc6479c8f12e
-updated_by: 12d85a5e-1014-44db-a25a-d7a2f0a9b94e
-updated_at: 1715972668
+updated_by: 7b2bf1c2-0b8e-44d9-a774-98d3580bee37
+updated_at: 1722591492
 modules:
-  -
-    id: lwakgyji
-    text:
-      -
-        type: paragraph
-        content:
-          -
-            type: text
-            text: 'Telekom Electronic Beats ist ein Marketingprogramm der Deutschen Telekom, das sich auf elektronische Musik spezialisiert hat und Lifestyle-, Kunst-, Digital- und Modethemen abdeckt. Ursprünglich als TV- und Festivalreihe gestartet, wurde später das englischsprachige Electronic Beats Magazine als monothematische Print-Publikation veröffentlicht. Über die Jahre entwickelte sich Electronic Beats zu einer festen Bezugs- und Austauschplattform für Musikfans und Experten, die heute Europas erfolgreichste Musik-Community mit über 500.000 Mitgliedern ist.'
-      -
-        type: paragraph
-        content:
-          -
-            type: text
-            text: 'Die Deutsche Telekom strebte den Wandel von einem Printmagazin zu einer digitalen Plattform an, um tagesaktuelle Inhalte mit der redaktionellen Flexibilität und Designfreiheit des Print-Formats zu verbinden. Die bestehende Website basierte jedoch auf einem Blog, der nicht den Ansprüchen gerecht wurde.'
-    grid_position: start
-    type: text
-    enabled: true
   -
     id: lwakiznh
     quote: 'Wir sahen die Notwendigkeit, unser Printmagazin zu einem echten Online-Magazin zu überführen, das die Dynamik und Vielfalt unserer Inhalte widerspiegelt. Unser Ziel war es, eine Plattform zu schaffen, die sowohl unseren redaktionellen Ambitionen gerecht wird als auch eine nahtlose User Experience bietet.'
@@ -171,4 +153,18 @@ modules:
     person: db2dee11-1ab2-4b71-a7b1-670f575dc5dc
     type: team_cta
     enabled: true
+intro_text:
+  -
+    type: paragraph
+    content:
+      -
+        type: text
+        text: 'Telekom Electronic Beats ist ein Marketingprogramm der Deutschen Telekom, das sich auf elektronische Musik spezialisiert hat und Lifestyle-, Kunst-, Digital- und Modethemen abdeckt. Ursprünglich als TV- und Festivalreihe gestartet, wurde später das englischsprachige Electronic Beats Magazine als monothematische Print-Publikation veröffentlicht. Über die Jahre entwickelte sich Electronic Beats zu einer festen Bezugs- und Austauschplattform für Musikfans und Experten, die heute Europas erfolgreichste Musik-Community mit über 500.000 Mitgliedern ist.'
+  -
+    type: paragraph
+    content:
+      -
+        type: text
+        text: 'Die Deutsche Telekom strebte den Wandel von einem Printmagazin zu einer digitalen Plattform an, um tagesaktuelle Inhalte mit der redaktionellen Flexibilität und Designfreiheit des Print-Formats zu verbinden. Die bestehende Website basierte jedoch auf einem Blog, der nicht den Ansprüchen gerecht wurde.'
+project_url: 'https://electronicbeats.net'
 ---
diff --git a/resources/blueprints/collections/case_studies/case_study.yaml b/resources/blueprints/collections/case_studies/case_study.yaml
@@ -12,6 +12,11 @@ tabs:
               required: true
               validate:
                 - required
+          -
+            handle: intro_text
+            field: module_text.text
+            config:
+              display: 'Intro Text'
           -
             import: modules
   teaser:
@@ -49,3 +54,13 @@ tabs:
               display: Client
               validate:
                 - required
+          -
+            handle: project_url
+            field:
+              input_type: url
+              placeholder: 'https://...'
+              type: text
+              display: 'Project URL'
+              validate:
+                - url
+                - 'starts_with:https://'
diff --git a/resources/css/components/border.css b/resources/css/components/border.css
@@ -0,0 +1,4 @@
+.border-gradient {
+  border-style: solid;
+  border-image: linear-gradient(to top left, #ff00d2, #bf29dd 20%, #7657ea) 1;
+}
diff --git a/resources/css/site.css b/resources/css/site.css
@@ -3,6 +3,7 @@
 @import url('tailwindcss/utilities');
 @import url('modules.css');
 @import url('typography.css');
+@import url('components/border.css');
 @import url('components/button.css');
 
 :root {

diff --git a/resources/css/typography.css b/resources/css/typography.css
@@ -1,14 +1,21 @@
-h1,
-.h1 {
-  @apply text-5xl font-bold leading-tight sm:text-6xl sm:leading-tight lg:text-7xl lg:leading-tight;
+:root {
+  --font-size-h2: 36px;
+
+  @screen 2xl {
+    --font-size-h2: 48px;
+  }
 }
 
-h2,
-.h2 {
-  @apply text-3xl font-bold leading-tight sm:text-4xl sm:leading-tight;
+.text-h1 {
+  @apply text-5xl font-bold leading-4 sm:text-6xl lg:text-7xl;
 }
 
-h3,
-.h3 {
+.text-h3 {
   @apply text-xl font-bold sm:text-2xl lg:text-3xl;
 }
+
+.text-copy {
+  p + p {
+    margin-top: 1em;
+  }
+}
diff --git a/resources/svg/cta-arrow-bold.svg b/resources/svg/cta-arrow-bold.svg
diff --git a/resources/svg/cta-arrow-thin.svg b/resources/svg/cta-arrow-thin.svg
diff --git a/resources/views/modules/case_study_list.antlers.html b/resources/views/modules/case_study_list.antlers.html
@@ -11,7 +11,7 @@
                         {{ svg :src="client.logo_monotone" class="w-40 lg:w-60 text-white fill-current" }}
                     {{ /if }}
                 </div>
-                <h3>
+                <h3 class="text-h3">
                     {{ title }}
                 </h3>
 

diff --git a/resources/views/modules/contact_cta.antlers.html b/resources/views/modules/contact_cta.antlers.html
@@ -9,9 +9,7 @@
                 {{ headline }}
             </h2>
 
-            {{ text }}
-                {{ partial:if_exists src="modules/texts/{{ type }}" }}
-            {{ /text }}
+            {{ partial:if_exists src="partials/copy" }}
             {{ partial:components/button :label="label" open_in_new_window="true" }}
                 {{ slot:svg }}
                     {{ if add_icon }}

diff --git a/resources/views/modules/section_header.antlers.html b/resources/views/modules/section_header.antlers.html
@@ -2,17 +2,15 @@
     {{ partial:grid class="gap-y-8" }}
         <div class="relative md:col-span-10 lg:col-span-5 xl:col-span-4">
             <h2
-                class="{{ headline_appearance === 'default' ? 'pink-gradient-text' : 'text-white' }} {{ headline | length < 20 ? 'lg:text-5xl lg:leading-tight' : '' }} relative hyphens-auto text-balance"
+                class="{{ headline_appearance === 'default' ? 'pink-gradient-text' : 'text-white' }} relative hyphens-auto text-balance text-h2"
             >
                 {{ headline }}
-                <div class="absolute right-full top-[0.675em] mr-6 hidden h-px w-screen bg-white/30 2xl:block"></div>
+                <div class="absolute right-full top-[0.675em] mr-6 hidden h-px w-screen bg-white/30 xl:block"></div>
             </h2>
         </div>
         {{ if text }}
             <div class="flex flex-col items-start gap-8 md:col-span-full lg:col-span-7 xl:col-span-8">
-                {{ text }}
-                    {{ partial:if_exists src="modules/texts/{{ type }}" }}
-                {{ /text }}
+                {{ partial:if_exists src="partials/copy" }}
             </div>
         {{ /if }}
     {{ /partial:grid }}

diff --git a/resources/views/modules/service_list.antlers.html b/resources/views/modules/service_list.antlers.html
@@ -4,11 +4,9 @@
             <div
                 class="col-span-6 flex flex-col gap-4 rounded-md border border-zinc-800 bg-black-gradient p-4 sm:p-6 lg:p-8"
             >
-                <h3>{{ title }}</h3>
+                <h3 class="text-h3">{{ title }}</h3>
 
-                {{ teaser_text }}
-                    {{ partial:if_exists src="modules/texts/{{ type }}" }}
-                {{ /teaser_text }}
+                {{ partial:if_exists src="partials/copy" :text="teaser_text" }}
             </div>
         {{ /collection:services }}
     {{ /partial:grid }}

diff --git a/resources/views/modules/team_cta.antlers.html b/resources/views/modules/team_cta.antlers.html
@@ -12,9 +12,7 @@
                         </div>
                     {{ /if }}
                     {{ if text }}
-                        {{ text }}
-                            {{ partial:if_exists src="modules/texts/{{ type }}" }}
-                        {{ /text }}
+                        {{ partial:if_exists src="partials/copy" }}
                     {{ /if }}
                     <div class="relative flex gap-x-8">
                         {{ partial:images/team_cta_small }}

diff --git a/resources/views/modules/text.antlers.html b/resources/views/modules/text.antlers.html
@@ -1,9 +1,7 @@
 <div class="container">
     {{ partial:grid }}
         <div class="{{ grid_position === 'end' ?= 'lg:col-start-5' }} col-span-full lg:col-span-8">
-            {{ text }}
-                {{ partial:if_exists src="modules/texts/{{ type }}" }}
-            {{ /text }}
+            {{ partial:if_exists src="partials/copy" }}
         </div>
     {{ /partial:grid }}
 </div>
diff --git a/resources/views/modules/tiles/text.antlers.html b/resources/views/modules/tiles/text.antlers.html
@@ -9,12 +9,10 @@
         class="flex h-full flex-col items-start gap-y-6 rounded-md border border-zinc-800 bg-black-gradient p-4 sm:p-6 lg:p-8"
     >
         {{ if headline }}
-            <h3>{{ headline }}</h3>
+            <h3 class="text-h3">{{ headline }}</h3>
         {{ /if }}
         {{ if text }}
-            {{ text }}
-                {{ partial:if_exists src="modules/texts/{{ type }}" }}
-            {{ /text }}
+            {{ partial:if_exists src="partials/copy" }}
         {{ /if }}
     </div>
 </div>
diff --git a/resources/views/partials/_copy.antlers.html b/resources/views/partials/_copy.antlers.html
@@ -0,0 +1,3 @@
+{{ text }}
+    {{ partial:if_exists src="partials/copy/{{ type }}" }}
+{{ /text }}
diff --git a/...s/views/modules/texts/button.antlers.html → ...s/views/partials/copy/button.antlers.html b/...s/views/modules/texts/button.antlers.html → ...s/views/partials/copy/button.antlers.html
diff --git a/...ces/views/modules/texts/text.antlers.html → ...ces/views/partials/copy/text.antlers.html b/...ces/views/modules/texts/text.antlers.html → ...ces/views/partials/copy/text.antlers.html
@@ -3,6 +3,6 @@
     @desc The plain text element used inside common bard fields.
 #}}
 
-<div class="text font-thin leading-relaxed lg:text-lg lg:leading-relaxed">
+<div class="{{ class }} text-copy font-thin leading-relaxed lg:text-lg">
     {{ text }}
 </div>
diff --git a/resources/views/templates/case_study.antlers.html b/resources/views/templates/case_study.antlers.html
@@ -6,16 +6,37 @@
 {{# This first part automatically adds the client and title of the case study. #}}
 <div class="container">
     {{ partial:grid }}
-        <div class="col-span-full py-hero xl:col-span-10 2xl:col-span-9">
-            <div class="inline-block">
+        <div class="col-span-full grid grid-cols-subgrid py-hero">
+            <div class="col-span-full inline-block lg:col-span-8">
                 <span class="text-sm font-bold text-white lg:text-base 2xl:text-lg">
                     {{ client.title }}
                 </span>
             </div>
 
-            <h1 class="hyphens-auto text-hero pink-gradient-text">
+            <h1 class="col-span-full hyphens-auto text-hero pink-gradient-text lg:col-span-10 xl:col-span-8">
                 {{ title }}
             </h1>
+            {{ if project_url | is_url }}
+                <div
+                    class="col-span-full -col-end-1 row-start-3 mt-7 flex items-center gap-2 xl:col-start-9 xl:flex-col xl:items-start xl:gap-1"
+                >
+                    <p class="text font-thin leading-relaxed">Zum Projekt:</p>
+                    <a
+                        class="border-gradient relative inline-flex items-center gap-3 self-start border-b-2 text-copy"
+                        href="{{ project_url }}"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {{ project_url }}
+                        {{ svg:cta-arrow-thin }}
+                    </a>
+                </div>
+            {{ /if }}
+            {{ if intro_text }}
+                <div class="col-span-full mt-7 lg:col-span-8">
+                    {{ partial:if_exists src="partials/copy" :text="intro_text" }}
+                </div>
+            {{ /if }}
         </div>
     {{ /partial:grid }}
 </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -33,7 +33,22 @@ export default {
         "pink-gradient": `linear-gradient(to top left, #FF00D2, #BF29DD 20%, #7657EA)`
       }),
       fontSize: {
-        "hero": 'min(10.5vw, 85px)',
+        "hero": ['min(10.5vw, 85px)', {
+          lineHeight: 1.1875,
+          fontWeight: 'bold'
+        }],
+        "copy": ['18px', {
+          lineHeight: '1.55',
+          fontWeight: '100'
+        }],
+        "copy-small": ['18px', {
+          lineHeight: '1.55',
+          fontWeight: '100'
+        }],
+        "h2":['var(--font-size-h2)', {
+          lineHeight: '1.19',
+          fontWeight: '700'
+        }],
       },
       padding: {
         "hero": 'min(9rem, 30vh)',
@@ -42,7 +57,7 @@ export default {
   },
   plugins: [
     require("@tailwindcss/typography"),
-    plugin(function ({ addUtilities }) {
+    plugin(({ addUtilities }) => {
       addUtilities({
         ".pink-gradient-text": {
           backgroundImage: