Skip to main content

<?php
/**
* Template Name: Service Page Template
* Description: Dynamic service page with token replacement
*/

get_header();

// Function to parse and return key benefits as array
function parse_key_benefits($benefits_string) {
if (empty($benefits_string)) {
return array();
}

// Split by pipe delimiter and trim whitespace
$benefits = array_map(‘trim’, explode(‘|’, $benefits_string));

// Remove empty values
$benefits = array_filter($benefits);

return $benefits;
}

// Get the dynamic values (these would come from your MPG plugin/system)
$page_title = ‘{{mpg_pagetitle}}’;
$h1_heading = ‘{{mpg_h1heading}}’;
$h1_hero_content = ‘{{mpg_h1herocontent}}’;
$service_overview = ‘{{mpg_serviceoverview}}’;
$key_benefits_raw = ‘{{mpg_keybenefits}}’;
$cta_text = ‘{{mpg_ctatext}}’;
$author = ‘{{mpg_author}}’;
$publication_date = ‘{{mpg_publicationdate}}’;

// Parse key benefits
$key_benefits = parse_key_benefits($key_benefits_raw);
?>

<div class=”service-page-container”>
<!– Hero Section –>
<section class=”hero-section”>
<div class=”hero-content”>
<h1 class=”hero-heading”><?php echo esc_html($h1_heading); ?></h1>
<p class=”hero-description”><?php echo esc_html($h1_hero_content); ?></p>
</div>
</section>

<!– Main Content Section –>
<section class=”main-content”>
<div class=”content-wrapper”>

<!– Service Overview –>
<div class=”service-overview”>
<h2>Service Overview</h2>
<div class=”overview-text”>
<?php echo wp_kses_post(wpautop($service_overview)); ?>
</div>
</div>

<!– Key Benefits –>
<?php if (!empty($key_benefits)) : ?>
<div class=”key-benefits”>
<h2>Key Benefits</h2>
<ul class=”benefits-list”>
<?php foreach ($key_benefits as $benefit) : ?>
<li>
<svg class=”benefit-icon” width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<path d=”M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z” stroke=”currentColor” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round”/>
</svg>
<span><?php echo esc_html($benefit); ?></span>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

<!– Call to Action –>
<div class=”cta-section”>
<div class=”cta-box”>
<h3>Ready to Get Started?</h3>
<p><?php echo esc_html($cta_text); ?></p>
<a href=”#contact” class=”cta-button”>Contact Us Today</a>
</div>
</div>

<!– Article Meta –>
<div class=”article-meta”>
<?php if (!empty($author)) : ?>
<span class=”meta-author”>By <?php echo esc_html($author); ?></span>
<?php endif; ?>
<?php if (!empty($publication_date)) : ?>
<span class=”meta-date”>Published: <?php echo esc_html($publication_date); ?></span>
<?php endif; ?>
</div>

</div>
</section>
</div>

<style>
/* Service Page Styles */
.service-page-container {
max-width: 100%;
margin: 0 auto;
}

/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px;
text-align: center;
}

.hero-content {
max-width: 900px;
margin: 0 auto;
}

.hero-heading {
font-size: 3rem;
font-weight: 700;
margin: 0 0 20px 0;
line-height: 1.2;
}

.hero-description {
font-size: 1.25rem;
line-height: 1.6;
opacity: 0.95;
max-width: 700px;
margin: 0 auto;
}

/* Main Content */
.main-content {
padding: 60px 20px;
background: #f8f9fa;
}

.content-wrapper {
max-width: 1200px;
margin: 0 auto;
}

/* Service Overview */
.service-overview {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 40px;
}

.service-overview h2 {
color: #2c3e50;
font-size: 2rem;
margin: 0 0 20px 0;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
display: inline-block;
}

.overview-text {
color: #555;
line-height: 1.8;
font-size: 1.1rem;
}

/* Key Benefits */
.key-benefits {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 40px;
}

.key-benefits h2 {
color: #2c3e50;
font-size: 2rem;
margin: 0 0 30px 0;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
display: inline-block;
}

.benefits-list {
list-style: none;
padding: 0;
margin: 0;
}

.benefits-list li {
display: flex;
align-items: flex-start;
padding: 15px 0;
border-bottom: 1px solid #e9ecef;
transition: transform 0.2s ease;
}

.benefits-list li:last-child {
border-bottom: none;
}

.benefits-list li:hover {
transform: translateX(5px);
}

.benefit-icon {
color: #667eea;
flex-shrink: 0;
margin-right: 15px;
margin-top: 2px;
}

.benefits-list li span {
color: #333;
font-size: 1.1rem;
line-height: 1.6;
}

/* CTA Section */
.cta-section {
margin-bottom: 40px;
}

.cta-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 50px 40px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.cta-box h3 {
font-size: 2rem;
margin: 0 0 15px 0;
}

.cta-box p {
font-size: 1.15rem;
margin: 0 0 30px 0;
opacity: 0.95;
}

.cta-button {
display: inline-block;
background: white;
color: #667eea;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
color: #764ba2;
}

/* Article Meta */
.article-meta {
background: white;
padding: 20px 40px;
border-radius: 12px;
display: flex;
gap: 30px;
flex-wrap: wrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.meta-author,
.meta-date {
color: #666;
font-size: 0.95rem;
}

.meta-author::before {
content: “👤 “;
}

.meta-date::before {
content: “📅 “;
}

/* Responsive Design */
@media (max-width: 768px) {
.hero-heading {
font-size: 2rem;
}

.hero-description {
font-size: 1.1rem;
}

.service-overview,
.key-benefits,
.cta-box {
padding: 25px;
}

.service-overview h2,
.key-benefits h2 {
font-size: 1.5rem;
}

.cta-box h3 {
font-size: 1.5rem;
}
}
</style>

<?php get_footer(); ?>