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

hero

Browse source
This commit is contained in:
Mackie 2026-05-25 01:11:24 +08:00
parent 58ea85a9c2
commit 9dee741e28
1 changed files with 51 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/HeroPage.tsx
View file

@ -170,10 +170,9 @@ function Background({ isDark }: { isDark: boolean }) {
type HeroProps = Pick<Page['hero'], 'richText' | 'links'>
function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean }) {
const muted = isDark ? 'text-white/55' : 'text-black/55'
const richTextColor = isDark ? 'text-white' : 'text-black'
const borderLine = isDark ? 'bg-white/10' : 'bg-black/10'
const borderLineFaint = isDark ? 'bg-white/5' : 'bg-black/5'
const richTextColor = isDark ? 'text-white' : 'text-black'
return (
<section className="relative mx-auto w-full max-w-5xl">
@ -193,40 +192,57 @@ function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean
<div className="relative flex flex-col items-center justify-center gap-5 pt-32 pb-28 px-6 text-center">
{/* Rich text from Payload */}
{richText && (
<RichText
className={cn(
'fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-100 duration-500 ease-out',
'max-w-[36.5rem] text-center',
richTextColor
)}
data={richText}
enableGutter={false}
/>
)}
{/* Ghost glass box */}
<div
style={{
background: 'rgba(255,255,255,0.03)',
border: '1px solid rgba(255,255,255,0.08)',
backdropFilter: 'blur(8px)',
borderRadius: 16,
padding: '40px 48px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 20,
maxWidth: 580,
width: '100%',
}}
>
{/* Rich text from Payload */}
{richText && (
<RichText
className={cn(
'fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-100 duration-500 ease-out',
'max-w-[36.5rem] text-center',
richTextColor
)}
data={richText}
enableGutter={false}
/>
)}
{/* Links from Payload */}
{Array.isArray(links) && links.length > 0 && (
<div className="fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-300 duration-500 ease-out flex flex-wrap items-center justify-center gap-3 pt-2">
{links.map(({ link }, i) => (
<CMSLink
key={i}
{...link}
className={cn(
'flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-all',
i === 0
? isDark
? 'bg-white text-black hover:bg-white/90'
: 'bg-black text-white hover:bg-black/85'
: isDark
? 'border border-white/25 text-white hover:bg-white/8'
: 'border border-black/20 text-black hover:bg-black/5'
)}
/>
))}
</div>
)}
{/* Links from Payload */}
{Array.isArray(links) && links.length > 0 && (
<div className="fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-300 duration-500 ease-out flex flex-wrap items-center justify-center gap-3">
{links.map(({ link }, i) => (
<CMSLink
key={i}
{...link}
className={cn(
'flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-all',
i === 0
? isDark
? 'bg-white text-black hover:bg-white/90'
: 'bg-black text-white hover:bg-black/85'
: isDark
? 'border border-white/25 text-white hover:bg-white/8'
: 'border border-black/20 text-black hover:bg-black/5'
)}
/>
))}
</div>
)}
</div>
</div>
</section>