<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Add service worker -->
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                .then((registration) => {
                    console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch((error) => {
                    console.error('Service Worker registration failed:', error);
                });
        }
    </script>
    <%- include('partials/head') %>
    <style>
        .icon-circle {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ffffff;
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .icon-circle:hover {
            background-color: #eeeeee;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .icon-circle i {
            color: #333;
            font-size: 24px;
        }

        /* Scroll Progress Bar */
        #progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 6px;
            background-color: #2e8030;
            width: 0%;
            z-index: 9999;

        }
      }

      /* Scroll btn */
      #scroll{
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #1c1c1c;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 10px 16px;
        font-size: 20px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
    </style>

    <!-- Information Section -->
    <style>
      .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
    </style>

</head>
<body>
    <div id="progress-bar"></div>
    <%- include('partials/navbar') %>
    <div class="justify-content-center mb-3">
        <img src="/background.jpg" style="width: 100%; height: auto;" class="img-fluid">

    </div>

    <!-- Search Bar -->
    <%- include('partials/searchbar') %>

    <!-- Mission Section -->
    <section class="mission-section text-center">
      <div class="container">
        <h2 class="mb-4">Welcome to Scruter</h2>
        <p class="lead">
          Your go-to platform for buying, selling, and finding everything you
          need locally.
        </p>
        <p>
          Connecting communities and making local commerce easy and accessible
          for everyone.
        </p>
        <% if(!user) { %>
        <a href="/auth" class="btn btn-lg cta-button btn-outline-success mx-2"
          >Join Now</a
        >
        <% } %>
        <a href="/team" class="btn btn-lg cta-button btn-outline-success"
          >Our Team</a
        >
      </div>
    </section>

    <!-- Information Section -->
    <section class="container mt-5 mb-5 pb-5">
      <div class="row">
        <div class="col-md-4 d-flex justify-content-center">
          <div class="card text-center shadow h-100 card-hover">
            <div class="card-body d-flex flex-column justify-content-center">
              <h3 class="card-title">What is Scruter?</h3>
              <p class="card-text">
                Scruter is a local classifieds and community site designed to
                bring people together for buying, selling, and exchanging goods
                and services. With an easy-to-use interface, Scruter connects
                you with people in your local community, whether you're looking
                for a specific product, service, or simply to connect with
                like-minded individuals.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-4 d-flex justify-content-center">
          <div class="card text-center shadow h-100 card-hover">
            <div class="card-body d-flex flex-column justify-content-center">
              <h3 class="card-title">How It Works</h3>
              <p class="card-text">
                Post ads, browse listings, and connect with others in your
                community. Whether you're looking for food, housing, services,
                or just want to sell something, Scruter's platform allows
                seamless interaction between buyers and sellers with a few
                simple steps.
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-4 d-flex justify-content-center">
          <div class="card text-center shadow h-100 card-hover">
            <div class="card-body d-flex flex-column justify-content-center">
              <h3 class="card-title">Get Started</h3>
              <p class="card-text">
                Creating an account is easy and free. In just a few minutes, you
                can start posting ads and discover what your community has to
                offer. Join Scruter today and make buying, selling, or
                exchanging goods a smooth and hassle-free experience.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="container mt-5 mb-5 pb-5">
        <div class="row">
            <div class="col-md-4">
                <h3>Welcome to Our Project!</h3>
                <p>The Scruter Team is excited to be part of <strong>GSSoC Extended 2024</strong> and <strong>Hacktoberfest 2024</strong>, initiatives that empower global developers to contribute to open-source projects.</p>
            </div>
            <div class="col-md-4">
                <h3>Join Us!</h3>
                <p>Our project helps you <strong>discover local services and interact with your community</strong>. We are enhancing features to improve user experience.</p>
            </div>
            <div class="col-md-4">
                <h3>Get Involved!</h3>
                <p>All contributions are welcome! Hacktoberfest is a great way to dive into open source.</p>
            </div>
        </div>
        
        <section class="container mt-5 mb-5 pb-5">
            <p class="text-center">Explore our repository: <a href="https://github.com/swarooppatilx/scruter" target="_blank" class = "repo-link"> <i class="fab fa-github"></i> GitHub Repository Link</a> and start contributing!</p>
        </section>
    </section>
    

    <!-- Custom CSS -->
    <style>
      .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }

      .repo-link {
        color: #007bff; /* Bootstrap primary color */
        font-weight: bold;
        text-decoration: none; /* Remove underline */
        padding: 5px 10px; /* Add some padding */
        border: 2px solid #007bff; /* Add border */
        border-radius: 5px; /* Rounded corners */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    }

      .repo-link:hover {
        background-color: #007bff; /* Change background on hover */
        color: white; /* Change text color on hover */
   }
    </style>

    <%- include('partials/footer') %> <%- include('partials/bottom_nav') %>
    <script>
      // /preloader js styling
      let preloader = document.querySelector("#preloader");
      window.addEventListener("load", function (e) {
        preloader.style.display = "none";
      });
    </script>

    <%- include('partials/bottom_nav') %>

    <!-- Scroll Progress Script -->
    <script>
        window.onscroll = function() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            document.getElementById("progress-bar").style.width = scrolled + "%";
        };
    </script>

    
    <script>
      window.embeddedChatbotConfig = {
      chatbotId: "3y5y_b4ZtgDExQUL8b2_A",
      domain: "www.chatbase.co"
      }
      </script>
      <script
      src="https://www.chatbase.co/embed.min.js"
      chatbotId="3y5y_b4ZtgDExQUL8b2_A"
      domain="www.chatbase.co"
      defer>
      </script>
    <button id="scroll" onclick="scrollToTop()"><i class="fa-solid fa-arrow-up"></i></button>

  </body>

</body>

</html>
