From cb50fbbb1906663c25e9a3aae86e64d6f837108b Mon Sep 17 00:00:00 2001
From: KaviSaparamadu <saparamadukvishka1@gmail.com>
Date: Fri, 7 Aug 2026 15:04:46 +0530
Subject: [PATCH] ui chng

---
 resources/views/courses.blade.php  |  45 +++-
 resources/views/students.blade.php | 399 +++++++++++++++++++++++++----
 2 files changed, 392 insertions(+), 52 deletions(-)

diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php
index 4f8b9c5..a00f0b5 100644
--- a/resources/views/courses.blade.php
+++ b/resources/views/courses.blade.php
@@ -370,6 +370,24 @@ h1, h2, h3, h4, h5, h6,
     background-size: 20px 20px;
 }
 
+.features-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: #FFE618;
+    font-size: 12.5px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 7px 18px;
+    border-radius: 999px;
+    margin-bottom: 16px;
+}
+
 .features-section h2 {
     font-size: 45px;
     font-weight: 800;
@@ -378,6 +396,7 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .feature-box {
+    position: relative;
     background: #fff;
     padding: 40px 28px;
     border-radius: 24px;
@@ -386,6 +405,18 @@ h1, h2, h3, h4, h5, h6,
     border: 1px solid var(--card-border);
     text-align: center;
     box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
+    overflow: hidden;
+}
+
+.feature-index {
+    position: absolute;
+    top: 14px;
+    right: 18px;
+    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    color: rgba(62, 81, 184, 0.25);
+    letter-spacing: 0.05em;
 }
 
 .feature-icon-wrapper {
@@ -398,9 +429,8 @@ h1, h2, h3, h4, h5, h6,
     align-items: center;
     justify-content: center;
     font-size: 24px;
-    margin-bottom: 24px;
+    margin: 0 auto 24px;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    margin-left: 38%;
 }
 
 .feature-box:hover  {
@@ -410,6 +440,10 @@ h1, h2, h3, h4, h5, h6,
     color:#6a2525 ;
 }
 
+.feature-box:hover .feature-index {
+    color: rgba(188, 26, 26, 0.35);
+}
+
 .feature-box:hover .feature-icon-wrapper {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
     color: #fff;
@@ -582,11 +616,13 @@ h1, h2, h3, h4, h5, h6,
                     background-size: cover;
                     background-position: center;
                     background-repeat: no-repeat;">
+            <span class="features-eyebrow"><i class="fa-solid fa-star"></i> Our Advantage</span>
             <h2>Why Study With Us?</h2>
-            
+
             <div class="row g-4">
                 <div class="col-xl-3 col-md-6">
                     <div class="feature-box">
+                        <span class="feature-index">01</span>
                         <div class="feature-icon-wrapper">
                             <i class="fas fa-chalkboard-teacher"></i>
                         </div>
@@ -597,6 +633,7 @@ h1, h2, h3, h4, h5, h6,
 
                 <div class="col-xl-3 col-md-6">
                     <div class="feature-box">
+                        <span class="feature-index">02</span>
                         <div class="feature-icon-wrapper">
                             <i class="fas fa-cogs"></i>
                         </div>
@@ -607,6 +644,7 @@ h1, h2, h3, h4, h5, h6,
 
                 <div class="col-xl-3 col-md-6">
                     <div class="feature-box">
+                        <span class="feature-index">03</span>
                         <div class="feature-icon-wrapper">
                             <i class="fas fa-award"></i>
                         </div>
@@ -617,6 +655,7 @@ h1, h2, h3, h4, h5, h6,
 
                 <div class="col-xl-3 col-md-6">
                     <div class="feature-box">
+                        <span class="feature-index">04</span>
                         <div class="feature-icon-wrapper">
                             <i class="fas fa-briefcase"></i>
                         </div>
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index 7085e3d..77388b1 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -23,37 +23,152 @@
 }
 
 body {
-    font-family: 'Segoe UI', Arial, sans-serif;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
     color: var(--text-main);
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
+}
+
 .hero {
-    background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
-    url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
-    background-size: cover;
-    background-position: center;
+    position: relative;
+    overflow: hidden;
     color: #fff;
-    padding: 80px 0; 
+    padding: 76px 0 64px;
     text-align: center;
-    height: 480px;
+    min-height: 420px;
+    display: flex;
+    align-items: center;
+}
+
+.hero-slideshow {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+
+.hero-slide {
+    position: absolute;
+    inset: 0;
+    background-position: center;
+    background-size: cover;
+    opacity: 0;
+    transform: scale(1);
+    transition: opacity 2s ease-in-out, transform 7s ease-out;
+}
+
+.hero-slide.active {
+    opacity: 1;
+    transform: scale(1.09);
+}
+
+.hero-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6));
+    pointer-events: none;
+}
+
+.hero > .container {
+    position: relative;
+    z-index: 2;
+}
+
+.hero-dots {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 18px;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.hero-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.15);
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.hero-dot:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.hero-dot.active {
+    background: #FFE618;
+    border-color: #FFE618;
+    width: 26px;
+    border-radius: 999px;
+}
+
+.hero h1 {
+    font-size: clamp(2rem, 4vw, 3rem);
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.16);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: #FFE618;
+    font-size: 12.5px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 8px 18px;
+    border-radius: 999px;
+    margin-bottom: 18px;
 }
 
 .portal-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
     border: none;
