task 17075 | переделал h-article-app-cta

wp-content/themes/hantico/assets/css/style.css

@@ -6538,85 +6538,122 @@ h4 {
 }
 
 .h-article-app-cta{
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    width: 100%;
-    min-height: 120px;
-    box-sizing: border-box;
-    margin: 30px 0;
-    padding: 18px 32px;
-    border-radius: 16px;
-    background: var(--color-red);
-    font-family: inherit;
-}
+  overflow: hidden;
+  position: relative;
 
-.h-article-app-cta .h-article-app-cta__image {
+  padding: 40px;
+
+  border-radius: 40px;
+
   display: flex;
+  justify-content: space-between;
   align-items: center;
-    justify-content: center;
-    flex: 0 0 100px;
-    width: 100px;
-    height: 100px;
 }
+.h-article-app-cta::before{
+  content: '';
+
+  z-index: -10;
+  position: absolute;
+  top: 0;
+  left: 0;
 
-.h-article-app-cta .h-article-app-cta__image img {
-    display: block;
   width: 100%;
   height: 100%;
-    object-fit: contain;
-}
 
-.h-article-app-cta .h-article-app-cta__content {
-    flex: 1;
-    min-width: 0;
+  background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%);
 }
-
-.h-article-app-cta .h-article-app-cta__title {
-    margin: 0;
-    padding: 0;
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 1.4;
-    color: var(--color-light);
-}
-
-.h-article-app-cta .h-article-app-cta__button {
+.h-article-app-cta__content{
   display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 145px;
-    min-height: 40px;
-    box-sizing: border-box;
-    padding: 10px 20px;
-    border: 0;
-    border-radius: 50px;
-    background: var(--color-light);
-    color: var(--color-dark);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.3;
-    text-align: center;
-    text-decoration: none;
-    transition: background 0.2s, color 0.2s;
+  flex-direction: column;
+  gap: 24px;
 }
+.h-article-app-cta__title{
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 110%; /* 33px */
+  letter-spacing: -0.3px;
+  color: var(--color-dark);
+}
+.h-article-app-cta__text{
+  max-width: 349px;
 
-.h-article-app-cta .h-article-app-cta__button:hover {
-    background: var(--color-grey);
+  font-size: 20px;
+  line-height: 150%; /* 30px */
+  letter-spacing: -0.2px;
+  color: var(--color-text);
+}
+.h-article-app-cta__img{
+  z-index: -5;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.h-article-app-cta__link{
+  padding: 20px 24px;
+
+  border-radius: 60px;
+  background: #AE001B;
+  box-shadow: 20px 24px 44px 0 rgba(217, 217, 217, 0.25);
+
+  text-align: center;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 120%;
+  color: var(--color-white);
 }
 
 @media (max-width: 767.98px) {
-  .h-article-app-cta .h-article-app-cta__title{
-    font-size: 16px;
+  .h-article-app-cta{
+    padding: 24px 26px 40px 24px;
   }
+  .h-article-app-cta__content{
+    gap: 12px;
+  }
+  .h-article-app-cta__title{
+    font-size: 18px;
+    line-height: 110%; /* 19.8px */
+    letter-spacing: -0.18px;
+  }
+  .h-article-app-cta__text{
+    max-width: 100%;
 
-  .h-article-app-cta .h-article-app-cta__button{
-    width: 100%;
+    font-size: 14px;
+    line-height: 150%; /* 21px */
+    letter-spacing: -0.14px;
+  }
+  .h-article-app-cta__img{
+    z-index: -5;
+    position: absolute;
+    left: 0;
+    right: auto;
+    bottom: 0;
 
-    flex:auto;
+    -webkit-mask-image: linear-gradient(
+      to right,
+      #000 60%,
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      #000 60%,
+      transparent 100%
+    );
+  }
+  .h-article-app-cta__link{
+    padding: 14px 18px;
+
+    border-radius: 60px;
+
+    font-size: 13px;
+  }
+}
+@media (max-width: 670.98px) {
+  .h-article-app-cta{
+    flex-direction: column;
+    align-items: start;
+    gap: 24px;
   }
 }
-
 
 .h-article-author {
     display: flex;

wp-content/themes/hantico/template-parts/article-blocks/cta_2.php

@@ -1,31 +1,32 @@
 <?php
 $fields = $args['fields'] ?? [];
-$image = $fields['img'] ?? [];
 $text = $fields['text'] ?? '';
+$title = $fields['title'] ?? '';
 $link = $fields['link'] ?? [];
 ?>
 
 <div class="h-article-app-cta">
-    <?php if ($image): ?>
-        <div class="h-article-app-cta__image">
-            <img
-                src="<?php echo esc_url($image['url']); ?>"
-                alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
-                width="90"
-                height="90"
-            >
-        </div>
+    <div class="h-article-app-cta__content">
+        <?php if ($title): ?>
+            <p class="h-article-app-cta__title"><?php echo nl2br(esc_html($title)); ?></p>
         <?php endif; ?>
 
         <?php if ($text): ?>
-        <div class="h-article-app-cta__content">
-            <p class="h-article-app-cta__title"><?php echo nl2br(esc_html($text)); ?></p>
-        </div>
+            <p class="h-article-app-cta__text"><?php echo nl2br(esc_html($text)); ?></p>
         <?php endif; ?>
+    </div>
 
     <?php if (!empty($link['link'])): ?>
-        <a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__button">
+        <a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__link">
             <?php echo esc_html($link['text'] ?? ''); ?>
         </a>
     <?php endif; ?>
+
+    <picture class="h-article-app-cta__img">
+        <source
+            media="(max-width: 767.98px)"
+            srcset="<?php echo get_theme_file_uri('assets/img/bg/app-cta-phone.webp'); ?>"
+        >
+        <img src="<?php echo get_theme_file_uri('assets/img/bg/app-cta.webp'); ?>" alt="Изображение">
+    </picture>
 </div>