edited
This commit is contained in:
parent
04c62332b1
commit
502acf04e5
4 changed files with 133 additions and 148 deletions
|
|
@ -14,17 +14,12 @@ type BentoRowBlockProps = {
|
||||||
skills?: Skill[]
|
skills?: Skill[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export function BentoRowBlock({
|
export function BentoRowBlock(props: BentoRowBlockProps) {
|
||||||
aboutHeading,
|
const { aboutHeading, aboutText, aboutCta, skillsHeading, skills } = props
|
||||||
aboutText,
|
|
||||||
aboutCta,
|
|
||||||
skillsHeading,
|
|
||||||
skills,
|
|
||||||
}: BentoRowBlockProps) {
|
|
||||||
return (
|
return (
|
||||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
|
||||||
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
||||||
<div>
|
<div>
|
||||||
{aboutHeading && (
|
{aboutHeading && (
|
||||||
|
|
@ -38,8 +33,8 @@ export function BentoRowBlock({
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{aboutCta?.label && aboutCta?.url && (
|
{aboutCta && aboutCta.label && aboutCta.url && (
|
||||||
|
<a
|
||||||
href={aboutCta.url}
|
href={aboutCta.url}
|
||||||
target={aboutCta.newTab ? '_blank' : '_self'}
|
target={aboutCta.newTab ? '_blank' : '_self'}
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
|
@ -59,9 +54,14 @@ export function BentoRowBlock({
|
||||||
)}
|
)}
|
||||||
{Array.isArray(skills) && skills.length > 0 && (
|
{Array.isArray(skills) && skills.length > 0 && (
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-2 gap-2">
|
||||||
{skills.map((skill, i) => {
|
{skills.map(function (skill, i) {
|
||||||
const tags = skill.tags
|
const tags = skill.tags
|
||||||
? skill.tags.split(',').map((t) => t.trim()).filter(Boolean)
|
? skill.tags
|
||||||
|
.split(',')
|
||||||
|
.map(function (t) {
|
||||||
|
return t.trim()
|
||||||
|
})
|
||||||
|
.filter(Boolean)
|
||||||
: []
|
: []
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -69,20 +69,22 @@ export function BentoRowBlock({
|
||||||
className="bg-background/50 border border-foreground/8 rounded-lg p-3 flex flex-col gap-2"
|
className="bg-background/50 border border-foreground/8 rounded-lg p-3 flex flex-col gap-2"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
className={`ti ${skill.icon} text-foreground/30`}
|
className={'ti ' + skill.icon + ' text-foreground/30'}
|
||||||
style={{ fontSize: 16 }}
|
style={{ fontSize: 16 }}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
<p className="text-xs font-medium text-foreground/70">{skill.title}</p>
|
<p className="text-xs font-medium text-foreground/70">{skill.title}</p>
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
{tags.map((tag, j) => (
|
{tags.map(function (tag, j) {
|
||||||
<span
|
return (
|
||||||
key={j}
|
<span
|
||||||
className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
|
key={j}
|
||||||
>
|
className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
|
||||||
{tag}
|
>
|
||||||
</span>
|
{tag}
|
||||||
))}
|
</span>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -90,7 +92,6 @@ export function BentoRowBlock({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -15,28 +15,20 @@ type ContactBlockProps = {
|
||||||
links?: ContactLink[]
|
links?: ContactLink[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ContactBlock({
|
export function ContactBlock(props: ContactBlockProps) {
|
||||||
heading,
|
const { heading, subtext, email, links } = props
|
||||||
subtext,
|
|
||||||
email,
|
|
||||||
links,
|
|
||||||
}: ContactBlockProps) {
|
|
||||||
return (
|
return (
|
||||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
|
||||||
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
||||||
<div>
|
<div>
|
||||||
{heading && (
|
{heading && <h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>}
|
||||||
<h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>
|
{subtext && <p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>}
|
||||||
)}
|
|
||||||
{subtext && (
|
|
||||||
<p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{email && (
|
{email && (
|
||||||
|
<a
|
||||||
href={`mailto:${email}`}
|
href={'mailto:' + email}
|
||||||
className="self-start flex items-center gap-2 text-sm font-medium text-foreground/70 bg-background/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground hover:bg-muted transition-colors"
|
className="self-start flex items-center gap-2 text-sm font-medium text-foreground/70 bg-background/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground hover:bg-muted transition-colors"
|
||||||
>
|
>
|
||||||
<i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
|
<i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
|
||||||
|
|
@ -46,38 +38,44 @@ export function ContactBlock({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
{Array.isArray(links) && links.map((link, i) => (
|
{Array.isArray(links) &&
|
||||||
|
links.map(function (link, i) {
|
||||||
key={i}
|
return (
|
||||||
href={link.url}
|
<a
|
||||||
target={link.newTab ? '_blank' : '_self'}
|
key={i}
|
||||||
rel="noopener noreferrer"
|
href={link.url}
|
||||||
className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
|
target={link.newTab ? '_blank' : '_self'}
|
||||||
>
|
rel="noopener noreferrer"
|
||||||
{link.icon && (
|
className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
|
||||||
<i
|
>
|
||||||
className={`ti ${link.icon} text-foreground/40 group-hover:text-foreground/60 transition-colors`}
|
{link.icon && (
|
||||||
style={{ fontSize: 18 }}
|
<i
|
||||||
aria-hidden="true"
|
className={
|
||||||
/>
|
'ti ' +
|
||||||
)}
|
link.icon +
|
||||||
<div className="flex flex-col">
|
' text-foreground/40 group-hover:text-foreground/60 transition-colors'
|
||||||
<span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
|
}
|
||||||
{link.label}
|
style={{ fontSize: 18 }}
|
||||||
</span>
|
aria-hidden="true"
|
||||||
{link.sublabel && (
|
/>
|
||||||
<span className="text-xs text-foreground/30">{link.sublabel}</span>
|
)}
|
||||||
)}
|
<div className="flex flex-col">
|
||||||
</div>
|
<span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
|
||||||
<i
|
{link.label}
|
||||||
className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
|
</span>
|
||||||
style={{ fontSize: 14 }}
|
{link.sublabel && (
|
||||||
aria-hidden="true"
|
<span className="text-xs text-foreground/30">{link.sublabel}</span>
|
||||||
/>
|
)}
|
||||||
</a>
|
</div>
|
||||||
))}
|
<i
|
||||||
|
className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
|
||||||
|
style={{ fontSize: 14 }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -21,36 +21,45 @@ function ShowcaseImage(props: { item: ShowcaseItem }): React.ReactElement {
|
||||||
const item = props.item
|
const item = props.item
|
||||||
const image = item.image
|
const image = item.image
|
||||||
const imageUrl = image != null && typeof image === 'object' && 'url' in image ? image.url : null
|
const imageUrl = image != null && typeof image === 'object' && 'url' in image ? image.url : null
|
||||||
const imageAlt = image != null && typeof image === 'object' && 'alt' in image ? image.alt : item.title
|
const imageAlt =
|
||||||
|
image != null && typeof image === 'object' && 'alt' in image ? image.alt : item.title
|
||||||
if (imageUrl != null && item.imageUrl != null) {
|
|
||||||
return (
|
|
||||||
|
|
||||||
href={item.imageUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block relative w-full aspect-video overflow-hidden group"
|
|
||||||
>
|
|
||||||
<Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
|
|
||||||
<div className="absolute inset-0 bg-background/0 group-hover:bg-background/20 transition-colors duration-200" />
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
||||||
<i className="ti ti-external-link text-foreground/80" style={{ fontSize: 20 }} aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (imageUrl != null) {
|
if (imageUrl != null) {
|
||||||
return (
|
const imgEl = (
|
||||||
<div className="relative w-full aspect-video overflow-hidden">
|
<div className="relative w-full aspect-video overflow-hidden">
|
||||||
<Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
|
<Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
|
||||||
|
{item.imageUrl && (
|
||||||
|
<div className="absolute inset-0 bg-background/0 group-hover:bg-background/20 transition-colors duration-200" />
|
||||||
|
)}
|
||||||
|
{item.imageUrl && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||||
|
<i
|
||||||
|
className="ti ti-external-link text-foreground/80"
|
||||||
|
style={{ fontSize: 20 }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if (item.imageUrl) {
|
||||||
|
return (
|
||||||
|
<a href={item.imageUrl} target="_blank" rel="noopener noreferrer" className="block group">
|
||||||
|
{imgEl}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return imgEl
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full aspect-video bg-muted/30 flex flex-col items-center justify-center gap-2 border-b border-foreground/8">
|
<div className="relative w-full aspect-video bg-muted/30 flex flex-col items-center justify-center gap-2 border-b border-foreground/8">
|
||||||
<i className="ti ti-photo-off text-foreground/15" style={{ fontSize: 28 }} aria-hidden="true" />
|
<i
|
||||||
|
className="ti ti-photo-off text-foreground/15"
|
||||||
|
style={{ fontSize: 28 }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
<span className="text-xs text-foreground/20">Coming soon</span>
|
<span className="text-xs text-foreground/20">Coming soon</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -65,38 +74,27 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
|
||||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||||
{(heading || subheading) && (
|
{(heading || subheading) && (
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
{heading && (
|
{heading && <h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>}
|
||||||
<h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>
|
{subheading && <p className="text-sm text-foreground/40">{subheading}</p>}
|
||||||
)}
|
|
||||||
{subheading && (
|
|
||||||
<p className="text-sm text-foreground/40">{subheading}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
{items.map(function (item, i) {
|
{items.map(function (item, i) {
|
||||||
const isFeatured = i === 0 && items.length > 1
|
const isFeatured = i === 0 && items.length > 1
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className={`bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden flex flex-col ${isFeatured ? 'sm:col-span-2 lg:col-span-2' : ''}`}
|
className={
|
||||||
|
'bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden flex flex-col' +
|
||||||
|
(isFeatured ? ' sm:col-span-2 lg:col-span-2' : '')
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<ShowcaseImage item={item} />
|
<ShowcaseImage item={item} />
|
||||||
|
|
||||||
<div className="p-4 flex flex-col gap-3 flex-1">
|
<div className="p-4 flex flex-col gap-3 flex-1">
|
||||||
{item.description && (
|
|
||||||
<span className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2.5 py-0.5 self-start">
|
|
||||||
{item.description.length > 40 ? item.description.slice(0, 40) + '...' : item.description}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
|
<h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
|
||||||
|
{item.description && (
|
||||||
{item.description && item.description.length > 40 && (
|
|
||||||
<p className="text-xs text-foreground/40 leading-relaxed">{item.description}</p>
|
<p className="text-xs text-foreground/40 leading-relaxed">{item.description}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{Array.isArray(item.tags) && item.tags.length > 0 && (
|
{Array.isArray(item.tags) && item.tags.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-1.5">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{item.tags.map(function (t, j) {
|
{item.tags.map(function (t, j) {
|
||||||
|
|
@ -111,19 +109,22 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{Array.isArray(item.links) && item.links.length > 0 && (
|
{Array.isArray(item.links) && item.links.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-3 mt-auto pt-3 border-t border-foreground/8">
|
<div className="flex flex-wrap gap-3 mt-auto pt-3 border-t border-foreground/8">
|
||||||
{item.links.map(function (link, k) {
|
{item.links.map(function (link, k) {
|
||||||
return (
|
return (
|
||||||
|
<a
|
||||||
key={k}
|
key={k}
|
||||||
href={link.url}
|
href={link.url}
|
||||||
target={link.newTab ? '_blank' : '_self'}
|
target={link.newTab ? '_blank' : '_self'}
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="flex items-center gap-1.5 text-xs text-foreground/40 hover:text-foreground/70 transition-colors"
|
className="flex items-center gap-1.5 text-xs text-foreground/40 hover:text-foreground/70 transition-colors"
|
||||||
>
|
>
|
||||||
<i className="ti ti-external-link" style={{ fontSize: 12 }} aria-hidden="true" />
|
<i
|
||||||
|
className="ti ti-external-link"
|
||||||
|
style={{ fontSize: 12 }}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
{link.label}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -13,15 +13,8 @@ type SplitHeroProps = Page['hero'] & {
|
||||||
splitImage?: MediaType | null
|
splitImage?: MediaType | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SplitHero: React.FC<SplitHeroProps> = ({
|
export const SplitHero: React.FC<SplitHeroProps> = function (props) {
|
||||||
eyebrow,
|
const { eyebrow, heading, subtext, tags, primaryCta, secondaryCta, splitImage } = props
|
||||||
heading,
|
|
||||||
subtext,
|
|
||||||
tags,
|
|
||||||
primaryCta,
|
|
||||||
secondaryCta,
|
|
||||||
splitImage,
|
|
||||||
}) => {
|
|
||||||
const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
|
const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -29,9 +22,7 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
|
||||||
<div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
|
<div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
|
||||||
<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/30 mb-5">{eyebrow}</p>
|
||||||
{eyebrow}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
{heading && (
|
{heading && (
|
||||||
<h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
|
<h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
|
||||||
|
|
@ -39,26 +30,26 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
|
||||||
</h1>
|
</h1>
|
||||||
)}
|
)}
|
||||||
{subtext && (
|
{subtext && (
|
||||||
<p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">
|
<p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">{subtext}</p>
|
||||||
{subtext}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
{Array.isArray(tags) && tags.length > 0 && (
|
{Array.isArray(tags) && tags.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-2 mb-6">
|
<div className="flex flex-wrap gap-2">
|
||||||
{tags.map(({ tag }, i) => (
|
{tags.map(function ({ tag }, i) {
|
||||||
<span
|
return (
|
||||||
key={i}
|
<span
|
||||||
className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
|
key={i}
|
||||||
>
|
className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
|
||||||
{tag}
|
>
|
||||||
</span>
|
{tag}
|
||||||
))}
|
</span>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
{primaryCta?.label && primaryCta?.url && (
|
{primaryCta && primaryCta.label && primaryCta.url && (
|
||||||
|
<a
|
||||||
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 text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
|
||||||
>
|
>
|
||||||
|
|
@ -66,8 +57,8 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
|
||||||
{primaryCta.label}
|
{primaryCta.label}
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
{secondaryCta?.label && secondaryCta?.url && (
|
{secondaryCta && secondaryCta.label && secondaryCta.url && (
|
||||||
|
<a
|
||||||
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/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
|
||||||
>
|
>
|
||||||
|
|
@ -77,16 +68,10 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-muted/30 flex items-center justify-center min-h-[260px]">
|
<div className="bg-muted/30 flex items-center justify-center min-h-[260px]">
|
||||||
{hasImage ? (
|
{hasImage ? (
|
||||||
<div className="relative w-full h-full min-h-[260px]">
|
<div className="relative w-full h-full min-h-[260px]">
|
||||||
<Image
|
<Image src={splitImage.url!} alt={splitImage.alt ?? ''} fill className="object-cover" />
|
||||||
src={splitImage.url!}
|
|
||||||
alt={splitImage.alt ?? ''}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center justify-center gap-2 opacity-20">
|
<div className="flex flex-col items-center justify-center gap-2 opacity-20">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue