From 5f2abd44b422e6884bfc241da7e81f06d6437f68 Mon Sep 17 00:00:00 2001
From: KaviSaparamadu <saparamadukvishka1@gmail.com>
Date: Fri, 7 Aug 2026 11:57:59 +0530
Subject: [PATCH] ui chngs

---
 resources/views/layouts/app.blade.php |  92 ++++++++----
 resources/views/welcome.blade.php     | 194 +++++++++++++++++++++++---
 2 files changed, 233 insertions(+), 53 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index dc16c08..c4a5b64 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,9 +25,12 @@
             left: 0;
             width: 100%;
             box-shadow: 0 4px 24px rgba(0,0,0,0.16);
+            border-bottom: 1px solid rgba(255,255,255,0.06);
             height: 83px;
             display: flex;
             align-items: center;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             transition: box-shadow 0.3s ease;
         }
 
@@ -39,16 +42,29 @@
         .navbar-brand {
             color: white;
             font-weight: bold;
-            font-size: 24px;
+            font-size: 22px;
             letter-spacing: -0.01em;
             display: inline-flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
             transition: opacity 0.2s ease;
         }
 
         .navbar-brand i {
             color: #FFEA85;
+            background: rgba(255, 234, 133, 0.12);
+            width: 42px;
+            height: 42px;
+            border-radius: 12px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: transform 0.25s ease;
+        }
+
+        .navbar-brand:hover i {
+            transform: rotate(-8deg) scale(1.05);
         }
 
         .navbar-brand:hover {
@@ -63,49 +79,32 @@
 
         .navbar-nav {
             align-items: center;
-            gap: 4px;
+            gap: 2px;
         }
 
         .nav-link {
             color: rgba(255, 255, 255, 0.85) !important;
-            margin-left: 6px;
-            padding: 8px 4px !important;
-            transition: color 0.2s ease;
+            margin-left: 2px;
+            padding: 9px 16px !important;
+            border-radius: 999px;
+            transition: color 0.2s ease, background-color 0.2s ease;
             font-weight: 600;
-            font-size: 16px;
+            font-size: 15.5px;
             position: relative;
         }
 
-        .nav-link::after {
-            content: '';
-            position: absolute;
-            left: 4px;
-            right: 4px;
-            bottom: 2px;
-            height: 2px;
-            border-radius: 2px;
-            background: #FFEA85;
-            transform: scaleX(0);
-            transform-origin: center;
-            transition: transform 0.25s ease;
-        }
-
         .nav-link:hover,
         .nav-link.active-page {
             color: #FFEA85 !important;
+            background: rgba(255, 255, 255, 0.07);
             font-weight: 600;
         }
 
-        .nav-link:hover::after,
-        .nav-link.active-page::after {
-            transform: scaleX(1);
-        }
-
         .navbar .btn-outline-light,
         .navbar .btn-theme-register {
             border-radius: 999px;
             font-weight: 600;
-            padding: 8px 20px !important;
+            padding: 8px 22px !important;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
 
@@ -122,20 +121,47 @@
             background:#1F2541;
             /* background: #182EA4; */
             color: #ffffff;
-            padding: 60px 0 30px;
+            padding: 64px 0 30px;
             border-top: 3px solid #FFEA85;
         }
 
         .site-footer h4 {
             color: #FFEA85;
             font-weight: 700;
-            margin-bottom: 18px;
+            margin-bottom: 20px;
             letter-spacing: 0.02em;
+            font-size: 16px;
+            text-transform: uppercase;
         }
 
         .site-footer p {
             color: #f1f3f9;
-            line-height: 1.6;
+            line-height: 1.7;
+        }
+
+        .footer-social {
+            display: flex;
+            gap: 10px;
+            margin-top: 22px;
+        }
+
+        .footer-social a {
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: rgba(255, 234, 133, 0.1);
+            color: #FFEA85;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            transition: transform 0.2s ease, background-color 0.2s ease;
+        }
+
+        .footer-social a:hover {
+            background: #FFEA85;
+            color: #1F2541;
+            transform: translateY(-3px);
         }
 
         .user-dropdown-toggle {
@@ -363,6 +389,12 @@
             <div class="col-md-4">
                 <h4>Automobile Academic</h4>
                 <p>Providing excellence in Automotive Engineering Education, Innovation and Research.</p>
+                <div class="footer-social">
+                    <a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
+                    <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+                    <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
+                    <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
+                </div>
             </div>
 
             <div class="col-md-4">
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 73baeb5..fe80750 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -53,8 +53,8 @@ body {
     padding: 14px 32px;
     border-radius: 999px;
     font-weight: 700;
-    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
-    box-shadow: 0 22px 40px rgba(15, 44, 89, 0.16);
+    box-shadow: none;
+    transition: transform 0.3s ease, background-color 0.3s ease;
 }
 
 .btn-theme:hover {
@@ -62,7 +62,7 @@ body {
     border-color: #fff;
     color: #fff;
     transform: translateY(-4px);
-    box-shadow: 0 26px 55px rgba(227, 100, 20, 0.28);
+    box-shadow: none;
 }
 
 .btn-outline-theme {
@@ -72,6 +72,7 @@ body {
     padding: 12px 32px;
     border-radius: 999px;
     font-weight: 600;
+    box-shadow: none;
     transition: transform 0.3s ease, background-color 0.3s ease;
     backdrop-filter: blur(12px);
 }
@@ -80,6 +81,7 @@ body {
     background: rgba(255, 255, 255, 0.95);
     color: var(--primary);
     transform: translateY(-4px);
+    box-shadow: none;
 }
 
 .btn-outline-light-custom {
@@ -90,8 +92,8 @@ body {
     border-radius: 999px;
     font-weight: 600;
     backdrop-filter: blur(12px);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
+    box-shadow: none;
+    transition: transform 0.3s ease, background-color 0.3s ease;
 }
 
 .btn-outline-light-custom:hover {
@@ -99,6 +101,7 @@ body {
     color: var(--primary);
     border-color: #fff;
     transform: translateY(-4px);
+    box-shadow: none;
 }
 
 .hero {
@@ -137,11 +140,33 @@ body {
     color: #fff;
 }
 
+.hero-badge {
+    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: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 8px 18px;
+    border-radius: 999px;
+    margin-bottom: 22px;
+}
+
+.hero-badge i {
+    color: #f2e862;
+}
+
 .hero h1 {
-    font-size: clamp(3.2rem, 5vw, 5.4rem);
+    font-size: clamp(3rem, 5vw, 5.2rem);
     font-weight: 800;
     margin: 0;
-    line-height: 1.02;
+    line-height: 1.05;
     letter-spacing: -0.04em;
     text-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
 }
@@ -167,12 +192,70 @@ body {
     margin-left: 10px;
 }
 
+.hero-stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 14px;
+    margin-top: 44px;
+    z-index: 1;
+    position: relative;
+}
+
+.hero-stat-pill {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-radius: 999px;
+    padding: 10px 20px;
+    color: #fff;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.hero-stat-pill:hover {
+    transform: translateY(-3px);
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.hero-stat-pill strong {
+    font-size: 17px;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.hero-stat-pill span {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.78);
+    display: block;
+    letter-spacing: 0.02em;
+}
+
+.section-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12.5px;
+    letter-spacing: 0.1em;
+    color: #822424;
+    background: rgba(130, 36, 36, 0.07);
+    padding: 7px 16px;
+    border-radius: 999px;
+    margin-bottom: 14px;
+}
+
 .courses-section {
     background-color: var(--bg-light);
 }
 
 .course-card {
     border: 1px solid var(--card-border);
+    border-radius: 18px;
     overflow: hidden;
     background: #fff;
     transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -181,7 +264,7 @@ body {
 
 .course-card:hover {
     transform: translateY(-6px);
-    box-shadow: 0 15px 35px rgba(15, 44, 89, 0.12);
+    box-shadow: 0 20px 40px rgba(15, 44, 89, 0.14);
     border-color: rgba(48, 133, 195, 0.25);
 }
 
@@ -340,28 +423,34 @@ body {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    padding: 30px;
-    transition: all 0.3s ease;
+    border-radius: 20px;
+    padding: 36px 30px;
+    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .custom-feature-card:hover {
-    transform: translateY(-5px);
+    transform: translateY(-8px);
     background: rgba(0, 0, 0, 0.07);
     border-color: rgb(255, 255, 255);
+    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
 }
 
 .icon-box {
     background: #6a2525;
     color: #FFE618;
-    width: 60px;
-    height: 60px;
-    border-radius: 12px;
+    width: 64px;
+    height: 64px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 20px;
-    transition: all 0.3s ease;
+    margin-bottom: 22px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+    transition: all 0.35s ease;
+}
+
+.custom-feature-card:hover .icon-box {
+    transform: scale(1.08) rotate(-4deg);
 }
 
 .custom-feature-card:hover .icon-box {
@@ -382,6 +471,42 @@ body {
     transform: translateY(0) scale(1);
 }
 
+/* ===== CTA Callout ===== */
+.cta-card {
+    background: linear-gradient(135deg, var(--primary), #1a3f7a);
+    border-radius: 28px;
+    padding: 64px 40px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 25px 60px rgba(15, 44, 89, 0.25);
+}
+
+.cta-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 40%),
+                radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08), transparent 45%);
+    pointer-events: none;
+}
+
+.cta-card h2 {
+    color: #fff;
+    position: relative;
+    z-index: 1;
+}
+
+.cta-card p {
+    color: rgba(255, 255, 255, 0.82);
+    position: relative;
+    z-index: 1;
+}
+
+.cta-card .btn {
+    position: relative;
+    z-index: 1;
+}
+
 /* ===== Modal Styling ===== */
 #courseFinderModal .modal-content {
     border-radius: 20px;
@@ -425,6 +550,7 @@ body {
 <section class="hero" role="banner" aria-label="Automobile Engineering Academy Introduction">
     <div class="container h-100">
         <div class="hero-content text-center animate-on-scroll animated fade-up-init">
+            <span class="hero-badge"><i class="fa-solid fa-award"></i> Accredited Automotive Engineering Institute</span>
             <h1 class="display-4">Automobile Engineering Academy</h1>
             <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
 
@@ -439,6 +565,25 @@ body {
                     <i class="fa-solid fa-phone me-2"></i>Contact Admissions
                 </a>
             </div>
+
+            <div class="hero-stats">
+                <div class="hero-stat-pill">
+                    <i class="fa-solid fa-user-graduate"></i>
+                    <div><strong>2.5k+</strong><span>Graduates</span></div>
+                </div>
+                <div class="hero-stat-pill">
+                    <i class="fa-solid fa-chalkboard-user"></i>
+                    <div><strong>12+</strong><span>Expert Lecturers</span></div>
+                </div>
+                <div class="hero-stat-pill">
+                    <i class="fa-solid fa-briefcase"></i>
+                    <div><strong>95%</strong><span>Placement Rate</span></div>
+                </div>
+                <div class="hero-stat-pill">
+                    <i class="fa-solid fa-award"></i>
+                    <div><strong>15+</strong><span>Yrs Excellence</span></div>
+                </div>
+            </div>
         </div>
     </div>
 </section>
@@ -447,8 +592,8 @@ body {
 <section class="section courses-section" aria-labelledby="courses-heading">
     <div class="container">
         <div class="text-center mb-5 animate-on-scroll fade-up-init">
-            <span class="text-uppercase fw-bold small d-block mb-2" style="color: #822424; letter-spacing: 0.1em;">Academic Programs</span>
-            <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal; color:#2D355B;">Our Top Courses</h2>
+            <span class="section-eyebrow"><i class="fa-solid fa-graduation-cap"></i> Academic Programs</span>
+            <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: 700; color:#2D355B;">Our Top Courses</h2>
             <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
         </div>
 
@@ -550,6 +695,7 @@ body {
 
     <div class="container why-content-wrapper position-relative" style="z-index: 2;">
         <div class="text-center mb-5 animate-on-scroll fade-up-init">
+            <span class="section-eyebrow" style="background: rgba(255,255,255,0.12); color: #FFE618;"><i class="fa-solid fa-star"></i> Our Advantage</span>
             <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
         </div>
 
@@ -588,11 +734,13 @@ body {
 </section>
 
 {{-- ===================== CALL TO ACTION ===================== --}}
-<section class="section py-5 text-center animate-on-scroll zoom-in-init">
+<section class="section py-5 animate-on-scroll zoom-in-init">
     <div class="container">
-        <h2 class="display-6 mb-3">Join the Future of Automotive Engineering</h2>
-        <p class="text-muted 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;">Apply Now</a>
+        <div class="cta-card text-center">
+            <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>
     </div>
 </section>