index.html

<!doctype html>
<html lang="en">
   
<head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

      <link rel="stylesheet" href="assets/libs/swiper/swiper-bundle.min.css" />
      <link rel="stylesheet" href="assets/libs/glightbox/dist/css/glightbox.min.css" />
      <!-- Favicon icon-->
      <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png" />
      <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png" />
      <link rel="manifest" href="assets/images/favicon/site.html" />
      <link rel="mask-icon" href="assets/images/favicon/block-safari-pinned-tab.svg" color="#4E9F3D" />
      <link rel="shortcut icon" href="assets/images/favicon/favicon.ico" />
      <meta name="msapplication-TileColor" content="#4E9F3D" />
      <meta name="msapplication-config" content="assets/images/favicon/tile.xml" />

      <!-- Color modes -->
      <script src="assets/js/vendors/color-modes.js"></script>

      <!-- Libs CSS -->
      <link href="assets/libs/simplebar/dist/simplebar.min.css" rel="stylesheet" />
      <link href="assets/libs/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />

      <!-- Scroll Cue -->
      <link rel="stylesheet" href="assets/libs/scrollcue/scrollCue.css" />

      <!-- Box icons -->
      <link rel="stylesheet" href="assets/fonts/css/boxicons.min.css" />

      <!-- Theme CSS -->
      <link rel="stylesheet" href="assets/css/theme.min.css" />

      <title>GreenPayer - Payment Gateway for the M3tering Protocol</title>
   </head>

   <body>
      <!-- Navbar -->
      <header>
         <nav class="navbar navbar-expand-lg transparent navbar-transparent navbar-dark">
            <div class="container px-3">
               <a class="navbar-brand" href="index.html">GreenPayer</a>
               <!-- <a class="navbar-brand" href="index.html"><img src="assets/images/logo/logo.svg" alt />GreenPayer</a> -->
               <button class="navbar-toggler offcanvas-nav-btn" type="button">
                  <i class="bi bi-list"></i>
               </button>
               <div class="offcanvas offcanvas-start offcanvas-nav" style="width: 20rem">
                  <div class="offcanvas-header">
                     <a href="index.html" class="text-inverse"><img src="assets/images/logo/logo.svg" alt /></a>
                     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                  </div>
                  <div class="offcanvas-body pt-0 align-items-center">
                     <ul class="navbar-nav mx-auto align-items-lg-center">
                        <li class="nav-item">
                           <a class="nav-link" href="#" role="button" >TechandSun</a>
                        </li>
                        <!-- <li class="nav-item">
                           <a class="nav-link" href="#" role="button" >M3tering Protocol</a>
                        </li> -->

                     </ul>
                     <div class="mt-3 mt-lg-0 d-flex align-items-center">
                        <a href="#starter" class="btn btn-primary mx-2">Get Started</a>
                     </div>
                  </div>
               </div>
            </div>
         </nav>
      </header>

      <main>
         <!--Hero start-->
         <section class="bg-primary-dark pt-9 right-slant-shape" data-cue="fadeIn">
            <div class="container">
               <div class="row align-items-center">
                  <div class="col-lg-5 col-12">
                     <div class="text-center text-lg-start mb-7 mb-lg-0" data-cues="slideInDown">
                        <div class="mb-4">
                           <h1 class="mb-5 display-5 text-white-stable">
                              Energy Payments
                              <span class="text-pattern-line text-warning">at it's Finest</span>
                           </h1>
                           <p class="mb-0 text-white-stable lead">Payment Gateway for all TechandSun_NG stations on the M3tering Protocol.</p>
                        </div>
                        <div data-cues="slideInDown">
                           <a href="#starter" class="btn btn-primary me-2">Get Started</a>
                           <a href="#" class="btn btn-outline-warning">Contact Support</a>
                        </div>
                     </div>
                  </div>
                  <div class="offset-lg-1 col-lg-6 col-12">
                     <div class="position-relative z-1 pt-lg-9" data-cue="slideInRight">
                        <div class="position-relative">
                           <img src="assets/images/logo/africanpaying.jpg" alt="video" class="img-fluid rounded-3" width="837" />
                           <a
                              href="https://www.youtube.com/watch?v=QD8xBSOZuRM&t=20s"
                              class="play-btn glightbox position-absolute top-50 start-50 translate-middle icon-shape icon-xl rounded-circle text-primary">
                              <i class="bi bi-play-fill"></i>
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!--Hero start-->

         <!--Featured in start-->
         <div class="my-xl-9 my-5">
            <div class="container">
               <div class="row">
                  <div class="col-lg-10 offset-lg-1 col-12" data-cue="fadeIn">
                     <div class="text-center mb-4 mb-lg-7">
                        <small class="text-uppercase fw-semibold ls-md">Powered By Our Partners</small>
                     </div>

                     <div
                        class="swiper-container swiper"
                        id="swiper-1"
                        data-pagination-type=""
                        data-speed="400"
                        data-space-between="100"
                        data-pagination="true"
                        data-navigation="false"
                        data-autoplay="true"
                        data-autoplay-delay="3000"
                        data-breakpoints='{"480": {"slidesPerView": 2}, "768": {"slidesPerView": 3}, "1024": {"slidesPerView": 5}}'>
                        <div class="swiper-wrapper pb-6">
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/taslogo_inverted-removebg-preview.png" class="logoguide" alt="logo" style="width: 70%;"/>
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/dex.png" class="logoguide" alt="logo" style="margin: 10px auto;" />
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/m3tering protocol.png" class="logoguide" alt="logo" />
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/Arbitrum.png" class="logoguide" alt="logo" style="margin: 20px auto; width: 50remm;" />
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/greenpill.png" class="logoguide" alt="logo" style="width: 70%;"/>
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/Switch Electric PNG croped.png.webp" class="logoguide " style="margin: 50px auto;" alt="logo" />
                              </figure>
                           </div>
                           <div class="swiper-slide">
                              <figure class="text-center">
                                 <img src="assets/images/logo/share-logo.png" class="logoguide " style="margin: 50px auto;" alt="logo" />
                              </figure>
                           </div>
                           
                           <!-- Add more slides as needed -->
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                        <!-- Add Navigation -->
                        <div class="swiper-navigation">
                           <div class="swiper-button-next"></div>
                           <div class="swiper-button-prev"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!--Featured in end-->

         <!--Get block card start-->
         <section class="my-xl-4 py-4">
            <div class="container" data-cue="fadeIn">
               <div class="row">
                  <div class="col-lg-5 col-md-12" data-cue="fadeIn">
                     <div class="mb-xl-7 mb-5">
                        <h2 class="mb-3">
                           Get Started in
                           <span class="text-primary">3 simple steps</span>
                        </h2>
                        <p class="mb-0">All payment here processed on the Behalf of TechandSun_NG</p>
                     </div>
                  </div>
               </div>
               <div class="table-responsive-xl">
                  <div class="row flex-nowrap pb-4 pb-lg-0 me-5 me-lg-0">
                     <div class="col-lg-4 col-md-6 col-12" data-cue="slideInLeft">
                        <div class="p-xl-5">
                           <div class="d-flex align-items-center justify-content-between mb-5">
                              <div class="icon-xl icon-shape rounded-circle bg-primary border border-primary-subtle border-4 text-white-stable fw-semibold fs-3">1</div>
                              <span>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-right text-body-tertiary" viewBox="0 0 16 16">
                                    <path
                                       fill-rule="evenodd"
                                       d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                                 </svg>
                              </span>
                           </div>

                           <h3 class="h4">Fill The Below Form</h3>
                           <p class="mb-0">Please fill in the amount of flat (Naira) you are paying</p>
                        </div>
                     </div>
                     <div class="col-lg-4 col-md-6 col-12" data-cue="slideInLeft">
                        <div class="p-xl-5">
                           <div class="d-flex align-items-center justify-content-between mb-5">
                              <div class="icon-xl icon-shape rounded-circle bg-primary border border-primary-subtle border-4 text-white-stable fw-semibold fs-3">2</div>
                              <span>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-right text-body-tertiary" viewBox="0 0 16 16">
                                    <path
                                       fill-rule="evenodd"
                                       d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                                 </svg>
                              </span>
                           </div>

                           <h3 class="h4">Complete Your Payment on Paystack</h3>
                           <p class="mb-0">You will be redirected to paystack to complete your payment, please your payment through any of the available payment options on the gateway</p>
                        </div>
                     </div>
                     <div class="col-lg-4 col-md-6 col-12" data-cue="slideInLeft">
                        <div class="p-xl-5">
                           <div class="d-flex align-items-center justify-content-between mb-5">
                              <div class="icon-xl icon-shape rounded-circle bg-primary border border-primary-subtle border-4 text-white-stable fw-semibold fs-3">3</div>
                              <span>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                                    <path
                                       d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                 </svg>
                              </span>
                           </div>

                           <h3 class="h4">Show Your Paystack receipt</h3>
                           <p class="mb-0">Show the TAS station operator your receipt and Hand over your Device for charging, thats all</p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-12" data-cue="zoomIn">
                     <div class="text-center my-5" id="starter">
                        <a href="#starter" class="btn btn-outline-primary">Let's Go!</a>
                     </div>
                  </div>
               </div>
            </div>
         </section >
         <!--Get block card end-->

          <!--Form section start-->
         <section class="bg-light py-lg-4 py-4">
            <div class="container">
               <div class="row justify-content-center">
                  <div class="col-lg-10">
                     <div class="card shadow-lg">
                        <div class="row g-0">
                           <div
                              class="col-md-6 d-none d-md-block rounded-start-3"
                              style="
                                 background-image: url(./assets/images/logo/station.jpg);
                                 background-size: cover;
                                 background-repeat: no-repeat;
                                 background-position: center;

                              ">
                              <!-- for mobile img-->
                           </div>
                           <div class="col-xl-6 col-md-6">
                              <div class="card-body p-md-5">
                                 <form class="row needs-validation g-3" novalidate>
                                    <div class="col-lg-12">
                                       <div>
                                          <h3>Make Payment Here!</h3>
                                          <p class="mb-0">
                                             Enter the amount you want to pay for the service. 
                                             Please note that you will be redirected to a paystack gateway to complete your payment.
                                          </p>
                                       </div>
                                    </div>
                                 
                                    <div class="col-md-12">
                                       <label for="companyPhoneInput" class="form-label">
                                          Amount Due
                                          <span class="text-danger">*</span>
                                       </label>
                                       <input type="number" class="form-control" id="companyPhoneInput" required />
                                       <div class="invalid-feedback">Please enter the Amount due.</div>
                                    </div>
                                    <div class="col-md-12 disabled">
                                       <label for="disabledSelect" class="form-label">Payment To</label>
                                       <select id="disabledSelect" class="form-select">
                                          <option>TechandSun_NG</option>
                                       </select>                              
                                    </div>
                                    <div class="col-12">
                                       <div class="form-check">
                                          <input class="form-check-input" type="checkbox" value="" id="companyCheckagree" required />
                                          <label class="form-check-label" for="companyCheckagree">
                                             I agree to the
                                             <a href="#!">privacy policy</a>
                                          </label>
                                          <div class="invalid-feedback">You must agree before submitting.</div>
                                       </div>
                                    </div>
                                    <div class="d-grid">
                                       <button class="btn btn-primary rounded-pill" type="submit">Proceed</button>
                                    </div>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!--Form section end-->

         <!--Call to action start-->
         <section>
            <div style="background-image: url(assets/images/pattern/cta-pattern.png); background-position: center; background-repeat: no-repeat; background-size: cover" class="py-7 bg-primary-dark">
               <div class="container my-lg-7" data-cue="zoomIn">
                  <div class="row">
                     <div class="col-lg-8 offset-lg-2">
                        <div class="text-center mb-5">
                           <h2 class="text-white-stable mb-3">Learn More About US!</h2>
                           <p class="mb-0 text-white-50">
                              Our Goal at TechandSun_NG and Greenpayer  is to Make electricity from the sun accessible on demand one step at a time!
                           </p>
                        </div>
                     </div>
                     <div class="col-lg-12">
                        <div class="text-center">
                           <a href="https://x.com/techandsun_ng" class="btn btn-primary">Ask Us Anything!</a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!--Call to action end-->
      </main>
      <!-- Footer -->
      <footer class="pt-7">
         <div class="container">
            <!-- Footer 4 column -->
            <div class="row">
               <div class="col-xxl-5 col-lg-5 col-md-7">
                  <div class="mb-7 mb-xl-0">
                     <div class="mb-4">
                        <a href="#">
                           GreenPayer
                        </a>
                     </div>
                     <p class="mb-5">Flat Payment Gateway for the M3tering Protocol</p>

                     <!-- <form class="needs-validation" novalidate>
                        <h5 class="mb-3">Subscribe to our newsletter</h5>
                        <div class="row g-2">
                           <div class="col-lg-9 col-8">
                              <label for="subscribeEmail" class="visually-hidden">Email</label>
                              <input type="email" class="form-control" id="subscribeEmail" placeholder="Email address" required />
                              <div class="invalid-feedback">Please enter email.</div>
                           </div>
                           <div class="col-lg-3 col-4">
                              <div>
                                 <button type="submit" class="btn btn-primary">Subscribe</button>
                              </div>
                           </div>
                        </div>
                     </form> -->
                  </div>
               </div>
               <div class="offset-xxl-1 col-xxl-6 col-lg-6 offset-md-1 col-md-4">
                  <div class="row" id="ft-links">
                     <div class="col-lg-4 col-12">
                        <div class="position-relative">
                           <div class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0">
                              <h5>Learn About Our Partners</h5>
                              <a
                                 class="d-block d-lg-none stretched-link text-inherit"
                                 data-bs-toggle="collapse"
                                 href="#collapseLanding"
                                 role="button"
                                 aria-expanded="false"
                                 aria-controls="collapseLanding">
                                 <i class="bi bi-chevron-down"></i>
                              </a>
                           </div>
                           <div class="collapse d-lg-block" id="collapseLanding" data-bs-parent="#ft-links">
                              <ul class="list-unstyled mb-0 py-3 py-lg-0">
                                 <li class="mb-2">
                                    <a href="https://x.com/techandsun_ng" class="text-decoration-none text-reset">TechandSun_NG</a>
                                 </li>
                                 <li class="mb-2">
                                    <a href="https://m3tering.whynotswitch.com/" class="text-decoration-none text-reset">M3tering Protocol</a>
                                 </li>
                                 <li class="mb-2">
                                    <a href="https://arbitrum.foundation/" class="text-decoration-none text-reset">Arbitrum</a>
                                 </li>
                                 <li class="mb-2">
                                    <a href="https://x.com/GreenpillNaija" class="text-decoration-none text-reset">GreenPill Nigeria</a>
                                 </li>
                                 <li class="mb-2">
                                    <a href="https://www.whynotswitch.com/" class="text-decoration-none text-reset">Switch Electric</a>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     
                     <div class="col-lg-6 col-12">
                        <div class="mb-3 pb-2 d-flex justify-content-between border-bottom border-bottom-lg-0 position-relative">
                           <h5>Resources</h5>
                           <a
                              class="d-block d-lg-none stretched-link text-inherit"
                              data-bs-toggle="collapse"
                              href="#collapseResources"
                              role="button"
                              aria-expanded="false"
                              aria-controls="collapseResources">
                              <i class="bi bi-chevron-down"></i>
                           </a>
                        </div>
                        <div class="collapse d-lg-block" id="collapseResources" data-bs-parent="#ft-links">
                           <ul class="list-unstyled mb-0 py-3 py-lg-0">
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Support</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Community</a>
                              </li>
                              <li class="mb-2">
                                 <a href="#!" class="text-decoration-none text-reset">Webinars</a>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="container mt-7 mb-3">
            <div class="row align-items-center">
               <div class="col-md-9">
                  <div class="small mb-3 mb-md-0">
                     Copyright © 2024

                     <span class="text-primary"><a href="#">GreenPayer</a></span>
                     | Developed by
                     <span class="text-primary"><a href="#">DE LTD</a></span>
                  </div>
               </div>
               <div class="col-md-3">
                  <div class="text-md-end d-flex align-items-center justify-content-md-end">
                     <div class="dropdown">
                        <button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
                           <i class="bi theme-icon-active lh-1"></i>
                           <span class="visually-hidden bs-theme-text">Toggle theme</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
                           <li>
                              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                                 <i class="bi theme-icon bi-moon-stars-fill"></i>
                                 <span class="ms-2">Dark</span>
                              </button>
                           </li>
                           <li>
                              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                                 <i class="bi theme-icon bi-circle-half"></i>
                                 <span class="ms-2">Auto</span>
                              </button>
                           </li>
                        </ul>
                     </div>
                     <div class="ms-3 d-flex gap-2">
                        <a href="https://x.com/techandsun_ng" class="text-reset btn btn-twitter btn-icon">
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                              <path
                                 d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
                           </svg>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </footer>
      <!-- Scroll top -->
      <div class="btn-scroll-top">
         <svg class="progress-square svg-content" width="100%" height="100%" viewBox="0 0 40 40">
            <path d="M8 1H32C35.866 1 39 4.13401 39 8V32C39 35.866 35.866 39 32 39H8C4.13401 39 1 35.866 1 32V8C1 4.13401 4.13401 1 8 1Z" />
         </svg>
      </div>
      <!-- Libs JS -->
      <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
      <script src="assets/libs/simplebar/dist/simplebar.min.js"></script>
      <script src="assets/libs/headhesive/dist/headhesive.min.js"></script>

      <!-- Theme JS -->
      <script src="assets/js/theme.min.js"></script>

      <script src="assets/libs/jarallax/dist/jarallax.min.js"></script>
      <script src="assets/js/vendors/jarallax.js"></script>
      <script src="assets/libs/parallax-js/dist/parallax.min.js"></script>
      <script src="assets/js/vendors/parallax.js"></script>
      <!-- Swiper JS -->
      <script src="assets/libs/swiper/swiper-bundle.min.js"></script>
      <script src="assets/js/vendors/swiper.js"></script>
      <script src="assets/libs/glightbox/dist/js/glightbox.min.js"></script>
      <script src="assets/js/vendors/glight.js"></script>
      <script src="assets/libs/scrollcue/scrollCue.min.js"></script>
      <script src="assets/js/vendors/scrollcue.js"></script>
   </body>

</html>