<?php
include('../includes/functions.php');
session_start();
make_connection();
if(is_loggedin())
    redirect_to('home.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="js/jquery.js"></script>
    <meta name="Language" content="en" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Utopia - Smarter and Connected City</title>
    <meta name="description" content="Utopia - a one place stop for a smarter and mpre connected city." />
    <meta name="keywords" content="VIT, Book, Share, old, rent">
    <meta name="author" content="harshit kedia,harshitkedia32@gmail.com">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Utopia - Smarter City" />
    <meta property="og:url" content="" />
    <meta property="og:title" content="Utopia - Smarter City" />
    <meta property="og:description" content="Utopia - a one place stop for a smarter city." />
    <meta property="og:image" content="" />
    <meta itemprop="name" content="Utopia - Smarter City" />
    <meta itemprop="description" content="Utopia - a one place stop for a smarter city." />
    <meta itemprop="image" content="images/favicon.ico" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="" />
    <meta name="twitter:title" content="Utopia - Smarter City" />
    <meta name="twitter:description" content="Utopia - a one place stop for a smarter city." />
    <meta name="twitter:image" content="images/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/rjday/apple-touch-icon-152x152.png" />
    <link rel="icon" type="image/png" href="images/favicon.ico" sizes="16x16" />
    <link rel="icon" type="image/png" href="images/favicon.ico" sizes="128x128" />
    <link rel="icon" href="images/favicon.ico" />
    <link rel="icon" type="image/png" href="images/utopia.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="images/utopia.png" sizes="128x128" />
    <link rel="icon" href="images/utopia.png" />
    <link rel="stylesheet" type="text/css" href="css/preloader.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/home-slider.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
    .fa-div{
        text-align: center;

    }
    #thirdpage{
        padding: 40px 0;
    }
    .half-underline{
        position: relative;
        display: inline-block;
    }
    .half-underline:before{
        content: "";
        position: absolute;
        width: 50%;
        height: 1px;
        bottom: 0;
        left: 25%;
        border-bottom: 2px solid red;
    }
    .underline{
        text-decoration: underline;
    }
    #secondpage{
        padding: 20px 0;
    }
</style>
<script src="js/wow.js" type="text/javascript"></script>
<script>
  new WOW().init();
</script>
<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script type="text/javascript">
   (function(){
      emailjs.init("user_N4tbQO3DhT5HZfYujve5X");
  })();
</script>

<script type="text/javascript">
    function sendmail_contactus(){
        var name_var=$("#name_contact").val()+" From vitbookshare.in";
        var email_var=$("#email_contact").val();
        var message_var=$("#message_contact").val();
        emailjs.send("gmail","contact_us",{email: email_var,name: name_var, message:message_var })
        .then(function(response) {
            alert("Thank you for contacting us. We will get back to you soon.");
            console.log("SUCCESS. status=%d, text=%s", response.status, response.text);
        }, function(err) {
            alert("There was an error");
            console.log("FAILED. error=", err);
        });
    }
</script>

</head>
<body id="demo">
    <div id="demo-content">
    <div id="loader-wrapper">
        <div id="loader"></div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>

    </div>
    <div class="main">
        <ul class="cb-slideshow">
            <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span></li>
            <li><span>Image 05</span></li>
            <li><span>Image 06</span></li>
        </ul>
        <div class="main-content">
            <div class="fbdiv">
                <a target="_blank" class="facebook" href="https://www.facebook.com/"><span></span><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
            </div>
            <h1 class="vittitle wow fadeIn">Utopia - Smarter City</h1>
            <div class="container">
                <div class="type-div center" id="type1">
                  <!--    <span class="type-no" id="type_no"></span> -->
                  <h3 class="type-text vitmotto" id="type_text"></h3>
              </div>

          </div>
          <!-- <h3 class="vitmotto">A one place stop for a smarter city</h3> -->
          <hr class="underlinehr">
          <div class="butdiv center">

            <a data-wow-delay="1s" class="wow fadeInUp" href="signup.php"  style="margin-right: 10px">
                <button class="waves-effect waves-light btn">Sign up <i class="material-icons right">perm_identity</i></button>
            </a>
            <a href="login.php" class="wow fadeInUp" data-wow-delay="1s" style="margin-left: 10px">
                <button class="waves-effect waves-light btn">Login <i class="material-icons right">send</i></button>
            </a>
        </div>
        <br><br><br><br><br>
        <div class="fa-div wow fadeIn">
            <a href="#secondpage" onclick="$('html, body').animate({scrollTop: $('#secondpage').offset().top}, 600);" id="scrollto" style="color: #ffffff;"><i class="bounce fa fa-angle-down fa-3x" aria-hidden="true"></i></a>
        </div>
    </div>
