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

4th commit

This commit is contained in:
imadhigp 2026-07-08 23:36:14 +05:30
parent 1aab6e147e
commit 5568997226
6 changed files with 1064 additions and 867 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

484
resources/views/apply.blade.php
View File

@ -17,7 +17,7 @@
} }
.hero { .hero {
height: 350px; height: 220px; /* Hero එකේ උස තවත් අඩු කළා */
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)), background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80'); url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
@ -29,51 +29,63 @@
} }
.hero h1 { .hero h1 {
font-size: 55px; font-size: 32px;
font-weight: bold; font-weight: bold;
margin: 0;
} }
.apply-area { .apply-area {
margin-top: -70px; margin-top: -40px;
margin-bottom: 70px; margin-bottom: 40px;
}
.form-container-sm {
max-width: 820px;
margin: 0 auto;
} }
.form-card { .form-card {
background: white; background: white;
border-radius: 15px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,.15); box-shadow: 0 10px 30px rgba(0,0,0,.08);
} }
.form-header { .form-header {
background: #887582; background: var(--primary);
color: white; color: white;
padding: 25px 40px; padding: 15px 25px;
} }
.form-header h2 { .form-header h2 {
margin: 0; margin: 0;
font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.section-title { .section-title {
background: #887582; background: var(--primary);
color: white; color: white;
padding: 14px 20px; padding: 8px 12px;
margin-top: 40px; margin-top: 22px;
margin-bottom: 30px; margin-bottom: 15px;
font-size: 20px; font-size: 14px;
border-radius: 8px; border-radius: 5px;
font-weight: 600;
} }
.form-label { .form-label {
font-weight: 600; font-weight: 600;
font-size: 13px;
margin-bottom: 4px;
} }
.form-control, .form-control,
.form-select { .form-select {
border-radius: 8px; border-radius: 5px;
padding: 12px; padding: 6px 10px;
font-size: 13px;
} }
.required { .required {
@ -84,272 +96,234 @@
background: var(--primary); background: var(--primary);
color: white; color: white;
border: none; border: none;
padding: 12px 30px; padding: 8px 20px;
font-size: 18px; font-size: 15px;
font-weight: bold; font-weight: bold;
/* border-radius: 8px; */ border-radius: 30px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
transition: 0.3s ease;
}
.submit-btn:hover {
background: var(--secondary);
transform: translateY(-1px);
}
.mb-3-custom {
margin-bottom: 0.75rem !important;
} }
</style> </style>
<div class="hero"> <div class="hero">
<div class="text-center"> <div class="text-center">
<h1>Course Enrolment Form</h1> <h1>Course Enrolment Form</h1>
<p class="lead">Automobile Engineering Academy</p> <p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p>
</div> </div>
</div> </div>
<div class="container apply-area"> <div class="container apply-area">
<div class="form-card">
<div class="form-header"> <div class="form-container-sm">
<h2> <div class="form-card">
<i class="fa-solid fa-file-circle-check me-2"></i> <div class="form-header">
Course Enrolment Form <h2>
</h2> <i class="fa-solid fa-file-circle-check me-2"></i>
</div> Course Enrolment Form
</h2>
</div>
<div class="p-5"> <div class="p-4">
<form action="#" method="POST" enctype="multipart/form-data"> <form action="#" method="POST" enctype="multipart/form-data">
@csrf @csrf
<div class="section-title"> {{-- STUDENT INFORMATION --}}
<i class="fa-solid fa-user me-2"></i> Student Information <div class="section-title">
</div> <i class="fa-solid fa-user me-2"></i> Student Information
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">First Name <span class="required">*</span></label>
<input type="text" name="first_name" class="form-control" required>
</div> </div>
<div class="col-md-6 mb-4"> <div class="row">
<label class="form-label">Last Name <span class="required">*</span></label> <div class="col-md-6 mb-3-custom">
<input type="text" name="last_name" class="form-control" required> <label class="form-label">First Name <span class="required">*</span></label>
<input type="text" name="first_name" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Last Name <span class="required">*</span></label>
<input type="text" name="last_name" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">NIC / Passport</label>
<input type="text" name="nic" class="form-control">
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Nationality</label>
<input type="text" name="nationality" class="form-control">
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">District / City / State <span class="required">*</span></label>
<input type="text" name="state" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Gender</label>
<select name="gender" class="form-select">
<option selected disabled>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Date of Birth</label>
<input type="date" name="dob" class="form-control">
</div>
</div> </div>
<div class="col-md-6 mb-4"> {{-- CONTACT INFORMATION --}}
<label class="form-label">NIC / Passport</label> <div class="section-title">
<input type="text" name="nic" class="form-control"> <i class="fa-solid fa-envelope me-2"></i> Contact Information
</div> </div>
<div class="col-md-6 mb-4"> <div class="row">
<label class="form-label">Nationality</label> <div class="col-md-6 mb-3-custom">
<input type="text" name="nationality" class="form-control"> <label class="form-label">Contact Number <span class="required">*</span></label>
</div> <input type="tel" name="mobile" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Alternative Contact Number</label>
<input type="tel" name="mobile2" class="form-control">
</div>
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Address <span class="required">*</span></label> <label class="form-label">Email Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" required> <input type="email" name="email" class="form-control" required>
</div> </div>
<div class="col-md-6 mb-4">
<label class="form-label">First Name <span class="required">*</span></label>
<input type="text" name="State" class="form-control" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Gender</label>
<select name="gender" class="form-select">
<option selected disabled>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Date of Birth</label>
<input type="date" name="dob" class="form-control">
</div>
</div>
<div class="section-title">
<i class="fa-solid fa-envelope me-2"></i> Contact Information
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">Contact Number <span class="required">*</span></label>
<input type="mobile" name="mobile" class="form-control" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Alternative Contact Number<span class="required">*</span></label>
<input type="mobile2" name="mobile2" class="form-control" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Email Address <span class="required">*</span></label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Preferred contact method </label>
<select name="gender" class="form-select">
<option selected disabled>Select Your Option</option>
<option value="Male">Email</option>
<option value="Female">Phone</option>
<option value="Female">Sms</option>
</select>
</div>
</div>
<!-- <div class="section-title">
<i class="fa-solid fa-language me-2"></i> Language and Diversity
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">English <span class="required">*</span></label>
<input type="text" name="Language_Diversity" class="form-control" required>
</div>
</div>
<div class="section-title">
<i class="fa-solid fa-wheelchair me-2"></i> Disability
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label">Disability <span class="required">*</span></label>
<input type="text" name="Disability" class="form-control" required>
</div>
</div> -->
<div class="section-title">
<i class="fa-solid fa-graduation-cap me-2"></i> Education
</div>
<div class="row">
<!-- Still at School -->
<div class="col-md-6 mb-4">
<label class="form-label">Still at school?</label>
<select name="still_at_school" class="form-select">
<option selected disabled>Select Your Option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<!-- Highest Qualification -->
<div class="col-md-6 mb-4">
<label class="form-label">Highest Educational Qualification</label>
<select name="highest_qualification" class="form-select">
<option selected disabled>Select Qualification</option>
<option value="O/L">G.C.E. O/L</option>
<option value="A/L">G.C.E. A/L</option>
<option value="NVQ Level 3">NVQ Level 3</option>
<option value="NVQ Level 4">NVQ Level 4</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>
<option value="Higher Diploma">Higher Diploma</option>
<option value="Degree">Degree</option>
<option value="Other">Other</option>
</select>
</div>
<!-- School / College -->
<div class="col-md-6 mb-4">
<label class="form-label">School / College Name</label>
<input type="text" name="school_name" class="form-control"
placeholder="Enter School / College Name">
</div>
<!-- Year Completed -->
<div class="col-md-6 mb-4">
<label class="form-label">Year Completed</label>
<input type="number" name="year_completed" class="form-control"
min="1980" max="2100" placeholder="e.g. 2025">
</div>
<!-- Examination Passed -->
<div class="col-md-6 mb-4">
<label class="form-label">Examination Passed</label>
<select name="exam_passed" class="form-select">
<option selected disabled>Select Examination</option>
<option value="G.C.E. O/L">G.C.E. O/L</option>
<option value="G.C.E. A/L">G.C.E. A/L</option>
<option value="NVQ">NVQ</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>
<option value="Degree">Degree</option>
<option value="Other">Other</option>
</select>
</div>
<!-- Subjects -->
<div class="col-md-6 mb-4">
<label class="form-label">Subjects</label>
<input type="text" name="subjects" class="form-control"
placeholder="e.g. Mathematics, Science, English">
</div>
<!-- Grades / Results -->
<div class="col-12 mb-4">
<label class="form-label">Grades / Results</label>
<textarea name="grades_results" class="form-control" rows="3"
placeholder="Enter your grades or examination results"></textarea>
</div>
<!-- Certificate Upload -->
<div class="col-12 mb-4">
<label class="form-label">Educational Certificates</label>
<input type="file" name="certificates[]" class="form-control"
accept=".pdf,.jpg,.jpeg,.png" multiple>
<small class="text-muted">
Upload O/L, A/L, NVQ, Diploma or other educational certificates.
</small>
</div>
</div>
<!--
<div class="section-title">
<i class="fa-solid fa-graduation-cap me-2"></i> Qualifications
</div> -->
<div class="section-title">
<i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label"> Emergency Contact Name <span class="required">*</span></label>
<input type="text" name="Emergency_Contact" class="form-control" required>
</div>
<div class="col-md-6 mb-4">
<label class="form-label">Relationship <span class="required">*</span></label>
<input type="text" name="Emergency_Contact" class="form-control" required>
</div>
</div> <div class="col-md-6 mb-3-custom">
<label class="form-label">Preferred Contact Method</label>
<select name="preferred_contact_method" class="form-select">
<option selected disabled>Select Your Option</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="sms">SMS</option>
</select>
</div>
</div>
<div class="form-check mb-4"> {{-- EDUCATION --}}
<input class="form-check-input" type="checkbox" id="terms" required> <div class="section-title">
<label class="form-check-label" href="#terms"> <i class="fa-solid fa-graduation-cap me-2"></i> Education
I agree to the terms and conditions <span class="required">*</span> </div>
</label>
</div>
<div class="mt-4"> <div class="row">
<button type="submit" class="submit-btn">Submit Application</button> <div class="col-md-6 mb-3-custom">
</div> <label class="form-label">Still at school?</label>
<select name="still_at_school" class="form-select">
<option selected disabled>Select Your Option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</form> <div class="col-md-6 mb-3-custom">
<label class="form-label">Highest Educational Qualification</label>
<select name="highest_qualification" class="form-select">
<option selected disabled>Select Qualification</option>
<option value="O/L">G.C.E. O/L</option>
<option value="A/L">G.C.E. A/L</option>
<option value="NVQ Level 3">NVQ Level 3</option>
<option value="NVQ Level 4">NVQ Level 4</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>
<option value="Higher Diploma">Higher Diploma</option>
<option value="Degree">Degree</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">School / College Name</label>
<input type="text" name="school_name" class="form-control" placeholder="Enter School Name">
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Year Completed</label>
<input type="number" name="year_completed" class="form-control" min="1980" max="2100" placeholder="e.g. 2025">
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Examination Passed</label>
<select name="exam_passed" class="form-select">
<option selected disabled>Select Examination</option>
<option value="G.C.E. O/L">G.C.E. O/L</option>
<option value="G.C.E. A/L">G.C.E. A/L</option>
<option value="NVQ">NVQ</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>
<option value="Degree">Degree</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Subjects</label>
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
</div>
<div class="col-12 mb-3-custom">
<label class="form-label">Grades / Results</label>
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
</div>
<div class="col-12 mb-3-custom">
<label class="form-label">Educational Certificates</label>
<input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
</div>
</div>
{{-- EMERGENCY CONTACTS --}}
<div class="section-title">
<i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
</div>
<div class="row">
<div class="col-md-6 mb-3-custom">
<label class="form-label">Emergency Contact Name <span class="required">*</span></label>
<input type="text" name="emergency_contact_name" class="form-control" required>
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Relationship <span class="required">*</span></label>
<input type="text" name="emergency_contact_relationship" class="form-control" required>
</div>
</div>
{{-- TERMS AND CONDITIONS --}}
<div class="form-check mb-3 mt-2">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms" style="font-size: 13px;">
I agree to the terms and conditions <span class="required">*</span>
</label>
</div>
<div class="mt-3">
<button type="submit" class="submit-btn">Submit Application</button>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -9,6 +9,9 @@
--primary:#5E244E; --primary:#5E244E;
--secondary:#8B3A74; --secondary:#8B3A74;
--light:#f8f4f7; --light:#f8f4f7;
--card-border: #efeff4;
--text-muted: #6a6f73;
--success-green: #1f8a4c;
} }
.hero { .hero {
@ -40,9 +43,9 @@
position: relative; position: relative;
display: flex; display: flex;
box-shadow: 0 8px 25px rgba(0,0,0,0.1); box-shadow: 0 8px 25px rgba(0,0,0,0.1);
/* border-radius: 30px; */
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
border-radius: 100px;
} }
.search-box input { .search-box input {
@ -68,55 +71,195 @@
background: var(--secondary); background: var(--secondary);
} }
/* --- Udemy Style Course Card --- */
.course-card {
.course-card{ border: 1px solid var(--card-border);
border:none; border-radius: 20px;
border-radius:15px; overflow: hidden;
overflow:hidden; background: #fff;
transition:.4s; transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: none;
} }
.course-card:hover{ .course-card:hover {
transform:translateY(-8px); transform: translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,.15); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
} }
.course-card img{ .course-image-wrapper {
height:230px; padding: 16px 16px 0 16px;
object-fit:cover;
} }
.badge-course{ .course-card img {
background:#887582; height: 190px;
color:#fff; width: 100%;
padding:8px 15px; object-fit: cover;
border-radius:30px; border-radius: 14px;
font-size:13px;
font-weight:30px;
} }
.read-btn{ .course-card .card-body {
background:var(--primary); padding: 20px 24px 24px 24px;
color:#fff; display: flex;
/* border-radius:30px; */ flex-direction: column;
padding:10px 25px;
font-weight: 40px;
} }
.read-btn:hover{ .course-title {
background:var(--secondary); font-size: 21px;
color:#fff; font-weight: 700;
line-height: 1.3;
color: #1c1d1f;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 55px;
} }
.info-box{ .course-author {
background:#fff; font-size: 14px;
border-radius:15px; color: var(--text-muted);
padding:25px; margin-bottom: 8px;
box-shadow:0 5px 20px rgba(0,0,0,.08); }
.course-short-desc {
font-size: 14px;
color: #4f5357;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 42px;
line-height: 1.5;
}
.course-meta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.badge-bestseller {
background-color: #ece3f1;
color: var(--primary);
font-weight: 700;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
text-transform: uppercase;
}
.rating-star {
color: #b4690e;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 4px;
}
.rating-count {
color: var(--text-muted);
font-size: 13px;
}
.course-features {
display: flex;
gap: 15px;
font-size: 13px;
color: var(--success-green);
margin-bottom: 18px;
font-weight: 500;
}
.course-features span i {
margin-right: 4px;
}
.course-footer {
margin-top: auto;
}
.read-btn {
background: var(--primary);
color: #fff;
padding: 12px 20px;
font-weight: 600;
border-radius: 8px;
font-size: 15px;
transition: 0.2s;
border: none;
text-decoration: none;
display: block;
text-align: center;
}
.read-btn:hover {
background: var(--secondary);
color: #fff;
}
/* --- Modernized Why Study With Us Section --- */
.features-section {
background-color: #f8f9fa;
border-radius: 24px;
padding: 60px 40px;
margin-bottom: 60px;
}
.features-section h2 {
font-size: 32px;
font-weight: 700;
color: #1c1d1f;
margin-bottom: 40px;
}
.feature-box {
background: #fff;
padding: 30px 24px;
border-radius: 16px;
height: 100%;
transition: all 0.3s ease;
border: 1px solid #efeff4;
text-align: left;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
.feature-icon-wrapper {
width: 50px;
height: 50px;
background-color: #ece3f1;
color: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 20px;
}
.feature-box h5 {
font-size: 18px;
font-weight: 700;
color: #1c1d1f;
margin-bottom: 10px;
}
.feature-box p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 0;
line-height: 1.5;
} }
/* No results message styling */
#noResults { #noResults {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
@ -153,42 +296,66 @@ $courses=[
'title'=>'Diploma in Automotive Engineering', 'title'=>'Diploma in Automotive Engineering',
'duration'=>'2 Years', 'duration'=>'2 Years',
'level'=>'Diploma', 'level'=>'Diploma',
'description'=>'Learn engine systems, diagnostics, vehicle maintenance, workshop practices and modern automotive technologies.', 'author'=>'Automotive Engineering Dept.',
'desc'=>'Master engine diagnostics, modern hybrid vehicle maintenance, and advanced automotive electrical systems with hands-on labs.',
'students'=>'1,240 students enrolled',
'rating'=>'4.9',
'badge'=>'Popular'
], ],
[ [
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80', 'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
'title'=>'Mechanical Systems Technology', 'title'=>'Mechanical Systems Technology',
'duration'=>'18 Months', 'duration'=>'18 Months',
'level'=>'Certificate', 'level'=>'Certificate',
'description'=>'Study suspension, steering, transmission, braking systems and practical repair techniques.', 'author'=>'Tech & Service Campus',
'desc'=>'Comprehensive training on vehicle suspension, transmissions, steering, braking mechanisms, and professional repair workshop skills.',
'students'=>'850 students enrolled',
'rating'=>'4.7',
'badge'=>'Bestseller'
], ],
[ [
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80', 'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
'title'=>'Electric Vehicle Technology', 'title'=>'Electric Vehicle Technology',
'duration'=>'1 Year', 'duration'=>'1 Year',
'level'=>'Advanced', 'level'=>'Advanced',
'description'=>'Explore EV batteries, charging infrastructure, electric drivetrains and smart mobility systems.', 'author'=>'EV Research Institute',
'desc'=>'Dive into the future of mobility. Learn about smart EV battery packs, fast charging infrastructures, and high-voltage safety.',
'students'=>'640 students enrolled',
'rating'=>'4.8',
'badge'=>'New'
], ],
[ [
'image'=>'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=900&q=80', 'image'=>'https://images.unsplash.com/photo-1616788494707-ec28f08d05a1?auto=format&fit=crop&w=900&q=80',
'title'=>'Hybrid Vehicle Maintenance', 'title'=>'Advanced EFI Engine Tuning & Diagnostic',
'duration'=>'10 Months', 'duration'=>'6 Months',
'level'=>'Professional', 'level'=>'Expert',
'description'=>'Learn hybrid engine operation, diagnostics and maintenance procedures.', 'author'=>'Performance Tuning Lab',
'desc'=>'Learn professional ECU remapping, electronic fuel injection (EFI) tuning, sensor calibration, and master high-end oscilloscope diagnostics.',
'students'=>'420 students enrolled',
'rating'=>'4.9',
'badge'=>'Hot & New'
], ],
[ [
'image'=>'https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=900&q=80', 'image'=>'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80',
'title'=>'Auto Electrical Systems', 'title'=>'Hybrid & Plug-in Hybrid Masterclass',
'duration'=>'8 Months', 'duration'=>'8 Months',
'level'=>'Certificate', 'level'=>'Professional',
'description'=>'Understand vehicle wiring, sensors, ECU systems and electronic diagnostics.', 'author'=>'Automotive Engineering Dept.',
'desc'=>'Specialized training in Toyota/Honda Hybrid Synergy Drive systems, inverter repairs, planetary gearboxes, and live diagnostic scanner masterclass.',
'students'=>'980 students enrolled',
'rating'=>'4.8',
'badge'=>'Top Rated'
], ],
[ [
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80', 'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
'title'=>'Automobile Service Technician', 'title'=>'Automotive Body Electronics & Comfort Systems',
'duration'=>'1 Year', 'duration'=>'1 Year',
'level'=>'NVQ', 'level'=>'Diploma',
'description'=>'Hands-on training in servicing, repairing and maintaining modern vehicles.', 'author'=>'Tech & Service Campus',
'desc'=>'Covering modern CAN-bus/LIN-bus communication networks, SRS airbag systems, ABS/ESP braking electronics, and smart climate control.',
'students'=>'510 students enrolled',
'rating'=>'4.6',
'badge'=>'Trending'
], ],
]; ];
@endphp @endphp
@ -204,23 +371,31 @@ $courses=[
@foreach($courses as $course) @foreach($courses as $course)
<div class="col-lg-4 col-md-6 course-item"> <div class="col-lg-4 col-md-6 course-item">
<div class="card course-card h-100"> <div class="card course-card h-100">
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}"> <div class="course-image-wrapper">
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
</div>
<div class="card-body"> <div class="card-body">
<span class="badge-course course-level"> <h4 class="course-title">{{ $course['title'] }}</h4>
{{ $course['level'] }} <div class="course-author">{{ $course['author'] }}</div>
</span>
<h4 class="mt-3 fw-bold course-title"> <p class="course-short-desc">{{ $course['desc'] }}</p>
{{ $course['title'] }}
</h4> <div class="course-meta-row">
<p class="text-muted course-desc"> <span class="badge-bestseller">{{ $course['badge'] }}</span>
{{ $course['description'] }} <span class="rating-star">
</p> <i class="fas fa-star"></i> {{ $course['rating'] }}
<hr> </span>
<div class="d-flex justify-content-between"> <span class="rating-count">({{ $course['students'] }})</span>
<span><b>Duration</b></span> </div>
<span>{{ $course['duration'] }}</span>
<div class="course-features">
<span><i class="fas fa-tools"></i> Practical Labs</span>
<span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span>
</div>
<div class="course-footer">
<a href="/apply" class="read-btn">View & Apply Course</a>
</div> </div>
<a href="/apply" class="btn read-btn w-100 mt-4">Apply Course</a>
</div> </div>
</div> </div>
</div> </div>
@ -230,28 +405,58 @@ $courses=[
</div> </div>
</section> </section>
{{-- Modernized Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<div class="info-box text-center"> <div class="features-section text-center">
<h2 class="mb-3">Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="row">
<div class="col-md-3"> <div class="row g-4">
<h3>✔</h3> <!-- Feature 1 -->
<p>Experienced Lecturers</p> <div class="col-xl-3 col-md-6">
<div class="feature-box">
<div class="feature-icon-wrapper">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<h5>Experienced Lecturers</h5>
<p>Learn from certified automotive industry experts and senior engineers.</p>
</div>
</div> </div>
<div class="col-md-3">
<h3>✔</h3> <!-- Feature 2 -->
<p>Modern Workshops</p> <div class="col-xl-3 col-md-6">
<div class="feature-box">
<div class="feature-icon-wrapper">
<i class="fas fa-cogs"></i>
</div>
<h5>Modern Workshops</h5>
<p>Get hands-on experience with latest diagnostic tools and hybrid lab setups.</p>
</div>
</div> </div>
<div class="col-md-3">
<h3>✔</h3> <!-- Feature 3 -->
<p>Industry Certification</p> <div class="col-xl-3 col-md-6">
<div class="feature-box">
<div class="feature-icon-wrapper">
<i class="fas fa-award"></i>
</div>
<h5>Industry Certification</h5>
<p>Earn internationally recognized qualifications to boost your career global scale.</p>
</div>
</div> </div>
<div class="col-md-3">
<h3>✔</h3> <!-- Feature 4 -->
<p>Career Guidance</p> <div class="col-xl-3 col-md-6">
<div class="feature-box">
<div class="feature-icon-wrapper">
<i class="fas fa-briefcase"></i>
</div>
<h5>Career Guidance</h5>
<p>Free job placement support, resume building, and interview preparation workshops.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@ -264,11 +469,9 @@ document.getElementById('courseSearch').addEventListener('keyup', function() {
courseItems.forEach(function(item) { courseItems.forEach(function(item) {
let title = item.querySelector('.course-title').textContent.toLowerCase(); let title = item.querySelector('.course-title').textContent.toLowerCase();
let level = item.querySelector('.course-level').textContent.toLowerCase(); let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
let desc = item.querySelector('.course-desc').textContent.toLowerCase();
if (title.includes(filter) || desc.includes(filter)) {
if (title.includes(filter) || level.includes(filter) || desc.includes(filter)) {
item.style.setProperty('display', '', 'important'); item.style.setProperty('display', '', 'important');
hasResults = true; hasResults = true;
} else { } else {
@ -276,7 +479,6 @@ document.getElementById('courseSearch').addEventListener('keyup', function() {
} }
}); });
let noResultsMsg = document.getElementById('noResults'); let noResultsMsg = document.getElementById('noResults');
if (hasResults) { if (hasResults) {
noResultsMsg.classList.add('d-none'); noResultsMsg.classList.add('d-none');

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

@ -13,7 +13,8 @@
body { body {
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
background: #f5f7fb; background: #f5f7fb;
padding-top: 80px; /* 80px තිබුණු එක 56px කළා, එවිට අනවශ්‍ය space එක ඉවත් වේ */
padding-top: 56px;
} }
.navbar { .navbar {
@ -23,6 +24,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
} }
.navbar-brand { .navbar-brand {
@ -36,11 +38,14 @@
} }
.nav-link { .nav-link {
color: white !important; color: rgba(255, 255, 255, 0.85) !important;
margin-left: 20px; margin-left: 20px;
transition: 0.2s ease;
} }
.nav-link:hover { /* දැනට ඉන්න පිටුව හෝ hover වන විට පැහැදිලිව පෙනීමට */
.nav-link:hover,
.nav-link.active-page {
color: #ffc107 !important; color: #ffc107 !important;
} }
@ -154,13 +159,13 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg navbar-dark">
<div class="container"> <div class="container">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<i class="fa-solid fa-car-side"></i> AutoEdu <i class="fa-solid fa-car-side"></i> AutoEdu
</a> </a>
<button class="navbar-toggler bg-light" <button class="navbar-toggler"
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#menu" data-bs-target="#menu"
@ -173,19 +178,19 @@
<div class="collapse navbar-collapse" id="menu"> <div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/">Home</a> <a class="nav-link {{ request()->is('/') ? 'active-page' : '' }}" href="/">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/courses">Courses</a> <a class="nav-link {{ request()->is('courses*') ? 'active-page' : '' }}" href="/courses">Courses</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/students">Student</a> <a class="nav-link {{ request()->is('students*') ? 'active-page' : '' }}" href="/students">Student</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/abouts">About Us</a> <a class="nav-link {{ request()->is('abouts*') ? 'active-page' : '' }}" href="/abouts">About Us</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/contact">Contact</a> <a class="nav-link {{ request()->is('contact*') ? 'active-page' : '' }}" href="/contact">Contact</a>
</li> </li>
<li class="nav-item ms-lg-3 mt-3 mt-lg-0"> <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
@ -204,7 +209,8 @@
<span class="user-profile-name">{{ $displayName }}</span> <span class="user-profile-name">{{ $displayName }}</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-end shadow animate slideIn" aria-labelledby="userMenu"> {{-- Dropdown responsive alignment එක හැදුවා --}}
<ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
<li> <li>
<a class="dropdown-item" href="/profile"> <a class="dropdown-item" href="/profile">
<i class="fa-solid fa-user me-2"></i> Profile <i class="fa-solid fa-user me-2"></i> Profile
@ -220,8 +226,8 @@
</div> </div>
@else @else
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<a href="/signin" class="btn btn-outline-light">Sign In</a> <a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
<a href="/signup" class="btn btn-warning">Register</a> <a href="/signup" class="btn btn-warning btn-sm px-3">Register</a>
</div> </div>
@endif @endif
</li> </li>
@ -247,10 +253,10 @@
<nav aria-label="Footer quick links"> <nav aria-label="Footer quick links">
<ul class="list-unstyled footer-links"> <ul class="list-unstyled footer-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="{{ Route::has('courses') ? route('courses') : '/courses' }}">Courses</a></li> <li><a href="/courses">Courses</a></li>
<li><a href="{{ Route::has('research') ? route('research') : '/students' }}">Students</a></li> <li><a href="/students">Students</a></li>
<li><a href="{{ Route::has('faculty') ? route('faculty') : '/abouts' }}">Abouts</a></li> <li><a href="/abouts">About Us</a></li>
<li><a href="{{ Route::has('contact') ? route('contact') : '/contact' }}">Contact</a></li> <li><a href="/contact">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
@ -305,7 +311,6 @@ function submitLogout() {
.then(data => { .then(data => {
if (data.success) { if (data.success) {
alert('Logged out successfully!'); alert('Logged out successfully!');
window.location.href = '/'; window.location.href = '/';
} else { } else {
alert('Logout failed. Please try again.'); alert('Logout failed. Please try again.');
@ -316,20 +321,6 @@ function submitLogout() {
alert('Server side error occurred during logout.'); alert('Server side error occurred during logout.');
}); });
} }
function toggleUserDropdown(event) {
event.stopPropagation();
const dropdown = document.getElementById('userDropdownContent');
if (dropdown) {
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
}
window.addEventListener('click', function () {
const dropdown = document.getElementById('userDropdownContent');
if (dropdown) { dropdown.style.display = 'none'; }
});
</script> </script>
</body> </body>
</html> </html>

250
resources/views/signup.blade.php
View File

@ -6,231 +6,241 @@
<style> <style>
body { body {
background: #f5f7fb; background: #f5f7fb;
font-family: 'Arial', Helvetica, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
} scale: 0.92;
* {
font-family: 'Arial';
transform: scale(0.95);
} }
/* LEFT PANEL (If active) */
.left-panel { .left-panel {
min-height: 100vh; background: #5E244E;
background: #f8f9fa; color: white;
}
.right-panel {
min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 40px; padding: 40px;
} }
.box { /* RIGHT PANEL */
width: 50%; .right-panel {
max-width: 520px; min-height: 100vh;
background: #fff; display: flex;
padding: 40px; justify-content: center;
/* border-radius: 15px; */ align-items: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, .12); padding: 40px 20px;
} }
.headline { /* REGISTRATION BOX */
font-size: 28px; .box {
color: #5E244E; width: 100%;
font-weight: 700; max-width: 500px;
font-family: Arial; background: #ffffff;
text-align: center; padding: 45px;
margin-bottom: 30px; border-radius: 18px;
} box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
/* .headline { /* TITLE */
.headline {
text-align: center; text-align: center;
margin-bottom: 30px; font-size: 32px;
font-weight: 700; font-weight: 700;
} */ color: #222;
margin-bottom: 35px;
}
/* MODERN INPUT WITH FLOATING LABELS */
.input-container { .input-container {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
font-size: 22px;
font-family: arial;
} }
.input-container input { .input-container input {
width: 100%; width: 100%;
height: 50px;
padding: 15px 0 5px 0;
border: none; border: none;
border-bottom: 2px solid #744a68; border-bottom: 2px solid #ddd;
padding: 12px 0 12px 5px;
outline: none;
background: transparent; background: transparent;
font-family: 'Arial'; outline: none;
font-size: 22px; font-size: 16px;
font-family: arial; color: #334155;
transition: all 0.3s ease;
} }
.input-container label { .input-container label {
position: absolute; position: absolute;
left: 5px; top: 15px;
top: 12px; left: 0;
color: #744a68; color: #744a68;
transition: .3s ease all; transition: all 0.3s ease;
pointer-events: none; pointer-events: none;
background: transparent; font-size: 16px;
padding: 0 4px;
font-size: 22px;
font-family: arial;
} }
/* Input Focus States */
.input-container input:focus { .input-container input:focus {
border-color: #744a68; border-bottom-color: #744a68;
font-size: 20px;
font-family: arial;
} }
/* Reliable floating label mechanism via :placeholder-shown */ /* Label Floating Effect */
.input-container input:focus + label, .input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label { .input-container input:not(:placeholder-shown) + label {
top: -12px; top: -10px;
font-size: 12px; font-size: 12px;
color: #744a68; color: #744a68;
background: #fff;
}
.btn-primary {
width: 100%;
padding: 12px;
font-weight: 600; font-weight: 600;
color: #fff;
background:#5E244E;
border: none;
margin-bottom:10px;
font-size: 22px;
} }
/* CHECKBOX STYLE */
.form-check-input:checked {
background-color: #5E244E;
border-color: #5E244E;
}
.form-check-label {
color: #666;
font-size: 14px;
cursor: pointer;
}
/* BUTTON */
.btn-primary {
height: 50px;
width: 100%;
font-size: 16px;
font-weight: 600;
background: #5E244E;
border: none;
color: white;
transition: background 0.2s ease-in-out, transform 0.1s ease;
}
.btn-primary:hover, .btn-primary:focus {
background: #4a1c3e;
color: white;
}
.btn-primary:active {
transform: scale(0.98);
}
/* BOTTOM TEXT */
.dontacc { .dontacc {
text-align: center; text-align: center;
margin-top: 20px; }
font-size: 19px;
.dontacc p {
color: #666;
font-size: 14px;
} }
.dontacc a { .dontacc a {
color: #744a68;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
color: #5E244E; font-size: 16px;
font-size: 20px; transition: color 0.2s ease;
font-family: arial;
} }
@media(max-width: 991px) { .dontacc a:hover {
.left-panel { text-decoration: underline;
display: none !important; color: #5E244E;
}
@media(max-width:991px) {
.right-panel {
min-height: 100vh;
padding: 20px;
} }
.box { .box {
margin: 20px; padding: 30px;
padding: 30px 20px; }
.headline {
font-size: 28px;
color: #5E244E;
font-weight: bold;
} }
} }
</style> </style>
@endpush @endpush
@section('content') @section('content')
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row min-vh-100">
<!-- <div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center left-panel">
<div class="text-center">
<img src="{{ asset('images/login-banner.png') }}"
class="img-fluid mb-4"
style="max-width:450px;"
alt="Academy">
<h2 class="fw-bold">
Automobile Engineering Academy
</h2>
<p class="text-muted">
Create your student account to apply for courses and manage your enrolment.
</p>
</div>
</div> -->
<div class="col-lg-6 right-panel">
<div class="col-md-8 col-lg-5 mx-auto right-panel">
<div class="box"> <div class="box">
<h2 class="headline">Student Registration</h2>
<h2 class="headline"> <form method="POST" action="{{ url('/signuppage') }}">
Student Registration
</h2>
<form method="POST" action="/signuppage">
@csrf @csrf
<div class="input-container"> <div class="input-container">
<input type="text" name="first_name" placeholder=" " required> <input type="text" name="first_name" value="{{ old('first_name') }}" placeholder=" " required autocomplete="given-name">
<label>First Name</label> <label>First Name</label>
@error('first_name')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div> </div>
<div class="input-container"> <div class="input-container">
<input type="text" name="last_name" placeholder=" " required> <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder=" " required autocomplete="family-name">
<label>Last Name</label> <label>Last Name</label>
@error('last_name')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div> </div>
<div class="input-container"> <div class="input-container">
<input type="email" name="email" placeholder=" " required> <input type="email" name="email" value="{{ old('email') }}" placeholder=" " required autocomplete="email">
<label>Email Address</label> <label>Email Address</label>
@error('email')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div> </div>
<div class="input-container"> <div class="input-container">
<input type="text" name="phone" placeholder=" " required> <input type="text" name="phone" value="{{ old('phone') }}" placeholder=" " required autocomplete="tel">
<label>Mobile Number</label> <label>Mobile Number</label>
@error('phone')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div> </div>
<div class="input-container"> <div class="input-container">
<input type="password" name="password" placeholder=" " required> <input type="password" name="password" placeholder=" " required autocomplete="new-password">
<label>Password</label> <label>Password</label>
@error('password')
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
@enderror
</div> </div>
<div class="input-container"> <div class="input-container">
<input type="password" name="password_confirmation" placeholder=" " required> <input type="password" name="password_confirmation" placeholder=" " required autocomplete="new-password">
<label>Confirm Password</label> <label>Confirm Password</label>
</div> </div>
<div class="form-check mb-4" style="gap: 5px; padding-bottom: 21px;"> <div class="form-check mb-4 d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="agree" required> <input class="form-check-input" type="checkbox" id="agree" required>
<label class="form-check-label" for="agree" > <label class="form-check-label" for="agree">
I agree to the Terms & Conditions I agree to the Terms & Conditions
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary mb-4">
Create Account Create Account
</button> </button>
<div class="dontacc"> <div class="dontacc">
<p class="mt-4 mb-1" >Already have an account?</p> <p class="mb-1">Already have an account? <a href="{{ url('/signin') }}" class="ms-1">Sign In</a></p>
<a href="{{ url('/signin') }}">
Sign In
</a>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endsection @endsection

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

@ -13,11 +13,11 @@
.hero{ .hero{
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
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:120px 0; padding:80px 0;
text-align:center; text-align:center;
} }
@ -48,38 +48,48 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
.btn-portal{ .btn-portal{
background:#5E244E; background:#5E244E;
color:#fff; color:#fff;
padding:10px 30px; padding:10px 30px;
border: none;
transition: 0.2s ease;
} }
.btn-portal:hover{ .btn-portal:hover{
background:#8B3A74; background:#8B3A74;
color:#fff; color:#fff;
} }
.modal-content { .modal-content {
border: none; border: none;
border-radius: 12px; border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} }
.modal-header { .modal-header {
background-color: #f8fafc; background: transparent;
border-bottom: 1px solid #e2e8f0; border-bottom: none;
border-top-left-radius: 12px; padding: 25px 25px 10px;
border-top-right-radius: 12px;
} }
.modal-title { .modal-title {
color: #8B3A74; color: var(--primary);
font-weight: 600; font-weight: 700;
align-item:center; font-size: 1.35rem;
margin-left: 134px; }
.modal-body {
padding: 10px 25px 20px;
}
.input-group-text {
background-color: #f8fafc;
border-color: #cbd5e1;
color: #64748b;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
} }
.form-label { .form-label {
color: #475569; color: #475569;
font-weight: 500; font-weight: 500;
@ -88,28 +98,67 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
.form-control { .form-control {
border: 1px solid #cbd5e1; border: 1px solid #cbd5e1;
padding: 0.65rem 0.75rem;
padding: 0.6rem 0.75rem; font-size: 0.95rem;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.form-control:focus { .form-control:focus {
border-color: #a5b4fc; border-color: var(--secondary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12);
outline: 0; outline: 0;
} }
.input-group:focus-within .input-group-text {
border-color: var(--secondary);
color: var(--secondary);
}
.modal-footer { .modal-footer {
background-color: #f8fafc; background: transparent;
border-top: 1px solid #e2e8f0; border-top: none;
border-bottom-left-radius: 12px; padding: 0 25px 30px;
border-bottom-right-radius: 12px; }
.btn-modal-cancel {
background: transparent;
border: 1.5px solid #cbd5e1;
color: #64748b;
font-weight: 600;
padding: 10px 0;
transition: all 0.2s;
width: 100%;
}
.btn-modal-cancel:hover {
background: #f1f5f9;
color: #334155;
border-color: #94a3b8;
}
.btn-modal-login {
background: var(--primary);
color: #fff;
border: none;
font-weight: 600;
padding: 10px 0;
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
transition: all 0.2s;
width: 100%;
}
.btn-modal-login:hover {
background: var(--secondary);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
} }
</style> </style>
<!-- Hero -->
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1 class="fw-bold">Student Portal</h1> <h1 class="fw-bold">Student Portal</h1>
@ -119,209 +168,170 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
</p> </p>
<button onclick="studentlogin()" class="btn btn-portal mt-3"> <button onclick="studentlogin()" class="btn btn-portal mt-3">
Student Login Student Login
</button> </button>
<script>
function studentlogin() {
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
myModal.show();
}
</script>
</div> </div>
</section> </section>
<!-- Features -->
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
<div class="text-center mb-5">
<h2>Student Services</h2>
<p class="text-muted">
Everything you need during your academic journey.
</p>
</div>
<div class="text-center mb-5"> <div class="row g-4">
<h2>Student Services</h2> <div class="col-md-4">
<p class="text-muted"> <div class="card portal-card h-100 text-center p-4">
Everything you need during your academic journey. <div class="portal-icon">
</p> <i class="fa-solid fa-book"></i>
</div> </div>
<h4 class="mt-4">My Courses</h4>
<p class="text-muted">View enrolled courses and learning materials.</p>
</div>
</div>
<div class="row g-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i>
</div>
<h4 class="mt-4">Class Timetable</h4>
<p class="text-muted">Check your weekly lecture schedule.</p>
</div>
</div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-book"></i> <i class="fa-solid fa-file-lines"></i>
</div> </div>
<h4 class="mt-4">My Courses</h4> <h4 class="mt-4">Assignments</h4>
<p class="text-muted"> <p class="text-muted">Submit assignments and download resources.</p>
View enrolled courses and learning materials. </div>
</p> </div>
</div>
</div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i> <i class="fa-solid fa-square-poll-vertical"></i>
</div> </div>
<h4 class="mt-4">Class Timetable</h4> <h4 class="mt-4">Exam Results</h4>
<p class="text-muted"> <p class="text-muted">View semester and final examination results.</p>
Check your weekly lecture schedule. </div>
</p> </div>
</div>
</div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-file-lines"></i> <i class="fa-solid fa-credit-card"></i>
</div> </div>
<h4 class="mt-4">Assignments</h4> <h4 class="mt-4">Fee Payments</h4>
<p class="text-muted"> <p class="text-muted">Pay course fees and download payment receipts.</p>
Submit assignments and download resources. </div>
</p> </div>
</div>
</div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-square-poll-vertical"></i> <i class="fa-solid fa-user"></i>
</div> </div>
<h4 class="mt-4">Exam Results</h4> <h4 class="mt-4">Student Profile</h4>
<p class="text-muted"> <p class="text-muted">Update your personal information securely.</p>
View semester and final examination results. </div>
</p> </div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-credit-card"></i>
</div>
<h4 class="mt-4">Fee Payments</h4>
<p class="text-muted">
Pay course fees and download payment receipts.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-user"></i>
</div>
<h4 class="mt-4">Student Profile</h4>
<p class="text-muted">
Update your personal information securely.
</p>
</div>
</div>
</div>
</div>
</section> </section>
<!-- Quick Links -->
<section class="py-5 bg-light"> <section class="py-5 bg-light">
<div class="container"> <div class="container">
<div class="text-center mb-5">
<h2>Quick Links</h2>
</div>
<div class="text-center mb-5"> <div class="row text-center">
<h2>Quick Links</h2> <div class="col-md-3 mb-3">
</div> <a href="#" class="btn btn-outline-dark w-100">Academic Calendar</a>
</div>
<div class="row text-center"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Student Handbook</a>
<div class="col-md-3 mb-3"> </div>
<a href="#" class="btn btn-outline-dark w-100"> <div class="col-md-3 mb-3">
Academic Calendar <a href="#" class="btn btn-outline-dark w-100">Examination Notices</a>
</a> </div>
</div> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Contact Support</a>
<div class="col-md-3 mb-3"> </div>
<a href="#" class="btn btn-outline-dark w-100"> </div>
Student Handbook </div>
</a>
</div>
<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Examination Notices
</a>
</div>
<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Contact Support
</a>
</div>
</div>
</div>
</section> </section>
<!-- CTA -->
<section class="py-5"> <section class="py-5">
<div class="container text-center"> <div class="container text-center">
<h2>Ready to Access Your Student Account?</h2>
<h2>Ready to Access Your Student Account?</h2> <p class="text-muted">Log in to manage your academic activities and stay updated.</p>
<button onclick="studentlogin()" class="btn btn-portal mt-3">
<p class="text-muted"> Student Login
Log in to manage your academic activities and stay updated. </button>
</p> </div>
<button onclick="studentlogin()" class="btn btn-portal mt-3">
Student Login
</button>
</div>
</section> </section>
<!-- Student Login Modal -->
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true"> <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header d-flex align-items-center justify-content-between">
<h5 class="modal-title" id="studentLoginModalLabel">Student Portal Login</h5> <h5 class="modal-title w-100 text-center" id="studentLoginModalLabel">
<i class="fa-solid fa-lock-open me-2" style="font-size: 20px; color: var(--secondary);"></i>
Student Portal Login
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<form action="#" method="POST" id="studentLoginForm"> <form action="#" method="POST" id="studentLoginForm">
<!-- Laravel use karanawa nam meka active karanna --> @csrf
<!-- @csrf -->
<div class="modal-body"> <div class="modal-body">
<!-- Username Field -->
<div class="mb-3"> <div class="mb-3">
<label for="username" class="form-label">Username / Student ID</label> <label for="username" class="form-label">Username / Student ID</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your username" required> <div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-user-graduate"></i></span>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your student ID" required>
</div>
</div> </div>
<!-- Password Field -->
<div class="mb-3"> <div class="mb-3">
<label for="password" class="form-label">Password</label> <label for="password" class="form-label">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required> <div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-key"></i></span>
<input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required>
</div>
</div> </div>
<!-- PIN Field -->
<div class="mb-3"> <div class="mb-3">
<label for="pin" class="form-label">Security PIN</label> <label for="pin" class="form-label">Security PIN</label>
<input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required> <div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-shield-halved"></i></span>
<input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer d-flex gap-2 justify-content-center">
<button type="button" class="btn btn-portal" data-bs-dismiss="modal" style="background-color:gray; width:230px" >Cancel</button> <button type="button" class="btn btn-modal-cancel " data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-portal" style=" width:230px">Login</button> <button type="submit" class="btn btn-modal-login ">Login</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<script>
function studentlogin() {
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
myModal.show();
}
</script>
@endsection @endsection

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

@ -4,7 +4,7 @@
@push('styles') @push('styles')
<link rel="preload" as="image" <link rel="preload" as="image"
href="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80" href="https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80"
fetchpriority="high"> fetchpriority="high">
<link rel="stylesheet" href="{{ asset('css/pages/home.css') }}"> <link rel="stylesheet" href="{{ asset('css/pages/home.css') }}">
@endpush @endpush
@ -12,23 +12,38 @@
@section('content') @section('content')
<style> <style>
:root{ :root{
--primary:#5E244E; --primary:#5E244E;
--secondary:#8B3A74; --secondary:#8B3A74;
--light:#F8F4F7; --light:#F8F4F7;
--dark:#2F1027; --dark:#2F1027;
--gold:#FFC107; --gold:#FFC107;
--card-border: #efeff4;
--text-muted: #6a6f73;
--success-green: #1f8a4c;
} }
/* ===== Font & Base ===== */
body{
font-family: Arial, Helvetica, sans-serif;
}
.section{
padding:90px 0;
}
.section-title, h2, h3, h4, h5, h6{
font-family: Arial, Helvetica, sans-serif;
font-weight:700;
color:#5E244E;
}
/* ===== Buttons ===== */
.btn-theme{ .btn-theme{
background:#5E244E; background:#5E244E;
color:#fff; color:#fff;
border:2px solid #5E244E; border:2px solid #5E244E;
padding:12px 32px; padding:14px 35px;
border-radius:40px; border-radius:40px;
font-weight:600; font-weight:600;
transition:.3s; transition:.3s;
@ -72,35 +87,15 @@
color:#000; color:#000;
} }
/* ===== Hero ===== */
.hero {
/* ===== Font ===== */
body{
font-family: Arial, Helvetica, sans-serif;
}
/* .hero{
height:650px; height:650px;
background: background: linear-gradient(rgba(0, 0, 0, 0.65),rgba(30,10,25,.65)),
linear-gradient(rgba(30,10,25,.65),rgba(30,10,25,.65)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?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;
} */
.hero {
height:650px;
background:
linear-gradient(rgba(30,10,25,.65),rgba(30,10,25,.65)),
url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
} }
.hero-content{ .hero-content{
height:100%; height:100%;
display:flex; display:flex;
@ -114,162 +109,178 @@ background-position: center;
.hero h1{ .hero h1{
font-size:60px; font-size:60px;
font-weight:700; font-weight:700;
font-family: Arial, Helvetica, sans-serif;
margin-top: 75px; margin-top: 75px;
} }
.hero p{ .hero p{
font-size:22px; font-size:22px;
max-width:700px; max-width:700px;
font-family: Arial, Helvetica, sans-serif;
} }
.btn-theme{ .course-card {
background:#5E244E; border: 1px solid var(--card-border);
color:#fff; border-radius: 20px;
border:none; overflow: hidden;
padding:14px 35px; background: #fff;
border-radius:40px; transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:.3s;
} }
.btn-theme:hover{ .course-card:hover {
background:#8B3A74; transform: translateY(-5px);
color:#fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
transform:translateY(-3px);
} }
.section{ .course-image-wrapper {
padding:90px 0; padding: 16px 16px 0 16px;
overflow: hidden;
} }
.section-title, .course-card img {
h2, height: 190px;
h3, width: 100%;
h4, object-fit: cover;
h5, border-radius: 14px;
h6{ transition: 0.5s;
font-family: Arial, Helvetica, sans-serif;
font-weight:700;
color:#5E244E;
} }
.card{ .course-card:hover img {
border:none; transform: scale(1.05);
overflow:hidden;
border-radius:18px;
transition:.4s;
} }
.card img{ .course-card .card-body {
transition:.5s; padding: 20px 24px 24px 24px;
display: flex;
flex-direction: column;
text-align: left; /* Left alignment for Udemy Style */
} }
.card:hover{ .course-title {
transform:translateY(-10px); font-size: 21px;
box-shadow:0 20px 45px rgba(0,0,0,.15); font-weight: 700;
line-height: 1.3;
color: #1c1d1f;
margin-bottom: 6px;
} }
.card:hover img{ .course-author {
transform:scale(1.08); font-size: 14px;
color: var(--text-muted);
margin-bottom: 8px;
} }
.card-body h4{ .course-short-desc {
color:#5E244E; font-size: 14px;
color: #4f5357;
margin-bottom: 12px;
line-height: 1.5;
} }
.read-btn{ .course-meta-row {
background:#5E244E; display: flex;
color:#fff; align-items: center;
border-radius:30px; flex-wrap: wrap;
padding:10px 25px; gap: 8px;
border:none; margin-bottom: 14px;
} }
.read-btn:hover{ .badge-bestseller {
background:#8B3A74; background-color: #ece3f1;
color:#fff; color: var(--primary);
font-weight: 700;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
text-transform: uppercase;
} }
.why-section{ .rating-star {
background:#F8F4F7; color: #b4690e;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 4px;
} }
.why-section li{ .rating-count {
font-size:18px; color: var(--text-muted);
margin-bottom:18px; font-size: 13px;
} }
.why-section i{ .course-features {
color:#5E244E; display: flex;
gap: 15px;
font-size: 13px;
color: var(--success-green);
margin-bottom: 18px;
font-weight: 500;
} }
.cta{ .course-features span i {
background:#5E244E; margin-right: 4px;
color:#fff;
border-radius:20px;
padding:80px 30px;
} }
.cta p{ .course-footer {
color:#ddd; margin-top: auto;
} }
.cta .btn{ .read-btn {
background:#FFC107; background: var(--primary);
color:#000; color: #fff;
border:none; padding: 10px 25px;
border-radius:40px; font-weight: 600;
padding:14px 35px; border-radius: 30px;
font-weight:bold; font-size: 15px;
transition: 0.2s;
border: none;
text-decoration: none;
display: inline-block;
} }
.cta .btn:hover{ .read-btn:hover {
background:#ffcd39; background: var(--secondary);
color: #fff;
}
/* ===== Why Choose Us ===== */
.why-section {
background: #F8F4F7;
}
.why-section li {
font-size: 18px;
margin-bottom: 18px;
}
.why-section i {
color: #5E244E;
} }
</style> </style>
{{-- ===================== HERO ===================== --}} {{-- ===================== HERO ===================== --}}
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction"> <section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
<div class="container"> <div class="container">
<div class="hero-content text-center"> <div class="hero-content text-center">
<h1 class="display-4 fw-bold">
<h1 class="display-4 fw-bold" style"font-weight: 700;">
Automobile Engineering Academy Automobile Engineering Academy
</h1> </h1>
<p>
Driving Innovation Through Education, Research &amp; Technology Driving Innovation Through Education, Research &amp; Technology
</p> </p>
<div class="d-flex flex-wrap justify-content-center gap-3"> <div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" <i class="fa-solid fa-user-plus me-2"></i> Apply Now
class="btn btn-theme">
<i class="fa-solid fa-user-plus me-2"></i>
Apply Now
</a> </a>
<a href="/courses" <a href="/courses" class="btn btn-outline-theme">
class="btn btn-outline-theme"> <i class="fa-solid fa-book-open me-2"></i> Explore Courses
<i class="fa-solid fa-book-open me-2"></i>
Explore Courses
</a> </a>
<!-- <a href="/contact"
class="btn btn-outline-light-custom">
<i class="fa-solid fa-phone me-2"></i>
Contact Admissions
</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> <i class="fa-solid fa-phone me-2"></i> Contact Admissions
Contact Admissions </a>
</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@ -289,77 +300,90 @@ h6{
$courses = [ $courses = [
[ [
'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80', 'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80',
'title' => 'Automotive Engineering course', 'title' => 'Automotive Engineering Course',
'desc' => 'Learn vehicle design, engine technology, diagnostics and manufacturing.', 'desc' => 'Learn vehicle design, engine technology, diagnostics and manufacturing.',
'author' => 'Automotive Engineering Dept.',
'rating' => '4.9',
'students' => '1.2k students',
'badge' => 'Popular'
], ],
[ [
'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80', 'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80',
'title' => 'Mechanical Systems course', 'title' => 'Mechanical Systems Course',
'desc' => 'Study transmission systems, suspension, braking and vehicle maintenance.', 'desc' => 'Study transmission systems, suspension, braking and vehicle maintenance.',
'author' => 'Tech & Service Campus',
'rating' => '4.7',
'students' => '850 students',
'badge' => 'Bestseller'
], ],
[ [
'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80', 'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80',
'title' => 'Electric Vehicle Technology course', 'title' => 'Electric Vehicle Technology Course',
'desc' => 'Master EV batteries, powertrains, charging systems and smart mobility.', 'desc' => 'Master EV batteries, powertrains, charging systems and smart mobility.',
'author' => 'EV Research Institute',
'rating' => '4.8',
'students' => '640 students',
'badge' => 'New'
], ],
]; ];
@endphp @endphp
<div class="row g-4"> <div class="row g-4 mb-5">
@foreach($courses as $course) @foreach($courses as $course)
<div class="col-lg-4 col-md-6" padding-bottom:10px> <div class="col-lg-4 col-md-6">
<div class="card shadow-sm border-0 h-100"> <div class="card course-card h-100">
<img src="{{ $course['image'] }}" <div class="course-image-wrapper">
class="card-img-top" <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy" decoding="async">
alt="{{ $course['title'] }}" </div>
width="800"
height="230" <div class="card-body">
loading="lazy" <h4 class="course-title">{{ $course['title'] }}</h4>
decoding="async" <div class="course-author">{{ $course['author'] }}</div>
style="height:230px; object-fit:cover;">
<p class="course-short-desc">{{ $course['desc'] }}</p>
<div class="card-body text-center">
<h4 class="fw-bold"> <div class="course-meta-row">
{{ $course['title'] }} <span class="badge-bestseller">{{ $course['badge'] }}</span>
</h4> <span class="rating-star">
<i class="fas fa-star"></i> {{ $course['rating'] }}
<p class="text-muted"> </span>
{{ $course['desc'] }} <span class="rating-count">({{ $course['students'] }})</span>
</p> </div>
<a href="/courses" class="btn read-btn"> <div class="course-features">
View Course <span><i class="fas fa-tools"></i> Practical Labs</span>
</a> <span><i class="fas fa-certificate"></i> Verified Course</span>
</div>
<div class="course-footer">
<a href="/courses" class="read-btn">View Course</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
</div>
<div class="text-center">
<div style="display: flex; justify-content: center; width: 100%; "> <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
<!-- <div style="display: flex; justify-content: flex-end; width: 100%; "> --> View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
<a href="/courses" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E"> </a>
View all courses
</a>
</div>
</div> </div>
</div> </div>
</section> </section>
{{-- ===================== WHY CHOOSE US ===================== --}} {{-- ===================== WHY CHOOSE US ===================== --}}
<section class="section py-5 why-section" aria-labelledby="why-us-heading" > <section class="section py-5 why-section" aria-labelledby="why-us-heading">
<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-lg-6"> <div class="col-lg-6">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80" <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
alt="Automotive Engineering Lab" alt="Automotive Engineering Lab"
class="img-fluid rounded shadow" class="img-fluid rounded shadow-sm"
width="900" width="900"
height="600" height="600"
loading="lazy" loading="lazy"
@ -373,24 +397,19 @@ h6{
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="mb-3"> <li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i> <i class="fa-solid fa-check text-success me-2"></i> Modern Laboratories
Modern Laboratories
</li> </li>
<li class="mb-3"> <li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i> <i class="fa-solid fa-check text-success me-2"></i> Industry Qualified Lecturers
Industry Qualified Lecturers
</li> </li>
<li class="mb-3"> <li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i> <i class="fa-solid fa-check text-success me-2"></i> Hands-on Vehicle Training
Hands-on Vehicle Training
</li> </li>
<li class="mb-3"> <li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i> <i class="fa-solid fa-check text-success me-2"></i> Hybrid &amp; Electric Vehicle Research Center
Hybrid &amp; Electric Vehicle Research Center
</li> </li>
<li class="mb-3"> <li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i> <i class="fa-solid fa-check text-success me-2"></i> Internship Opportunities
Internship Opportunities
</li> </li>
</ul> </ul>
</div> </div>
@ -405,23 +424,14 @@ h6{
<h2 class="fw-bold mb-3"> <h2 class="fw-bold mb-3">
Join the Future of Automotive Engineering Join the Future of Automotive Engineering
</h2> </h2>
<p class="text-muted mb-4"> <p class="text-muted mb-4">
Shape the future with innovation, technology and practical learning. Shape the future with innovation, technology and practical learning.
</p> </p>
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
class="btn btn-theme"> <i class="fa-solid fa-user-plus me-2"></i> Apply Now
<i class="fa-solid fa-user-plus me-2"></i> </a>
Apply Now
</a>
<!-- <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-primary btn-lg">
Apply Now
</a> -->
</div> </div>
</section> </section>
@endsection @endsection