From 9dee741e285b003d3ac455d8c992b0fc4b124291 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Mon, 25 May 2026 01:11:24 +0800
Subject: [PATCH] hero

---
 src/components/HeroPage.tsx | 86 ++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 35 deletions(-)

diff --git a/src/components/HeroPage.tsx b/src/components/HeroPage.tsx
index 0e8bbf2..2659c00 100644
--- a/src/components/HeroPage.tsx
+++ b/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,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>