Merge branch 'main' of git.slotsspot.com:sark/new-templane

public/css/styles.css

@@ -38,56 +38,31 @@ html {
   --text-color: rgba(2, 0, 5, 0.80);
   --fz-default: 16px;
   --lh-default: 24px;
-  --h1: 44px;
-  --h2: 24px;
-  --h3: 20px;
-  --h4: 18px;
-  --l: 20px;
-  --m: 16px;
-  --s: 14px;
+  --h1: 24px;
+  --h2: 20px;
+  --h3: 18px;
+  --h4: 16px;
 }
 @media (max-width: 1199px) {
   :root {
     --container-width: 1199px;
     --fz-default: 16px;
     --lh-default: 26px;
-    --h1: 28px;
-    --h2: 20px;
-    --h3: 18px;
-    --h4: 16px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
-    --sp: 32px 0;
+    --h1: 22px;
+    --h2: 18px;
+    --h3: 16px;
+    --h4: 14px;
   }
 }
 @media (max-width: 768px) {
   :root {
     --container-width: 768px;
-    --fz-default: 16px;
-    --lh-default: 26px;
-    --h1: 28px;
-    --h2: 20px;
-    --h3: 18px;
-    --h4: 16px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
-    --sp: 32px 0;
-  }
-}
-@media (max-width: 575px) {
-  :root {
-    --container-width: 575px;
-    --fz-default: 16px;
-    --lh-default: 26px;
-    --h1: 24px;
+    --fz-default: 14px;
+    --lh-default: 20px;
+    --h1: 22px;
     --h2: 18px;
     --h3: 16px;
     --h4: 14px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
   }
 }
 
