Add landing pages

rss/css/theme.css

@@ -10,7 +10,7 @@
 header {
   display: flex;
   justify-content: space-between;
-  padding: 0.7rem 2rem;
+  padding: 1.3rem 2rem;
   background-color: #ffffff;
   align-items: center;
   box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
@@ -63,15 +63,28 @@ header nav {
 }
 header nav .menu-item {
   color: #000000;
-  font-weight: 500;
+  font-weight: 600;
   margin-right: 15px;
   display: inline-block;
   position: relative;
   transition: color 0.3s;
-  font-size: 16px;
+  font-size: 18px;
 }
 header nav .menu-item.active {
   font-weight: bold;
+  color: #aa0b3d;
+}
+header nav .menu-item.active::after {
+  content: "";
+  position: absolute;
+  top: 120%;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: #aa0b3d;
+  transform: scaleX(1);
+  transform-origin: left;
+  transition: transform 0.3s;
 }
 header nav .menu-item::after {
   content: "";
@@ -249,7 +262,7 @@ header .mobile-toggler {
 }
 
 footer {
-  background-color: #212529;
+  background-color: #242627;
   color: #fff;
   display: flex;
   padding: 25px 0px;
@@ -266,7 +279,7 @@ footer ul {
 
 .features-section h2 {
   font-size: 1.8rem;
-  color: #212529;
+  color: #242627;
 }
 .features-section .theme-card {
   border-radius: 0.25rem;
@@ -338,7 +351,7 @@ footer ul {
   font-size: 1.3rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
-  color: #212529;
+  color: #242627;
 }
 
 .filter-text {
@@ -509,6 +522,99 @@ section .bolder {
   margin-top: 20px;
 }
 
+/* PROMO BLOCKS */
+.promo-cover {
+  height: calc(100vh - 60px);
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.promo-cover.fetish-cover {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/bdsm-background.jpeg");
+  background-position: 50% 35%;
+}
+.promo-cover.sugar-cover {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/sugar-couple.jpeg");
+  background-position: 50% 35%;
+}
+.promo-cover.foot-cover {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/foot1.jpg");
+  background-position: 50% 35%;
+}
+.promo-cover.app-cover {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("/rss/img/promo-images/couple1.jpg");
+  background-position: 50% 35%;
+}
+.promo-cover .title-bar {
+  padding: 20px;
+  text-align: center;
+  color: #fff;
+  width: 100%;
+  border-radius: 12px;
+  position: relative;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
+}
+@media (min-width: 769px) {
+  .promo-cover .title-bar {
+    width: 45%;
+  }
+}
+.promo-cover .title-bar h1 {
+  opacity: 1;
+  font-weight: 700;
+  font-size: 2.2rem;
+  display: inline-block;
+}
+.promo-cover .title-bar h1::after {
+  content: "";
+  display: block;
+  width: 80%;
+  height: 1px;
+  background: #fff;
+  margin: 2px auto 20px;
+  border-radius: 2px;
+}
+.promo-cover .title-bar p {
+  opacity: 1;
+  font-weight: 500;
+  font-size: 1.4rem;
+}
+.promo-cover .title-bar .cta-btn {
+  padding: 10px 20px;
+  background-color: #0F172A;
+}
+.promo-cover .title-bar .cta-btn:hover {
+  background-color: rgb(28.4210526316, 43.5789473684, 79.5789473684);
+}
+
+.content-section {
+  padding: 40px 0px;
+  color: #e2e8f0 !important;
+}
+.content-section h2 {
+  font-weight: 700;
+  font-size: 2rem;
+}
+.content-section p {
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+.content-section ul {
+  padding: 0px 40px;
+  padding-bottom: 10px;
+}
+
+.promo-feature-icon {
+  font-size: 2rem;
+  display: block;
+  text-align: center;
+  color: #ffffff;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .section-animation {
     opacity: 1;