fix: update blog post thumbnail and hero section layout

- Adjusted the maximum width of the blog post thumbnail container.
- Changed the thumbnail image size to 'full' for better quality.
- Enhanced the hero section layout by modifying padding and aspect ratio for improved responsiveness.
- Updated image properties to ensure consistent quality and priority loading.

app/blog/[slug]/page.tsx

@@ -69,13 +69,13 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
       {/* تصویر شاخص تمام‌عرض بالای صفحه */}
       {thumbnailUrl && (
         <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">
+          <div className="relative container mx-auto  max-w-5xl 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}
               fill
               className="object-cover"
-              sizes="100vw"
+              quality={100}
               priority
             />
           </div>

components/blog-post-card.tsx

@@ -21,7 +21,7 @@ export function BlogPostCard({
   const excerpt = stripHtml(post.excerpt.rendered) || stripHtml(post.content.rendered).slice(0, 160);
   const modifiedDate = post.modified ? formatDateShamsi(post.modified) : null;
   const authorName = post._embedded?.author?.[0]?.name ?? null;
-  const thumbnailUrl = getFeaturedImageUrl(post, "medium");
+  const thumbnailUrl = getFeaturedImageUrl(post, "full");
 
   if (variant === "tiny") {
     return (
@@ -80,7 +80,9 @@ export function BlogPostCard({
               alt=""
               fill
               className="object-cover"
-              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              quality={100}
+              priority
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 350px"
             />
           </div>
         ) : (

components/hero-section.tsx

@@ -168,14 +168,13 @@ export default function HeroSection() {
                 ...transitionVariants,
               }}
             >
-              <div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
-                <div className="ring-background bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border ring-1 shadow-[0_20px_50px_rgba(59,130,246,0.4)]">
+              <div className="relative mt-8 overflow-hidden px-2 sm:mt-12 md:mt-20 p-2">
+                <div className="ring-background bg-background relative max-w-5xl mx-auto overflow-hidden rounded-2xl border ring-1 aspect-[3/2]">
                   <Image
-                    className="bg-background relative w-full h-full rounded-2xl object-contain object-center"
                     src="/assets/main-pic/Untitled-1 copy-min.jpg"
                     alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
-                    width={1150}
-                    height={613}
+                    fill
+                    className="object-cover rounded-2xl inline-block my-0"
                     quality={100}
                     priority
                   />
@@ -233,13 +232,13 @@ export default function HeroSection() {
                   alt="Microsoft Windows Logo"
                   size="md"
                   className="translate-x-2"
-              />
-              <LogoItem
+                />
+                <LogoItem
                   icon="skill-icons:github-dark"
                   alt="github Logo"
                   size="md"
                   className="translate-x-4"
-              />
+                />
               </div>
             </div>
           </div>