@@ -106,7 +81,6 @@ body {
   min-width: 360px;
   color: var(--text-color);
   position: relative;
-  background-color: #FFF;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -118,6 +92,7 @@ h1 {
   font-weight: 600;
   font-size: var(--h1);
   line-height: 106%;
+  text-transform: uppercase;
 }
 
 h2 {
@@ -125,6 +100,7 @@ h2 {
   font-weight: 600;
   font-size: var(--h2);
   line-height: 125%;
+  text-transform: uppercase;
 }
 
 h3 {
@@ -213,6 +189,122 @@ h1, h2, h3, h4, h5, h6 {
 .text ol {
   list-style: decimal;
 }
+.text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+.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 {
+    overflow-x: auto;
+    margin: 20px 0;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar {
+    height: 6px;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-track {
+    background: var(--table-bg-color);
+    border-radius: 9px;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-thumb {
+    background: var(--content-border-color);
+    border-radius: 9px;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-color);
+  }
+}
+.text .table-wrapper {
+  border-radius: 9px;
+}
+@media (max-width: 575px) {
+  .text .table-wrapper.large-table {
+    width: 640px;
+  }
+}
+.text table {
+  margin: 0;
+  position: relative;
+  width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+  border-radius: 9px;
+  overflow: hidden;
+  background: var(--table-bg-color);
+}
+.text table thead th, .text table thead td {
+  padding: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  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 thead th, .text table thead td {
+    vertical-align: middle;
+    font-size: 13px;
+    padding: 8px;
+  }
+}
+.text table tr:first-child th {
+  padding: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  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 {
+    vertical-align: middle;
+    font-size: 13px;
+    padding: 8px;
+  }
+}
+.text table tr:first-child:has(th) {
+  overflow: hidden;
+  height: auto !important;
+}
+.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 {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media (max-width: 575px) {
+  .text table tbody td {
+    font-size: 13px;
+    padding: 8px;
+  }
+}
 
 .header {
   position: fixed;
@@ -221,6 +313,7 @@ h1, h2, h3, h4, h5, h6 {
   left: 0;
   height: 70px;
   z-index: 1000;
+  background: var(--header-color);
 }
 .header .container {
   display: flex;
@@ -305,6 +398,11 @@ h1, h2, h3, h4, h5, h6 {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.header__btn--secondary {
+  border: 1px solid var(--accent-color);
+  background: var(--accent-color);
+  color: #fff;
+}
 .header__btn--secondary:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -328,6 +426,7 @@ h1, h2, h3, h4, h5, h6 {
 .header__burger-line {
   width: 100%;
   height: 3px;
+  background: #fff;
   border-radius: 2px;
   transition: all 0.3s ease;
 }
@@ -374,19 +473,35 @@ h1, h2, h3, h4, h5, h6 {
     transition: transform 0.3s ease;
     padding: 40px 20px;
     overflow-y: auto;
-    backdrop-filter: blur(10px);
   }
+}
+@media (max-width: 768px) and (max-width: 768px) {
+  .header__nav {
+    background: var(--body-bg-color);
+  }
+}
+@media (max-width: 768px) {
   .header__nav.active {
     transform: translateX(0);
   }
   .header__menu {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    width: 100%;
     gap: 24px;
   }
   .header__menu-link {
     font-size: 18px;
   }
+}
+@media (max-width: 768px) and (max-width: 768px) {
+  .header__menu-link {
+    font-size: 16px;
+    background: var(--body-bg-color);
+    color: var(--text-color);
+  }
+}
+@media (max-width: 768px) {
   .header__actions {
     gap: 8px;
   }
@@ -400,50 +515,568 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.container {
-  max-width: var(--container-width);
+.footer {
+  background: var(--footer-bg-color);
+  display: flex;
+  gap: 32px;
+  padding: 48px 0;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text-color);
+}
+@media (max-width: 768px) {
+  .footer {
+    gap: 24px;
+    padding: 32px 0;
+  }
+}
+.footer__content-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 60px;
+  align-self: stretch;
+}
+@media (max-width: 768px) {
+  .footer__content-inner {
+    gap: 20px;
+    flex-direction: column;
+  }
+}
+.footer__text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+@media (max-width: 768px) {
+  .footer__text {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+.footer__logo {
+  width: 210px;
+  height: 48px;
+}
+@media (max-width: 768px) {
+  .footer__logo {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.footer__logo img {
+  width: 190px;
+  height: 44px;
+  display: block;
+  cursor: pointer;
+  -o-object-fit: contain;
+  object-fit: contain;
+  transition: opacity 0.3s ease;
+}
+.footer__bottom-imgs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  align-self: stretch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.footer__bottom-imgs img {
+  opacity: 0.4;
+}
+@media (max-width: 768px) {
+  .footer__bottom-imgs {
+    gap: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.footer__menu-list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .footer__menu-list {
+    gap: 16px;
+  }
+}
+.footer__menu-item {
+  list-style: none;
+}
+.footer__menu-link {
+  color: var(--Main-White, #FFF);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+.footer__menu-link:hover {
+  color: #fff;
+  opacity: 0.9;
+}
+.footer__copyright {
+  color: var(--Main-White, #FFF);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.btn-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+@media (max-width: 768px) {
+  .btn {
+    font-size: 14px;
+    padding: 12px 24px;
+  }
+}
+.btn--accent {
+  background: var(--accent-color);
+  color: #fff;
+}
+.btn--accent:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0.9;
+}
+.btn--accent:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  border-radius: 8px;
+}
+@media (max-width: 768px) {
+  .author {
+    gap: 16px;
+    flex-direction: column;
+  }
+}
+.author__img {
+  flex-shrink: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .author__img {
+    width: 60px;
+    height: 60px;
+  }
+}
+.author__img img {
   width: 100%;
   height: 100%;
-  margin: 0 auto;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.author__info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.author__name {
+  font-size: 14px;
+  font-weight: 600;
+}
+.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% */
+}
+@media (max-width: 768px) {
+  .author__name-n {
+    font-size: 14px;
+  }
+}
+.author__name-v {
+  color: var(--accent-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px; /* 100% */
+}
+@media (max-width: 768px) {
+  .author__name-v {
+    font-size: 16px;
+  }
+}
+
+.faq {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.faq__title {
+  margin: 0;
+  margin-bottom: 24px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+.faq__item {
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+}
+.faq__item.active .faq__question::after {
+  transform: rotate(45deg);
+}
+.faq__item.active .faq__question::before {
+  transform: rotate(-45deg);
+}
+.faq__item.active .faq__answer {
+  opacity: 1;
+}
+.faq__question {
+  padding: 20px 56px 20px 24px;
+  cursor: pointer;
   position: relative;
-  padding: 0 16px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  transition: background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+@media (max-width: 768px) {
+  .faq__question {
+    padding: 16px 56px 16px 16px;
+  }
+}
+.faq__question h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--text-color);
+}
+.faq__question::before, .faq__question::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 16px;
+  height: 2px;
+  background-color: var(--text-color);
+  transition: transform 0.3s ease;
+}
+.faq__question::before {
+  transform: translateY(-50%);
+}
+.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);
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+@media (max-width: 768px) {
+  .faq__number {
+    width: 26px;
+    height: 26px;
+  }
+}
+.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;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border-top: 1px dashed var(--content-border-color);
+}
+.faq__answer p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--text-color);
+  opacity: 0.8;
+}
+.faq__answer-inner {
+  padding: 24px;
 }
 
-button.accent-color {
-  transition: filter 0.3s ease;
+.toc {
+  border-radius: 12px;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+  overflow: hidden;
+}
+.toc__header {
+  padding: 20px 56px 20px 24px;
+  cursor: pointer;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+.toc__header:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.toc__header::before, .toc__header::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 16px;
+  height: 2px;
+  background-color: var(--text-color);
+  transition: transform 0.3s ease;
+}
+.toc__header::before {
+  transform: translateY(-50%) rotate(90deg);
+}
+.toc__header::after {
+  transform: translateY(-50%);
+}
+.toc__title {
+  margin: 0;
+  color: var(--Main-Back, #000);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-transform: uppercase;
+  color: var(--text-color);
+}
+@media (max-width: 768px) {
+  .toc__title {
+    font-size: 16px;
+  }
+}
+.toc__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.toc__list {
+  list-style: none;
+  margin: 0;
+  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;
+  padding-left: 40px;
+}
+.toc__item {
+  margin-bottom: 8px;
+  position: relative;
+}
+.toc__item:last-child {
+  margin-bottom: 0;
+}
+.toc__item > .toc__link::before {
+  counter-increment: toc-counter;
+  content: counter(toc-counter) ". ";
+  font-weight: 600;
+  margin-right: 4px;
+}
+.toc__list--nested > .toc__item > .toc__link::before {
+  content: none;
+}
+.toc__link {
+  display: block;
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
 }
-button.accent-color:hover {
-  filter: brightness(0.85);
+.toc__link:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: var(--link-color);
+}
+.toc__list--nested > .toc__item > .toc__link {
+  font-size: 13px;
+  padding-left: 8px;
+}
+.toc.active .toc__header::before {
+  transform: translateY(-50%) rotate(45deg);
+}
+.toc.active .toc__header::after {
+  transform: translateY(-50%) rotate(-45deg);
+}
+.toc.active .toc__content {
+  max-height: 1000px;
 }
 
-.main__btn {
+.slot-item {
+  overflow: hidden;
   position: relative;
-  margin: auto;
+  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;
 }
-.main__btn a {
+.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;
-  height: 100%;
-  width: 100%;
 }
-.bottom-btn {
-  margin: auto;
-  width: 200px;
-  background: #c30054;
+.slot-item__icon svg {
+  fill: var(--link-color);
 }
 
 body {
-  background: #fff !important;
   padding-top: 70px;
-  color: #000;
+  background-color: var(--body-bg-color);
+  color: var(--text-color);
   font-style: normal;
   font-weight: 400;
   line-height: 24px; /* 150% */
 }
+body.menu-open {
+  overflow: hidden;
+}
+
+.container {
+  max-width: var(--container-width);
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
 
 .banner {
   background: #000;
@@ -453,6 +1086,8 @@ body {
 }
 .banner__img-wrp {
   max-width: 1920px;
+  max-height: 540px;
+  overflow: hidden;
   margin: 0 auto;
 }
 .banner__img {
@@ -470,16 +1105,359 @@ body {
   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;
   border-radius: 16px;
-  border: 1px solid #E4E4E4;
-  background: #F6F6F6;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+}
+@media (max-width: 1199px) {
+  .section {
+    padding: 24px;
+  }
+}
+@media (max-width: 768px) {
+  .section {
+    padding: 16px;
+  }
+}
+.section__title {
+  margin-top: 0;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+a:hover {
+  opacity: 0.8;
+}
+
+table {
+  background: var(--table-bg-color);
+  color: var(--text-color);
+}
+
+th,
+thead,
+table thead tr {
+  background-color: var(--table-header-color);
+  color: var(--text-color);
+}
+
+caption {
+  background: var(--table-header-color);
+  color: var(--text-color);
+}
+
+.game-item {
+  border-radius: var(--border-radius-main);
+  overflow: hidden;
+  position: relative;
+  padding-top: 52%;
+  box-shadow: 0px 2px 44px 0px rgba(188, 188, 188, 0.15);
+  background: #fff;
+}
+@media (max-width: 768px) {
+  .game-item {
+    padding-top: 60%;
+    border-radius: 12px;
+    box-shadow: 0px 1.4px 30.803px 0px rgba(188, 188, 188, 0.15);
+  }
+}
+.game-item__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  height: calc(100% - 45px);
+}
+@media (max-width: 768px) {
+  .game-item__inner {
+    height: calc(100% - 40px);
+  }
+}
+.game-item__inner:hover .game-item__hover {
+  opacity: 1;
+  visibility: visible;
+}
+.game-item__title {
+  color: rgba(2, 0, 5, 0.8);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.1em;
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  position: relative;
+  padding: 0 12px;
+}
+@media (max-width: 1199px) {
+  .game-item__title {
+    font-size: 14px;
+  }
+}
+@media (max-width: 768px) {
+  .game-item__title {
+    font-size: 12px;
+    height: 40px;
+  }
+}
+.game-item__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none !important;
+  color: rgba(2, 0, 5, 0.8) !important;
+}
+@media (max-width: 768px) {
+  .game-item__link {
+    gap: 4px;
+  }
+}
+.game-item__link:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.game-item__link:hover {
+  color: var(--color-theme-red) !important;
+}
+.game-item__link:hover .icon {
+  fill: url("#icon-gradient-red");
+}
+.game-item__link .icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  fill: #0076CC;
+}
+@media (max-width: 768px) {
+  .game-item__link .icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+.game-item__link-text {
+  display: inline-flex;
+  align-items: center;
+}
+.game-item__link-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: #0076CC;
+}
+.game-item__picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.game-item__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  transition: 0.3s ease-out;
+}
+.game-item__tags {
+  position: absolute;
+  top: 0;
+  left: 12px;
+  display: flex;
+}
+.game-item__tagsItm {
+  margin-right: 8px;
+  border-radius: 0px 0px 8px 8px;
+  background: linear-gradient(90deg, #2D2BA7 0%, #BA73D1 100%);
+  text-transform: uppercase;
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .game-item__tagsItm {
+    border-radius: 0px 0px 5px 5px;
+  }
+}
+.game-item__tagsItm--hot {
+  background: #F5294D;
+}
+.game-item__tagsLink {
+  display: block;
+  color: #fff;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1em;
+}
+@media (max-width: 768px) {
+  .game-item__tagsLink {
+    padding: 3px 11px;
+    font-size: 9px;
+  }
+}
+.game-item__info {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+.game-item__provide {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  margin-right: 8px;
+}
+@media (max-width: 768px) {
+  .game-item__provide {
+    width: 24px;
+    height: 24px;
+    margin-right: 5px;
+  }
+}
+.game-item__provide .icon {
+  fill: #fff;
+}
+.game-item__rating {
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+@media (max-width: 768px) {
+  .game-item__rating {
+    width: 28px;
+    height: 28px;
+  }
+}
+.game-item__ratingVal {
+  font-size: 12px;
+}
+@media (max-width: 768px) {
+  .game-item__ratingVal {
+    font-size: 10px;
+  }
+}
+.game-item__rtp {
+  padding: 4px 8px;
+  background: linear-gradient(var(--gradient-theme-red));
+  border-radius: 8px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1em;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+.game-item__countPlay {
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1em;
+  font-weight: 600;
+  border-radius: 8px;
+  background: rgba(2, 0, 5, 0.8);
+  position: relative;
+  display: flex;
+  height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+}
+.game-item__countPlay .icon {
+  fill: #fff;
+}
+.game-item__countTxt {
+  padding-left: 5px;
+}
+.game-item__btn {
+  margin-top: 16px;
+  width: 100%;
+  max-width: 120px;
+}
+@media (max-width: 768px) {
+  .game-item__btn {
+    margin-top: 8px;
+    font-size: 12px;
+    padding: 8px 20px;
+    max-width: 100px;
+  }
+}
+.game-item__hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(2, 0, 5, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+  opacity: 0;
+  z-index: 1;
+  transition: 0.5s ease-out;
+  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

@@ -31,6 +31,118 @@ 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'
+                    });
+                }
+            });
+        });
+    }
 });
 
 //# sourceMappingURL=script.js.map

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/_mixins.scss

@@ -90,83 +90,3 @@
 	}
 }
 
-@mixin effectBox{
-		border-radius: var(--border-radius-main);
-		border: 1px solid rgba(120, 88, 173, 0.20);
-		background: rgba(147, 122, 189, 0.10);
-		backdrop-filter: blur(32px);
-		overflow:hidden;
-		position:relative;
-		&:before{
-			content:'';
-			width: 335px;
-			height: 141px;
-			position: absolute;
-			right: -25px;
-			top: -146px;
-			border-radius: 335px;
-			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #C570E3 85%);
-			filter: blur(60px);
-			transition: 0.3s ease-out;
-		}
-		&:after{
-			content:'';
-			width: 273px;
-			height: 136px;
-			position: absolute;
-			left: 0;
-			top: -110px;
-			background:#937ABD;
-			filter: blur(60px);
-			border-radius: 335px;
-			visibility: hidden;
-			opacity: 0;
-			transition: 0.6s ease-out;
-			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #937ABD 85%);
-
-		}
-		&:hover{
-			&:before{
-				opacity:0;
-			}
-			&:after{
-				content:'';
-				left: -69px;
-				top: -75px;
-				opacity: 0.8;
-				visibility: visible;
-			}
-		}
-
-}
-
-@mixin styleScrollH{
-	&::-webkit-scrollbar {
-		height: 3px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background:transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: rgba(177, 163, 199, 0.5);
-		border-radius:15px;
-		background:transparent;
-	}
-}
-
-@mixin styleScrollV{
-	&::-webkit-scrollbar {
-		width: 3px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background:transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: rgba(177, 163, 199, 0.5);
-		border-radius:15px;
-	}
-}

resources/sass/base/_typography.scss

@@ -15,8 +15,6 @@ body {
 	min-width: 360px;
 	color: var(--text-color);
 	position: relative;
-	//background-color: var(--bg);
-	background-color:#FFF;
 	scroll-behavior: smooth; // плавный скролл
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -29,6 +27,7 @@ h1 {
 	font-weight: 600;
 	font-size: var(--h1);
 	line-height: 106%;
+	text-transform: uppercase;
 }
 
 h2 {
@@ -36,6 +35,7 @@ h2 {
 	font-weight: 600;
 	font-size: var(--h2);
 	line-height: 125%;
+	text-transform: uppercase;
 }
 
 h3 {
@@ -129,4 +129,129 @@ h1, h2, h3, h4, h5, h6{
 	 list-style:decimal;
  }
 
+ img{
+	 max-width:100%;
+	 height:auto;
+	 border-radius: 12px;
+ }
+
+
+ // блок врапер для скролла таблицы
+ .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{
+		 overflow-x: auto;
+		 margin:20px 0;
+		 &::-webkit-scrollbar {
+			 height: 6px;
+		 }
+		 &::-webkit-scrollbar-track {
+			 background: var(--table-bg-color);
+			 border-radius: 9px;
+		 }
+		 &::-webkit-scrollbar-thumb {
+			 background: var(--content-border-color);
+			 border-radius: 9px;
+			 &:hover {
+				 background: var(--accent-color);
+			 }
+		 }
+	 }
+	//  &.has-caption{
+	// 	 padding-top:25px;
+	//  }
+ }
+
+ // дополнительный блок врапер для стилизации таблицы (border-radius gradient)
+ .table-wrapper{
+	 //padding:1px;
+	 border-radius:9px;
+	 &.large-table{
+			@include mobile-sm{
+				width:640px;
+			}
+	 }
+ }
+
+ // стили таблицы по умолчанию
+table{
+	 margin:0;
+	 position:relative;
+	 width:100%;
+	 //table-layout: fixed;
+	 table-layout: auto;
+	 border-collapse: collapse;
+	 border-radius:9px;
+	 overflow:hidden;
+	 background: var(--table-bg-color);
+	 thead{
+		 th, td{
+			 padding:12px;
+			 text-align: center;
+			 font-size: 16px;
+			 font-style: normal;
+			 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;
+				 padding:8px;
+			 }
+		 }
+	 }
+  tr:first-child{
+    th{
+			 padding:12px;
+			 text-align: center;
+			 font-size: 16px;
+			 font-style: normal;
+			 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;
+				 padding:8px;
+			 }
+		}
+    &:has(th){
+            overflow:hidden;
+            height: auto !important;
+        }
+     }
+	 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;
+				 font-weight: 400;
+				 line-height: 16px;
+			 }
+			 @include mobile-sm{
+				 font-size:13px;
+				 padding:8px;
+			 }
+		 }
+	 }
+ }
+
 }

resources/sass/base/_variables.scss

@@ -12,50 +12,27 @@
 	--fz-default: 16px; // default font size
 	--lh-default: 24px;// default line-height
 
-	--h1: 44px; // h1 font size
-	--h2: 24px; // h2 font size
-	--h3: 20px; // h3 font size
-	--h4: 18px; // h3 font size
-	--l: 20px; // large font size
-	--m: 16px; // medium font size
-	--s: 14px; // small font size
+	--h1: 24px; // h1 font size
+	--h2: 20px; // h2 font size
+	--h3: 18px; // h3 font size
+	--h4: 16px; // h3 font size
 
 	@include tablet {
 		--container-width: 1199px;
 		--fz-default: 16px; // default font size
 		--lh-default: 26px;// default line-height
-		--h1: 28px; // h1 font size
-		--h2: 20px; // h2 font size
-		--h3: 18px; // h3 font size
-		--h4: 16px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
-		--sp: 32px 0;
+		--h1: 22px; // h1 font size
+		--h2: 18px; // h2 font size
+		--h3: 16px; // h3 font size
+		--h4: 14px; // h3 font size
 	}
 	@include mobile{
 		--container-width: 768px;
-		--fz-default: 16px; // default font size
-		--lh-default: 26px;// default line-height
-		--h1: 28px; // h1 font size
-		--h2: 20px; // h2 font size
-		--h3: 18px; // h3 font size
-		--h4: 16px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
-		--sp: 32px 0;
-	}
-	@include mobile-sm {
-		--container-width: 575px;
-		--fz-default: 16px; // default font size
-		--lh-default: 26px;// default line-height
-		--h1: 24px; // h1 font size
+		--fz-default: 14px; // default font size
+		--lh-default: 20px;// default line-height
+		--h1: 22px; // h1 font size
 		--h2: 18px; // h2 font size
 		--h3: 16px; // h3 font size
 		--h4: 14px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
 	}
 }

resources/sass/components/_author.scss

@@ -0,0 +1,66 @@
+.author {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    border-radius: 8px;
+    @include mobile{
+        gap:16px;
+        flex-direction: column;
+    }
+    &__img {
+        flex-shrink: 0;
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        overflow: hidden;
+
+        @include mobile{
+            width:60px;
+            height:60px;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    &__name {
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &__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% */
+        @include mobile{
+            font-size:14px;
+        }
+    }
+    &__name-v{
+        color: var(--accent-color);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 18px; /* 100% */
+        @include mobile{
+            font-size:16px;
+        }
+    }
+}

resources/sass/components/_buttons.scss

@@ -1,38 +1,43 @@
 // Buttons
-button {
-    &.accent-color {
-        transition: filter 0.3s ease;
-
-        &:hover {
-            filter: brightness(0.85);
-        }
-    }
+.btn-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
 }
 
-.main__btn {
-    position: relative;
-    margin: auto;
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: none;
+
+    @include mobile{
+        font-size:14px;
+        padding:12px 24px;
+    }
 
-    a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        // color will be set dynamically
+    &--accent {
+        background: var(--accent-color);
+        color: #fff;
 
         &:hover {
-            // color will be set dynamically
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            opacity: 0.9;
         }
-    }
-}
 
-.bottom-btn {
-    margin: auto;
-    width: 200px;
-    background: #c30054;
+        &:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+    }
 }
 
-.pulse__btn {
-    // Pulse animation will be added if needed
-}

resources/sass/components/_faq.scss

@@ -0,0 +1,126 @@
+.faq {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &__title {
+        margin:0;
+        margin-bottom: 24px;
+        font-weight: 600;
+        color: var(--text-color);
+    }
+
+    &__item {
+        border-radius: 12px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        border: 1px solid var(--content-border-color);
+        background: var(--content-bg-color);
+
+        &.active {
+            .faq__question::after {
+                transform: rotate(45deg);
+            }
+
+            .faq__question::before {
+                transform: rotate(-45deg);
+            }
+
+            .faq__answer {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__question {
+        padding: 20px 56px 20px 24px;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        transition: background-color 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        @include mobile{
+            padding: 16px 56px 16px 16px;
+        }
+
+        h3 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 24px;
+            color: var(--text-color);
+        }
+
+        // Крестик с псевдоэлементами
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            right: 24px;
+            top: 50%;
+            width: 16px;
+            height: 2px;
+            background-color: var(--text-color);
+            transition: transform 0.3s ease;
+        }
+
+        &::before {
+            transform: translateY(-50%);
+        }
+
+        &::after {
+            transform: translateY(-50%) rotate(90deg);
+        }
+    }
+
+    &__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);
+        flex-shrink: 0;
+        border-radius:50%;
+        @include mobile{
+            width:26px;
+            height:26px;
+        }
+    }
+
+    &__question-title {
+        flex: 1;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        color: var(--text-color);
+    }
+
+    &__answer {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        border-top:1px dashed var(--content-border-color); 
+
+        p {
+            margin: 0;
+            font-size: 14px;
+            line-height: 22px;
+            color: var(--text-color);
+            opacity: 0.8;
+        }
+    }
+
+    &__answer-inner{
+        padding:  24px;
+    }
+}

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

@@ -0,0 +1,136 @@
+.toc {
+    border-radius: 12px;
+    border: 1px solid var(--content-border-color);
+    background: var(--content-bg-color);
+    overflow: hidden;
+
+    &__header {
+        padding: 20px 56px 20px 24px;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.02);
+        }
+
+        // Крестик с псевдоэлементами
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            right: 24px;
+            top: 50%;
+            width: 16px;
+            height: 2px;
+            background-color: var(--text-color);
+            transition: transform 0.3s ease;
+        }
+
+        &::before {
+            transform: translateY(-50%) rotate(90deg);
+        }
+
+        &::after {
+            transform: translateY(-50%);
+        }
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--Main-Back, #000);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-transform: uppercase;
+        color: var(--text-color);
+        @include mobile{
+            font-size:16px;
+        }
+    }
+
+    &__content {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0 24px 24px 24px;
+        counter-reset: toc-counter;
+
+        @include mobile{
+            padding: 0 16px 16px 16px;
+        }
+
+        // Вложенный список (второй уровень) - с маркерами
+        &--nested {
+            padding: 8px 0 0 28px;
+            list-style: disc;
+            padding-left: 40px;
+        }
+    }
+
+    &__item {
+        margin-bottom: 8px;
+        position: relative;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        // Нумерация только для первого уровня
+        > .toc__link::before {
+            counter-increment: toc-counter;
+            content: counter(toc-counter) ". ";
+            font-weight: 600;
+            margin-right: 4px;
+        }
+
+        // Убираем нумерацию для вложенного уровня
+        .toc__list--nested > & > .toc__link::before {
+            content: none;
+        }
+    }
+
+    &__link {
+        display: block;
+        color: var(--text-color);
+        text-decoration: none;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.03);
+            color: var(--link-color);
+        }
+
+        // Стили для вложенного уровня
+        .toc__list--nested > .toc__item > & {
+            font-size: 13px;
+            padding-left: 8px;
+        }
+    }
+
+    // Active state (открыто)
+    &.active {
+        .toc__header::before {
+            transform: translateY(-50%) rotate(45deg);
+        }
+
+        .toc__header::after {
+            transform: translateY(-50%) rotate(-45deg);
+        }
+
+        .toc__content {
+            max-height: 1000px;
+        }
+    }
+}

