feat: Add 'Back to Top' button for long pages

[bobbyonmagic]

Problem

Long posts, guides, and list pages require users to scroll extensively to return to the top. This creates a poor user experience, especially on:

• Long-form blog posts
• Comprehensive guides with multiple sections
• Posts listing pages with many entries
• Roadmap pages with detailed content

Proposed Solution

Add a floating "Back to Top" button that:

• Appears after scrolling down 300-500px
• Smoothly scrolls to top on click
• Has a subtle animation when appearing/disappearing
• Is accessible (keyboard navigable, proper ARIA label)

Implementation

// components/back-to-top.tsx
'use client'
import { useState, useEffect } from 'react'
import { ArrowUp } from 'lucide-react'

export function BackToTop() {
  const [visible, setVisible] = useState(false)
  
  useEffect(() => {
    const toggle = () => setVisible(window.scrollY > 400)
    window.addEventListener('scroll', toggle)
    return () => window.removeEventListener('scroll', toggle)
  }, [])
  
  if (!visible) return null
  
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Back to top"
      className="fixed bottom-8 right-8 p-3 rounded-full bg-primary text-white shadow-lg hover:bg-primary/90 transition-all"
    >
      <ArrowUp size={20} />
    </button>
  )
}

Acceptance Criteria

• Button appears after scrolling 400px+
• Smooth scroll animation to top
• Subtle fade in/out animation
• Works on mobile (positioned appropriately)
• Keyboard accessible
• Respects reduced-motion preferences