322 lines
16 KiB
PHP
322 lines
16 KiB
PHP
<main>
|
||
<div class="home-banner">
|
||
<div class="home-banner-inner">
|
||
<div class="container">
|
||
<div class="inner-row">
|
||
<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>
|
||
</div>
|
||
<div class="image-col">
|
||
<div class="image-wrapper">
|
||
<img src="/rss/img/couple_sunset.jpg" alt="Couple at sunset">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="features-section py-4 bg-white">
|
||
<div class="container border-top text-light py-4">
|
||
<h2 class="text-center mb-2 fw-light text-black">Discover Your Ideal Match Today</h2>
|
||
<div class="row text-black">
|
||
<div class="col-12 col-md-4">
|
||
<div class="theme-card primary card-hover">
|
||
<div class="card-header theme-header">
|
||
<img src="/rss/img/yacht.jpg" alt="Financial compatibility couple" class="rounded-image object-bottom">
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="h3 fw-light">Financial Harmony</h3>
|
||
<p class="text">Match with singles who align with your financial dreams, from savings to luxury lifestyles.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="theme-card secondary card-hover">
|
||
<div class="card-header theme-header">
|
||
<img src="/rss/img/kink.jpg" alt="Kinks and fetishes compatibility couple" class="rounded-image object-left">
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="h3 fw-light">Unique Preferences</h3>
|
||
<p class="text">Find love with filters for kinks and personal desires tailored just for you.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="theme-card primary card-hover">
|
||
<div class="card-header theme-header">
|
||
<img src="/rss/img/family-frame.jpg" alt="Lifestyle compatibility couple" class="rounded-image object-bottom">
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="h3 fw-light">Lifestyle Connections</h3>
|
||
<p class="text">Connect with partners who share your passion for pets, fitness, or family values.</p>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<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="bg-white py-4">
|
||
<div class="container my-3">
|
||
<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">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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 Amor’s 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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="success-stories bg-white">
|
||
<div class="container text-light border-top border-bottom py-4 mb-3">
|
||
<div class="text-black">
|
||
<h2 class="mb-4 text-center">Love Found on Stella Amor</h2>
|
||
<div class="row">
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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!"
|
||
}
|
||
</script>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="filter-section bg-accent-white py-4">
|
||
<div class="container my-5">
|
||
<h2 class="mb-4 text-center">What You Can Filter By</h2>
|
||
<div class="row g-4">
|
||
<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 -->
|
||
</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>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Fetishes & Personalities</h3>
|
||
<p class="filter-text">Connect with those who share your unique desires and preferences.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</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>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</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>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Body Types & Ethnicities</h3>
|
||
<p class="filter-text">Discover love based on body preferences and cultural backgrounds.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Education & Travel Preferences</h3>
|
||
<p class="filter-text">Connect with those who share your academic and travel passions.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Health Habits & Exercise Frequency</h3>
|
||
<p class="filter-text">Find matches with similar health and fitness routines.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Job Roles & Living Arrangements</h3>
|
||
<p class="filter-text">Align with partners based on career and living situations.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Religion & Languages</h3>
|
||
<p class="filter-text">Meet those who share your faith and linguistic background.</p>
|
||
</div>
|
||
</div>
|
||
<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 -->
|
||
</div>
|
||
<h3 class="filter-title">Hobbies & Movie Genres</h3>
|
||
<p class="filter-text">Bond over shared interests and favorite films.</p>
|
||
</div>
|
||
</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>
|
||
</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> |