File: /home/durgeshpandey215/public_html/ipsol.skilladders.com/our-catlog.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
// Define Catalog Items with details
$catalog_items = [
// --- Cisco Switches ---
[
'id' => 'csco-nexus',
'title' => 'Cisco Nexus Series',
'image' => 'https://www.cisco.com/content/dam/cisco-cdc/site/us/en/images/networking/Data-Center-Switching-Nexus_Product-Rendering_758x217_rev.png',
'category' => 'Cisco Switches',
'specs' => ['Data Center', 'Low Latency', 'NX-OS'],
'description' => 'High-performance switches designed for scale, performance, and operational efficiency in the data center.'
],
[
'id' => 'csco-catalyst',
'title' => 'Cisco Catalyst Series',
'image' => 'https://www.cisco.com/c/dam/assets/support/product-images/series/switches-catalyst-9200-series-switches-alternate1.jpg/_jcr_content/renditions/switches-catalyst-9200-series-switches-alternate1-600x220.jpg',
'category' => 'Cisco Switches',
'specs' => ['C9200 / C9300', 'C1000 / C2960', 'C3650 / C3750 / C3850'],
'description' => 'Industry-leading stackable and standalone enterprise switching platform built for security, IoT, and cloud.'
],
// --- Cisco Routers ---
[
'id' => 'csco-isr',
'title' => 'Cisco ISR Series',
'image' => 'https://www.cisco.com/c/dam/en/us/products/collateral/routers/1000-series-integrated-services-routers-isr/1kseries-integrated-services-routers-guide.docx/_jcr_content/renditions/1kseries-integrated-services-routers-guide_0.png',
'category' => 'Cisco Routers',
'specs' => ['1800 / 2800 / 3800', '1900 / 2900 / 3900', 'Branch Routing & SD-WAN'],
'description' => 'Integrated Services Routers extending intent-based networking and robust security to the branch and edge.'
],
[
'id' => 'csco-asr',
'title' => 'Cisco ASR Series',
'image' => 'https://www.cisco.com/content/dam/cisco-cdc/site/images/photography/product-photography/model-comparison-asr-1002hx-758x549.png',
'category' => 'Cisco Routers',
'specs' => ['Edge Routing', 'High Throughput', 'Carrier-Grade'],
'description' => 'Aggregation Services Routers purpose-built for high-bandwidth applications, scaling up secure enterprise routing.'
],
// --- Dell EMC Servers & Storage ---
[
'id' => 'dell-poweredge',
'title' => 'Dell EMC PowerEdge Series',
'image' => 'https://i.dell.com/is/image/DellContent//content/dam/images/products/servers/poweredge/r550/dellemc-per550-16x2-5-above-lf-emc-honeycomb-bezel-w-lcd.psd?fmt=png-alpha&pscan=auto&scl=1&hei=402&wid=1258&qlt=100,1&resMode=sharp2&size=1258,402&chrss=full',
'category' => 'Dell EMC Servers',
'specs' => ['PowerEdge T Series', 'PowerEdge R Series', 'Scalable'],
'description' => 'PowerEdge T Series and R Series servers, optimizing application performance and ensuring a stable, secure IT environment.'
],
[
'id' => 'dell-powerstore',
'title' => 'Dell EMC PowerStore Series',
'image' => 'https://i.dell.com/is/image/DellContent/content/dam/images/products/storage/powerstore/dell-powerstore-base-bezel-rf.psd?fmt=pjpg&pscan=auto&scl=1&hei=402&wid=1766&qlt=100,1&resMode=sharp2&size=1766,402&chrss=full',
'category' => 'Dell EMC Storage',
'specs' => ['500T / 1000T / 3000T', '5000T / 7000T / 9000T', 'All-Flash'],
'description' => 'Intelligent all-flash data storage designed for the modern enterprise.'
],
[
'id' => 'dell-unity-xt',
'title' => 'Dell EMC Unity XT Series',
'image' => 'https://i.dell.com/is/image/DellContent/content/dam/ss2/page-specific/franchise-page/isg-unity-franchise/prod-476750-enterprise-storage-unity-880-880f-1200x300.png?fmt=png-alpha&wid=1200&hei=300',
'category' => 'Dell EMC Storage',
'specs' => ['XT 380 / XT 480', 'XT 680 / XT 880', 'Hybrid & All-Flash'],
'description' => 'No-compromise mid-range storage built for multi-cloud with NVMe-ready designs.'
],
// --- HPE Servers & Storage ---
[
'id' => 'hpe-proliant',
'title' => 'HPE ProLiant Series',
'image' => 'https://www.hpe.com/content/dam/hpe/shared-publishing/images-norend/marquee-png/Intel-Family-Gen12-1000x880.png.hpetransform/bounded-resize:width=1200/image.webp',
'category' => 'HPE Servers',
'specs' => ['DL Series (DL 20 - 385)', 'ML Series', 'MicroServer Series'],
'description' => 'Versatile and secure rack and tower servers that can handle a wide variety of diverse workloads.'
],
[
'id' => 'hpe-msa',
'title' => 'HPE MSA Series',
'image' => 'https://www.hpe.com/content/dam/hpe/shared-publishing/images-norend/marquee-png/MSA-2070-Stacked-600x528.png.hpetransform/bounded-resize:width=800/image.webp',
'category' => 'HPE Storage',
'specs' => ['MSA 1060', 'MSA 2060', 'MSA 2062'],
'description' => 'Flash-ready, easy to use, and highly affordable SAN storage arrays tailored for small and midsized business workloads.'
]
];
// Get unique categories for filter
$categories = array_unique(array_column($catalog_items, 'category'));
sort($categories);
array_unshift($categories, 'All');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enterprise Hardware Catalog | 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'],
}
}
}
}
</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; }
.filter-btn.active {
background-color: #2957A4 !important;
color: #ffffff !important;
border-color: #2957A4 !important;
}
/* Smooth Fade In */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up {
animation: fadeUp 0.6s ease-out forwards;
}
/* Ensure images fit nicely */
.img-container img {
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.catalog-item:hover .img-container img {
transform: scale(1.08) translateY(-5px);
}
</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 Catalog</span>
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Infrastructure for the <br class="hidden md:block"> Modern Enterprise.
</h1>
<p class="text-slate-500 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed">
High-performance routing, switching, and security hardware. Sourced directly from global leaders to power your business connectivity reliably and securely.
</p>
</div>
</div>
<!-- Catalog Section -->
<main class="py-20 bg-white flex-grow">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
<!-- Filters Container -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 fade-up">
<div>
<h2 class="text-2xl font-bold text-slate-900">Equipment Catalog</h2>
<p class="text-slate-500 text-sm mt-1">Filter by equipment type</p>
</div>
<div class="flex flex-wrap gap-2" id="filters">
<?php foreach($categories as $cat): ?>
<button
class="filter-btn px-6 py-2.5 rounded-xl border-2 border-slate-100 bg-white text-slate-600 text-sm font-semibold hover:border-brand-blue hover:text-brand-blue transition-all duration-300
<?php echo $cat === 'All' ? 'active' : ''; ?>"
data-filter="<?php echo $cat; ?>"
onclick="filterItems(this)">
<?php echo $cat; ?>
</button>
<?php endforeach; ?>
</div>
</div>
<!-- Product Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="catalog-grid">
<?php $delay = 0.1; foreach($catalog_items as $item): ?>
<div class="catalog-item bg-white border border-slate-100 shadow-sm rounded-3xl p-8 hover:shadow-lg hover:-translate-y-1 hover:border-slate-200 transition-all duration-300 flex flex-col relative group fade-up" style="animation-delay: <?php echo $delay; ?>s;" data-category="<?php echo $item['category']; ?>">
<!-- Category Badge -->
<div class="flex justify-between items-center mb-6">
<span class="inline-flex items-center px-3 py-1 rounded-md bg-slate-50 text-slate-600 text-[10px] font-bold uppercase tracking-widest border border-slate-100">
<?php echo htmlspecialchars($item['category']); ?>
</span>
<div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-blue-50 group-hover:text-brand-blue transition-colors">
<i class="fa fa-hdd-o"></i>
</div>
</div>
<!-- Image Container -->
<div class="img-container w-full h-48 mb-8 flex items-center justify-center relative bg-white rounded-2xl overflow-hidden p-4">
<img src="<?php echo $item['image']; ?>" alt="<?php echo htmlspecialchars($item['title']); ?>" onerror="this.src='https://placehold.co/400x300?text=Hardware+Preview'" class="max-h-full max-w-full object-contain z-10 relative">
</div>
<!-- Title & Desc -->
<h3 class="text-xl font-bold text-slate-900 mb-3 leading-snug group-hover:text-brand-blue transition-colors">
<?php echo htmlspecialchars($item['title']); ?>
</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-6 line-clamp-2">
<?php echo htmlspecialchars($item['description']); ?>
</p>
<!-- Specs List -->
<div class="mb-8 space-y-2.5 mt-auto bg-slate-50 p-4 rounded-xl border border-slate-100">
<?php foreach($item['specs'] as $spec): ?>
<div class="flex items-center gap-3 text-xs font-medium text-slate-700">
<i class="fa fa-check text-brand-blue/70"></i> <?php echo $spec; ?>
</div>
<?php endforeach; ?>
</div>
<!-- Action -->
<a href="contact.php?product=<?php echo urlencode($item['title']); ?>" class="w-full py-3.5 rounded-xl bg-white border border-slate-200 text-slate-700 font-bold text-sm hover:bg-slate-50 transition-colors text-center shadow-sm">
Request Quote
</a>
</div>
<?php $delay += 0.1; endforeach; ?>
</div>
<!-- Pre-Footer CTA (Clean & Minimal) -->
<div class="mt-20 py-16 px-8 rounded-3xl bg-slate-50 border border-slate-100 text-center max-w-4xl mx-auto shadow-sm">
<div class="w-16 h-16 mx-auto bg-white rounded-full flex items-center justify-center text-brand-blue text-2xl shadow-sm mb-6 border border-slate-100">
<i class="fa fa-cogs"></i>
</div>
<h2 class="text-3xl font-bold text-slate-900 mb-4">Need a Custom Configuration?</h2>
<p class="text-slate-500 text-lg mb-8 leading-relaxed max-w-2xl mx-auto">
Our certified engineers design perfect topologies for your requirements. We handle end-to-end deployment—from procurement to installation.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="contact.php" class="px-8 py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-blue-700 transition shadow-md hover:shadow-lg flex items-center justify-center gap-2">
Talk to an Expert <i class="fa fa-arrow-right"></i>
</a>
<a href="tel:9082182793" class="px-8 py-4 bg-white border border-slate-200 text-slate-700 font-bold rounded-xl hover:bg-slate-50 transition flex items-center justify-center gap-2 shadow-sm">
<i class="fa fa-phone"></i> +91 90821 82793
</a>
</div>
</div>
</div>
</main>
<?php include 'footer_v2.php'; ?>
<script>
function filterItems(btn) {
// Update active button state
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const category = btn.getAttribute('data-filter');
const items = document.querySelectorAll('.catalog-item');
items.forEach((item, index) => {
if (category === 'All' || item.getAttribute('data-category') === category) {
item.style.display = 'flex';
// Re-trigger animation by removing and re-adding class
item.classList.remove('fade-up');
void item.offsetWidth; // Trigger reflow
item.style.animationDelay = (index * 0.05) + 's';
item.classList.add('fade-up');
} else {
item.style.display = 'none';
item.classList.remove('fade-up');
}
});
}
</script>
</body>
</html>