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 @@
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 {
+
Accredited Automotive Engineering Institute
Automobile Engineering Academy
Driving Innovation Through Education, Research & Technology
@@ -439,6 +565,25 @@ body {
Contact Admissions
+
+
+
+
+
+
12+Expert Lecturers
+
+
+
+
@@ -447,8 +592,8 @@ body {