New stella design

This commit is contained in:
edsea
2025-08-06 05:09:22 +02:00
parent 24c3640f05
commit 8ec1ba9756
70 changed files with 1808 additions and 481 deletions

View File

@@ -6,8 +6,8 @@
<div class="text-col">
<h1 class="title mb-3">Discover <span class="text-primary">Your Love Story</span> with Stella Amor</h1>
<p class="lead mb-1">Join free today with unique date filters for finance, kinks, lifestyle, and beyond. Start exploring now!</p>
<a href="/signup" class="mb-3 btn btn-dark cta-btn">Sign up today</a>
<p class="login-text">Already have an account? <a href="/login" class="login-link">Login now</a></p>
<a href="/register/" class="mb-3 btn btn-dark cta-btn">Sign up today</a>
<p class="login-text">Already have an account? <a href="/login/" class="login-link">Login now</a></p>
</div>
<div class="image-col">
<div class="image-wrapper">
@@ -58,7 +58,7 @@
</div>
</div>
<div class="d-flex justify-center mt-3">
<a href="/create-account" class="btn btn-dark" title="Explore Stella Amor filters" aria-label="Explore filters">Explore Your Options</a>
<a href="/register/" class="btn btn-dark" title="Explore Stella Amor filters" aria-label="Explore filters">Explore Your Options</a>
</div>
</div>
</section>
@@ -97,46 +97,42 @@
<div class="container border-top text-light" aria-hidden="true"></div>
<section class="py-2 bg-white">
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-5">
<img src="/rss/img/couple-luxury.jpg" alt="Free dating with economy filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
</div>
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Find Love with Economy Compatibility</h2>
<p>Stella Amors free dating platform lets you filter for financial compatibility, connecting you with singles who share your economic goals. Start building a stable future with the right partner today!</p>
<div class="d-flex mt-3">
</div>
</div>
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-5">
<img src="/rss/img/couple-luxury.jpg" alt="Free dating with economy filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
</div>
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Find Love with Financial Compatibility</h2>
<p>At Stella Amor, our free dating platform empowers you to find singles who share your financial goals, from budgeting to building wealth together. Whether you prioritize savings, investments, or a debt-free lifestyle, our advanced economy filters connect you with partners who align with your vision for a secure future. Join thousands of users whove found love grounded in shared values. Sign up free today and start your journey to a financially harmonious relationship!</p>
</div>
</div>
</div>
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Explore Love with Kinks & Preferences</h2>
<p>Discover your ideal match on Stella Amor with advanced filters for kinks and unique preferences. Join free to find a partner who embraces your desires on this top dating site!</p>
</div>
<div class="col-12 col-md-5">
<img src="/rss/img/fetish.jpg" alt="Free dating with kinks filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
</div>
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Explore Love with Kinks & Preferences</h2>
<p>Stella Amors kink-friendly dating platform lets you embrace your unique desires without judgment. Our advanced filters for kinks, fetishes, and lifestyle preferences help you connect with partners who share your passions, from adventurous interests to niche hobbies. Feel confident being your authentic self on a safe, inclusive site designed for meaningful connections. Join free today to discover why Stella Amor is the top dating site for open-minded singles seeking true compatibility!</p>
</div>
<div class="col-12 col-md-5">
<img src="/rss/img/fetish.jpg" alt="Free dating with kinks filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
</div>
</div>
</div>
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-5">
<img src="/rss/img/family-pregnant.jpg" alt="Free dating with family filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
</div>
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Build a Family with Lifestyle Matching</h2>
<p>Stella Amor offers free dating with filters for family values and lifestyle, helping you find a lifelong partner ready for marriage and a shared future. Join now!</p>
<div class="d-flex mt-3">
</div>
</div>
<div class="container my-5">
<div class="row align-items-center">
<div class="col-12 col-md-5">
<img src="/rss/img/family-pregnant.jpg" alt="Free dating with family filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2" loading="lazy">
</div>
<div class="col-12 col-md-7 flex-column justify-center">
<h2 class="mb-3">Build a Family with Lifestyle Matching</h2>
<p>Looking for a partner ready for marriage and family? Stella Amors free dating platform offers powerful filters for family values, lifestyle, and long-term goals. Whether you dream of raising kids, sharing religious beliefs, or building a home together, our site connects you with singles who share your vision for a meaningful future. Join our community of committed daters and start your journey to lasting love with someone whos ready for the next step!</p>
</div>
</div>
</section>
</div>
</section>
<section class="success-stories bg-white">
<div class="container text-light border-top border-bottom py-4 mb-3">
@@ -146,49 +142,93 @@
<div class="col-12 col-md-4">
<div class="theme-card primary">
<div class="inner">
<p class="text">The finance filter helped us align our goals! K & M</p>
<p class="text">We bonded over our shared budgeting habits and love for travel. Stella Amors filters made it so easy to find someone who gets me. Karen & Mike</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="theme-card secondary">
<div class="inner">
<p class="text">Kink filters made finding my match effortless! P & J</p>
<p class="text">I was nervous about sharing my interests, but the lifestyle filters helped me find someone whos just as adventurous. Were inseparable now! Priya & James</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="theme-card primary">
<div class="inner">
<p class="text">Found my pet-loving soulmate! S & T</p>
<p class="text">As a dog lover, I wanted someone whod adore my pup as much as I do. Stella Amor connected me with my perfect match. Sarah & Tom</p>
</div>
</div>
</div>
</div>
<div class="d-flex justify-center mt-4">
<a href="/success-stories" class="btn btn-outline-primary" title="Read more Stella Amor success stories" aria-label="Read more success stories">Read More Stories</a>
<a href="/success-stories/" class="btn btn-outline-primary" title="Read more Stella Amor success stories" aria-label="Read more success stories">Read More Stories</a>
</div>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Review",
"itemReviewed": {
"@type": "Organization",
"name": "Stella Amor"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5
},
"author": {
"@type": "Person",
"name": "K & M"
},
"reviewBody": "The finance filter helped us align our goals!"
}
{
"@context": "https://schema.org",
"@type": "Review",
"itemReviewed": {
"@type": "Organization",
"name": "Stella Amor",
"url": "http://stellaamor.local/"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5,
"bestRating": 5
},
"author": {
"@type": "Person",
"name": "Karen & Mike"
},
"reviewBody": "We bonded over our shared budgeting habits and love for travel. Stella Amors filters made it so easy to find someone who gets me."
}
</script>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Review",
"itemReviewed": {
"@type": "Organization",
"name": "Stella Amor",
"url": "http://stellaamor.local/"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5,
"bestRating": 5
},
"author": {
"@type": "Person",
"name": "Priya & James"
},
"reviewBody": "I was nervous about sharing my interests, but the lifestyle filters helped me find someone whos just as adventurous. Were inseparable now!"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Review",
"itemReviewed": {
"@type": "Organization",
"name": "Stella Amor",
"url": "http://stellaamor.local/"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5,
"bestRating": 5
},
"author": {
"@type": "Person",
"name": "Sarah & Tom"
},
"reviewBody": "As a dog lover, I wanted someone whod adore my pup as much as I do. Stella Amor connected me with my perfect match."
}
</script>
</div>
</section>
@@ -199,7 +239,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-currency-usd"></i> <!-- Finance icon -->
<i class="mdi mdi-currency-usd"></i>
</div>
<h3 class="filter-title">Financial Goals & Spending Habits</h3>
<p class="filter-text">Find partners aligned with your wealth dreams, from savings to luxury lifestyles.</p>
@@ -208,7 +248,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-handcuffs"></i> <!-- Kinks icon -->
<i class="mdi mdi-handcuffs"></i>
</div>
<h3 class="filter-title">Fetishes & Personalities</h3>
<p class="filter-text">Connect with those who share your unique desires and preferences.</p>
@@ -217,7 +257,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-paw"></i> <!-- Lifestyle icon -->
<i class="mdi mdi-paw"></i>
</div>
<h3 class="filter-title">Lifestyle (Pets, Fitness, Diets)</h3>
<p class="filter-text">Match with partners who vibe with your pet love, fitness, or dietary choices.</p>
@@ -226,7 +266,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-eye"></i> <!-- Eye Colors icon -->
<i class="mdi mdi-eye"></i>
</div>
<h3 class="filter-title">Eye Colors & Hair Styles</h3>
<p class="filter-text">Filter by physical traits to find your visually perfect match.</p>
@@ -235,7 +275,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-human-male-female"></i> <!-- Body Types icon -->
<i class="mdi mdi-human-male-female"></i>
</div>
<h3 class="filter-title">Body Types & Ethnicities</h3>
<p class="filter-text">Discover love based on body preferences and cultural backgrounds.</p>
@@ -244,7 +284,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-school"></i> <!-- Education icon -->
<i class="mdi mdi-school"></i>
</div>
<h3 class="filter-title">Education & Travel Preferences</h3>
<p class="filter-text">Connect with those who share your academic and travel passions.</p>
@@ -253,7 +293,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-heart-pulse"></i> <!-- Health icon -->
<i class="mdi mdi-heart-pulse"></i>
</div>
<h3 class="filter-title">Health Habits & Exercise Frequency</h3>
<p class="filter-text">Find matches with similar health and fitness routines.</p>
@@ -262,7 +302,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-briefcase"></i> <!-- Job Roles icon -->
<i class="mdi mdi-briefcase"></i>
</div>
<h3 class="filter-title">Job Roles & Living Arrangements</h3>
<p class="filter-text">Align with partners based on career and living situations.</p>
@@ -271,7 +311,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-church"></i> <!-- Religion icon -->
<i class="mdi mdi-church"></i>
</div>
<h3 class="filter-title">Religion & Languages</h3>
<p class="filter-text">Meet those who share your faith and linguistic background.</p>
@@ -280,7 +320,7 @@
<div class="col-12 col-md-6 col-lg-4 my-2">
<div class="filter-card">
<div class="filter-icon">
<i class="mdi mdi-movie"></i> <!-- Hobbies icon -->
<i class="mdi mdi-movie"></i>
</div>
<h3 class="filter-title">Hobbies & Movie Genres</h3>
<p class="filter-text">Bond over shared interests and favorite films.</p>
@@ -288,35 +328,9 @@
</div>
</div>
<div class="d-flex justify-center mt-4 pt-5">
<a href="/create-account" class="btn btn-white me-2">Join Free Now</a>
<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>
</div>
</section>
</main>
<!-- FIX THIS BEFORE RELASE -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after animation
}
});
}, {
threshold: 0.05, // Trigger when 10% of section is visible
rootMargin: '0px 0px -50px 0px' // Trigger 50px before fully in view
}
);
sections.forEach(section => {
section.classList.add('section-animation');
observer.observe(section);
});
});
</script>
</main>