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