rootadmin/multisite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

border

Browse source
This commit is contained in:
Mackie 2026-06-04 17:27:39 +08:00
parent 1e388ff75b
commit c0b3dc68f7
1 changed files with 48 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/heros/SplitHero/index.tsx
View file

@ -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>