ui

resources/views/courses.blade.php

@@ -25,11 +25,16 @@
 }
 
 body {
-    font-family: 'Segoe UI', Arial, sans-serif;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
     color: var(--text-main);
     background-color: #ffffff;
 }
 
+h1, h2, h3, h4, h5, h6,
+.course-title, .features-section h2, .feature-box h5 {
+    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
+}
+
 /* ===== Hero Section ===== */
 .hero {
     background-image: linear-gradient(rgba(207, 220, 238, 0.9), rgba(35, 29, 29, 0.85)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
@@ -37,12 +42,30 @@ body {
     background-position: center;
     background-repeat: no-repeat;
     color: #ffffff;
-    padding: 130px 0;
+    padding: 92px 0 100px;
     text-align: center;
 }
 
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.14);
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    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;
+}
+
 .hero h1 {
-    font-size: 55px;
+    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
     font-weight: 800;
     text-shadow: 0 2px 15px rgba(0,0,0,0.4);
 }
@@ -50,10 +73,16 @@ body {
 .hero p {
     max-width: 700px;
     margin: auto;
-    font-size: 19px;
+    font-size: 17px;
     color: #F1F5F9;
 }
 
+.search-results-hint {
+    margin-top: 14px;
+    font-size: 13.5px;
+    color: rgba(255, 255, 255, 0.75);
+}
+
 /* --- Premium Search Box Styling --- */
 .search-box {
     max-width: 550px;
@@ -65,17 +94,50 @@ body {
     background: #fff;
     border-radius: 100px;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: box-shadow 0.3s ease;
+}
+
+.search-box:focus-within {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 230, 24, 0.35);
+}
+
+.search-box-icon {
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+    color: #94A3B8;
+    font-size: 15px;
 }
 
 .search-box input {
     width: 100%;
-    padding: 16px 28px;
+    padding: 16px 12px;
     border: none;
     outline: none;
     font-size: 16px;
     color: #333;
 }
 
+.search-box-clear {
+    display: none;
+    align-items: center;
+    padding: 0 14px;
+    border: none;
+    background: transparent;
+    color: #94A3B8;
+    cursor: pointer;
+    font-size: 15px;
+    transition: color 0.2s ease;
+}
+
+.search-box-clear:hover {
+    color: var(--secondary);
+}
+
+.search-box-clear.visible {
+    display: flex;
+}
+
 .search-box button {
     background: linear-gradient(135deg, #13141A 0%, #8ca8e9 100%);
     color: #fff;
@@ -94,27 +156,34 @@ body {
 .course-card {
     overflow: hidden;
     background: #fff;
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border: 1px solid var(--card-border);
+    border-radius: 22px;
+    box-shadow: 0 8px 24px var(--shadow-color);
+    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease;
 }
 
 .course-card:hover {
-    transform: translateY(-6px);
+    transform: translateY(-7px);
+    box-shadow: 0 22px 48px rgba(62, 81, 184, 0.14);
+    border-color: rgba(62, 81, 184, 0.25);
 }
 
 .course-image-wrapper {
     padding: 20px;
     height: 100%;
+    overflow: hidden;
 }
 
 .course-card img {
     height: 220px;
     width: 100%;
     object-fit: cover;
+    border-radius: 16px;
     transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .course-card:hover img {
-    transform: scale(1.04);
+    transform: scale(1.05);
 }
 
 .course-card .card-body {
@@ -165,6 +234,9 @@ body {
 }
 
 .badge-bestseller {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
     background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
     color: #fff;
     font-weight: 700;
@@ -173,7 +245,14 @@ body {
     border-radius: 30px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2);
+    box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4);
+    animation: badgePulse 2.4s ease-out infinite;
+}
+
+@keyframes badgePulse {
+    0% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4); }
+    70% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 7px rgba(188, 26, 26, 0); }
+    100% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0); }
 }
 
 .rating-star {
@@ -182,7 +261,34 @@ body {
     font-size: 14px;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
+}
+
+.star-rating {
+    position: relative;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 1;
+    letter-spacing: 2px;
+}
+
+.star-rating-bg {
+    color: #dde3ea;
+}
+
+.star-rating-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 0;
+    color: #f39c12;
+    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.star-rating.filled .star-rating-fill {
+    width: calc(var(--rating) / 5 * 100%);
 }
 
 .rating-count {
@@ -193,13 +299,28 @@ body {
 
 .course-features {
     display: flex;
-    gap: 20px;
+    flex-wrap: wrap;
-    font-size: 13.5px;
+    gap: 10px;
+    font-size: 12.5px;
     color: var(--success-green);
     margin-bottom: 24px;
     font-weight: 600;
 }
 
+.course-features span {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(16, 185, 129, 0.08);
+    padding: 5px 12px;
+    border-radius: 8px;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.course-card:hover .course-features span {
+    background: rgba(16, 185, 129, 0.14);
+    transform: translateY(-2px);
+}
+
 .course-features span i {
     margin-right: 6px;
 }
@@ -214,14 +335,21 @@ body {
     padding: 13px 28px;
     font-weight: 600;
     font-size: 15px;
+    border-radius: 14px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     border: 2px solid transparent;
     text-decoration: none;
-    display: block;
+    display: flex;
-    text-align: center;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
     box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
 }
 
+.read-btn .read-btn-arrow {
+    transition: transform 0.3s ease;
+}
+
 .read-btn:hover {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
@@ -229,6 +357,10 @@ body {
     box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
 }
 
+.read-btn:hover .read-btn-arrow {
+    transform: translateX(4px);
+}
+
 /* --- Features Section --- */
 .features-section {
     background-color: var(--bg-light);
@@ -338,21 +470,27 @@ body {
 <section class="hero">
     <div class="container">
         <div class="animate-on-scroll animated fade-up-init">
+            <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> {{ $courses->count() }} Programs Available</span>
             <h1>Our Courses</h1>
             <p>
                 Build your future in the automotive industry through practical
                 training and internationally recognized learning experiences.
             </p>
             <div class="search-box">
+                <span class="search-box-icon"><i class="fas fa-search"></i></span>
                 <input
                     type="text"
                     id="courseSearch"
                     placeholder="Search Courses by title, level or description..."
                 >
+                <button type="button" class="search-box-clear" id="courseSearchClear" aria-label="Clear search">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
                 <button type="button">
                     <i class="fas fa-search"></i>
                 </button>
             </div>
+            <p class="search-results-hint" id="searchResultsHint"></p>
         </div>
     </div>
 </section>
@@ -392,12 +530,16 @@ body {
                                     
                                     <div class="course-meta-row">
                                         @if($course->badge)
-                                            <span class="badge-bestseller">{{ $course->badge }}</span>
+                                            <span class="badge-bestseller"><i class="fa-solid fa-bolt"></i> {{ $course->badge }}</span>
                                         @endif
 
                                         @if($course->rating)
                                             <span class="rating-star">
-                                                <i class="fas fa-star"></i> {{ $course->rating }}
+                                                <span class="star-rating" style="--rating: {{ $course->rating }};">
+                                                    <span class="star-rating-bg">★★★★★</span>
+                                                    <span class="star-rating-fill">★★★★★</span>
+                                                </span>
+                                                {{ $course->rating }}
                                             </span>
                                         @endif
 
@@ -414,7 +556,7 @@ body {
                                     </div>
 
                                     <div class="course-footer" style="max-width: 200px;">
-                                        <a href="/apply" class="read-btn">Apply Course</a>
+                                        <a href="/apply" class="read-btn">Apply Course <i class="fa-solid fa-paper-plane read-btn-arrow"></i></a>
                                     </div>
                                 </div>
                             </div>
@@ -491,30 +633,47 @@ body {
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     // === 1. Course Search Feature ===
-    document.getElementById('courseSearch').addEventListener('keyup', function() {
+    const courseSearchInput = document.getElementById('courseSearch');
-        let filter = this.value.toLowerCase();
+    const courseSearchClear = document.getElementById('courseSearchClear');
+    const searchResultsHint = document.getElementById('searchResultsHint');
+    const totalCourseCount = document.querySelectorAll('.course-item').length;
+
+    function runCourseSearch() {
+        let filter = courseSearchInput.value.toLowerCase();
         let courseItems = document.querySelectorAll('.course-item');
-        let hasResults = false;
+        let matchCount = 0;
 
         courseItems.forEach(function(item) {
             let title = item.querySelector('.course-title') ? item.querySelector('.course-title').textContent.toLowerCase() : '';
             let desc = item.querySelector('.course-short-desc') ? item.querySelector('.course-short-desc').textContent.toLowerCase() : '';
 
             if (title.includes(filter) || desc.includes(filter)) {
-                item.style.setProperty('display', '', 'important');  
+                item.style.setProperty('display', '', 'important');
-                hasResults = true;
+                matchCount++;
                 item.classList.add('animated');
             } else {
-                item.style.setProperty('display', 'none', 'important');  
+                item.style.setProperty('display', 'none', 'important');
             }
         });
 
         let noResultsMsg = document.getElementById('noResults');
-        if (hasResults) {
+        if (matchCount > 0) {
             noResultsMsg.classList.add('d-none');
         } else {
             noResultsMsg.classList.remove('d-none');
         }
+
+        courseSearchClear.classList.toggle('visible', filter.length > 0);
+        searchResultsHint.textContent = filter.length > 0
+            ? `Showing ${matchCount} of ${totalCourseCount} courses`
+            : '';
+    }
+
+    courseSearchInput.addEventListener('keyup', runCourseSearch);
+    courseSearchClear.addEventListener('click', function() {
+        courseSearchInput.value = '';
+        runCourseSearch();
+        courseSearchInput.focus();
     });
 
     // === 2. Pure Intersection Observer Scroll Animation ===
@@ -524,7 +683,7 @@ document.addEventListener('DOMContentLoaded', function () {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
                 entry.target.classList.add('animated');
-                observer.unobserve(entry.target); 
+                observer.unobserve(entry.target);
             }
         });
     }, {
@@ -532,6 +691,20 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     animatedElements.forEach(el => observer.observe(el));
+
+    // === 3. Animated Star Rating Fill ===
+    const starRatings = document.querySelectorAll('.star-rating');
+    if (starRatings.length) {
+        const starObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('filled');
+                    starObserver.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.4 });
+        starRatings.forEach(el => starObserver.observe(el));
+    }
 });
 </script>
 

resources/views/welcome.blade.php

@@ -482,6 +482,15 @@ body {
     font-weight: 500;
 }
 
+.status-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: rgba(46, 204, 113, 0.1);
+    padding: 4px 10px;
+    border-radius: 999px;
+}
+
 .star-rating {
     position: relative;
     display: inline-block;
@@ -512,9 +521,9 @@ body {
 .read-btn {
     background:#822424;
     color: white;
-    padding: 10px 20px;
+    padding: 12px 20px;
     font-weight: 700;
-    border-radius: 8px;
+    border-radius: 14px;
     font-size: 14px;
     transition: all 0.3s ease;
     text-decoration: none;
@@ -613,7 +622,7 @@ body {
 .cta-card {
     background: linear-gradient(135deg, var(--primary), #1a3f7a);
     border-radius: 28px;
-    padding: 64px 40px;
+    padding: 40px 40px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 25px 60px rgba(15, 44, 89, 0.25);
@@ -628,21 +637,90 @@ body {
     pointer-events: none;
 }
 
-.cta-card h2 {
+.cta-glow {
-    color: #fff;
+    position: absolute;
+    width: 340px;
+    height: 340px;
+    border-radius: 50%;
+    filter: blur(90px);
+    pointer-events: none;
+    opacity: 0.35;
+}
+
+.cta-glow-1 {
+    top: -120px;
+    left: -80px;
+    background: var(--accent-blue);
+}
+
+.cta-glow-2 {
+    bottom: -140px;
+    right: -60px;
+    background: var(--secondary);
+}
+
+.cta-card > *:not(.cta-glow) {
     position: relative;
     z-index: 1;
 }
 
+.cta-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: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 6px 16px;
+    border-radius: 999px;
+    margin-bottom: 14px;
+}
+
+.cta-card h2 {
+    color: #fff;
+    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    margin-bottom: 10px !important;
+}
+
 .cta-card p {
     color: rgba(255, 255, 255, 0.82);
-    position: relative;
+    margin-bottom: 22px !important;
-    z-index: 1;
 }
 
-.cta-card .btn {
+.cta-actions {
-    position: relative;
+    display: flex;
-    z-index: 1;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 14px;
+}
+
+.cta-trust {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 26px;
+    margin-top: 22px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.cta-trust-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.cta-trust-item i {
+    color: #FFE618;
 }
 
 /* ===== Modal Styling ===== */
@@ -831,7 +909,7 @@ body {
                                             {{ $course['rating'] }}
                                             <span class="rating-count">({{ $course['students'] }})</span>
                                         </span>
-                                        <span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
+                                        <span class="small fw-bold status-chip" style="color: #2ecc71;"><i class="fa-solid fa-circle-check"></i>Active</span>
                                     </div>
                                     <a href="/courses" class="read-btn">View Details <i class="fa-solid fa-arrow-right read-btn-arrow"></i></a>
                                 </div>
@@ -902,9 +980,27 @@ body {
 <section class="section py-5 animate-on-scroll zoom-in-init">
     <div class="container">
         <div class="cta-card text-center">
+            <div class="cta-glow cta-glow-1" aria-hidden="true"></div>
+            <div class="cta-glow cta-glow-2" aria-hidden="true"></div>
+
+            <span class="cta-eyebrow"><i class="fa-solid fa-graduation-cap"></i> Enrollment Open for 2026</span>
             <h2 class="display-6 mb-3">Join the Future of Automotive Engineering</h2>
             <p class="mb-4 max-width-600 mx-auto">Shape your technical career through modern innovation, practical mastery, and expert guidance.</p>
-            <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424; border: 2px solid #FFF;">Apply Now</a>
+
+            <div class="cta-actions">
+                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424; border: 2px solid #FFF;">
+                    <i class="fa-solid fa-user-plus me-2"></i>Apply Now
+                </a>
+                <a href="/courses" class="btn btn-outline-theme">
+                    <i class="fa-solid fa-book-open me-2"></i>Explore Courses
+                </a>
+            </div>
+
+            <div class="cta-trust">
+                <span class="cta-trust-item"><i class="fa-solid fa-circle-check"></i> Accredited Programs</span>
+                <span class="cta-trust-item"><i class="fa-solid fa-circle-check"></i> Flexible Learning</span>
+                <span class="cta-trust-item"><i class="fa-solid fa-circle-check"></i> Career Support</span>
+            </div>
         </div>
     </div>
 </section>