</div>
<div id="secondpage">
    <div class="container">
        <br/>
        <div class="center">
            <h4 class="center feature-heading wow fadeInUp">Avail Services</h4>
        </div>
        <br/>
        <div class="row features-row">
            <div class="col s12 m6  wow fadeIn">
                <div class="card z-depth-1 feature-card">
                    <div class="col s3 m4">
                        <i class="fas fa-book fa-3x"></i>
                    </div>
                    <div class="col s9 m8">
                        <h5 class="feature-heading">Book Sharing</h5>
                        <h6>A lot of citizens, specially students, throw away the books they no longer need. Lets join our hands to share and preserve books. Search books you need by category, name, place.</h6>
                    </div>
                </div>
            </div>
            <div class="col s12 m6  wow fadeIn">
                <div class="card z-depth-1 feature-card">
                    <div class="col s3 m4">
                        <i class="fab fa-stack-exchange fa-3x"></i>
                    </div>
                    <div class="col s9 m8">
                        <h5 class="feature-heading">Grievances</h5>
                        <h6>Have a grievance that you would like to share with the public and the authorities? Post your grievances here and let the city know. Upvote and share other's grievances.</h6>
                    </div>
                </div>
            </div>
            <div class="col s12 m6 wow fadeIn">
                <div class="card z-depth-1 feature-card">
                    <div class="col s3 m4">
                        <i class="fas fa-comments fa-3x"></i>
                    </div>
                    <div class="col s9 m8">
                        <h5 class="feature-heading">Recommendations</h5>
                        <h6>Visited an awesome restaurant or movie and want the city know how much you love it? Write yours here to share with others or read others.</h6>
                    </div>
                </div>
            </div>
            <div class="col s12 m6 wow fadeIn">
                <div class="card z-depth-1 feature-card">
                    <div class="col s3 m4">
                        <i class="fas fa-bullhorn fa-3x"></i>
                    </div>
                    <div class="col s9 m8">
                        <h5 class="feature-heading">News</h5>
                        <h6>Got any news or happenings in your area? Share it here to let the city know. Read, upvote and share news posted by others. Be aware.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="thirdpage">
    <div class="container">
        <div class="row features-row">
            <div class="col s12 m6" style="background-color: #262a2d;">
                <h4 class="feature-heading wow fadeInDown">#Discover trending News</h4>
            </div>
            <div class="col s12 m6 wow fadeIn">
                <a class="twitter-timeline"  href="https://twitter.com/hashtag/Vellore" data-widget-id="976246171831123968">#Vellore Tweets</a>




            </div>
        </div>
    </div>
</div>
<br><br>
<div class="contactus-wrap" id="contactus">
  <div class="container">
    <div class="col s12 center wow fadeInUp">
      <h4 class="heading white-text feature-heading wow fadeIn">Contact Us</h4>
  </div>
  <br><br>
  <div class="row center contactus-info wow fadeIn">
      <div class="addressdiv col s12 m3 center"><i class="fa fa-map-marker smooth-transition" aria-hidden="true"></i>
        &nbsp;Delhi, India
    </div>
    <div class="emaildiv col s12 m5 center">
        <i class="fa fa-envelope smooth-transition" aria-hidden="true"></i>&nbsp;<a
        href="mailto:contact@utopia.com" class="" style="color: #eee;" target="_blank">contact@utopia.com</a>
    </div>
    <div class="phndiv col s12 m4 center">
        <i class="fa fa-phone-square smooth-transition" aria-hidden="true"></i>&nbsp;+91
        9585602122
    </div>
</div>
<div class="row wow fadeIn">
  <form action="/contact/create" method="post">
    <div class="col s12">
      <div class="input-field col s12 m6">
        <input id="name_contact" type="text" name="name" required>
        <label for="name_contact">Name</label>
    </div>
    <div class="input-field col m6 s12">
        <input id="email_contact" type="email" name="email" required data-success="seems good"
        data-error="something is wrong">
        <label for="email_contact">Email</label>
    </div>
    <div class="input-field col s12">
        <input type="text" name="subject" required id="subject">
        <label for="subject">Subject</label>
    </div>
    <div class="input-field col s12">
        <textarea id="message_contact" class="materialize-textarea" name="message" required></textarea>
        <label for="message_contact">Message</label>
    </div>
    <input type="hidden" name="_csrf" value="null">
    <div class="col s12 center-align">
        <button class="btn waves-effect waves-light contact-sub-but" type="submit" name="action">Submit
          <i class="material-icons right">send</i>
      </button>
  </div>

</div>
</form>
</div>

</div>
</div>
<br/>
<footer class="wow fadeIn">
    <hr style="border-color: #808080" />
    <div class="container">
        <div class="row">
            <div class="col s8 offset-s2 m4 offset-m4 center">
                <img src="images/utopia.png" class="responsive-img" />
                <h6 class="center">Smart & Connected City</h6>
                <div class="social-div center">
                    <a href="https://www.facebook.com" target="_blank" class="social-a social-facebook"><i class="smooth-transition fa fa-2x fa-facebook"
                       aria-hidden="true"></i>
                   </a>
                   <a href="https://twitter.com" target="_blank" class="social-a social-twitter"><i class="smooth-transition fa fa-2x fa-twitter"
                    aria-hidden="true"></i>
                </a>
                <a href="https://www.instagram.com" target="_blank" class="social-a social-instagram"><i class="smooth-transition fa fa-2x fa-instagram"
                    aria-hidden="true"></i>
                </a>
            </a> 
            <a href="https://github.com/hkedia321" target="_blank" class="social-a social-github"><i class="smooth-transition fa fa-2x fa-github"
             aria-hidden="true"></i>
         </a>

     </div>
     <div class="footer-follow-text white-text center">Follow us for latest updates</div>
 </div>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/preloader.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script>window.zEmbed||function(e,t){var n,o,d,i,s,a=[],c=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,c.src="javascript:false",c.title="",c.role="presentation",(c.frameElement||c).style.cssText="display: none",(d=(d=document.getElementsByTagName("script"))[d.length-1]).parentNode.insertBefore(c,d),i=c.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,c.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="winuall.zendesk.com",this.zEQueue=a,this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close()}()</script>
    <script type="text/javascript">
      $(document).ready(function() {
        Materialize.updateTextFields();
    });
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript" src="js/typewriter.js"></script>
<script type="text/javascript" src="js/type.js"></script>
</div>
</body>
</html>