From c0b3dc68f7c1262f40f6ed7438e46e58f254cddc Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Thu, 4 Jun 2026 17:27:39 +0800
Subject: [PATCH] border

---
 src/heros/SplitHero/index.tsx | 86 +++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/heros/SplitHero/index.tsx b/src/heros/SplitHero/index.tsx
index e098789..e7f10fd 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 Link from 'next/link'
 import { Container } from '@/components/ui/Container'
 import type { Page } from '@/payload-types'
 import type { Media as MediaType } from '@/payload-types'
@@ -19,38 +20,43 @@ export const SplitHero: React.FC<SplitHeroProps> = function (props) {
   const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
 
   return (
-    <div className="border-b border-foreground/8">
+    // Removed border-b here to eliminate the line
+    <div className="w-full">
       <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 bg-background/40 backdrop-blur-sm">
-            <div>
-              <div className="flex items-center gap-2 mb-5">
+          {/* Text Content Column */}
+          <div className="flex flex-col justify-center px-8 py-16 md:py-24">
+            <div className="max-w-xl">
+              <div className="flex items-center gap-2 mb-6">
                 <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shrink-0" />
-                <span className="text-xs text-foreground/40">Available for hire</span>
+                <span className="text-xs tracking-wider uppercase text-foreground/60">
+                  Available for hire
+                </span>
               </div>
+
               {eyebrow && (
-                <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">
+                <p className="text-xs tracking-widest uppercase text-foreground/40 mb-4">
                   {eyebrow}
                 </p>
               )}
+
               {heading && (
-                <h1 className="text-5xl lg:text-6xl font-semibold text-foreground leading-[1.05] mb-4 whitespace-pre-line">
+                <h1 className="text-5xl md:text-6xl font-bold text-foreground leading-[1.1] mb-6 whitespace-pre-line">
                   {heading}
                 </h1>
               )}
-              ...rest stays the same{' '}
+
               {subtext && (
-                <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">
-                  {subtext}
-                </p>
+                <p className="text-base text-foreground/60 leading-relaxed mb-8">{subtext}</p>
               )}
+
               {Array.isArray(tags) && tags.length > 0 && (
-                <div className="flex flex-wrap gap-2">
+                <div className="flex flex-wrap gap-2 mb-10">
                   {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"
+                        className="text-xs text-foreground/60 border border-foreground/10 rounded-full px-4 py-1.5"
                       >
                         {tag}
                       </span>
@@ -58,39 +64,43 @@ export const SplitHero: React.FC<SplitHeroProps> = function (props) {
                   })}
                 </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 className="flex flex-wrap gap-4">
+                {primaryCta?.url && (
+                  <Link
+                    href={primaryCta.url}
+                    className="flex items-center gap-2 text-sm font-medium bg-foreground text-background rounded-lg px-6 py-3 hover:opacity-90 transition-opacity"
+                  >
+                    <i className="ti ti-briefcase" aria-hidden="true" />
+                    {primaryCta.label || 'View my work'}
+                  </Link>
+                )}
+                {secondaryCta?.url && (
+                  <Link
+                    href={secondaryCta.url}
+                    className="flex items-center gap-2 text-sm text-foreground border border-foreground/20 rounded-lg px-6 py-3 hover:bg-foreground/5 transition-colors"
+                  >
+                    <i className="ti ti-mail" aria-hidden="true" />
+                    {secondaryCta.label || 'Get in touch'}
+                  </Link>
+                )}
+              </div>
             </div>
           </div>
-          <div className="bg-muted/30 flex items-center justify-center min-h-[320px] relative overflow-hidden">
+
+          {/* Image Column */}
+          <div className="relative min-h-[400px] md:min-h-auto w-full">
             {hasImage ? (
               <Image
                 src={splitImage.url!}
-                alt={splitImage.alt ?? ''}
+                alt={splitImage.alt ?? 'Hero image'}
                 fill
-                className="object-cover object-top"
+                className="object-contain md:object-cover object-bottom"
+                priority
               />
             ) : (
-              <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="absolute inset-0 flex items-center justify-center bg-foreground/5">
+                <i className="ti ti-user text-6xl opacity-20" aria-hidden="true" />
               </div>
             )}
           </div>