imadhi
/
academy
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change themes

This commit is contained in:
imadhigp 2026-07-18 17:01:09 +05:30
parent 37cd68f170
commit 4289f1d576
6 changed files with 400 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
resources/views/abouts.blade.php
View File

@ -6,15 +6,29 @@
<style> <style>
:root{ :root{
--primary:#5E244E; /* Premium Modern Automotive Palette */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
} }
.hero-about{ .hero-about{
min-height:60vh; min-height:60vh;
background: background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)),
url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg'); url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
@ -34,21 +48,21 @@
background:#fff; background:#fff;
border-radius:20px; border-radius:20px;
padding:35px 25px; padding:35px 25px;
box-shadow:0 10px 30px rgba(0,0,0,.05); box-shadow: 0 10px 30px rgba(0,0,0,.04);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
} }
.about-box:hover { .about-box:hover {
transform: translateY(-10px) scale(1.02); transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1); box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
border-color: var(--primary); border-color: var(--primary-light);
} }
.icon-circle { .icon-circle {
width:75px; width:75px;
height:75px; height:75px;
background:var(--primary); background: var(--primary);
color:#fff; color:#fff;
border-radius:50%; border-radius:50%;
display:flex; display:flex;
@ -60,8 +74,9 @@
} }
.about-box:hover .icon-circle { .about-box:hover .icon-circle {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */ transform: rotateY(180deg);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
} }
/* ======================================================== /* ========================================================
@ -73,41 +88,36 @@
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
.fade-up-init { .fade-up-init {
transform: translateY(40px); transform: translateY(40px);
} }
/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
.slide-left-init { .slide-left-init {
transform: translateX(-50px); transform: translateX(-50px);
} }
/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
.slide-right-init { .slide-right-init {
transform: translateX(50px); transform: translateX(50px);
} }
/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
.zoom-in-init { .zoom-in-init {
transform: scale(0.85); transform: scale(0.85);
} }
/* Active Class (Scroll කරද්දී apply වේ) */
.animate-item.animated { .animate-item.animated {
opacity: 1; opacity: 1;
transform: translate(0) scale(1); transform: translate(0) scale(1);
} }
/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */ /* Automotive Theme Glow Pulse Button */
@keyframes pulse-btn { @keyframes pulse-btn {
0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); } 0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); } 70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
} }
.cta-btn { .cta-btn {
background: var(--primary); background: var(--primary-light);
color: #fff !important; color: #fff !important;
padding: 14px 35px; padding: 14px 35px;
border-radius: 50px; border-radius: 50px;
@ -118,8 +128,21 @@
} }
.cta-btn:hover { .cta-btn:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
}
.btn-view-courses {
background: var(--primary);
color: #fff;
transition: all 0.3s ease;
}
.btn-view-courses:hover {
background: var(--secondary);
color: #fff;
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
} }
</style> </style>
@ -140,14 +163,12 @@
<section class="py-5 overflow-hidden"> <section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="row align-items-center g-5"> <div class="row align-items-center g-5">
<!-- වමේ සිට දකුණට පැමිණේ -->
<div class="col-md-6 animate-item slide-left-init"> <div class="col-md-6 animate-item slide-left-init">
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg" <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
class="img-fluid rounded shadow-lg" class="img-fluid rounded shadow-lg"
alt="About Image"> alt="About Image">
</div> </div>
<!-- දකුණේ සිට වමට පැමිණේ -->
<div class="col-md-6 animate-item slide-right-init"> <div class="col-md-6 animate-item slide-right-init">
<h2 class="fw-bold mb-3">Who We Are</h2> <h2 class="fw-bold mb-3">Who We Are</h2>
<p class="text-muted fs-5"> <p class="text-muted fs-5">
@ -159,7 +180,7 @@
We focus on building skilled professionals who are ready for We focus on building skilled professionals who are ready for
the global automotive industry. the global automotive industry.
</p> </p>
<a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill"> <a href="{{ route('courses') }}" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
View Courses View Courses
</a> </a>
</div> </div>
@ -177,7 +198,6 @@
</div> </div>
<div class="row g-4"> <div class="row g-4">
<!-- කාඩ් එකින් එක Zoom-in වේ -->
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;"> <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
<div class="about-box text-center"> <div class="about-box text-center">
<div class="icon-circle"> <div class="icon-circle">
@ -245,7 +265,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}); });
}, { }, {
threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී threshold: 0.15
}); });
animatedElements.forEach(el => observer.observe(el)); animatedElements.forEach(el => observer.observe(el));

