468 lines
25 KiB
HTML
Executable File
468 lines
25 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 Insights — Cybersecurity, cloud, and IT strategy perspectives from Beirut, Lebanon. Practical advice for businesses navigating digital transformation in the MENA region.">
|
|
<title>News & Insights | MSPE - Architects of Digital Resilience</title>
|
|
<link rel="icon" type="image/png" href="images/logo/logo.png">
|
|
|
|
<!-- Fonts -->
|
|
<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>
|
|
|
|
<!-- Icons -->
|
|
<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>
|
|
|
|
<!-- Styles -->
|
|
<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/news.html">
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://mspe.pro/news.html">
|
|
<meta property="og:title" content="News & Insights | MSPE - Architects of Digital Resilience">
|
|
<meta property="og:description" content="Stay ahead with MSPE perspectives on cybersecurity, cloud innovation, and digital transformation.">
|
|
<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 News & Insights">
|
|
<meta name="twitter:description" content="Perspectives on cybersecurity, cloud innovation, and digital transformation.">
|
|
<meta name="twitter:image" content="https://mspe.pro/images/logo/logo.png">
|
|
</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>
|
|
|
|
<!-- Preloader -->
|
|
<div class="preloader">
|
|
<div class="preloader-inner">
|
|
<div class="preloader-logo">
|
|
<img src="images/logo/logo.png" alt="MSPE PRO" style="height: 50px;" width="200" height="50">
|
|
</div>
|
|
<div class="preloader-spinner"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<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">Portfolio</a></li>
|
|
<li class="nav-item"><a href="news.html" class="nav-link active">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 class="hero-shape hero-shape-1"></div>
|
|
<div class="hero-shape hero-shape-2"></div>
|
|
<div class="hero-particles"></div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="page-hero-content">
|
|
<h1 class="page-title">Insights & <span class="text-gradient">Perspectives</span></h1>
|
|
<p class="page-subtitle">Thoughts on technology, security, and digital transformation from the MSPE team</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coming Soon Section -->
|
|
<section class="news-filter-section" id="coming-soon-section">
|
|
<div class="container">
|
|
<div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 4rem 2rem;">
|
|
<div style="width: 120px; height: 120px; background: linear-gradient(135deg, var(--accent-cyan), var(--secondary-teal)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem;">
|
|
<i class="fas fa-pen-fancy" style="font-size: 3rem; color: white;"></i>
|
|
</div>
|
|
<h2 style="font-size: 2.5rem; margin-bottom: 1rem;">Insights Coming Soon</h2>
|
|
<p style="font-size: 1.2rem; opacity: 0.8; line-height: 1.8; margin-bottom: 2rem;">
|
|
We're preparing thoughtful content on cybersecurity trends, cloud innovation, and digital transformation strategies. Our team is crafting insights that will actually help your business - not just fill space.
|
|
</p>
|
|
<p style="font-size: 1.1rem; opacity: 0.7; margin-bottom: 2rem;">
|
|
Quality over quantity. When we publish, it will be worth your time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- News Grid Section -->
|
|
<section class="news-grid-section" id="news-section" style="display: none;">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Latest <span class="text-gradient">Insights</span></h2>
|
|
<p class="section-subtitle">Trends, strategies, and updates from the MSPE team</p>
|
|
</div>
|
|
|
|
<div id="news-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem;">
|
|
<!-- News items will be populated here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stay Connected Section -->
|
|
<section class="upcoming-events">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Stay <span class="text-gradient">Connected</span></h2>
|
|
<p class="section-subtitle">Be the first to know when we publish new insights</p>
|
|
</div>
|
|
|
|
<div style="max-width: 600px; margin: 3rem auto; text-align: center;">
|
|
<p style="font-size: 1.1rem; opacity: 0.8; margin-bottom: 2rem;">
|
|
Want to be notified when we launch our insights section? Drop us a message and we'll keep you in the loop.
|
|
</p>
|
|
<a href="contact.html" class="btn btn-primary btn-lg">Get Notified</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Section -->
|
|
<section class="newsletter-section">
|
|
<div class="container">
|
|
<div class="newsletter-card">
|
|
<div class="newsletter-content">
|
|
<div class="newsletter-icon">
|
|
<i class="fas fa-envelope-open-text"></i>
|
|
</div>
|
|
<div class="newsletter-text">
|
|
<h3>Subscribe to Our Newsletter</h3>
|
|
<p>Get the latest news, insights, and updates delivered directly to your inbox</p>
|
|
</div>
|
|
</div>
|
|
<form class="newsletter-form" id="newsletter-form">
|
|
<div class="newsletter-input-group">
|
|
<input type="email" name="email" placeholder="Enter your email address" required>
|
|
<button type="submit" class="btn btn-primary">
|
|
Subscribe <i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
<p class="newsletter-note">We respect your privacy. Unsubscribe at any time.</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section">
|
|
<div class="cta-bg">
|
|
<div class="cta-shape cta-shape-1"></div>
|
|
<div class="cta-shape cta-shape-2"></div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="cta-content">
|
|
<h2 class="cta-title">Ready to Transform Your IT Infrastructure?</h2>
|
|
<p class="cta-text">Let's discuss how MSPE can help secure and optimize your business technology</p>
|
|
<div class="cta-buttons">
|
|
<a href="contact.html" class="btn btn-white">Schedule Consultation</a>
|
|
<a href="tel:+96178782023" class="btn btn-outline-white" data-site-phone>
|
|
<i class="fas fa-phone-alt"></i> Call Us Now
|
|
</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>
|
|
|
|
<!-- Scripts -->
|
|
<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/news.php?status=published');
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.data && result.data.length > 0) {
|
|
// Hide "Coming Soon" and "What to Expect"
|
|
document.getElementById('coming-soon-section').style.display = 'none';
|
|
document.getElementById('what-to-expect').style.display = 'none';
|
|
|
|
// Show News Section
|
|
document.getElementById('news-section').style.display = 'block';
|
|
|
|
const grid = document.getElementById('news-grid');
|
|
grid.innerHTML = result.data.map(item => {
|
|
const safeImage = escapeAttr(item.featured_image || 'images/logo/logo.png');
|
|
const safeTitle = escapeHTML(item.title || 'News');
|
|
const safeCategory = escapeHTML(item.category || 'news');
|
|
const safeId = escapeAttr(item.id || '');
|
|
const safeExcerpt = escapeHTML(item.excerpt || ((item.content || '').substring(0, 100) + '...'));
|
|
const safeDate = escapeHTML(new Date(item.created_at).toLocaleDateString());
|
|
return `
|
|
<div class="news-card" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.3s ease;">
|
|
<div class="news-image" style="height: 200px; overflow: hidden;">
|
|
<img src="${safeImage}" alt="${safeTitle}" width="800" height="450" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div class="news-content" style="padding: 1.5rem;">
|
|
<div class="news-meta" style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.5rem;">
|
|
<span class="news-category" style="color: var(--primary); font-weight: 600; text-transform: uppercase;">${safeCategory}</span>
|
|
<span class="news-date"> • ${safeDate}</span>
|
|
</div>
|
|
<h3 class="news-title" style="font-size: 1.25rem; margin-bottom: 0.75rem; color: #0f172a;">${safeTitle}</h3>
|
|
<p class="news-excerpt" style="color: #475569; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem;">
|
|
${safeExcerpt}
|
|
</p>
|
|
<a href="news.html?id=${safeId}" class="btn-link" style="color: var(--primary); font-weight: 600; text-decoration: none;">Read More <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load news:', error);
|
|
}
|
|
|
|
// ... existing newsletter code ...
|
|
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const newsCards = document.querySelectorAll('.news-card, .featured-article');
|
|
const searchInput = document.getElementById('news-search');
|
|
|
|
// Filter by category
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
filterBtns.forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const filter = this.dataset.filter;
|
|
|
|
newsCards.forEach(card => {
|
|
if (filter === 'all' || card.dataset.category === filter) {
|
|
card.style.display = '';
|
|
card.style.animation = 'fadeInUp 0.5s ease forwards';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Search functionality
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
|
|
newsCards.forEach(card => {
|
|
const title = card.querySelector('.news-title, .article-title').textContent.toLowerCase();
|
|
const excerpt = card.querySelector('.news-excerpt, .article-excerpt');
|
|
const excerptText = excerpt ? excerpt.textContent.toLowerCase() : '';
|
|
|
|
if (title.includes(searchTerm) || excerptText.includes(searchTerm)) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Load more functionality
|
|
const loadMoreBtn = document.getElementById('load-more-news');
|
|
if (loadMoreBtn) {
|
|
loadMoreBtn.addEventListener('click', function() {
|
|
const spinner = this.querySelector('.fa-spinner');
|
|
spinner.style.display = 'inline-block';
|
|
|
|
// Simulate loading more articles
|
|
setTimeout(() => {
|
|
spinner.style.display = 'none';
|
|
// In production, this would load from API
|
|
alert('All articles have been loaded!');
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// Newsletter form
|
|
const newsletterForm = document.getElementById('newsletter-form');
|
|
if (newsletterForm) {
|
|
newsletterForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const emailInput = this.querySelector('input[type="email"]');
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const email = emailInput.value;
|
|
|
|
if (!email) return;
|
|
|
|
const originalText = submitBtn.innerHTML;
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/api/contact.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: email,
|
|
first_name: 'Newsletter',
|
|
last_name: 'Subscriber',
|
|
message: 'Newsletter subscription from news page',
|
|
newsletter: true
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
if (typeof showNotification === 'function') {
|
|
showNotification('Thank you for subscribing!', 'success');
|
|
} else {
|
|
alert('Thank you for subscribing! We\'ll keep you updated.');
|
|
}
|
|
this.reset();
|
|
} else {
|
|
if (typeof showNotification === 'function') {
|
|
showNotification(result.message || 'Subscription failed. Please try again.', 'error');
|
|
} else {
|
|
alert(result.message || 'Subscription failed. Please try again.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Newsletter error:', error);
|
|
alert('An error occurred. Please try again.');
|
|
} finally {
|
|
submitBtn.innerHTML = originalText;
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|