From 15c26adff1c8948a118f7d48ba01725f11089b17 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazeelabs.com>
Date: Mon, 15 Apr 2024 14:38:56 +0000
Subject: [PATCH 01/17] style: adjustments on figcaption and unordered list

---
 packages/ui/src/components/Organisms/Footer.tsx      | 12 ++++++------
 .../components/Organisms/PageContent/BlockMarkup.tsx |  2 +-
 .../components/Organisms/PageContent/BlockMedia.tsx  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 059b57695..0264b134f 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -73,7 +73,7 @@ export function Footer() {
               <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -90,7 +90,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -103,7 +103,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -120,7 +120,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black"
                 >
                   <svg
                     className="w-5 h-5"
@@ -155,7 +155,7 @@ export function Footer() {
                       <Link
                         href={item.target!}
                         className={
-                          'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                          'text-gray-900 block hover:underline transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
                         }
                       >
                         {item.title}
@@ -174,7 +174,7 @@ export function Footer() {
                           <Link
                             key={child.target}
                             href={child.target}
-                            className="block transition-all text-base mb-4 hover:text-blue-600"
+                            className="block transition-all text-base mb-4 hover:underline"
                           >
                             {child.title}
                           </Link>
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
index 7ff050f95..54f29a9fb 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -43,7 +43,7 @@ export function BlockMarkup(props: BlockMarkupFragment) {
                 className={clsx(className, { 'list-none relative': unordered })}
               >
                 {unordered ? (
-                  <ArrowRightCircleIcon className="w-6 h-6 absolute mt-0.5 left-[-1.5em] text-indigo-600" />
+                  <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-indigo-600" />
                 ) : null}
                 {children}
               </li>
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
index a2d9ec34d..4907c2486 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -13,7 +13,7 @@ export function BlockMedia(props: BlockMediaFragment) {
       <figure className="mt-16 mx-auto max-w-3xl">
         <Media {...props.media} />
         {props.caption ? (
-          <figcaption className="mt-4 flex gap-x-2 text-sm leading-6 text-gray-500">
+          <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
             <Html markup={props.caption} />
           </figcaption>
         ) : null}
@@ -27,7 +27,7 @@ function Media(props: Required<BlockMediaFragment>['media']) {
     case 'MediaImage':
       return (
         <Image
-          className="rounded-xl max-w-full mx-auto"
+          className="max-w-full mx-auto"
           source={props.source}
           alt={props.alt}
         />

From bb8e37de241e05bfab955b88b0286354a538373c Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazeelabs.com>
Date: Mon, 15 Apr 2024 14:43:42 +0000
Subject: [PATCH 02/17] chore: prettier

---
 packages/ui/src/components/Organisms/Footer.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 0264b134f..b318df60b 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -118,10 +118,7 @@ export function Footer() {
                     />
                   </svg>
                 </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-black"
-                >
+                <a href="#" className="text-gray-400 hover:text-black">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"

From 9af10460fe3267001cc99fbc1b08ea0a1e65f47c Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazeelabs.com>
Date: Mon, 15 Apr 2024 14:38:56 +0000
Subject: [PATCH 03/17] style: adjustments on figcaption and unordered list

---
 packages/ui/src/components/Organisms/Footer.tsx      | 12 ++++++------
 .../components/Organisms/PageContent/BlockMarkup.tsx |  2 +-
 .../components/Organisms/PageContent/BlockMedia.tsx  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 059b57695..0264b134f 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -73,7 +73,7 @@ export function Footer() {
               <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -90,7 +90,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -103,7 +103,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black dark:hover:text-white"
                 >
                   <svg
                     className="w-5 h-5"
@@ -120,7 +120,7 @@ export function Footer() {
                 </a>
                 <a
                   href="#"
-                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                  className="text-gray-400 hover:text-black"
                 >
                   <svg
                     className="w-5 h-5"
@@ -155,7 +155,7 @@ export function Footer() {
                       <Link
                         href={item.target!}
                         className={
-                          'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                          'text-gray-900 block hover:underline transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
                         }
                       >
                         {item.title}
@@ -174,7 +174,7 @@ export function Footer() {
                           <Link
                             key={child.target}
                             href={child.target}
-                            className="block transition-all text-base mb-4 hover:text-blue-600"
+                            className="block transition-all text-base mb-4 hover:underline"
                           >
                             {child.title}
                           </Link>
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
index 7ff050f95..54f29a9fb 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -43,7 +43,7 @@ export function BlockMarkup(props: BlockMarkupFragment) {
                 className={clsx(className, { 'list-none relative': unordered })}
               >
                 {unordered ? (
-                  <ArrowRightCircleIcon className="w-6 h-6 absolute mt-0.5 left-[-1.5em] text-indigo-600" />
+                  <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-indigo-600" />
                 ) : null}
                 {children}
               </li>
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
index a2d9ec34d..4907c2486 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -13,7 +13,7 @@ export function BlockMedia(props: BlockMediaFragment) {
       <figure className="mt-16 mx-auto max-w-3xl">
         <Media {...props.media} />
         {props.caption ? (
-          <figcaption className="mt-4 flex gap-x-2 text-sm leading-6 text-gray-500">
+          <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
             <Html markup={props.caption} />
           </figcaption>
         ) : null}
@@ -27,7 +27,7 @@ function Media(props: Required<BlockMediaFragment>['media']) {
     case 'MediaImage':
       return (
         <Image
-          className="rounded-xl max-w-full mx-auto"
+          className="max-w-full mx-auto"
           source={props.source}
           alt={props.alt}
         />

From 256b7d9611553260183726d060b7ca3daf749a83 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazeelabs.com>
Date: Mon, 15 Apr 2024 14:43:42 +0000
Subject: [PATCH 04/17] chore: prettier

---
 packages/ui/src/components/Organisms/Footer.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 0264b134f..b318df60b 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -118,10 +118,7 @@ export function Footer() {
                     />
                   </svg>
                 </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-black"
-                >
+                <a href="#" className="text-gray-400 hover:text-black">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"

From 125ad0b735ff521a8fe4475880bc1f4d3ee56df1 Mon Sep 17 00:00:00 2001
From: Mattia Simonato <mattiasimonato.w@gmail.com>
Date: Mon, 15 Apr 2024 20:07:24 +0200
Subject: [PATCH 05/17] feat(SLB-322): adapt hero section when no image is
 passed

---
 .../ui/src/components/Organisms/PageHero.tsx  | 105 ++++++++++++------
 .../ui/src/components/Routes/Page.stories.tsx |   3 +
 2 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index be2e4cc8a..e8de4699e 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -4,7 +4,13 @@ import React from 'react';
 import { BlockForm } from './PageContent/BlockForm';
 
 export function PageHero(props: NonNullable<PageFragment['hero']>) {
-  return props.formUrl ? <FormHero {...props} /> : <DefaultHero {...props} />;
+  return props.formUrl ? (
+    <FormHero {...props} />
+  ) : props.image ? (
+    <DefaultHero {...props} />
+  ) : (
+    <NoImageHero {...props} />
+  );
 }
 
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
@@ -19,33 +25,9 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
           data-test-id={'hero-image'}
         />
       ) : null}
-      <div
-        className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
-        aria-hidden="true"
-      >
-        <div
-          className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
-      <div
-        className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
-        aria-hidden="true"
-      >
-        <div
-          className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-        />
-      </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+          <h1 className="max-w-xl text-5xl font-extrabold tracking-tight leading-tight text-white">
             {props.headline}
           </h1>
           {props.lead ? (
@@ -54,10 +36,20 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
           {props.ctaText && props.ctaUrl ? (
             <Link
               href={props.ctaUrl}
-              className={
-                'mt-7 inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
-              }
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
               {props.ctaText}
             </Link>
           ) : null}
@@ -82,7 +74,7 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
         ) : null}
 
         <div className="px-4 lg:pt-24 pt-8 pb-72 lg:pb-80 mx-auto max-w-screen-sm text-center lg:px-6 ">
-          <h1 className="mb-4 text-4xl tracking-tight font-extrabold text-white">
+          <h1 className="text-4xl tracking-tight font-extrabold text-white">
             {props.headline}
           </h1>
           {props.lead ? (
@@ -91,10 +83,20 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
           {props.ctaText && props.ctaUrl ? (
             <Link
               href={props.ctaUrl}
-              className={
-                'mt-7 inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
-              }
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
               {props.ctaText}
             </Link>
           ) : null}
@@ -110,3 +112,40 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
     </section>
   );
 }
+
+function NoImageHero(props: NonNullable<PageFragment['hero']>) {
+  return (
+    <section className="relative isolate overflow-hidden py-12 sm:py-20 sm:pb-12 px-6 lg:px-8">
+      <div className="mx-auto max-w-3xl">
+        <div className="max-w-2xl lg:mx-0">
+          <h1 className="max-w-xl text-5xl font-extrabold tracking-tight leading-tight">
+            {props.headline}
+          </h1>
+          {props.lead ? (
+            <p className="mt-6 text-lg leading-8 text-gray-500">{props.lead}</p>
+          ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+              {props.ctaText}
+            </Link>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index 6bdb98a5e..f3d048c25 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -42,6 +42,9 @@ export const Default = {
       path: '/test' as Url,
       hero: {
         headline: 'Page Hero Headline',
+        lead: 'A longer lead text that even might break into multiple lines.',
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
       },
       content: [
         {

From aaaa758b1f71dc2790bb028497a800334fb3d472 Mon Sep 17 00:00:00 2001
From: Mattia Simonato <mattiasimonato.w@gmail.com>
Date: Tue, 16 Apr 2024 11:16:25 +0200
Subject: [PATCH 06/17] feat(SLB-322): remove svgs shapes from hero

---
 packages/ui/src/components/Organisms/PageHero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index e8de4699e..c043a10c0 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -103,7 +103,7 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
         </div>
       </div>
       {props.formUrl ? (
-        <div className="px-4 mx-auto -mt-[22rem] lg:-mt-96 max-w-screen-xl lg:px-6 relative">
+        <div className="px-4 mx-auto mt-[-22rem] lg:-mt-96 max-w-screen-xl lg:px-6 relative">
           <div className="p-6 mx-auto max-w-screen-md bg-white rounded-lg border border-gray-200 shadow-sm">
             <BlockForm url={props.formUrl} />
           </div>

From d6d7457032f665f8eb044387715691f0affcbff6 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Tue, 16 Apr 2024 14:30:15 +0200
Subject: [PATCH 07/17] style: remove dark classes

---
 packages/ui/src/components/Organisms/Footer.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index b318df60b..0d2958cad 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -71,10 +71,7 @@ export function Footer() {
             </a>
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-black dark:hover:text-white"
-                >
+                <a href="#" className="text-gray-400 hover:text-black ">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"
@@ -88,10 +85,7 @@ export function Footer() {
                     />
                   </svg>
                 </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-black dark:hover:text-white"
-                >
+                <a href="#" className="text-gray-400 hover:text-black ">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"
@@ -101,10 +95,7 @@ export function Footer() {
                     <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                   </svg>
                 </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-black dark:hover:text-white"
-                >
+                <a href="#" className="text-gray-400 hover:text-black ">
                   <svg
                     className="w-5 h-5"
                     fill="currentColor"

From e61121ee56a141db91c5945510637e4af6346f00 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Thu, 11 Apr 2024 22:01:56 +0300
Subject: [PATCH 08/17] feat(SLB-313 SLB-308): gutenberg cta block and its
 graphql schema

---
 .../gutenberg_blocks/src/blocks/cta.tsx       | 93 +++++++++++++++++++
 packages/drupal/gutenberg_blocks/src/index.ts |  1 +
 .../a397ca48-8fad-411e-8901-0eba2feb989c.yml  | 78 ++++++----------
 .../ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml  |  2 +
 packages/schema/src/schema.graphql            |  7 ++
 tests/schema/specs/blocks.spec.ts             | 23 +++++
 6 files changed, 155 insertions(+), 49 deletions(-)
 create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/cta.tsx

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
new file mode 100644
index 000000000..ec6d9f7b4
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -0,0 +1,93 @@
+import {
+  // @ts-ignore
+  __experimentalLinkControl as LinkControl,
+  RichText,
+} from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { ToggleControl } from 'wordpress__components';
+import { compose, withState } from 'wordpress__compose';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+// @ts-ignore
+const { setPlainTextAttribute } = silverbackGutenbergUtils;
+
+// @ts-ignore
+registerBlockType('custom/cta', {
+  title: 'CTA',
+  icon: 'admin-links',
+  category: 'common',
+  attributes: {
+    url: {
+      type: 'string',
+    },
+    text: {
+      type: 'string',
+    },
+    // To have an easier integration with entity usage, we also retrieve and
+    // store the uuid of internal links.
+    uuid: {
+      type: 'string',
+    },
+    openInNewTab: {
+      type: 'boolean',
+    },
+  },
+  // @ts-ignore
+  edit: compose(withState({}))((props) => {
+    return (
+      <div>
+        <RichText
+          identifier="text"
+          className={`button`}
+          tagName="p"
+          value={props.attributes.text}
+          allowedFormats={[]}
+          // @ts-ignore
+          disableLineBreaks={true}
+          placeholder={__('Link text')}
+          keepPlaceholderOnFocus={true}
+          style={{
+            cursor: 'text',
+          }}
+          onChange={(text: string) => {
+            setPlainTextAttribute(props, 'text', text);
+          }}
+        />
+        <LinkControl
+          value={{
+            url: props.attributes.url,
+            openInNewTab: props.attributes.openInNewTab,
+          }}
+          settings={{}}
+          // @ts-ignore
+          onChange={(link) => {
+            props.setAttributes({
+              url: link.url,
+              uuid: link.id,
+            });
+          }}
+        />
+        <ToggleControl
+          label={__('Open in new tab')}
+          help={
+            props.attributes.openInNewTab
+              ? __('Opens in a new tab.')
+              : __('Opens in the same tab.')
+          }
+          checked={props.attributes.openInNewTab}
+          onChange={(openInNewTab) => {
+            props.setAttributes({
+              openInNewTab,
+            });
+          }}
+        />
+      </div>
+    );
+  }),
+
+  save: () => {
+    return null;
+  },
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
index 08099821b..a0aff90af 100644
--- a/packages/drupal/gutenberg_blocks/src/index.ts
+++ b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -5,3 +5,4 @@ import './blocks/heading';
 import './blocks/form';
 import './blocks/image-teaser';
 import './blocks/image-teasers';
+import './blocks/cta';
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
index 3076dbacc..116627ac3 100644
--- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
+++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -10,43 +10,31 @@ _meta:
     72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
-    -
-      target_id: 1
+    - target_id: 1
   status:
-    -
-      value: true
+    - value: true
   uid:
-    -
-      target_id: 1
+    - target_id: 1
   title:
-    -
-      value: 'Blocks: complete'
+    - value: 'Blocks: complete'
   created:
-    -
-      value: 1686759493
+    - value: 1686759493
   promote:
-    -
-      value: false
+    - value: false
   sticky:
-    -
-      value: false
+    - value: false
   moderation_state:
-    -
-      value: published
+    - value: published
   path:
-    -
-      alias: /blocks-complete
+    - alias: /blocks-complete
       langcode: en
       pathauto: 0
   content_translation_source:
-    -
-      value: und
+    - value: und
   content_translation_outdated:
-    -
-      value: false
+    - value: false
   body:
-    -
-      value: |-
+    - value: |-
         <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data","lead":"Lead text","ctaUrl":"https://example.com","ctaText":"CTA text","formId":"contact"} /-->
 
         <!-- wp:custom/content -->
@@ -86,6 +74,9 @@ default:
         <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
         <!-- /wp:custom/image-teasers -->
 
+        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+
+        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","uuid":"https://www.google.com","openInNewTab":true} /-->
         <!-- wp:paragraph -->
         <p></p>
         <!-- /wp:paragraph -->
@@ -95,40 +86,29 @@ default:
 translations:
   de:
     status:
-      -
-        value: true
+      - value: true
     uid:
-      -
-        target_id: 1
+      - target_id: 1
     title:
-      -
-        value: 'Blocks: complete DE'
+      - value: 'Blocks: complete DE'
     created:
-      -
-        value: 1687338353
+      - value: 1687338353
     promote:
-      -
-        value: false
+      - value: false
     sticky:
-      -
-        value: false
+      - value: false
     moderation_state:
-      -
-        value: published
+      - value: published
     path:
-      -
-        alias: /blocks-complete
+      - alias: /blocks-complete
         langcode: de
         pathauto: 0
     content_translation_source:
-      -
-        value: en
+      - value: en
     content_translation_outdated:
-      -
-        value: false
+      - value: false
     body:
-      -
-        value: |-
+      - value: |-
           <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data DE","lead":"Lead text DE"} /-->
 
           <!-- wp:custom/content -->
@@ -162,9 +142,9 @@ translations:
           <blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
           <!-- /wp:quote -->
 
-          <!-- wp:paragraph -->
-          <p></p>
-          <!-- /wp:paragraph -->
+          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+
+          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","uuid":"https://www.example.com","openInNewTab":true} /-->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''
diff --git a/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml b/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml
index 6ed97ed67..6c19a491d 100644
--- a/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml
+++ b/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml
@@ -65,6 +65,8 @@ default:
         <!-- wp:custom/heading -->
         <h2 class="wp-block-custom-heading"></h2>
         <!-- /wp:custom/heading -->
+
+        <!-- wp:custom/cta /-->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
index 232210302..9300972cb 100644
--- a/packages/schema/src/schema.graphql
+++ b/packages/schema/src/schema.graphql
@@ -198,6 +198,7 @@ union PageContent @resolveEditorBlockType =
   | BlockMedia
   | BlockForm
   | BlockImageTeasers
+  | BlockCta
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -237,6 +238,12 @@ type BlockImageTeaser @default @value {
   ctaUrl: Url @resolveEditorBlockAttribute(key: "ctaUrl")
 }
 
+type BlockCta @type(id: "custom/cta") {
+  url: Url @resolveEditorBlockAttribute(key: "url")
+  text: String @resolveEditorBlockAttribute(key: "text")
+  openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!
diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
index 90360da34..c542e5649 100644
--- a/tests/schema/specs/blocks.spec.ts
+++ b/tests/schema/specs/blocks.spec.ts
@@ -48,6 +48,11 @@ test('Blocks', async () => {
             ctaUrl
           }
         }
+        ... on BlockCta {
+          url
+          text
+          openInNewTab
+        }
       }
     }
     {
@@ -132,6 +137,18 @@ test('Blocks', async () => {
                 },
               ],
             },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": "Internal CTA",
+              "url": "/en/drupal",
+            },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": true,
+              "text": "External CTA",
+              "url": "https://www.google.com",
+            },
             {
               "__typename": "BlockMarkup",
               "markup": "
@@ -174,6 +191,12 @@ test('Blocks', async () => {
     <h2 class="wp-block-custom-heading"></h2>
     ",
             },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": null,
+              "url": null,
+            },
           ],
           "hero": {
             "__typename": "Hero",

From e925360f69ced9aa787d5562b8538d2ee061a409 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Mon, 15 Apr 2024 10:33:44 +0300
Subject: [PATCH 09/17] feat(SLB-313 SLB-308): store uuid and entity type on
 cta elements

---
 .../gutenberg_blocks/src/blocks/cta.tsx       | 35 +++++++++++++++++--
 .../a397ca48-8fad-411e-8901-0eba2feb989c.yml  | 12 ++++---
 packages/schema/src/fragments/Page.gql        |  1 +
 .../src/fragments/PageContent/BlockCta.gql    |  5 +++
 .../Organisms/PageContent/BlockCta.tsx        |  7 ++++
 .../src/components/Organisms/PageDisplay.tsx  |  3 ++
 tests/schema/specs/blocks.spec.ts             | 12 +++++++
 7 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 packages/schema/src/fragments/PageContent/BlockCta.gql
 create mode 100644 packages/ui/src/components/Organisms/PageContent/BlockCta.tsx

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
index ec6d9f7b4..ed98d4d0c 100644
--- a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
+++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -26,8 +26,11 @@ registerBlockType('custom/cta', {
       type: 'string',
     },
     // To have an easier integration with entity usage, we also retrieve and
-    // store the uuid of internal links.
-    uuid: {
+    // store the uuid (data-id) and the entity type of internal links.
+    'data-id': {
+      type: 'string',
+    },
+    'data-entity-type': {
       type: 'string',
     },
     openInNewTab: {
@@ -61,11 +64,37 @@ registerBlockType('custom/cta', {
             openInNewTab: props.attributes.openInNewTab,
           }}
           settings={{}}
+          // If you want to use a specific linkit profile for the suggestions,
+          // then you can do that by using the 'suggestionsQuery' property, like
+          // the one bellow, and change the 'subtype' property to the machine
+          // name of the linkit profile. By default, the 'gutenberg' profile
+          // is used. Of course, in this case, if the linkit profile can search
+          // through multiple entity types, then you'll have to set the value
+          // for 'data-entity-type' in the onChange() handler by yourself.
+
+          //suggestionsQuery={{
+          //  type: 'post',
+          //  subtype: 'gutenberg',
+          //}}
           // @ts-ignore
           onChange={(link) => {
             props.setAttributes({
               url: link.url,
-              uuid: link.id,
+              'data-id': link.id,
+              'data-entity-type':
+                // At the moment, the silverback_gutenberg link autocomplete
+                // controller does not return the machine name of the entity
+                // type. Instead, it returns the human readable, translated,
+                // entity type label. We should refactor the LinkAutocomplete
+                // controller to return the machine name of the entity type, and
+                // then we can set the data-entity-type value more accurate.
+                // Right now, we just make a "guess" based on the the human
+                // readable label for English and German.
+                link.type.startsWith('Media') || link.type.startsWith('Medien')
+                  ? 'media'
+                  : link.type !== 'URL'
+                    ? 'node'
+                    : '',
             });
           }}
         />
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
index 116627ac3..2a18b3664 100644
--- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
+++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -74,9 +74,11 @@ default:
         <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
         <!-- /wp:custom/image-teasers -->
 
-        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
 
-        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","uuid":"https://www.google.com","openInNewTab":true} /-->
+        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true} /-->
+
+        <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
         <!-- wp:paragraph -->
         <p></p>
         <!-- /wp:paragraph -->
@@ -142,9 +144,11 @@ translations:
           <blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
           <!-- /wp:quote -->
 
-          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
+
+          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","data-id":"https://www.example.com","data-entity-type":"","openInNewTab":true} /-->
 
-          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","uuid":"https://www.example.com","openInNewTab":true} /-->
+          <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media DE","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''
diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
index 36139a644..38c057340 100644
--- a/packages/schema/src/fragments/Page.gql
+++ b/packages/schema/src/fragments/Page.gql
@@ -32,6 +32,7 @@ fragment Page on Page {
     ...BlockMedia
     ...BlockForm
     ...BlockImageTeasers
+    ...BlockCta
   }
   metaTags {
     tag
diff --git a/packages/schema/src/fragments/PageContent/BlockCta.gql b/packages/schema/src/fragments/PageContent/BlockCta.gql
new file mode 100644
index 000000000..2dae0fda2
--- /dev/null
+++ b/packages/schema/src/fragments/PageContent/BlockCta.gql
@@ -0,0 +1,5 @@
+fragment BlockCta on BlockCta {
+  url
+  text
+  openInNewTab
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
new file mode 100644
index 000000000..a652f30b5
--- /dev/null
+++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -0,0 +1,7 @@
+import { BlockCtaFragment } from '@custom/schema';
+import React from 'react';
+
+export function BlockCta(props: BlockCtaFragment) {
+  console.log(props);
+  return <div />;
+}
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
index 46f9627d0..bcefcb2ec 100644
--- a/packages/ui/src/components/Organisms/PageDisplay.tsx
+++ b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { isTruthy } from '../../utils/isTruthy';
 import { UnreachableCaseError } from '../../utils/unreachable-case-error';
 import { PageTransition } from '../Molecules/PageTransition';
+import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
@@ -40,6 +41,8 @@ export function PageDisplay(page: PageFragment) {
                         BlockImageTeasers goes here
                       </div>
                     );
+                  case 'BlockCta':
+                    return <BlockCta key={index} {...block} />;
                   default:
                     throw new UnreachableCaseError(block);
                 }
diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
index c542e5649..5a9c453af 100644
--- a/tests/schema/specs/blocks.spec.ts
+++ b/tests/schema/specs/blocks.spec.ts
@@ -71,6 +71,12 @@ test('Blocks', async () => {
     'data-id="[numeric]"',
   );
 
+  const ctaToMediaBlock = result.data.complete.content[8];
+  ctaToMediaBlock.url = ctaToMediaBlock.url.replace(
+    /media\/\d+/,
+    'media/[numeric]',
+  );
+
   expect(result).toMatchInlineSnapshot(`
     {
       "data": {
@@ -149,6 +155,12 @@ test('Blocks', async () => {
               "text": "External CTA",
               "url": "https://www.google.com",
             },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": "CTA with link to media",
+              "url": "/media/[numeric]",
+            },
             {
               "__typename": "BlockMarkup",
               "markup": "

From d402145d1f25ac366658151d28a4bc8ae72fecd2 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Tue, 16 Apr 2024 08:57:08 +0300
Subject: [PATCH 10/17] feat(SLB-308 SLB-313): move the url field in the
 sidebar

---
 .../gutenberg_blocks/src/blocks/cta.tsx       | 114 +++++++++---------
 1 file changed, 60 insertions(+), 54 deletions(-)

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
index ed98d4d0c..c0bbaacdc 100644
--- a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
+++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -1,10 +1,11 @@
 import {
   // @ts-ignore
   __experimentalLinkControl as LinkControl,
+  InspectorControls,
   RichText,
 } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
-import { ToggleControl } from 'wordpress__components';
+import { PanelBody, ToggleControl } from 'wordpress__components';
 import { compose, withState } from 'wordpress__compose';
 
 // @ts-ignore
@@ -58,60 +59,65 @@ registerBlockType('custom/cta', {
             setPlainTextAttribute(props, 'text', text);
           }}
         />
-        <LinkControl
-          value={{
-            url: props.attributes.url,
-            openInNewTab: props.attributes.openInNewTab,
-          }}
-          settings={{}}
-          // If you want to use a specific linkit profile for the suggestions,
-          // then you can do that by using the 'suggestionsQuery' property, like
-          // the one bellow, and change the 'subtype' property to the machine
-          // name of the linkit profile. By default, the 'gutenberg' profile
-          // is used. Of course, in this case, if the linkit profile can search
-          // through multiple entity types, then you'll have to set the value
-          // for 'data-entity-type' in the onChange() handler by yourself.
+        <InspectorControls>
+          <PanelBody title={__('CTA Link')}>
+            <LinkControl
+              value={{
+                url: props.attributes.url,
+                openInNewTab: props.attributes.openInNewTab,
+              }}
+              settings={{}}
+              // If you want to use a specific linkit profile for the suggestions,
+              // then you can do that by using the 'suggestionsQuery' property, like
+              // the one bellow, and change the 'subtype' property to the machine
+              // name of the linkit profile. By default, the 'gutenberg' profile
+              // is used. Of course, in this case, if the linkit profile can search
+              // through multiple entity types, then you'll have to set the value
+              // for 'data-entity-type' in the onChange() handler by yourself.
 
-          //suggestionsQuery={{
-          //  type: 'post',
-          //  subtype: 'gutenberg',
-          //}}
-          // @ts-ignore
-          onChange={(link) => {
-            props.setAttributes({
-              url: link.url,
-              'data-id': link.id,
-              'data-entity-type':
-                // At the moment, the silverback_gutenberg link autocomplete
-                // controller does not return the machine name of the entity
-                // type. Instead, it returns the human readable, translated,
-                // entity type label. We should refactor the LinkAutocomplete
-                // controller to return the machine name of the entity type, and
-                // then we can set the data-entity-type value more accurate.
-                // Right now, we just make a "guess" based on the the human
-                // readable label for English and German.
-                link.type.startsWith('Media') || link.type.startsWith('Medien')
-                  ? 'media'
-                  : link.type !== 'URL'
-                    ? 'node'
-                    : '',
-            });
-          }}
-        />
-        <ToggleControl
-          label={__('Open in new tab')}
-          help={
-            props.attributes.openInNewTab
-              ? __('Opens in a new tab.')
-              : __('Opens in the same tab.')
-          }
-          checked={props.attributes.openInNewTab}
-          onChange={(openInNewTab) => {
-            props.setAttributes({
-              openInNewTab,
-            });
-          }}
-        />
+              //suggestionsQuery={{
+              //  type: 'post',
+              //  subtype: 'gutenberg',
+              //}}
+              // @ts-ignore
+              onChange={(link) => {
+                props.setAttributes({
+                  url: link.url,
+                  'data-id': link.id,
+                  'data-entity-type':
+                    // At the moment, the silverback_gutenberg link autocomplete
+                    // controller does not return the machine name of the entity
+                    // type. Instead, it returns the human readable, translated,
+                    // entity type label. We should refactor the LinkAutocomplete
+                    // controller to return the machine name of the entity type, and
+                    // then we can set the data-entity-type value more accurate.
+                    // Right now, we just make a "guess" based on the the human
+                    // readable label for English and German.
+                    link.type.startsWith('Media') ||
+                    link.type.startsWith('Medien')
+                      ? 'media'
+                      : link.type !== 'URL'
+                        ? 'node'
+                        : '',
+                });
+              }}
+            />
+            <ToggleControl
+              label={__('Open in new tab')}
+              help={
+                props.attributes.openInNewTab
+                  ? __('Opens in a new tab.')
+                  : __('Opens in the same tab.')
+              }
+              checked={props.attributes.openInNewTab}
+              onChange={(openInNewTab) => {
+                props.setAttributes({
+                  openInNewTab,
+                });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
       </div>
     );
   }),

From 6290f1507f4d8d5fb63810b9edb1abdd20de98a1 Mon Sep 17 00:00:00 2001
From: Alex Tkachev <alex.leksat@gmail.com>
Date: Wed, 17 Apr 2024 16:14:58 +0400
Subject: [PATCH 11/17] chore: re-export content

---
 .../a397ca48-8fad-411e-8901-0eba2feb989c.yml  | 69 ++++++++++++-------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
index 2a18b3664..de316ba27 100644
--- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
+++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -10,31 +10,43 @@ _meta:
     72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
-    - target_id: 1
+    -
+      target_id: 1
   status:
-    - value: true
+    -
+      value: true
   uid:
-    - target_id: 1
+    -
+      target_id: 1
   title:
-    - value: 'Blocks: complete'
+    -
+      value: 'Blocks: complete'
   created:
-    - value: 1686759493
+    -
+      value: 1686759493
   promote:
-    - value: false
+    -
+      value: false
   sticky:
-    - value: false
+    -
+      value: false
   moderation_state:
-    - value: published
+    -
+      value: published
   path:
-    - alias: /blocks-complete
+    -
+      alias: /blocks-complete
       langcode: en
       pathauto: 0
   content_translation_source:
-    - value: und
+    -
+      value: und
   content_translation_outdated:
-    - value: false
+    -
+      value: false
   body:
-    - value: |-
+    -
+      value: |-
         <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data","lead":"Lead text","ctaUrl":"https://example.com","ctaText":"CTA text","formId":"contact"} /-->
 
         <!-- wp:custom/content -->
@@ -88,29 +100,40 @@ default:
 translations:
   de:
     status:
-      - value: true
+      -
+        value: true
     uid:
-      - target_id: 1
+      -
+        target_id: 1
     title:
-      - value: 'Blocks: complete DE'
+      -
+        value: 'Blocks: complete DE'
     created:
-      - value: 1687338353
+      -
+        value: 1687338353
     promote:
-      - value: false
+      -
+        value: false
     sticky:
-      - value: false
+      -
+        value: false
     moderation_state:
-      - value: published
+      -
+        value: published
     path:
-      - alias: /blocks-complete
+      -
+        alias: /blocks-complete
         langcode: de
         pathauto: 0
     content_translation_source:
-      - value: en
+      -
+        value: en
     content_translation_outdated:
-      - value: false
+      -
+        value: false
     body:
-      - value: |-
+      -
+        value: |-
           <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data DE","lead":"Lead text DE"} /-->
 
           <!-- wp:custom/content -->

From b0c0b3e4365a6f795324efd969003afe3f313a9f Mon Sep 17 00:00:00 2001
From: Alex Tkachev <alex.leksat@gmail.com>
Date: Wed, 17 Apr 2024 16:15:48 +0400
Subject: [PATCH 12/17] chore: move the inquiry form to the default content

---
 apps/cms/config/sync/config_ignore.settings.yml                 | 1 -
 .../drupal/test_content/webforms/inquiry.yml                    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)
 rename apps/cms/config/sync/webform.webform.inquiry.yml => packages/drupal/test_content/webforms/inquiry.yml (99%)

diff --git a/apps/cms/config/sync/config_ignore.settings.yml b/apps/cms/config/sync/config_ignore.settings.yml
index 3e06627a5..22621eec1 100644
--- a/apps/cms/config/sync/config_ignore.settings.yml
+++ b/apps/cms/config/sync/config_ignore.settings.yml
@@ -3,5 +3,4 @@ _core:
 mode: simple
 ignored_config_entities:
   - 'webform.webform*'
-  - ~webform.webform.inquiry
 enable_export_filtering: true
diff --git a/apps/cms/config/sync/webform.webform.inquiry.yml b/packages/drupal/test_content/webforms/inquiry.yml
similarity index 99%
rename from apps/cms/config/sync/webform.webform.inquiry.yml
rename to packages/drupal/test_content/webforms/inquiry.yml
index b81b4b274..0dfaabc49 100644
--- a/apps/cms/config/sync/webform.webform.inquiry.yml
+++ b/packages/drupal/test_content/webforms/inquiry.yml
@@ -219,4 +219,4 @@ access:
     users: {  }
     permissions: {  }
 handlers: {  }
-variants: {  }
+variants: {  }
\ No newline at end of file

From 50255e7a2e219814a8e1c93efab96134b0b465bd Mon Sep 17 00:00:00 2001
From: Alex Tkachev <alex.leksat@gmail.com>
Date: Wed, 17 Apr 2024 16:52:28 +0400
Subject: [PATCH 13/17] chore: fix a test

---
 tests/schema/specs/blocks.spec.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
index 5a9c453af..9a246e3f6 100644
--- a/tests/schema/specs/blocks.spec.ts
+++ b/tests/schema/specs/blocks.spec.ts
@@ -71,11 +71,11 @@ test('Blocks', async () => {
     'data-id="[numeric]"',
   );
 
-  const ctaToMediaBlock = result.data.complete.content[8];
-  ctaToMediaBlock.url = ctaToMediaBlock.url.replace(
-    /media\/\d+/,
-    'media/[numeric]',
-  );
+  for (const block of result.data.complete.content) {
+    if (block.__typename === 'BlockCta') {
+      block.url = block.url.replace(/media\/\d+/, 'media/[numeric]');
+    }
+  }
 
   expect(result).toMatchInlineSnapshot(`
     {

From 76d6a6b6324537b72326387ab47334a306046525 Mon Sep 17 00:00:00 2001
From: Alex Tkachev <alex.leksat@gmail.com>
Date: Wed, 17 Apr 2024 17:35:27 +0400
Subject: [PATCH 14/17] chore: fix the Deploy workflow

The Build step started to fail with the following error for unknown reason:

Run pnpm run --filter @custom/website build

> @custom/website@ build /home/runner/work/silverback-template/deploy
> if node has-drupal.mjs; then pnpm build:drupal; else pnpm build:gatsby; fi
> @custom/website@ build:drupal /home/runner/work/silverback-template/deploy
> CLOUDINARY_CLOUDNAME=test start-test start:drupal 8888 build:gatsby
sh: 1: start-test: not found
---
 apps/website/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/package.json b/apps/website/package.json
index 2024acb54..2954fe07e 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -46,7 +46,7 @@
     "test:static": "tsc --noEmit && eslint '**/*.{ts,tsx,js,jsx}' --ignore-path='./.gitignore'",
     "full-rebuild": "pnpm clean && pnpm build:gatsby",
     "start:drupal": "pnpm run --filter @custom/cms start",
-    "build:drupal": "CLOUDINARY_CLOUDNAME=test start-test start:drupal 8888 build:gatsby",
+    "build:drupal": "CLOUDINARY_CLOUDNAME=test pnpm start-test start:drupal 8888 build:gatsby",
     "build:gatsby": "gatsby build",
     "build": "if node has-drupal.mjs; then pnpm build:drupal; else pnpm build:gatsby; fi",
     "start": "publisher",

From b0009a1c546b11611ba1a47b72a4bf125236fa8b Mon Sep 17 00:00:00 2001
From: Alex Tkachev <alex.leksat@gmail.com>
Date: Wed, 17 Apr 2024 17:59:21 +0400
Subject: [PATCH 15/17] fix(dx): avoid issues with browser caches for JS files

The change record: https://www.drupal.org/node/3301716 (Drupal 10.1.0)
> Aggregate filenames are now based on the library definition instead of the contents of the file.
  However if a library does not have a version, the contents of the file will be additionally used
  to make up part of the hash.
---
 packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml b/packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml
index 884f338e8..89370de15 100644
--- a/packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml
+++ b/packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml
@@ -1,5 +1,4 @@
 edit:
-  version: VERSION
   js:
     js/gutenberg_blocks.umd.js: {}
   css:

From 5aeef79ced1a1d3342c426e336ec9bea7d098ea3 Mon Sep 17 00:00:00 2001
From: Mattia Simonato <mattiasimonato.w@gmail.com>
Date: Thu, 18 Apr 2024 15:14:54 +0200
Subject: [PATCH 16/17] fix(SLB-325): set a min-height on default hero section

---
 packages/ui/src/components/Organisms/PageHero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index c043a10c0..2bc4b476a 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -15,7 +15,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
 
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
-    <section className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
+    <section className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 min-h-[19rem] lg:min-h-[25rem]">
       {props.image ? (
         <Image
           alt={props.image.alt}

From 3414576a6e0ec0651fa1bb98c0cc1461699da12c Mon Sep 17 00:00:00 2001
From: Mattia Simonato <mattiasimonato.w@gmail.com>
Date: Thu, 18 Apr 2024 15:46:53 +0200
Subject: [PATCH 17/17] fix(SLB-323): adapt vertical spacing and font
 appearance

---
 packages/ui/src/components/Organisms/PageHero.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index 2bc4b476a..7eea65402 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -15,7 +15,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
 
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
-    <section className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 min-h-[19rem] lg:min-h-[25rem]">
+    <section className="relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[19rem] lg:min-h-[25rem]">
       {props.image ? (
         <Image
           alt={props.image.alt}
@@ -27,7 +27,7 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
       ) : null}
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h1 className="max-w-xl text-5xl font-extrabold tracking-tight leading-tight text-white">
+          <h1 className="text-5xl font-extrabold tracking-tight leading-tight text-white drop-shadow-md">
             {props.headline}
           </h1>
           {props.lead ? (
@@ -74,7 +74,7 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
         ) : null}
 
         <div className="px-4 lg:pt-24 pt-8 pb-72 lg:pb-80 mx-auto max-w-screen-sm text-center lg:px-6 ">
-          <h1 className="text-4xl tracking-tight font-extrabold text-white">
+          <h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
             {props.headline}
           </h1>
           {props.lead ? (