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 React from 'react'
import Image from 'next/image' import Image from 'next/image'
import Link from 'next/link'
import { Container } from '@/components/ui/Container' import { Container } from '@/components/ui/Container'
import type { Page } from '@/payload-types' import type { Page } from '@/payload-types'
import type { Media as MediaType } 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 const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
return ( return (
<div className="border-b border-foreground/8"> // Removed border-b here to eliminate the line
<div className="w-full">
<Container className="px-0"> <Container className="px-0">
<div className="grid grid-cols-1 md:grid-cols-2"> <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"> {/* Text Content Column */}
<div> <div className="flex flex-col justify-center px-8 py-16 md:py-24">
<div className="flex items-center gap-2 mb-5"> <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="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> </div>
{eyebrow && ( {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} {eyebrow}
</p> </p>
)} )}
{heading && ( {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} {heading}
</h1> </h1>
)} )}
...rest stays the same{' '}
{subtext && ( {subtext && (
<p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6"> <p className="text-base text-foreground/60 leading-relaxed mb-8">{subtext}</p>
{subtext}
</p>
)} )}
{Array.isArray(tags) && tags.length > 0 && ( {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) { {tags.map(function ({ tag }, i) {
return ( return (
<span <span
key={i} 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} {tag}
</span> </span>
@ -58,39 +64,43 @@ export const SplitHero: React.FC<SplitHeroProps> = function (props) {
})} })}
</div> </div>
)} )}
</div>
<div className="flex gap-3"> <div className="flex flex-wrap gap-4">
{primaryCta && primaryCta.label && primaryCta.url && ( {primaryCta?.url && (
<a <Link
href={primaryCta.url} 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" 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" style={{ fontSize: 14 }} aria-hidden="true" /> <i className="ti ti-briefcase" aria-hidden="true" />
{primaryCta.label} {primaryCta.label || 'View my work'}
</a> </Link>
)} )}
{secondaryCta && secondaryCta.label && secondaryCta.url && ( {secondaryCta?.url && (
<a <Link
href={secondaryCta.url} 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" 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" style={{ fontSize: 14 }} aria-hidden="true" /> <i className="ti ti-mail" aria-hidden="true" />
{secondaryCta.label} {secondaryCta.label || 'Get in touch'}
</a> </Link>
)} )}
</div>
</div> </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 ? ( {hasImage ? (
<Image <Image
src={splitImage.url!} src={splitImage.url!}
alt={splitImage.alt ?? ''} alt={splitImage.alt ?? 'Hero image'}
fill 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"> <div className="absolute inset-0 flex items-center justify-center bg-foreground/5">
<i className="ti ti-user" style={{ fontSize: 48 }} aria-hidden="true" /> <i className="ti ti-user text-6xl opacity-20" aria-hidden="true" />
</div> </div>
)} )}
</div> </div>