<?php
/**
 * Page details
 */

$page_title = 'Exclusive Online Dating Platform with Advanced Match Filters';
$page_description = 'Join Stella Amor to experience the largest dating filters online. Enjoy personalized matchmaking with free first-month access. Start finding meaningful connections today!';
include($_SERVER['DOCUMENT_ROOT'] . '/rss/php/includes/header.php');
?>


<section class="landing-banner">
    <div class="overlay">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-12">
                    <h1>Explore the Future of Online Dating with StellaAmor</h1>
                    <p>Join StellaAmor for free and discover meaningful connections with our advanced match filters.
                        Love is just a click away!</p>
                </div>
                <div class="col-md-6 col-12">

                    <div class="home-container">
                        <h2>Sign Up</h2>
                        <form action="#" method="POST" id="signup">
                            <div class="form-field">
                                <label for="username">Username:</label>
                                <input type="text" id="username" placeholder="Username" required>
                                <div class="errors" id="usernameError"></div>
                            </div>

                            <div class="form-row">
                                <div class="form-field">
                                    <label for="email">Email:</label>
                                    <input type="email" id="email" placeholder="Enter your email" required>
                                    <div class="errors" id="emailError"></div>
                                </div>
                                <div class="form-field">
                                    <label for="u_dob">Date of birth:</label>
                                    <input type="date" id="u_dob" required>
                                    <div class="errors" id="dobError"></div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="gender-select form-field">
                                    <label for="gender">Gender:</label>
                                    <select id="gender" required>
                                        <option value="" disabled selected>Select your gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <div class="errors" id="genderError"></div>
                                </div>

                                <div class="country-select form-field">
                                    <label for="userCountry">Country:</label>
                                    <select id="userCountry" required>
                                    <option value="" disabled selected>Select your country</option>
                                    </select>
                                    <div class="errors" id="countryError"></div>
                                </div>
                            </div>

                            <div class="form-field">
                                <label for="password">Password:</label>
                                <input type="password" id="password" placeholder="Password" required>
                                <div class="errors" id="passwordError"></div>
                            </div>

                            <div class="form-field">
                                <label for="password2">Confirm Password:</label>
                                <input type="password" id="password2" placeholder="Confirm Password" required>
                                <div class="errors" id="password2Error"></div>
                            </div>

                            <div class="checkbox-container">
                                <label>
                                    <input type="checkbox" required> I am over 18 years old
                                </label>
                                <label>
                                    <input type="checkbox" required id="tos"> I accept the  <a class="link" target="_blank" href="/about#tos">terms of use</a>
                                </label>
                                <div class="errors" id=""></div>
                            </div>

                            <button type="submit">Sign up</button>
                            <i class="mdi mdi-loading" id="spinner"></i>
                        </form>

                        <div class="error" id="errors"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

<div class="container mt-10">
    <div class="row">
        <div class="col-md-6 col-s-12 align-self-center">
            <h2>Online dating made exclusive</h2>
            <p>We offer the widest search filter among all dating sites. To prove how good our platform is, we give each new member an entire month of free access. No binding periods and no credit card verifications.
                Our dating platform is built for people to be able to find exactly what they are looking for. Wheter if it's body features, preferences or future dreams, we have exactly what you need to find what you're looking for.
            </p>
        </div>
        <div class="col-md-6">
            <div class="image-container">
                <img alt="dating couple" src="/rss/img/couple.jpg" class="shadow">
            </div>
        </div>
    </div>
</div>

<div class="blue-banner">
    <div class="container mt-10">
        <div class="row">
            <div class="col-md-4 col-s-12">
                <div class="image-container">
                    <img src="/rss/img/save.png" alt="cheap dating" class="shadow">
                </div>
            </div>
            <div class="col-md-8 col-s-12 align-self-center">
                <h2>Free access first month, then $9.99</h2>
                <p>At Stella Amor, we want you to try out our dating platform for free, without worrying about spending. We have built the perfect platform for everyone. We will by that also aim to be the cheapest premium online dating site as well. After your first month, you'll only be paying approximately $9.99 per month, no binding periods.</p>
            </div>
        </div>
    </div>
</div>

<div class="container mt-10">
    <div class="row">
        <div class="col-md-8 col-s-12 align-self-center">
            <h2>Why Stella Amor Stands Out</h2>
            <p>Our goal is to provide you with the biggest filter you've ever seen. At Stella Amor's dating platform, you can filter by body features, finance, life goals, religion, sexual activity, pets, life situations and much much more.</p>
        </div>
        <div class="col-md-3 col-s-12">
            <div class="image-container">
                <img src="/rss/img/search.png" alt="dating filter">
            </div>
        </div>
    </div>
</div>

<?php include($_SERVER['DOCUMENT_ROOT'] . '/rss/php/includes/footer.php');?>