From d692200d4f5dbe47651a424ff887fd6efe6b6c60 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Wed, 3 Jun 2026 22:40:49 +0800
Subject: [PATCH] wrapper

---
 src/blocks/RenderBlocks.tsx     |   3 +-
 src/components/ui/Container.tsx |   9 +++
 src/heros/SplitHero/index.tsx   | 128 +++++++++++++++++---------------
 3 files changed, 80 insertions(+), 60 deletions(-)
 create mode 100644 src/components/ui/Container.tsx

diff --git a/src/blocks/RenderBlocks.tsx b/src/blocks/RenderBlocks.tsx
index a872772..bddd5f8 100644
--- a/src/blocks/RenderBlocks.tsx
+++ b/src/blocks/RenderBlocks.tsx
@@ -54,8 +54,7 @@ export const RenderBlocks: React.FC<{
 
             if (Block) {
               return (
-                <div className="my-16" key={index}>
-                  {/* @ts-expect-error there may be some mismatch between the expected types here */}
+                <div key={index}>
                   <Block {...block} disableInnerContainer />
                 </div>
               )
diff --git a/src/components/ui/Container.tsx b/src/components/ui/Container.tsx
new file mode 100644
index 0000000..5a1a628
--- /dev/null
+++ b/src/components/ui/Container.tsx
@@ -0,0 +1,9 @@
+// components/ui/Container.tsx
+import React from 'react'
+
+export const Container: React.FC<{ children: React.ReactNode; className?: string }> = ({
+  children,
+  className = '',
+}) => {
+  return <div className={`mx-auto w-full max-w-[1200px] px-8 ${className}`}>{children}</div>
+}
diff --git a/src/heros/SplitHero/index.tsx b/src/heros/SplitHero/index.tsx
index 3ffcbb9..14b6271 100644
--- a/src/heros/SplitHero/index.tsx
+++ b/src/heros/SplitHero/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
+import { Container } from '@/components/ui/Container'
 import type { Page } from '@/payload-types'
 import type { Media as MediaType } from '@/payload-types'
 
@@ -18,67 +19,78 @@ export const SplitHero: React.FC<SplitHeroProps> = function (props) {
   const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 border-b border-foreground/8">
-      <div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
-        <div>
-          {eyebrow && (
-            <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">{eyebrow}</p>
-          )}
-          {heading && (
-            <h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
-              {heading}
-            </h1>
-          )}
-          {subtext && (
-            <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">{subtext}</p>
-          )}
-          {Array.isArray(tags) && tags.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {tags.map(function ({ tag }, i) {
-                return (
-                  <span
-                    key={i}
-                    className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
-                  >
-                    {tag}
-                  </span>
-                )
-              })}
+    <div className="border-b border-foreground/8">
+      <Container className="px-0">
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          <div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
+            <div>
+              {eyebrow && (
+                <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">
+                  {eyebrow}
+                </p>
+              )}
+              {heading && (
+                <h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
+                  {heading}
+                </h1>
+              )}
+              {subtext && (
+                <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">
+                  {subtext}
+                </p>
+              )}
+              {Array.isArray(tags) && tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {tags.map(function ({ tag }, i) {
+                    return (
+                      <span
+                        key={i}
+                        className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
+                      >
+                        {tag}
+                      </span>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+            <div className="flex gap-3">
+              {primaryCta && primaryCta.label && primaryCta.url && (
+                <a
+                  href={primaryCta.url}
+                  className="flex items-center gap-2 text-sm font-medium text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
+                >
+                  <i className="ti ti-briefcase" style={{ fontSize: 14 }} aria-hidden="true" />
+                  {primaryCta.label}
+                </a>
+              )}
+              {secondaryCta && secondaryCta.label && secondaryCta.url && (
+                <a
+                  href={secondaryCta.url}
+                  className="flex items-center gap-2 text-sm text-foreground/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
+                >
+                  <i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
+                  {secondaryCta.label}
+                </a>
+              )}
             </div>
-          )}
-        </div>
-        <div className="flex gap-3">
-          {primaryCta && primaryCta.label && primaryCta.url && (
-            <a
-              href={primaryCta.url}
-              className="flex items-center gap-2 text-sm font-medium text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
-            >
-              <i className="ti ti-briefcase" style={{ fontSize: 14 }} aria-hidden="true" />
-              {primaryCta.label}
-            </a>
-          )}
-          {secondaryCta && secondaryCta.label && secondaryCta.url && (
-            <a
-              href={secondaryCta.url}
-              className="flex items-center gap-2 text-sm text-foreground/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
-            >
-              <i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
-              {secondaryCta.label}
-            </a>
-          )}
-        </div>
-      </div>
-      <div className="bg-muted/30 flex items-center justify-center min-h-[260px]">
-        {hasImage ? (
-          <div className="relative w-full h-full min-h-[260px]">
-            <Image src={splitImage.url!} alt={splitImage.alt ?? ''} fill className="object-cover" />
           </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center gap-2 opacity-20">
-            <i className="ti ti-user" style={{ fontSize: 48 }} aria-hidden="true" />
+          <div className="bg-muted/30 flex items-center justify-center min-h-[320px] relative overflow-hidden">
+            {hasImage ? (
+              <Image
+                src={splitImage.url!}
+                alt={splitImage.alt ?? ''}
+                fill
+                className="object-cover object-top"
+              />
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-2 opacity-20">
+                <i className="ti ti-user" style={{ fontSize: 48 }} aria-hidden="true" />
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        </div>
+      </Container>
     </div>
   )
 }