TIF_NGANJUK_E41211342/resources/views/frontend/home.blade.php

519 lines
23 KiB
PHP

@extends('frontend/layouts.template')
@section('content')
<!-- ======= Hero Section ======= -->
<section id="hero" class="hero d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h1 data-aos="fade-up">Hypermedia Learning Environment</h1>
<h2 data-aos="fade-up" data-aos-delay="400">Ciptakan pengalaman pembelajaran yang interaktif dan mendalam</h2>
<div data-aos="fade-up" data-aos-delay="600">
<div class="text-center text-lg-start">
<a href="#about" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center">
<span>Mulai</span>
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200">
<img src="{{ asset('frontend/assets/img/hero-img.png')}}" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="row gx-0">
<div class="col-lg-8 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<!-- <h3>Apa itu Hypermedia Learning Environment</h3> -->
<h2>Apa itu Hypermedia Learning Environment</h2>
<p class="text-justify" >
Hypermedia Learning Environment (HLE) adalah sebuah media pembelajaran yang menggunakan konsep pembelajaran multimedia dan mengorganisasikannya sebagai struktur informasi yang menyerupai jaringan. HLE menciptakan pengalaman pembelajaran yang interaktif dan mendalam, memungkinkan pengguna untuk menjelajahi konten secara mandiri dan menyesuaikan pembelajaran mereka dengan kebutuhan dan preferensi individu. Dalam konteks HLE, metakognisi dapat ditingkatkan melalui fitur-fitur yang disediakan oleh lingkungan pembelajaran tersebut. Misalnya, HLE sering kali memiliki alat penilaian diri atau mekanisme umpan balik yang memungkinkan pengguna untuk memantau pemahaman mereka sendiri dan melakukan evaluasi terhadap kinerja mereka. Pengguna juga dapat mengakses dan menavigasi konten secara bebas, memilih rute pembelajaran yang sesuai dengan kebutuhan mereka, dan memilih sumber daya yang relevan dengan cara yang mendukung metakognisi.
</p>
<!-- <div class="text-center text-lg-start">
<a href="#" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
<span>Read More</span>
<i class="bi bi-arrow-right"></i>
</a>
</div> -->
</div>
</div>
<div class="col-lg-4 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
<img src="{{ asset('frontend/assets/img/about.jpg')}}" class="img-fluid" alt="">
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Features Section ======= -->
<section id="features" class="features">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>Fitur</h2>
<p>Ratione mollitia eos ab laudantium rerum beatae quo</p>
</header>
<div class="row feature-icons" data-aos="fade-up" data-aos-delay="100" >
<div class="col-xl-4 text-center" data-aos="fade-right" data-aos-delay="100">
<img src="{{ asset('frontend/assets/img/features-3.png')}}" class="img-fluid p-4" alt="">
</div>
<div class="col-xl-8 d-flex content">
<div class="row align-self-center gy-4">
<div class="col-md-6 icon-box" data-aos="fade-up">
<i class="ri-line-chart-line"></i>
<div>
<h4>Corporis voluptates sit</h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="ri-stack-line"></i>
<div>
<h4>Ullamco laboris nisi</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<i class="ri-brush-4-line"></i>
<div>
<h4>Labore consequatur</h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="ri-magic-line"></i>
<div>
<h4>Beatae veritatis</h4>
<p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
<i class="ri-command-line"></i>
<div>
<h4>Molestiae dolor</h4>
<p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
<i class="ri-radar-line"></i>
<div>
<h4>Explicabo consectetur</h4>
<p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p>
</div>
</div>
</div>
</div>
</div><!-- End Feature Icons -->
</div>
</section><!-- End Features Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>Galeri</h2>
<p>Pengembangan Aplikasi</p>
</header>
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div class="row gy-4 portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-1.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-1.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 1"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-2.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-2.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-3.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 2</h4>
<p>App</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-3.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 2"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-4.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 2</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-4.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 2"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-5.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 2</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-5.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 2"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-6.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 3</h4>
<p>App</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-6.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 3"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-7.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 1</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-7.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 1"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-8.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Card 3</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-8.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 3"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="{{ asset('frontend/assets/img/portfolio/portfolio-9.jpg')}}" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="{{ asset('frontend/assets/img/portfolio/portfolio-9.jpg')}}" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a>
<!-- <a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Portfolio Section -->
<!-- ======= Team Section ======= -->
<section id="team" class="team">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>Tim</h2>
<p>Anggota Tim Pengembangan Sistem</p>
</header>
<div class="row gy-4">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-2.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Intan Sulistyaningrum Sakkinah, S.Pd., M.Eng.</h4>
<span>Ketua Peneliti</span>
<p>Velit aut quia fugit et et. Dolorum ea voluptate vel tempore tenetur ipsa quae aut. Ipsum exercitationem iure minima enim corporis et voluptate.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-3.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Raditya Arief Pratama, S.Kom., M.Eng.</h4>
<span>Anggota Peneliti</span>
<p>Quo esse repellendus quia id. Est eum et accusantium pariatur fugit nihil minima suscipit corporis. Voluptate sed quas reiciendis animi neque sapiente.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-2.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Qonitatul Hasanah, S.T., M.Tr.T.</h4>
<span>Anggota Peneliti</span>
<p>Vero omnis enim consequatur. Voluptas consectetur unde qui molestiae deserunt. Voluptates enim aut architecto porro aspernatur molestiae modi.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-3.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Ahmad Firdaus Tarmidzi</h4>
<span>Mahasiswa</span>
<p>Velit aut quia fugit et et. Dolorum ea voluptate vel tempore tenetur ipsa quae aut. Ipsum exercitationem iure minima enim corporis et voluptate.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-3.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Dimas Pratama</h4>
<span>Mahasiswa</span>
<p>Velit aut quia fugit et et. Dolorum ea voluptate vel tempore tenetur ipsa quae aut. Ipsum exercitationem iure minima enim corporis et voluptate.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-2.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Amalia Fitria Dewi </h4>
<span>Mahasiswa</span>
<p>Quo esse repellendus quia id. Est eum et accusantium pariatur fugit nihil minima suscipit corporis. Voluptate sed quas reiciendis animi neque sapiente.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="member">
<div class="member-img">
<img src="{{ asset('frontend/assets/img/team/team-3.jpg')}}" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="member-info">
<h4>Ahmad Fikril Al Muzakki</h4>
<span>Mahasiswa</span>
<p>Vero omnis enim consequatur. Voluptas consectetur unde qui molestiae deserunt. Voluptates enim aut architecto porro aspernatur molestiae modi.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Team Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>Kontak</h2>
<p>Hubungi Kami</p>
</header>
<div class="row gy-4">
<div class="col-lg-12">
<div class="row gy-4">
<div class="col-md-4">
<div class="info-box">
<i class="bi bi-building"></i>
<h3>Lokasi Kami</h3>
<p>Kampus 3 PSDKU Nganjuk<br>Politeknik Negeri Jember</p>
</div>
</div>
<div class="col-md-4">
<div class="info-box">
<i class="bi bi-geo-alt"></i>
<h3>Alamat</h3>
<p>Jalan gatot Subroto No. 2<br>Nganjuk, Jawa Timur 64411</p>
</div>
</div>
<div class="col-md-4">
<div class="info-box">
<i class="bi bi-envelope"></i>
<h3>Email Kami</h3>
<p>info@example.com<br>contact@example.com</p>
</div>
</div>
</div>
<!-- <div class="col-lg-6">
<form action="forms/contact.php" method="post" class="php-email-form">
<div class="row gy-4">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div>
<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="subject" placeholder="Subject" required>
</div>
<div class="col-md-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<button type="submit">Send Message</button>
</div>
</div>
</form>
</div> -->
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
@endsection