georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
00fda3e045723f84270b038908ae23ccc4c31ca2
MSPE/about.html
T

432 lines
28 KiB
HTML
Executable File
Raw Blame History

<!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="About MSPE — Beirut-based architects of digital resilience. Meet the cybersecurity and cloud experts helping businesses across Lebanon and the MENA region engineer resilient digital futures.">
<title>About Us | 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=Playfair+Display:wght@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=Playfair+Display:wght@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/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="stylesheet" href="css/header-fix.css">
<link rel="canonical" href="https://mspe.pro/about.html">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mspe.pro/about.html">
<meta property="og:title" content="About Us | MSPE - Architects of Digital Resilience">
<meta property="og:description" content="Learn about MSPE - Architects of Digital Resilience. Our vision, mission, and the team engineering digital futures for businesses worldwide.">
<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="About MSPE - Architects of Digital Resilience">
<meta name="twitter:description" content="Born from a bold belief: technology should be a catalyst for human potential. Discover the MSPE story.">
<meta name="twitter:image" content="https://mspe.pro/images/logo/logo.png">
</head>
<body>
<!-- Skip to Content (Accessibility) -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- 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 active">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">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">Who We Are</span>
<h1 class="page-title">About MSPE</h1>
<p class="page-description">We're architects of digital resilience - building the technological foundations that empower businesses to thrive in an ever-evolving digital landscape.</p>
</div>
</div>
</section>
<!-- About Intro -->
<section class="about-intro section">
<div class="container">
<div class="about-intro-grid">
<div class="about-intro-content">
<span class="section-label">Our Origin</span>
<h2 class="section-title">Born From a Bold Belief</h2>
<p>MSPE emerged from a fundamental conviction: technology should be a catalyst for human potential, not a barrier to it. We saw too many businesses struggling with fragmented solutions, reactive security, and technology that served itself rather than its users.</p>
<p>We founded MSPE to be different - to be the company that sees the whole picture, that thinks three steps ahead, and that treats every client's challenge as if it were our own. We're not here to sell services; we're here to architect futures.</p>
<div class="about-highlights">
<div class="highlight-item">
<div class="highlight-icon"><i class="fas fa-rocket"></i></div>
<div class="highlight-content">
<h4>Our Mission</h4>
<p><strong>To transform complexity into competitive advantage.</strong> We engineer technology ecosystems that don't just solve today's problems - they anticipate tomorrow's opportunities. Every solution we craft is designed to amplify human capability, protect digital assets, and unlock growth that once seemed impossible.</p>
</div>
</div>
<div class="highlight-item">
<div class="highlight-icon"><i class="fas fa-compass"></i></div>
<div class="highlight-content">
<h4>Our Vision</h4>
<p><strong>A world where every organization, regardless of size, operates with the digital resilience of a Fortune 500 company.</strong> We envision a future where security is invisible yet impenetrable, where technology amplifies creativity rather than constraining it, and where businesses are limited only by their ambition - never by their infrastructure.</p>
</div>
</div>
</div>
</div>
<div class="about-intro-visual">
<div class="about-image-grid">
<div class="about-image about-image-1">
<img src="images/about/team-collab.svg" alt="MSPE Team Collaboration" style="width:100%; height:100%; object-fit:cover; border-radius:16px;" width="1200" height="900">
</div>
<div class="about-image about-image-2">
<img src="images/about/data-center.svg" alt="MSPE Data Center Operations" style="width:100%; height:100%; object-fit:cover; border-radius:16px;" width="1200" height="900">
</div>
<div class="about-image about-image-3">
<img src="images/about/client-success.svg" alt="MSPE Client Success" style="width:100%; height:100%; object-fit:cover; border-radius:16px;" width="1200" height="900">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Values -->
<section class="values section">
<div class="container">
<div class="section-header">
<span class="section-label">What Drives Us</span>
<h2 class="section-title">The Six Pillars of MSPE</h2>
<p class="section-description">These aren't just values - they're non-negotiable commitments that define who we are</p>
</div>
<div class="values-grid">
<div class="value-card">
<div class="value-icon"><i class="fas fa-brain"></i></div>
<h3>Anticipatory Intelligence</h3>
<p>We don't wait for problems to find you. We study patterns, analyze trends, and build defenses against threats that don't yet exist. Prevention isn't just better than cure - it's the only acceptable approach.</p>
</div>
<div class="value-card">
<div class="value-icon"><i class="fas fa-eye"></i></div>
<h3>Radical Transparency</h3>
<p>No black boxes. No hidden agendas. No technical jargon designed to confuse. We believe you have the right to understand exactly what we're doing, why we're doing it, and what it costs.</p>
</div>
<div class="value-card">
<div class="value-icon"><i class="fas fa-chess-knight"></i></div>
<h3>Strategic Courage</h3>
<p>We'll tell you what you need to hear, not what you want to hear. If your current path has risks, we'll say so. If a cheaper solution won't work, we'll explain why. Your trust is worth more than any contract.</p>
</div>
<div class="value-card">
<div class="value-icon"><i class="fas fa-infinity"></i></div>
<h3>Boundless Curiosity</h3>
<p>Technology never stops evolving, and neither do we. Every challenge is a puzzle to solve, every project an opportunity to learn. We bring the same enthusiasm to our hundredth project as our first.</p>
</div>
<div class="value-card">
<div class="value-icon"><i class="fas fa-fingerprint"></i></div>
<h3>Bespoke Precision</h3>
<p>Cookie-cutter solutions create cookie-cutter results. Every organization is unique, and every solution we create is tailored to your specific context, culture, and aspirations.</p>
</div>
<div class="value-card">
<div class="value-icon"><i class="fas fa-shield-virus"></i></div>
<h3>Uncompromising Security</h3>
<p>Security isn't a feature - it's the foundation. It's woven into every recommendation we make, every system we design, every line of code we touch. There are no shortcuts when trust is on the line.</p>
</div>
</div>
</div>
</section>
<!-- Our Approach Section -->
<section class="team section">
<div class="container">
<div class="section-header">
<span class="section-label">How We Work</span>
<h2 class="section-title">The MSPE Approach</h2>
<p class="section-description">A methodology built for results, not billable hours</p>
</div>
<div class="team-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
<div class="team-card" style="text-align: center; padding: 2.5rem;">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent-cyan), var(--secondary-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
<span style="font-size: 2rem; font-weight: bold; color: white;">01</span>
</div>
<h3 style="font-size: 1.3rem; margin-bottom: 0.5rem;">Deep Discovery</h3>
<p style="opacity: 0.8;">We don't start with solutions - we start with questions. Understanding your business, challenges, and aspirations before touching any technology.</p>
</div>
<div class="team-card" style="text-align: center; padding: 2.5rem;">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent-cyan), var(--secondary-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
<span style="font-size: 2rem; font-weight: bold; color: white;">02</span>
</div>
<h3 style="font-size: 1.3rem; margin-bottom: 0.5rem;">Strategic Architecture</h3>
<p style="opacity: 0.8;">We design solutions that work today and scale tomorrow. Every recommendation is mapped to your goals, budget, and growth trajectory.</p>
</div>
<div class="team-card" style="text-align: center; padding: 2.5rem;">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent-cyan), var(--secondary-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
<span style="font-size: 2rem; font-weight: bold; color: white;">03</span>
</div>
<h3 style="font-size: 1.3rem; margin-bottom: 0.5rem;">Precision Execution</h3>
<p style="opacity: 0.8;">Implementation with minimal disruption and maximum impact. We move fast, but never at the expense of quality or security.</p>
</div>
<div class="team-card" style="text-align: center; padding: 2.5rem;">
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent-cyan), var(--secondary-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;">
<span style="font-size: 2rem; font-weight: bold; color: white;">04</span>
</div>
<h3 style="font-size: 1.3rem; margin-bottom: 0.5rem;">Continuous Evolution</h3>
<p style="opacity: 0.8;">Our relationship doesn't end at deployment. We monitor, optimize, and evolve your systems as your business grows and threats change.</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="team-section section" id="team" hidden>
<div class="container">
<div class="section-header">
<span class="section-label">Our People</span>
<h2 class="section-title">Meet the Team</h2>
<p class="section-description">Experts dedicated to building resilient, future-ready systems</p>
</div>
<div class="team-grid" id="team-grid" data-team-grid="true"></div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials section" id="testimonials">
<div class="container">
<div class="section-header">
<span class="section-label">Client Voices</span>
<h2 class="section-title">What Clients Say</h2>
<p class="section-description">Real feedback from teams we support and protect</p>
</div>
<div class="testimonials-slider" id="testimonials-slider">
<div class="testimonial-card active">
<div class="testimonial-content">
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
<p class="testimonial-text">"MSPE transformed our IT infrastructure in weeks. Their proactive approach to security and hands-on support made us feel like their only client. Fast, responsive, and genuinely knowledgeable."</p>
<div class="testimonial-author">
<div class="author-avatar">RH</div>
<div class="author-info">
<h4>Rami Haddad</h4>
<p>Operations Manager, Levant Trading Co.</p>
</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
<p class="testimonial-text">"We needed a partner who understood both cloud migration and cybersecurity. MSPE delivered on both fronts with zero downtime during our transition. Highly recommend their team."</p>
<div class="testimonial-author">
<div class="author-avatar">NK</div>
<div class="author-info">
<h4>Nadia Khoury</h4>
<p>IT Director, Cedar Financial Group</p>
</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
<p class="testimonial-text">"What sets MSPE apart is their honesty and transparency. They don't oversell — they assess what you actually need and deliver exactly that. Our security posture improved dramatically."</p>
<div class="testimonial-author">
<div class="author-avatar">MS</div>
<div class="author-info">
<h4>Marc Sfeir</h4>
<p>CEO, BlueLine Digital Agency</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonials-nav">
<button class="testimonial-prev" aria-label="Previous testimonial">
<i class="fas fa-chevron-left"></i>
</button>
<div class="testimonial-dots" id="testimonial-dots"></div>
<button class="testimonial-next" aria-label="Next testimonial">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</section>
<!-- Technologies Section -->
<section class="certifications section">
<div class="container">
<div class="section-header">
<span class="section-label">Our Expertise</span>
<h2 class="section-title">Technologies We Master</h2>
<p class="section-description">We stay at the forefront of technology to deliver cutting-edge solutions</p>
</div>
<div class="cert-grid" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:2rem; margin-top:2rem;">
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/azure/azure-original.svg" alt="Microsoft Azure" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block;">
<span style="font-size:0.85rem;">Microsoft Azure</span>
</div>
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" alt="Amazon Web Services" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block; filter:brightness(0) invert(1);">
<span style="font-size:0.85rem;">Amazon Web Services</span>
</div>
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/googlecloud/googlecloud-original.svg" alt="Google Cloud" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block;">
<span style="font-size:0.85rem;">Google Cloud</span>
</div>
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" alt="Linux" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block;">
<span style="font-size:0.85rem;">Linux & Open Source</span>
</div>
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/kubernetes/kubernetes-original.svg" alt="Kubernetes" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block;">
<span style="font-size:0.85rem;">Kubernetes</span>
</div>
<div class="cert-item" style="text-align:center; padding:1.5rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; transition:all 0.3s ease;">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" alt="Docker" width="48" height="48" style="height:48px; margin:0 auto 0.75rem; display:block;">
<span style="font-size:0.85rem;">Docker</span>
</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 Work Together?</h2>
<p class="cta-description">Let's discuss how MSPE can help transform your business with our expert services.</p>
<div class="cta-buttons">
<a href="contact.html" class="btn btn-primary btn-lg">Contact Us Today</a>
<a href="services.html" class="btn btn-outline btn-lg">Explore 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>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>&copy; 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>
<script src="js/main.js" defer></script>
<script src="js/ultimate-ui.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink