resolve mobile view issues and increase performance of webiste

Author: iamabdullah73524

src/components/BlogsSection.astro

@@ -31,7 +31,7 @@ const slicedPosts = posts.slice(0, 3);
     <!-- Blog Grid -->
     <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
       {
-        slicedPosts.map((post) => (
+        slicedPosts.map((post, index) => (
           <BlogCard
             url={`/blogs/${post.id}`}
             title={post.data.title}
@@ -40,6 +40,7 @@ const slicedPosts = posts.slice(0, 3);
             author={post.data.author}
             date={post.data.date.toLocaleDateString()}
             tags={post.data.tags}
+            priority={index === 0}
           />
         ))
       }

src/components/Header.astro

@@ -98,7 +98,7 @@ const isCurrentPage = (path: string) => {
           <button
             id="mobileMenuBtn"
             type="button"
-            class="border-foreground/15 text-foreground flex h-14 w-14 items-center justify-center rounded-3xl border text-4xl"
+            class="border-foreground/15 text-foreground flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
           >
             ☰
           </button>
@@ -127,7 +127,7 @@ const isCurrentPage = (path: string) => {
             <button
               id="closeMenuBtn"
               type="button"
-              class="border-foreground/15 text-foreground flex h-14 w-14 items-center justify-center rounded-3xl border text-4xl"
+              class="border-foreground/15 text-foreground flex h-12 w-12 items-center justify-center rounded-3xl border text-4xl"
             >
               ✕
             </button>

src/pages/about.astro

@@ -98,7 +98,7 @@ const founders = [
           </p>
 
 
-         <div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">a
+         <div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
             <div
               class="border-foreground/10 bg-background dark:bg-foreground/[0.04] rounded-3xl border p-6 text-center shadow-sm backdrop-blur-sm"
             >