From eea7907777507bb67a7fa37d3396aae158fd72ad Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 14 Sep 2023 17:05:12 +0800
Subject: [PATCH 1/2] feat(floating): add floating variant

---
 src/constants/homepage.ts                          |  4 ++++
 src/layouts/components/Homepage/HeroBody.tsx       |  4 ++++
 src/styles/templates/components/hero.scss          |  6 ++++++
 src/templates/homepage/HeroSection/HeroSection.tsx | 10 ++++++++++
 4 files changed, 24 insertions(+)

diff --git a/src/constants/homepage.ts b/src/constants/homepage.ts
index 4147fadc2..fb64b138d 100644
--- a/src/constants/homepage.ts
+++ b/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
diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
index 637e00833..fc5d0a5b1 100644
--- a/src/layouts/components/Homepage/HeroBody.tsx
+++ b/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}`)
           }}
diff --git a/src/styles/templates/components/hero.scss b/src/styles/templates/components/hero.scss
index 6def46fbd..63de907cd 100644
--- a/src/styles/templates/components/hero.scss
+++ b/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;
+  }
+}
diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx
index 831813d24..bd6cc1b6b 100644
--- a/src/templates/homepage/HeroSection/HeroSection.tsx
+++ b/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 ? (

From 93a2dccb30b7fd22d1eec88b507415addb34fce4 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 14 Sep 2023 17:21:49 +0800
Subject: [PATCH 2/2] refactor(herobutotn): shift out

---
 .../homepage/HeroSection/HeroButton.tsx       | 23 ++++++++
 .../HeroSection/HeroCenteredLayout.tsx        | 22 +-------
 .../homepage/HeroSection/HeroSideLayout.tsx   | 56 ++++++++-----------
 3 files changed, 46 insertions(+), 55 deletions(-)
 create mode 100644 src/templates/homepage/HeroSection/HeroButton.tsx

diff --git a/src/templates/homepage/HeroSection/HeroButton.tsx b/src/templates/homepage/HeroSection/HeroButton.tsx
new file mode 100644
index 000000000..88333afa7
--- /dev/null
+++ b/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}
+  </>
+)
diff --git a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
index 2d16c3259..8bd946482 100644
--- a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx
+++ b/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
diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
index 625d2d94e..a493f6973 100644
--- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx
+++ b/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>
   )