289 lines
8.1 KiB
PHP
289 lines
8.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title','Our Courses')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
:root{
|
|
--primary:#5E244E;
|
|
--secondary:#8B3A74;
|
|
--light:#f8f4f7;
|
|
}
|
|
|
|
.hero {
|
|
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
|
|
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
color: #ffffff;
|
|
padding: 120px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1{
|
|
font-size:50px;
|
|
font-weight:700;
|
|
}
|
|
|
|
.hero p{
|
|
max-width:700px;
|
|
margin:auto;
|
|
font-size:18px;
|
|
}
|
|
|
|
/* --- Search Box Styling --- */
|
|
.search-box {
|
|
max-width: 500px;
|
|
margin: 30px auto 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|
/* border-radius: 30px; */
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 15px 25px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.search-box button {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0 25px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.search-box button:hover {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
|
|
|
|
.course-card{
|
|
border:none;
|
|
border-radius:15px;
|
|
overflow:hidden;
|
|
transition:.4s;
|
|
}
|
|
|
|
.course-card:hover{
|
|
transform:translateY(-8px);
|
|
box-shadow:0 15px 35px rgba(0,0,0,.15);
|
|
}
|
|
|
|
.course-card img{
|
|
height:230px;
|
|
object-fit:cover;
|
|
}
|
|
|
|
.badge-course{
|
|
background:#887582;
|
|
color:#fff;
|
|
padding:8px 15px;
|
|
border-radius:30px;
|
|
font-size:13px;
|
|
font-weight:30px;
|
|
}
|
|
|
|
.read-btn{
|
|
background:var(--primary);
|
|
color:#fff;
|
|
/* border-radius:30px; */
|
|
padding:10px 25px;
|
|
font-weight: 40px;
|
|
}
|
|
|
|
.read-btn:hover{
|
|
background:var(--secondary);
|
|
color:#fff;
|
|
}
|
|
|
|
.info-box{
|
|
background:#fff;
|
|
border-radius:15px;
|
|
padding:25px;
|
|
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
|
}
|
|
|
|
/* No results message styling */
|
|
#noResults {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #666;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
|
|
{{-- Hero --}}
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Our Courses</h1>
|
|
<p>
|
|
Build your future in the automotive industry through practical
|
|
training and internationally recognized learning experiences.
|
|
</p>
|
|
<div class="search-box">
|
|
<input
|
|
type="text"
|
|
id="courseSearch"
|
|
placeholder="Search Courses by title, level or description..."
|
|
>
|
|
<button type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@php
|
|
$courses=[
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Diploma in Automotive Engineering',
|
|
'duration'=>'2 Years',
|
|
'level'=>'Diploma',
|
|
'description'=>'Learn engine systems, diagnostics, vehicle maintenance, workshop practices and modern automotive technologies.',
|
|
],
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Mechanical Systems Technology',
|
|
'duration'=>'18 Months',
|
|
'level'=>'Certificate',
|
|
'description'=>'Study suspension, steering, transmission, braking systems and practical repair techniques.',
|
|
],
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Electric Vehicle Technology',
|
|
'duration'=>'1 Year',
|
|
'level'=>'Advanced',
|
|
'description'=>'Explore EV batteries, charging infrastructure, electric drivetrains and smart mobility systems.',
|
|
],
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Hybrid Vehicle Maintenance',
|
|
'duration'=>'10 Months',
|
|
'level'=>'Professional',
|
|
'description'=>'Learn hybrid engine operation, diagnostics and maintenance procedures.',
|
|
],
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Auto Electrical Systems',
|
|
'duration'=>'8 Months',
|
|
'level'=>'Certificate',
|
|
'description'=>'Understand vehicle wiring, sensors, ECU systems and electronic diagnostics.',
|
|
],
|
|
[
|
|
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
|
|
'title'=>'Automobile Service Technician',
|
|
'duration'=>'1 Year',
|
|
'level'=>'NVQ',
|
|
'description'=>'Hands-on training in servicing, repairing and maintaining modern vehicles.',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<section class="py-5">
|
|
<div class="container">
|
|
|
|
<div id="noResults" class="text-center d-none">
|
|
<p>No courses found matching your search.</p>
|
|
</div>
|
|
|
|
<div class="row g-4" id="courseContainer">
|
|
@foreach($courses as $course)
|
|
<div class="col-lg-4 col-md-6 course-item">
|
|
<div class="card course-card h-100">
|
|
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
|
|
<div class="card-body">
|
|
<span class="badge-course course-level">
|
|
{{ $course['level'] }}
|
|
</span>
|
|
<h4 class="mt-3 fw-bold course-title">
|
|
{{ $course['title'] }}
|
|
</h4>
|
|
<p class="text-muted course-desc">
|
|
{{ $course['description'] }}
|
|
</p>
|
|
<hr>
|
|
<div class="d-flex justify-content-between">
|
|
<span><b>Duration</b></span>
|
|
<span>{{ $course['duration'] }}</span>
|
|
</div>
|
|
<a href="/apply" class="btn read-btn w-100 mt-4">Apply Course</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pb-5">
|
|
<div class="container">
|
|
<div class="info-box text-center">
|
|
<h2 class="mb-3">Why Study With Us?</h2>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<h3>✔</h3>
|
|
<p>Experienced Lecturers</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<h3>✔</h3>
|
|
<p>Modern Workshops</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<h3>✔</h3>
|
|
<p>Industry Certification</p>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<h3>✔</h3>
|
|
<p>Career Guidance</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.getElementById('courseSearch').addEventListener('keyup', function() {
|
|
let filter = this.value.toLowerCase();
|
|
let courseItems = document.querySelectorAll('.course-item');
|
|
let hasResults = false;
|
|
|
|
courseItems.forEach(function(item) {
|
|
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
|
let level = item.querySelector('.course-level').textContent.toLowerCase();
|
|
let desc = item.querySelector('.course-desc').textContent.toLowerCase();
|
|
|
|
|
|
if (title.includes(filter) || level.includes(filter) || desc.includes(filter)) {
|
|
item.style.setProperty('display', '', 'important');
|
|
hasResults = true;
|
|
} else {
|
|
item.style.setProperty('display', 'none', 'important');
|
|
}
|
|
});
|
|
|
|
|
|
let noResultsMsg = document.getElementById('noResults');
|
|
if (hasResults) {
|
|
noResultsMsg.classList.add('d-none');
|
|
} else {
|
|
noResultsMsg.classList.remove('d-none');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@endsection |