153 lines
4.5 KiB
PHP
153 lines
4.5 KiB
PHP
<?php
|
|
/**
|
|
* Related Services Component
|
|
* Displays related services at the bottom of service pages
|
|
*
|
|
* Usage:
|
|
* $currentService = 'web-scraping';
|
|
* include($_SERVER['DOCUMENT_ROOT'] . '/includes/components/related-services.php');
|
|
*/
|
|
|
|
// Include URL config if not already loaded
|
|
if (!isset($serviceData)) {
|
|
include($_SERVER['DOCUMENT_ROOT'] . '/includes/url-config.php');
|
|
}
|
|
|
|
/**
|
|
* Display related services section
|
|
*
|
|
* @param string $currentService Current service key
|
|
* @param int $maxServices Maximum number of related services to show
|
|
*/
|
|
function displayRelatedServices($currentService, $maxServices = 3) {
|
|
global $serviceData, $relatedServices;
|
|
|
|
$related = $relatedServices[$currentService] ?? [];
|
|
|
|
if (empty($related)) {
|
|
return;
|
|
}
|
|
|
|
// Limit to max services
|
|
$related = array_slice($related, 0, $maxServices);
|
|
?>
|
|
<section class="related-services">
|
|
<div class="container">
|
|
<h2>Related Services</h2>
|
|
<p class="section-intro">Explore our other data services that complement <?php echo htmlspecialchars($serviceData[$currentService]['shortTitle'] ?? 'this service'); ?>.</p>
|
|
|
|
<div class="related-services-grid">
|
|
<?php foreach ($related as $serviceKey): ?>
|
|
<?php if (isset($serviceData[$serviceKey])): ?>
|
|
<?php $service = $serviceData[$serviceKey]; ?>
|
|
<a href="<?php echo htmlspecialchars($service['url']); ?>" class="related-service-card">
|
|
<div class="service-icon">
|
|
<?php if (isset($service['icon'])): ?>
|
|
<img src="/assets/images/<?php echo htmlspecialchars($service['icon']); ?>"
|
|
alt="<?php echo htmlspecialchars($service['title']); ?>"
|
|
loading="lazy">
|
|
<?php endif; ?>
|
|
</div>
|
|
<h3><?php echo htmlspecialchars($service['title']); ?></h3>
|
|
<p><?php echo htmlspecialchars($service['description']); ?></p>
|
|
<span class="learn-more">Learn More →</span>
|
|
</a>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.related-services {
|
|
padding: 80px 0;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.related-services h2 {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
color: #7c3aed;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.related-services .section-intro {
|
|
text-align: center;
|
|
color: #666;
|
|
max-width: 600px;
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
.related-services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 30px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.related-service-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
|
transition: all 0.3s ease;
|
|
display: block;
|
|
}
|
|
|
|
.related-service-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.related-service-card .service-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.related-service-card .service-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.related-service-card h3 {
|
|
font-size: 1.25rem;
|
|
color: #7c3aed;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.related-service-card p {
|
|
color: #666;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.related-service-card .learn-more {
|
|
color: #6d28d9;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.related-services {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.related-services-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
<?php
|
|
}
|
|
|
|
// Auto-display if $currentService is set
|
|
if (isset($currentService)) {
|
|
displayRelatedServices($currentService);
|
|
}
|