Как я могу улучшить и сделать свой собственный раздел Shopify адаптивным, включая исправление псевдоэлемента и анимации ⇐ CSS

[Anonymous]

Я создал собственный раздел для своего магазина Shopify, но столкнулся с некоторыми проблемами и буду признателен за отзывы и улучшения. В частности, мне нужна помощь в следующем:

• Исправление псевдоэлемента .custom-section:after: он не создается как
  так и должно быть.
• Улучшение анимации кругового текста: текущая реализация имеет
  проблемы.
• Сделать весь раздел полностью адаптивным: в настоящее время он
  не реагирует.

Вот код для моих «custom-section.liquid» и «custom-section.js»:

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const text = document.querySelector('.circular');
const message = "We’re the bestie that you can be yourself with.  ";
text.innerHTML = '';
for (let i = 0; i < message.length;  i++) {
let circularTextSpan = document.createElement('span');
circularTextSpan.textContent = message[i];
text.appendChild(circularTextSpan);
circularTextSpan.style.transform = `rotate(${360 * i / message.length}deg)`;
}
});

Код: Выделить всё

body {
margin: 0;
}

.custom-section {
background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
position: relative;
width: 100%;
height: 650px;
overflow: hidden;
}

.custom-section .container-wrapper {
position: relative;
width: 1510px;
height: 430px;
border: 2px dashed red;
left: 75px;
top: 110px;
overflow: hidden;
max-width: 1440px;
z-index: 2;
}

.custom-section .text-section {
width: 520px;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px dashed blue;
}

.custom-section .title-container h2 {
font-family: 'ITC Garamond Std';
font-size: 64px;
font-weight: 300;
line-height: 70px;
letter-spacing: -2px;
text-align: left;
margin: 0;
padding: 0;
}

.custom-section .text-container {
font-family: 'iCiel Internacional', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: left;
width: 60%;
margin-bottom: 0;
padding-bottom: 0;
z-index: 3;
}

.custom-section .spacer {
flex: 1;
border: 2px dashed green;
}

.custom-section .images-wrapper {
width: 960px;
height: 430px;
position: absolute;
left: 550px;
display: flex;
gap: 30px;
border: 2px dashed purple;
overflow: hidden;
z-index: 3;
}

.custom-section .images-wrapper img {
width: 300px;
height: 430px;
}

.circular span {
font: 14px Inter;
height: 80px;
position: absolute;
left: 75px;
transform-origin: bottom center;
line-height: 16.94px;
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
left: -10px;
}

@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
animation: rotateText 10s linear infinite;
z-index: 3;
}

.custom-section:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(102.77deg, rgba(197, 234, 246, 0) -6.69%, rgba(122, 177, 194, 0.7) 47.23%);
left: 50%;
top: 70px;
transform-origin: top left;
rotate: 20deg;
transform: skew(-13deg);
z-index: 1;
}

{% comment %}
.blue-background {
width: 1311px;
height: 590px;
left: 300px;
background-color: blue;
position: relative;
opacity: 0.15;
transform: rotate(30deg);
}
{% endcomment %}








{{ section.settings.heading }}

{{ section.settings.content }}


{{ section.settings.circular_content }}



[img]{{ [/img]
[img]{{ [/img]
[img]{{ [/img]





{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id":  "heading",
"label": "Heading",
"default": "Our jewelry"
},
{
"type": "text",
"id": "content",
"label": "Content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
},
{
"type": "text",
"id": "circular_content",
"label": "Circular Content",
"default": "We’re the bestie that you can be yourself with."
}
],
"blocks": [
{
"type": "column",
"name": "slide",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
],
"presets": [
{
"name": "Sample Section"
}
]
}
{% endschema %}

Проблемы, о которых я знаю:

• Код: Выделить всё

  .custom-section:afterПсевдоэлемент 

  : градиентный фон отображается неправильно. Я думаю, что есть лучший способ реализовать эту функцию.
• Круговая текстовая анимация: как видно на скриншоте, текст не Выглядит хорошо.
• Активность: раздел не реагирует.

Если найдете что-то еще, пишите!
Вот как сейчас выглядит этот раздел на моем сайте:


Вот как это ДОЛЖНО выглядеть (Фигма):


Вопросы:

• Как правильно реализовать псевдоэлемент .custom-section:after, чтобы обеспечить его наилучшую реализацию?
• Как можно исправить и улучшить закругленный текст в JavaScript и CSS?
• Как сделать весь этот раздел полностью адаптивным для различных устройств и размеров экрана?
• Есть ли какие-либо улучшения с точки зрения структуры или эффективности моей текущей реализации?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ding-fixin