589 lines
31 KiB
HTML
Executable File
589 lines
31 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="MSPE Portfolio - Discover how we architect digital resilience. Case studies and success stories coming soon as we embark on our journey.">
|
|
<title>Portfolio | MSPE - Architects of Digital Resilience</title>
|
|
<link rel="icon" type="image/png" href="images/logo/logo.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
|
|
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"></noscript>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous" media="print" onload="this.media='all'">
|
|
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous"></noscript>
|
|
<link rel="stylesheet" href="css/variables.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/pages.css">
|
|
<link rel="stylesheet" href="css/ultimate-ui.css" media="print" onload="this.media='all'">
|
|
<noscript><link rel="stylesheet" href="css/ultimate-ui.css"></noscript>
|
|
<link rel="canonical" href="https://mspe.pro/portfolio.html">
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://mspe.pro/portfolio.html">
|
|
<meta property="og:title" content="Portfolio | MSPE - Architects of Digital Resilience">
|
|
<meta property="og:description" content="MSPE Portfolio - Where innovation meets execution. Discover the transformative projects we deliver for our clients.">
|
|
<meta property="og:image" content="https://mspe.pro/images/logo/logo.png">
|
|
<meta property="og:site_name" content="MSPE">
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@mspe_pro">
|
|
<meta name="twitter:title" content="MSPE Portfolio - Digital Transformation Projects">
|
|
<meta name="twitter:description" content="Where innovation meets execution. Our work speaks for itself.">
|
|
<meta name="twitter:image" content="https://mspe.pro/images/logo/logo.png">
|
|
<style>
|
|
.case-studies-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.case-studies-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 720px) {
|
|
.case-studies-grid { grid-template-columns: 1fr; }
|
|
}
|
|
.case-study-card {
|
|
/* Override pages.css grid-template-columns: 1fr 1fr which corrupts layout */
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
grid-template-columns: none !important;
|
|
gap: 0 !important;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.case-study-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(14, 165, 233, 0.35);
|
|
box-shadow: 0 24px 48px rgba(0,0,0,0.35);
|
|
}
|
|
.cs-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.25rem 1.75rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.cs-category {
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 20px;
|
|
background: rgba(14, 165, 233, 0.12);
|
|
color: #38bdf8;
|
|
border: 1px solid rgba(14, 165, 233, 0.25);
|
|
}
|
|
.cs-category.cs-cyber {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #fca5a5;
|
|
border-color: rgba(239, 68, 68, 0.25);
|
|
}
|
|
.cs-category.cs-cloud {
|
|
background: rgba(13, 148, 136, 0.12);
|
|
color: #5eead4;
|
|
border-color: rgba(13, 148, 136, 0.25);
|
|
}
|
|
.cs-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(14, 165, 233, 0.1);
|
|
font-size: 1rem;
|
|
color: #38bdf8;
|
|
}
|
|
.cs-body { padding: 1.75rem; }
|
|
.cs-body h3 {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
color: #e2e8f0;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
.cs-client {
|
|
font-size: 0.82rem;
|
|
color: #64748b;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.cs-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
.cs-metric { text-align: center; min-width: 0; }
|
|
.metric-value {
|
|
display: block;
|
|
font-size: clamp(1rem, 2.5vw, 1.4rem);
|
|
font-weight: 800;
|
|
color: #38bdf8;
|
|
line-height: 1.1;
|
|
margin-bottom: 0.25rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.metric-label {
|
|
font-size: 0.67rem;
|
|
color: #64748b;
|
|
line-height: 1.3;
|
|
}
|
|
.cs-detail { display: flex; flex-direction: column; gap: 0.6rem; }
|
|
.cs-row { font-size: 0.84rem; color: #94a3b8; line-height: 1.6; }
|
|
.cs-row strong { color: #cbd5e1; }
|
|
.cs-tags {
|
|
padding: 1rem 1.75rem 1.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
}
|
|
.cs-tags span {
|
|
font-size: 0.7rem;
|
|
padding: 0.25rem 0.65rem;
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: #64748b;
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
.cs-confidentiality {
|
|
text-align: center;
|
|
color: #475569;
|
|
font-size: 0.8rem;
|
|
margin-top: 2.5rem;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="has-promo">
|
|
<!-- Skip to Content (Accessibility) -->
|
|
<a href="#main-content" class="skip-to-content">Skip to main content</a>
|
|
|
|
<!-- Promo Announcement Bar -->
|
|
<div class="promo-bar" id="promo-bar">
|
|
<span class="promo-icon"><i class="fas fa-shield-alt"></i></span>
|
|
<span>🔒 <strong>Free Infrastructure Audit</strong> — Limited availability. <a href="calendar.html">Book your spot →</a></span>
|
|
<button class="promo-close" aria-label="Close promotion"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<header class="header" id="header">
|
|
<nav class="nav container">
|
|
<a href="index.html" class="nav-logo">
|
|
<img src="images/logo/logo.png" alt="MSPE PRO" class="logo-image" width="200" height="50">
|
|
</a>
|
|
|
|
<div class="nav-menu" id="nav-menu">
|
|
<ul class="nav-list">
|
|
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a href="services.html" class="nav-link">Services <i class="fas fa-chevron-down"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="services.html#it-support">IT Support & Maintenance</a></li>
|
|
<li><a href="services.html#cybersecurity">Cybersecurity Solutions</a></li>
|
|
<li><a href="services.html#cloud">Cloud Services</a></li>
|
|
<li><a href="services.html#consulting">Business Consulting</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="portfolio.html" class="nav-link active">Portfolio</a></li>
|
|
<li class="nav-item"><a href="news.html" class="nav-link">News & Events</a></li>
|
|
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-actions">
|
|
<a href="calendar.html" class="btn btn-primary">Book Meeting</a>
|
|
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Page Hero -->
|
|
<section class="page-hero">
|
|
<div class="page-hero-bg"></div>
|
|
<div class="container">
|
|
<div class="page-hero-content">
|
|
<span class="page-label">Our Work</span>
|
|
<h1 class="page-title">Portfolio</h1>
|
|
<p class="page-description">Where innovation meets execution. Our portfolio is just beginning - and we're excited to make you part of it.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Case Studies Section -->
|
|
<section class="portfolio section" id="case-studies-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-label">Our Work</span>
|
|
<h2 class="section-title">Case Studies</h2>
|
|
<p class="section-description">Real engagements. Anonymized at client request. Measurable results.</p>
|
|
</div>
|
|
|
|
<div class="case-studies-grid">
|
|
|
|
<!-- Case Study 1: Retail Network Overhaul -->
|
|
<div class="case-study-card">
|
|
<div class="cs-header">
|
|
<span class="cs-category">IT Support & Infrastructure</span>
|
|
<div class="cs-icon"><i class="fas fa-network-wired"></i></div>
|
|
</div>
|
|
<div class="cs-body">
|
|
<h3>Multi-Branch Retail Network Overhaul</h3>
|
|
<p class="cs-client"><i class="fas fa-store"></i> Retail Chain — 3 Locations, Lebanon</p>
|
|
<div class="cs-metrics">
|
|
<div class="cs-metric">
|
|
<span class="metric-value">85</span>
|
|
<span class="metric-label">Endpoints Managed</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">0h</span>
|
|
<span class="metric-label">Unplanned Downtime</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">↓40%</span>
|
|
<span class="metric-label">IT Incidents</span>
|
|
</div>
|
|
</div>
|
|
<div class="cs-detail">
|
|
<div class="cs-row"><strong>Challenge:</strong> Fragmented IT across 3 branches — aging switches, no centralized monitoring, and recurring outages during peak trading hours.</div>
|
|
<div class="cs-row"><strong>Solution:</strong> Full network redesign with unified firewall policy, centralized endpoint management, and a 24/7 monitoring dashboard.</div>
|
|
<div class="cs-row"><strong>Result:</strong> Zero unplanned downtime in the 60 days post-deployment. IT incident tickets dropped 40% month-over-month.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cs-tags">
|
|
<span>Network Design</span><span>Firewall Deployment</span><span>Endpoint Management</span><span>24/7 Monitoring</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Study 2: Financial Firm Security Assessment -->
|
|
<div class="case-study-card">
|
|
<div class="cs-header">
|
|
<span class="cs-category cs-cyber">Cybersecurity</span>
|
|
<div class="cs-icon" style="background: rgba(239,68,68,0.1); color: #fca5a5;"><i class="fas fa-shield-alt"></i></div>
|
|
</div>
|
|
<div class="cs-body">
|
|
<h3>Security Assessment & Hardening — Financial Firm</h3>
|
|
<p class="cs-client"><i class="fas fa-landmark"></i> Financial Advisory — 40 Users, Beirut</p>
|
|
<div class="cs-metrics">
|
|
<div class="cs-metric">
|
|
<span class="metric-value">12</span>
|
|
<span class="metric-label">Critical Vulns Found</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">30d</span>
|
|
<span class="metric-label">Full Remediation</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">✓</span>
|
|
<span class="metric-label">Regulatory Pass</span>
|
|
</div>
|
|
</div>
|
|
<div class="cs-detail">
|
|
<div class="cs-row"><strong>Challenge:</strong> No formal security posture. Regulatory pressure demanded documented controls and an incident response plan within 60 days.</div>
|
|
<div class="cs-row"><strong>Solution:</strong> Full penetration test, gap analysis against ISO 27001 controls, SIEM deployment, and staff security awareness training.</div>
|
|
<div class="cs-row"><strong>Result:</strong> All 12 critical findings remediated in 30 days. Client passed their regulatory review with zero audit findings.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cs-tags">
|
|
<span>Penetration Testing</span><span>SIEM Deployment</span><span>ISO 27001</span><span>Security Training</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Study 3: Microsoft 365 Migration -->
|
|
<div class="case-study-card">
|
|
<div class="cs-header">
|
|
<span class="cs-category cs-cloud">Cloud & Migration</span>
|
|
<div class="cs-icon" style="background: rgba(13,148,136,0.1); color: #5eead4;"><i class="fas fa-cloud-upload-alt"></i></div>
|
|
</div>
|
|
<div class="cs-body">
|
|
<h3>Microsoft 365 Migration — Professional Services Firm</h3>
|
|
<p class="cs-client"><i class="fas fa-briefcase"></i> Law Firm — 25 Users, Lebanon</p>
|
|
<div class="cs-metrics">
|
|
<div class="cs-metric">
|
|
<span class="metric-value">25</span>
|
|
<span class="metric-label">Users Migrated</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">99.9%</span>
|
|
<span class="metric-label">Uptime Post-Go-Live</span>
|
|
</div>
|
|
<div class="cs-metric">
|
|
<span class="metric-value">↓60%</span>
|
|
<span class="metric-label">On-Prem Costs</span>
|
|
</div>
|
|
</div>
|
|
<div class="cs-detail">
|
|
<div class="cs-row"><strong>Challenge:</strong> Aging on-premises Exchange server and local file shares — high maintenance cost, single point of failure, and no disaster recovery plan.</div>
|
|
<div class="cs-row"><strong>Solution:</strong> Staged migration to Microsoft 365 with SharePoint, Teams, and Intune device management. Full data backup to Azure.</div>
|
|
<div class="cs-row"><strong>Result:</strong> Completed over one weekend with zero data loss. On-prem infrastructure costs dropped 60%. Staff productivity measurably improved.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cs-tags">
|
|
<span>Microsoft 365</span><span>Azure Backup</span><span>Intune MDM</span><span>Cloud Migration</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="cs-confidentiality"><i class="fas fa-lock" style="margin-right: 0.4rem;"></i>Client identities withheld at their request. Engagement details anonymized to protect confidentiality.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Grid Section -->
|
|
<section class="portfolio section" id="portfolio-section" style="display: none;">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-label">Our Work</span>
|
|
<h2 class="section-title">Success Stories</h2>
|
|
<p class="section-description">Explore our latest projects and digital transformations</p>
|
|
</div>
|
|
|
|
<div class="portfolio-filter">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="it-support">IT Support</button>
|
|
<button class="filter-btn" data-filter="cybersecurity">Cybersecurity</button>
|
|
<button class="filter-btn" data-filter="cloud">Cloud</button>
|
|
<button class="filter-btn" data-filter="consulting">Consulting</button>
|
|
</div>
|
|
|
|
<div id="portfolio-grid" class="portfolio-grid">
|
|
<!-- Portfolio items will be populated here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What Every Engagement Includes -->
|
|
<section class="clients-showcase section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-label">Our Standard</span>
|
|
<h2 class="section-title">What Every Engagement Includes</h2>
|
|
<p class="section-description">No matter the scope, these are our non-negotiable deliverables on every project</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem;">
|
|
<div style="text-align: center; padding: 2rem;">
|
|
<i class="fas fa-search" style="font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 1rem;"></i>
|
|
<h4 style="margin-bottom: 0.5rem;">Free Discovery Audit</h4>
|
|
<p style="opacity: 0.8;">Every engagement starts with a no-cost assessment of your environment, goals, and risk exposure — before any commitment.</p>
|
|
</div>
|
|
<div style="text-align: center; padding: 2rem;">
|
|
<i class="fas fa-file-alt" style="font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 1rem;"></i>
|
|
<h4 style="margin-bottom: 0.5rem;">Full Documentation Handover</h4>
|
|
<p style="opacity: 0.8;">You own everything: network diagrams, runbooks, credentials, and complete handover docs. No vendor lock-in, ever.</p>
|
|
</div>
|
|
<div style="text-align: center; padding: 2rem;">
|
|
<i class="fas fa-headset" style="font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 1rem;"></i>
|
|
<h4 style="margin-bottom: 0.5rem;">Dedicated Point of Contact</h4>
|
|
<p style="opacity: 0.8;">One engineer who knows your environment and your team — reachable directly, not through a ticket queue.</p>
|
|
</div>
|
|
<div style="text-align: center; padding: 2rem;">
|
|
<i class="fas fa-chart-line" style="font-size: 2.5rem; color: var(--accent-cyan); margin-bottom: 1rem;"></i>
|
|
<h4 style="margin-bottom: 0.5rem;">30-Day Post-Deployment Review</h4>
|
|
<p style="opacity: 0.8;">30 days after go-live, we review metrics, address gaps, and confirm the solution is performing exactly as designed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta">
|
|
<div class="cta-bg"></div>
|
|
<div class="container">
|
|
<div class="cta-content">
|
|
<h2 class="cta-title">Ready to Be Our Next Success Story?</h2>
|
|
<p class="cta-description">Let's discuss how MSPE can help transform your business with proven solutions.</p>
|
|
<div class="cta-buttons">
|
|
<a href="contact.html" class="btn btn-primary btn-lg">Start Your Project</a>
|
|
<a href="services.html" class="btn btn-outline btn-lg">View Services</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-main">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="index.html" class="footer-logo">
|
|
<img src="images/logo/logo.png" alt="MSPE PRO" class="logo-image" width="200" height="50">
|
|
</a>
|
|
<p class="footer-description">We engineer possibilities. Transforming complexity into competitive advantage through innovative technology solutions and uncompromising security.</p>
|
|
<div class="footer-social">
|
|
<a href="https://www.facebook.com/mspe.pro" class="social-link" title="Facebook" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
|
|
<a href="https://www.linkedin.com/company/mspe-pro" class="social-link" title="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
|
|
<a href="https://x.com/mspe_pro" class="social-link" title="X (Twitter)" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
|
|
<a href="https://www.instagram.com/mspe.pro" class="social-link" title="Instagram" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<h4 class="footer-title">Quick Links</h4>
|
|
<ul>
|
|
<li><a href="about.html">About Us</a></li>
|
|
<li><a href="services.html">Our Services</a></li>
|
|
<li><a href="portfolio.html">Portfolio</a></li>
|
|
<li><a href="news.html">News & Events</a></li>
|
|
<li><a href="contact.html">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<h4 class="footer-title">Services</h4>
|
|
<ul>
|
|
<li><a href="services.html#it-support">IT Support & Maintenance</a></li>
|
|
<li><a href="services.html#cybersecurity">Cybersecurity Solutions</a></li>
|
|
<li><a href="services.html#cloud">Cloud Services</a></li>
|
|
<li><a href="services.html#consulting">Business Consulting</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-contact">
|
|
<h4 class="footer-title">Contact Info</h4>
|
|
<ul class="contact-list">
|
|
<li>
|
|
<i class="fas fa-envelope"></i>
|
|
<span data-site-email>info@mspe.pro</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-phone"></i>
|
|
<a href="tel:+96178782023" data-site-phone style="color:inherit;">+961 78 782 023</a>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-clock"></i>
|
|
<span>Available for consultations</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>Beirut, Lebanon</span>
|
|
</li>
|
|
</ul>
|
|
<div class="footer-newsletter">
|
|
<p>Get expert insights delivered to your inbox</p>
|
|
<form class="newsletter-form" id="footer-newsletter-form">
|
|
<input type="email" placeholder="Your email address" required aria-label="Email for newsletter">
|
|
<button type="submit" class="btn-newsletter">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p>© 2026 MSPE - Architects of Digital Resilience. All Rights Reserved.</p>
|
|
<div class="footer-bottom-links">
|
|
<a href="privacy.html">Privacy Policy</a>
|
|
<a href="terms.html">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Back to Top -->
|
|
<button class="back-to-top" id="back-to-top" aria-label="Back to top">
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|
|
|
|
<!-- Mobile Sticky CTA -->
|
|
<div class="mobile-sticky-cta">
|
|
<a href="calendar.html" class="btn btn-primary"><i class="fas fa-calendar-check"></i> Book Free Consultation</a>
|
|
</div>
|
|
|
|
<script src="js/main.js" defer></script>
|
|
<script src="js/ultimate-ui.js" defer></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
try {
|
|
const response = await fetch('/api/portfolio.php?status=published');
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.data && result.data.length > 0) {
|
|
// Hide "Coming Soon" and "What We Deliver"
|
|
document.getElementById('coming-soon-section').style.display = 'none';
|
|
document.getElementById('what-we-deliver').style.display = 'none';
|
|
|
|
// Show Portfolio Section
|
|
document.getElementById('portfolio-section').style.display = 'block';
|
|
|
|
const grid = document.getElementById('portfolio-grid');
|
|
const items = result.data.map(item => {
|
|
const safeCategory = escapeAttr(item.category || 'general');
|
|
const safeCategoryText = escapeHTML(item.category || 'general');
|
|
const safeImage = escapeAttr(item.image || 'images/logo/logo.png');
|
|
const safeTitle = escapeHTML(item.title || 'Project');
|
|
const safeDescription = escapeHTML(item.description || ((item.content || '').substring(0, 100) + '...'));
|
|
const safeUrl = escapeAttr(item.url || '#');
|
|
return `
|
|
<div class="portfolio-item" data-category="${safeCategory}">
|
|
<div class="portfolio-image">
|
|
<img src="${safeImage}" alt="${safeTitle}" width="800" height="600" loading="lazy" decoding="async">
|
|
<div class="portfolio-overlay">
|
|
<div class="portfolio-content">
|
|
<span class="category-tag">${safeCategoryText}</span>
|
|
<h3>${safeTitle}</h3>
|
|
<p>${safeDescription}</p>
|
|
<a href="${safeUrl}" class="btn btn-sm btn-white">View Case Study</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
grid.innerHTML = items;
|
|
|
|
// Re-initialize filter logic
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
|
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
filterBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const filter = btn.dataset.filter;
|
|
|
|
portfolioItems.forEach(item => {
|
|
if (filter === 'all' || item.dataset.category === filter) {
|
|
item.style.display = 'block';
|
|
setTimeout(() => item.style.opacity = '1', 10);
|
|
} else {
|
|
item.style.opacity = '0';
|
|
setTimeout(() => item.style.display = 'none', 300);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load portfolio:', error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|