File: /home/durgeshpandey215/www/ipsol.skilladders.com/index.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'; ?>
<style>
/* Modern Hero Pagination Fix */
.heroSwiper .swiper-pagination {
position: relative !important;
bottom: auto !important;
margin-top: 3rem !important;
}
.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;
}
</style>
<!-- Modern Clean White Hero Section -->
<div class="relative bg-white overflow-hidden border-b border-gray-100 pt-8 lg:pt-12 pb-12 lg:pb-14">
<!-- Subtle Pattern Background -->
<div class="absolute inset-0 bg-[url('img/grid.svg')] bg-center opacity-[0.4]" style="background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 40px 40px;"></div>
<!-- Soft Top Glow (Blue) -->
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-blue-100/60 to-transparent blur-[100px] rounded-full pointer-events-none -mr-40 -mt-20 z-0"></div>
<div class="swiper heroSwiper w-full relative z-10 pt-8 lg:pt-10">
<div class="swiper-wrapper">
<!-- Slide 1: Career / Main -->
<div class="swiper-slide">
<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-10 lg:gap-12 items-center">
<!-- Left: Clean Copywriting -->
<div class="space-y-6 text-center lg:text-left">
<!-- Trust Badge -->
<div class="animate-fade-in-up" style="animation-duration: 0.8s;">
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 border border-blue-100 text-blue-800 shadow-sm">
<span class="flex h-2 w-2 relative">
<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 w-2 bg-blue-600"></span>
</span>
<span class="text-[12px] font-bold uppercase tracking-wider">Cisco Authorized Training Center</span>
</span>
</div>
<!-- Main Headline -->
<div class="animate-fade-in-up space-y-4" style="animation-duration: 0.8s; animation-delay: 0.1s; animation-fill-mode: both;">
<h1 class="text-4xl md:text-5xl lg:text-[4rem] font-black text-slate-900 leading-[1.05] tracking-tight">
Build Your Career in <br class="hidden lg:block">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#2957A4] to-blue-500">Network Engineering</span>
</h1>
<p class="text-base md:text-lg text-slate-600 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-medium">
Join India's leading IT training academy. Master essential networking, security, and cloud skills with 100% placement assistance and expert mentorship.
</p>
</div>
<!-- Call to Actions -->
<div class="animate-fade-in-up flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-2" style="animation-duration: 0.8s; animation-delay: 0.2s; animation-fill-mode: both;">
<a href="admission.php" class="px-6 py-3.5 bg-[#2957A4] hover:bg-blue-800 text-white font-bold rounded-xl transition-all shadow-lg shadow-blue-900/10 hover:-translate-y-1 hover:shadow-blue-900/20 flex items-center justify-center gap-2 text-[15px]">
Start Your Journey
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
<a href="all-courses.php" class="px-6 py-3.5 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-bold rounded-xl transition-all shadow-sm hover:shadow flex items-center justify-center text-[15px]">
Explore Courses
</a>
</div>
<!-- Stats / Social Proof -->
<div class="animate-fade-in-up pt-5 flex items-center justify-center lg:justify-start gap-6 lg:gap-8 opacity-90" style="animation-duration: 0.8s; animation-delay: 0.3s; animation-fill-mode: both;">
<div class="flex items-center gap-2">
<div class="flex text-yellow-500 text-[13px]"><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-black text-slate-800 text-sm">4.9/5 <span class="font-medium text-slate-500 text-[13px]">Rating</span></span>
</div>
<div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-users text-blue-500 text-lg"></i> 10k+ <span class="font-medium text-slate-500 text-[13px]">Alumni</span></div>
</div>
</div>
<!-- Right: Bright Structural Image -->
<div class="relative w-full max-w-lg mx-auto lg:max-w-none lg:h-[480px] animate-fade-in-up flex items-center justify-center" style="animation-duration: 1s; animation-delay: 0.4s; animation-fill-mode: both;">
<!-- decorative background blob -->
<div class="absolute inset-0 bg-gradient-to-tr from-blue-100 to-indigo-50 rounded-full blur-3xl -z-10 scale-90"></div>
<div class="relative z-10 w-full rounded-[2rem] overflow-hidden shadow-2xl shadow-blue-900/10 border-4 border-white aspect-[4/3] lg:aspect-auto lg:h-full">
<img src="img/hero/IMG_20260201_121431.jpg.jpeg" alt="Professional Networking Lab" class="absolute inset-0 w-full h-full object-cover object-center transform hover:scale-105 transition duration-700 ease-out">
<!-- Simple sleek tag -->
<div class="absolute bottom-5 left-5 right-5 bg-white/95 backdrop-blur-md p-4 rounded-xl shadow-lg border border-white/50 flex flex-row items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] uppercase font-bold tracking-widest text-[#2957A4]">Infrastructure</span>
<span class="text-sm font-black text-slate-800">Advanced CCIE Server Labs</span>
</div>
<div class="w-10 h-10 rounded-full bg-blue-50 flex flex-col items-center justify-center text-[#2957A4]">
<i class="fa fa-server"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2: Corporate -->
<div class="swiper-slide">
<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-10 lg:gap-12 items-center">
<!-- Left: Clean Copywriting -->
<div class="space-y-6 text-center lg:text-left">
<!-- Trust Badge -->
<div class="animate-fade-in-up" style="animation-duration: 0.8s;">
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-50 border border-purple-100 text-purple-800 shadow-sm">
<i class="fa fa-briefcase text-purple-600"></i>
<span class="text-[12px] font-bold uppercase tracking-wider">Enterprise Solutions</span>
</span>
</div>
<!-- Main Headline -->
<div class="animate-fade-in-up space-y-4" style="animation-duration: 0.8s; animation-delay: 0.1s; animation-fill-mode: both;">
<h1 class="text-4xl md:text-5xl lg:text-[4rem] font-black text-slate-900 leading-[1.05] tracking-tight">
Empower Your <br class="hidden lg:block">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-500">IT Workforce</span>
</h1>
<p class="text-base md:text-lg text-slate-600 max-w-2xl 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>
<!-- Call to Actions -->
<div class="animate-fade-in-up flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-2" style="animation-duration: 0.8s; animation-delay: 0.2s; animation-fill-mode: both;">
<a href="contact.php" class="px-6 py-3.5 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-purple-900/10 hover:-translate-y-1 hover:shadow-purple-900/20 flex items-center justify-center gap-2 text-[15px]">
Get a Custom Quote
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
<!-- Stats / Social Proof -->
<div class="animate-fade-in-up pt-5 flex items-center justify-center lg:justify-start gap-6 lg:gap-8 opacity-90" style="animation-duration: 0.8s; animation-delay: 0.3s; animation-fill-mode: both;">
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-building text-purple-500 text-lg"></i> 150+ <span class="font-medium text-slate-500 text-[13px]">Clients</span></div>
<div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-chalkboard-teacher text-pink-500 text-lg"></i> 500+ <span class="font-medium text-slate-500 text-[13px]">Workshops</span></div>
</div>
</div>
<!-- Right: Bright Structural Image -->
<div class="relative w-full max-w-lg mx-auto lg:max-w-none lg:h-[480px] animate-fade-in-up flex items-center justify-center" style="animation-duration: 1s; animation-delay: 0.4s; animation-fill-mode: both;">
<!-- decorative background blob -->
<div class="absolute inset-0 bg-gradient-to-tr from-purple-100 to-pink-50 rounded-full blur-3xl -z-10 scale-90"></div>
<div class="relative z-10 w-full rounded-[2rem] overflow-hidden shadow-2xl shadow-purple-900/10 border-4 border-white aspect-[4/3] lg:aspect-auto lg:h-full">
<img src="img/hero/it-workforce.jpeg" alt="Corporate Training" class="absolute inset-0 w-full h-full object-cover object-center transform hover:scale-105 transition duration-700 ease-out">
<!-- Simple sleek tag -->
<div class="absolute bottom-5 left-5 right-5 bg-white/95 backdrop-blur-md p-4 rounded-xl shadow-lg border border-white/50 flex flex-row items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] uppercase font-bold tracking-widest text-purple-600">Upskilling</span>
<span class="text-sm font-black text-slate-800">Leading Tech Partners</span>
</div>
<div class="w-10 h-10 rounded-full bg-purple-50 flex flex-col items-center justify-center text-purple-600">
<i class="fa fa-handshake-o"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Placement -->
<div class="swiper-slide">
<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-10 lg:gap-12 items-center">
<!-- Left: Clean Copywriting -->
<div class="space-y-6 text-center lg:text-left">
<!-- Trust Badge -->
<div class="animate-fade-in-up" style="animation-duration: 0.8s;">
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-50 border border-emerald-100 text-emerald-800 shadow-sm">
<i class="fa fa-graduation-cap text-emerald-600"></i>
<span class="text-[12px] font-bold uppercase tracking-wider">100% Placement Support</span>
</span>
</div>
<!-- Main Headline -->
<div class="animate-fade-in-up space-y-4" style="animation-duration: 0.8s; animation-delay: 0.1s; animation-fill-mode: both;">
<h1 class="text-4xl md:text-5xl lg:text-[4rem] font-black text-slate-900 leading-[1.05] tracking-tight">
Train Here, <br class="hidden lg:block">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500">Get Hired</span>
</h1>
<p class="text-base md:text-lg text-slate-600 max-w-2xl 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>
<!-- Call to Actions -->
<div class="animate-fade-in-up flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-2" style="animation-duration: 0.8s; animation-delay: 0.2s; animation-fill-mode: both;">
<a href="placement.php" class="px-6 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-emerald-900/10 hover:-translate-y-1 hover:shadow-emerald-900/20 flex items-center justify-center gap-2 text-[15px]">
View Placements
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
<!-- Stats / Social Proof -->
<div class="animate-fade-in-up pt-5 flex items-center justify-center lg:justify-start gap-6 lg:gap-8 opacity-90" style="animation-duration: 0.8s; animation-delay: 0.3s; animation-fill-mode: both;">
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-line-chart text-emerald-500 text-lg"></i> High <span class="font-medium text-slate-500 text-[13px]">Success Rate</span></div>
<div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-briefcase text-teal-500 text-lg"></i> Top <span class="font-medium text-slate-500 text-[13px]">Tier Companies</span></div>
</div>
</div>
<!-- Right: Bright Structural Image -->
<div class="relative w-full max-w-lg mx-auto lg:max-w-none lg:h-[480px] animate-fade-in-up flex items-center justify-center" style="animation-duration: 1s; animation-delay: 0.4s; animation-fill-mode: both;">
<!-- decorative background blob -->
<div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-teal-50 rounded-full blur-3xl -z-10 scale-90"></div>
<div class="relative z-10 w-full rounded-[2rem] overflow-hidden shadow-2xl shadow-emerald-900/10 border-4 border-white aspect-[4/3] lg:aspect-auto lg:h-full">
<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 hover:scale-105 transition duration-700 ease-out">
<!-- Simple sleek tag -->
<div class="absolute bottom-5 left-5 right-5 bg-white/95 backdrop-blur-md p-4 rounded-xl shadow-lg border border-white/50 flex flex-row items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] uppercase font-bold tracking-widest text-emerald-600">Success Rate</span>
<span class="text-sm font-black text-slate-800">High Placement Record</span>
</div>
<div class="w-10 h-10 rounded-full bg-emerald-50 flex flex-col items-center justify-center text-emerald-600">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4: IT Equipment Trading -->
<div class="swiper-slide">
<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-10 lg:gap-12 items-center">
<!-- Left: Clean Copywriting -->
<div class="space-y-6 text-center lg:text-left">
<!-- Trust Badge -->
<div class="animate-fade-in-up" style="animation-duration: 0.8s;">
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 border border-blue-100 text-blue-800 shadow-sm">
<i class="fa fa-server text-[#2957A4]"></i>
<span class="text-[12px] font-bold uppercase tracking-wider">Networking Instruments</span>
</span>
</div>
<!-- Main Headline -->
<div class="animate-fade-in-up space-y-4" style="animation-duration: 0.8s; animation-delay: 0.1s; animation-fill-mode: both;">
<h1 class="text-4xl md:text-5xl lg:text-[4rem] font-black text-slate-900 leading-[1.05] tracking-tight">
Premium Networking <br class="hidden lg:block">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#2957A4] to-cyan-500">Hardware & Sales</span>
</h1>
<p class="text-base md:text-lg text-slate-600 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-medium">
We sell top-quality networking instruments, routers, and switches. Explore our complete catalogue of premium IT infrastructure from global brands.
</p>
</div>
<!-- Call to Actions -->
<div class="animate-fade-in-up flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-2" style="animation-duration: 0.8s; animation-delay: 0.2s; animation-fill-mode: both;">
<a href="our-catlog.php" class="px-6 py-3.5 bg-[#2957A4] hover:bg-blue-800 text-white font-bold rounded-xl transition-all shadow-lg shadow-blue-900/10 hover:-translate-y-1 hover:shadow-blue-900/20 flex items-center justify-center gap-2 text-[15px]">
View Catalogue
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
<!-- Stats / Social Proof -->
<div class="animate-fade-in-up pt-5 flex items-center justify-center lg:justify-start gap-6 lg:gap-8 opacity-90" style="animation-duration: 0.8s; animation-delay: 0.3s; animation-fill-mode: both;">
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-shield text-blue-500 text-lg"></i> Certified <span class="font-medium text-slate-500 text-[13px]">Quality</span></div>
<div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
<div class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fa fa-globe text-cyan-500 text-lg"></i> Global <span class="font-medium text-slate-500 text-[13px]">Brands</span></div>
</div>
</div>
<!-- Right: Bright Structural Image -->
<div class="relative w-full max-w-lg mx-auto lg:max-w-none lg:h-[480px] animate-fade-in-up flex items-center justify-center" style="animation-duration: 1s; animation-delay: 0.4s; animation-fill-mode: both;">
<!-- decorative background blob -->
<div class="absolute inset-0 bg-gradient-to-tr from-cyan-100 to-blue-50 rounded-full blur-3xl -z-10 scale-90"></div>
<div class="relative z-10 w-full rounded-[2rem] overflow-hidden shadow-2xl shadow-blue-900/10 border-4 border-white aspect-[4/3] lg:aspect-auto lg:h-full">
<img src="img/hero/It-servers.jpg" alt="IT Equipment Trading" class="absolute inset-0 w-full h-full object-cover object-center transform hover:scale-105 transition duration-700 ease-out">
<!-- Simple sleek tag -->
<div class="absolute bottom-5 left-5 right-5 bg-white/95 backdrop-blur-md p-4 rounded-xl shadow-lg border border-white/50 flex flex-row items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] uppercase font-bold tracking-widest text-[#2957A4]">Hardware</span>
<span class="text-sm font-black text-slate-800">Premium Networking Gear</span>
</div>
<div class="w-10 h-10 rounded-full bg-blue-50 flex flex-col items-center justify-center text-[#2957A4]">
<i class="fa fa-server"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination Controls Below Slides -->
<div class="swiper-pagination flex justify-center"></div>
</div>
</div>
<style>
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation-name: fadeInUp;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
</style>
<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>
<?php
// Fetch Top Courses (latest 8 featured)
$top_courses_sql = "SELECT c.*, p.name as category_name
FROM courses c
LEFT JOIN courses p ON c.parent_course_id = p.id
WHERE c.parent_course_id IS NOT NULL AND c.delete_status = 'N'
ORDER BY c.sort_order ASC
LIMIT 8";
$top_courses_res = mysqli_query($con, $top_courses_sql);
$fetched_courses = [];
$active_categories = [];
if ($top_courses_res) {
while ($course = mysqli_fetch_assoc($top_courses_res)) {
$fetched_courses[] = $course;
if ($course['category_name'] && !in_array($course['category_name'], $active_categories)) {
$active_categories[] = $course['category_name'];
}
}
}
?>
<!-- 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>
<?php foreach ($active_categories as $cat_name): ?>
<button data-filter="<?php echo htmlspecialchars($cat_name); ?>" class="tab-btn text-gray-500 font-medium hover:text-gray-900 pb-3 border-b-2 border-transparent hover:border-gray-300 transition-colors"><?php echo htmlspecialchars($cat_name); ?></button>
<?php
endforeach; ?>
</div>
</div>
<!-- Course Grid (Dynamic content) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<?php if (!empty($fetched_courses)): ?>
<?php foreach ($fetched_courses as $course):
// Assign color theme based on category name
$cat_name = $course['category_name'];
$theme_color = 'blue';
if (stripos($cat_name, 'Cloud') !== false)
$theme_color = 'purple';
elseif (stripos($cat_name, 'Security') !== false || stripos($cat_name, 'Hack') !== false)
$theme_color = 'red';
elseif (stripos($cat_name, 'Hardware') !== false)
$theme_color = 'emerald';
?>
<!-- Course Card -->
<a href="course/<?php echo $course['page_url']; ?>.php" class="course-item group block" data-category="<?php echo htmlspecialchars($cat_name); ?>">
<div class="overflow-hidden rounded-xl mb-3 relative shadow-sm border border-gray-100">
<?php if ($course['img_file']): ?>
<img src="img/course_img/<?php echo $course['img_file']; ?>" onerror="this.src='https://placehold.co/600x400?text=Course+Image'" class="w-full h-48 object-cover transform group-hover:scale-105 transition duration-500" alt="<?php echo htmlspecialchars($course['name']); ?>">
<?php
else: ?>
<div class="w-full h-48 bg-slate-100 flex items-center justify-center transform group-hover:scale-105 transition duration-500">
<i class="fa fa-graduation-cap text-4xl text-slate-300"></i>
</div>
<?php
endif; ?>
<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-<?php echo $theme_color; ?>-50 text-<?php echo $theme_color; ?>-600 font-semibold px-2 py-0.5 rounded"><?php echo htmlspecialchars($cat_name); ?></span>
<?php if ($course['duration']): ?>
<span><i class="fa fa-clock-o"></i> <?php echo htmlspecialchars($course['duration']); ?></span>
<?php
endif; ?>
</div>
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1 group-hover:text-blue-600 transition line-clamp-2" title="<?php echo htmlspecialchars($course['name']); ?>"><?php echo htmlspecialchars($course['name']); ?></h3>
<p class="text-sm text-gray-500 mb-2 line-clamp-2">
<?php
$summ = trim(strip_tags($course['course_summery']));
echo $summ ? $summ : 'Detailed training curriculum available.';
?>
</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>
<?php
endforeach; ?>
<?php
else: ?>
<div class="col-span-full text-center py-8 text-gray-500">
No courses found.
</div>
<?php
endif; ?>
</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>
<!-- Experts Section (Modern Redesign) -->
<div class="relative bg-white py-16 md:py-24 overflow-hidden">
<!-- Decoration: Soft Blur Blobs -->
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-50/50 rounded-full blur-3xl pointer-events-none -mr-48 -mt-24"></div>
<div class="absolute bottom-0 left-0 w-72 h-72 bg-indigo-50/50 rounded-full blur-3xl pointer-events-none -ml-36 -mb-12"></div>
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col lg:flex-row gap-16 lg:items-center">
<!-- Left: Single High-Impact Image with Premium Frame -->
<div class="lg:w-1/2 relative">
<div class="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-blue-900/10 border-8 border-white group">
<img src="img/hero/file_00000000283c71fab01e3fde9f375d5f.png"
class="w-full h-[400px] md:h-[500px] object-cover object-center transform group-hover:scale-105 transition duration-700 ease-out"
alt="Advanced Networking Lab"
onerror="this.src='https://placehold.co/800x600?text=Modern+Networking+Lab'">
<!-- Premium Overlay Tag -->
<div class="absolute bottom-6 left-6 right-6">
<div class="bg-white/90 backdrop-blur-md p-5 rounded-2xl shadow-lg border border-white/50 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-[#2957A4] flex items-center justify-center text-white shadow-lg shadow-blue-900/20">
<i class="fa fa-certificate text-xl"></i>
</div>
<div class="flex flex-col">
<span class="text-[10px] uppercase font-bold tracking-widest text-[#2957A4]">Authorized Centre</span>
<span class="text-sm font-black text-slate-800">Cisco Learning Partner</span>
</div>
</div>
<div class="hidden sm:flex flex-col items-end">
<span class="text-[10px] uppercase font-bold text-slate-400">Experience</span>
<span class="text-sm font-black text-[#2957A4]">15+ Years</span>
</div>
</div>
</div>
</div>
<!-- Decorative Element: Floating Card -->
<div class="absolute -top-6 -right-6 hidden md:block animate-bounce-slow">
<div class="bg-[#2957A4] p-5 rounded-2xl shadow-xl text-white">
<div class="flex items-center gap-3">
<i class="fa fa-users text-2xl"></i>
<div>
<div class="text-xl font-black">10,000+</div>
<div class="text-[10px] uppercase font-bold opacity-80 tracking-widest">Alumni Worldwide</div>
</div>
</div>
</div>
</div>
<style>
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce-slow {
animation: bounce-slow 4s ease-in-out infinite;
}
</style>
</div>
<!-- Right: Compelling Content -->
<div class="lg:w-1/2 space-y-8">
<div class="space-y-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-[#2957A4] text-xs font-bold uppercase tracking-wider">
<span class="w-2 h-2 rounded-full bg-[#2957A4]"></span>
About IP Solutions
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 leading-[1.15] tracking-tight">
Experts In IT Networking & <br class="hidden sm:block">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#2957A4] to-blue-500">Administration Training</span>
</h2>
</div>
<div class="space-y-6 text-lg text-slate-600 leading-relaxed font-medium">
<p>
IP Solutions is the premier destination for authorized Cisco training in Mumbai. We provide comprehensive bootcamps for <strong class="text-slate-900">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 in the global IT landscape.
</p>
</div>
<!-- Core Advantages Grid -->
<div class="grid sm:grid-cols-2 gap-4 pt-4">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[#2957A4]">
<i class="fa fa-check text-[10px]"></i>
</div>
<span class="font-bold text-slate-800">100% Placement Help</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[#2957A4]">
<i class="fa fa-check text-[10px]"></i>
</div>
<span class="font-bold text-slate-800">24/7 Lab Access</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[#2957A4]">
<i class="fa fa-check text-[10px]"></i>
</div>
<span class="font-bold text-slate-800">Expert Master Mentors</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[#2957A4]">
<i class="fa fa-check text-[10px]"></i>
</div>
<span class="font-bold text-slate-800">Certified Curriculum</span>
</div>
</div>
<div class="flex flex-wrap gap-4 pt-6">
<a href="about-us.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">
Know More About Us
<i class="fa fa-arrow-right"></i>
</a>
<a href="admission.php" class="px-8 py-4 bg-white hover:bg-slate-50 border-2 border-slate-200 text-slate-800 font-bold rounded-xl transition-all flex items-center justify-center">
Admission Info
</a>
</div>
</div>
</div>
<!-- Global Partnership (Iran) - Refined Layout -->
<div class="mt-24 pt-20 border-t border-slate-100">
<div class="relative overflow-hidden bg-slate-900 rounded-[3rem] p-8 md:p-16 text-white group shadow-2xl shadow-blue-900/10">
<!-- Atmospheric Background Elements -->
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[120px] pointer-events-none -mr-40 -mt-40 animate-pulse"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-indigo-600/10 rounded-full blur-[100px] pointer-events-none -ml-32 -mb-32"></div>
<div class="relative z-10 flex flex-col lg:flex-row gap-12 items-center">
<!-- Partner Story -->
<div class="lg:w-3/5 space-y-6 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-[0.2em]">
<span class="relative flex h-2 w-2">
<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 w-2 bg-blue-500"></span>
</span>
Strategic International Partnership
</div>
<h3 class="text-3xl md:text-5xl font-black leading-tight tracking-tight">
Authorised Partner in <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Iran</span>
</h3>
<p class="text-slate-300 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
Bridging borders through technology. We have officially joined forces with <strong class="text-white">Sharan Shabkeh Gostar</strong> to provide the highest standard of Cisco networking expertise and professional technical training to the Iranian IT community.
</p>
<!-- Partnership Pillars -->
<div class="flex flex-wrap justify-center lg:justify-start gap-4 md:gap-8 pt-4">
<div class="flex items-center gap-2">
<i class="fa fa-globe text-blue-400"></i>
<span class="text-sm font-bold text-slate-200">Global Standards</span>
</div>
<div class="flex items-center gap-2">
<i class="fa fa-certificate text-blue-400"></i>
<span class="text-sm font-bold text-slate-200">Certified Trainers</span>
</div>
<div class="flex items-center gap-2">
<i class="fa fa-handshake-o text-blue-400"></i>
<span class="text-sm font-bold text-slate-200">Official Collaboration</span>
</div>
</div>
</div>
<!-- Partner Visual Brand -->
<div class="lg:w-2/5 flex justify-center lg:justify-end w-full">
<div class="relative p-1 rounded-[2rem] bg-gradient-to-br from-blue-500/20 to-white/5 shadow-2xl">
<div class="bg-white p-10 md:p-14 rounded-[1.8rem] shadow-inner group">
<img src="img/background/sharan_shabkeh_gostar.jpg"
class="h-28 md:h-40 w-auto object-contain transform group-hover:scale-110 transition duration-700 ease-in-out"
alt="Sharan Shabkeh Gostar Logo"
onerror="this.src='https://placehold.co/400x200?text=Iran+Partner+Logo'">
</div>
<!-- Decorative Stamp -->
<div class="absolute -bottom-4 -right-4 bg-blue-600 text-white p-4 rounded-2xl shadow-lg border-4 border-slate-900 font-black text-[10px] uppercase tracking-widest hidden md:block">
Verified Partner
</div>
</div>
</div>
</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-">
<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 mt-4"></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.in</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>