feat: enhance image handling and layout adjustments

- Added image quality settings and device sizes in next.config.ts for better image optimization.
- Updated package dependencies, including cheerio and baseline-browser-mapping.
- Improved global styles for blog content images to ensure responsiveness.
- Refactored button components for consistent sizing and styling across the application.
- Enhanced blog post card layout with new variants and improved author name formatting.
- Adjusted hero section and content layout for better visual appeal and user experience.

components/content-1.tsx

@@ -11,24 +11,35 @@ export default function ContentSection() {
           <div className="relative mb-6 sm:mb-0">
             <div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
               <Image
-                src="/assets/Echosystem.png"
-                className="rounded-[15px] object-cover"
-                alt="اکوسیستم یکپارچه فیپ"
+                src="/assets/main-pic/intelligent-workflow-control-center.jpg"
+                className="rounded-[15px] object-cover dark:hidden"
+                alt="مرکز کنترل گردش کار هوشمند"
                 width={1207}
                 height={929}
+                quality={100}
+                sizes="(max-width: 640px) 100vw, 50vw"
+              />
+              <Image
+                src="/assets/main-pic/intelligent-workflow-control-center-dark.jpg"
+                className="hidden rounded-[15px] object-cover dark:block"
+                alt="مرکز کنترل گردش کار هوشمند"
+                width={1207}
+                height={929}
+                quality={100}
+                sizes="(max-width: 640px) 100vw, 50vw"
               />
             </div>
           </div>
 
           <div className="relative space-y-4">
-            <p className="text-muted-foreground leading-relaxed tracking-normal">
+            <p className="text-muted-foreground leading-relaxed tracking-normal text-justify sm:text-start">
               فیپ یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند.{" "}
-              <span className="text-accent-foreground font-bold">
+              <span className="text-primary font-bold">
                 ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه
               </span>{" "}
               به کسب‌وکارها کمک می‌کنیم تا سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
             </p>
-            <p className="text-muted-foreground leading-relaxed tracking-normal">
+            <p className="text-muted-foreground leading-relaxed tracking-normal text-justify sm:text-start">
               ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار طراحی و پیاده‌سازی می‌کنیم که به آن‌ها امکان می‌دهد تا از قدرت اتوماسیون و ارتباطات هوشمند بهره‌مند شوند.
             </p>