fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/blog/BlogPostHeader.tsx

@@ -11,6 +11,7 @@ interface BlogPostHeaderProps {
   date: string;
   readingTime: number;
   slug: string;
+  thumbnail?: string;
 }
 
 export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
@@ -19,6 +20,7 @@ export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
   date,
   readingTime,
   slug,
+  thumbnail,
 }) => {
   return (
     <header className="pt-32 pb-8 md:pt-40 md:pb-12 max-w-4xl mx-auto px-5 md:px-0">
@@ -41,6 +43,30 @@ export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
           </div>
         </Reveal>
 
+        {thumbnail && (
+          <Reveal delay={0.1}>
+            <div className="relative group my-12 md:my-16">
+              {/* Architectural Border/Frame */}
+              <div className="absolute -inset-4 border border-slate-100 rounded-[2.5rem] -z-10 group-hover:scale-[1.01] transition-transform duration-700" />
+              <div className="absolute -inset-2 border border-slate-200/50 rounded-[2.2rem] -z-10 group-hover:scale-[1.005] transition-transform duration-500" />
+
+              <div className="relative aspect-[21/9] w-full overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 shadow-2xl shadow-slate-200/50">
+                <img
+                  src={thumbnail}
+                  alt={title}
+                  className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-1000"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/20 to-transparent mix-blend-multiply" />
+              </div>
+
+              {/* Technical label */}
+              <div className="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur-sm border border-slate-200 rounded text-[8px] font-mono text-slate-500 uppercase tracking-widest">
+                Visual_Blueprint_Ref: {slug?.substring(0, 8).toUpperCase()}
+              </div>
+            </div>
+          </Reveal>
+        )}
+
         <Reveal delay={0.2}>
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 py-6 border-y border-slate-100">
             <div className="flex items-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
@@ -59,11 +85,11 @@ export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
                 {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
                 {slug
                   ? slug
-                      .split("")
-                      .reduce((acc, char) => acc + char.charCodeAt(0), 0)
-                      .toString(16)
-                      .toUpperCase()
-                      .padStart(4, "0")
+                    .split("")
+                    .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+                    .toString(16)
+                    .toUpperCase()
+                    .padStart(4, "0")
                   : "0000"}
               </span>
               <span