hero

src/components/HeroPage.tsx

@@ -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>