100
resources/views/contacts.blade.php
View File

@ -6,19 +6,29 @@
<style> <style>
:root{ :root{
--primary:#5E244E; /* Premium Modern Automotive Palette */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
} }
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)),
url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg'); url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
@ -33,37 +43,39 @@ body {
background:#fff; background:#fff;
border-radius:20px; border-radius:20px;
padding:35px; padding:35px;
box-shadow: 0 10px 30px rgba(0,0,0,.05); box-shadow: 0 10px 30px rgba(0,0,0,.04);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
} }
.form-control{ .form-control{
border-radius:10px; border-radius:10px;
padding:12px; padding:12px;
border: 1px solid #ced4da; border: 1px solid #cbd5e1;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.form-control:focus { .form-control:focus {
border-color: var(--primary); border-color: var(--primary-light);
box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25); box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
outline: 0;
} }
.btn-contact{ .btn-contact{
background:var(--primary); background: var(--primary);
color:#fff; color:#fff;
border-radius:10px; border-radius:10px;
padding:12px 30px; padding:12px 30px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
border: none; border: none;
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
} }
.btn-contact:hover{ .btn-contact:hover{
background:var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color:#fff; color:#fff;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
} }
.info-card{ .info-card{
@ -72,19 +84,23 @@ body {
padding:20px; padding:20px;
text-align:center; text-align:center;
box-shadow: 0 5px 20px rgba(0,0,0,.04); box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
transition:.3s; transition:.3s;
} }
.info-card:hover{ .info-card:hover{
transform:translateY(-5px); transform:translateY(-5px);
border-color: var(--primary); border-color: var(--primary-light);
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08); box-shadow: 0 10px 25px rgba(62, 81, 184, 0.1);
} }
.info-card i { .info-card i {
color: var(--primary) !important; color: var(--primary) !important;
transition: color 0.3s ease;
}
.info-card:hover i {
color: var(--secondary) !important;
} }
/* ======================================================== /* ========================================================
@ -96,17 +112,14 @@ body {
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
.fade-up-init { .fade-up-init {
transform: translateY(30px); transform: translateY(30px);
} }
.slide-left-init { .slide-left-init {
transform: translateX(-40px); transform: translateX(-40px);
} }
.fade-in-init { .fade-in-init {
transform: scale(0.98); transform: scale(0.98);
} }
@ -123,7 +136,7 @@ body {
<div class="container"> <div class="container">
<div class="animate-item animated fade-up-init"> <div class="animate-item animated fade-up-init">
<h1 class="fw-bold display-4">Contact Us</h1> <h1 class="fw-bold display-4">Contact Us</h1>
<p class="fs-5">We are here to help you. Reach us anytime.</p> <p class="fs-5 text-white-50">We are here to help you. Reach us anytime.</p>
</div> </div>
</div> </div>
</section> </section>
@ -138,37 +151,34 @@ body {
<div class="col-md-6 animate-item slide-left-init"> <div class="col-md-6 animate-item slide-left-init">
<div class="contact-box"> <div class="contact-box">
<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3> <h3 class="mb-4 fw-bold" style="color: var(--text-main);">Send Message</h3>
@if(session('success')) @if(session('success'))
<div class="alert alert-success"> <div class="alert alert-success">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
<form action="{{ route('contact.store') }}" method="POST"> <form action="{{ route('contact.store') }}" method="POST">
@csrf @csrf
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Name</label> <label class="form-label fw-semibold text-secondary-emphasis">Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name" required> <input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Email</label> <label class="form-label fw-semibold text-secondary-emphasis">Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email" required> <input type="email" name="email" class="form-control" placeholder="Your Email" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Subject</label> <label class="form-label fw-semibold text-secondary-emphasis">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" required> <input type="text" name="subject" class="form-control" placeholder="Subject" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Message</label> <label class="form-label fw-semibold text-secondary-emphasis">Message</label>
<textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea> <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
</div> </div>
@ -181,7 +191,7 @@ Send Message
</div> </div>
</div> </div>
<!-- Info Cards -->
<div class="col-md-6 animate-item fade-in-init"> <div class="col-md-6 animate-item fade-in-init">
<div class="info-card mb-3"> <div class="info-card mb-3">
@ -216,38 +226,18 @@ Send Message
</section> </section>
<!-- MAP --> <!-- MAP -->
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container animate-item fade-up-init">
<!-- <iframe
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=place_id:ChIJXdB3Sy_84joRYNze2w86UjQ"
width="100%"
height="300"
style="border:0;border-radius:15px;"
allowfullscreen=""
loading="lazy">
</iframe> -->
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
width="100%" width="100%"
height="300"
style="border:0;border-radius:15px;"
allowfullscreen=""
loading="lazy">
</iframe>
<!-- <section class="pb-5">
<div class="container animate-item fade-up-init">
<iframe
src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
width="100%"
height="350" height="350"
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);" style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.04); border: 1px solid var(--card-border);"
allowfullscreen="" allowfullscreen=""
loading="lazy"> loading="lazy">
</iframe> </iframe>
</div> </div>
</section> --> </section>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
@ -267,5 +257,7 @@ document.addEventListener('DOMContentLoaded', function () {
animatedElements.forEach(el => observer.observe(el)); animatedElements.forEach(el => observer.observe(el));
}); });
</script> </script>
|
@endsection @endsection

266
resources/views/courses.blade.php
View File

@ -1,60 +1,77 @@
@extends('layouts.app') @extends('layouts.app')
@section('title','Our Courses') @section('title', 'Our Courses')
@section('content') @section('content')
<style> <style>
:root{ :root {
--primary:#5E244E; /* Premium Modern Automotive Palette (Updated based on your custom inputs) */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue / Main Brand Color */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--card-border: #efeff4; --secondary: #BC1A1A; /* Deep Racing Red */
--text-muted: #6a6f73; --secondary-hover: #822424; /* Dark Burnt Red */
--success-green: #1f8a4c; --accent-dark: #753939; /* Muted Crimson */
--accent-light: rgba(227, 100, 20, 0.1); /* Soft Amber/Orange tint for badges */
--accent-orange: #e36414; /* Warning/Industrial Orange */
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
--shadow-color: rgba(15, 44, 89, 0.05);
--success-green: #10B981; /* Modern emerald green */
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
background-color: #ffffff;
} }
/* ===== Hero Section ===== */
.hero { .hero {
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), background-image: linear-gradient(rgba(10, 103, 223, 0.9), rgba(117, 57, 57, 0.85)),
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80'); url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #ffffff; color: #ffffff;
padding: 120px 0; padding: 130px 0;
text-align: center; text-align: center;
} }
.hero h1{ .hero h1 {
font-size:50px; font-size: 55px;
font-weight:700; font-weight: 800;
text-shadow: 0 2px 15px rgba(0,0,0,0.4);
} }
.hero p{ .hero p {
max-width:700px; max-width: 700px;
margin:auto; margin: auto;
font-size:18px; font-size: 19px;
color: #F1F5F9;
} }
/* --- Search Box Styling --- */ /* --- Premium Search Box Styling --- */
.search-box { .search-box {
max-width: 500px; max-width: 550px;
margin: 30px auto 0 auto; margin: 35px auto 0 auto;
position: relative; position: relative;
display: flex; display: flex;
box-shadow: 0 8px 25px rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
border-radius: 100px; border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.search-box input { .search-box input {
width: 100%; width: 100%;
padding: 15px 25px; padding: 16px 28px;
border: none; border: none;
outline: none; outline: none;
font-size: 16px; font-size: 16px;
@ -62,92 +79,111 @@ body {
} }
.search-box button { .search-box button {
background: var(--primary); background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
color: #fff; color: #fff;
border: none; border: none;
padding: 0 25px; padding: 0 30px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: all 0.3s ease;
font-size: 18px; font-size: 18px;
} }
.search-box button:hover { .search-box button:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
} }
/* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */
.course-card { .course-card {
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
border-radius: 20px;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: none; box-shadow: 0 8px 30px var(--shadow-color);
scale: .99;
} }
.course-card:hover { .course-card:hover {
transform: translateY(-5px); transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15);
border-color: var(--primary-light);
} }
.course-image-wrapper { .course-image-wrapper {
padding: 16px; padding: 20px;
height: 100%;
} }
.course-card img { .course-card img {
height: 200px; height: 220px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
/* border-radius: 14px; */ transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.course-card:hover img {
transform: scale(1.04);
} }
.course-card .card-body { .course-card .card-body {
padding: 24px; padding: 32px 32px 32px 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media (max-width: 767px) {
.course-card .card-body {
padding: 0 24px 24px 24px;
}
}
.course-title { .course-title {
font-size: 21px; font-size: 23px;
font-weight: 700; font-weight: 750;
line-height: 1.3; line-height: 1.3;
color: #1c1d1f; color: var(--primary);
margin-bottom: 8px; margin-bottom: 8px;
transition: color 0.3s ease;
}
.course-card:hover .course-title {
color: var(--secondary);
} }
.course-author { .course-author {
font-size: 14px; font-size: 14px;
color: var(--text-muted); font-weight: 600;
margin-bottom: 12px; color: var(--primary-light);
margin-bottom: 14px;
} }
.course-short-desc { .course-short-desc {
font-size: 14px; font-size: 14.5px;
color: #4f5357; color: #556575;
margin-bottom: 16px; margin-bottom: 20px;
line-height: 1.5; line-height: 1.6;
} }
.course-meta-row { .course-meta-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 12px;
margin-bottom: 14px; margin-bottom: 18px;
} }
.badge-bestseller { .badge-bestseller {
background-color: #ece3f1; background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
color: var(--primary); color: #fff;
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 10.5px;
padding: 3px 10px; padding: 4px 12px;
border-radius: 4px; border-radius: 30px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2);
} }
.rating-star { .rating-star {
color: #b4690e; color: #f39c12;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
@ -157,20 +193,21 @@ body {
.rating-count { .rating-count {
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 13.5px;
font-weight: 500;
} }
.course-features { .course-features {
display: flex; display: flex;
gap: 15px; gap: 20px;
font-size: 13px; font-size: 13.5px;
color: var(--success-green); color: var(--success-green);
margin-bottom: 20px; margin-bottom: 24px;
font-weight: 500; font-weight: 600;
} }
.course-features span i { .course-features span i {
margin-right: 4px; margin-right: 6px;
} }
.course-footer { .course-footer {
@ -178,116 +215,134 @@ body {
} }
.read-btn { .read-btn {
background: var(--primary); background: var(--primary-light);
color: #fff; color: #fff;
padding: 12px 20px; padding: 13px 28px;
font-weight: 600; font-weight: 600;
border-radius: 8px;
font-size: 15px; font-size: 15px;
transition: 0.2s; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border: none; border: 2px solid transparent;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: center; text-align: center;
box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
} }
.read-btn:hover { .read-btn:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff; color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
} }
/* --- Modernized Why Study With Us Section --- */ /* --- Modernized Why Study With Us Section --- */
.features-section { .features-section {
background-color: #f8f9fa; background-color: var(--bg-light);
border-radius: 24px; border-radius: 32px;
padding: 60px 40px; padding: 80px 40px;
margin-bottom: 60px; margin-bottom: 40px;
background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
background-size: 20px 20px;
} }
.features-section h2 { .features-section h2 {
font-size: 32px; font-size: 36px;
font-weight: 700; font-weight: 800;
color: #1c1d1f; color: var(--primary);
margin-bottom: 40px; margin-bottom: 12px;
}
.section-divider {
height: 4px;
width: 65px;
background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-yellow) 100%);
margin: 0 auto 45px auto;
border-radius: 10px;
} }
.feature-box { .feature-box {
background: #fff; background: #fff;
padding: 30px 24px; padding: 40px 28px;
border-radius: 16px; border-radius: 24px;
height: 100%; height: 100%;
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
text-align: left; text-align: left;
box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
} }
.feature-icon-wrapper { .feature-icon-wrapper {
width: 50px; width: 58px;
height: 50px; height: 58px;
background-color: #ece3f1; background-color: rgba(62, 81, 184, 0.08);
color: var(--primary); color: var(--primary);
border-radius: 12px; border-radius: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 22px; font-size: 24px;
margin-bottom: 20px; margin-bottom: 24px;
transition: transform 0.5s ease; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
.feature-box:hover { .feature-box:hover {
transform: translateY(-5px); transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
border-color: var(--primary); border-color: rgba(188, 26, 26, 0.2);
} }
.feature-box:hover .feature-icon-wrapper {
.feature-box:hover .feature-icon-wrapper i { background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
transform: rotate(360deg); color: #fff;
transform: rotateY(180deg);
box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
} }
.feature-icon-wrapper i { .feature-icon-wrapper i {
transition: transform 0.5s ease; transition: transform 0.4s ease;
}
.feature-box:hover .feature-icon-wrapper i {
transform: rotateY(-180deg);
} }
.feature-box h5 { .feature-box h5 {
font-size: 18px; font-size: 19px;
font-weight: 700; font-weight: 700;
color: #1c1d1f; color: var(--primary);
margin-bottom: 10px; margin-bottom: 12px;
} }
.feature-box p { .feature-box p {
font-size: 14px; font-size: 14.5px;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.6;
} }
#noResults { #noResults {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #666; color: var(--text-muted);
margin-top: 20px; margin-top: 30px;
} }
/* ======================================================== /* ========================================================
Custom Pure CSS Animations (Scroll Animations) Custom Pure CSS Animations (Scroll Animations)
======================================================== */ ======================================================== */
/* .animate-on-scroll { .animate-on-scroll {
opacity: 0; opacity: 0;
transition: all 0.8s ease-out; transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
.fade-up-init { .fade-up-init {
transform: translateY(30px); transform: translateY(40px);
} }
.animate-on-scroll.animated { .animate-on-scroll.animated {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} */ }
</style> </style>
{{-- Hero --}} {{-- Hero --}}
@ -406,7 +461,7 @@ $courses=[
<div class="col-md-8"> <div class="col-md-8">
<div class="card-body"> <div class="card-body">
<h4 class="course-title">{{ $course['title'] }}</h4> <h4 class="course-title">{{ $course['title'] }}</h4>
<div class="course-author">{{ $course['author'] }}</div> <div class="course-author"><i class="fa-solid fa-user-gear me-1"></i> {{ $course['author'] }}</div>
<p class="course-short-desc">{{ $course['desc'] }}</p> <p class="course-short-desc">{{ $course['desc'] }}</p>
@ -443,6 +498,7 @@ $courses=[
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init"> <div class="features-section text-center animate-on-scroll fade-up-init">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="section-divider"></div>
<div class="row g-4"> <div class="row g-4">
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">

6
resources/views/layouts/app.blade.php
View File

@ -17,7 +17,7 @@
} }
.navbar { .navbar {
background: #1D2861; background: #3E51B8;
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
top: 0; top: 0;
@ -34,7 +34,7 @@
} }
.navbar-brand:hover { .navbar-brand:hover {
color: #FFEA85; color: #f4f4f8;
} }
.nav-link { .nav-link {
@ -52,7 +52,7 @@
} }
.site-footer { .site-footer {
background: #1D2861; background: #182EA4;
color: #ffffff; color: #ffffff;
padding: 60px 0 30px; padding: 60px 0 30px;
} }

121
resources/views/students.blade.php
View File

@ -5,74 +5,88 @@
@section('content') @section('content')
<style> <style>
:root{ :root {
--primary:#5E244E; /* Premium Modern Automotive Palette matched from previous page */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--accent-orange: #e36414; /* Warning/Industrial Orange */
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
} }
.hero{ .hero {
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(117, 57, 57, 0.8)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg'); url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
background-size:cover; background-size: cover;
background-position:center; background-position: center;
color:#fff; color: #fff;
padding:80px 0; padding: 80px 0;
text-align:center; text-align: center;
} }
.portal-card{ .portal-card {
border:none; border: none;
border-radius:15px; border-radius: 15px;
transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
cursor: pointer;
} }
.portal-card:hover{ .portal-card:hover {
transform:translateY(-8px); transform: translateY(-8px);
border-color: var(--primary); border-color: #5f3131;
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1); box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
} }
.portal-icon{ .portal-icon {
width:70px; width: 70px;
height:70px; height: 70px;
background:#5E244E; background: #4361ba;
color:#fff; color: #fff;
border-radius:50%; border-radius: 50%;
display:flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
font-size:28px; font-size: 28px;
margin:auto; margin: auto;
transition: 0.4s ease; transition: 0.4s ease;
} }
.portal-card:hover .portal-icon { .portal-card:hover .portal-icon {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
} }
.btn-portal{ .btn-portal {
background:#5E244E; background: var(--primary-light);
color:#fff; color: #fff;
padding:12px 35px; padding: 12px 35px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.btn-portal:hover{ .btn-portal:hover {
background:#8B3A74; background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color:#fff; color: #fff;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
} }
.modal-content { .modal-content {
@ -81,8 +95,6 @@ body {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} }
.modal.fade .modal-dialog { .modal.fade .modal-dialog {
transform: scale(0.85); transform: scale(0.85);
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
@ -131,14 +143,14 @@ body {
} }
.form-control:focus { .form-control:focus {
border-color: var(--secondary); border-color: var(--primary-light);
box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12); box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
outline: 0; outline: 0;
} }
.input-group:focus-within .input-group-text { .input-group:focus-within .input-group-text {
border-color: var(--secondary); border-color: var(--primary-light);
color: var(--secondary); color: var(--primary-light);
} }
.modal-footer { .modal-footer {
@ -170,17 +182,17 @@ body {
border: none; border: none;
font-weight: 600; font-weight: 600;
padding: 10px 0; padding: 10px 0;
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2); box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
} }
.btn-modal-login:hover { .btn-modal-login:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff; color: #fff;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
} }
/* ======================================================== /* ========================================================
@ -236,7 +248,6 @@ body {
</p> </p>
</div> </div>
<div class="row g-4 animate-item fade-in-init"> <div class="row g-4 animate-item fade-in-init">
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4" onclick="studentlogin()"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
@ -304,11 +315,11 @@ body {
<!-- QUICK LINKS --> <!-- QUICK LINKS -->
<section class="py-5 bg-light overflow-hidden"> <section class="py-5 bg-light overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()"> <div class="text-center mb-5 animate-item fade-up-init">
<h2 class="fw-bold">Quick Links</h2> <h2 class="fw-bold">Quick Links</h2>
</div> </div>
<div class="row text-center animate-item slide-right-init" onclick="studentlogin()"> <div class="row text-center animate-item slide-right-init">
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
</div> </div>
@ -409,6 +420,4 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
</script> </script>
@endsection @endsection

192
resources/views/welcome.blade.php
View File

@ -14,23 +14,23 @@
<style> <style>
:root { :root {
/* Modern, Sleek Automotive Palette */ /* Modern, Sleek Automotive Palette */
--primary: #0F2C59; /* Deep Navy (Professional, Academic, Trustworthy) */ --primary: #0F2C59; /* Deep Navy */
--secondary: #E36414; /* Electric Industrial Orange (Perfect automotive accent, highly visible) */ --secondary: #E36414; /* Electric Industrial Orange */
--secondary-hover: #C5530E; /* Deeper burnt orange for polished hover effects */ --secondary-hover: #C5530E; /* Deeper burnt orange */
--accent-light: #E6FFFA; /* Ice Blue/Teal Mint tint for readable overlay text */ --accent-light: #E6FFFA;
--accent-blue: #3085C3; /* Premium Tech Blue for badges and active states */ --accent-blue: #3085C3; /* Premium Tech Blue */
--bg-light: #F4F6F9; /* Soft slate light gray to prevent pure-white eyesore */ --bg-light: #F4F6F9; /* Soft slate light gray */
/* Semantic Adjustments */ /* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey (much easier to read than bright blue) */ --text-main: #1E293B;
--text-muted: #64748B; /* Neutral gray for subtitles */ --text-muted: #64748B;
--card-border: rgba(15, 44, 89, 0.08); --card-border: rgba(15, 44, 89, 0.08);
--shadow-color: rgba(15, 44, 89, 0.06); --shadow-color: rgba(15, 44, 89, 0.06);
} }
/* ===== Global Improvements ===== */ /* ===== Global Improvements ===== */
body { body {
font-family: 'Segoe UI', Arial, sans-serif; /* Cleaner modern font stack */ font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main); color: var(--text-main);
background-color: #ffffff; background-color: #ffffff;
} }
@ -47,13 +47,13 @@ body {
/* ===== Premium Theme Buttons ===== */ /* ===== Premium Theme Buttons ===== */
.btn-theme { .btn-theme {
background: #3B4E73; background: #305CB1;
color: #fff; color: #fff;
border: 2px solid #FFF;
padding: 14px 35px; padding: 14px 35px;
border-radius: 40px; border-radius: 40px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: bolder;
} }
.btn-theme:hover { .btn-theme:hover {
@ -101,7 +101,6 @@ body {
/* ===== Hero Section ===== */ /* ===== Hero Section ===== */
.hero { .hero {
height: 650px; height: 650px;
/* Deep blue to slate blue gradient for rich tech aesthetic */
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: 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-position: center;
background-size: cover; background-size: cover;
@ -130,51 +129,52 @@ body {
color: #E2E8F0; color: #E2E8F0;
} }
/* ===== Academic Courses Section ===== */ /* ===== NEW & IMPROVED COURSES CARD DESIGN ===== */
.courses-section { .courses-section {
background-color: var(--bg-light); background-color: var(--bg-light);
} }
.course-card { .course-card {
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
/* border-radius: 16px; */ /* border-radius: 12px !important; */
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 8px 30px var(--shadow-color); box-shadow: 0 5px 15px var(--shadow-color);
} }
.course-card:hover { .course-card:hover {
transform: translateY(-8px); transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(15, 44, 89, 0.12); box-shadow: 0 15px 35px rgba(15, 44, 89, 0.12);
border-color: rgba(48, 133, 195, 0.3); border-color: rgba(48, 133, 195, 0.25);
} }
.course-image-wrapper { .course-image-wrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 210px;
} }
.course-card img { .course-card img {
height: 220px; height: 100%;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.5s ease; transition: transform 0.6s ease;
} }
.course-card:hover img { .course-card:hover img {
transform: scale(1.05); transform: scale(1.06);
} }
.badge-floating { .badge-floating {
position: absolute; position: absolute;
top: 20px; top: 15px;
left: 20px; left: 15px;
background: #BC1A1A; background: #BC1A1A;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 11px;
padding: 6px 14px; padding: 5px 12px;
border-radius: 30px; border-radius: 30px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -184,20 +184,29 @@ body {
.course-card .card-body { .course-card .card-body {
padding: 24px; padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
} }
.course-title { .course-title {
font-size: 22px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: var(--primary); color: var(--primary);
margin-bottom: 10px; margin-bottom: 8px;
line-height: 1.4;
transition: color 0.3s ease;
}
.course-card:hover .course-title {
color: #914040;
} }
.course-author { .course-author {
font-size: 14px; font-size: 13.5px;
font-weight: 500; font-weight: 500;
color: var(--accent-blue); color: var(--accent-blue);
margin-bottom: 15px; margin-bottom: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@ -207,14 +216,14 @@ body {
font-size: 14px; font-size: 14px;
color: #556575; color: #556575;
line-height: 1.6; line-height: 1.6;
margin-bottom: 20px; margin-bottom: 15px;
} }
.course-features-container { .course-features-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
margin-bottom: 20px; margin-bottom: 15px;
} }
.feature-pill { .feature-pill {
@ -222,20 +231,24 @@ body {
color: var(--accent-blue); color: var(--accent-blue);
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
padding: 6px 12px; padding: 4px 10px;
border-radius: 8px; border-radius: 6px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.course-footer {
margin-top: auto; /* Pushes the footer area to the exact bottom of the card */
padding-top: 15px;
border-top: 1px solid rgba(15, 44, 89, 0.08);
}
.course-meta-row { .course-meta-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-top: 15px; margin-bottom: 15px;
border-top: 1px solid rgba(15, 44, 89, 0.08);
margin-bottom: 20px;
} }
.rating-star { .rating-star {
@ -250,12 +263,12 @@ body {
} }
.read-btn { .read-btn {
background: transparent; background: #3E51B8;
color: var(--primary); color: white;
border: 2px solid var(--primary); /* border: 2px solid var(--primary); */
padding: 12px 24px; padding: 10px 20px;
font-weight: 700; font-weight: 700;
border-radius: 30px; border-radius: 6px;
font-size: 14px; font-size: 14px;
transition: all 0.3s ease; transition: all 0.3s ease;
text-decoration: none; text-decoration: none;
@ -264,8 +277,8 @@ body {
} }
.course-card:hover .read-btn { .course-card:hover .read-btn {
background: var(--primary); background: #0a67df;
border-color: var(--primary); border-color: #0a67df;
color: #fff; color: #fff;
} }
@ -276,18 +289,11 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(rgba(81, 78, 117, 0.94), rgba(0, 9, 15, 0.88)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80'); background: linear-gradient(rgba(117, 57, 57, 0.94), rgba(0, 9, 15, 0.88)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
z-index: 1; z-index: 1;
} }
/* .why-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
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')
z-index: 1;
} */
.why-content-wrapper { .why-content-wrapper {
position: relative; position: relative;
@ -358,7 +364,7 @@ body {
<p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p> <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
<div class="d-flex flex-wrap justify-content-center gap-3" > <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;"> <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 <i class="fa-solid fa-user-plus me-2" ></i>Apply Now
</a> </a>
<a href="/courses" class="btn btn-outline-theme"> <a href="/courses" class="btn btn-outline-theme">
@ -372,13 +378,13 @@ body {
</div> </div>
</section> </section>
{{-- ===================== COURSES SECTION ===================== --}} {{-- ===================== IMPROVED COURSES SECTION ===================== --}}
<section class="section courses-section" aria-labelledby="courses-heading"> <section class="section courses-section" aria-labelledby="courses-heading">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-on-scroll fade-up-init"> <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: var(--secondary); letter-spacing: 0.1em;">Academic Programs</span> <span class="text-uppercase fw-bold small d-block mb-2" style="color: var(--secondary); letter-spacing: 0.1em;">Academic Programs</span>
<h2 id="courses-heading" class="display-5 mb-2">Our Top Courses</h2> <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal;">Our Top Courses</h2>
<p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p> <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
</div> </div>
@ -416,27 +422,28 @@ body {
<div class="row g-4 mb-5"> <div class="row g-4 mb-5">
@foreach($courses as $key => $course) @foreach($courses as $key => $course)
<div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;"> <div class="col-lg-4 col-md-6 d-flex align-items-stretch animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
<div class="card course-card h-100"> <div class="card course-card w-100 d-flex flex-column">
<div class="course-image-wrapper"> <div class="course-image-wrapper">
<span class="badge-floating">{{ $course['badge'] }}</span> <span class="badge-floating">{{ $course['badge'] }}</span>
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy"> <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
</div> </div>
<div class="card-body d-flex flex-column justify-content-between">
<div> <div class="card-body">
<h4 class="course-title">{{ $course['title'] }}</h4> <h4 class="course-title">{{ $course['title'] }}</h4>
<div class="course-author"> <div class="course-author">
<i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }} <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
</div> </div>
<p class="course-short-desc">{{ $course['desc'] }}</p> <p class="course-short-desc">{{ $course['desc'] }}</p>
<div class="course-features-container"> <div class="course-features-container">
<span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span> <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
<span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span> <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
</div>
</div> </div>
<div> <!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements -->
<div class="course-footer">
<div class="course-meta-row"> <div class="course-meta-row">
<span class="rating-star"> <span class="rating-star">
<i class="fas fa-star me-1"></i>{{ $course['rating'] }} <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
@ -447,6 +454,7 @@ body {
<a href="/courses" class="read-btn">View Details</a> <a href="/courses" class="read-btn">View Details</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
@ -461,48 +469,8 @@ body {
</div> </div>
</section> </section>
{{-- ===================== WHY CHOOSE US ===================== --}} {{-- ===================== WHY CHOOSE US ===================== --}}
<!-- <section class="section why-section text-white" aria-labelledby="why-us-heading">
<div class="why-overlay"></div>
<div class="position-absolute top-0 start-0 w-100 h-100">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80"
alt="Background Lab" class="w-100 h-100" style="object-fit: cover; opacity: 0.15;">
</div>
<div class="container why-content-wrapper">
<div class="text-center mb-5 animate-on-scroll fade-up-init">
<h2 id="why-us-heading" class="display-5 text-white mb-0">Why Choose Us?</h2>
<div class="section-divider"></div>
</div>
<div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
<div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100">
<div class="icon-box"><i class="fa-solid fa-flask-vial fs-4"></i></div>
<h4 class="text-white fs-5 mb-2">Modern Laboratories</h4>
<p class="text-white-50 small mb-0">State-of-the-art facilities equipped with latest industrial testing tools.</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100">
<div class="icon-box"><i class="fa-solid fa-graduation-cap fs-4"></i></div>
<h4 class="text-white fs-5 mb-2">Qualified Lecturers</h4>
<p class="text-white-50 small mb-0">Learn directly from veteran automotive engineers and researchers.</p>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100">
<div class="icon-box"><i class="fa-solid fa-car fs-4"></i></div>
<h4 class="text-white fs-5 mb-2">Hands-on Training</h4>
<p class="text-white-50 small mb-0">Gain real-world diagnostics experience inside our dedicated workshop floors.</p>
</div>
</div>
</div>
</div>
</section> -->
<section class="section why-section text-white position-relative overflow-hidden" aria-labelledby="why-us-heading" style="background-attachment: fixed;"> <section class="section why-section text-white position-relative overflow-hidden" aria-labelledby="why-us-heading" style="background-attachment: fixed;">
<div class="why-overlay"></div> <div class="why-overlay"></div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;"> <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;">
@ -513,11 +481,9 @@ body {
<div class="container why-content-wrapper position-relative" style="z-index: 2;"> <div class="container why-content-wrapper position-relative" style="z-index: 2;">
<div class="text-center mb-5 animate-on-scroll fade-up-init"> <div class="text-center mb-5 animate-on-scroll fade-up-init">
<h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2> <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
<!-- <div class="section-divider" style="transform: scaleX(1.2);"></div> -->
</div> </div>
<div class="row g-4 justify-content-center animate-on-scroll fade-up-init"> <div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
{{-- Modern Laboratories --}}
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;"> <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;"> <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
@ -528,7 +494,6 @@ body {
</div> </div>
</div> </div>
{{-- Qualified Lecturers --}}
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;"> <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;"> <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
@ -539,7 +504,6 @@ body {
</div> </div>
</div> </div>
{{-- Hands-on Training --}}
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;"> <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;"> <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">