ready slots

public/css/styles.css

@@ -196,27 +196,32 @@ h1, h2, h3, h4, h5, h6 {
 }
 .text .table-wrapper-scroll {
   margin: 30px 0;
+  background: var(--table-bg-color);
+  border: 1px solid var(--content-border-color);
+  border-radius: 9px;
+  overflow: hidden;
 }
 @media (max-width: 575px) {
   .text .table-wrapper-scroll {
-    background: none;
-    border-radius: 0;
-    padding-bottom: 8px;
     overflow-x: auto;
     margin: 20px 0;
   }
   .text .table-wrapper-scroll::-webkit-scrollbar {
-    height: 4px;
+    height: 6px;
   }
   .text .table-wrapper-scroll::-webkit-scrollbar-track {
-    background: transparent;
+    background: var(--table-bg-color);
+    border-radius: 9px;
   }
   .text .table-wrapper-scroll::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-color);
+    background: var(--content-border-color);
+    border-radius: 9px;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-color);
   }
 }
 .text .table-wrapper {
-  background: #E0E5EF;
   border-radius: 9px;
 }
 @media (max-width: 575px) {
@@ -224,10 +229,6 @@ h1, h2, h3, h4, h5, h6 {
     width: 640px;
   }
 }
-.text .table-wrapper table {
-  margin: 0;
-  padding: 0;
-}
 .text table {
   margin: 0;
   position: relative;
@@ -236,7 +237,7 @@ h1, h2, h3, h4, h5, h6 {
   border-collapse: collapse;
   border-radius: 9px;
   overflow: hidden;
-  border: 1px solid var(--Solid-Black-10, rgba(2, 0, 5, 0.1));
+  background: var(--table-bg-color);
 }
 .text table thead th, .text table thead td {
   padding: 12px;
@@ -246,7 +247,8 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.2em;
   vertical-align: middle;
-  background: transparent;
+  background: var(--table-header-color);
+  border: 1px solid var(--content-border-color);
 }
 @media (max-width: 575px) {
   .text table thead th, .text table thead td {
@@ -263,6 +265,8 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.2em;
   vertical-align: middle;
+  background: var(--table-header-color);
+  border: 1px solid var(--content-border-color);
 }
 @media (max-width: 575px) {
   .text table tr:first-child th {
@@ -274,12 +278,18 @@ h1, h2, h3, h4, h5, h6 {
 .text table tr:first-child:has(th) {
   overflow: hidden;
   height: auto !important;
-  background: #E0E5EF;
+}
+.text table tbody tr {
+  border: 1px solid var(--content-border-color);
+}
+.text table tbody tr:nth-child(even) {
+  background: rgba(var(--table-header-color-rgb, 42, 42, 42), 0.3);
 }
 .text table tbody td {
   padding: 12px;
   vertical-align: middle;
   word-wrap: break-word;
+  border: 1px solid var(--content-border-color);
 }
 @media (max-width: 1199px) {
   .text table tbody td {
@@ -657,13 +667,13 @@ h1, h2, h3, h4, h5, h6 {
 .author {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 24px;
   border-radius: 8px;
 }
 .author__img {
   flex-shrink: 0;
-  width: 40px;
-  height: 40px;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
   overflow: hidden;
 }
@@ -676,14 +686,30 @@ h1, h2, h3, h4, h5, h6 {
 .author__info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 16px;
 }
 .author__name {
   font-size: 14px;
   font-weight: 600;
 }
-.author__date {
-  font-size: 12px;
+.author__name-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.author__name-n {
+  color: var(--text-color);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px; /* 112.5% */
+}
+.author__name-v {
+  color: var(--accent-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px; /* 100% */
 }
 
 .faq {
@@ -711,7 +737,6 @@ h1, h2, h3, h4, h5, h6 {
   transform: rotate(-45deg);
 }
 .faq__item.active .faq__answer {
-  max-height: 500px;
   opacity: 1;
 }
 .faq__question {
@@ -722,6 +747,9 @@ h1, h2, h3, h4, h5, h6 {
   -moz-user-select: none;
   user-select: none;
   transition: background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 .faq__question h3 {
   margin: 0;
@@ -746,6 +774,29 @@ h1, h2, h3, h4, h5, h6 {
 .faq__question::after {
   transform: translateY(-50%) rotate(90deg);
 }
+.faq__number {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  aspect-ratio: 1/1;
+  font-weight: 600;
+  background-color: var(--accent-color);
+  color: var(--text-color);
+  min-width: 32px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+.faq__question-title {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--text-color);
+}
 .faq__answer {
   max-height: 0;
   opacity: 0;
@@ -824,6 +875,11 @@ h1, h2, h3, h4, h5, h6 {
   padding: 0 24px 24px 24px;
   counter-reset: toc-counter;
 }
+@media (max-width: 768px) {
+  .toc__list {
+    padding: 0 16px 16px 16px;
+  }
+}
 .toc__list--nested {
   padding: 8px 0 0 28px;
   list-style: disc;
@@ -873,6 +929,91 @@ h1, h2, h3, h4, h5, h6 {
   max-height: 1000px;
 }
 
+.slot-item {
+  overflow: hidden;
+  position: relative;
+  padding-top: 52%;
+  border-radius: 16px;
+  background-color: var(--body-bg-color);
+  border: 1px solid var(--content-border-color);
+  box-shadow: 0 2px 44px 0 rgba(188, 188, 188, 0.15);
+}
+.slot-item__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  height: calc(100% - 45px);
+}
+.slot-item__thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.slot-item__thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.slot-item__title {
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  gap: 8px;
+}
+.slot-item__title-txt {
+  color: var(--text-color);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px; /* 162.5% */
+}
+.slot-item__provider {
+  border-radius: 8px;
+  background-color: var(--body-bg-color);
+  backdrop-filter: blur(17px);
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 8px;
+}
+.slot-item__rtp {
+  background-color: var(--accent-color);
+  display: flex;
+  height: 24px;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  color: var(--text-color);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 14px; /* 116.667% */
+  border-radius: 5px;
+}
+.slot-item__icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slot-item__icon svg {
+  fill: var(--link-color);
+}
+
 body {
   padding-top: 70px;
   background-color: var(--body-bg-color);
@@ -921,12 +1062,18 @@ body.menu-open {
   gap: 32px;
   width: 100%;
 }
-@media (max-width: 768px) {
+@media (max-width: 1199px) {
   .section-wrapper {
     gap: 24px;
     padding: 24px 0;
   }
 }
+@media (max-width: 768px) {
+  .section-wrapper {
+    gap: 16px;
+    padding: 16px 0;
+  }
+}
 
 .section {
   padding: 32px;
@@ -934,11 +1081,19 @@ body.menu-open {
   border: 1px solid var(--content-border-color);
   background: var(--content-bg-color);
 }
-@media (max-width: 768px) {
+@media (max-width: 1199px) {
   .section {
     padding: 24px;
   }
 }
+@media (max-width: 768px) {
+  .section {
+    padding: 16px;
+  }
+}
+.section__title {
+  margin-top: 0;
+}
 
 a {
   color: var(--link-color);
@@ -1246,4 +1401,20 @@ caption {
   visibility: hidden;
   cursor: pointer;
 }
+
+.slots-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+@media (max-width: 1199px) {
+  .slots-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .slots-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 /*# sourceMappingURL=styles.css.map */

public/js/script.js

@@ -32,33 +32,116 @@ document.addEventListener("DOMContentLoaded", function() {
         });
     }
 
+
+    // Находим все таблицы внутри блока с классом text
+    const tables = document.querySelectorAll('.text table');
+
+    if(tables){
+        tables.forEach(table => {
+            // Проверяем, есть ли у таблицы класс no-table-wrapper
+            if (!table.classList.contains('no-table-wrapper')) {
+                    // Создаем внешний wrapper для скролла
+                    const scrollWrapper = document.createElement('div');
+                    scrollWrapper.classList.add('table-wrapper-scroll');
+
+                    // Создаем внутренний wrapper для стилизации
+                    const wrapper = document.createElement('div');
+                    wrapper.classList.add('table-wrapper');
+
+                    // Оборачиваем таблицу
+                    table.parentNode.insertBefore(scrollWrapper, table);
+                    scrollWrapper.appendChild(wrapper);
+                    wrapper.appendChild(table);
+
+                    // Проверяем, есть ли у таблицы элемент caption
+                    if (table.querySelector('caption')) {
+                            // Если caption есть, добавляем к scrollWrapper класс 'has-caption'
+                            scrollWrapper.classList.add('has-caption');
+                    }
+
+                    // Получаем первую строку таблицы
+                    const firstRow = table.querySelector('tr');
+                    // Подсчитываем количество столбцов в первой строке
+                    const columnCount = firstRow ? firstRow.children.length : 0;
+
+                    // Если столбцов больше трех, добавляем класс 'large-table'
+                    if (columnCount > 3) {
+                            wrapper.classList.add('large-table');
+                    }
+            }
+        });
+    }
+
     // FAQ Accordion
-    const faqItems = document.querySelectorAll(".faq__item");
-    console.log("FAQ items found:", faqItems.length);
+    const faqItems = document.querySelectorAll('.faq__item');
 
-    faqItems.forEach(item => {
-        const question = item.querySelector(".faq__question");
+    if (faqItems) {
+        faqItems.forEach(item => {
+            const question = item.querySelector('.faq__question');
+            const answer = item.querySelector('.faq__answer');
 
-        if (question) {
-            question.addEventListener("click", function() {
-                console.log("FAQ item clicked");
-                // Toggle active class on the item
-                item.classList.toggle("active");
-            });
-        }
-    });
+            if (question && answer) {
+                question.addEventListener('click', function() {
+                    // Закрываем все остальные FAQ
+                    faqItems.forEach(otherItem => {
+                        if (otherItem !== item) {
+                            otherItem.classList.remove('active');
+                            const otherAnswer = otherItem.querySelector('.faq__answer');
+                            if (otherAnswer) {
+                                otherAnswer.style.maxHeight = null;
+                            }
+                        }
+                    });
 
-    // Table of Contents
-    const tocElement = document.querySelector(".toc");
+                    // Переключаем текущий FAQ
+                    item.classList.toggle('active');
 
-    if (tocElement) {
-        const tocHeader = tocElement.querySelector(".toc__header");
+                    if (item.classList.contains('active')) {
+                        answer.style.maxHeight = answer.scrollHeight + 'px';
+                    } else {
+                        answer.style.maxHeight = null;
+                    }
+                });
+            }
+        });
+    }
+
+    // Table of Contents toggle
+    const toc = document.querySelector('.toc');
+    const tocHeader = document.querySelector('.toc__header');
+    const tocContent = document.querySelector('.toc__content');
+
+    if (toc && tocHeader && tocContent) {
+        tocHeader.addEventListener('click', function() {
+            toc.classList.toggle('active');
+
+            if (toc.classList.contains('active')) {
+                tocContent.style.maxHeight = tocContent.scrollHeight + 'px';
+            } else {
+                tocContent.style.maxHeight = null;
+            }
+        });
+    }
+
+    // Table of Contents smooth scroll
+    const tocLinks = document.querySelectorAll('.toc__link');
 
-        if (tocHeader) {
-            tocHeader.addEventListener("click", function() {
-                tocElement.classList.toggle("active");
+    if (tocLinks) {
+        tocLinks.forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
             });
-        }
+        });
     }
 });
 

resources/js/app.js

@@ -31,4 +31,116 @@ document.addEventListener("DOMContentLoaded", function() {
             }
         });
     }
+
+
+    // Находим все таблицы внутри блока с классом text
+    const tables = document.querySelectorAll('.text table');
+
+    if(tables){
+        tables.forEach(table => {
+            // Проверяем, есть ли у таблицы класс no-table-wrapper
+            if (!table.classList.contains('no-table-wrapper')) {
+                    // Создаем внешний wrapper для скролла
+                    const scrollWrapper = document.createElement('div');
+                    scrollWrapper.classList.add('table-wrapper-scroll');
+
+                    // Создаем внутренний wrapper для стилизации
+                    const wrapper = document.createElement('div');
+                    wrapper.classList.add('table-wrapper');
+
+                    // Оборачиваем таблицу
+                    table.parentNode.insertBefore(scrollWrapper, table);
+                    scrollWrapper.appendChild(wrapper);
+                    wrapper.appendChild(table);
+
+                    // Проверяем, есть ли у таблицы элемент caption
+                    if (table.querySelector('caption')) {
+                            // Если caption есть, добавляем к scrollWrapper класс 'has-caption'
+                            scrollWrapper.classList.add('has-caption');
+                    }
+
+                    // Получаем первую строку таблицы
+                    const firstRow = table.querySelector('tr');
+                    // Подсчитываем количество столбцов в первой строке
+                    const columnCount = firstRow ? firstRow.children.length : 0;
+
+                    // Если столбцов больше трех, добавляем класс 'large-table'
+                    if (columnCount > 3) {
+                            wrapper.classList.add('large-table');
+                    }
+            }
+        });
+    }
+
+    // FAQ Accordion
+    const faqItems = document.querySelectorAll('.faq__item');
+
+    if (faqItems) {
+        faqItems.forEach(item => {
+            const question = item.querySelector('.faq__question');
+            const answer = item.querySelector('.faq__answer');
+
+            if (question && answer) {
+                question.addEventListener('click', function() {
+                    // Закрываем все остальные FAQ
+                    faqItems.forEach(otherItem => {
+                        if (otherItem !== item) {
+                            otherItem.classList.remove('active');
+                            const otherAnswer = otherItem.querySelector('.faq__answer');
+                            if (otherAnswer) {
+                                otherAnswer.style.maxHeight = null;
+                            }
+                        }
+                    });
+
+                    // Переключаем текущий FAQ
+                    item.classList.toggle('active');
+
+                    if (item.classList.contains('active')) {
+                        answer.style.maxHeight = answer.scrollHeight + 'px';
+                    } else {
+                        answer.style.maxHeight = null;
+                    }
+                });
+            }
+        });
+    }
+
+    // Table of Contents toggle
+    const toc = document.querySelector('.toc');
+    const tocHeader = document.querySelector('.toc__header');
+    const tocContent = document.querySelector('.toc__content');
+
+    if (toc && tocHeader && tocContent) {
+        tocHeader.addEventListener('click', function() {
+            toc.classList.toggle('active');
+
+            if (toc.classList.contains('active')) {
+                tocContent.style.maxHeight = tocContent.scrollHeight + 'px';
+            } else {
+                tocContent.style.maxHeight = null;
+            }
+        });
+    }
+
+    // Table of Contents smooth scroll
+    const tocLinks = document.querySelectorAll('.toc__link');
+
+    if (tocLinks) {
+        tocLinks.forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
 });

resources/sass/base/_typography.scss

@@ -139,20 +139,26 @@ h1, h2, h3, h4, h5, h6{
  // блок врапер для скролла таблицы
  .table-wrapper-scroll{
 	 margin:30px 0;
+	 background: var(--table-bg-color);
+	 border: 1px solid var(--content-border-color);
+	 border-radius: 9px;
+	 overflow: hidden;
 	 @include mobile-sm{
-		 background:none;
-		 border-radius:0;
-		 padding-bottom:8px;
 		 overflow-x: auto;
 		 margin:20px 0;
 		 &::-webkit-scrollbar {
-			 height: 4px;
+			 height: 6px;
 		 }
 		 &::-webkit-scrollbar-track {
-			 background:transparent;
+			 background: var(--table-bg-color);
+			 border-radius: 9px;
 		 }
 		 &::-webkit-scrollbar-thumb {
-			 background:var(--scrollbar-color);
+			 background: var(--content-border-color);
+			 border-radius: 9px;
+			 &:hover {
+				 background: var(--accent-color);
+			 }
 		 }
 	 }
 	//  &.has-caption{
@@ -162,7 +168,6 @@ h1, h2, h3, h4, h5, h6{
 
  // дополнительный блок врапер для стилизации таблицы (border-radius gradient)
  .table-wrapper{
-	 background: #E0E5EF;
 	 //padding:1px;
 	 border-radius:9px;
 	 &.large-table{
@@ -170,10 +175,6 @@ h1, h2, h3, h4, h5, h6{
 				width:640px;
 			}
 	 }
-	 table{
-		 margin:0;
-		 padding:0;
-	 }
  }
 
  // стили таблицы по умолчанию
@@ -186,8 +187,7 @@ table{
 	 border-collapse: collapse;
 	 border-radius:9px;
 	 overflow:hidden;
-	 border: 1px solid var(--Solid-Black-10, rgba(2, 0, 5, 0.10));
-
+	 background: var(--table-bg-color);
 	 thead{
 		 th, td{
 			 padding:12px;
@@ -197,7 +197,8 @@ table{
 			 font-weight: 600;
 			 line-height:1.2em;
 			 vertical-align: middle;
-			 background:transparent;
+			 background: var(--table-header-color);
+			 border: 1px solid var(--content-border-color);
 			 @include mobile-sm{
 				 vertical-align: middle;
 				 font-size:13px;
@@ -214,6 +215,8 @@ table{
 			 font-weight: 600;
 			 line-height:1.2em;
 			 vertical-align: middle;
+			 background: var(--table-header-color);
+			 border: 1px solid var(--content-border-color);
 			 @include mobile-sm{
 				 vertical-align: middle;
 				 font-size:13px;
@@ -223,15 +226,20 @@ table{
     &:has(th){
             overflow:hidden;
             height: auto !important;
-            //background:transparent;
-            background: #E0E5EF;
         }
      }
 	 tbody{
+		 tr{
+			 border: 1px solid var(--content-border-color);
+			 &:nth-child(even){
+				 background: rgba(var(--table-header-color-rgb, 42, 42, 42), 0.3);
+			 }
+		 }
 		 td{
 			 padding:12px;
 			 vertical-align: middle;
 			 word-wrap: break-word;
+			 border: 1px solid var(--content-border-color);
 			 @include tablet{
 				 font-size: 14px;
 				 font-style: normal;

resources/sass/components/_author.scss

@@ -1,12 +1,12 @@
 .author {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 24px;
     border-radius: 8px;
     &__img {
         flex-shrink: 0;
-        width: 40px;
-        height: 40px;
+        width: 100px;
+        height: 100px;
         border-radius: 50%;
         overflow: hidden;
 
@@ -20,7 +20,7 @@
     &__info {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: 16px;
     }
 
     &__name {
@@ -28,7 +28,24 @@
         font-weight: 600;
     }
 
-    &__date {
-        font-size: 12px;
+    &__name-header{
+        display:flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__name-n{
+        color: var(--text-color);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 18px; /* 112.5% */
+    }
+    &__name-v{
+        color: var(--accent-color);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 18px; /* 100% */
     }
 }

resources/sass/components/_faq.scss

@@ -27,7 +27,6 @@
             }
 
             .faq__answer {
-                max-height: 500px;
                 opacity: 1;
             }
         }
@@ -39,8 +38,9 @@
         position: relative;
         user-select: none;
         transition: background-color 0.2s ease;
-
-        
+        display: flex;
+        align-items: center;
+        gap: 16px;
 
         h3 {
             margin: 0;
@@ -72,6 +72,31 @@
         }
     }
 
+    &__number {
+        display: flex;
+        width: 32px;
+        height: 32px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        aspect-ratio: 1/1;
+        font-weight: 600;
+        background-color: var(--accent-color);
+        color: var(--text-color);
+        min-width: 32px;
+        flex-shrink: 0;
+        border-radius:50%;
+    }
+
+    &__question-title {
+        flex: 1;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        color: var(--text-color);
+    }
+
     &__answer {
         max-height: 0;
         opacity: 0;

resources/sass/components/_slot-item.scss

@@ -0,0 +1,83 @@
+.slot-item{
+	overflow: hidden;
+	position: relative;
+	padding-top: 52%;
+	border-radius: 16px;
+	background-color:var(--body-bg-color);
+	border: 1px solid var(--content-border-color);
+	box-shadow: 0 2px 44px 0 rgba(188, 188, 188, 0.15);
+	&__inner{
+		position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    height: calc(100% - 45px);
+	}
+	&__thumbnail{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+		img{
+			display:block;
+			width:100%;
+			height:100%;
+			object-fit: cover;
+		}
+	}
+	&__title{
+		height:45px;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		padding: 12px;
+		gap:8px;
+	}
+	&__title-txt{
+		color: var(--text-color);
+		text-align: center;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 26px; /* 162.5% */
+	}
+	&__provider{
+		border-radius: 8px;
+		background-color:var(--body-bg-color);
+		backdrop-filter: blur(17px);
+		position:absolute;
+		top:12px;
+		right:12px;
+		padding:  8px;
+	}
+	&__rtp{
+		background-color:var(--accent-color);
+		display: flex;
+		height: 24px;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 4px;
+		position:absolute;
+		bottom:12px;
+		right:12px;
+		color: var(--text-color);
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 700;
+		line-height: 14px; /* 116.667% */
+		border-radius:5px;
+	}
+	&__icon{
+		width:18px;
+		height:18px;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		svg{
+			fill:var(--link-color);
+		}
+	}
+}

resources/sass/components/_toc.scss

@@ -63,6 +63,10 @@
         padding: 0 24px 24px 24px;
         counter-reset: toc-counter;
 
+        @include mobile{
+            padding: 0 16px 16px 16px;
+        }
+
         // Вложенный список (второй уровень) - с маркерами
         &--nested {
             padding: 8px 0 0 28px;

resources/sass/styles.scss

@@ -15,6 +15,7 @@
 @import 'components/author';
 @import 'components/faq';
 @import 'components/toc';
+@import 'components/slot-item';
 
 body{
 	padding-top:70px;
@@ -64,10 +65,14 @@ body{
 	flex-direction: column;
 	gap:32px;
 	width:100%;
-	@include mobile{
+	@include tablet{
 		gap:24px;
 		padding:24px 0;
 	}
+	@include mobile{
+		gap:16px;
+		padding:16px 0;
+	}
 }
 
 .section{
@@ -75,9 +80,15 @@ body{
 	border-radius: 16px;
 	border: 1px solid var(--content-border-color);
 	background: var(--content-bg-color);
-	@include mobile{
+	@include tablet{
 		padding:24px;
 	}
+	@include mobile{
+		padding:16px;
+	}
+	&__title{
+		 margin-top:0;
+	}
 }
 
 // Links
@@ -371,3 +382,16 @@ caption {
         cursor:pointer;
 	}
 }
+
+
+.slots-grid{
+	display:grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap:8px;
+	@include tablet{
+		grid-template-columns: repeat(3, 1fr);
+	}
+	@include mobile{
+		grid-template-columns: repeat(2, 1fr);
+	}
+}

resources/view/home.php

@@ -1,13 +1,5 @@
 <?php
 
-$settingsContent = settings('content')->getAll();
-
-// Декодируем banner-logo из JSON
-$bannerLogo = [];
-if (isset($settingsContent['banner-logo']) && !empty($settingsContent['banner-logo'])) {
-    $bannerLogo = json_decode($settingsContent['banner-logo'], true) ?: [];
-}
-
 ob_start();
 
 ?>
@@ -71,39 +63,38 @@ ob_start();
     </div>
 
     <section class="section text">
-        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
-        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
+        <?= $topContent ?>
         <div class="btn-wrapper">
             <button class="btn btn--accent">Click Here to Learn More</button>
         </div>
     </section>
+    <section class="section">
+        <h2 class="section__title">List slots</h2>
+
+        <div class="slots-grid">
+            <?php foreach($slots as $slot){ ?>
+                <div class="slot-item">
+                    <div class="slot-item__inner">
+                        <div class="slot-item__thumbnail"><img src="<?=  $slot['image'] ?>" alt=""></div>
+                        <div class="slot-item__provider"><?=  $slot['provider'] ?></div>
+                        <div class="slot-item__rtp">RTP: <?=  $slot['rtp'] ?></div>
+                    </div>
+                    <div class="slot-item__title">
+                        <span class="slot-item__title-txt"><?=  $slot['name'] ?></span>
+                        <span class="slot-item__icon">
+                            <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 19 19" >
+                                <path d="M6.55372 5.82431C6.55379 5.39309 6.90345 5.04348 7.33466 5.04338L12.6975 5.04338C13.1287 5.04345 13.4784 5.39307 13.4784 5.82431L13.4784 11.1871C13.4783 11.6183 13.1287 11.968 12.6975 11.9681C12.2662 11.9681 11.9167 11.6184 11.9165 11.1871V7.70977L6.37666 13.2497C6.07165 13.5547 5.57714 13.5547 5.27213 13.2497C4.96712 12.9447 4.96712 12.4501 5.27213 12.1451L10.812 6.60525L7.33466 6.60525C6.9034 6.60514 6.55372 6.25559 6.55372 5.82431Z"/>
+                                <path d="M13.3333 16.6667V18.3333H5V16.6667H13.3333ZM16.6667 13.3333V5C16.6667 3.15905 15.1743 1.66667 13.3333 1.66667H5C3.15905 1.66667 1.66667 3.15905 1.66667 5V13.3333C1.66667 15.1743 3.15905 16.6667 5 16.6667V18.3333L4.74284 18.3268C2.1861 18.1973 0.136042 16.1472 0.00651042 13.5905L0 13.3333V5C0 2.32482 2.10092 0.140357 4.74284 0.00651042L5 0H13.3333L13.5905 0.00651042C16.2324 0.140357 18.3333 2.32482 18.3333 5V13.3333L18.3268 13.5905C18.1973 16.1472 16.1472 18.1973 13.5905 18.3268L13.3333 18.3333V16.6667C15.1743 16.6667 16.6667 15.1743 16.6667 13.3333Z" />
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+            <?php  } ?>
+        </div>
+
+    </section>
     <section class="section text">
-        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
-        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-            accusamus eos doloremque, a quam dolorum culpa, aliquid
-            deserunt impedit ex possimus illo.</p>
+        <?=  $pageContent  ?>
         <div class="btn-wrapper">
             <button class="btn btn--accent">Get Started Now</button>
         </div>
@@ -111,65 +102,51 @@ ob_start();
 
 
     <!-- FAQ Section -->
-    <section class="section">
-        <h2 class="faq__title">Frequently Asked Questions</h2>
-        <div class="faq">
-            <div class="faq__item">
-                <div class="faq__question">
-                    <div class="faq__question-title">What is your refund policy?</div>
-                </div>
-                <div class="faq__answer">
-                    <div class="faq__answer-inner">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    <?php if (!empty($faqItems)): ?>
+        <section class="section">
+            <h2 class="faq__title"><?= htmlspecialchars($faqItems[0]['title'] ?? 'Frequently Asked Questions') ?></h2>
+            <div class="faq">
+                <?php
+                $faqData = $faqItems[0]['extra_fields'] ?? [];
+                foreach ($faqData as $index => $faq):
+                ?>
+                    <div class="faq__item">
+                        <div class="faq__question">
+                            <span class="faq__number"><?= $index + 1 ?></span>
+                            <div class="faq__question-title"><?= htmlspecialchars($faq['question'] ?? '') ?></div>
+                        </div>
+                        <div class="faq__answer">
+                            <div class="faq__answer-inner">
+                                <?= $faq['answer'] ?? '' ?>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                <?php endforeach; ?>
             </div>
-
-            <div class="faq__item">
-                <div class="faq__question">
-                    <div class="faq__question-title">How long does shipping take?</div>
-                </div>
-                <div class="faq__answer">
-                    <div class="faq__answer-inner">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="faq__item">
-                <div class="faq__question">
-                    <div class="faq__question-title">Do you offer customer support?</div>
-                </div>
-                <div class="faq__answer">
-                    <div class="faq__answer-inner">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="faq__item">
-                <div class="faq__question">
-                    <div class="faq__question-title">Can I change my order after placing it?</div>
-                </div>
-                <div class="faq__answer">
-                    <div class="faq__answer-inner">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+        </section>
+    <?php endif; ?>
 
 
-    <?php if (!empty($settingsContent['author-img'])): ?>
-        <section class=" section">
+    <?php if (!empty($author)): ?>
+        <section class="section">
             <div class="author">
                 <div class="author__img">
-                    <img src="<?= htmlspecialchars($settingsContent['author-img']) ?>" alt="<?= htmlspecialchars($settingsContent['author-name'] ?? '') ?>" title="<?= htmlspecialchars($settingsContent['author-name'] ?? '') ?>">
+                    <img src="/<?= htmlspecialchars($author['image']) ?>" alt="<?= htmlspecialchars($author['name'] ?? '') ?>" title="<?= htmlspecialchars($author['name'] ?? '') ?>">
                 </div>
                 <div class="author__info">
-                    <div class="author__name"><?= htmlspecialchars($settingsContent['author-name'] ?? '') ?></div>
-                    <div class="author__date"><?= $settingsContent['modified-date'] ?? '' ?></div>
+                    <div class="author__name-header">
+                        <div class="author__name">
+                            <span class="author__name-n">Autore:</span>
+                            <span class="author__name-v"><?= htmlspecialchars($author['name'] ?? '') ?></span>
+                        </div>
+                        <div class="author__date">
+                            <span class="author__date-name">Last updated:</span>
+                            <span class="author__date-name"><?= date('M d, Y', strtotime($author['updated_at'])) ?></span>
+                        </div>
+                    </div>
+                    <?php if (!empty($author['description'])): ?>
+                        <div class="author__description"><?= htmlspecialchars($author['description']) ?></div>
+                    <?php endif; ?>
                 </div>
             </div>
         </section>
@@ -178,67 +155,6 @@ ob_start();
 </div>
 
 
-<!-- <section>
-    <div class="container">
-        <h1 class="main__title"><?= $content['title'] ?></h1>
-        <div class="main__banner">
-            <?php if (!empty($bannerLogo['src'])): ?>
-                <img class="redirect-js"
-                    width="<?= $bannerLogo['width'] ?? '' ?>"
-                    height="<?= $bannerLogo['height'] ?? '' ?>"
-                    src="<?= htmlspecialchars($bannerLogo['src']) ?>"
-                    alt="<?= $bannerLogo['alt'] ?? '' ?>"
-                    title="<?= $bannerLogo['title'] ?? '' ?>">
-            <?php endif; ?>
-        </div>
-        <div class="container">
-            <?php if (!empty($content['author-img'])): ?>
-                <div class="author">
-                    <div class="author__img">
-                        <img width="" height="" src="<?= htmlspecialchars($content['author-img']) ?>" alt="<?= htmlspecialchars($content['author-name'] ?? '') ?>" title="<?= htmlspecialchars($content['author-name'] ?? '') ?>">
-                    </div>
-                    <div class="author__info">
-                        <div class="author__name"><?= htmlspecialchars($content['author-name'] ?? '') ?></div>
-                        <div class="author__date"> <?= $content['modified-date'] ?? '' ?></div>
-                    </div>
-                </div>
-            <?php endif; ?>
-            <div class="main__text">
-                <?= $content['top_text'] ?>
-            </div>
-            <?php if (empty($content['hide-btns'])): ?>
-                <div class="pulse__btn main__btn accent-color pass-btn-color redirect-js"><?= $content['content_btn'] ?></div>
-            <?php endif; ?>
-        </div>
-</section>
-<section>
-    <div class="container">
-        <div class="secondary__text">
-            <?= htmlspecialchars_decode($content['bottom_text']); ?>
-        </div>
-    </div>
-</section>
-<section>
-    <div class="container">
-        <h2><?= $content['faq-title'] ?? '' ?></h2>
-        <div class="accordion-container">
-            <?php foreach ($faqItems as $item): ?>
-                <div class="accordion-item">
-                    <h3 class="accordion-header faq-title-hover-font-color secondary-color faq-title-font-color">
-                        <?= htmlspecialchars($item['question']) ?>
-                        <span class="icon  faq-title-hover-font-color faq-title-font-color">+</span>
-                    </h3>
-                    <div class="accordion-content secondary-color faq-title-font-color">
-                        <p>
-                            <?= htmlspecialchars($item['answer']) ?>
-                        </p>
-                    </div>
-                </div>
-            <?php endforeach; ?>
-        </div>
-    </div>
-</section> -->
-
 <?php
 $pageContent = ob_get_clean();
 include __DIR__ . '/layouts/main.php';

src/Pages/page.php

@@ -2,13 +2,17 @@
 
 use App\Settings;
 use App\Models\Page;
+use App\Models\Slot;
 use App\Models\SeoMeta;
 use App\Models\Faq;
+use App\Models\Author;
 
 // Получение страницы по slug
 $pageModel = new Page();
 $seoMetaModel = new SeoMeta();
 $faqModel = new Faq();
+$authorModel = new Author();
+$slotModel = new Slot();
 
 // Получаем slug из URL
 $slug = $slug ?? $_GET['slug'] ?? '';
@@ -34,11 +38,17 @@ $content = (new Settings('content'))->getAll();
 // Получаем SEO данные для страницы
 $seo = $seoMetaModel->getForRecord('page', $currentPage['id']) ?: [];
 
+// Декодируем extra_fields
+$extraFields = [];
+if (!empty($currentPage['extra_fields'])) {
+    $extraFields = json_decode($currentPage['extra_fields'], true) ?: [];
+}
+
 // Контент страницы
 $pageContent = $currentPage['content'] ?? '';
 
-// Получаем топ контент если есть
-$topContent = $currentPage['top_content'] ?? '';
+// Получаем топ контент из extra_fields
+$topContent = $extraFields['top_content'] ?? '';
 
 // Получаем FAQ для этой страницы
 $faqItems = $faqModel->getByMorphable('page', $currentPage['id']);
@@ -62,6 +72,7 @@ $isSearchBot = $isGoogleBot || $isBingBot;
 $layout = \App\Enums\PageLayout::tryFrom($currentPage['layout'] ?? 'default') ?? \App\Enums\PageLayout::Default;
 $layoutFile = $layout->viewPath();
 
+
 return ViewRender($layoutFile, [
     'content' => $content,
     'seo' => $seo,
@@ -73,5 +84,7 @@ return ViewRender($layoutFile, [
     'currentUrl' => $currentUrl,
     'isHomepage' => !empty($currentPage['is_homepage']),
     'isSearchBot' => $isSearchBot,
+    'author' => $authorModel->getAll()[0],
+    'slots' => $slotModel->getAll(),
     'userIp' => $ip,
 ]);