File: /home/durgeshpandey215/www/ipsol.skilladders.com/about-us.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>About Us - IP Solutions</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4',
navy: '#00062F',
light: '#F5F5F5',
}
},
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'Inter', 'sans-serif'],
},
animation: {
'scroll': 'scroll 30s linear infinite',
},
keyframes: {
scroll: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-50%)' },
}
}
}
}
}
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #ffffff; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="text-slate-800 antialiased flex flex-col min-h-screen">
<?php include 'header_v2.php'; ?>
<!-- Clean Hero Section -->
<div class="bg-slate-50 pt-20 pb-20 border-b border-slate-100 relative overflow-hidden">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<span class="text-brand-blue font-bold tracking-wider uppercase text-sm mb-4 block">Our Story</span>
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Empowering the Future <br class="hidden md:block"> of IT Education.
</h1>
<p class="text-slate-500 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed">
IP Solutions has been at the forefront of hardware and networking training, bridging the gap between ambition and professional expertise.
</p>
</div>
</div>
<!-- Main Content (Clean Design) -->
<div class="py-20 bg-white">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Text Core -->
<div class="space-y-6">
<h2 class="text-3xl font-bold text-slate-900">Pioneering in Hardware & Networking</h2>
<div class="prose prose-lg text-slate-600 leading-relaxed">
<p>
IPsolutions was incorporated by entrepreneur and IT professional <strong class="text-brand-blue font-semibold">Mr. Javed Khan</strong> with a singular vision: to empower individuals in a fast-moving, information-based world.
</p>
<p>
Unlike others who followed the software trend blindly, we foresaw the massive potential in IT infrastructure. Today, we stand as a premier institute in Mumbai, fulfilling the critical requirements of the IT industry by rendering world-class education from students to seasoned professionals.
</p>
</div>
<div class="pl-6 pt-4 border-l-4 border-brand-blue/20">
<p class="text-lg text-slate-700 italic font-medium">
"We give IT managers a polished edge. We are proud to be the pioneers in Hardware and Networking."
</p>
<span class="block mt-3 text-sm font-bold text-slate-400">— Mr. Javed Khan, Founder</span>
</div>
</div>
<!-- Visual Composition -->
<div class="relative">
<div class="rounded-3xl overflow-hidden shadow-2xl shadow-slate-200/50">
<img src="img/hero/IMG_20260201_124205.jpg.jpeg" alt="Classroom" class="w-full h-[400px] object-cover hover:scale-105 transition duration-700">
</div>
<div class="absolute -bottom-8 -left-8 bg-white p-6 rounded-2xl shadow-xl shadow-slate-200 border border-slate-50 max-w-[200px]">
<div class="text-3xl font-black text-brand-blue mb-1">15+</div>
<div class="text-sm font-semibold text-slate-500 uppercase tracking-widest leading-snug">Years of Excellence</div>
</div>
</div>
</div>
</div>
</div>
<!-- Vision & Mission (Minimal Grid) -->
<div class="py-20 bg-slate-50 border-t border-slate-100">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> -->
<!-- Mission -->
<div class="bg-white mb-10 p-10 rounded-3xl shadow-sm border border-slate-100 transition hover:shadow-md">
<div class="w-14 h-14 bg-blue-50 text-brand-blue rounded-full flex items-center justify-center text-2xl mb-8">
<i class="fa fa-bullseye"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-4">Our Mission</h3>
<p class="text-slate-600 leading-relaxed text-lg">
To fulfill the critical requirements of the IT Industry by rendering world-class education and practical training. We aim to transform enthusiastic learners into highly skilled professionals ready to tackle real-world technological challenges.
</p>
</div>
<!-- Vision -->
<div class="bg-white mb-10 p-10 rounded-3xl shadow-sm border border-slate-100 transition hover:shadow-md">
<div class="w-14 h-14 bg-blue-50 text-brand-blue rounded-full flex items-center justify-center text-2xl mb-8">
<i class="fa fa-eye"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 ">Our Vision</h3>
<p class="text-slate-600 leading-relaxed text-lg">
To be the most trusted and preferred institution for IT infrastructure training globally. We envision creating a continuously learning community that leads innovations in networking, cloud computing, and cybersecurity.
</p>
</div>
</div>
</div>
</div>
<!-- Core Values -->
<div class="py-20 bg-white">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<h2 class="text-3xl font-bold text-slate-900 mb-4">Why Choose IP Solutions?</h2>
<p class="text-slate-500">We maintain uncompromising standards in delivering technical education.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Value 1 -->
<div class="text-center border border-slate-300 p-10 rounded-3xl transition hover:shadow-lg group">
<div class="w-16 h-16 mx-auto bg-slate-50 text-slate-400 rounded-full flex items-center justify-center text-2xl mb-6 group-hover:bg-brand-blue group-hover:text-white transition-colors duration-300">
<i class="fa fa-cogs"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Practical Approach</h3>
<p class="text-slate-500 leading-relaxed">
100% hands-on learning using real Cisco hardware and modern virtualization tools.
</p>
</div>
<!-- Value 2 -->
<div class="text-center border border-slate-300 p-10 rounded-3xl transition hover:shadow-lg group">
<div class="w-16 h-16 mx-auto bg-slate-50 text-slate-400 rounded-full flex items-center justify-center text-2xl mb-6 group-hover:bg-brand-blue group-hover:text-white transition-colors duration-300">
<i class="fa fa-users"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Expert Faculty</h3>
<p class="text-slate-500 leading-relaxed">
Industry veterans and certified professionals bringing field experience directly into the classroom.
</p>
</div>
<!-- Value 3 -->
<div class="text-center border border-slate-300 p-10 rounded-3xl transition hover:shadow-lg group">
<div class="w-16 h-16 mx-auto bg-slate-50 text-slate-400 rounded-full flex items-center justify-center text-2xl mb-6 group-hover:bg-brand-blue group-hover:text-white transition-colors duration-300">
<i class="fa fa-handshake-o"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Dedicated Support</h3>
<p class="text-slate-500 leading-relaxed">
From curriculum doubts to dedicated 100% placement assistance, we stand by our students.
</p>
</div>
</div>
</div>
</div>
<!-- Clients Marquee Section (Clean)
<div class="py-16 bg-slate-50 border-t border-slate-100 overflow-hidden">
<div class="max-w-[1200px] mx-auto px-4 mb-10 text-center">
<h2 class="text-sm font-bold text-slate-400 uppercase tracking-widest">Alumni Working At</h2>
</div>
<div class="relative w-full overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-32 z-10 bg-gradient-to-r from-slate-50 to-transparent"></div>
<div class="absolute right-0 top-0 bottom-0 w-32 z-10 bg-gradient-to-l from-slate-50 to-transparent"></div>
<div class="flex items-center gap-16 animate-scroll w-max py-4">
<?php
$client_logos = [];
$sql = "SELECT * FROM `img_aboutus`";
$result = mysqli_query($con, $sql);
if ($result) {
while($row = mysqli_fetch_assoc($result)) {
$client_logos[] = $row['img_name'];
}
}
if(empty($client_logos)){
$client_logos = ['ibm.png', 'infosys.png', 'wipro.png', 'hpe.png', 'oracle.png', 'cisco.png'];
}
$display_logos = array_merge($client_logos, $client_logos, $client_logos, $client_logos);
foreach($display_logos as $logo):
$img_path = (strpos($logo, '.') !== false) ? "img/about/$logo" : "img/about/$logo";
?>
<div class="w-32 h-12 flex items-center justify-center grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition duration-300">
<img src="<?php echo $img_path; ?>" class="max-w-full max-h-full object-contain" alt="Client" onerror="this.onerror=null; this.src='img/brand-img/placeholder.png';">
</div>
<?php endforeach; ?>
</div>
</div>
</div> -->
<!-- Contact Note -->
<div class="py-16 bg-white border-t border-slate-100">
<div class="max-w-[1200px] mx-auto px-4">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 lg:h-80">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15087.903968047962!2d72.84288530000002!3d19.020779550000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7cedb4e4a416b%3A0xa4d7ba09183deb04!2sVarkana%20Bhavan!5e0!3m2!1sen!2sin!4v1415712270900" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen></iframe>
</div>
</div>
<p class="text-slate-600 text-center text-lg mt-10">
We operate exclusively from our <strong class="text-slate-900">Dadar headquarters</strong> in Mumbai.
</div>
<?php include 'footer_v2.php'; ?>
</body>
</html>