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

22
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,6 +192,22 @@ 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">
{/* 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
@ -208,7 +223,7 @@ function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean
{/* 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">
<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}
@ -227,6 +242,7 @@ function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean
))}
</div>
)}
</div>
</div>
</section>