diff --git a/app/Http/Controllers/LandingController.php b/app/Http/Controllers/LandingController.php
index f52f633..6802243 100644
--- a/app/Http/Controllers/LandingController.php
+++ b/app/Http/Controllers/LandingController.php
@@ -6,6 +6,13 @@
 
 class LandingController extends Controller
 {
+    /**
+     * Display about page
+     */
+    public function about() {
+        return view('user.pages.about.index');
+    }
+
     /**
      * Display a listing of the resource.
      */
diff --git a/public/assets/users/assets/img/logo/Python_logo_and_wordmark.svg b/public/assets/users/assets/img/logo/Python_logo_and_wordmark.svg
new file mode 100644
index 0000000..1c7fd6b
--- /dev/null
+++ b/public/assets/users/assets/img/logo/Python_logo_and_wordmark.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="388.8pt" height="115pt" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Python programming language logo</title>
+ <metadata>
+  <rdf:RDF>
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+  </rdf:RDF>
+ </metadata>
+ <defs>
+  <linearGradient id="vlpc" x1="151" x2="112" y1="192.4" y2="137.3" gradientTransform="matrix(.5625 0 0 .568 -9.4 -5.305)" gradientUnits="userSpaceOnUse">
+   <stop style="stop-color:#ffd43b" offset="0"/>
+   <stop style="stop-color:#ffe873" offset="1"/>
+  </linearGradient>
+  <linearGradient id="vlpb" x1="26.65" x2="135.7" y1="20.6" y2="114.4" gradientTransform="matrix(.5625 0 0 .568 -9.4 -5.305)" gradientUnits="userSpaceOnUse">
+   <stop style="stop-color:#5a9fd4" offset="0"/>
+   <stop style="stop-color:#306998" offset="1"/>
+  </linearGradient>
+  <radialGradient id="vlpa" cx="61.52" cy="132.3" r="29.04" gradientTransform="matrix(2.383e-8 -.2964 1.437 4.684e-7 -128.5 150.5)" gradientUnits="userSpaceOnUse">
+   <stop style="stop-color:#b8b8b8;stop-opacity:.498" offset="0"/>
+   <stop style="stop-color:#7f7f7f;stop-opacity:0" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path d="m184.6 61.93c0-14.56-4.152-22.04-12.46-22.45-3.304-0.156-6.531 0.3704-9.669 1.589-2.505 0.8967-4.191 1.784-5.078 2.68v34.76c5.312 3.334 10.03 4.883 14.14 4.64 8.704-0.5751 13.06-7.642 13.06-21.22zm10.24 0.6043c0 7.398-1.735 13.54-5.224 18.42-3.889 5.527-9.279 8.373-16.17 8.529-5.195 0.1657-10.55-1.462-16.05-4.874v31.59l-8.909-3.178v-70.12c1.462-1.793 3.343-3.334 5.624-4.64 5.302-3.09 11.75-4.679 19.33-4.757l0.1267 0.1267c6.93-0.08773 12.27 2.758 16.02 8.529 3.499 5.293 5.254 12.08 5.254 20.37z" style="fill:#646464"/>
+ <path d="m249.3 83.27c0 9.923-0.9942 16.79-2.983 20.62-1.998 3.821-5.8 6.872-11.41 9.143-4.552 1.793-9.474 2.768-14.76 2.934l-1.472-5.614c5.371-0.731 9.153-1.462 11.35-2.193 4.318-1.462 7.281-3.704 8.909-6.706 1.306-2.447 1.949-7.115 1.949-14.03v-2.32c-6.092 2.768-12.48 4.143-19.15 4.143-4.386 0-8.256-1.374-11.59-4.143-3.743-3.012-5.614-6.833-5.614-11.46v-37.08l8.909-3.051v37.32c0 3.987 1.287 7.057 3.86 9.211 2.573 2.154 5.907 3.187 9.991 3.109 4.084-0.08773 8.46-1.667 13.11-4.757v-43.54h8.909v48.41z" style="fill:#646464"/>
+ <path d="m284.1 89c-1.062 0.08772-2.037 0.1267-2.934 0.1267-5.039 0-8.967-1.199-11.77-3.606-2.797-2.408-4.201-5.731-4.201-9.971v-35.09h-6.102v-5.605h6.102v-14.88l8.899-3.168v18.05h10.01v5.605h-10.01v34.85c0 3.343 0.8967 5.712 2.69 7.096 1.54 1.14 3.987 1.793 7.32 1.959v4.64z" style="fill:#646464"/>
+ <path d="m338 88.27h-8.909v-34.39c0-3.499-0.8188-6.511-2.447-9.026-1.881-2.846-4.493-4.269-7.846-4.269-4.084 0-9.192 2.154-15.32 6.462v41.22h-8.909v-82.2l8.909-2.807v37.44c5.692-4.143 11.91-6.219 18.67-6.219 4.718 0 8.538 1.589 11.46 4.757 2.934 3.168 4.396 7.115 4.396 11.83v37.19z" style="fill:#646464"/>
+ <path d="m385.4 60.53c0-5.595-1.062-10.21-3.178-13.87-2.515-4.454-6.423-6.803-11.71-7.047-9.767 0.5653-14.64 7.564-14.64 20.98 0 6.15 1.014 11.29 3.061 15.41 2.612 5.254 6.531 7.846 11.76 7.759 9.806-0.07798 14.71-7.817 14.71-23.23zm9.757 0.05848c0 7.963-2.037 14.59-6.102 19.88-4.474 5.926-10.65 8.899-18.54 8.899-7.817 0-13.91-2.973-18.31-8.899-3.987-5.293-5.975-11.92-5.975-19.88 0-7.486 2.154-13.78 6.462-18.91 4.552-5.439 10.54-8.168 17.93-8.168 7.398 0 13.42 2.729 18.06 8.168 4.308 5.127 6.462 11.42 6.462 18.91z" style="fill:#646464"/>
+ <path d="m446.2 88.27h-8.909v-36.34c0-3.987-1.199-7.096-3.597-9.338-2.398-2.232-5.595-3.314-9.581-3.226-4.23 0.07798-8.256 1.462-12.08 4.143v44.76h-8.909v-45.86c5.127-3.733 9.845-6.17 14.15-7.31 4.065-1.062 7.651-1.589 10.74-1.589 2.115 0 4.104 0.2047 5.975 0.6141 3.499 0.809 6.345 2.31 8.538 4.513 2.447 2.437 3.665 5.361 3.665 8.782v40.85z" style="fill:#646464"/>
+ <path d="m60.51 6.398c-4.584 0.0213-8.961 0.4122-12.81 1.094-11.35 2.005-13.41 6.2-13.41 13.94v10.22h26.81v3.406h-26.81-10.06c-7.792 0-14.62 4.684-16.75 13.59-2.462 10.21-2.571 16.59 0 27.25 1.906 7.938 6.458 13.59 14.25 13.59h9.219v-12.25c0-8.85 7.657-16.66 16.75-16.66h26.78c7.455 0 13.41-6.138 13.41-13.62v-25.53c0-7.266-6.13-12.72-13.41-13.94-4.606-0.7667-9.385-1.115-13.97-1.094zm-14.5 8.219c2.77 0 5.031 2.299 5.031 5.125-2e-6 2.816-2.262 5.094-5.031 5.094-2.779-1e-6 -5.031-2.277-5.031-5.094-1e-6 -2.826 2.252-5.125 5.031-5.125z" style="fill:url(#vlpb)"/>
+ <path d="m91.23 35.05v11.91c0 9.231-7.826 17-16.75 17h-26.78c-7.336 0-13.41 6.278-13.41 13.62v25.53c0 7.266 6.319 11.54 13.41 13.62 8.487 2.496 16.63 2.947 26.78 0 6.75-1.954 13.41-5.888 13.41-13.62v-10.22h-26.78v-3.406h26.78 13.41c7.792 0 10.7-5.435 13.41-13.59 2.799-8.399 2.68-16.48 0-27.25-1.926-7.757-5.604-13.59-13.41-13.59h-10.06zm-15.06 64.66c2.779 3e-6 5.031 2.277 5.031 5.094-2e-6 2.826-2.252 5.125-5.031 5.125-2.77 0-5.031-2.299-5.031-5.125 2e-6 -2.816 2.262-5.094 5.031-5.094z" style="fill:url(#vlpc)"/>
+ <path d="m463.6 26.91h1.562v-9.796h3.7v-1.168h-8.962v1.168h3.7v9.796m6.647 0h1.334v-8.947l2.896 8.946h1.486l3.018-8.916v8.917h1.456v-10.96h-1.926l-3.298 9.393-2.813-9.393h-2.153v10.96" style="fill:#646464"/>
+ <path transform="matrix(.7341 0 0 .8095 16.25 27.01)" d="m110.5 132.3a48.95 8.607 0 1 1-97.9 0 48.95 8.607 0 1 1 97.9 0z" style="fill:url(#vlpa);opacity:.4438"/>
+</svg>
diff --git a/public/assets/users/assets/img/logo/Tobii_Logo.png b/public/assets/users/assets/img/logo/Tobii_Logo.png
new file mode 100644
index 0000000..e07e483
Binary files /dev/null and b/public/assets/users/assets/img/logo/Tobii_Logo.png differ
diff --git a/public/assets/users/assets/img/logo/laravel_logo.png b/public/assets/users/assets/img/logo/laravel_logo.png
new file mode 100644
index 0000000..128be34
Binary files /dev/null and b/public/assets/users/assets/img/logo/laravel_logo.png differ
diff --git a/public/assets/users/assets/img/logo/tensorflow_logo.webp b/public/assets/users/assets/img/logo/tensorflow_logo.webp
new file mode 100644
index 0000000..1a2fd3f
Binary files /dev/null and b/public/assets/users/assets/img/logo/tensorflow_logo.webp differ
diff --git a/public/assets/users/assets/img/person/khafid.png b/public/assets/users/assets/img/person/khafid.png
new file mode 100644
index 0000000..908c5a8
Binary files /dev/null and b/public/assets/users/assets/img/person/khafid.png differ
diff --git a/public/assets/users/assets/img/person/mahayoga.jpg b/public/assets/users/assets/img/person/mahayoga.jpg
new file mode 100644
index 0000000..30e1350
Binary files /dev/null and b/public/assets/users/assets/img/person/mahayoga.jpg differ
diff --git a/resources/views/user/layouts/index.blade.php b/resources/views/user/layouts/index.blade.php
index 2abbb79..3a1e1c4 100644
--- a/resources/views/user/layouts/index.blade.php
+++ b/resources/views/user/layouts/index.blade.php
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <title>Index - Clinic Bootstrap Template</title>
+  <title>@yield('title') - Smart Anxiety</title>
   <meta name="description" content="">
   <meta name="keywords" content="">
 
diff --git a/resources/views/user/layouts/navbar.blade.php b/resources/views/user/layouts/navbar.blade.php
index 85a1b58..8703f81 100644
--- a/resources/views/user/layouts/navbar.blade.php
+++ b/resources/views/user/layouts/navbar.blade.php
@@ -8,10 +8,9 @@
         <i class="bi bi-phone d-flex align-items-center ms-4"><span>+62 8233 7341 446</span></i>
       </div>
       <div class="social-links d-none d-md-flex align-items-center">
-        <a href="#!" class="twitter"><i class="bi bi-twitter-x"></i></a>
-        <a href="#!" class="facebook"><i class="bi bi-facebook"></i></a>
+        <a href="#!" class="twitter"><i class="bi bi-github"></i></a>
         <a href="#!" class="instagram"><i class="bi bi-instagram"></i></a>
-        <a href="#!" class="linkedin"><i class="bi bi-linkedin"></i></a>
+        <a href="#!" class="linkedin"><i class="bi bi-discord"></i></a>
       </div>
     </div>
   </div><!-- End Top Bar -->
@@ -27,52 +26,23 @@
 
       <nav id="navmenu" class="navmenu">
         <ul>
-          <li><a href="index.html" class="active">Home</a></li>
-          <li><a href="about.html">About</a></li>
-          <li><a href="departments.html">Departments</a></li>
+          <li><a href="{{ route('beranda.index') }}" class="active">Home</a></li>
+          <li><a href="{{ route('beranda.about') }}">About</a></li>
+          <li><a href="{{ route('beranda.about') }}#system-architecture-tabs">System Architecture</a></li>
           <li><a href="services.html">Services</a></li>
-          <li><a href="doctors.html">Doctors</a></li>
-          <li class="dropdown"><a href="#"><span>More Pages</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
-          <ul>
-            <li><a href="department-details.html">Department Details</a></li>
-            <li><a href="service-details.html">Service Details</a></li>
-            <li><a href="appointment.html">Appointment</a></li>
-            <li><a href="testimonials.html">Testimonials</a></li>
-            <li><a href="faq.html">Frequently Asked Questions</a></li>
-            <li><a href="gallery.html">Gallery</a></li>
-            <li><a href="terms.html">Terms</a></li>
-            <li><a href="privacy.html">Privacy</a></li>
-            <li><a href="404.html">404</a></li>
-          </ul>
-          </li>
-          <li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
-            <ul>
-              <li><a href="#">Dropdown 1</a></li>
-              <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
-                <ul>
-                  <li><a href="#">Deep Dropdown 1</a></li>
-                  <li><a href="#">Deep Dropdown 2</a></li>
-                  <li><a href="#">Deep Dropdown 3</a></li>
-                  <li><a href="#">Deep Dropdown 4</a></li>
-                  <li><a href="#">Deep Dropdown 5</a></li>
-                </ul>
-              </li>
-              <li><a href="#">Dropdown 2</a></li>
-              <li><a href="#">Dropdown 3</a></li>
-              <li><a href="#">Dropdown 4</a></li>
-            </ul>
-          </li>
           <li><a href="contact.html">Contact</a></li>
           @if (session('is_logged_in'))
             <li class="dropdown"><a href="#"><span>{{ Auth::user()->name }}</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
               <ul>
                 <li><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                 <li><a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a></li>
-                  <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
-                    @csrf
-                  </form>
+                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
+                  @csrf
+                </form>
               </ul>
             </li>
+          @else
+            <li><a href="{{ route('login') }}">Login</a></li>
           @endif
         </ul>
         <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
diff --git a/resources/views/user/pages/about/index.blade.php b/resources/views/user/pages/about/index.blade.php
new file mode 100644
index 0000000..543bd08
--- /dev/null
+++ b/resources/views/user/pages/about/index.blade.php
@@ -0,0 +1,574 @@
+@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
\ No newline at end of file
diff --git a/resources/views/user/pages/index.blade.php b/resources/views/user/pages/index.blade.php
index 595c6bc..8a420dd 100644
--- a/resources/views/user/pages/index.blade.php
+++ b/resources/views/user/pages/index.blade.php
@@ -1,3 +1,4 @@
+@section('title', 'Beranda')
 @extends('user.layouts.index')
 @section('content')
   <!-- Hero Section -->
@@ -8,53 +9,20 @@
       <div class="row align-items-center">
         <div class="col-lg-6">
           <div class="hero-content">
-            <div class="trust-badges mb-4" data-aos="fade-right" data-aos-delay="200">
-              <div class="badge-item">
-                <i class="bi bi-shield-check"></i>
-                <span>Accredited</span>
-              </div>
-              <div class="badge-item">
-                <i class="bi bi-clock"></i>
-                <span>24/7 Emergency</span>
-              </div>
-              <div class="badge-item">
-                <i class="bi bi-star-fill"></i>
-                <span>4.9/5 Rating</span>
-              </div>
-            </div>
 
             <h1 data-aos="fade-right" data-aos-delay="300">
-              Excellence in <span class="highlight">Healthcare</span> With Compassionate Care
+              Anxiety Detection <span class="highlight">Support System</span> for Psychological Consultation
             </h1>
 
             <p class="hero-description" data-aos="fade-right" data-aos-delay="400">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+              Sistem berbasis web yang membantu proses asesmen kecemasan melalui analisis pergerakan pupil mata menggunakan teknologi eye-tracking dan machine learning.
             </p>
 
-            <div class="hero-stats mb-4" data-aos="fade-right" data-aos-delay="500">
-              <div class="stat-item">
-                <h3><span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="2"
-                    class="purecounter"></span>+</h3>
-                <p>Years Experience</p>
-              </div>
-              <div class="stat-item">
-                <h3><span data-purecounter-start="0" data-purecounter-end="5000" data-purecounter-duration="2"
-                    class="purecounter"></span>+</h3>
-                <p>Patients Treated</p>
-              </div>
-              <div class="stat-item">
-                <h3><span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="2"
-                    class="purecounter"></span>+</h3>
-                <p>Medical Experts</p>
-              </div>
-            </div>
-
             <div class="hero-actions" data-aos="fade-right" data-aos-delay="600">
-              <a href="appointment.html" class="btn btn-primary">Book Appointment</a>
+              <a href="{{ route('beranda.about') }}" class="btn btn-primary">Learn About The System</a>
               <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="btn btn-outline glightbox">
-                <i class="bi bi-play-circle me-2"></i>
-                Watch Our Story
+                <i class="bi bi-archive me-2"></i>
+                View Research
               </a>
             </div>
 
@@ -63,8 +31,8 @@ class="purecounter"></span>+</h3>
                 <i class="bi bi-telephone-fill"></i>
               </div>
               <div class="emergency-info">
-                <small>Emergency Hotline</small>
-                <strong>+1 (555) 911-2468</strong>
+                <small>Hubungi Kami</small>
+                <strong>+62 8233-7341-446</strong>
               </div>
             </div>
           </div>
@@ -119,32 +87,13 @@ class="purecounter"></span>+</h3>
       <div class="row align-items-center">
         <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right" data-aos-delay="200">
           <div class="about-content">
-            <h2 class="section-heading">Compassionate Care, Advanced Medicine</h2>
-            <p class="lead-text">For over two decades, we've been dedicated to providing exceptional healthcare that
-              combines cutting-edge medical technology with the personal touch our patients deserve.</p>
-
-            <p>Our multidisciplinary team of specialists works collaboratively to ensure every patient receives
-              comprehensive care tailored to their unique needs. From preventive services to complex procedures, we
-              maintain the highest standards of medical excellence while fostering an environment of trust and
-              healing.</p>
-
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="15000"
-                  data-purecounter-duration="1"></div>
-                <div class="stat-label">Patients Served</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="25"
-                  data-purecounter-duration="1"></div>
-                <div class="stat-label">Years of Excellence</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="50"
-                  data-purecounter-duration="1"></div>
-                <div class="stat-label">Medical Specialists</div>
-              </div>
-            </div>
+            <h2 class="section-heading">About the System</h2>
+            <p class="lead-text">Sistem ini dirancang untuk membantu mendeteksi tingkat kecemasan seseorang secara otomatis menggunakan analisis pergerakan pupil mata. 
+              Sistem menggunakan kamera untuk menangkap pergerakan mata dan memprosesnya menggunakan algoritma machine learning.
+            </p>
+            <p>
+              Sistem ini dirancang sebagai alat bantu analisis dalam proses konsultasi dan bukan sebagai alat diagnosis mandiri. Interpretasi hasil tetap dilakukan oleh tenaga profesional.
+            </p>
 
             <div class="cta-section">
               <a href="about.html" class="btn-primary">Learn More About Us</a>
@@ -157,21 +106,21 @@ class="purecounter"></span>+</h3>
             <div class="main-image">
               <img src="{{ asset('assets/users/assets/img/health/facilities-9.webp') }}" alt="Modern medical facility" class="img-fluid">
             </div>
-            <div class="floating-card">
+            {{-- <div class="floating-card">
               <div class="card-content">
                 <div class="icon">
                   <i class="bi bi-heart-pulse"></i>
                 </div>
                 <div class="card-text">
-                  <h4>24/7 Emergency Care</h4>
-                  <p>Always here when you need us most</p>
+                  <h4>Coba Kapan Saja</h4>
+                  <p>Fitur kami tersedia 24/7</p>
                 </div>
               </div>
-            </div>
+            </div> --}}
             <div class="experience-badge">
               <div class="badge-content">
-                <span class="years">25+</span>
-                <span class="text">Years of Trusted Care</span>
+                <span class="years">50+</span>
+                <span class="text">Pengguna telah mencoba</span>
               </div>
             </div>
           </div>
@@ -182,634 +131,303 @@ class="purecounter"></span>+</h3>
 
   </section><!-- /Home About Section -->
 
-  <!-- Featured Departments Section -->
-  <section id="featured-departments" class="featured-departments section">
-
+  <!-- Services Section -->
+  <section id="services" class="services section">
     <!-- Section Title -->
     <div class="container section-title" data-aos="fade-up">
-      <h2>Featured Departments</h2>
-      <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
+      <h2>How It Works</h2>
+      <p>How The System Works During Consultation</p>
     </div><!-- End Section Title -->
 
     <div class="container" data-aos="fade-up" data-aos-delay="100">
-
-      <div class="row g-5">
-
-        <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="100">
-          <div class="specialty-card">
-            <div class="specialty-content">
-              <div class="specialty-meta">
-                <span class="specialty-label">Specialized Care</span>
-              </div>
-              <h3>Cardiovascular Medicine</h3>
-              <p>Advanced diagnostic imaging and interventional procedures for comprehensive heart health management
-                with personalized treatment protocols.</p>
-              <div class="specialty-features">
-                <span><i class="bi bi-check-circle-fill"></i>24/7 Emergency Cardiac Care</span>
-                <span><i class="bi bi-check-circle-fill"></i>Minimally Invasive Procedures</span>
-              </div>
-              <a href="department-details.html" class="specialty-link">
-                Explore Cardiology <i class="bi bi-arrow-right"></i>
-              </a>
-            </div>
-            <div class="specialty-visual">
-              <img src="{{ asset('assets/users/assets/img/health/cardiology-1.webp') }}" alt="Cardiovascular Medicine" class="img-fluid">
-              <div class="visual-overlay">
-                <i class="bi bi-heart-pulse"></i>
-              </div>
-            </div>
-          </div>
-        </div><!-- End Specialty Card -->
-
-        <div class="col-lg-6" data-aos="zoom-in" data-aos-delay="200">
-          <div class="specialty-card">
-            <div class="specialty-content">
-              <div class="specialty-meta">
-                <span class="specialty-label">Expert Care</span>
-              </div>
-              <h3>Neurological Sciences</h3>
-              <p>Cutting-edge neuroimaging and neurosurgical expertise for complex brain and spinal cord conditions
-                with innovative treatment approaches.</p>
-              <div class="specialty-features">
-                <span><i class="bi bi-check-circle-fill"></i>Advanced Brain Imaging</span>
-                <span><i class="bi bi-check-circle-fill"></i>Robotic Surgery</span>
-              </div>
-              <a href="department-details.html" class="specialty-link">
-                Explore Neurology <i class="bi bi-arrow-right"></i>
-              </a>
-            </div>
-            <div class="specialty-visual">
-              <img src="{{ asset('assets/users/assets/img/health/neurology-4.webp') }}" alt="Neurological Sciences" class="img-fluid">
-              <div class="visual-overlay">
-                <i class="bi bi-cpu"></i>
-              </div>
-            </div>
-          </div>
-        </div><!-- End Specialty Card -->
-
-        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
-          <div class="department-highlight">
-            <div class="highlight-icon">
-              <i class="bi bi-shield-plus"></i>
-            </div>
-            <h4>Orthopedic Surgery</h4>
-            <p>Comprehensive musculoskeletal care utilizing advanced arthroscopic techniques and joint replacement
-              procedures.</p>
-            <ul class="highlight-list">
-              <li>Sports Medicine</li>
-              <li>Joint Replacement</li>
-              <li>Spine Surgery</li>
-            </ul>
-            <a href="department-details.html" class="highlight-cta">Learn More</a>
-          </div>
-        </div><!-- End Department Highlight -->
-
-        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
-          <div class="department-highlight">
-            <div class="highlight-icon">
-              <i class="bi bi-people"></i>
-            </div>
-            <h4>Pediatric Care</h4>
-            <p>Child-centered healthcare services from newborn to adolescence with family-focused treatment
-              approaches.</p>
-            <ul class="highlight-list">
-              <li>Neonatal Intensive Care</li>
-              <li>Developmental Pediatrics</li>
-              <li>Pediatric Surgery</li>
-            </ul>
-            <a href="department-details.html" class="highlight-cta">Learn More</a>
-          </div>
-        </div><!-- End Department Highlight -->
-
-        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
-          <div class="department-highlight">
-            <div class="highlight-icon">
-              <i class="bi bi-activity"></i>
-            </div>
-            <h4>Cancer Treatment</h4>
-            <p>Multidisciplinary oncology program offering personalized cancer care with latest therapeutic
-              innovations.</p>
-            <ul class="highlight-list">
-              <li>Precision Medicine</li>
-              <li>Immunotherapy</li>
-              <li>Radiation Oncology</li>
-            </ul>
-            <a href="department-details.html" class="highlight-cta">Learn More</a>
-          </div>
-        </div><!-- End Department Highlight -->
-
-      </div>
-
-      <div class="emergency-banner" data-aos="fade-up" data-aos-delay="400">
-        <div class="row align-items-center">
-          <div class="col-lg-8">
-            <div class="emergency-content">
-              <h3>Emergency Services Available 24/7</h3>
-              <p>Our emergency department is equipped with state-of-the-art technology and staffed by board-certified
-                emergency physicians ready to provide immediate care.</p>
-            </div>
-          </div>
-          <div class="col-lg-4 text-lg-end">
-            <a href="tel:+15551234567" class="emergency-btn">
-              <i class="bi bi-telephone-fill"></i>
-              Call Emergency: (555) 123-4567
-            </a>
-          </div>
-        </div>
-      </div>
-
-    </div>
-
-  </section><!-- /Featured Departments Section -->
-
-  <!-- Featured Services Section -->
-  <section id="featured-services" class="featured-services section">
-
-    <!-- Section Title -->
-    <div class="container section-title" data-aos="fade-up">
-      <h2>Featured Services</h2>
-      <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
-    </div><!-- End Section Title -->
-
-    <div class="container" data-aos="fade-up" data-aos-delay="100">
-
-      <div class="row g-0">
-
-        <div class="col-lg-8" data-aos="fade-right" data-aos-delay="200">
-          <div class="featured-service-main">
-            <div class="service-image-wrapper">
-              <img src="{{ asset('assets/users/assets/img/health/consultation-4.webp') }}" alt="Premier Healthcare Services" class="img-fluid"
-                loading="lazy">
+      <div class="row gy-4">
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
+          <div class="service-item">
+            <div class="service-image">
+              <img src="{{ asset('assets/users/assets/img/health/cardiology-2.webp') }}" alt="Cardiology Services" class="img-fluid">
               <div class="service-overlay">
-                <div class="service-badge">
-                  <i class="bi bi-heart-pulse"></i>
-                  <span>Emergency Care</span>
-                </div>
+                <i class="fas fa-heartbeat"></i>
               </div>
             </div>
-            <div class="service-details">
-              <h2>Comprehensive Healthcare Excellence</h2>
-              <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus
-                orci luctus et ultrices posuere cubilia curae donec velit neque.</p>
-              <a href="#!" class="main-cta">Explore Our Services</a>
+            <div class="service-content">
+              <h3>Consultation Session Begins</h3>
+              <p>Pasien mengikuti sesi konsultasi dengan tenaga profesional.</p>
+              <div class="service-features">
+                <span class="feature-item"><i class="fas fa-check"></i> Wawancara</span>
+                <span class="feature-item"><i class="fas fa-check"></i> Menjawab soal tes</span>
+              </div>
+              <a href="service-details.html" class="service-btn">
+                <span>Learn More</span>
+                <i class="fas fa-arrow-right"></i>
+              </a>
             </div>
           </div>
-        </div>
+        </div><!-- End Service Item -->
 
-        <div class="col-lg-4" data-aos="fade-left" data-aos-delay="300">
-          <div class="services-sidebar">
-
-            <div class="service-item" data-aos="fade-up" data-aos-delay="400">
-              <div class="service-icon-wrapper">
-                <i class="bi bi-capsule"></i>
-              </div>
-              <div class="service-info">
-                <h4>Dermatology Clinic</h4>
-                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-                <a href="#!" class="service-link">Learn More</a>
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250">
+          <div class="service-item">
+            <div class="service-image">
+              <img src="{{ asset('assets/users/assets/img/health/neurology-3.webp') }}" alt="Neurology Services" class="img-fluid">
+              <div class="service-overlay">
+                <i class="fas fa-brain"></i>
               </div>
             </div>
-
-            <div class="service-item" data-aos="fade-up" data-aos-delay="500">
-              <div class="service-icon-wrapper">
-                <i class="bi bi-bandaid"></i>
-              </div>
-              <div class="service-info">
-                <h4>Surgery Center</h4>
-                <p>Donec rutrum congue leo eget malesuada curabitur arcu erat accumsan id imperdiet et porttitor at
-                  sem.</p>
-                <a href="#!" class="service-link">Learn More</a>
+            <div class="service-content">
+              <h3>Eye Movement Capture</h3>
+              <p>Kamera merekam pergerakan pupil selama proses asesmen.</p>
+              <div class="service-features">
+                <span class="feature-item"><i class="fas fa-check"></i> Alat Khusus</span>
+                <span class="feature-item"><i class="fas fa-check"></i> Durasi</span>
               </div>
+              <a href="service-details.html" class="service-btn">
+                <span>Learn More</span>
+                <i class="fas fa-arrow-right"></i>
+              </a>
             </div>
-
-            <div class="service-item" data-aos="fade-up" data-aos-delay="600">
-              <div class="service-icon-wrapper">
-                <i class="bi bi-activity"></i>
-              </div>
-              <div class="service-info">
-                <h4>Diagnostics Lab</h4>
-                <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui cras ultricies ligula sed
-                  magna.</p>
-                <a href="#!" class="service-link">Learn More</a>
-              </div>
-            </div>
-
           </div>
-        </div>
+        </div><!-- End Service Item -->
 
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
+          <div class="service-item">
+            <div class="service-image">
+              <img src="{{ asset('assets/users/assets/img/health/orthopedics-1.webp') }}" alt="Orthopedics Services" class="img-fluid">
+              <div class="service-overlay">
+                <i class="fas fa-bone"></i>
+              </div>
+            </div>
+            <div class="service-content">
+              <h3>Feature Analysis</h3>
+              <p>Sistem menganalisis pola pergerakan mata.
+              </p>
+              <div class="service-features">
+                <span class="feature-item"><i class="fas fa-check"></i> Hasil Analisis</span>
+                <span class="feature-item"><i class="fas fa-check"></i> Grafik dan Chart</span>
+              </div>
+              <a href="service-details.html" class="service-btn">
+                <span>Learn More</span>
+                <i class="fas fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div><!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="350">
+          <div class="service-item">
+            <div class="service-image">
+              <img src="{{ asset('assets/users/assets/img/health/pediatrics-4.webp') }}" alt="Pediatrics Services" class="img-fluid">
+              <div class="service-overlay">
+                <i class="fas fa-child"></i>
+              </div>
+            </div>
+            <div class="service-content">
+              <h3>Anxiety Level Estimation</h3>
+              <p>Model machine learning memprediksi tingkat kecemasan.</p>
+              <div class="service-features">
+                <span class="feature-item"><i class="fas fa-check"></i> Pre-trained Model</span>
+                <span class="feature-item"><i class="fas fa-check"></i> Diawasi Pakar</span>
+              </div>
+              <a href="service-details.html" class="service-btn">
+                <span>Learn More</span>
+                <i class="fas fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div><!-- End Service Item -->
+
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
+          <div class="service-item">
+            <div class="service-image">
+              <img src="{{ asset('assets/users/assets/img/health/emergency-2.webp') }}" alt="Emergency Services" class="img-fluid">
+              <div class="service-overlay">
+                <i class="fas fa-ambulance"></i>
+              </div>
+            </div>
+            <div class="service-content">
+              <h3>Result for Professional Review</h3>
+              <p>Hasil analisis digunakan sebagai bahan pertimbangan dalam konsultasi.</p>
+              <div class="service-features">
+                <span class="feature-item"><i class="fas fa-check"></i> Report</span>
+                {{-- <span class="feature-item"><i class="fas fa-check"></i> </span> --}}
+              </div>
+              <a href="service-details.html" class="service-btn">
+                <span>Learn More</span>
+                <i class="fas fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div><!-- End Service Item -->
       </div>
-
-      <div class="specialties-grid" data-aos="fade-up" data-aos-delay="300">
-        <div class="row align-items-center">
-
-          <div class="col-lg-3 col-md-6">
-            <div class="specialty-card">
-              <div class="specialty-image">
-                <img src="{{ asset('assets/users/assets/img/health/maternal-2.webp') }}" alt="Maternal Care" class="img-fluid" loading="lazy">
-              </div>
-              <div class="specialty-content">
-                <h5>Maternal Care</h5>
-                <span>Expert pregnancy &amp; delivery support</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-lg-3 col-md-6">
-            <div class="specialty-card">
-              <div class="specialty-image">
-                <img src="{{ asset('assets/users/assets/img/health/vaccination-3.webp') }}" alt="Vaccination" class="img-fluid" loading="lazy">
-              </div>
-              <div class="specialty-content">
-                <h5>Vaccination</h5>
-                <span>Complete immunization programs</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-lg-3 col-md-6">
-            <div class="specialty-card">
-              <div class="specialty-image">
-                <img src="{{ asset('assets/users/assets/img/health/emergency-1.webp') }}" alt="Emergency Care" class="img-fluid" loading="lazy">
-              </div>
-              <div class="specialty-content">
-                <h5>Emergency Care</h5>
-                <span>24/7 critical care services</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-lg-3 col-md-6">
-            <div class="specialty-card">
-              <div class="specialty-image">
-                <img src="{{ asset('assets/users/assets/img/health/facilities-6.webp') }}" alt="Advanced Tech" class="img-fluid" loading="lazy">
-              </div>
-              <div class="specialty-content">
-                <h5>Advanced Technology</h5>
-                <span>State-of-the-art medical equipment</span>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
     </div>
+  </section><!-- /Services Section -->
 
-  </section><!-- /Featured Services Section -->
-
-  <!-- Find A Doctor Section -->
+  <!-- Team Research Section -->
   <section id="find-a-doctor" class="find-a-doctor section">
 
     <!-- Section Title -->
-    <div class="container section-title" data-aos="fade-up">
-      <h2>Find A Doctor</h2>
-      <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
+    <div class="container section-title p-0" data-aos="fade-up">
+      <h2>Research Team</h2>
+      <p>Tim yang terlibat dalam penelitian ini</p>
+    </div><!-- End Section Title -->
+
+    <div class="container" data-aos="fade-up" data-aos-delay="100">
+      <div class="doctors-grid" data-aos="fade-up" data-aos-delay="300">
+
+        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
+          <div class="profile-header">
+            <div class="doctor-avatar">
+              <img src="{{ asset('assets/users/assets/img/person/mahayoga.jpg') }}" alt="Mahayoga Ksatria Hanafi Bahtiar" class="img-fluid">
+            </div>
+            <div class="doctor-details">
+              <h4>Mahayoga Ksatria Hanafi Bahtiar</h4>
+              <span class="specialty-tag">Mahasiswa</span>
+              <div class="experience-info">
+                <i class="bi bi-compass"></i>
+                <span>Politeknik Negeri Jember</span>
+              </div>
+              <div class="experience-info">
+                <i class="bi bi-envelope"></i>
+                <span>myoga.bahtiar@gmail.com</span>
+              </div>
+            </div>
+          </div>
+        </div><!-- End Doctor Profile -->
+
+        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
+          <div class="profile-header">
+            <div class="doctor-avatar">
+              <img src="{{ asset('assets/users/assets/img/person/khafid.png') }}" alt="Khafidurrohman Agustianto, S.Pd, M.Eng" class="img-fluid">
+            </div>
+            <div class="doctor-details">
+              <h4>Khafidurrohman Agustianto, S.Pd, M.Eng</h4>
+              <span class="specialty-tag">Dosen Pembimbing</span>
+              <div class="experience-info">
+                <i class="bi bi-compass"></i>
+                <span>Politeknik Negeri Jember</span>
+              </div>
+              <div class="experience-info">
+                <i class="bi bi-envelope"></i>
+                <span>khafid@polije.ac.id</span>
+              </div>
+            </div>
+          </div>
+        </div><!-- End Doctor Profile -->
+      </div>
+    </div>
+
+  </section><!-- /Team Research Section -->
+
+  <!-- Appointmnet Section -->
+  <section id="appointmnet" class="appointmnet section">
+
+    <!-- Section Title -->
+    <div class="container section-title my-5 p-0" data-aos="fade-up">
+      <h1>Make an Appointment</h1>
     </div><!-- End Section Title -->
 
     <div class="container" data-aos="fade-up" data-aos-delay="100">
 
-      <div class="row justify-content-center mb-5" data-aos="fade-up" data-aos-delay="200">
-        <div class="col-lg-8 text-center">
-          <div class="search-section">
-            <h3 class="search-title">Find Your Perfect Healthcare Provider</h3>
-            <p class="search-subtitle">Search through our comprehensive directory of experienced medical professionals
-            </p>
-            <form class="search-form" action="#!" method="#">
-              <div class="search-input-group">
-                <div class="input-wrapper">
-                  <i class="bi bi-person"></i>
-                  <input type="text" class="form-control" name="doctor_name" placeholder="Enter doctor name">
+      <div class="row">
+        <div class="col-lg-10 mx-auto">
+          <div class="booking-wrapper">
+            <div class="booking-header text-center" data-aos="fade-up" data-aos-delay="200">
+              <h2>Schedule Your Appointment</h2>
+              <p>Book your medical appointment in just a few simple steps. Our experienced healthcare professionals
+                are ready to provide you with the best care possible.</p>
+            </div>
+
+            <div class="booking-steps" data-aos="fade-up" data-aos-delay="300">
+              <div class="step">
+                <div class="step-icon">
+                  <i class="bi bi-calendar-check"></i>
                 </div>
-                <div class="select-wrapper">
-                  <i class="bi bi-heart-pulse"></i>
-                  <select class="form-select" name="specialty">
-                    <option value="">All Specialties</option>
-                    <option value="cardiology">Cardiology</option>
-                    <option value="neurology">Neurology</option>
-                    <option value="orthopedics">Orthopedics</option>
-                    <option value="pediatrics">Pediatrics</option>
-                    <option value="dermatology">Dermatology</option>
-                    <option value="oncology">Oncology</option>
-                  </select>
+                <div class="step-content">
+                  <h4>Select Service</h4>
+                  <p>Choose the medical service you need</p>
                 </div>
-                <button type="submit" class="search-btn">
-                  <i class="bi bi-search"></i>
-                  Find Doctors
-                </button>
               </div>
-            </form>
-          </div>
-        </div>
-      </div>
-
-      <div class="doctors-grid" data-aos="fade-up" data-aos-delay="300">
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-2.webp') }}" alt="Dr. Amanda Foster" class="img-fluid">
-              <div class="status-indicator available"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. Amanda Foster</h4>
-              <span class="specialty-tag">Cardiology Specialist</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>14 years experience</span>
+              <div class="step">
+                <div class="step-icon">
+                  <i class="bi bi-clock"></i>
+                </div>
+                <div class="step-content">
+                  <h4>Pick Date &amp; Time</h4>
+                  <p>Select your preferred appointment slot</p>
+                </div>
+              </div>
+              <div class="step">
+                <div class="step-icon">
+                  <i class="bi bi-person-check"></i>
+                </div>
+                <div class="step-content">
+                  <h4>Confirm Details</h4>
+                  <p>Provide your information and confirm</p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
+
+            <div class="appointment-form" data-aos="fade-up" data-aos-delay="400">
+              <form action="forms/book-appointment.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="Full Name" required="">
+                  </div>
+                  <div class="col-md-6">
+                    <input type="email" name="email" class="form-control" placeholder="Email Address" required="">
+                  </div>
+                  <div class="col-md-6">
+                    <input type="tel" name="phone" class="form-control" placeholder="Phone Number" required="">
+                  </div>
+                  <div class="col-md-6">
+                    <select name="department" class="form-select" required="">
+                      <option value="">Select Department</option>
+                      <option value="general">General Consultation</option>
+                      <option value="cardiology">Cardiology</option>
+                      <option value="neurology">Neurology</option>
+                      <option value="orthopedics">Orthopedics</option>
+                      <option value="pediatrics">Pediatrics</option>
+                      <option value="dermatology">Dermatology</option>
+                      <option value="oncology">Oncology</option>
+                    </select>
+                  </div>
+                  <div class="col-md-6">
+                    <input type="date" name="date" class="form-control" required="">
+                  </div>
+                  <div class="col-md-6">
+                    <select name="doctor" class="form-select" required="">
+                      <option value="">Select Doctor</option>
+                      <option value="dr-sarah-johnson">Dr. Sarah Johnson</option>
+                      <option value="dr-michael-chen">Dr. Michael Chen</option>
+                      <option value="dr-emily-davis">Dr. Emily Davis</option>
+                      <option value="dr-robert-smith">Dr. Robert Smith</option>
+                      <option value="dr-lisa-brown">Dr. Lisa Brown</option>
+                      <option value="dr-david-wilson">Dr. David Wilson</option>
+                      <option value="dr-maria-rodriguez">Dr. Maria Rodriguez</option>
+                    </select>
+                  </div>
+                  <div class="col-12">
+                    <textarea name="message" class="form-control" rows="4"
+                      placeholder="Additional notes or symptoms (optional)"></textarea>
+                  </div>
+                  <div class="col-12">
+                    <div class="loading">Loading</div>
+                    <div class="error-message"></div>
+                    <div class="sent-message">Your appointment has been scheduled. Thank you!</div>
+                    <button type="submit" class="btn-book">Book Appointment Now</button>
+                  </div>
+                </div>
+              </form>
             </div>
-            <span class="rating-score">4.9</span>
-            <span class="review-count">(127 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Book Now</a>
-          </div>
-        </div><!-- End Doctor Profile -->
 
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="200">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-6.webp') }}" alt="Dr. Marcus Johnson" class="img-fluid">
-              <div class="status-indicator busy"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. Marcus Johnson</h4>
-              <span class="specialty-tag">Neurology Expert</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>16 years experience</span>
-              </div>
+            <div class="emergency-info" data-aos="fade-up" data-aos-delay="500">
+              <p><i class="bi bi-exclamation-triangle"></i> For medical emergencies, please call <strong>911</strong>
+                or go to the nearest emergency room.</p>
             </div>
+
           </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-half"></i>
-            </div>
-            <span class="rating-score">4.8</span>
-            <span class="review-count">(89 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Schedule</a>
-          </div>
-        </div><!-- End Doctor Profile -->
-
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="300">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-4.webp') }}" alt="Dr. Rachel Williams" class="img-fluid">
-              <div class="status-indicator available"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. Rachel Williams</h4>
-              <span class="specialty-tag">Pediatrics Care</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>11 years experience</span>
-              </div>
-            </div>
-          </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-            </div>
-            <span class="rating-score">5.0</span>
-            <span class="review-count">(203 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Book Now</a>
-          </div>
-        </div><!-- End Doctor Profile -->
-
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="400">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-8.webp') }}" alt="Dr. David Chen" class="img-fluid">
-              <div class="status-indicator offline"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. David Chen</h4>
-              <span class="specialty-tag">Orthopedic Surgery</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>22 years experience</span>
-              </div>
-            </div>
-          </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-half"></i>
-            </div>
-            <span class="rating-score">4.7</span>
-            <span class="review-count">(156 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Schedule</a>
-          </div>
-        </div><!-- End Doctor Profile -->
-
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="500">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-11.webp') }}" alt="Dr. Victoria Torres" class="img-fluid">
-              <div class="status-indicator available"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. Victoria Torres</h4>
-              <span class="specialty-tag">Dermatology Care</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>9 years experience</span>
-              </div>
-            </div>
-          </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star"></i>
-            </div>
-            <span class="rating-score">4.5</span>
-            <span class="review-count">(74 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Book Now</a>
-          </div>
-        </div><!-- End Doctor Profile -->
-
-        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="600">
-          <div class="profile-header">
-            <div class="doctor-avatar">
-              <img src="{{ asset('assets/users/assets/img/health/staff-14.webp') }}" alt="Dr. Benjamin Lee" class="img-fluid">
-              <div class="status-indicator available"></div>
-            </div>
-            <div class="doctor-details">
-              <h4>Dr. Benjamin Lee</h4>
-              <span class="specialty-tag">Oncology Treatment</span>
-              <div class="experience-info">
-                <i class="bi bi-award"></i>
-                <span>19 years experience</span>
-              </div>
-            </div>
-          </div>
-          <div class="rating-section">
-            <div class="stars">
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-              <i class="bi bi-star-fill"></i>
-            </div>
-            <span class="rating-score">4.9</span>
-            <span class="review-count">(194 reviews)</span>
-          </div>
-          <div class="action-buttons">
-            <a href="#!" class="btn-secondary">View Details</a>
-            <a href="#!" class="btn-primary">Schedule</a>
-          </div>
-        </div><!-- End Doctor Profile -->
-
-      </div>
-
-      <div class="text-center mt-5" data-aos="fade-up" data-aos-delay="700">
-        <a href="doctors.html" class="btn-view-all">
-          View All Doctors
-          <i class="bi bi-arrow-right"></i>
-        </a>
-      </div>
-
-    </div>
-
-  </section><!-- /Find A Doctor Section -->
-
-  <!-- Call To Action Section -->
-  <section id="call-to-action" class="call-to-action section light-background">
-
-    <div class="container" data-aos="fade-up" data-aos-delay="100">
-
-      <div class="hero-content">
-        <div class="row align-items-center">
-
-          <div class="col-lg-6">
-            <div class="content-wrapper" data-aos="fade-up" data-aos-delay="200">
-              <h1>Excellence in Medical Care, Every Day</h1>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
-
-              <div class="cta-wrapper">
-                <a href="appointment.html" class="primary-cta">
-                  <span>Schedule Consultation</span>
-                  <i class="bi bi-arrow-right"></i>
-                </a>
-                <a href="services.html" class="secondary-cta">
-                  <span>Explore Services</span>
-                  <i class="bi bi-arrow-right"></i>
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-lg-6">
-            <div class="image-container" data-aos="fade-left" data-aos-delay="300">
-              <img src="{{ asset('assets/users/assets/img/health/facilities-9.webp') }}" alt="Medical Excellence" class="img-fluid">
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <div class="features-section">
-
-        <div class="row g-0">
-
-          <div class="col-lg-4">
-            <div class="feature-block" data-aos="fade-up" data-aos-delay="200">
-              <div class="feature-icon">
-                <i class="bi bi-shield-check"></i>
-              </div>
-              <h3>Advanced Technology</h3>
-              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                laborum.</p>
-            </div>
-          </div>
-
-          <div class="col-lg-4">
-            <div class="feature-block" data-aos="fade-up" data-aos-delay="300">
-              <div class="feature-icon">
-                <i class="bi bi-clock"></i>
-              </div>
-              <h3>24/7 Availability</h3>
-              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-                excepteur.</p>
-            </div>
-          </div>
-
-          <div class="col-lg-4">
-            <div class="feature-block" data-aos="fade-up" data-aos-delay="400">
-              <div class="feature-icon">
-                <i class="bi bi-people"></i>
-              </div>
-              <h3>Expert Team</h3>
-              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
-                totam rem.</p>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-
-      <div class="contact-block">
-        <div class="row">
-
-          <div class="col-lg-8">
-            <div class="contact-content" data-aos="fade-up" data-aos-delay="200">
-              <h2>Need Immediate Medical Assistance?</h2>
-              <p>Our emergency response team is available around the clock to provide immediate medical support when
-                you need it most.</p>
-            </div>
-          </div>
-
-          <div class="col-lg-4">
-            <div class="contact-actions" data-aos="fade-up" data-aos-delay="300">
-              <a href="tel:5551234567" class="emergency-call">
-                <i class="bi bi-telephone"></i>
-                <span>(555) 123-4567</span>
-              </a>
-              <a href="contact.html" class="contact-link">Find Location</a>
-            </div>
-          </div>
-
         </div>
       </div>
 
     </div>
 
-  </section><!-- /Call To Action Section -->
+  </section><!-- /Appointmnet Section -->
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index b43689e..160446b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -22,7 +22,8 @@
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
 });
 
-Route::resource('beranda', LandingController::class);
+Route::resource('beranda', LandingController::class)->only(['index']);
+    Route::get('/about', [LandingController::class, 'about'])->name('beranda.about');
 Route::middleware(['auth', 'role.auth'])->group(function() {
     Route::resource('dashboard', DashboardController::class);
     Route::resource('users', UsersController::class);