Site improvements: nav refactor, CSS readability, hover fixes, remove unverified badges
- Refactored navigation: all 44 pages now use shared includes/nav.php - Added Free Tools link to navigation (was missing from 29+ pages) - CSS readability: darker body text (#333), secondary text (#555), bolder hero subtitle - CSS: darkened link colour (#148a72) for WCAG AA compliance - CSS: increased stat label font size to 1rem - Fixed industry-card hover white-on-white text bug - Removed ICO Registered and Cyber Essentials claims (not yet registered) - Cache version bumped to v1.1.2
This commit is contained in:
root
225
includes.bak.20260210/includes/components/location-cta.php
Normal file
225
includes.bak.20260210/includes/components/location-cta.php
Normal file
@@ -0,0 +1,225 @@
|
||||
<?php
|
||||
/**
|
||||
* Location CTA Component
|
||||
* Displays location links at the bottom of service pages
|
||||
*
|
||||
* Usage:
|
||||
* include($_SERVER['DOCUMENT_ROOT'] . '/includes/components/location-cta.php');
|
||||
* Or: displayLocationCTA();
|
||||
*/
|
||||
|
||||
// Include URL config if not already loaded
|
||||
if (!isset($locationData)) {
|
||||
include($_SERVER['DOCUMENT_ROOT'] . '/includes/url-config.php');
|
||||
}
|
||||
|
||||
/**
|
||||
* Display location CTA section
|
||||
*
|
||||
* @param string|null $serviceName Optional service name to customize the message
|
||||
*/
|
||||
function displayLocationCTA($serviceName = null) {
|
||||
global $locationData;
|
||||
|
||||
$serviceText = $serviceName ? htmlspecialchars($serviceName) . ' services' : 'data services';
|
||||
?>
|
||||
<section class="location-cta">
|
||||
<div class="container">
|
||||
<div class="location-cta-content">
|
||||
<h2>Serving Businesses Across the UK</h2>
|
||||
<p>We provide professional <?php echo $serviceText; ?> to businesses throughout the United Kingdom, with dedicated support for major business centres.</p>
|
||||
|
||||
<div class="location-links">
|
||||
<?php foreach ($locationData as $key => $location): ?>
|
||||
<a href="<?php echo htmlspecialchars($location['url']); ?>" class="location-link">
|
||||
<span class="location-icon">
|
||||
<?php echo getLocationIcon($key); ?>
|
||||
</span>
|
||||
<span class="location-name"><?php echo htmlspecialchars($location['title']); ?></span>
|
||||
<span class="location-region"><?php echo htmlspecialchars($location['region']); ?></span>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="location-cta-footer">
|
||||
<p>Not in one of these locations? We serve businesses throughout the UK with remote data services.</p>
|
||||
<a href="/quote" class="btn btn-primary">Request a Consultation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.location-cta {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #144784 0%, #1a5a9e 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.location-cta-content {
|
||||
text-align: center;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.location-cta h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.location-cta > .container > .location-cta-content > p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 40px;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.location-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.location-link {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px 30px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.location-link:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.location-region {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.location-cta-footer {
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.location-cta-footer p {
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.location-cta .btn-primary {
|
||||
background: #179e83;
|
||||
color: white;
|
||||
padding: 14px 32px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.location-cta .btn-primary:hover {
|
||||
background: #14876f;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.location-cta {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.location-links {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.location-link {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Get location icon based on city
|
||||
*/
|
||||
function getLocationIcon($locationKey) {
|
||||
$icons = [
|
||||
'london' => '🏙️',
|
||||
'manchester' => '🏭',
|
||||
'birmingham' => '🏛️',
|
||||
'edinburgh' => '🏴',
|
||||
'cardiff' => '🏴'
|
||||
];
|
||||
return $icons[$locationKey] ?? '📍';
|
||||
}
|
||||
|
||||
/**
|
||||
* Display compact location links (for footers or sidebars)
|
||||
*/
|
||||
function displayCompactLocationLinks() {
|
||||
global $locationData;
|
||||
?>
|
||||
<div class="compact-locations">
|
||||
<span class="compact-locations-label">Serving:</span>
|
||||
<?php
|
||||
$locations = array_keys($locationData);
|
||||
foreach ($locations as $index => $key):
|
||||
$location = $locationData[$key];
|
||||
?>
|
||||
<a href="<?php echo htmlspecialchars($location['url']); ?>"><?php echo htmlspecialchars($location['title']); ?></a><?php echo $index < count($locations) - 1 ? ', ' : ''; ?>
|
||||
<?php endforeach; ?>
|
||||
<span class="compact-locations-suffix">and the UK</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.compact-locations {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.compact-locations a {
|
||||
color: #179e83;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.compact-locations a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.compact-locations-label,
|
||||
.compact-locations-suffix {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Auto-display if this file is included directly without function call
|
||||
if (basename($_SERVER['SCRIPT_FILENAME']) === 'location-cta.php') {
|
||||
displayLocationCTA();
|
||||
}
|
||||
152
includes.bak.20260210/includes/components/related-services.php
Normal file
152
includes.bak.20260210/includes/components/related-services.php
Normal file
@@ -0,0 +1,152 @@
|
||||
<?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: #144784;
|
||||
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: #144784;
|
||||
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: #179e83;
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user