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/features-12.tsx

@@ -20,22 +20,29 @@ export default function Features() {
   type ImageKey = "item-1" | "item-2" | "item-3" | "item-4";
   const [activeItem, setActiveItem] = useState<ImageKey>("item-1");
 
+  const sectionImage = (filename: string) =>
+    `/assets/main-pic/4section/${encodeURIComponent(filename)}`;
+
   const images = {
     "item-1": {
-      image: "/assets/main-pic/4section/Systems Integration.jpg",
-      alt: "System integration",
+      image: sectionImage("Systems Integration.jpg"),
+      imageDark: sectionImage("Systems Integration-dark.jpg"),
+      alt: "یکپارچه‌سازی سیستم‌ها",
     },
     "item-2": {
-      image: "/assets/main-pic/4section/Powerful Management panels.jpg",
-      alt: "Management panels",
+      image: sectionImage("Powerful Management panels.jpg"),
+      imageDark: sectionImage("Powerful Management panels-dark.jpg"),
+      alt: "پنل‌های مدیریتی قدرتمند",
     },
     "item-3": {
-      image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
-      alt: "Social media integration",
+      image: sectionImage("Interaction with Social Networks.jpg"),
+      imageDark: sectionImage("Interaction with Social Networks_dark.jpg"),
+      alt: "تعامل با شبکه‌های اجتماعی",
     },
     "item-4": {
-      image: "/assets/main-pic/4section/Process Automation.jpg",
-      alt: "Process automation",
+      image: sectionImage("Process Automation.jpg"),
+      imageDark: sectionImage("Process Automation-dark.jpg"),
+      alt: "اتوماسیون فرآیندها",
     },
   };
 
@@ -113,33 +120,48 @@ export default function Features() {
             </AccordionItem>
           </Accordion>
 
-          <div className="bg-background relative flex overflow-hidden rounded-3xl border p-0 m-0">
-            <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div>
-            <div className="aspect-76/59 bg-background relative w-full rounded-3xl m-0 p-0">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={`${activeItem}-id`}
-                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
-                  animate={{ opacity: 1, y: 0, scale: 1 }}
-                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
-                  transition={{ duration: 0.2 }}
-                  className="size-full overflow-hidden rounded-3xl m-0 p-0"
-                >
-                  <Image
-                    src={images[activeItem].image}
-                    className="size-full object-cover dark:mix-blend-lighten"
-                    alt={images[activeItem].alt}
-                    width={1207}
-                    height={929}
-                  />
-                </motion.div>
-              </AnimatePresence>
+          <div className="relative rounded-3xl bg-linear-to-br from-primary/50 via-accent/40 to-secondary/50 p-px shadow-lg shadow-primary/10">
+            <div className="bg-background relative flex overflow-hidden rounded-[calc(1.5rem-1px)] m-0 p-0">
+              <div className="w-15 absolute inset-0 right-0 ml-auto border-l border-primary/15 bg-[repeating-linear-gradient(-45deg,color-mix(in_oklab,var(--color-primary)_25%,var(--color-border)),color-mix(in_oklab,var(--color-primary)_25%,var(--color-border))_1px,transparent_1px,transparent_8px)]"></div>
+              <div className="aspect-76/59 bg-background relative w-full rounded-[calc(1.5rem-1px)] m-0 p-0">
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={`${activeItem}-id`}
+                    initial={{ opacity: 0, y: 6, scale: 0.98 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: 6, scale: 0.98 }}
+                    transition={{ duration: 0.2 }}
+                    className="size-full overflow-hidden rounded-[calc(1.5rem-1px)] m-0 p-0"
+                  >
+                    <Image
+                      src={images[activeItem].image}
+                      className="size-full object-cover dark:hidden"
+                      alt={images[activeItem].alt}
+                      width={1207}
+                      height={929}
+                      quality={100}
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                    />
+                    <Image
+                      src={images[activeItem].imageDark}
+                      className="hidden size-full object-cover dark:block"
+                      alt={images[activeItem].alt}
+                      width={1207}
+                      height={929}
+                      quality={100}
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                    />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+              <BorderBeam
+                duration={6}
+                size={200}
+                borderWidth={1}
+                colorFrom="#FCC61D"
+                colorTo="#01796F"
+              />
             </div>
-            <BorderBeam
-              duration={6}
-              size={200}
-              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
-            />
           </div>
         </div>
       </div>