landing.ejs

<% layout('./layouts/landingpage') -%>

<header>
    <div class="container-fluid" id="mainheader">
        <div id="particles-js"></div>
        <div class="toggle">
            <i class="fas fa-snowflake"></i>
            <i class="fas fa-snowflake"></i>
        </div>
        <div class="container">
            <div class="row d-flex justify-content-center text-center">
                <div id="main-content">
                    <h1 class="display-1"><strong>Singapore Pet Services</strong></h1>
                    <h2>Your one stop portal for pet services</h2>
                    <form class="form-wrap mt-4" action="/services" method="GET">
                        <div class="btn-groups" role="group" aria-label="Basic example">
                            <input type="text" name="search" placeholder="What are your looking for?" class="btn-group1">
                            <button type="submit" class="btn-form" style="width: 150px;"><i class="fas fa-search"></i></span>SEARCH</button>
                        </div>
                    </form>
                    <div class="slider-link">
                        <a href="#">Browse Popular</a><span class="ml-1 mr-1">or</span> <a href="#">Recently
                            Addred</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<section class="main_section">
        <div class="section_header text-center">
                <h2>Latest Posting</h2>
        </div>
    <div class="container-fluid">
        <br>
        <div class="container">
        <div class="row justify-content-center">
            <% services.forEach(function(service) { %>
            <div class="col-md-4" id="maincard">
                <div class="card">
                    <div class="card-wrapper my-4 my-md-0">
                    <% if(services.length === 0 ) { %>
                    <li> No Post Yet</li>
                    <% } %>
                        <div class="card-img-top">
                            <img class="img-fluid" src="<%=service.images[0].url %>" alt="" style="width: 100%; height: 300px">
                        </div>
                        <div class="card-box py-4 px-4" style="height: 200px; max-height: 200px; overflow: hidden; color: white;">
                            <h3>
                                <%=service.name%>
                            </h3>
                            <p style="white-space: normal">Pet Service :
                                <%= service.tags %>
                            </p>
                            <p><%=service.location%></p>
                        </div>
                        <p id="rating" class="px-4 py-4" style="color: gold">
                            Reviews : 
                                <% for(var i = 0; i < 5; i++) { %>
                                <% if(i < service.avgRating) { %>
                                <i class="fas fa-star"></i>
                                <% } else if((service.avgRating - i) > 0 && (service.avgRating - i) < 1) { %>
                                <i class="fas fa-star-half-alt"></i>
                                <% } else { %>
                                <i class="far fa-star"></i>
                                <% } %>
                                <% } %>
                                ( <%= service.reviews.length %> )
                              </p>
                                <div class="card-footer bg-dark border-info"><a href="/services/<%= service.id %>" class="btn btn-outline-primary">More
                                    info</a></div>
                                  
                    </div>
                </div>
            </div>
            <% }) %>
           
        </div>
       
    </div>
</div>
</section>
<hr>

<section>
    <div class="container justify-content-center" style="margin: 0 auto" id="video">
        <h1 class="text-center">What is Singapore Pet Services?</h1>
        <br>
        <div class="video" style="margin: 0 auto; text-align: center;">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Nl5nIA7bEMw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>
</section>
<div id="map" style="height: 500px; width: 100%"></div>