<!-- Our Instructors Section -->
<section id="instructors" class="instructors-section py-5">
<div class="container">
<!-- Section Header -->
<div class="row mb-5">
<div class="col-lg-7 mx-auto text-center">
<div class="section-header">
<span class="section-badge wow fadeInUp" data-wow-delay="0.1s">Expert Faculty</span>
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Meet Our <span class="highlight">Instructors</span></h2>
<p class="section-subtitle wow fadeInUp" data-wow-delay="0.3s">Learn from industry professionals who bring real-world experience and expertise to the classroom</p>
</div>
</div>
</div>
<!-- Instructors Grid -->
<div class="instructors-grid">
<?php
// Fetch instructors from database
$instructors = [];
$instructors_query = "SELECT u.id, u.first_name, u.last_name, u.email, u.profile_image,
u.bio, u.phone
FROM users u
WHERE u.role = 'instructor' AND u.status = 'active'
ORDER BY u.first_name ASC
LIMIT 8";
$instructors_result = safe_query($conn, $instructors_query);
if ($instructors_result && $instructors_result->num_rows > 0) {
while ($row = $instructors_result->fetch_assoc()) {
$instructors[] = $row;
}
}
// If no instructors found, use sample data
if (empty($instructors)) {
$instructors = [
[
'id' => 1,
'first_name' => 'Rajesh',
'last_name' => 'Kumar',
'designation' => 'Web Development Expert',
'bio' => 'Over 8 years of industry experience in web development and software engineering.',
'profile_image' => 'https://randomuser.me/api/portraits/men/41.jpg',
'phone' => '+91 9876543210'
],
[
'id' => 2,
'first_name' => 'Priya',
'last_name' => 'Sharma',
'designation' => 'Graphic Design Specialist',
'bio' => 'Adobe certified expert with portfolio of work for major brands.',
'profile_image' => 'https://randomuser.me/api/portraits/women/44.jpg',
'phone' => '+91 9876543211'
],
[
'id' => 3,
'first_name' => 'Amit',
'last_name' => 'Singh',
'designation' => 'Digital Marketing Guru',
'bio' => 'Former Google employee with deep expertise in SEO and SEM strategies.',
'profile_image' => 'https://randomuser.me/api/portraits/men/32.jpg',
'phone' => '+91 9876543212'
],
[
'id' => 4,
'first_name' => 'Sunita',
'last_name' => 'Patel',
'designation' => 'Programming Instructor',
'bio' => 'Computer science graduate with passion for teaching programming fundamentals.',
'profile_image' => 'https://randomuser.me/api/portraits/women/68.jpg',
'phone' => '+91 9876543213'
]
];
}
?>
<div class="row">
<?php foreach ($instructors as $index => $instructor):
// Default profile image if none
$profile_image = !empty($instructor['profile_image']) ? $instructor['profile_image'] : 'assets/img/default-avatar.png';
// Animation delay
$animation_delay = 0.1 * ($index + 2);
?>
<div class="col-lg-3 col-md-6 mb-4">
<div class="instructor-card wow fadeInUp" data-wow-delay="<?php echo $animation_delay; ?>s">
<div class="instructor-image">
<img src="<?php echo $profile_image; ?>" alt="<?php echo htmlspecialchars($instructor['first_name'] . ' ' . $instructor['last_name']); ?>" class="img-fluid">
</div>
<div class="instructor-content">
<h3 class="instructor-name"><?php echo htmlspecialchars($instructor['first_name'] . ' ' . $instructor['last_name']); ?></h3>
<p class="instructor-designation"><?php echo htmlspecialchars($instructor['designation'] ?? 'Instructor'); ?></p>
<?php if (!empty($instructor['phone'])): ?>
<p class="instructor-phone"><i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($instructor['phone']); ?></p>
<?php endif; ?>
<p class="instructor-bio"><?php echo htmlspecialchars(substr($instructor['bio'] ?? '', 0, 100) . (strlen($instructor['bio'] ?? '') > 100 ? '...' : '')); ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- View All Instructors Button -->
<div class="text-center mt-4">
<a href="instructors.php" class="btn btn-primary btn-lg btn-with-icon">
<span>View All Instructors</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Our Students Section -->
<section id="students" class="students-section py-5">
<div class="container">
<!-- Section Header -->
<div class="row mb-5">
<div class="col-lg-7 mx-auto text-center">
<div class="section-header">
<span class="section-badge wow fadeInUp" data-wow-delay="0.1s">Success Stories</span>
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Our <span class="highlight">Star</span> Students</h2>
<p class="section-subtitle wow fadeInUp" data-wow-delay="0.3s">Meet some of our successful students who have transformed their careers through our training programs</p>
</div>
</div>
</div>
<!-- Students Grid -->
<div class="students-grid">
<?php
// Fetch top students from database
$students = [];
$students_query = "SELECT u.id, u.first_name, u.last_name, u.profile_image, s.company, s.position, s.success_story, s.graduation_year
FROM users u
INNER JOIN student_successes s ON u.id = s.user_id
WHERE u.role = 'student' AND s.is_featured = 1
ORDER BY s.graduation_year DESC
LIMIT 6";
$students_result = safe_query($conn, $students_query);
if ($students_result && $students_result->num_rows > 0) {
while ($row = $students_result->fetch_assoc()) {
$students[] = $row;
}
}
// If no students found, use sample data
if (empty($students)) {
$students = [
[
'id' => 1,
'first_name' => 'Rahul',
'last_name' => 'Verma',
'profile_image' => 'https://randomuser.me/api/portraits/men/44.jpg',
'company' => 'TCS',
'position' => 'Web Developer',
'success_story' => 'After completing the web development course, I got placed at TCS as a junior web developer. The practical training helped me stand out during interviews.',
'graduation_year' => 2022
],
[
'id' => 2,
'first_name' => 'Meera',
'last_name' => 'Reddy',
'profile_image' => 'https://randomuser.me/api/portraits/women/63.jpg',
'company' => 'Infosys',
'position' => 'Graphic Designer',
'success_story' => 'The design skills I learned at Popular Computer Institute helped me secure a position at Infosys. Now I work on projects for international clients.',
'graduation_year' => 2021
],
[
'id' => 3,
'first_name' => 'Vikram',
'last_name' => 'Joshi',
'profile_image' => 'https://randomuser.me/api/portraits/men/76.jpg',
'company' => 'Wipro',
'position' => 'Software Engineer',
'success_story' => 'The programming fundamentals course gave me the confidence to apply for software engineering roles. I\'m now working at Wipro on exciting projects.',
'graduation_year' => 2021
],
[
'id' => 4,
'first_name' => 'Neha',
'last_name' => 'Gupta',
'profile_image' => 'https://randomuser.me/api/portraits/women/54.jpg',
'company' => 'Freelancer',
'position' => 'Digital Marketer',
'success_story' => 'After the digital marketing course, I started my own freelance business. Now I have clients from all over India and even some international ones!',
'graduation_year' => 2020
],
[
'id' => 5,
'first_name' => 'Sanjay',
'last_name' => 'Patel',
'profile_image' => 'https://randomuser.me/api/portraits/men/22.jpg',
'company' => 'Amazon',
'position' => 'Data Analyst',
'success_story' => 'The data analytics program prepared me well for technical interviews. I now work at Amazon analyzing customer behavior patterns.',
'graduation_year' => 2022
],
[
'id' => 6,
'first_name' => 'Anjali',
'last_name' => 'Singh',
'profile_image' => 'https://randomuser.me/api/portraits/women/26.jpg',
'company' => 'HCL',
'position' => 'UI/UX Designer',
'success_story' => 'The UI/UX design course helped me transition from graphic design to user experience design. I\'m now working at HCL Technologies.',
'graduation_year' => 2021
]
];
}
?>
<div class="row">
<?php foreach ($students as $index => $student):
// Default profile image if none
$profile_image = !empty($student['profile_image']) ? $student['profile_image'] : 'assets/img/default-avatar.png';
// Animation delay
$animation_delay = 0.1 * ($index + 2);
?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="student-card wow fadeInUp" data-wow-delay="<?php echo $animation_delay; ?>s">
<div class="student-header">
<div class="student-image">
<img src="<?php echo $profile_image; ?>" alt="<?php echo htmlspecialchars($student['first_name'] . ' ' . $student['last_name']); ?>" class="img-fluid">
</div>
<div class="student-info">
<h3 class="student-name"><?php echo htmlspecialchars($student['first_name'] . ' ' . $student['last_name']); ?></h3>
<p class="student-position"><?php echo htmlspecialchars($student['position']); ?> at <?php echo htmlspecialchars($student['company']); ?></p>
<span class="graduation-year"><i class="fas fa-graduation-cap"></i> Batch of <?php echo $student['graduation_year']; ?></span>
</div>
</div>
<div class="student-content">
<p class="success-story">"<?php echo htmlspecialchars($student['success_story']); ?>"</p>
<div class="student-footer">
<a href="alumni.php?id=<?php echo $student['id']; ?>" class="read-more">
<span>Read Full Story</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- More Success Stories Button -->
<div class="text-center mt-4">
<a href="success-stories.php" class="btn btn-primary btn-lg btn-with-icon">
<span>View More Success Stories</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<style>
/* Instructor Section Styles */
.instructors-section {
position: relative;
background-color: #ffffff;
padding: 100px 0;
overflow: hidden;
}
.instructors-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(78, 115, 223, 0.1) 0%, rgba(78, 115, 223, 0) 70%);
border-radius: 50%;
z-index: 0;
}
.instructors-section::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(28, 200, 138, 0.1) 0%, rgba(28, 200, 138, 0) 70%);
border-radius: 50%;
z-index: 0;
}
.instructor-card {
position: relative;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.instructor-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.instructor-image {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
}
.instructor-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.instructor-card:hover .instructor-image img {
transform: scale(1.1);
}
.instructor-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 20px;
opacity: 0;
transition: all 0.3s ease;
}
.instructor-card:hover .instructor-overlay {
opacity: 1;
}
.instructor-overlay .social-links {
display: flex;
gap: 10px;
}
.instructor-overlay .social-icon {
width: 35px;
height: 35px;
background-color: white;
color: #4e73df;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease;
text-decoration: none;
}
.instructor-card:hover .social-icon {
transform: translateY(0);
opacity: 1;
}
.instructor-card:hover .social-icon:nth-child(1) {
transition-delay: 0.1s;
}
.instructor-card:hover .social-icon:nth-child(2) {
transition-delay: 0.2s;
}
.instructor-card:hover .social-icon:nth-child(3) {
transition-delay: 0.3s;
}
.social-icon:hover {
background-color: #4e73df;
color: white;
transform: translateY(-5px);
}
.instructor-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.instructor-name {
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
color: #333;
}
.instructor-designation {
font-size: 14px;
color: #4e73df;
margin-bottom: 10px;
}
.instructor-phone {
font-size: 14px;
color: #6c757d;
margin-bottom: 10px;
}
.instructor-bio {
font-size: 14px;
color: #6c757d;
margin-bottom: 15px;
flex-grow: 1;
line-height: 1.6;
}
.btn-view-profile {
display: inline-flex;
align-items: center;
color: #4e73df;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
}
.btn-view-profile i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.btn-view-profile:hover i {
transform: translateX(5px);
}
/* Students Section Styles */
.students-section {
position: relative;
background-color: #f8f9fa;
padding: 100px 0;
overflow: hidden;
}
.students-section::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(231, 74, 59, 0.1) 0%, rgba(231, 74, 59, 0) 70%);
border-radius: 50%;
z-index: 0;
}
.student-card {
position: relative;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.student-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.student-header {
display: flex;
padding: 20px;
border-bottom: 1px solid #f0f2f5;
}
.student-image {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.student-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.student-card:hover .student-image img {
transform: scale(1.1);
}
.student-info {
flex: 1;
}
.student-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
color: #333;
}
.student-position {
font-size: 14px;
color: #4e73df;
margin-bottom: 5px;
}
.graduation-year {
font-size: 13px;
color: #6c757d;
display: flex;
align-items: center;
}
.graduation-year i {
color: #f6c23e;
margin-right: 5px;
}
.student-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.success-story {
font-size: 14px;
color: #6c757d;
margin-bottom: 20px;
flex-grow: 1;
line-height: 1.6;
font-style: italic;
}
.student-footer {
margin-top: auto;
}
.read-more {
display: inline-flex;
align-items: center;
color: #4e73df;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
.read-more i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.read-more:hover i {
transform: translateX(5px);
}
/* Responsive */
@media (max-width: 991px) {
.instructors-section,
.students-section {
padding: 70px 0;
}
}
@media (max-width: 767px) {
.instructors-section,
.students-section {
padding: 50px 0;
}
.student-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.student-image {
margin-right: 0;
margin-bottom: 15px;
}
}
</style>
