TKK_E32232379/index.html

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Index - Smart Pot</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="assets/img/logo.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">

</head>

<body class="index-page">

  <header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl position-relative d-flex align-items-center">

      <a href="index.html" class="logo d-flex align-items-center me-auto">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <!-- <img src="assets/img/logo.webp" alt=""> -->
        <img src="assets/img/logo.png" alt="Logo Smart Pot" style="width: 40px; height: 40px; margin-right: 8px;">
        <h1 class="sitename">Smart Pot</h1>
      </a>

      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="#hero" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">DOKUMENTASI</a></li>
          <li><a href="#team">Team</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

      <a class="btn-getstarted" href="./login/">Monitoring & Kontroller</a>

    </div>
  </header>

  <main class="main">

    <!-- Hero Section -->
    <section id="hero" class="hero section dark-background">

      <div class="container">
        <div class="row gy-4">
          <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center" >
            <h1>Welcome to Smart Pot</h1>
            <p>Pantau kelembapan tanah, suhu, kelembapan udara, dan cahaya secara real-time, lalu biarkan sistem menyiram tanamanmu secara otomatis.</p>
            <div class="d-flex">
              <a href="#about" class="btn-get-started">Get Started</a>
              <!-- <a href="https://youtu.be/dcBnm7qmVas?si=Y_RKb9E7FQ6nAzD6" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
            </div>
          </div>
          <div class="col-lg-6 order-1 order-lg-2 hero-img"  data-aos-delay="200">
            <img src="assets/img/logo_kampus.png" class="img-fluid animated" alt="">
          </div>
        </div>
      </div>

    </section><!-- /Hero Section -->

    <!-- About Section -->
    <section id="about" class="about section">

      <!-- Section Title -->
      <div class="container section-title" >
        <h2>About Us</h2>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-6 content"  data-aos-delay="100">
            <p>Smart Pot merupakan platform monitoring dan kontrol penyiraman tanaman berbasis Internet of Things (IoT)
              yang dirancang untuk membantu pengguna dalam mengelola penyiraman tanaman secara lebih efektif dan efisien.
              Sistem ini memanfaatkan sensor kelembapan tanah untuk memantau kondisi media tanam
              secara real-time serta mengendalikan proses penyiraman secara otomatis melalui website.</p>
            <ul>
              <li><i class="bi bi-check2-circle"></i> <span>Monitoring kelembapan tanah secara real-time..</span></li>
              <li><i class="bi bi-check2-circle"></i> <span>Kontrol penyiraman manual, otomatis maupun waktu penjadwalan melalui website.</span></li>
              <li><i class="bi bi-check2-circle"></i> <span>Pemantauan suhu dan kelembapan udara secara online.</span></li>
              <li><i class="bi bi-check2-circle"></i> <span>Riwayat monitoring dan penyiraman tersimpan dan dapat diakses kapan saja.</span></li>
            </ul>
          </div>

          <div class="col-lg-6"  data-aos-delay="200">
            <p><b>Team :</b> <br>Ahmad Baidhowi Alimudin | E32232379 <br>Afi Wisnu Wardana | E32232380 <br> Zamira Areta Arkhab | NIM. E32231320 <br><b>Instansi :</b> <br> Politeknik Negeri Jember <br> <b>Jurusan :</b> <br> Teknologi Informasi <br>
              <b>Program Studi :</b> <br> Teknik Komputer <br> <b> Dosen Pembimbing :</b> <br> Victor Phoa S.Si., M.Cs. <br>
              <b> Judul Tugas Akhir :</b> <br> Perancangan Sistem Penyiraman Tanaman Multi Pot Berbasis Website Menggunakan Sensor Kelembapan Tanah dan Solenoid Valve.</p>
          </div>

        </div>

      </div>

    </section><!-- /About Section -->

    <!-- Why Us Section -->
    <section id="why-us" class="section why-us light-background" data-builder="section">

      <div class="container-fluid">

        <div class="row gy-4">

          <div class="col-lg-7 d-flex flex-column justify-content-center order-2 order-lg-1">

          <div class="content px-xl-5"  data-aos-delay="100">
            <h3 class="d-flex align-items-center gap-2">
              <img src="assets/img/logo_mitra.png" style="width: 60px; height: 60px;">
              <strong>YUSUF BIBIT</strong></h3>
              <p>Mitra penelitian dalam pengembangan sistem Smart Pot adalah Yusuf Bibit, 
                sebuah usaha pembibitan tanaman yang bergerak di bidang budidaya dan penjualan berbagai jenis bibit tanaman. 
              </p>
            </div>

            <div class="faq-container px-xl-5"  data-aos-delay="200">

              <div class="faq-item faq-active">

                <h3><span>01</span> DESKRIPSI MITRA</h3>
                <div class="faq-content">
                  <p>Yusuf Bibit merupakan usaha pembibitan tanaman yang bergerak di bidang budidaya dan penjualan berbagai jenis bibit tanaman buah, tanaman hias, serta tanaman produktif lainnya. Usaha ini berlokasi di Dusun Krajan, Curahmalang, Kecamatan Rambipuji, Kabupaten Jember, Jawa Timur, Kode Pos 68152. Dalam kegiatan operasionalnya, Yusuf Bibit melayani kebutuhan masyarakat, petani, maupun pelaku usaha pertanian yang membutuhkan bibit berkualitas. Proses perawatan tanaman, khususnya penyiraman, masih dilakukan secara manual sehingga membutuhkan waktu dan tenaga yang cukup besar.</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->

              <div class="faq-item">
                <h3><span>02</span> LAHAN DAN JENIS TANAMAN</h3>
                <div class="faq-content">
                  <p>Yusuf Bibit memiliki area pembibitan dengan luas 500 meter persegi yang digunakan untuk menampung ribuan bibit tanaman dalam pot. Jumlah bibit tanaman yang dikelola mencapai sekitar 5.000 pot bibit tanaman. Berbagai jenis bibit tanaman yang dibudidayakan oleh mitra meliputi berbagai jenis cabai (cosmo 29, arimbi 85, imola, bara, dan horison 97), tomat, terong, dan kubis. Banyaknya jumlah bibit tanaman yang harus dipantau setiap hari menjadikan proses penyiraman dan pemeliharaan memerlukan sistem yang lebih efisien.</p>
                </div>
                <i class="faq-toggle bi bi-chevron-right"></i>
              </div><!-- End Faq item-->
            </div>
          </div>
          <div class="col-lg-5 order-1 order-lg-2 why-us-img">
            <img src="assets/img/mitra.jpeg" class="img-fluid" alt=""  data-aos-delay="100">
          </div>
        </div>

      </div>

    </section><!-- /Why Us Section -->

    <!-- Services Section -->
    <section id="services" class="services section light-background">

      <!-- Section Title -->
      <div class="container section-title" >
        <h2>Services</h2>
        <p><b>Fitur Unggulan Smart Pot</b></p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">

          <div class="col-xl-3 col-md-6 d-flex"  data-aos-delay="100">
            <div class="service-item position-relative">
              <div class="icon"><i class="bi bi-graph-up-arrow"></i></div>
              <h4><a href="" class="stretched-link">Monitoring Sensor</a></h4>
              <p>Memantau kondisi tanaman secara real-time melalui sensor kelembapan tanah, suhu dan kelembapan udara, intensitas cahaya, serta memantau ketersediaan air. Data sensor ditampilkan secara langsung pada website sehingga pengguna dapat mengetahui kondisi tanaman kapan saja dan di mana saja.</p>
            </div>
          </div><!-- End Service Item -->

          <div class="col-xl-3 col-md-6 d-flex"  data-aos-delay="200">
            <div class="service-item position-relative">
              <div class="icon"><i class="bi bi-sliders"></i></div>
              <h4><a href="" class="stretched-link">Tiga Mode Kontrol</a></h4>
              <p>Sistem menyediakan tiga metode pengendalian penyiraman, yaitu mode manual untuk kontrol langsung oleh pengguna, mode otomatis berdasarkan nilai ambang kelembapan tanah, dan mode penjadwalan yang memungkinkan penyiraman dilakukan sesuai waktu yang telah ditentukan.</p>
            </div>
          </div><!-- End Service Item -->

          <div class="col-xl-3 col-md-6 d-flex"  data-aos-delay="300">
            <div class="service-item position-relative">
              <div class="icon"><i class="bi bi-clock-history"></i></div>
              <h4><a href="" class="stretched-link">Histori Penyiraman</a></h4>
              <p>Seluruh aktivitas penyiraman dicatat secara otomatis ke dalam sistem. Pengguna dapat melihat riwayat penyiraman yang berisi waktu pelaksanaan, durasi penyiraman, serta pot yang disiram sebagai bahan monitoring dan evaluasi.</p>
            </div>
          </div><!-- End Service Item -->

          <div class="col-xl-3 col-md-6 d-flex"  data-aos-delay="400">
            <div class="service-item position-relative">
              <div class="icon"><i class="bi bi-people"></i></div>
              <h4><a href="" class="stretched-link">Manajemen Pengguna</a></h4>
              <p>Fitur pengelolaan pengguna memungkinkan administrator menambahkan akun pengguna. Sistem ini membantu menjaga keamanan akses serta memudahkan pengaturan hak akses pengguna pada website.</p>
            </div>
          </div><!-- End Service Item -->

        </div>

      </div>

    </section><!-- /Services Section -->

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio section">

      <!-- Section Title -->
      <div class="container section-title" >
        <h2>DOKUMENTASI</h2>
        <p><b>Dokumentasi Instalasi Mitra</b></p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

          <div class="row gy-4 isotope-container"  data-aos-delay="200">

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
              <img src="assets/img/mitra1.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra1.jpeg"  data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/mitra2.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra2.jpeg" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
              <img src="assets/img/mitra3.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra3.jpeg" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
              <img src="assets/img/mitra6.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra6.jpeg" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/mitra4.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra4.jpeg" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
              <img src="assets/img/mitra5.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra5.jpeg" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
              <img src="assets/img/mitra7.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra7.jpeg" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/mitra9.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra9.jpeg" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding">
              <img src="assets/img/mitra8.jpeg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <a href="assets/img/mitra8.jpeg" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                
              </div>
            </div><!-- End Portfolio Item -->

          </div><!-- End Portfolio Container -->

        </div>

      </div>

    </section><!-- /Portfolio Section -->

    <!-- Team Section -->
    <section id="team" class="team section">

      <!-- Section Title -->
      <div class="container section-title" >
        <h2>Team</h2>
        <p>Tim pengembang sistem Smart Pot, menggabungkan teknologi IoT dan keahlian di bidang pertanian cerdas</p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-6"  data-aos-delay="100">
            <div class="team-member d-flex align-items-start">
              <div class="pic"><img src="assets/img/ahmad.jpeg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Ahmad Baidhowi Alimudin</h4>
                <p><b>NIM. E32232379</b></p>
                <span>Website</span>
                <p>Perancangan Sistem Penyiraman Tanaman Multi Pot Berbasis Website Menggunakan Sensor Kelembapan Tanah dan Solenoid Valve.</p>

              </div>
            </div>
          </div><!-- End Team Member -->

          <div class="col-lg-6"  data-aos-delay="200">
            <div class="team-member d-flex align-items-start">
              <div class="pic"><img src="assets/img/wisnu.jpeg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Afi Wisnu Wardana</h4>
                <p><b>NIM. E32232379</b></p>
                <span>Aplikasi Mobile</span>
                <p>Rancang Bangun Sistem Penyiraman Multi Pot Otomatis Menggunakan Solenoid Valve Dan Sensor Kelembapan Berbasis Aplikasi Mobile</p>

              </div>
            </div>
          </div><!-- End Team Member -->

          <div class="col-lg-6 offset-lg-3"  data-aos-delay="300">
            <div class="team-member d-flex align-items-start">
              <div class="pic"><img src="assets/img/zamira.jpeg" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h4>Zamira Areta Arkhab</h4>
                <p><b>NIM. E32231320</b></p>
                <span>Alat & Web Server</span>
                <p>Rancang Bangun Sistem Penyiraman Otomatis Tanaman Multi-Pot Berbasis Iot Dengan Pengaturan Waktu Dan Kelembaban Tanah Melalui Web Server</p>

              </div>
            </div>
          </div><!-- End Team Member -->
        </div>

      </div>

    </section><!-- /Team Section -->

  </main>

  <footer id="footer" class="footer">




    <div class="container copyright text-center mt-4">
      <p>© <span>Copyright</span> <strong class="px-1 sitename">Smart Pot</strong> <span>All Rights Reserved</span></p>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you've purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
      </div>
    </div>

  </footer>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>