From f4e4c45f5f5b63fc03cd45ddeb737b65ebe1bffa Mon Sep 17 00:00:00 2001 From: KaviSaparamadu Date: Mon, 10 Aug 2026 09:42:36 +0530 Subject: [PATCH] ui3 --- resources/views/courses.blade.php | 213 +++++++++++++++---------- resources/views/welcome.blade.php | 254 +++++++++++++++++------------- 2 files changed, 276 insertions(+), 191 deletions(-) diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php index 312f010..498751f 100644 --- a/resources/views/courses.blade.php +++ b/resources/views/courses.blade.php @@ -154,74 +154,100 @@ h1, h2, h3, h4, h5, h6, /* ===== HORIZONTAL COURSE CARDS ===== */ .course-card { + position: relative; overflow: hidden; - background: #fff; - 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; + background: #ffffff; + border: 1px solid rgba(226, 232, 240, 0.9); + border-radius: 26px; + box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.course-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%); + opacity: 0.35; + transition: opacity 0.4s ease, height 0.4s ease; + z-index: 4; +} + +.course-card:hover::before { + opacity: 1; + height: 5px; } .course-card:hover { - transform: translateY(-7px); - box-shadow: 0 22px 48px rgba(62, 81, 184, 0.14); - border-color: rgba(62, 81, 184, 0.25); + transform: translateY(-8px); + box-shadow: 0 25px 50px -10px rgba(62, 81, 184, 0.18); + border-color: rgba(62, 81, 184, 0.3); } .course-image-wrapper { - padding: 20px; + padding: 16px; height: 100%; + position: relative; overflow: hidden; } .course-card img { - height: 220px; + height: 240px; width: 100%; object-fit: cover; - border-radius: 16px; + border-radius: 20px; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .course-card:hover img { - transform: scale(1.05); + transform: scale(1.08); } .course-card .card-body { - padding: 32px 32px 32px 10px; + padding: 28px 32px 28px 12px; display: flex; flex-direction: column; } @media (max-width: 767px) { .course-card .card-body { - padding: 0 24px 24px 24px; + padding: 16px 24px 24px 24px; + } + .course-image-wrapper { + padding: 16px 16px 0 16px; } } .course-title { - font-size: 23px; + font-size: 22px; font-weight: 750; - line-height: 1.3; - color:#2B2B2B; - margin-bottom: 8px; + line-height: 1.35; + color: #0F172A; + margin-bottom: 6px; transition: color 0.3s ease; } .course-card:hover .course-title { - color: var(--secondary); + color: #3E51B8; } .course-author { - font-size: 14px; + font-size: 13.5px; font-weight: 600; - color: #910909; - margin-bottom: 14px; + color: #3085C3; + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 6px; } .course-short-desc { font-size: 14.5px; - color: #556575; - margin-bottom: 20px; + color: #64748B; + margin-bottom: 18px; line-height: 1.6; } @@ -234,30 +260,34 @@ h1, h2, h3, h4, h5, h6, } .badge-bestseller { + position: absolute; + top: 28px; + left: 28px; + z-index: 3; display: inline-flex; align-items: center; - gap: 5px; - background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%); + gap: 6px; + background: linear-gradient(135deg, #BC1A1A 0%, #E11D48 100%); color: #fff; - font-weight: 700; - font-size: 10.5px; - padding: 4px 12px; - border-radius: 30px; + font-weight: 800; + font-size: 11px; + padding: 6px 14px; + border-radius: 999px; text-transform: uppercase; - letter-spacing: 0.05em; - box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4); + letter-spacing: 0.06em; + box-shadow: 0 4px 14px 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); } + 0% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0.45); } + 70% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 8px rgba(188, 26, 26, 0); } + 100% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0); } } .rating-star { - color: #f39c12; - font-weight: 700; + color: #f59e0b; + font-weight: 750; font-size: 14px; display: flex; align-items: center; @@ -283,7 +313,7 @@ h1, h2, h3, h4, h5, h6, overflow: hidden; white-space: nowrap; width: 0; - color: #f39c12; + color: #f59e0b; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); } @@ -292,7 +322,7 @@ h1, h2, h3, h4, h5, h6, } .rating-count { - color: var(--text-muted); + color: #64748B; font-size: 13.5px; font-weight: 500; } @@ -301,49 +331,58 @@ h1, h2, h3, h4, h5, h6, display: flex; flex-wrap: wrap; gap: 10px; - font-size: 12.5px; - color: var(--success-green); - margin-bottom: 24px; + font-size: 13px; + margin-bottom: 22px; 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; + background: rgba(62, 81, 184, 0.08); + color: #3E51B8; + padding: 6px 14px; + border-radius: 10px; + border: 1px solid rgba(62, 81, 184, 0.15); + transition: all 0.3s ease; } .course-card:hover .course-features span { - background: rgba(16, 185, 129, 0.14); + background: rgba(62, 81, 184, 0.15); transform: translateY(-2px); } .course-features span i { margin-right: 6px; + color: #3085C3; } .course-footer { margin-top: auto; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 14px; + padding-top: 18px; + border-top: 1px dashed #E2E8F0; } .read-btn { - background: #822424; + background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%); color: #fff; - padding: 13px 28px; - font-weight: 600; - font-size: 15px; - border-radius: 14px; + padding: 12px 28px; + font-weight: 700; + font-size: 14.5px; + border-radius: 999px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); - border: 2px solid transparent; + border: none; text-decoration: none; - display: flex; + display: inline-flex; align-items: center; justify-content: center; gap: 8px; - box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2); + box-shadow: 0 6px 18px rgba(62, 81, 184, 0.25); } .read-btn .read-btn-arrow { @@ -351,14 +390,14 @@ h1, h2, h3, h4, h5, h6, } .read-btn:hover { - background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%); + background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%); color: #fff; transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3); + box-shadow: 0 10px 24px rgba(188, 26, 26, 0.35); } .read-btn:hover .read-btn-arrow { - transform: translateX(4px); + transform: translateX(5px); } /* --- Features Section --- */ @@ -609,8 +648,11 @@ h1, h2, h3, h4, h5, h6,
{{-- Course Image --}} -
+
+ @if($course->badge) + {{ $course->badge }} + @endif {{ $course->title }}
@@ -618,45 +660,46 @@ h1, h2, h3, h4, h5, h6, {{-- Course Details --}}
-

{{ $course->title }}

+
+

{{ $course->title }}

+ @if($course->status) + {{ ucfirst($course->status) }} + @endif +
@if($course->author)
- {{ $course->author }} + {{ $course->author }}
@endif

{{ $course->desc }}

-
- @if($course->badge) - {{ $course->badge }} - @endif - - @if($course->rating) - - - ★★★★★ - ★★★★★ - - {{ $course->rating }} - - @endif - - @if($course->student) - ({{ $course->student }} students enrolled) - @endif -
-
- Level: {{ $course->level ?? 'General' }} + Level: {{ $course->level ?? 'General' }} @if($course->duration) - Duration: {{ $course->duration }} + Duration: {{ $course->duration }} @endif
-
- Apply Course +
+
+ @if($course->rating) + + + ★★★★★ + ★★★★★ + + {{ $course->rating }} + + @endif + + @if($course->student) + ({{ $course->student }} students enrolled) + @endif +
+ + Apply Course
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 37e6eb0..d542c49 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -317,39 +317,51 @@ body { .course-card { position: relative; - border: 1px solid var(--card-border); - border-radius: 18px; + border: 1px solid rgba(226, 232, 240, 0.9); + border-radius: 26px; overflow: hidden; - background: #fff; - transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; - box-shadow: 0 5px 15px var(--shadow-color); + background: #ffffff; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06); } -.course-card::after { +.course-card::before { content: ''; position: absolute; - inset: 0; - z-index: 3; - pointer-events: none; - background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); - transform: translateX(-120%); - transition: transform 0.9s ease; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%); + opacity: 0.35; + transition: opacity 0.4s ease, height 0.4s ease; + z-index: 4; } -.course-card:hover::after { - transform: translateX(120%); +.course-card:hover::before { + opacity: 1; + height: 5px; } .course-card:hover { - transform: translateY(-8px); - box-shadow: 0 24px 45px rgba(15, 44, 89, 0.16); - border-color: rgba(48, 133, 195, 0.25); + transform: translateY(-10px); + box-shadow: 0 25px 50px -10px rgba(62, 81, 184, 0.18); + border-color: rgba(62, 81, 184, 0.3); } .course-image-wrapper { position: relative; overflow: hidden; - height: 210px; + height: 220px; +} + +.course-image-wrapper::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 60%); + pointer-events: none; + z-index: 1; } .course-card img { @@ -360,7 +372,7 @@ body { } .course-card:hover img { - transform: scale(1.12); + transform: scale(1.09); } .courses-section .row.g-4 > div { @@ -369,32 +381,32 @@ body { .badge-floating { position: absolute; - top: 15px; - left: 15px; + top: 16px; + left: 16px; display: inline-flex; align-items: center; - gap: 5px; - background: #BC1A1A; + gap: 6px; + background: linear-gradient(135deg, #BC1A1A 0%, #E11D48 100%); color: #fff; - font-weight: 700; + font-weight: 800; font-size: 11px; - padding: 5px 12px; - border-radius: 30px; + padding: 6px 14px; + border-radius: 999px; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.06em; z-index: 2; - box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0.45); + box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4); animation: badgePulse 2.4s ease-out infinite; } @keyframes badgePulse { - 0% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0.45); } - 70% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 8px rgba(188, 26, 26, 0); } - 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0); } + 0% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0.45); } + 70% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 8px rgba(188, 26, 26, 0); } + 100% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0); } } .course-card .card-body { - padding: 24px; + padding: 26px 24px 22px; display: flex; flex-direction: column; flex-grow: 1; @@ -402,21 +414,21 @@ body { .course-title { font-size: 20px; - font-weight: 700; - color: var(--primary); + font-weight: 750; + color: #0F172A; margin-bottom: 8px; - line-height: 1.4; + line-height: 1.35; transition: color 0.3s ease; } .course-card:hover .course-title { - color: #914040; + color: #3E51B8; } .course-author { font-size: 13.5px; - font-weight: 500; - color: var(--accent-blue); + font-weight: 600; + color: #3085C3; margin-bottom: 12px; display: flex; align-items: center; @@ -425,25 +437,29 @@ body { .course-short-desc { font-size: 14px; - color: #556575; + color: #64748B; line-height: 1.6; - margin-bottom: 15px; + margin-bottom: 16px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .course-features-container { display: flex; flex-wrap: wrap; gap: 8px; - margin-bottom: 15px; + margin-bottom: 18px; } .feature-pill { - background: rgba(48, 133, 195, 0.08); - color: var(--accent-blue); + background: rgba(62, 81, 184, 0.08); + color: #3E51B8; font-size: 12px; font-weight: 600; - padding: 4px 10px; - border-radius: 6px; + padding: 5px 12px; + border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; @@ -451,26 +467,26 @@ body { } .course-card:hover .feature-pill { - background: rgba(48, 133, 195, 0.15); + background: rgba(62, 81, 184, 0.15); transform: translateY(-2px); } .course-footer { margin-top: auto; - padding-top: 15px; - border-top: 1px solid rgba(15, 44, 89, 0.08); + padding-top: 16px; + border-top: 1px dashed #E2E8F0; } .course-meta-row { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 15px; + margin-bottom: 16px; } .rating-star { - color: #f39c12; - font-weight: 700; + color: #f59e0b; + font-weight: 750; font-size: 14px; display: inline-flex; align-items: center; @@ -478,17 +494,21 @@ body { } .rating-count { - color: var(--text-muted); + color: #64748B; font-weight: 500; + font-size: 13px; } .status-chip { display: inline-flex; align-items: center; gap: 5px; - background: rgba(46, 204, 113, 0.1); - padding: 4px 10px; + background: rgba(16, 185, 129, 0.1); + color: #10B981; + padding: 4px 12px; border-radius: 999px; + font-size: 12px; + font-weight: 700; } .star-rating { @@ -510,7 +530,7 @@ body { overflow: hidden; white-space: nowrap; width: 0; - color: #f39c12; + color: #f59e0b; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); } @@ -519,11 +539,11 @@ body { } .read-btn { - background:#822424; - color: white; - padding: 12px 20px; + background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%); + color: #ffffff; + padding: 12px 24px; font-weight: 700; - border-radius: 14px; + border-radius: 999px; font-size: 14px; transition: all 0.3s ease; text-decoration: none; @@ -531,6 +551,7 @@ body { align-items: center; justify-content: center; gap: 8px; + box-shadow: 0 6px 18px rgba(62, 81, 184, 0.25); } .read-btn .read-btn-arrow { @@ -538,13 +559,13 @@ body { } .course-card:hover .read-btn { - background: #6a1c1c; - color: #fff; - box-shadow: 0 8px 18px rgba(130, 36, 36, 0.3); + background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%); + color: #ffffff; + box-shadow: 0 10px 24px rgba(188, 26, 26, 0.35); } .course-card:hover .read-btn .read-btn-arrow { - transform: translateX(4px); + transform: translateX(5px); } /* ===== Why Choose Us ===== */ @@ -554,7 +575,7 @@ body { left: 0; width: 100%; height: 100%; - background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.6)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80'); + background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 50%, rgba(15, 23, 42, 0.95) 100%), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80'); background-position: center; background-size: cover; z-index: 1; @@ -566,43 +587,64 @@ body { } .custom-feature-card { - background: rgba(255, 255, 255, 0.43); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 20px; - padding: 36px 30px; - transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 26px; + padding: 44px 30px 38px; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); + overflow: hidden; + height: 100%; +} + +.custom-feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%); + opacity: 0.35; + transition: opacity 0.4s ease, height 0.4s ease; +} + +.custom-feature-card:hover::before { + opacity: 1; + height: 5px; } .custom-feature-card:hover { - 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); + transform: translateY(-12px); + background: rgba(255, 255, 255, 0.14); + border-color: rgba(255, 255, 255, 0.35); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(62, 81, 184, 0.3); } .icon-box { - background: #6a2525; - color: #FFE618; - width: 64px; - height: 64px; - border-radius: 16px; + width: 68px; + height: 68px; + background: linear-gradient(135deg, rgba(62, 81, 184, 0.35) 0%, rgba(10, 103, 223, 0.2) 100%); + color: #60A5FA; + border-radius: 22px; + border: 1px solid rgba(96, 165, 250, 0.35); display: flex; align-items: center; justify-content: center; - margin-bottom: 22px; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); - transition: all 0.35s ease; + margin-bottom: 26px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .custom-feature-card:hover .icon-box { - transform: scale(1.08) rotate(-4deg); -} - -.custom-feature-card:hover .icon-box { - background: #6a2525; - color: #faf9f5; + background: linear-gradient(135deg, #3E51B8 0%, #BC1A1A 100%); + color: #ffffff; + border-color: transparent; + transform: scale(1.12) rotate(6deg); + box-shadow: 0 15px 30px rgba(188, 26, 26, 0.4), 0 0 20px rgba(62, 81, 184, 0.6); } /* ===== Animations ===== */ @@ -1002,38 +1044,38 @@ body {
- Our Advantage -

Why Choose Us?

+ Our Advantage +

Why Choose Us?

-
-
- +
+
+
-

Modern Laboratories

-

State-of-the-art facilities equipped with latest industrial testing tools.

+

Modern Laboratories

+

State-of-the-art facilities equipped with latest industrial testing tools & high-voltage rigs.

-
-
- +
+
+
-

Qualified Lecturers

-

Learn directly from veteran automotive engineers and researchers.

+

Qualified Lecturers

+

Learn directly from veteran automotive engineers, researchers, and TVEC certified instructors.

-
-
- +
+
+
-

Hands-on Training

-

Gain real-world diagnostics experience inside our dedicated workshop floors.

+

Hands-on Training

+

Gain real-world diagnostics experience inside our dedicated workshop floors & EV testing bays.