feat(homepage): add floating variant

src/constants/homepage.ts

@@ -11,4 +11,8 @@ export const HERO_LAYOUTS = {
     value: "side",
     label: "Side section",
   },
+  FLOATING_SECTION: {
+    value: "floating",
+    label: "Floating section",
+  },
 } as const

src/layouts/components/Homepage/HeroBody.tsx

@@ -393,6 +393,10 @@ export const HeroBody = ({
               return <HeroSideSectionLayout {...rest} />
             }
 
+            if (currentSelectedOption === HERO_LAYOUTS.FLOATING_SECTION.value) {
+              return <HeroSideSectionLayout {...rest} />
+            }
+
             const unmatchedOption: never = currentSelectedOption
             throw new Error(`Unmatched option for layout: ${unmatchedOption}`)
           }}

src/styles/templates/components/hero.scss

@@ -9,3 +9,9 @@
 .with-padding {
   padding: 3rem 1.5rem;
 }
+
+@media screen and (min-width: 1024px) {
+  .hero-floating {
+    padding: 3rem;
+  }
+}

src/templates/homepage/HeroSection/HeroButton.tsx

@@ -0,0 +1,23 @@
+import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
+
+import { getClassNames } from "templates/utils/stylingUtils"
+
+interface HeroButtonProps {
+  button?: string
+}
+export const HeroButton = ({ button }: HeroButtonProps) => (
+  <>
+    {button ? (
+      <div
+        className={getClassNames(editorStyles, [
+          "bp-button",
+          "is-uppercase",
+          "search-button",
+          "is-secondary",
+        ])}
+      >
+        {button}
+      </div>
+    ) : null}
+  </>
+)

src/templates/homepage/HeroSection/HeroCenteredLayout.tsx

@@ -4,29 +4,9 @@ import { getClassNames } from "templates/utils/stylingUtils"
 
 import { EditorHeroDropdownSection } from "types/homepage"
 
+import { HeroButton } from "./HeroButton"
 import { HeroDropdown } from "./HeroDropdown"
 
-interface HeroButtonProps {
-  button?: string
-}
-const HeroButton = ({ button }: HeroButtonProps) => (
-  <>
-    {button ? (
-      <div
-        className={getClassNames(editorStyles, [
-          "bp-button",
-          "is-uppercase",
-          "search-button",
-          "default",
-          "is-secondary",
-        ])}
-      >
-        {button}
-      </div>
-    ) : null}
-  </>
-)
-
 interface HeroCenteredLayoutProps {
   hero: {
     background?: string

src/templates/homepage/HeroSection/HeroSection.tsx

@@ -166,6 +166,16 @@ export const TemplateHeroSection = forwardRef<
               toggleDropdown={toggleDropdown}
             />
           )}
+          {variant === "floating" && (
+            <div className={getClassNames(editorStyles, ["hero-floating"])}>
+              <HeroSideLayout
+                {...hero}
+                title={hero.title || ""}
+                dropdownIsActive={dropdownIsActive}
+                toggleDropdown={toggleDropdown}
+              />
+            </div>
+          )}
         </section>
         {/* Key highlights */}
         {!hero.dropdown && hero.key_highlights ? (

src/templates/homepage/HeroSection/HeroSideLayout.tsx

@@ -10,6 +10,7 @@ import { getClassNames } from "templates/utils/stylingUtils"
 import { SectionBackgroundColor, SectionSize } from "types/hero"
 import { EditorHeroDropdownSection } from "types/homepage"
 
+import { HeroButton } from "./HeroButton"
 import { HeroDropdown } from "./HeroDropdown"
 
 const TRANSLUCENT_GRAY = "#00000080"
@@ -72,41 +73,28 @@ const HeroInfoboxDesktop = ({
               {subtitle}
             </p>
           )}
-
-          {dropdown ? (
-            <div
-              className={getClassNames(editorStyles, ["is-flex"])}
-              style={{
-                justifyContent: "center",
-                alignContent: "center",
-              }}
-            >
-              <HeroDropdown
-                title={dropdown.title}
-                options={dropdown.options}
-                isActive={dropdownIsActive}
-                toggleDropdown={toggleDropdown}
-              />
-            </div>
-          ) : (
-            // NOTE: This is to mirror the template structure
-            // as closely as possible.
-            url &&
-            button && (
-              <a
-                href="/"
-                className={getClassNames(editorStyles, [
-                  "bp-button",
-                  "is-secondary",
-                  "is-uppercase",
-                  "search-button",
-                ])}
-              >
-                {button}
-              </a>
-            )
-          )}
         </div>
+
+        {dropdown ? (
+          <div
+            className={getClassNames(editorStyles, ["is-flex"])}
+            style={{
+              justifyContent: "center",
+              alignContent: "center",
+            }}
+          >
+            <HeroDropdown
+              title={dropdown.title}
+              options={dropdown.options}
+              isActive={dropdownIsActive}
+              toggleDropdown={toggleDropdown}
+            />
+          </div>
+        ) : (
+          // NOTE: This is to mirror the template structure
+          // as closely as possible.
+          url && button && <HeroButton button={button} />
+        )}
       </div>
     </div>
   )