File: /home/durgeshpandey215/public_html/ipsol.skilladders.com/index_backup_mar2.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPsol - Experts in IT Networking & Security Training</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4', // Updated to corporate blue
dark: '#1E1E1E',
light: '#F5F5F5',
yellow: '#FDCC0D'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-scroll {
display: flex;
width: max-content; /* Ensures content doesn't wrap and calculated width is correct */
animation: scroll 30s linear infinite; /* Slower 30s for better visibility */
}
/* Pausing animation on hover is a nice touch for accessibility */
.animate-scroll:hover {
animation-play-state: paused;
}
/* Hero Slider Animations */
.swiper-slide-active .animate-slide-content {
animation: slideUpFade 1s ease-out forwards 0.3s;
}
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Custom Swiper Pagination for Hero */
.heroSwiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
opacity: 1;
transition: all 0.3s;
}
.heroSwiper .swiper-pagination-bullet-active {
width: 30px;
border-radius: 6px;
background: #fff;
}
</style>
<!-- FontAwesome -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Quiz Scripts -->
<script language="javascript" type="text/javascript">
var exam_pos=0, test, Header, question, choice, choices, chA, chB, chC,correct=0;
var questions = [];
<?php
$has_questions = false;
if ($con) {
$sql1 = "SELECT * FROM `exam_website_details` where id = 1";
$result1 = mysqli_query($con,$sql1);
if ($result1 && mysqli_num_rows($result1) > 0) {
$row1 = mysqli_fetch_array($result1, MYSQLI_ASSOC);
$limit = isset($row1['attempt_count']) ? $row1['attempt_count'] : 5;
$sql2 = "SELECT * FROM `exam_website_questions` where attempt_id = 1 ORDER BY RAND() LIMIT ".$limit;
$result2 = mysqli_query($con,$sql2);
if ($result2 && mysqli_num_rows($result2) > 0) {
echo "questions = [";
while($row2 = mysqli_fetch_assoc($result2)){
$q = str_replace(array("\r", "\n"), '', addslashes($row2['question']));
$a = addslashes($row2['option_a']);
$b = addslashes($row2['option_b']);
$c = addslashes($row2['option_c']);
$d = addslashes($row2['option_d']);
echo "['$q', '$a', '$b', '$c', '$d', '".$row2['answer']."'],";
}
echo "];";
$has_questions = true;
}
}
}
if (!$has_questions) {
// Fallback Questions if DB is empty or connection fails
echo "questions = [
['What usually the port number of SMTP ?','25','21','110','143','25'],
['Which protocol is used for secure communication over a computer network?','HTTP','FTP','HTTPS','SMTP','HTTPS'],
['What does IP stand for?','Internet Protocol','Internet Provider','Internal Port','Interim Packet','Internet Protocol'],
['Which layer of the OSI model does a router work at?','Layer 1','Layer 2','Layer 3','Layer 4','Layer 3'],
['What is the maximum length of a convenient CAT5e cable?','50m','100m','200m','500m','100m']
];";
}
?>
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test =_("test");
if(exam_pos >= questions.length)
{
test.innerHTML="<div class='text-center py-4'><h2 class='text-2xl font-bold text-green-600'>You got "+correct+" of "+questions.length+" questions correct</h2></div>";
_("Header").innerHTML="Test completed";
exam_pos=0;
correct=0;
return false;
}
_("Header").innerHTML="Question "+(exam_pos+1)+" of "+questions.length
question = questions[exam_pos][0];
chA = questions[exam_pos][1];
chB = questions[exam_pos][2];
chC = questions[exam_pos][3];
chD = questions[exam_pos][4];
test.innerHTML = "<div class='mb-4'><h2 class='text-xl font-semibold'>"+question+"</h2></div>";
test.innerHTML += "<div class='mb-2'><label class='inline-flex items-center space-x-2 cursor-pointer'><input type='radio' name='choices' value='A' class='ans_opt text-[#2957A4] form-radio' id='A'> <span>"+chA+"</span></label></div>";
test.innerHTML += "<div class='mb-2'><label class='inline-flex items-center space-x-2 cursor-pointer'><input type='radio' name='choices' value='B' class='ans_opt text-[#2957A4] form-radio' id='B'> <span>"+chB+"</span></label></div>";
test.innerHTML += "<div class='mb-2'><label class='inline-flex items-center space-x-2 cursor-pointer'><input type='radio' name='choices' value='C' class='ans_opt text-[#2957A4] form-radio' id='C'> <span>"+chC+"</span></label></div>";
test.innerHTML += "<div class='mb-2'><label class='inline-flex items-center space-x-2 cursor-pointer'><input type='radio' name='choices' value='D' class='ans_opt text-[#2957A4] form-radio' id='D'> <span>"+chD+"</span></label></div>";
test.innerHTML += "<div class='mt-6'><button onclick='checkans()' class='bg-[#2957A4] text-white font-bold py-2 px-6 rounded hover:bg-blue-900 w-full md:w-auto'>Submit Answer</button></div>";
}
function checkans() {
choices = document.getElementsByName("choices");
var ans_opt = document.querySelector(".ans_opt:checked")?.value;
if(ans_opt != null ){
for (var i = 0; i<choices.length;i++) {
if(choices[i].checked)
{
choice=choices[i].value;
}
}
if(choice==questions[exam_pos][5])
{
correct++;
}
exam_pos++;
renderQuestion() ;
}else{
alert('Please Select Option !');
}
}
// window.addEventListener("load",renderQuestion,false); // Do not auto load, let user click start
</script>
</head>
<body class="bg-white text-gray-800 antialiased font-sans">
<!-- Navigation Bar -->
<?php include 'header_v2.php'; ?>
<!-- Hero Section -->
<style>
/* Modern Hero Pagination Fix */
.heroSwiper .swiper-pagination-bullet {
background-color: #cbd5e1 !important;
opacity: 1 !important;
width: 10px;
height: 10px;
transition: all 0.3s ease;
}
.heroSwiper .swiper-pagination-bullet-active {
background-color: #2957A4 !important;
width: 35px !important;
border-radius: 6px !important;
}
/* Reveal Animation */
.animate-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<div class="relative bg-slate-50 overflow-hidden border-b border-gray-200">
<!-- Background Elements (Modern & Dynamic) -->
<div class="absolute inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-gradient-to-br from-blue-300/20 to-cyan-300/20 rounded-full blur-[100px] animate-pulse"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[700px] h-[700px] bg-gradient-to-tr from-purple-300/20 to-pink-300/20 rounded-full blur-[100px] opacity-70"></div>
<div class="absolute inset-0 bg-[url('img/grid.svg')] bg-center opacity-[0.3]" style="background-image: radial-gradient(#94a3b8 1px, transparent 1px); background-size: 32px 32px;"></div>
</div>
<div class="swiper heroSwiper w-full relative z-10">
<div class="swiper-wrapper">
<!-- Slide 1: Career / Main -->
<div class="swiper-slide">
<div class="min-h-[600px] lg:h-[650px] flex items-center pt-10 pb-20 lg:py-0">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Text Content -->
<div class="space-y-8 text-center lg:text-left order-2 lg:order-1 relative z-20 animate-in-up" style="animation-delay: 0.1s;">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-blue-100 shadow-sm text-blue-700 text-sm font-bold mx-auto lg:mx-0 backdrop-blur-sm">
<span class="relative flex h-2.5 w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-600"></span>
</span>
<span>#1 Networking Institute in Mumbai</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-slate-900 leading-[1.05] tracking-tight drop-shadow-sm">
Forge Your Path in <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#2957A4] to-blue-500">Network Engineering</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
Join India's elite <strong class="text-slate-900">Cisco Authorized</strong> training center. Master real-world skills with expert mentors and 100% placement support.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4">
<a href="admission.php" class="px-8 py-4 bg-[#2957A4] hover:bg-blue-800 text-white font-bold rounded-xl transition-all shadow-xl shadow-blue-900/20 hover:-translate-y-1 hover:shadow-blue-900/30 flex items-center justify-center gap-2 text-lg group">
Start Your Journey <i class="fa fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="all-courses.php" class="px-8 py-4 bg-white hover:bg-gray-50 text-slate-700 font-bold rounded-xl border border-gray-200 transition-all shadow-sm hover:shadow-md flex items-center justify-center text-lg">
Explore Courses
</a>
</div>
<div class="flex items-center justify-center lg:justify-start gap-8 pt-6 opacity-90">
<div class="flex items-center gap-2">
<div class="flex text-yellow-500 text-sm"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div>
<span class="font-bold text-slate-700 text-sm">4.9/5 Rating</span>
</div>
<div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div>
<div class="font-bold text-slate-700 text-sm flex items-center gap-2"><i class="fa fa-users text-blue-500"></i> 10k+ Alumni</div>
</div>
</div>
<!-- Image Content -->
<div class="order-1 lg:order-2 relative px-4 lg:px-0 animate-in-up flex justify-center" style="animation-delay: 0.3s;">
<!-- Decorative Background Blobs -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[500px] aspect-square bg-gradient-to-tr from-blue-200 to-indigo-100 rounded-full blur-3xl -z-10 opacity-60"></div>
<div class="relative group w-full max-w-[380px] sm:max-w-[420px] lg:max-w-[480px]">
<!-- Designer Offset Shadow -->
<div class="absolute top-4 left-4 lg:top-6 lg:left-6 w-full h-full bg-[#2957A4]/15 rounded-[2.5rem] group-hover:-translate-x-2 group-hover:-translate-y-2 transition-transform duration-500 -z-10"></div>
<!-- Main Image Card -->
<div class="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-900/15 bg-white isolate ring-1 ring-slate-200/50 aspect-[4/3] lg:aspect-[5/4]">
<img src="img/hero/IMG_20260201_121431.jpg.jpeg" alt="Networking Lab" class="absolute inset-0 w-full h-full object-cover object-center transform group-hover:scale-[1.03] transition duration-700 ease-out">
<!-- Bottom Gradient for Text Readability -->
<div class="absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-slate-900/90 via-slate-900/30 to-transparent pointer-events-none mix-blend-multiply"></div>
<!-- Floating Card 1 -->
<div class="hidden lg:block absolute top-8 -left-8 bg-white/95 backdrop-blur-md px-5 py-3 rounded-2xl shadow-xl border border-slate-100 animate-bounce" style="animation-duration: 4s;">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-brand-blue">
<i class="fa fa-server text-lg"></i>
</div>
<div>
<div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Lab Status</div>
<div class="text-slate-900 font-bold text-sm">Live Access</div>
</div>
</div>
</div>
<!-- Floating Card 2 -->
<div class="absolute bottom-6 left-6 right-6 bg-white/10 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-lg">
<div class="relative flex items-center justify-between">
<div class="text-white">
<div class="text-xs text-blue-200 uppercase tracking-wider font-bold mb-1">Cisco Authorized</div>
<div class="text-xl font-bold flex items-center gap-2">
CCIE Training
<i class="fa fa-check-circle text-emerald-400"></i>
</div>
</div>
<div class="h-10 w-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-brand-blue shadow-lg cursor-pointer hover:scale-110 transition">
<i class="fa fa-play ml-1"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2: Corporate -->
<div class="swiper-slide">
<div class="min-h-[600px] lg:h-[650px] flex items-center pt-10 pb-20 lg:py-0">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Text Content -->
<div class="space-y-8 text-center lg:text-left order-2 lg:order-1 relative z-20 animate-in-up">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-purple-100 shadow-sm text-purple-700 text-sm font-bold mx-auto lg:mx-0 backdrop-blur-sm">
<i class="fa fa-briefcase"></i>
<span>Enterprise Solutions</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-slate-900 leading-[1.05] tracking-tight">
Empower Your <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">IT Workforce</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
Scale your team's capabilities with customized corporate workshops. From Cloud Computing to Cybersecurity, we upgrade your business.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4">
<a href="contact.php" class="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl transition-all shadow-xl shadow-purple-900/20 hover:-translate-y-1 hover:shadow-purple-900/30 flex items-center justify-center gap-2 text-lg">
Get a Custom Quote <i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="flex items-center justify-center lg:justify-start gap-4 pt-4">
<div class="bg-white px-6 py-4 rounded-xl border border-gray-100 shadow-lg shadow-gray-100 text-center">
<div class="text-3xl font-black text-slate-900">150+</div>
<div class="text-[11px] text-slate-500 uppercase font-bold tracking-wide mt-1">Clients</div>
</div>
<div class="bg-white px-6 py-4 rounded-xl border border-gray-100 shadow-lg shadow-gray-100 text-center">
<div class="text-3xl font-black text-slate-900">500+</div>
<div class="text-[11px] text-slate-500 uppercase font-bold tracking-wide mt-1">Workshops</div>
</div>
</div>
</div>
<!-- Image Content -->
<div class="order-1 lg:order-2 relative px-4 lg:px-0 animate-in-up flex justify-center" style="animation-delay: 0.2s;">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[500px] aspect-square bg-gradient-to-tr from-purple-200 to-pink-100 rounded-full blur-3xl -z-10 opacity-60"></div>
<div class="relative group w-full max-w-[380px] sm:max-w-[420px] lg:max-w-[480px]">
<!-- Designer Offset Shadow -->
<div class="absolute top-4 left-4 lg:top-6 lg:left-6 w-full h-full bg-purple-600/15 rounded-[2.5rem] group-hover:-translate-x-2 group-hover:-translate-y-2 transition-transform duration-500 -z-10"></div>
<!-- Main Image Card -->
<div class="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-900/15 bg-white isolate ring-1 ring-slate-200/50 aspect-[4/3] lg:aspect-[5/4]">
<img src="img/hero/IMG_20260201_122846.jpg.jpeg" alt="Corporate Training" class="absolute inset-0 w-full h-full object-cover object-center transform group-hover:scale-[1.03] transition duration-700 ease-out">
<!-- Bottom Gradient -->
<div class="absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-[#2d1b4e]/90 via-[#2d1b4e]/30 to-transparent pointer-events-none mix-blend-multiply"></div>
<!-- Content Overlay -->
<div class="absolute bottom-6 left-6 right-6 text-white text-center">
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-lg inline-block mb-3 border border-white/20 text-xs font-bold tracking-wider uppercase">
Upskilling Program
</div>
<div class="text-2xl font-bold drop-shadow-md">Leading Tech Partners</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Placement -->
<div class="swiper-slide">
<div class="min-h-[600px] lg:h-[650px] flex items-center pt-10 pb-20 lg:py-0">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Text Content -->
<div class="space-y-8 text-center lg:text-left order-2 lg:order-1 relative z-20 animate-in-up">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-emerald-100 shadow-sm text-emerald-700 text-sm font-bold mx-auto lg:mx-0 backdrop-blur-sm">
<i class="fa fa-briefcase"></i>
<span>100% Placement Assistance</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-slate-900 leading-[1.05] tracking-tight">
Train Here, <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500">Get Hired</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
Launch your career with confidence. Our dedicated placement cell connects you with top-tier companies upon certification.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4">
<a href="placement.php" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl transition-all shadow-xl shadow-emerald-900/20 hover:-translate-y-1 hover:shadow-emerald-900/30 flex items-center justify-center gap-2 text-lg">
View Placements <i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Image Content -->
<div class="order-1 lg:order-2 relative px-4 lg:px-0 animate-in-up flex justify-center" style="animation-delay: 0.2s;">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[500px] aspect-square bg-gradient-to-tr from-emerald-200 to-teal-100 rounded-full blur-3xl -z-10 opacity-60"></div>
<div class="relative group w-full max-w-[380px] sm:max-w-[420px] lg:max-w-[480px]">
<!-- Designer Offset Shadow -->
<div class="absolute top-4 left-4 lg:top-6 lg:left-6 w-full h-full bg-emerald-600/15 rounded-[2.5rem] group-hover:-translate-x-2 group-hover:-translate-y-2 transition-transform duration-500 -z-10"></div>
<!-- Main Image Card -->
<div class="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-900/15 bg-white isolate ring-1 ring-slate-200/50 aspect-[4/3] lg:aspect-[5/4]">
<img src="img/hero/IMG_20260201_123521.jpg.jpeg" alt="Placement Success" class="absolute inset-0 w-full h-full object-cover object-center transform group-hover:scale-[1.03] transition duration-700 ease-out">
<!-- Bottom Gradient -->
<div class="absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-slate-900/90 via-slate-900/30 to-transparent pointer-events-none mix-blend-multiply"></div>
<!-- Floating Badge -->
<div class="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-lg z-20">
<div class="flex items-center gap-4">
<div class="bg-emerald-100 p-3 rounded-full text-emerald-600 flex-shrink-0"><i class="fa fa-thumbs-up text-lg"></i></div>
<div>
<div class="text-[10px] text-slate-500 uppercase tracking-wider font-bold mb-1">Success Rate</div>
<div class="text-slate-900 font-extrabold text-lg leading-tight">High Placement Record</div>
</div>
<div class="ml-auto">
<i class="fa fa-check-circle text-2xl text-emerald-500 shadow-sm rounded-full"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination !bottom-3 !w-full flex justify-center"></div>
</div>
</div>
<div class="bg-white border-b border-gray-200 py-8 md:py-16 overflow-hidden">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header with Controls -->
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
<p class="text-sm font-bold text-gray-400 uppercase tracking-widest leading-none">Trusted by industry leaders</p>
<!-- Controls (Top Right) -->
<div class="flex items-center gap-2">
<button onclick="document.getElementById('brand-slider').scrollBy({left: -300, behavior: 'smooth'})" class="w-10 h-10 bg-white border border-gray-200 shadow-sm text-gray-600 rounded-full flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 transition focus:outline-none">
<i class="fa fa-chevron-left"></i>
</button>
<button onclick="document.getElementById('brand-slider').scrollBy({left: 300, behavior: 'smooth'})" class="w-10 h-10 bg-white border border-gray-200 shadow-sm text-gray-600 rounded-full flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 transition focus:outline-none">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<!-- Slider Track with Duplicate Content for Loop -->
<div id="brand-slider" class="flex items-center space-x-12 lg:space-x-20 overflow-x-auto hide-scrollbar scroll-smooth px-4 py-4">
<!-- Set 1 -->
<img src="img/brand-img/ibm.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="IBM">
<img src="img/brand-img/coforge.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Coforge">
<img src="img/brand-img/hpe.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="HPE">
<img src="img/brand-img/infosys.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Infosys">
<img src="img/brand-img/Juniper.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Juniper">
<img src="img/brand-img/Kaizenglobe.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Kaizen">
<img src="img/brand-img/mindtree.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Mindtree">
<img src="img/brand-img/mphasis.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Mphasis">
<img src="img/brand-img/nvidia.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Nvidia">
<img src="img/brand-img/oracle.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Oracle">
<img src="img/brand-img/sap.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="SAP">
<img src="img/brand-img/techmahindra.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Tech Mahindra">
<img src="img/brand-img/tencent.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Tencent">
<img src="img/brand-img/vmware.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="VMware">
<img src="img/brand-img/wipro.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Wipro">
<img src="img/brand-img/hexaware.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Hexaware">
<!-- Set 2 (Duplicate for seamless loop) -->
<img src="img/brand-img/ibm.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="IBM">
<img src="img/brand-img/coforge.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Coforge">
<img src="img/brand-img/hpe.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="HPE">
<img src="img/brand-img/infosys.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Infosys">
<img src="img/brand-img/Juniper.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Juniper">
<img src="img/brand-img/Kaizenglobe.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Kaizen">
<img src="img/brand-img/mindtree.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Mindtree">
<img src="img/brand-img/mphasis.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Mphasis">
<img src="img/brand-img/nvidia.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Nvidia">
<img src="img/brand-img/oracle.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Oracle">
<img src="img/brand-img/sap.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="SAP">
<img src="img/brand-img/techmahindra.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Tech Mahindra">
<img src="img/brand-img/tencent.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Tencent">
<img src="img/brand-img/vmware.jpg" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="VMware">
<img src="img/brand-img/wipro.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Wipro">
<img src="img/brand-img/hexaware.png" class="h-10 md:h-14 w-auto object-contain hover:scale-110 transition duration-300 shrink-0" alt="Hexaware">
</div>
</div>
<!-- Infinite Loop Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.getElementById('brand-slider');
const sliderContainer = slider.parentElement;
let intervalId;
// The scroll distance is roughly half the scrollWidth (since we duplicated content)
// We need to wait for images to load to get accurate width, so we set a timeout or check load
function checkLoop() {
const maxScroll = slider.scrollWidth;
// The midpoint is roughly halfway. When we cross it, we are in the "duplicate" zone.
// We reset to the "original" zone.
const halfWidth = maxScroll / 2;
if (slider.scrollLeft >= halfWidth) {
// Instant snap back to start
slider.style.scrollBehavior = 'auto'; // Disable smooth for snap
slider.scrollLeft = slider.scrollLeft - halfWidth;
slider.style.scrollBehavior = 'smooth'; // Re-enable smooth
} else if (slider.scrollLeft <= 0) {
// Handle case where user manually scrolls backwards past 0
slider.style.scrollBehavior = 'auto';
slider.scrollLeft = slider.scrollLeft + halfWidth;
slider.style.scrollBehavior = 'smooth';
}
}
slider.addEventListener('scroll', () => {
// Check for loop on manual scroll too, but use a small throttle/debounce if needed (optional)
// For simplicity, we check immediately but we need to avoid fighting the auto-scroll animation
// So specific loop logic is inside the interval mostly, but passive loop check is good.
// However, 'scroll' fires constantly. The snap needs to be precise.
// We will rely on the interval for the 'forward' motion and separate check logic.
// For manual seamlessness, ideally we check:
const maxScroll = slider.scrollWidth;
const halfWidth = maxScroll / 2;
if (slider.scrollLeft >= halfWidth - 50) { // Buffer
slider.style.scrollBehavior = 'auto';
slider.scrollLeft = 0; // Snap to 0 + offset if needed
// Better: slider.scrollLeft = slider.scrollLeft - halfWidth;
slider.scrollLeft = slider.scrollLeft - halfWidth;
slider.style.scrollBehavior = 'smooth';
}
});
function startAutoScroll() {
if(intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
slider.scrollBy({left: 300, behavior: 'smooth'});
}, 3000);
}
function stopAutoScroll() {
clearInterval(intervalId);
}
startAutoScroll();
sliderContainer.addEventListener('mouseenter', stopAutoScroll);
sliderContainer.addEventListener('mouseleave', startAutoScroll);
slider.addEventListener('touchstart', stopAutoScroll);
slider.addEventListener('touchend', () => setTimeout(startAutoScroll, 3000));
});
</script>
</div>
</div>
<!-- Quiz Section (Brand Aligned) -->
<div class="relative overflow-hidden py-5 md:py-5 bg-gradient-to-br from-blue-50 via-white to-blue-50 border-t border-b border-blue-100">
<!-- Brand Colored Ambient Light -->
<div class="absolute top-0 left-0 w-full h-100px overflow-hidden z-0">
<div class="absolute top-10 left-10 w-64 h-64 bg-blue-200/40 rounded-full mix-blend-multiply filter blur-3xl opacity-60 animate-blob"></div>
<div class="absolute bottom-10 right-10 w-64 h-64 bg-cyan-200/40 rounded-full mix-blend-multiply filter blur-3xl opacity-60 animate-blob animation-delay-2000"></div>
</div>
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="inline-block mb-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-[#2957A4] tracking-wider uppercase">
<span class="w-2 h-2 bg-[#2957A4] rounded-full mr-2 animate-pulse"></span>
Challenge Yourself
</span>
</div>
<h2 class="text-3xl md:text-5xl font-extrabold text-gray-900 mb-6 tracking-tight">
Test Your <span class="text-[#2957A4] relative">
Knowledge
<svg class="absolute w-full h-3 -bottom-1 left-0 text-blue-200 -z-10" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M0 5 Q 50 10 100 5 L 100 0 Q 50 5 0 0 Z" fill="currentColor"/>
</svg>
</span>
</h2>
<p class="text-gray-600 text-lg md:text-xl mb-10 font-medium max-w-2xl mx-auto">
Demo Exam to test your skills. Are you ready to prove your expertise?
</p>
<button onclick="document.getElementById('quiz-modal').classList.remove('hidden'); renderQuestion();" class="group relative inline-flex items-center justify-center px-10 py-4 text-base md:text-lg font-bold text-white transition-all duration-300 bg-[#2957A4] rounded-full shadow-lg hover:bg-blue-900 hover:shadow-blue-600/30 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2957A4]">
<span>Exam Start</span>
<i class="fa fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
</div>
<!-- Quiz Modal -->
<div id="quiz-modal" class="fixed inset-0 bg-black bg-opacity-75 z-[100] hidden flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-2xl max-w-lg w-full p-6 relative">
<button onclick="document.getElementById('quiz-modal').classList.add('hidden')" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
<i class="fa fa-times text-xl"></i>
</button>
<div class="text-center mb-6 border-b border-gray-100 pb-4">
<h2 class="text-2xl font-bold text-gray-800">Test Your Knowledge</h2>
<p class="text-gray-500" id="Header">Demo Exam</p>
</div>
<div id="test">
<div class="text-center py-8">
<button onclick="renderQuestion()" class="bg-[#2957A4] text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-900 transition">Start Exam Now</button>
</div>
</div>
</div>
</div>
<!-- Course Exploration Section -->
<div class="bg-white py-10 md:py-5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl md:text-3xl font-bold mb-4">Explore Top Courses</h2>
<p class="text-lg text-gray-600 mb-10 max-w-2xl">Master the latest technologies with our comprehensive training programs designed for various IT roles.</p>
<!-- Tabs -->
<div class="border-b border-gray-200 mb-8 overflow-x-auto">
<div class="flex space-x-8 pb-3 min-w-max" id="courseTabs">
<button data-filter="all" class="tab-btn text-[#2957A4] font-bold border-b-2 border-[#2957A4] pb-3 transition-colors">All Courses</button>
<button data-filter="Cisco" class="tab-btn text-gray-500 hover:text-gray-900 font-medium pb-3 border-b-2 border-transparent hover:border-gray-300 transition-colors">Cisco</button>
<button data-filter="Security" class="tab-btn text-gray-500 hover:text-gray-900 font-medium pb-3 border-b-2 border-transparent hover:border-gray-300 transition-colors">Security</button>
<button data-filter="Cloud" class="tab-btn text-gray-500 hover:text-gray-900 font-medium pb-3 border-b-2 border-transparent hover:border-gray-300 transition-colors">Cloud</button>
<button data-filter="Hardware" class="tab-btn text-gray-500 hover:text-gray-900 font-medium pb-3 border-b-2 border-transparent hover:border-gray-300 transition-colors">Hardware</button>
</div>
</div>
<!-- Course Grid (Slider content replacement) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Course Card 1 -->
<a href="course/ccna-training.php" class="course-item group block" data-category="Cisco">
<div class="overflow-hidden rounded-xl mb-3 relative shadow-sm border border-gray-100">
<img src="img/course_img/ccna routing and switching rraining.jpg" onerror="this.src='https://placehold.co/600x400?text=CCNA+Training'" class="w-full h-48 object-cover transform group-hover:scale-105 transition duration-500" alt="CCNA">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
</div>
<div class="flex items-center space-x-2 text-xs text-gray-500 mb-2">
<span class="bg-blue-50 text-blue-600 font-semibold px-2 py-0.5 rounded">Cisco</span>
<span><i class="fa fa-clock-o"></i> 40 Hours</span>
</div>
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1 group-hover:text-blue-600 transition">CCNA (Routing & Switching)</h3>
<p class="text-sm text-gray-500 mb-2 line-clamp-2">Build a strong foundation in networking concepts and skills.</p>
<div class="flex items-center text-amber-400 text-xs mb-3">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
<span class="text-gray-400 ml-1">(5.0)</span>
</div>
</a>
<!-- Course Card 2 -->
<a href="course/ccnp-rs-training.php" class="course-item group block" data-category="Cisco">
<div class="overflow-hidden rounded-xl mb-3 relative shadow-sm border border-gray-100">
<img src="img/course_img/ccnp-enterprise-training.jpg" onerror="this.src='https://placehold.co/600x400?text=CCNP+Enterprise'" class="w-full h-48 object-cover transform group-hover:scale-105 transition duration-500" alt="CCNP">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
</div>
<div class="flex items-center space-x-2 text-xs text-gray-500 mb-2">
<span class="bg-blue-50 text-blue-600 font-semibold px-2 py-0.5 rounded">Cisco</span>
<span><i class="fa fa-clock-o"></i> 60 Hours</span>
</div>
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1 group-hover:text-blue-600 transition">CCNP Enterprise</h3>
<p class="text-sm text-gray-500 mb-2 line-clamp-2">Advanced routing, switching, and troubleshooting skills.</p>
<div class="flex items-center text-amber-400 text-xs mb-3">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i>
<span class="text-gray-400 ml-1">(4.8)</span>
</div>
</a>
<!-- Course Card 3 -->
<a href="course/aws-training-mumbai.php" class="course-item group block" data-category="Cloud">
<div class="overflow-hidden rounded-xl mb-3 relative shadow-sm border border-gray-100">
<img src="img/course_img/AWS-training-course.jpg" onerror="this.src='https://placehold.co/600x400?text=AWS+Architect'" class="w-full h-48 object-cover transform group-hover:scale-105 transition duration-500" alt="AWS">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
</div>
<div class="flex items-center space-x-2 text-xs text-gray-500 mb-2">
<span class="bg-purple-50 text-purple-600 font-semibold px-2 py-0.5 rounded">Cloud</span>
<span><i class="fa fa-clock-o"></i> 35 Hours</span>
</div>
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1 group-hover:text-blue-600 transition">AWS Certified Solutions Architect</h3>
<p class="text-sm text-gray-500 mb-2 line-clamp-2">Design and deploy scalable systems on Amazon Web Services.</p>
<div class="flex items-center text-amber-400 text-xs mb-3">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
<span class="text-gray-400 ml-1">(4.9)</span>
</div>
</a>
<!-- Course Card 4 -->
<a href="course/ethical-hacking-training-in-mumbai.php" class="course-item group block" data-category="Security">
<div class="overflow-hidden rounded-xl mb-3 relative shadow-sm border border-gray-100">
<img src="img/course_img/Ethical-Hacking.jpg" onerror="this.src='https://placehold.co/600x400?text=Ethical+Hacking'" class="w-full h-48 object-cover transform group-hover:scale-105 transition duration-500" alt="CEH">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
</div>
<div class="flex items-center space-x-2 text-xs text-gray-500 mb-2">
<span class="bg-red-50 text-red-600 font-semibold px-2 py-0.5 rounded">Security</span>
<span><i class="fa fa-clock-o"></i> 45 Hours</span>
</div>
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1 group-hover:text-blue-600 transition">Ethical Hacking (CEH)</h3>
<p class="text-sm text-gray-500 mb-2 line-clamp-2">Learn how to scan, test, hack and secure your own systems.</p>
<div class="flex items-center text-amber-400 text-xs mb-3">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i>
<span class="text-gray-400 ml-1">(4.7)</span>
</div>
</a>
</div>
<div class="mt-12 text-center">
<a href="all-courses.php" class="inline-flex items-center justify-center border-2 border-gray-900 text-gray-900 font-bold py-3 px-8 rounded-full hover:bg-gray-900 hover:text-white transition duration-300">View All Courses</a>
</div>
</div>
</div>
<!-- About Us - Integrated Content -->
<div class="bg-white py-10 md:py-10">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-16 items-center">
<!-- Expanded Carousel Images (Simulated with Grid for modern look, or use standard image) -->
<div class="lg:w-1/2">
<div class="grid grid-cols-2 gap-4">
<img src="img/hero/IMG_20260201_121808.jpg.jpeg" class="rounded-2xl shadow-lg w-full h-48 object-cover transform translate-y-4" alt="Lab 1" onerror="this.src='https://via.placeholder.com/300'">
<img src="img/hero/IMG_20260201_122755.jpg.jpeg" class="rounded-2xl shadow-lg w-full h-48 object-cover" alt="Lab 2" onerror="this.src='https://via.placeholder.com/300'">
<img src="img/hero/IMG_20260201_123416.jpg.jpeg" class="rounded-2xl shadow-lg w-full h-48 object-cover transform translate-y-4" alt="Lab 3" onerror="this.src='https://via.placeholder.com/300'">
<img src="img/hero/IMG_20260201_123624.jpg.jpeg" class="rounded-2xl shadow-lg w-full h-48 object-cover" alt="Lab 4" onerror="this.src='https://via.placeholder.com/300'">
</div>
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-900">Experts In IT Networking & Administration Training</h2>
<div class="space-y-4 text-lg text-gray-600">
<p>
IP Solutions is the premier destination for authorized Cisco training in Mumbai. We provide comprehensive bootcamps for <strong>CCIE (R&S, Voice, Security, Service Provider)</strong>, CCNP, and CCNA certifications.
</p>
<p>
Our state-of-the-art labs and expert instructors ensure you gain hands-on experience with real-world scenarios. Whether you are a beginner or looking to advance your career, our tailored courses are designed to help you succeed.
</p>
</div>
<div class="mt-8 flex gap-4">
<a href="about-us.php" class="inline-block bg-gray-900 text-white font-bold py-3 px-8 rounded-lg hover:bg-gray-800 transition shadow-lg">Know More About Us</a>
<a href="admission.php" class="inline-block bg-white text-gray-900 border-2 border-gray-900 font-bold py-3 px-8 rounded-lg hover:bg-gray-50 transition">Admission</a>
</div>
</div>
</div>
</div>
</div>
<!-- Stats Section (Premium Floating Panel) -->
<div class="bg-white py-10 md:py-10 relative font-sans">
<div class="max-w-[1300px] mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl md:text-5xl font-extrabold text-[#00062F] mb-6 tracking-tight">Empowering Careers Since Inception</h2>
<p class="text-gray-600 text-lg md:text-xl font-medium">Our numbers speak for the quality and trust we have built over the years.</p>
</div>
<!-- Floating Gradient Panel -->
<div class="relative bg-gradient-to-r from-[#2957A4] to-blue-700 rounded-[2.5rem] p-8 md:p-5 shadow-2xl overflow-hidden isolate">
<!-- Decorative Glows -->
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-blue-400 rounded-full mix-blend-overlay filter blur-[100px] opacity-30"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-cyan-400 rounded-full mix-blend-overlay filter blur-[100px] opacity-30"></div>
<!-- Pattern -->
<div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-0 lg:divide-x divide-white/10 relative z-10">
<!-- Stat 1 -->
<div class="flex flex-col items-center justify-center p-4 group">
<div class="mb-4 relative">
<span class="absolute inset-0 bg-blue-400 blur-xl opacity-20 group-hover:opacity-40 transition"></span>
<div class="relative w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 flex items-center justify-center text-white text-2xl group-hover:scale-110 transition-transform duration-300">
<i class="fa fa-users"></i>
</div>
</div>
<h3 class="text-5xl md:text-6xl font-black text-white tracking-tight mb-2">35k<span class="text-blue-300 text-4xl">+</span></h3>
<p class="text-blue-100 font-medium text-sm uppercase tracking-widest">Students Trained</p>
</div>
<!-- Stat 2 -->
<div class="flex flex-col items-center justify-center p-4 group">
<div class="mb-4 relative">
<span class="absolute inset-0 bg-cyan-400 blur-xl opacity-20 group-hover:opacity-40 transition"></span>
<div class="relative w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 flex items-center justify-center text-white text-2xl group-hover:scale-110 transition-transform duration-300">
<i class="fa fa-building"></i>
</div>
</div>
<h3 class="text-5xl md:text-6xl font-black text-white tracking-tight mb-2">150<span class="text-blue-300 text-4xl">+</span></h3>
<p class="text-blue-100 font-medium text-sm uppercase tracking-widest">Corporate Clients</p>
</div>
<!-- Stat 3 -->
<div class="flex flex-col items-center justify-center p-4 group">
<div class="mb-4 relative">
<span class="absolute inset-0 bg-indigo-400 blur-xl opacity-20 group-hover:opacity-40 transition"></span>
<div class="relative w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 flex items-center justify-center text-white text-2xl group-hover:scale-110 transition-transform duration-300">
<i class="fa fa-certificate"></i>
</div>
</div>
<h3 class="text-5xl md:text-6xl font-black text-white tracking-tight mb-2">50<span class="text-blue-300 text-4xl">+</span></h3>
<p class="text-blue-100 font-medium text-sm uppercase tracking-widest">Certified Instructors</p>
</div>
<!-- Stat 4 -->
<div class="flex flex-col items-center justify-center p-4 group">
<div class="mb-4 relative">
<span class="absolute inset-0 bg-purple-400 blur-xl opacity-20 group-hover:opacity-40 transition"></span>
<div class="relative w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 flex items-center justify-center text-white text-2xl group-hover:scale-110 transition-transform duration-300">
<i class="fa fa-clock-o"></i>
</div>
</div>
<h3 class="text-5xl md:text-6xl font-black text-white tracking-tight mb-2">15<span class="text-blue-300 text-4xl">+</span></h3>
<p class="text-blue-100 font-medium text-sm uppercase tracking-widest">Years Excellence</p>
</div>
</div>
<!-- CTA Internal -->
<div class="mt-12 md:mt-16 text-center relative z-10">
<div class="inline-block p-[2px] rounded-full bg-gradient-to-r from-blue-300 via-white to-blue-300 shadow-lg group-hover:shadow-blue-500/50 cursor-pointer">
<a href="admission.php" class="block px-10 py-4 bg-white rounded-full text-[#2957A4] font-bold text-lg hover:bg-gray-50 transition transform group-hover:scale-[1.01]">
Join Us Today <i class="fa fa-arrow-right ml-2 opacity-70 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials Section -->
<!-- Testimonials Section (compact Google Reviews style) -->
<!-- Testimonials Section (Text-only Carousel, Google Style) -->
<!-- Testimonials Section (Swiper.js Loop) -->
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<div class="bg-white py-10 md:py-16 font-sans border-t border-gray-100 relative group/section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-6">
<div>
<h2 class="text-2xl md:text-3xl font-bold text-gray-900">Student Reviews</h2>
<div class="flex items-center gap-2 mt-2">
<span class="text-yellow-400 text-lg">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
</span>
<span class="text-gray-600 font-medium">4.9 out of 5 based on verified reviews</span>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex gap-2">
<button class="swiper-button-prev-custom w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center hover:bg-gray-50 text-gray-600 transition cursor-pointer">
<i class="fa fa-chevron-left"></i>
</button>
<button class="swiper-button-next-custom w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center hover:bg-gray-50 text-gray-600 transition cursor-pointer">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<!-- Swiper Container -->
<div class="swiper testimonialSwiper pb-10 px-4">
<div class="swiper-wrapper">
<?php
// Fetch ALL reviews
$sql = "select * from `testimonials` ORDER BY id DESC";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result)){
?>
<!-- Slide -->
<div class="swiper-slide w-[85vw] md:w-[350px] h-auto">
<div class="bg-white border border-gray-100 p-8 rounded-2xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-300 flex flex-col h-full">
<div class="flex items-center justify-between mb-4">
<div>
<h4 class="font-bold text-gray-900 text-base leading-tight"><?php echo $row['name']; ?></h4>
<p class="text-xs text-blue-600 font-bold uppercase tracking-wide mt-1">Alumni</p>
</div>
<div class="flex text-yellow-400 text-xs space-x-0.5 bg-yellow-50 px-2 py-1 rounded-full border border-yellow-100">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
</div>
</div>
<div class="relative flex-grow">
<div class="mb-3 opacity-20">
<i class="fa fa-quote-left text-[#2957A4] text-xl"></i>
</div>
<p class="text-gray-600 text-[15px] leading-relaxed font-normal">
<?php
echo strip_tags($row['review']);
?>
</p>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
// Course Fitlering Logic
// Course Fitlering Logic
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab-btn');
const items = document.querySelectorAll('.course-item');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const filter = tab.getAttribute('data-filter');
// Update Tabs
tabs.forEach(t => {
t.classList.remove('text-[#2957A4]', 'font-bold', 'border-[#2957A4]');
t.classList.add('text-gray-500', 'font-medium', 'border-transparent');
});
tab.classList.remove('text-gray-500', 'font-medium', 'border-transparent');
tab.classList.add('text-[#2957A4]', 'font-bold', 'border-[#2957A4]');
// Filter Items
let visibleCount = 0;
items.forEach(item => {
const category = item.getAttribute('data-category');
if (filter === 'all' || category === filter) {
item.style.display = 'block';
// Simple Fade In
item.animate([
{ opacity: 0, transform: 'translateY(10px)' },
{ opacity: 1, transform: 'translateY(0)' }
], { duration: 300, fill: 'forwards' });
visibleCount++;
} else {
item.style.display = 'none';
}
});
});
});
});
// Hero Slider Initialization
var heroSwiper = new Swiper(".heroSwiper", {
spaceBetween: 0,
effect: "fade",
speed: 1000,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
loop: true,
fadeEffect: {
crossFade: true
},
});
// Testimonial Slider Initialization
var swiper = new Swiper(".testimonialSwiper", {
slidesPerView: "auto",
spaceBetween: 24,
width: null, // Allow auto width slides
loop: true,
grabCursor: true,
centeredSlides: false, // Start from left
navigation: {
nextEl: ".swiper-button-next-custom",
prevEl: ".swiper-button-prev-custom",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
breakpoints: {
640: {
slidesPerView: "auto",
spaceBetween: 30,
}
}
});
</script>
<!-- Contact & Map Section -->
<div class="bg-gray-50 py-10 md:py-24">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-8 bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Map -->
<div class="lg:w-1/2 h-96 lg:h-auto relative min-h-[400px]">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2912.505822222781!2d72.8376875738149!3d19.019092153759257!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7cedb4e4a416b%3A0xa4d7ba09183deb04!2sVarkana%20Bhavan!5e1!3m2!1sen!2sin!4v1749543753430!5m2!1sen!2sin" width="100%" height="100%" frameborder="0" style="border:0; position: absolute; inset: 0;" allowfullscreen></iframe>
</div>
<!-- Contact Info -->
<div class="lg:w-1/2 p-8 lg:p-12 flex flex-col justify-center">
<h3 class="text-2xl font-bold mb-6 text-gray-900">Visit Our Center</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-[#2957A4] flex-shrink-0 mt-1">
<i class="fa fa-map-marker text-lg"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-900">Address</h4>
<p class="text-gray-600 text-sm mt-1">Varkana Bhavan, Dadar West, Mumbai, Maharashtra 400028</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-[#2957A4] flex-shrink-0 mt-1">
<i class="fa fa-phone text-lg"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-900">Call Us</h4>
<p class="text-gray-600 text-sm mt-1">+91 98201 93115</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-[#2957A4] flex-shrink-0 mt-1">
<i class="fa fa-envelope text-lg"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-900">Email</h4>
<p class="text-gray-600 text-sm mt-1">info@ipsol.net</p>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-100 table w-full">
<?php
// Include simplified contact form logic or link
// Since the original specificed 'contact_form.php', we can link to it or embed.
// For this UI, a CTA is cleaner.
?>
<p class="text-sm text-gray-500 mb-4">Have questions? Send us a message directly.</p>
<a href="contact.php" class="block w-full text-center bg-gray-900 text-white font-bold py-3 rounded hover:bg-gray-800 transition">Contact Us Now</a>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer_v2.php'; ?>
</body>
</html>