hero

src/components/HeroPage.tsx

@@ -170,9 +170,10 @@ function Background({ isDark }: { isDark: boolean }) {
 type HeroProps = Pick<Page['hero'], 'richText' | 'links'>
 
 function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean }) {
-  const richTextColor = isDark ? 'text-white' : 'text-black'
+  const muted = isDark ? 'text-white/55' : 'text-black/55'
   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">
@@ -192,22 +193,6 @@ 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
@@ -223,7 +208,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">
+          <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}
@@ -242,7 +227,6 @@ function HeroSection({ isDark, richText, links }: HeroProps & { isDark: boolean
             ))}
           </div>
         )}
-        </div>
 
       </div>
     </section>