feat: enhance blog post layout and add scroll progress indicator

- Adjusted padding for the blog post thumbnail section.
- Introduced a custom hook for tracking scroll progress.
- Added horizontal scroll progress indicators for both desktop and mobile views in the blog table of contents.

app/blog/[slug]/page.tsx

@@ -68,8 +68,8 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
     <>
       {/* تصویر شاخص تمام‌عرض بالای صفحه */}
       {thumbnailUrl && (
-        <div className="pt-10 md:pt-24">
-          <div className="relative container mx-auto  max-w-6xl rounded-xl overflow-hidden shadow-sm w-full aspect-[5/2] min-h-[10rem] md:min-h-[10rem] bg-muted">
+        <div className="pt-13 md:pt-24">
+          <div className="relative container mx-auto  max-w-6xl md:rounded-xl overflow-hidden shadow-sm w-full aspect-[5/2] min-h-[10rem] md:min-h-[10rem] bg-muted">
             <Image
               src={thumbnailUrl}
               alt={altText}