@section('title', 'Tentang')
@extends('user.layouts.index')
@section('content')
  <!-- Page Title -->
  <div class="page-title">
    <div class="heading">
      <div class="container">
        <div class="row d-flex justify-content-center text-center">
          <div class="col-lg-8">
            <h1 class="heading-title">About</h1>
            <p class="mb-0">
              Penjelasan tentang sistem Deteksi Kecemasan Melalui Gerakan Mata
            </p>
          </div>
        </div>
      </div>
    </div>
    <nav class="breadcrumbs">
      <div class="container">
        <ol>
          <li><a href="index.html">Home</a></li>
          <li class="current">About</li>
        </ol>
      </div>
    </nav>
  </div><!-- End Page Title -->

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

    <div class="container" data-aos="fade-up" data-aos-delay="100">

      <div class="row align-items-center my-5">
        <div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
          <div class="about-content">
            <h2>Introduction</h2>
            <p class="lead">Anxiety Detection System merupakan sistem berbasis web yang dirancang untuk membantu proses asesmen tingkat kecemasan selama sesi konsultasi psikologis. Sistem ini memanfaatkan teknologi eye tracking untuk menganalisis pergerakan pupil mata dan mengolahnya menggunakan metode machine learning.</p>
          </div><!-- End About Content -->
        </div>

        <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
          <div class="image-wrapper">
            <img src="{{ asset('assets/users/assets/img/health/facilities-6.webp') }}" class="img-fluid main-image" alt="Healthcare facility">
          </div><!-- End Image Wrapper -->
        </div>
      </div>

      <div class="row align-items-center my-5">
        <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
          <div class="image-wrapper">
            <img src="{{ asset('assets/users/assets/img/health/facilities-6.webp') }}" class="img-fluid main-image" alt="Healthcare facility">
          </div><!-- End Image Wrapper -->
        </div>

        <div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
          <div class="about-content">
            <h2>Background</h2>
            <p class="lead">Gangguan kecemasan merupakan salah satu kondisi kesehatan mental yang banyak dialami oleh berbagai kelompok usia. Proses asesmen kecemasan umumnya dilakukan melalui observasi dan wawancara oleh tenaga profesional. Oleh karena itu, penelitian ini mengembangkan sistem berbasis teknologi yang dapat membantu memberikan data objektif berupa analisis pergerakan mata selama sesi konsultasi.</p>
          </div><!-- End About Content -->
        </div>
      </div>

      <div class="values-section" data-aos="fade-up" data-aos-delay="300">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h3>Purpose of The System</h3>
            <p class="section-description"></p>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-heart-pulse"></i>
              </div>
              <h4>Compassion</h4>
              <p>Membantu tenaga profesional dalam proses asesmen kecemasan</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-clipboard-data"></i>
              </div>
              <h4>Excellence</h4>
              <p>Menyediakan analisis berbasis data terhadap respon visual pasien</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-flask"></i>
              </div>
              <h4>Integrity</h4>
              <p>Menyajikan hasil estimasi tingkat kecemasan secara sistematis</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-regex"></i>
              </div>
              <h4>Innovation</h4>
              <p>Mendukung proses pengambilan keputusan selama konsultasi</p>
            </div>
          </div>
        </div><!-- End Values Row -->
      </div><!-- End Values Section -->

      <div class="values-section" data-aos="fade-up" data-aos-delay="300">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h3>How The System Works</h3>
            <p class="section-description"></p>
          </div>
        </div>

        <div class="row justify-content-between">
          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-eye"></i>
              </div>
              <h4>Compassion</h4>
              <p>Kamera menangkap pergerakan pupil pengguna</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-bar-chart-steps"></i>
              </div>
              <h4>Integrity</h4>
              <p>Fitur pergerakan mata diekstraksi</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-cpu"></i>
              </div>
              <h4>Innovation</h4>
              <p>Model machine learning melakukan klasifikasi</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="value-item">
              <div class="value-icon">
                <i class="bi bi-easel"></i>
              </div>
              <h4>Innovation</h4>
              <p>Hasil estimasi kecemasan ditampilkan pada dashboard</p>
            </div>
          </div>
        </div><!-- End Values Row -->
      </div><!-- End Values Section -->

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

  <!-- Departments Tabs Section -->
  <section id="system-architecture-tabs" class="departments-tabs section">

    <div class="container" data-aos="fade-up" data-aos-delay="100">

      <div class="medical-specialties">
        <div class="row">
          <div class="col-12" data-aos="fade-up" data-aos-delay="100">
            <div class="row mb-3">
              <h2 class="text-center">System Architecture</h2>
            </div><!-- End About Content -->
          </div>
          <div class="col-12">
            <div class="specialty-navigation">
              <div class="nav nav-pills d-flex" id="specialty-tabs" role="tablist" data-aos="fade-up"
                data-aos-delay="400">
                <a class="nav-link department-tab active" id="neurology-tab" data-bs-toggle="pill"
                  href="#camera-tabs" role="tab" aria-controls="camera-tabs"
                  aria-selected="true" data-aos="fade-up" data-aos-delay="100">Camera</a>
                <a class="nav-link department-tab" id="surgery-tab" data-bs-toggle="pill"
                  href="#eye-detection-tabs" role="tab" aria-controls="eye-detection-tabs"
                  aria-selected="false" data-aos="fade-up" data-aos-delay="150">Eye Detection</a>
                <a class="nav-link department-tab" id="dental-tab" data-bs-toggle="pill"
                  href="#departments-tabs-dental" role="tab" aria-controls="departments-tabs-dental"
                  aria-selected="false" data-aos="fade-up" data-aos-delay="200">Feature Extraction</a>
                <a class="nav-link department-tab" id="ophthalmology-tab" data-bs-toggle="pill"
                  href="#departments-tabs-ophthalmology" role="tab" aria-controls="departments-tabs-ophthalmology"
                  aria-selected="false" data-aos="fade-up" data-aos-delay="250">ML Prediction</a>
                <a class="nav-link department-tab" id="cardiology-tab" data-bs-toggle="pill"
                  href="#departments-tabs-cardiology" role="tab" aria-controls="departments-tabs-cardiology"
                  aria-selected="false" data-aos="fade-up" data-aos-delay="300">Result</a>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="tab-content department-content" id="specialty-content" data-aos="fade-up"
              data-aos-delay="500">

              <div class="tab-pane fade show active" id="camera-tabs" role="tabpanel"
                aria-labelledby="neurology-tab">
                <div class="row department-layout">
                  <div class="col-lg-4 order-lg-2">
                    <div class="department-image">
                      <img src="{{ asset('assets/users/assets/img/health/neurology-3.webp') }}" alt="Neurology Department" class="img-fluid">
                    </div>
                  </div>
                  <div class="col-lg-8 order-lg-1">
                    <div class="department-info">
                      <h2 class="department-title">Camera</h2>
                      <p class="department-description">Kamera digunakan pada sistem ini untuk menangkap dan merekam pergerakan pengguna sebagai referensi kedua dari 'eye tracking'. Data dari rekaman kamera ini akan digunakan untuk menjadikan ekspresi muka sebagai bobot kedua dari menentukan kecemasan.</p>

                      <div class="row mt-4">
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-brain"></i>
                            </div>
                            <div class="service-content">
                              <h4>Brain Monitoring</h4>
                              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-wave-square"></i>
                            </div>
                            <div class="service-content">
                              <h4>EEG Testing</h4>
                              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-stethoscope"></i>
                            </div>
                            <div class="service-content">
                              <h4>Neurological Exam</h4>
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-file-medical"></i>
                            </div>
                            <div class="service-content">
                              <h4>Treatment Plans</h4>
                              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- End Camera Tab -->

              <div class="tab-pane fade" id="eye-detection-tabs" role="tabpanel" aria-labelledby="surgery-tab">
                <div class="row department-layout">
                  <div class="col-lg-4 order-lg-2">
                    <div class="department-image">
                      <img src="{{ asset('assets/users/assets/img/health/surgery-2.webp') }}" alt="Surgery Department" class="img-fluid">
                    </div>
                  </div>
                  <div class="col-lg-8 order-lg-1">
                    <div class="department-info">
                      <h2 class="department-title">Eye Detection</h2>
                      <p class="department-description">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
                        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                      </p>

                      <div class="row mt-4">
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-cut"></i>
                            </div>
                            <div class="service-content">
                              <h4>Minimally Invasive</h4>
                              <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-tools"></i>
                            </div>
                            <div class="service-content">
                              <h4>Advanced Procedures</h4>
                              <p>Consectetur, adipisci velit, sed quia non numquam eius modi tempora.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-shield-alt"></i>
                            </div>
                            <div class="service-content">
                              <h4>Safe Operations</h4>
                              <p>Incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-clock"></i>
                            </div>
                            <div class="service-content">
                              <h4>Recovery Support</h4>
                              <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- End Eye Detection Tab -->

              <div class="tab-pane fade" id="departments-tabs-dental" role="tabpanel" aria-labelledby="dental-tab">
                <div class="row department-layout">
                  <div class="col-lg-4 order-lg-2">
                    <div class="department-image">
                      <img src="{{ asset('assets/users/assets/img/health/dermatology-1.webp') }}" alt="Dental Care Department" class="img-fluid">
                    </div>
                  </div>
                  <div class="col-lg-8 order-lg-1">
                    <div class="department-info">
                      <h2 class="department-title">Dental Care Department</h2>
                      <p class="department-description">Suscipit laboriosam, nisi ut aliquid ex ea commodi
                        consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
                        molestiae.</p>

                      <div class="row mt-4">
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="far fa-smile"></i>
                            </div>
                            <div class="service-content">
                              <h4>Oral Health</h4>
                              <p>Consequatur aut perferendis doloribus asperiores repellat tempore.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-tooth"></i>
                            </div>
                            <div class="service-content">
                              <h4>Teeth Cleaning</h4>
                              <p>Et harum quidem rerum facilis est et expedita distinctio nam libero.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-star"></i>
                            </div>
                            <div class="service-content">
                              <h4>Cosmetic Dentistry</h4>
                              <p>Tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-cog"></i>
                            </div>
                            <div class="service-content">
                              <h4>Orthodontics</h4>
                              <p>Id quod maxime placeat facere possimus, omnis voluptas assumenda est.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- End Dental Tab -->

              <div class="tab-pane fade" id="departments-tabs-ophthalmology" role="tabpanel"
                aria-labelledby="ophthalmology-tab">
                <div class="row department-layout">
                  <div class="col-lg-4 order-lg-2">
                    <div class="department-image">
                      <img src="{{ asset('assets/users/assets/img/health/pediatrics-4.webp') }}" alt="Ophthalmology Department" class="img-fluid">
                    </div>
                  </div>
                  <div class="col-lg-8 order-lg-1">
                    <div class="department-info">
                      <h2 class="department-title">Ophthalmology Department</h2>
                      <p class="department-description">Omnis dolor repellendus temporibus autem quibusdam et aut
                        officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.</p>

                      <div class="row mt-4">
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-eye"></i>
                            </div>
                            <div class="service-content">
                              <h4>Vision Testing</h4>
                              <p>Sint et voluptatum sint quia dolor sit amet consectetur adipiscing elit.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-camera"></i>
                            </div>
                            <div class="service-content">
                              <h4>Retinal Imaging</h4>
                              <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-bolt"></i>
                            </div>
                            <div class="service-content">
                              <h4>Laser Surgery</h4>
                              <p>Enim ad minim veniam quis nostrud exercitation ullamco laboris nisi.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-prescription-bottle"></i>
                            </div>
                            <div class="service-content">
                              <h4>Eye Care Plans</h4>
                              <p>Ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- End Ophthalmology Tab -->

              <div class="tab-pane fade" id="departments-tabs-cardiology" role="tabpanel"
                aria-labelledby="cardiology-tab">
                <div class="row department-layout">
                  <div class="col-lg-4 order-lg-2">
                    <div class="department-image">
                      <img src="{{ asset('assets/users/assets/img/health/cardiology-3.webp') }}" alt="Cardiology Department" class="img-fluid">
                    </div>
                  </div>
                  <div class="col-lg-8 order-lg-1">
                    <div class="department-info">
                      <h2 class="department-title">Cardiology Department</h2>
                      <p class="department-description">In voluptate velit esse cillum dolore eu fugiat nulla pariatur
                        excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt.</p>

                      <div class="row mt-4">
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-heartbeat"></i>
                            </div>
                            <div class="service-content">
                              <h4>Heart Monitoring</h4>
                              <p>Mollit anim id est laborum sed ut perspiciatis unde omnis iste natus error.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="service-content">
                              <h4>ECG Analysis</h4>
                              <p>Sit voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-tint"></i>
                            </div>
                            <div class="service-content">
                              <h4>Blood Tests</h4>
                              <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="service-item">
                            <div class="service-icon">
                              <i class="fas fa-shield-heart"></i>
                            </div>
                            <div class="service-content">
                              <h4>Preventive Care</h4>
                              <p>Vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas sit.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- End Cardiology Tab -->

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

    </div>

  </section><!-- /Departments Tabs Section -->

  <!-- Technologies Section -->
  <section id="technologies" class="about section">
    <div class="certifications-section" data-aos="fade-up" data-aos-delay="400">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h3>Technologies Used</h3>
            <p class="section-description">Beberapa teknologi yang dipakai pada sistem ini</p>
          </div>
        </div>

        <div class="row justify-content-center">
          <div class="col-lg-2 col-md-3 col-sm-4 col-6" data-aos="zoom-in" data-aos-delay="100">
            <div class="certification-item">
              <img src="{{ asset('assets/users/assets/img/logo/Tobii_Logo.png') }}" class="img-fluid" alt="Tobii Eye Tracking">
            </div>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-6" data-aos="zoom-in" data-aos-delay="200">
            <div class="certification-item">
              <img src="{{ asset('assets/users/assets/img/logo/Python_logo_and_wordmark.svg') }}" class="img-fluid" alt="Python">
            </div>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-6" data-aos="zoom-in" data-aos-delay="300">
            <div class="certification-item">
              <img src="{{ asset('assets/users/assets/img/logo/laravel_logo.png') }}" class="img-fluid" alt="Laravel Logo">
            </div>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-6" data-aos="zoom-in" data-aos-delay="400">
            <div class="certification-item">
              <img src="{{ asset('assets/users/assets/img/logo/tensorflow_logo.webp') }}" class="img-fluid" alt="Tensorflow Logo">
            </div>
          </div>
        </div><!-- End Certifications Row -->
      </div><!-- End Certifications Section -->
  </section>
@endsection