🖼️ update blog post styles

2025-11-13 16:04:17 +02:00
parent bc745cfa8b
commit 82b77be57a
18 changed files with 623 additions and 191 deletions
--- a/components/blog/sticky-footer.tsx
+++ b/components/blog/sticky-footer.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface StickyFooterProps {
+  url: string
+  title: string
+}
+
+export function StickyFooter({ url, title }: StickyFooterProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  }
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <footer
+      className={`
+        fixed bottom-0 left-0 right-0 z-40
+        bg-black/98 backdrop-blur-sm
+        border-t-4 border-[var(--neon-magenta)]
+        transition-transform duration-200 ease-in-out
+        ${isVisible ? 'translate-y-0' : 'translate-y-full'}
+      `}
+      style={{
+        boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
+      }}
+    >
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
+
+      <div className="max-w-7xl mx-auto px-6 py-4 relative">
+        <div className="flex items-center justify-between">
+          <div className="hidden md:flex items-center gap-3">
+            <div className="flex gap-1.5">
+              <div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
+              <div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
+            </div>
+            <span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
+              &gt;&gt; SHARE:
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3 mx-auto md:mx-0">
+            <a
+              href={shareLinks.twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
+              style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
+            >
+              [X]
+            </a>
+
+            <a
+              href={shareLinks.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
+              style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
+            >
+              [IN]
+            </a>
+
+            <button
+              onClick={handleCopyLink}
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
+              style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
+            >
+              {copied ? '[✓ COPIED]' : '[COPY]'}
+            </button>
+          </div>
+
+          <button
+            onClick={scrollToTop}
+            className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
+            style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
+          >
+            [↑ TOP]
+          </button>
+        </div>
+      </div>
+    </footer>
+  )
+}