Update landing page

rss/css/theme.css

@@ -248,6 +248,13 @@ header .mobile-toggler {
   background-position: center center;
   background-size: cover;
 }
+.display-banner.fitness-banner {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/fitness.jpg");
+  padding: 180px 0px;
+  background-position: center center;
+  background-size: cover;
+  overflow: hidden;
+}
 .display-banner.kissing-banner {
   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple-kissing.jpg");
   padding: 180px 0px;
@@ -291,8 +298,8 @@ footer ul {
   text-align: center;
 }
 .features-section .theme-card .card-header img {
-  width: 125px;
-  height: 125px;
+  width: 170px;
+  height: 170px;
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
   -o-object-fit: cover;
@@ -615,6 +622,40 @@ section .bolder {
   color: #ffffff;
 }
 
+.video-background {
+  position: relative;
+  overflow: hidden;
+  height: 65vh;
+  width: 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  margin-top: 50px;
+}
+.video-background video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.video-background .content {
+  position: absolute;
+  z-index: 1;
+  color: white;
+  text-align: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.4862745098);
+  border-radius: 12px;
+  padding: 25px 45px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .section-animation {
     opacity: 1;

rss/css/theme.scss

@@ -270,6 +270,15 @@ header {
         background-size: cover;
     }
 
+    &.fitness-banner {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+            url('/rss/img/fitness.jpg');
+        padding: 180px 0px;
+        background-position: center center;
+        background-size: cover;
+        overflow: hidden;
+    }
+
     &.kissing-banner {
         background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
             url('/rss/img/couple-kissing.jpg');
@@ -323,8 +332,8 @@ footer {
             text-align: center;
 
             img {
-                width: 125px;
-                height: 125px;
+                width: 170px;
+                height: 170px;
                 border-radius: 50%;
                 box-shadow: map-get($shadows, 2);
                 object-fit: cover;
@@ -701,6 +710,41 @@ section {
     color: #{map-get($colors, white)};
 }
 
+.video-background{
+    position: relative;
+    overflow: hidden;
+    height: 65vh;
+    width: 100%;
+    box-shadow: #{map-get($shadows, 2)};
+    margin-top: 50px;
+
+    video{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        min-width: 100%;
+        min-height: 100%;
+        width: auto;
+        height: auto;
+        transform: translate(-50%, -50%);
+        z-index: -1;
+        object-fit: cover;
+    }
+
+    .content{
+        position: absolute;
+        z-index: 1;
+        color: white;
+        text-align: center;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #0000007c;
+        border-radius: 12px;
+        padding: 25px 45px;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .section-animation {
         opacity: 1;

rss/js/index.js

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const video = document.getElementById('first-video');
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const source = document.createElement('source');
+        source.src = '/rss/videos/couple.mp4';
+        source.type = 'video/mp4';
+        video.appendChild(source);
+
+        video.load();
+        video.play();
+        video.playbackRate = 0.7; // Set after loading
+
+        observer.disconnect();
+      }
+    });
+  });
+
+  observer.observe(video);
+});

rss/php/includes/header.php

@@ -83,7 +83,7 @@ $currentPage = $page === 'index' ? 'Home' : ucwords(str_replace('-', ' ', $page)
     "name": "Stella Amor",
     "url": "https://stellaamor.com/"
   }
-  <?php if (!empty($pageInfo['rich_service_type'])): ?>
+  <?php if (!empty($pageInfo['rich_service_type'])): ?>,
   "mainEntity": {
     "@type": "Service",
     "serviceType": "<?php echo htmlspecialchars($pageInfo['rich_service_type'], ENT_QUOTES, 'UTF-8'); ?>",
@@ -102,7 +102,7 @@ $currentPage = $page === 'index' ? 'Home' : ucwords(str_replace('-', ' ', $page)
       "priceCurrency": "USD",
       "description": "Full access to all filters during the free membership period"
     }
-    <?php if (!empty($pageInfo['rich_faq'])): ?>
+    <?php if (!empty($pageInfo['rich_faq'])): ?>,
     "faqPage": {
       "@type": "FAQPage",
       "mainEntity": [

rss/php/templates/dating/fetish-dating.php

@@ -155,6 +155,19 @@
                         List hard limits upfront to attract compatible matches and filter out mismatches instantly.</p>
                 </div>
             </div>
+            <div class="w-100 bg-dark">
+                <div class="container text-white py-5 text-center">
+                    <h2 class="mb-4">Explore More Financial & Lifestyle Filters</h2>
+                    <div class="row justify-center">
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/sugar-dating/" class="btn btn-outline-light btn-lg">Sugar dating</a>
+                        </div>
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/foot-fetish-dating/" class="btn btn-outline-light btn-lg">Foot fetish dating</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="text-center mt-5">
                 <a href="/register/" class="btn btn-white btn-lg px-4 py-2">Create Your Free BDSM Profile Now</a>
             </div>

rss/php/templates/dating/foot-fetish-dating.php

@@ -42,14 +42,70 @@
     <div class="container py-4 text-white border-bottom">
         <h2 class="text-white text-center">Top free foot fetish filters</h2>
         <div class="row py-5">
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-foot-print promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Foot & Shoe Size</h3><p>Find your perfect size match</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-nail promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Pedicure & Nail Color</h3><p>Red, French, black, or natural</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-sock promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Nylons & Socks</h3><p>Bare, stockings, ankle socks</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-arch promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Arches & Shape</h3><p>High arches, wide, narrow</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-heart-outline promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Worship Style</h3><p>Massage, kissing, licking, smelling</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-shoe-heel promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>High Heels & Flats</h3><p>Stilettos, sandals, barefoot</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-weather-windy promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Clean vs Sweaty</h3><p>Freshly washed or post-gym</p></div></div></div>
-            <div class="col-sm-12 col-md-3 my-4"><div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-human-male-female promo-feature-icon"></i><div class="text-white text-center px-2 py-1"><h3>Trampling & Domination</h3><p>Light stepping to full weight</p></div></div></div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-foot-print promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Foot & Shoe Size</h3>
+                        <p>Find your perfect size match</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-nail promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Pedicure & Nail Color</h3>
+                        <p>Red, French, black, or natural</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-sock promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Nylons & Socks</h3>
+                        <p>Bare, stockings, ankle socks</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-arch promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Arches & Shape</h3>
+                        <p>High arches, wide, narrow</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-heart-outline promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Worship Style</h3>
+                        <p>Massage, kissing, licking, smelling</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-shoe-heel promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>High Heels & Flats</h3>
+                        <p>Stilettos, sandals, barefoot</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-weather-windy promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Clean vs Sweaty</h3>
+                        <p>Freshly washed or post-gym</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-3 my-4">
+                <div class="rounded-xl shadow-2 bg-dark"><i class="mdi mdi-human-male-female promo-feature-icon"></i>
+                    <div class="text-white text-center px-2 py-1">
+                        <h3>Trampling & Domination</h3>
+                        <p>Light stepping to full weight</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -78,6 +134,19 @@
                     <p>Upload clear foot pics • Be specific about size & style • Mention worship intensity • Verify your feet for extra attention</p>
                 </div>
             </div>
+            <div class="w-100 bg-dark">
+                <div class="container text-white py-5 text-center">
+                    <h2 class="mb-4">Explore More Financial & Lifestyle Filters</h2>
+                    <div class="row justify-center">
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/fetish-dating/" class="btn btn-outline-light btn-lg">Fetish dating</a>
+                        </div>
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/sugar-dating/" class="btn btn-outline-light btn-lg">Sugar dating</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="text-center mt-5">
                 <a href="/register/" class="btn btn-white btn-lg px-4 py-2">Create Your Free Foot Profile Now</a>
             </div>

rss/php/templates/dating/sugar-dating.php

@@ -144,6 +144,19 @@
                     <p>Be specific about allowance and lifestyle expectations • Use recent, high-quality photos • Verify income if you’re a provider • Write a clear headline: “Generous executive seeking travel companion” or “College student open to mentorship and support”</p>
                 </div>
             </div>
+            <div class="w-100 bg-dark">
+                <div class="container text-white py-5 text-center">
+                    <h2 class="mb-4">Explore More Financial & Lifestyle Filters</h2>
+                    <div class="row justify-center">
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/fetish-dating/" class="btn btn-outline-light btn-lg">Fetish dating</a>
+                        </div>
+                        <div class="col-md-2 col-sm-3 mb-3">
+                            <a href="/foot-fetish-dating/" class="btn btn-outline-light btn-lg">Foot fetish dating</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="text-center mt-5">
                 <a href="/register/" class="btn btn-white btn-lg px-4 py-2">Create Your Free Sugar Profile Now</a>
             </div>

rss/php/templates/index.php

@@ -63,32 +63,26 @@
         </div>
     </section>
 
+    <div class="video-background">
+        <video autoplay muted loop id="first-video">
+            <source type="video/mp4" />
+        </video>
 
-    <section>
-        <div class="py-5 display-banner wedding-banner">
-            <div class="container">
-                <div class="flex-column justify-center align-center">
-                    <h3 class="text-white">Uncover True Love and Marriage with Free Dating</h3>
-                    <p class="text-white">Join free today at Stella Amor to connect with your lifelong partner using unique date filters for finance, kinks, lifestyle, and much more.</p>
+        <div class="content">
+            <h2>Couple Goals: Beach Vibes Edition</h2>
+            <p>Ocean mornings, balcony chats, and that perfect connection living the dream with your favorite person.</p>
         </div>
     </div>
-        </div>
-    </section>
 
-
-    <section class="bg-white py-4">
-        <div class="container my-3">
+    <section class="bg-primary py-5 text-white shadow-4">
+        <div class="container my-5">
             <div class="row align-items-center">
-                <div class="col-12 col-md-5">
-                    <div class="rounded-col-image">
-                        <img src="/rss/img/couple-beach.jpg" alt="Stella Amor dating experience">
-                    </div>
-                </div>
                 <div class="col-12 col-md-7 flex-column justify-center">
-                    <h2 class="mb-3">Join the Best <span class="bolder text-primary">Dating Platform </span> with Advanced Filters</h2>
-                    <p>Stella Amor offers free dating with advanced filters for finance, kinks, lifestyle, and more. Connect with singles who truly align with your values and passions. Start your journey to love today with a platform designed for your unique preferences!</p>
-                    <div class="d-flex mt-3">
+                    <h2 class="mb-3">Discovering the Best Dating Site for Introverts in <?php echo date('Y'); ?></h2>
+                    <p>If you're an introvert, finding love shouldn't feel like a performance. Stella Amor understands that, offering a platform where thoughtful profiles and meaningful filters let you connect at your own pace. Skip the small talk and dive straight into conversations about shared books, quiet hobbies, or weekend retreats. It's all about matching personalities that click without the exhaustion of traditional dating scenes.</p>
                 </div>
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/girl-face.jpg" alt="Introvert dating for finding love" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
                 </div>
             </div>
         </div>
@@ -96,7 +90,7 @@
 
     <div class="container border-top text-light" aria-hidden="true"></div>
 
-    <section class="py-2 bg-white">
+    <section class="py-5 bg-light">
         <div class="container my-5">
             <div class="row align-items-center">
                 <div class="col-12 col-md-5">
@@ -132,12 +126,23 @@
                 </div>
             </div>
         </div>
-</section>
+    </section>
 
-    <section class="success-stories bg-white">
-    <div class="container text-light border-top border-bottom py-4 mb-3">
+    <section>
+        <div class="py-5 display-banner wedding-banner">
+            <div class="container">
+                <div class="flex-column justify-center align-center">
+                    <h3 class="text-white">Uncover True Love and Marriage with Free Dating</h3>
+                    <p class="text-white">Join free today at Stella Amor to connect with your lifelong partner using unique date filters for finance, kinks, lifestyle, and much more.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="success-stories bg-white py-3">
+        <div class="container text-light border-bottom py-5 mb-3">
             <div class="text-black">
-            <h2 class="mb-4 text-center">Love Found on Stella Amor</h2>
+                <h2 class="mb-4 text-center">Love Found at Stella Amor</h2>
                 <div class="row">
                     <div class="col-12 col-md-4">
                         <div class="theme-card primary">
@@ -229,13 +234,13 @@
                 }
             </script>
         </div>
-</section>
+    </section>
 
 
-    <section class="filter-section bg-accent-white py-4">
-        <div class="container my-5">
+    <section class="filter-section bg-white py-2">
+        <div class="container my-1">
             <h2 class="mb-4 text-center">What You Can Filter By</h2>
-            <div class="row g-4">
+            <div class="row g-4 justify-center my-2">
                 <div class="col-12 col-md-6 col-lg-4 my-2">
                     <div class="filter-card">
                         <div class="filter-icon">
@@ -327,10 +332,92 @@
                     </div>
                 </div>
             </div>
-            <div class="d-flex justify-center mt-4 pt-5">
-                <a href="/register/" class="btn btn-white me-2">Join Free Now</a>
         </div>
-            <p class="text-center mt-3">Stella Amor offers the best free dating filters to customize your search and start your love journey today!</p>
+    </section>
+
+    <section class="bg-dark py-4">
+        <div class="container my-3 py-5">
+            <div class="row align-items-center text-white">
+                <div class="col-12 col-md-5">
+                    <div class="rounded-col-image">
+                        <img src="/rss/img/couple-beach.jpg" alt="Stella Amor dating experience">
+                    </div>
+                </div>
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Join the Best <span class="bolder text-primary">Dating Platform </span> with Advanced Filters</h2>
+                    <p>Stella Amor offers free dating with advanced filters for finance, kinks, lifestyle, and more. Connect with singles who truly align with your values and passions. Start your journey to love today with a platform designed for your unique preferences!</p>
+                    <div class="d-flex mt-3">
+                        <a href="/register/" class="btn primary btn-sm">Read more</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white py-5">
+        <div class="container my-5 text-muted">
+            <div class="row align-items-center text-dark py-5">
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Senior Dating Over 60: Where Experience Meets Compatibility</h2>
+                    <p>For singles over 60, Stella Amor is the spot to find someone who appreciates the richness of life you've built. Filter for shared interests like gardening, grandkids, or leisurely travels, and discover connections that honor your wisdom and stories. It's designed for those ready for companionship that feels effortless and real.</p>
+                </div>
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/senior.jpg" alt="Free senior dating" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="py-5 display-banner fitness-banner">
+            <div class="container">
+                <div class="flex-column justify-center align-center">
+                    <h3 class="text-white">Fitness-Focused Dating for Active Lifestyles</h3>
+                    <p class="text-white text-center">Love the gym but tired of mismatched energy levels? Stella Amor lets you filter for workout routines, nutrition preferences, and adventure goals, pairing you with someone who's as committed to health as you are. Couples formed here often bond over shared hikes or post-training meals that turn into something more.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="pt-5 pb-1 bg-white">
+        <div class="container my-5 text-muted">
+            <div class="row align-items-center border-bottom py-5 ">
+                <div class="col-12 col-md-5 text-white">
+                    <img src="/rss/img/kink2.jpg" alt="Free Kink-Friendly Dating" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
+                </div>
+                <div class="col-12 col-md-7 flex-column justify-center text-dark">
+                    <h2 class="mb-3">Kink-Friendly Dating with Respect and Privacy</h2>
+                    <p>Curious about kink but want a safe entry point? Stella Amor offers private filters for preferences and boundaries, ensuring matches are based on mutual respect and consent. It's a welcoming space where beginners can explore without judgment, building trust from the start.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="container my-5 pt-5 pb-4 border-bottom text-muted">
+            <div class="row align-items-center pt-3">
+                <div class="col-12 col-md-7 flex-column justify-center text-dark">
+                    <h2 class="mb-3">Vegan Dating That Nourishes Body and Soul</h2>
+                    <p>Being vegan is more than a diet. It's a lifestyle. Stella Amor helps plant-based singles find partners who share ethical eating and animal compassion through dedicated filters. From recipe swaps to ethical travel plans, these connections often grow into something deeply fulfilling.</p>
+                </div>
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/vegan.jpg" alt="Vegan dating app" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <section class="success-stories bg-white">
+        <div class="container text-light mb-3 pb-3">
+            <div class="text-black">
+                <h4 class="mb-4 text-center text-xl fw-medium">This is <span class="text-primary fw-bold">Stella Amor</span></h4>
+                <p class="text-center">Your dating site for real compatibility in 2025. Where introverts, seniors over 60, book lovers, fitness enthusiasts, single parents, eco-conscious singles, and everyone exploring kink or plant-based living finally meet someone who truly gets them.</p>
+                <p class="text-center">No endless swiping. No surface-level matches. Just thoughtful questions, detailed filters, and connections that feel right from the very first message. So what are you waiting for?
+                    Create your profile today and start meeting people who match your lifestyle, values, and dreams.
+                    Love that actually fits, begins here.</p>
+                <div class="d-flex justify-center mt-4">
+                    <a href="/register/" class="btn btn-outline-primary" title="Join now" aria-label="Sign up for free">Join now</a>
+                </div>
+            </div>
         </div>
     </section>
 </main>