-    border-radius: 15px;
+    border-radius: 20px;
     transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
     box-shadow: 0 5px 20px rgba(0,0,0,.04);
     border: 1px solid var(--card-border);
     cursor: pointer;
+    overflow: hidden;
+}
+
+.portal-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s ease;
+}
+
+.portal-card:hover::before {
+    transform: scaleX(1);
 }
 
 .portal-card:hover {
     transform: translateY(-8px);
     border-color: #5f3131;
-    box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
+    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.14);
 }
 
 .portal-icon {
+    position: relative;
     width: 70px;
     height: 70px;
     background: #822a32;
@@ -64,35 +179,132 @@ body {
     justify-content: center;
     font-size: 28px;
     margin: auto;
+    box-shadow: 0 8px 18px rgba(130, 42, 50, 0.25);
     transition: 0.4s ease;
 }
 
+.portal-icon::after {
+    content: '';
+    position: absolute;
+    inset: -11px;
+    z-index: -1;
+    border-radius: 50%;
+    background: rgba(130, 42, 50, 0.08);
+    transition: background-color 0.4s ease, transform 0.4s ease;
+}
+
 .portal-card:hover .portal-icon {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     transform: scale(1.1);
-    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
+    box-shadow: 0 8px 20px rgba(188, 26, 26, 0.35);
      color: #ffed8b;
 }
 
+.portal-card:hover .portal-icon::after {
+    background: rgba(188, 26, 26, 0.14);
+    transform: scale(1.08);
+}
+
+.portal-access-hint {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    margin-top: auto;
+    padding-top: 16px;
+    border-top: 1px dashed var(--card-border);
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--secondary);
+    opacity: 0.75;
+    transition: opacity 0.3s ease, color 0.3s ease;
+}
+
+.portal-card:hover .portal-access-hint {
+    opacity: 1;
+    color: var(--secondary-hover);
+}
+
+.portal-access-hint i {
+    transition: transform 0.3s ease;
+}
+
+.portal-card:hover .portal-access-hint i {
+    transform: translateX(3px);
+}
+
 .btn-portal {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
-    padding: 12px 35px;
-    border-radius: 8px;
-    font-weight: 600;
+    padding: 13px 34px;
+    border-radius: 999px;
+    font-weight: 700;
+    border: 2px solid rgba(255, 255, 255, 0.9);
     transition: all 0.3s ease;
 }
 
 .btn-portal:hover {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
-    color: #f4ff8d;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
+    color: #fff;
+    transform: translateY(-3px);
+    box-shadow: 0 10px 24px rgba(188, 26, 26, 0.4);
+}
+
+.btn-hero-outline {
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    border: 2px solid rgba(255, 255, 255, 0.7);
+    padding: 13px 34px;
+    border-radius: 999px;
+    font-weight: 700;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.btn-hero-outline:hover {
+    background: rgba(255, 255, 255, 0.95);
+    color: var(--secondary-hover);
+    border-color: #fff;
+    transform: translateY(-3px);
 }
 
 .btn:hover {
   border-color: rgba(255, 255, 255, 0.98);
 }
+
+.hero-quick-stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 36px;
+}
+
+.hero-quick-stat {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #fff;
+    font-size: 13.5px;
+    font-weight: 600;
+    padding: 9px 18px;
+    border-radius: 999px;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.hero-quick-stat:hover {
+    transform: translateY(-3px);
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.hero-quick-stat i {
+    color: #FFE618;
+}
  
 .modal-content {
     border: none;
@@ -120,6 +332,19 @@ body {
     font-size: 1.35rem;
 }
 
+.modal-login-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    color: #FFE618;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    box-shadow: 0 10px 24px rgba(188, 26, 26, 0.25);
+}
+
 .modal-body {
     padding: 10px 25px 20px;
 }
@@ -200,6 +425,25 @@ body {
     box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
+.custom-list-item {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.custom-list-item:hover {
+    background: #ffffff;
+    transform: translateX(5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+}
+
+.quick-link-icon {
+    width: 48px;
+    height: 48px;
+    background-color: rgb(108, 55, 55);
+    color: #fff;
+}
+
 .bg-light {
     background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
     background-size: cover;
@@ -235,24 +479,56 @@ body {
 </style>
 
 <!-- HERO SECTION -->
+@php
+    $studentHeroSlides = [
+        'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg',
+        'https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80',
+        'https://images.unsplash.com/photo-1553440569-bcc63803a83d?auto=format&fit=crop&w=1600&q=80',
+        'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80',
+        'https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80',
+    ];
+@endphp
 <section class="hero">
+    <div class="hero-slideshow" aria-hidden="true">
+        @foreach($studentHeroSlides as $index => $slideImage)
+            <div class="hero-slide {{ $index === 0 ? 'active' : '' }}" style="background-image: url('{{ $slideImage }}');"></div>
+        @endforeach
+    </div>
+    <div class="hero-overlay" aria-hidden="true"></div>
+    <div class="hero-dots" aria-hidden="true">
+        @foreach($studentHeroSlides as $index => $slideImage)
+            <button type="button" class="hero-dot {{ $index === 0 ? 'active' : '' }}" data-slide-index="{{ $index }}" aria-label="Show slide {{ $index + 1 }}"></button>
+        @endforeach
+    </div>
     <div class="container" style="padding-top: 46px;">
         <div class="animate-item animated fade-up-init">
+            <span class="hero-badge"><i class="fa-solid fa-user-graduate"></i> Your Academic Hub</span>
             <h1 class="fw-bold display-5">Student Portal</h1>
             <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
                 Access your courses, timetable, assignments, examination results,
                 payments and profile from one place.
             </p>
 
-            <button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
-                Student Login
-            </button>
+            <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
+                <button onclick="studentlogin()" class="btn btn-portal shadow">
+                    <i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
+                </button>
+                <a href="#student-services" class="btn btn-hero-outline">
+                    <i class="fa-solid fa-compass me-2"></i>Browse Services
+                </a>
+            </div>
+
+            <div class="hero-quick-stats">
+                <span class="hero-quick-stat"><i class="fa-solid fa-clock"></i> 24/7 Access</span>
+                <span class="hero-quick-stat"><i class="fa-solid fa-shield-halved"></i> Secure Login</span>
+                <span class="hero-quick-stat"><i class="fa-solid fa-layer-group"></i> 6 Portal Services</span>
+            </div>
         </div>
     </div>
 </section>
 
 <!-- SERVICES SECTION -->
-<section class="py-5 overflow-hidden">
+<section id="student-services" class="py-5 overflow-hidden">
     <div class="container">
         <div class="text-center mb-5 animate-item fade-up-init">
             <h2 class="fw-bold">Student Services</h2>
@@ -269,6 +545,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">My Courses</h4>
                     <p class="text-muted mb-0">View enrolled courses and learning materials.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
 
@@ -279,6 +556,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">Class Timetable</h4>
                     <p class="text-muted mb-0">Check your weekly lecture schedule.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
 
@@ -289,6 +567,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">Assignments</h4>
                     <p class="text-muted mb-0">Submit assignments and download resources.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
 
@@ -299,6 +578,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">Exam Results</h4>
                     <p class="text-muted mb-0">View semester and final examination results.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
 
@@ -309,6 +589,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">Fee Payments</h4>
                     <p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
 
@@ -319,6 +600,7 @@ body {
                     </div>
                     <h4 class="mt-4 fw-bold">Student Profile</h4>
                     <p class="text-muted mb-0">Update your personal information securely.</p>
+                    <span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
                 </div>
             </div>
         </div>
@@ -349,14 +631,10 @@ body {
                     <div class="d-flex flex-column gap-3">
 
                         <!-- Item 1 -->
-                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
-                           style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
-                           onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
-                           onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
+                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
                             
                             <div class="d-flex align-items-center gap-3">
-                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" 
-                                     style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
                                     <i class="fa-solid fa-calendar-days fs-5"></i>
                                 </div>
                                 <div>
@@ -369,14 +647,10 @@ body {
                         </a>
 
                         <!-- Item 2 -->
-                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
-                           style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
-                           onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
-                           onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
+                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
                             
                             <div class="d-flex align-items-center gap-3">
-                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" 
-                                     style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
                                     <i class="fa-solid fa-book-bookmark fs-5"></i>
                                 </div>
                                 <div>
@@ -389,14 +663,10 @@ body {
                         </a>
 
                         <!-- Item 3 -->
-                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
-                           style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
-                           onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
-                           onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
+                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
                             
                             <div class="d-flex align-items-center gap-3">
-                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" 
-                                     style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
                                     <i class="fa-solid fa-file-lines fs-5"></i>
                                 </div>
                                 <div>
@@ -409,14 +679,10 @@ body {
                         </a>
 
                         <!-- Item 4 -->
-                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between transition-all custom-list-item"
-                           style="background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease;"
-                           onmouseover="this.style.background='#ffffff'; this.style.transform='translateX(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.08)';"
-                           onmouseout="this.style.background='rgba(255, 255, 255, 0.7)'; this.style.transform='translateX(0)'; this.style.boxShadow='none';" onclick="studentlogin()">
+                        <a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
                             
                             <div class="d-flex align-items-center gap-3">
-                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" 
-                                     style="width: 48px; height: 48px; background-color: rgb(108, 55, 55); color: #fff;">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
                                     <i class="fa-solid fa-headset fs-5"></i>
                                 </div>
                                 <div>
@@ -442,7 +708,7 @@ body {
         <h2 class="fw-bold">Ready to Access Your Student Account?</h2>
         <p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
         <button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
-            Student Login
+            <i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
         </button>
     </div>
 </section>
@@ -451,12 +717,15 @@ body {
 <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-            <div class="modal-header d-flex align-items-center justify-content-between">
-                <h5 class="modal-title w-100 text-center" id="studentLoginModalLabel">
-                    <i class="fa-solid fa-lock-open me-2" style="font-size: 20px; color: var(--secondary);"></i>
+            <div class="modal-header d-flex flex-column align-items-center position-relative">
+                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
+                <div class="modal-login-icon">
+                    <i class="fa-solid fa-lock-open"></i>
+                </div>
+                <h5 class="modal-title text-center mt-3" id="studentLoginModalLabel">
                     Student Portal Login
                 </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <p class="text-muted small text-center mb-0">Enter your credentials to continue</p>
             </div>
             <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
                 @csrf
@@ -503,6 +772,38 @@ function studentlogin() {
 }
 
 document.addEventListener('DOMContentLoaded', function () {
+    // Hero Background Slideshow
+    const heroSlides = document.querySelectorAll('.hero-slide');
+    const heroDots = document.querySelectorAll('.hero-dot');
+    if (heroSlides.length > 1) {
+        let activeSlide = 0;
+        let slideTimer;
+
+        const goToSlide = (index) => {
+            heroSlides[activeSlide].classList.remove('active');
+            heroDots[activeSlide]?.classList.remove('active');
+            activeSlide = index;
+            heroSlides[activeSlide].classList.add('active');
+            heroDots[activeSlide]?.classList.add('active');
+        };
+
+        const startSlideTimer = () => {
+            clearInterval(slideTimer);
+            slideTimer = setInterval(() => {
+                goToSlide((activeSlide + 1) % heroSlides.length);
+            }, 5500);
+        };
+
+        heroDots.forEach(dot => {
+            dot.addEventListener('click', () => {
+                goToSlide(parseInt(dot.dataset.slideIndex, 10));
+                startSlideTimer();
+            });
+        });
+
+        startSlideTimer();
+    }
+
     const animatedElements = document.querySelectorAll('.animate-item');
 
     const observer = new IntersectionObserver((entries) => {