From ba9b90f6e8825472036eb54e6880c02b104c977e Mon Sep 17 00:00:00 2001
From: KaviSaparamadu <saparamadukvishka1@gmail.com>
Date: Fri, 7 Aug 2026 11:25:00 +0530
Subject: [PATCH] ui1

---
 resources/views/layouts/app.blade.php | 126 +++++++++++++++++++---
 resources/views/welcome.blade.php     | 148 +++++++++++++++++++-------
 2 files changed, 218 insertions(+), 56 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5820ef2..dc16c08 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -13,7 +13,7 @@
         body {
             font-family: 'Segoe UI', sans-serif;
             background: #F6F6F6;
-            padding-top: 56px; 
+            padding-top: 83px;
         }
 
         .navbar {
@@ -24,33 +24,98 @@
             top: 0;
             left: 0;
             width: 100%;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 24px rgba(0,0,0,0.16);
             height: 83px;
+            display: flex;
+            align-items: center;
+            transition: box-shadow 0.3s ease;
+        }
+
+        .navbar .container {
+            display: flex;
+            align-items: center;
         }
 
         .navbar-brand {
             color: white;
             font-weight: bold;
             font-size: 24px;
+            letter-spacing: -0.01em;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            transition: opacity 0.2s ease;
+        }
+
+        .navbar-brand i {
+            color: #FFEA85;
         }
 
         .navbar-brand:hover {
             color: #f4f4f8;
+            opacity: 0.9;
+        }
+
+        .navbar-toggler {
+            border: none;
+            box-shadow: none !important;
+        }
+
+        .navbar-nav {
+            align-items: center;
+            gap: 4px;
         }
 
         .nav-link {
-            color: rgba(255, 255, 255, 0.9) !important;
-            margin-left: 20px;
-            transition: 0.2s ease;
-            font-weight: bold;
-            font-size: 18px;
+            color: rgba(255, 255, 255, 0.85) !important;
+            margin-left: 6px;
+            padding: 8px 4px !important;
+            transition: color 0.2s ease;
+            font-weight: 600;
+            font-size: 16px;
+            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;
-           /* color: #FF4040FC !important; */
-            font-weight: bold;
+            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;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .navbar .btn-outline-light:hover,
+        .navbar .btn-theme-register:hover {
+            transform: translateY(-2px);
+        }
+
+        .navbar .btn-theme-register {
+            box-shadow: 0 8px 20px rgba(130, 36, 36, 0.35);
         }
 
         .site-footer {
@@ -58,12 +123,14 @@
             /* background: #182EA4; */
             color: #ffffff;
             padding: 60px 0 30px;
+            border-top: 3px solid #FFEA85;
         }
 
         .site-footer h4 {
             color: #FFEA85;
             font-weight: 700;
             margin-bottom: 18px;
+            letter-spacing: 0.02em;
         }
 
         .site-footer p {
@@ -94,6 +161,24 @@
             white-space: nowrap;
         }
 
+        .dropdown-menu {
+            border: none;
+            border-radius: 12px;
+            padding: 8px;
+            margin-top: 12px !important;
+        }
+
+        .dropdown-item {
+            border-radius: 8px;
+            padding: 8px 12px;
+            font-weight: 500;
+            transition: background-color 0.15s ease;
+        }
+
+        .dropdown-item:hover {
+            background-color: #F4F5FA;
+        }
+
         .footer-links li {
             margin-bottom: 10px;
         }
@@ -113,13 +198,20 @@
             margin-bottom: 14px;
             color: #f1f3f9;
             display: flex;
-            align-items: flex-start;
-            gap: 10px;
+            align-items: center;
+            gap: 12px;
         }
 
         .footer-contact i {
             color: #FFEA85;
-            margin-top: 3px;
+            background: rgba(255, 234, 133, 0.12);
+            width: 34px;
+            height: 34px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
         }
 
         .footer-contact a {
@@ -199,7 +291,7 @@
             <span class="navbar-toggler-icon"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="menu" style="padding-left:214px;">
+        <div class="collapse navbar-collapse" id="menu">
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
                 <li class="nav-item">
                     <a class="nav-link {{ request()->is('/') ? 'active-page' : '' }}" href="/">Home</a>
@@ -222,8 +314,8 @@
                         @php
                             $displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
                         @endphp
-                        <div class="dropdown" style="padding-left:325px;">
-                            <a class="user-dropdown-toggle text-white" 
+                        <div class="dropdown">
+                            <a class="user-dropdown-toggle text-white"
                                href="#" 
                                role="button" 
                                id="userMenu" 
@@ -249,7 +341,7 @@
                             </ul>
                         </div>
                     @else
-                        <div class="d-flex gap-2" style="padding-left:214px;">
+                        <div class="d-flex gap-2">
                             <a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
                             <!-- Swapped btn-warning for our new custom primary brand color button -->
                             <a href="/signup" class="btn btn-theme-register btn-sm px-3" style="background: #822424;border: 2px solid #FFF;">Register</a>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 357d91d..73baeb5 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -48,85 +48,123 @@ body {
 
 /* ===== Premium Theme Buttons ===== */
 .btn-theme {
-    background: #305CB1;
+    background: #822424;
     color: #fff;
-    padding: 14px 35px;
-    border-radius: 40px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    font-weight: bolder;
+    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);
 }
 
 .btn-theme:hover {
-    background: var(--secondary-hover);
-    border-color: var(--secondary-hover);
+    background: rgba(130, 36, 36, 0.92);
+    border-color: #fff;
     color: #fff;
-    transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
+    transform: translateY(-4px);
+    box-shadow: 0 26px 55px rgba(227, 100, 20, 0.28);
 }
 
 .btn-outline-theme {
-    background: transparent;
+    background: rgba(255, 255, 255, 0.12);
     color: #fff;
-    border: 2px solid #fff;
+    border: 2px solid rgba(255, 255, 255, 0.95);
     padding: 12px 32px;
-    border-radius: 40px;
+    border-radius: 999px;
     font-weight: 600;
-    transition: all 0.3s ease;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    backdrop-filter: blur(12px);
 }
 
 .btn-outline-theme:hover {
-    background: #fff;
+    background: rgba(255, 255, 255, 0.95);
     color: var(--primary);
-    transform: translateY(-3px);
+    transform: translateY(-4px);
 }
 
 .btn-outline-light-custom {
     background: #f2e862;
     color: #000000;
-    border: 2px solid rgba(255, 255, 255, 0.25);
+    border: 2px solid rgba(255, 255, 255, 0.28);
     padding: 12px 32px;
-    border-radius: 40px;
+    border-radius: 999px;
     font-weight: 600;
-    backdrop-filter: blur(5px);
-    transition: all 0.3s ease;
+    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);
 }
 
 .btn-outline-light-custom:hover {
     background: #f2e862;
     color: var(--primary);
     border-color: #fff;
-    transform: translateY(-3px);
+    transform: translateY(-4px);
 }
 
 .hero {
-    height:636px;
+    min-height: 92vh;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
     background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
     background-position: center;
     background-size: cover;
-}  
+    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.28);
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 28%),
+                radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.08), transparent 30%);
+    pointer-events: none;
+}
 
 .hero-content {
-    height: 100%;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 48px 24px;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
+    text-align: center;
     color: #fff;
-    padding-top: 38px;
 }
 
 .hero h1 {
-    font-size: 63px;
+    font-size: clamp(3.2rem, 5vw, 5.4rem);
     font-weight: 800;
-    margin-top: -87px;
-    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
+    margin: 0;
+    line-height: 1.02;
+    letter-spacing: -0.04em;
+    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
 }
 
 .hero p {
-    font-size: 22px;
-    max-width: 700px;
-    color: white;
+    font-size: clamp(1rem, 1.2vw, 1.4rem);
+    max-width: 760px;
+    margin: 24px auto 0;
+    color: rgba(255, 255, 255, 0.92);
+    letter-spacing: 0.01em;
+}
+
+.hero .d-flex {
+    margin-top: 36px;
+    z-index: 1;
+}
+
+.hero .btn {
+    min-width: 170px;
+}
+
+.hero .btn + .btn {
+    margin-left: 10px;
 }
 
 .courses-section {
@@ -345,11 +383,41 @@ body {
 }
 
 /* ===== Modal Styling ===== */
+#courseFinderModal .modal-content {
+    border-radius: 20px;
+    overflow: hidden;
+}
+
 .custom-modal-header {
-    background-color:  white;
-    color: #fff;
+    background-color: white;
+    color: var(--primary);
     border-bottom: 3px solid var(--secondary);
-    padding: 23px;
+    padding: 20px 23px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.modal-close-btn {
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(15, 44, 89, 0.08);
+    color: var(--primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.modal-close-btn:hover {
+    background: var(--secondary);
+    color: #fff;
+    transform: rotate(90deg);
 }
 </style>
 
@@ -361,13 +429,13 @@ body {
             <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
 
             <div class="d-flex flex-wrap justify-content-center gap-3">
-                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;border: 2px solid #FFF;">
+                <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>
-               <a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
+                <a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
                     <i class="fa-solid fa-phone me-2"></i>Contact Admissions
                 </a>
             </div>
@@ -534,11 +602,13 @@ body {
     <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
         <div class="modal-content border-0 shadow">
             
-            <div class="modal-header custom-modal-header  text-white">
+            <div class="modal-header custom-modal-header">
                 <h5 class="modal-title fw-bold fs-6 fs-md-5" id="courseFinderModalLabel">
                     <i class="fa-solid fa-compass me-2"></i>Find Your Course
                 </h5>
-                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
             </div>
 
             <div class="modal-body p-3 p-md-4">