some edit

blocks/feature234.tsx

@@ -12,27 +12,34 @@ interface Feature234Props {
 
 const Feature234 = ({ className }: Feature234Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
-      <div className="container flex flex-col items-center">
-        <h1 className="font-inter mx-auto max-w-4xl text-center text-[70px] leading-[65px] font-semibold tracking-tighter text-balance lg:text-[85px] lg:leading-[86px]">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full min-w-0 overflow-x-hidden bg-background py-12 sm:py-20 lg:py-32",
+        className,
+      )}
+    >
+      <div className="container flex min-w-0 flex-col items-center px-4 sm:px-6">
+        <h1 className="font-inter mx-auto max-w-full text-center text-3xl leading-tight font-semibold tracking-tighter text-balance sm:text-5xl md:text-6xl lg:max-w-4xl lg:text-[85px] lg:leading-[86px]">
           عملیات سازمان را یکپارچه کنید
         </h1>
         <CardsContainer />
-        <p className="font-inter mx-auto max-w-xl text-center text-lg font-medium text-pretty text-black">
+        <p className="font-inter mx-auto max-w-xl text-center text-base font-medium text-pretty text-black sm:text-lg">
           گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
         </p>
-        <div className="mt-10 flex items-center gap-2">
+        <div className="mt-8 flex w-full max-w-full flex-wrap items-center justify-center gap-2 sm:mt-10">
           <Button
             asChild
             variant="default"
-            className="block h-fit w-fit rounded-full px-6 py-2 text-sm leading-loose"
+            className="block h-auto max-w-full rounded-full px-5 py-2 text-sm leading-loose whitespace-normal"
           >
             <a href="#">از خرید تا فروش در یک سیستم</a>
           </Button>
           <Button
             asChild
             variant="secondary"
-            className="block h-fit w-fit rounded-full px-6 py-2 text-sm leading-loose"
+            className="block h-auto max-w-full rounded-full px-5 py-2 text-sm leading-loose whitespace-normal"
           >
             <a href="#">یکپارچگی</a>
           </Button>
@@ -108,20 +115,20 @@ const CardsContainer = () => {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   return (
-    <div className="my-16 ms-[50px] flex items-center justify-center lg:ms-0">
+    <div className="my-10 flex w-full max-w-full items-center justify-center overflow-hidden sm:my-14 lg:my-16">
       {CARDS.map((card, index) => {
         const yOffset = Math.pow(Math.abs(index - 3), 1.2) * 12;
         const isHovered = hoveredIndex === index;
         const visibilityClasses =
           (index === 0 || index === 1 || index === 5 || index === 6
-            ? " hidden sm:hidden "
+            ? "hidden sm:hidden "
             : "") +
           (index === 0 || index === 6 ? "md:hidden " : "md:block ") +
           "lg:block";
 
         return (
           <motion.div
-            className={visibilityClasses}
+            className={cn("shrink-0", visibilityClasses)}
             key={card.id}
             onMouseEnter={() => setHoveredIndex(index)}
             onMouseLeave={() => setHoveredIndex(null)}
@@ -134,14 +141,14 @@ const CardsContainer = () => {
           >
             <div
               className={cn(
-                "relative h-[176px] w-[177px] overflow-hidden rounded-3xl border",
+                "relative h-28 w-28 overflow-hidden rounded-2xl border sm:h-36 sm:w-36 sm:rounded-3xl lg:h-[176px] lg:w-[177px]",
+                index !== 0 && "-ms-7 sm:-ms-9 lg:-ms-[50px]",
                 card.isDark
-                  ? "mb-14 border-[#8b8b8b] bg-black shadow-2xl"
+                  ? "mb-8 border-[#8b8b8b] bg-black shadow-2xl sm:mb-14"
                   : "border-[#cecece] bg-[#f5f5f5] shadow-lg",
               )}
               style={{
                 transform: `rotate(${card.rotate}deg)`,
-                marginInlineStart: index === 0 ? "0px" : "-50px",
               }}
             >
               <img