resources/sass/layout/_container.scss

@@ -1,12 +0,0 @@
-// Container
-.container {
-    max-width: var(--container-width);
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: 0 16px;
-}

resources/sass/layout/_footer.scss

@@ -1,4 +1,109 @@
 // Footer
 .footer {
-    // background will be set dynamically via PHP
+    background: var(--footer-bg-color);
+    display: flex;
+    gap:32px;
+    padding: 48px 0;
+    flex-direction: column;
+    align-items: center;
+    color: var(--text-color);
+    @include mobile{
+        gap: 24px;
+        padding: 32px 0;
+    }
+    &__content-inner{
+        display: flex;
+        align-items: flex-start;
+        gap: 60px;
+        align-self: stretch;
+        @include mobile{
+            gap: 20px;
+            flex-direction: column;
+        }
+    }
+    &__text{
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+        @include mobile{
+            font-size:12px;
+            line-height: 18px;
+        }
+    }
+    &__logo{
+        width: 210px;
+        height: 48px;
+        @include mobile{
+            width:100%;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+        }
+        img {
+            width: 190px;
+            height: 44px;
+            display: block;
+            cursor: pointer;
+            object-fit: contain;
+            transition: opacity 0.3s ease;
+        }
+    }
+
+    &__bottom-imgs{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 40px;
+        align-self: stretch;
+        list-style:none;
+        margin:0;
+        padding:0;
+        img{
+            opacity: 0.4;
+        }
+        @include mobile{
+            gap:20px;
+            display:grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    &__menu-list{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        @include mobile{
+            gap:16px;
+        }
+    }
+    &__menu-item{
+        list-style: none;
+    }
+    &__menu-link{
+        color: var(--Main-White, #FFF);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+        text-decoration-skip-ink: none;
+        text-decoration-thickness: auto;
+        text-underline-offset: auto;
+        text-underline-position: from-font;
+        &:hover{
+            color:#fff;
+            opacity:0.9;
+        }
+    }
+
+    &__copyright{
+        color: var(--Main-White, #FFF);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
 }

resources/sass/layout/_header.scss

@@ -6,7 +6,7 @@
     left: 0;
     height: 70px;
     z-index: 1000;
-    // background will be set dynamically via styles.php
+    background: var(--header-color);
 
     .container {
         @include flex(space-between, center);
@@ -99,7 +99,9 @@
         }
 
         &--secondary {
-            // background and color will be set dynamically
+            border: 1px solid var(--accent-color);
+            background: var(--accent-color);
+            color: #fff;
             &:hover {
                 transform: translateY(-1px);
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -128,6 +130,7 @@
         &-line {
             width: 100%;
             height: 3px;
+            background:#fff;
             border-radius: 2px;
             // background will be set dynamically
             transition: all 0.3s ease;
@@ -194,20 +197,31 @@
             transition: transform 0.3s ease;
             padding: 40px 20px;
             overflow-y: auto;
-            backdrop-filter: blur(10px);
+            //backdrop-filter: blur(10px);
+
+            @include mobile{
+                background: var(--body-bg-color);
+            }
 
             &.active {
                 transform: translateX(0);
+
             }
         }
 
         &__menu {
             flex-direction: column;
-            align-items: flex-start;
+            align-items: center;
+            width: 100%;;
             gap: 24px;
 
             &-link {
                 font-size: 18px;
+                @include mobile{
+                    font-size: 16px;
+                    background: var(--body-bg-color);
+                    color:var(--text-color);
+                }
             }
         }
 

resources/sass/styles.scss

@@ -9,18 +9,34 @@
 
 @import 'layout/header';
 @import 'layout/footer';
-@import 'layout/container';
 
 @import 'components/buttons';
 @import 'components/tables';
+@import 'components/author';
+@import 'components/faq';
+@import 'components/toc';
+@import 'components/slot-item';
 
 body{
-	background:#fff !important;    
 	padding-top:70px;
-	color:#000;
+	background-color: var(--body-bg-color);
+	color: var(--text-color);
 	font-style: normal;
 	font-weight: 400;
 	line-height: 24px; /* 150% */
+
+	&.menu-open {
+		overflow: hidden;
+	}
+}
+// Container
+.container {
+    max-width: var(--container-width);
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+		padding-left: 16px !important;
+		padding-right:16px !important;
 }
 
 //banner
@@ -31,6 +47,8 @@ body{
 	justify-content: center;
 	&__img-wrp{
 		max-width:1920px;
+		max-height:540px;
+		overflow: hidden;
 		margin:0 auto;
 	}
 	&__img{
@@ -47,14 +65,333 @@ 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{
 	padding:32px;
-  border-radius: 16px;
-	border: 1px solid #E4E4E4;
-	background: #F6F6F6;
+	border-radius: 16px;
+	border: 1px solid var(--content-border-color);
+	background: var(--content-bg-color);
+	@include tablet{
+		padding:24px;
+	}
+	@include mobile{
+		padding:16px;
+	}
+	&__title{
+		 margin-top:0;
+	}
 }
+
+// Links
+a {
+	color: var(--link-color);
+	text-decoration: none;
+	transition: color 0.3s ease;
+
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+// Tables
+table {
+	background: var(--table-bg-color);
+	color: var(--text-color);
+}
+
+th,
+thead,
+table thead tr {
+	background-color: var(--table-header-color);
+	color: var(--text-color);
+}
+
+caption {
+	background: var(--table-header-color);
+	color: var(--text-color);
+}
+
+
+
+.game-item{
+	border-radius: var(--border-radius-main);
+	overflow:hidden;
+	position:relative;
+	//padding:0 12px 0 12px;
+	padding-top:52%;
+	box-shadow: 0px 2px 44px 0px rgba(188, 188, 188, 0.15);
+	background:#fff;
+	@include mobile{
+		padding-top:60%;
+		border-radius:12px;
+		box-shadow: 0px 1.4px 30.803px 0px rgba(188, 188, 188, 0.15);
+	}
+	&__inner{
+		position:absolute;
+		top:0;
+		left:0;
+		width:100%;
+        overflow:hidden;
+		height:calc(100% - 45px); // 45px - height title
+		@include mobile{
+			height:calc(100% - 40px);
+		}
+        &:hover{
+            .game-item__hover{
+                opacity:1;
+                visibility: visible;
+            }
+	    }
+	}
+	&__title{
+		color: rgba(2, 0, 5, 0.80);
+		text-align: center;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 1.1em;
+		width:100%;
+		height:45px;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		background:#fff;
+        position:relative;
+        padding:0 12px;
+		@include tablet{
+			font-size:14px;
+		}
+		@include mobile{
+			font-size:12px;
+			height:40px;
+		}
+	}
+	&__link{
+        display:inline-flex;
+        align-items: center;
+        gap:8px;
+        text-decoration: none !important;
+		color: rgba(2, 0, 5, 0.80) !important;
+        @include mobile{
+            gap:4px;
+        }
+        &:before{
+            content:'';
+            display:block;
+            width:100%;
+            height:100%;
+            position:absolute;
+            top:0;
+            left:0;
+        }
+		&:hover{
+			color:var(--color-theme-red) !important;
+            .icon{
+                fill:url('#icon-gradient-red');
+            }
+		}
+        .icon{
+            width:20px;
+            height:20px;
+            flex-shrink: 0;
+            fill:#0076CC;
+            @include mobile{
+                width:12px;
+                height:12px;
+            }
+        }
+	}
+    &__link-text{
+        display:inline-flex;
+        align-items: center;
+    }
+    &__link-icon{
+        width:20px;
+        height:20px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        fill:#0076CC;
+    }
+	&__picture{
+		position:absolute;
+		top:0;
+		left:0;
+		bottom:0;
+		right:0;
+	}
+	&__image{
+		display:block;
+		width:100%;
+		height:100%;
+		object-fit: cover;
+		transition: 0.3s ease-out;
+	}
+	&__tags{
+		position:absolute;
+		top:0;
+		left:12px;
+		display:flex;
+	}
+	&__tagsItm{
+		margin-right:8px;
+		border-radius: 0px 0px 8px 8px;
+		background: linear-gradient(90deg, #2D2BA7 0%, #BA73D1 100%);
+		text-transform: uppercase;
+		overflow:hidden;
+		@include mobile{
+			border-radius: 0px 0px 5px 5px;
+		}
+		&--hot{
+			background: #F5294D;
+		}
+	}
+	&__tagsLink{
+		display:block;
+		color:#fff;
+		padding:8px 16px;
+		color:#fff;
+		font-size: 12px;
+		font-weight: 900;
+		line-height: 1em;
+		@include mobile{
+			padding:3px 11px;
+			font-size:9px;
+		}
+	}
+	&__info{
+		position:absolute;
+		top:8px;
+		right:8px;
+		display:flex;
+		align-items: center;
+		justify-content: end;
+	}
+	&__provide{
+		width:32px;
+		height:32px;
+		border-radius:50%;
+		background:#000;
+		display:flex;
+		justify-content: center;
+		align-items: center;
+		//padding:8px;
+		padding:2px;
+		margin-right:8px;
+		@include mobile{
+			width:24px;
+			height:24px;
+			margin-right:5px;
+		}
+		.icon{
+			fill:#fff;
+		}
+	}
+	&__rating{
+		width: 36px;
+		height: 36px;
+		position:relative;
+		@include mobile{
+			width: 28px;
+			height: 28px;
+		}
+	}
+	&__ratingVal{
+		font-size: 12px;
+		@include mobile{
+			font-size:10px;
+		}
+	}
+	&__rtp{
+		padding:4px 8px;
+		background: linear-gradient(var(--gradient-theme-red));
+		border-radius:8px;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 600;
+		color:#fff;
+		line-height:1em;
+		height:24px;
+		display:flex;
+		align-items: center;
+		position:absolute;
+		bottom:8px;
+		right:8px;
+	}
+	&__countPlay{
+		color:#fff;
+		font-size:12px;
+		padding:4px 8px;
+		font-size: 12px;
+		line-height:1em;
+		font-weight: 600;
+		border-radius:8px;
+		background:rgba(2, 0, 5, 0.80);
+		position:relative;
+		display:flex;
+		height:24px;
+		align-items: center;
+		justify-content: space-between;
+		position:absolute;
+		bottom:8px;
+		left:8px;
+		.icon{
+			fill:#fff;
+		}
+	}
+	&__countTxt{
+		padding-left:5px;
+	}
+	&__btn{
+		margin-top:16px;
+		width:100%;
+		max-width:120px;
+		@include mobile{
+			margin-top:8px;
+			font-size:12px;
+			padding:8px 20px;
+			max-width:100px;
+		}
+
+	}
+	&__hover{
+		position:absolute;
+		top:0;
+		left:0;
+		bottom:0;
+		right:0;
+		background:rgba(2, 0, 5, 0.80);
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding:20px;
+		opacity:0;
+		z-index: 1;
+		transition: 0.5s ease-out;
+		visibility: hidden;
+        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();
 
 ?>
@@ -21,89 +13,147 @@ ob_start();
 <?php endif; ?>
 
 
-<div class="section-wrapper">
-    <div class="container">
-        <section class="content-bg 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>
-        </section>
+<div class="section-wrapper container">
+    <!-- Table of Contents -->
+    <div class="toc">
+        <div class="toc__header">
+            <h2 class="toc__title">Contents</h2>
+        </div>
+        <div class="toc__content">
+            <ol class="toc__list">
+                <li class="toc__item">
+                    <a href="#section1" class="toc__link">Introduction to the Topic</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section2" class="toc__link">Main Features and Benefits</a>
+                    <ul class="toc__list toc__list--nested">
+                        <li class="toc__item">
+                            <a href="#section2-1" class="toc__link">Feature Overview</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section2-2" class="toc__link">Key Benefits</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section2-3" class="toc__link">Comparison with Competitors</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="toc__item">
+                    <a href="#section3" class="toc__link">How to Get Started</a>
+                    <ul class="toc__list toc__list--nested">
+                        <li class="toc__item">
+                            <a href="#section3-1" class="toc__link">Installation Process</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section3-2" class="toc__link">Initial Configuration</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="toc__item">
+                    <a href="#section4" class="toc__link">Advanced Tips and Tricks</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section5" class="toc__link">Common Questions</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section6" class="toc__link">Conclusion</a>
+                </li>
+            </ol>
+        </div>
     </div>
 
-</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; ?>
+    <section class="section text">
+        <?= $topContent ?>
+        <div class="btn-wrapper">
+            <button class="btn btn--accent">Click Here to Learn More</button>
         </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'] ?? '') ?>">
+    </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="author__info">
-                        <div class="author__name"><?= htmlspecialchars($content['author-name'] ?? '') ?></div>
-                        <div class="author__date"> <?= $content['modified-date'] ?? '' ?></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 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; ?>
+            <?php  } ?>
         </div>
-</section>
-<section>
-    <div class="container">
-        <div class="secondary__text">
-            <?= htmlspecialchars_decode($content['bottom_text']); ?>
+
+    </section>
+    <section class="section text">
+        <?=  $pageContent  ?>
+        <div class="btn-wrapper">
+            <button class="btn btn--accent">Get Started Now</button>
         </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>
+    </section>
+
+
+    <!-- FAQ Section -->
+    <?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>
+                <?php endforeach; ?>
+            </div>
+        </section>
+    <?php endif; ?>
+
+
+    <?php if (!empty($author)): ?>
+        <section class="section">
+            <div class="author">
+                <div class="author__img">
+                    <img src="/<?= htmlspecialchars($author['image']) ?>" alt="<?= htmlspecialchars($author['name'] ?? '') ?>" title="<?= htmlspecialchars($author['name'] ?? '') ?>">
                 </div>
-            <?php endforeach; ?>
-        </div>
-    </div>
-</section> -->
+                <div class="author__info">
+                    <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>
+    <?php endif; ?>
+
+</div>
+
 
 <?php
 $pageContent = ob_get_clean();

resources/view/layouts/partials/footer.php

@@ -2,42 +2,64 @@
 $content = (new \App\Settings('content'))->getAll();
 $footerLogo = json_decode($content['footer-logo'] ?? '{}', true);
 $currentDomain = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
+$menuItems = json_decode($content['menu'] ?? '[]', true);
 ?>
 <footer class="footer">
-        <div class="container">
+        
 
             <div class="footer__content">
-                <div class="footer__logo">
-                    <?php if (!empty($footerLogo['src'])): ?>
-                        <a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] ?>">
-                            <img src="<?= htmlspecialchars($footerLogo['src']) ?>" alt="<?= $footerLogo['alt'] ?? '' ?>" title="<?= $footerLogo['title'] ?? '' ?>">
-                        </a>
-                    <?php endif; ?>
-                </div>
-                <div class="footer__text">
-                    <?= $content['footer__text'] ?? '' ?>
+                <div class="container footer__content-inner">
+                    <div class="footer__logo">
+                        <?php if (!empty($footerLogo['src'])): ?>
+                            <a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] ?>">
+                                <img src="<?= htmlspecialchars($footerLogo['src']) ?>" alt="<?= $footerLogo['alt'] ?? '' ?>" title="<?= $footerLogo['title'] ?? '' ?>">
+                            </a>
+                        <?php endif; ?>
+                    </div>
+                    <div class="footer__text">
+                        <p>Casino.online is an independent team providing information about Megaways slots in the UK.
+                        We provide the latest and safest information about casino games.
+                        On our website you will find free Megaways slots, casino bonuses and a list of online casinos to play.
+                        We offer honest information that we verify ourselves.</p>
+                    </div>
                 </div>
             </div>
 
+            <!-- footer partners -->
+             <div class="footer__partners">
+                <div class="container">
+                    <ul class="footer__bottom-imgs">
+                        <li><span><img data-src="images/18+.png" class="lazy" alt="18+" title="18+" width="40" height="40"></span></li>
+                        <li><a href="https://www.begambleaware.org/" rel="nofollow noopener" target="_blank"><img height="40" width="252" class="lazy" data-src="images/GA.png" alt="BeGambleAware" title="BeGambleAware"></a></li>
+                        <li><a href="https://itechlabs.com/" rel="nofollow noopener" target="_blank"><img height="40" width="40" class="lazy" data-src="images/itechlabs.png" alt="iTech Labs" title="iTech Labs"></a></li>
+                        <li><a href="https://www.mga.org.mt/" rel="nofollow noopener" target="_blank"><img height="40" width="92" class="lazy" data-src="images/mga.png" alt="MGA" title="MGA"></a></li>
+                        <li><img height="40" width="126" class="lazy" data-src="images/ecogra.png" alt="eCOGRA" title="eCOGRA"></li>
+                        <li><a href="https://gaminglabs.com/" rel="nofollow noopener" target="_blank"><img height="46" width="86" class="lazy" data-src="images/GLI.png" alt="GLI" title="GLI"></a></li>
+                    </ul>
+                </div>
+             </div>
+
+
             <!-- footer menu -->
-            <ul class="footer__menu">
-                <li><a href="<?= $currentDomain . '/contacts' ?>"><?= $content['contact-menu-name'] ?? '' ?></a></li>
-            </ul>
+            <div class="footer__menu">
+                <div class="container">
+                    <ul class="footer__menu-list">
+                        <?php foreach ($menuItems as $menuItem): ?>
+                            <li class="footer__menu-item">
+                                <a href="<?= htmlspecialchars($menuItem['anchor'] ?? '') ?>" class="footer__menu-link">
+                                    <?= htmlspecialchars($menuItem['title'] ?? '') ?>
+                                </a>
+                            </li>
+                        <?php endforeach; ?>
+                    </ul>
+                </div>
+            </div>
 
-            <!-- footer partners -->
-            <ul class="footer__bottom-imgs">
-                <li><span><img data-src="images/18+.png" class="lazy" alt="18+" title="18+" width="40" height="40"></span></li>
-                <li><a href="https://www.begambleaware.org/" rel="nofollow noopener" target="_blank"><img height="40" width="252" class="lazy" data-src="images/GA.png" alt="BeGambleAware" title="BeGambleAware"></a></li>
-                <li><a href="https://itechlabs.com/" rel="nofollow noopener" target="_blank"><img height="40" width="40" class="lazy" data-src="images/itechlabs.png" alt="iTech Labs" title="iTech Labs"></a></li>
-                <li><a href="https://www.mga.org.mt/" rel="nofollow noopener" target="_blank"><img height="40" width="92" class="lazy" data-src="images/mga.png" alt="MGA" title="MGA"></a></li>
-                <li><img height="40" width="126" class="lazy" data-src="images/ecogra.png" alt="eCOGRA" title="eCOGRA"></li>
-                <li><a href="https://gaminglabs.com/" rel="nofollow noopener" target="_blank"><img height="46" width="86" class="lazy" data-src="images/GLI.png" alt="GLI" title="GLI"></a></li>
-            </ul>
 
             <!-- footer copyrights -->
             <div class="footer__copyright">
                 <?= $content['copyright'] ?? '' ?>
             </div>
 
-        </div>
+
     </footer>

resources/view/layouts/partials/header.php

@@ -35,7 +35,7 @@ $menuItems = json_decode($content['menu'] ?? '[]', true);
                 <button class="header__btn header__btn--primary redirect-js">
                     <?= htmlspecialchars($content['header_btn_1'] ?? 'Button 1') ?>
                 </button>
-                <button class="header__btn header__btn--secondary redirect-js">
+                <button class="header__btn header__btn--secondary  redirect-js">
                     <?= htmlspecialchars($content['header_btn_2'] ?? 'Button 2') ?>
                 </button>
             <?php endif; ?>

resources/view/layouts/partials/styles.php

@@ -1,79 +1,18 @@
 <?php
-$styles = (new \App\Settings('styles'))->getAll(); 
+$styles = (new \App\Settings('styles'))->getAll();
 ?>
 <style>
-    /* Основные цвета */
-    body {
-        background-color: <?= $styles['body_bg_color'] ?? '#0A0A0A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>; 
-    }
-
-    /* Цвет хедера (шапки сайта) */
-    .header,
-    .header-color {
-        background: <?= $styles['header_color'] ?? '#1E1E1E' ?>;
-    }
-
-
-    /* Цвет контентной части */
-    .content-bg{
-        background-color: <?= $styles['content_bg_color'] ?? '#1A1A1A' ?>;
-    }
-
-    /* Цвет текста основного */
-    body,
-    .text-color {
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет текста ссылок в контенте */
-    a {
-        color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
-        text-decoration: none;
-        transition: color 0.3s ease;
-    }
-
-    a:hover {
-        color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
-        opacity: 0.8;
-    }
-
-    /* Цвет таблицы (фон) */
-    table {
-        background: <?= $styles['table_bg_color'] ?? '#1A1A1A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет шапки таблицы (thead) */
-    th,
-    thead,
-    table thead tr {
-        background-color: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    caption {
-        background: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет фона футера */
-    .footer,
-    .footer-color {
-        background: <?= $styles['footer_bg_color'] ?? '#1E1E1E' ?>;
-    }
-
-    /* Header buttons - you can customize these colors in admin panel later */
-    .header__btn--primary {
-        color: #FFFFFF;
-    }
-
-    .header__btn--secondary {
-        color: #FFFFFF;
-    }
-
-    /* Prevent body scroll when mobile menu is open */
-    body.menu-open {
-        overflow: hidden;
+    :root {
+        /* Color variables from admin panel */
+        --body-bg-color: <?= $styles['body_bg_color'] ?? '#0A0A0A' ?>;
+        --text-color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
+        --header-color: <?= $styles['header_color'] ?? '#1E1E1E' ?>;
+        --content-bg-color: <?= $styles['content_bg_color'] ?? '#1A1A1A' ?>;
+        --content-border-color: <?= $styles['content_border_color'] ?? '#E4E4E4' ?>;
+        --link-color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
+        --accent-color: <?= $styles['accent_color'] ?? '#FF6B35' ?>;
+        --table-bg-color: <?= $styles['table_bg_color'] ?? '#1A1A1A' ?>;
+        --table-header-color: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
+        --footer-bg-color: <?= $styles['footer_bg_color'] ?? '#1E1E1E' ?>;
     }
 </style>

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'] ?? '';
 
 // Подготавливаем содержание для контента
 $headings = getContainsByText($pageContent);
@@ -66,6 +76,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,
@@ -78,5 +89,7 @@ return ViewRender($layoutFile, [
     'currentUrl' => $currentUrl,
     'isHomepage' => !empty($currentPage['is_homepage']),
     'isSearchBot' => $isSearchBot,
+    'author' => $authorModel->getAll()[0],
+    'slots' => $slotModel->getAll(),
     'userIp' => $ip,
 ]);