<?php
/**
* Plugin Name: MenPowered Training – Landing Shortcode
* Description: Converts the MenPowered React single-page layout into a native WordPress shortcode. Use [menpowered_training].
* Version: 1.0.0
* Author: MenPowered Training Associates
* License: GPLv2 or later
*/
if (!defined('ABSPATH')) { exit; }
class MPTA_Landing_Shortcode {
const HANDLE = 'mpta-landing';
public static function init() {
add_shortcode('menpowered_training', [__CLASS__, 'render']);
add_action('wp_enqueue_scripts', [__CLASS__, 'register_assets']);
}
public static function register_assets() {
$base = plugin_dir_url(__FILE__);
wp_register_style(self::HANDLE, $base . 'assets/style.css', [], '1.0.0');
wp_register_script(self::HANDLE, $base . 'assets/app.js', [], '1.0.0', true);
}
public static function render($atts = [], $content = '') {
wp_enqueue_style(self::HANDLE);
wp_enqueue_script(self::HANDLE);
$brand = 'MenPowered Training Associates';
ob_start(); ?>
<section class="mpta-wrapper" aria-label="<?php echo esc_attr($brand); ?>">
<?php echo self::header_html($brand); ?>
<main>
<?php echo self::hero_html(); ?>
<?php echo self::trustbar_html(); ?>
<?php echo self::how_html(); ?>
<?php echo self::tracks_html(); ?>
<?php echo self::impact_html(); ?>
<?php echo self::forwhom_html(); ?>
<?php echo self::testimonials_html(); ?>
<?php echo self::faq_html(); ?>
<?php echo self::cta_html(); ?>
<?php echo self::contact_html(); ?>
</main>
<?php echo self::footer_html($brand); ?>
</section>
<?php return ob_get_clean();
}
private static function header_html($brand) {
return '<header class="mpta-header"><div class="mpta-container mpta-flex mpta-justify">'
.'<div class="mpta-logo" aria-label="MenPowered logo">MP</div>'
.'<span class="mpta-brand">'.esc_html($brand).'</span>'
.'<nav class="mpta-nav">'
.'<a href="#how">How it works</a>'
.'<a href="#tracks">Training areas</a>'
.'<a href="#impact">Impact</a>'
.'<a href="#contact">Contact</a>'
.'<a class="mpta-btn mpta-primary" href="#request">Request training</a>'
.'</nav>'
.'</div></header>';
}
private static function hero_html() {
ob_start(); ?>
<section class="mpta-hero" aria-label="Hero">
<div class="mpta-container">
<div class="mpta-grid-hero">
<div>
<h1 class="mpta-h1">Name the training. We'll find the trainer.</h1>
<p class="mpta-lead">We source expert-led training for charities by partnering with professionals who volunteer their time at a reduced, impact‑first fee. Tell us what you need—safeguarding, fundraising, governance, mental health, or anything bespoke—and we'll match you with a vetted trainer.</p>
<div class="mpta-row-gap">
<a href="#request" class="mpta-btn mpta-primary">Request a training</a>
<a href="#volunteer" class="mpta-btn mpta-outline">Volunteer as a trainer</a>
</div>
<p class="mpta-meta">Average lead time 2–4 weeks • UK & online delivery • Discounts for small charities</p>
</div>
<div>
<div class="mpta-card">
<span class="mpta-badge">Instant enquiry</span>
<h3 class="mpta-h3">Tell us your training need</h3>
<p class="mpta-muted">Share a title and a few outcomes—you'll get a friendly reply with options.</p>
<?php echo self::quick_form_html(); ?>
</div>
</div>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function trustbar_html() {
$items = ['Community Fund','Local Councils','Faith Groups','Foundations','CICs'];
ob_start(); ?>
<section class="mpta-trustbar" aria-label="Trust bar">
<div class="mpta-container mpta-trust">
<?php foreach ($items as $i): ?>
<div class="mpta-trust-item">Trusted by <?php echo esc_html($i); ?></div>
<?php endforeach; ?>
</div>
</section>
<?php return ob_get_clean();
}
private static function how_html() {
$steps = [
['You name the training','Send a title and 3–5 outcomes. Include audience size, delivery mode (online/in‑person), and preferred dates.'],
['We source a trainer','We reach our network of professionals who donate time at a discounted fee. We shortlist the best fits.'],
['You pick & prepare','Choose a trainer. We handle scoping, learning outcomes, materials, and logistics with your team.'],
['Deliver & evidence impact','We deliver training and provide attendance data, feedback summaries, and certificates if needed.'],
];
ob_start(); ?>
<section id="how" class="mpta-section">
<div class="mpta-container">
<div class="mpta-grid-2">
<div>
<h2 class="mpta-h2">How it works</h2>
<p class="mpta-muted">A simple, impact‑first model that unlocks professional learning for charities of every size.</p>
</div>
<div class="mpta-steps">
<?php foreach ($steps as $i => $s): ?>
<div class="mpta-card">
<div class="mpta-step"><span><?php echo $i+1; ?></span></div>
<h3 class="mpta-h4"><?php echo esc_html($s[0]); ?></h3>
<p class="mpta-muted"><?php echo esc_html($s[1]); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function tracks_html() {
$items = [
['Safeguarding & DBS','Adult & Children, trustees and volunteer briefings, safer recruitment.'],
['Fundraising & Bid Writing','Grants (e.g., Awards for All), trusts & foundations, corporate giving, stewardship.'],
['Governance & Finance','Trustee roles, risk, reserves, budgeting, Charity Commission basics.'],
['Mental Health & Wellbeing','MHFA, trauma awareness, self‑care for staff & volunteers.'],
['Community Delivery Skills','Facilitation, co‑production, youth work, safeguarding in practice.'],
['Operations & Compliance','H&S, GDPR, data collection, evaluation, quality assurance.'],
['DEI & Lived Experience','Inclusive practice, cultural competence, community engagement.'],
['Custom & Bespoke','Tell us what you need—we’ll build it with you.'],
];
ob_start(); ?>
<section id="tracks" class="mpta-section">
<div class="mpta-container">
<h2 class="mpta-h2">Popular training areas</h2>
<p class="mpta-muted">If it helps your mission, we’ll try to source it.</p>
<div class="mpta-grid-cards">
<?php foreach ($items as $x): ?>
<div class="mpta-card">
<h3 class="mpta-h4"><?php echo esc_html($x[0]); ?></h3>
<p class="mpta-muted"><?php echo esc_html($x[1]); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function impact_html() {
ob_start(); ?>
<section id="impact" class="mpta-section">
<div class="mpta-container">
<div class="mpta-card">
<h2 class="mpta-h2">Impact at a glance</h2>
<p class="mpta-muted">We blend professional standards with community heart.</p>
<div class="mpta-grid-3">
<div class="mpta-kpi"><div class="mpta-kpi-num" data-kpi="780">780+</div><div class="mpta-kpi-label">Learners supported</div></div>
<div class="mpta-kpi"><div class="mpta-kpi-num" data-kpi="1200">£1,200</div><div class="mpta-kpi-label">Value unlocked via discounted fees</div></div>
<div class="mpta-kpi"><div class="mpta-kpi-num" data-kpi="96">96%</div><div class="mpta-kpi-label">Avg. satisfaction rating</div></div>
</div>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function forwhom_html() {
$items = [
['Charities & CIOs','From micro‑charities to national networks.'],
['Community Groups & CICs','Grassroots programmes, youth & faith groups.'],
['Funders & LAs','Commission practical capacity‑building for grantees.'],
['Professional Volunteers','Give back by donating your expertise as a trainer.'],
];
ob_start(); ?>
<section class="mpta-section">
<div class="mpta-container mpta-grid-2">
<div>
<h2 class="mpta-h2">Who we support</h2>
<p class="mpta-muted">If your work serves the public good, we're here to help you learn and grow.</p>
<div class="mpta-grid-stack">
<?php foreach ($items as $x): ?>
<div class="mpta-card">
<h3 class="mpta-h4"><?php echo esc_html($x[0]); ?></h3>
<p class="mpta-muted"><?php echo esc_html($x[1]); ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
<div id="volunteer" class="mpta-card">
<span class="mpta-badge">For Professionals</span>
<h3 class="mpta-h3">Volunteer as a trainer</h3>
<p class="mpta-muted">Share your expertise, support the sector, and build your impact portfolio. We make delivery easy with clear briefs and ready‑to‑use materials.</p>
<?php echo self::volunteer_form_html(); ?>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function testimonials_html() {
$quotes = [
['Amira – Youth CIC','We asked for safeguarding basics tailored to our mentors. Within two weeks we had a brilliant trainer and practical resources we still use.'],
['Patrick – Community Charity','Their bid‑writing session helped us secure our first Awards for All grant. Clear, practical, and confidence‑building.'],
['Lauren – Volunteer Trainer','Loved the mission. The team handled logistics so I could focus on teaching. Impact without the admin headache!'],
];
ob_start(); ?>
<section class="mpta-section">
<div class="mpta-container mpta-grid-3">
<?php foreach ($quotes as $q): ?>
<figure class="mpta-card"><blockquote>“<?php echo esc_html($q[1]); ?>”</blockquote><figcaption class="mpta-muted">— <?php echo esc_html($q[0]); ?></figcaption></figure>
<?php endforeach; ?>
</div>
</section>
<?php return ob_get_clean();
}
private static function faq_html() {
$items = [
['What fees should we expect?','We operate an impact‑first model: trainers discount or donate time, and we add a modest coordination fee. We’ll provide clear quotes up‑front with charity discounts.'],
['How quickly can you find a trainer?','Typical lead time is 2–4 weeks. Short notice is sometimes possible—send your dates and we’ll try.'],
['Do you cover the whole UK?','Yes—online nationwide and in‑person where feasible. We can also support international virtual delivery.'],
['Can you design bespoke content?','Absolutely. Share your outcomes and context (policies, risks, service users) and we’ll tailor the session.'],
];
ob_start(); ?>
<section class="mpta-section">
<div class="mpta-container">
<h2 class="mpta-h2">FAQs</h2>
<div class="mpta-accordion">
<?php foreach ($items as $i => $x): ?>
<details class="mpta-disclosure" <?php echo $i===0? 'open' : ''; ?>>
<summary class="mpta-disclosure-summary"><?php echo esc_html($x[0]); ?><span class="mpta-chevron" aria-hidden>▾</span></summary>
<div class="mpta-disclosure-body mpta-muted"><?php echo esc_html($x[1]); ?></div>
</details>
<?php endforeach; ?>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function cta_html() {
ob_start(); ?>
<section class="mpta-cta" aria-label="Call to action">
<div class="mpta-container">
<div class="mpta-card mpta-center">
<h2 class="mpta-h2">Ready to upskill your team?</h2>
<p class="mpta-muted">Send a title—like “Fundraising for beginners” or “Trustee safeguarding refresher”—and we’ll do the rest.</p>
<div class="mpta-row-gap">
<a href="#request" class="mpta-btn mpta-primary">Request training</a>
<a href="#volunteer" class="mpta-btn mpta-outline">Volunteer to train</a>
</div>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function contact_html() {
ob_start(); ?>
<section id="contact" class="mpta-section" aria-label="Contact">
<div class="mpta-container mpta-grid-2">
<div>
<h2 class="mpta-h2">Contact</h2>
<p class="mpta-muted">We’ll reply within 2 working days. Prefer email? hello@menpowered.training</p>
<ul class="mpta-list">
<li>Mon–Fri 9:00–17:00 (UK)</li>
<li>Online or in‑person delivery</li>
<li>DBS‑aware, safeguarding‑first approach</li>
</ul>
</div>
<div id="request" class="mpta-card">
<span class="mpta-badge">Start here</span>
<h3 class="mpta-h3">Request a training</h3>
<?php echo self::request_form_html(); ?>
</div>
</div>
</section>
<?php return ob_get_clean();
}
private static function footer_html($brand) {
return '<footer class="mpta-footer" aria-label="Footer"><div class="mpta-container mpta-footer-inner">© '.date('Y').' '.esc_html($brand).'. Building capacity for good.<div class="mpta-footer-links"><a href="#">Privacy</a><a href="#">Cookies</a><a href="#contact">Contact</a></div></div></footer>';
}
// ——— Forms ———
private static function quick_form_html() {
ob_start(); ?>
<form class="mpta-form" data-testid="quick-form">
<label>Training title<input required name="title" placeholder="e.g., Safeguarding for Trustees" /></label>
<label>Top 3 outcomes<textarea required name="outcomes" placeholder="1) Understand roles 2) Spot concerns 3) Report well"></textarea></label>
<label>Contact email<input required type="email" name="email" placeholder="you@charity.org" /></label>
<button type="submit" class="mpta-btn mpta-primary">Get options</button>
<p class="mpta-hint">By submitting, you consent to be contacted about this request.</p>
</form>
<?php return ob_get_clean();
}
private static function request_form_html() {
ob_start(); ?>
<form class="mpta-form" data-testid="request-form">
<div class="mpta-grid-2">
<label>Training title<input required name="title" placeholder="e.g., Bid Writing 101" /></label>
<label>Delivery mode<select name="mode"><option>Online</option><option>In-person</option><option>Hybrid</option></select></label>
</div>
<label>Desired outcomes (3–5 bullets)<textarea required name="outcomes" placeholder="What should learners be able to do?"></textarea></label>
<div class="mpta-grid-3">
<label>Audience<input name="audience" placeholder="Trustees, volunteers, staff…" /></label>
<label>Group size<input name="size" placeholder="e.g., up to 20" /></label>
<label>Preferred dates<input name="dates" placeholder="e.g., w/c 10 Nov" /></label>
</div>
<label>Contact email<input required type="email" name="contact" placeholder="you@charity.org" /></label>
<button type="submit" class="mpta-btn mpta-primary">Submit request</button>
<p class="mpta-hint">We’ll send a quote and trainer options shortly. No obligation.</p>
</form>
<?php return ob_get_clean();
}
private static function volunteer_form_html() {
ob_start(); ?>
<form class="mpta-form" data-testid="volunteer-form">
<label>Full name<input required name="name" placeholder="Your name" /></label>
<label>Expertise / topics<textarea required name="expertise" placeholder="e.g., MHFA, governance, fundraising"></textarea></label>
<label>Email<input required type="email" name="email" placeholder="you@domain.com" /></label>
<button type="submit" class="mpta-btn mpta-primary">Pledge your time</button>
<p class="mpta-hint">We’ll discuss availability, fees, and safeguarding expectations.</p>
</form>
<?php return ob_get_clean();
}
}
MPTA_Landing_Shortcode::init();
/* ==============================
* Create these two asset files next to this PHP file:
* /assets/style.css
* /assets/app.js
* ==============================
* File: assets/style.css
---------------------------------
:root{ --bg:#f8fafc; --text:#0f172a; --muted:#475569; --card:#ffffff; --line:#e2e8f0; --primary:#0f172a; --primaryText:#ffffff; }
.mpta-wrapper{background:linear-gradient(#f8fafc,#fff);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif}
.mpta-container{max-width:1100px;margin:0 auto;padding:0 1rem}
.mpta-flex{display:flex;align-items:center}
.mpta-justify{justify-content:space-between;height:64px}
.mpta-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.mpta-logo{width:36px;height:36px;border-radius:14px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.mpta-brand{margin-left:.5rem;font-weight:600}
.mpta-nav{display:flex;gap:1rem}
.mpta-nav a{color:#334155;text-decoration:none}
.mpta-btn{display:inline-flex;gap:.5rem;align-items:center;justify-content:center;border-radius:14px;padding:.625rem 1rem;border:1px solid var(--line);text-decoration:none}
.mpta-primary{background:var(--primary);color:var(--primaryText)}
.mpta-outline{background:#fff;color:var(--text)}
.mpta-hero{position:relative;overflow:hidden;padding:3rem 0}
.mpta-row-gap{display:flex;gap:.75rem;flex-wrap:wrap;margin:.75rem 0}
.mpta-meta{color:#64748b;font-size:.85rem}
.mpta-card{border:1px solid var(--line);background:var(--card);border-radius:22px;padding:1rem}
.mpta-badge{display:inline-block;border:1px solid var(--line);background:#f1f5f9;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;color:#334155}
.mpta-h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0}
.mpta-h2{font-size:1.75rem;margin:.25rem 0}
.mpta-h3{font-size:1.25rem;margin:.25rem 0}
.mpta-h4{font-size:1rem;margin:.25rem 0}
.mpta-lead{color:#475569;font-size:1.125rem}
.mpta-muted{color:#64748b}
.mpta-section{padding:2.5rem 0}
.mpta-grid-hero{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:992px){.mpta-grid-hero{grid-template-columns:7fr 5fr}}
.mpta-grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.mpta-grid-2{grid-template-columns:5fr 7fr}}
.mpta-grid-3{display:grid;gap:1rem}
@media(min-width:900px){.mpta-grid-3{grid-template-columns:repeat(3,1fr)}}
.mpta-grid-cards{display:grid;gap:1rem}
@media(min-width:900px){.mpta-grid-cards{grid-template-columns:repeat(4,1fr)}}
.mpta-grid-stack{display:grid;gap:.8rem}
.mpta-trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f8fafc}
.mpta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;color:#64748b}
.mpta-step span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:12px;background:var(--primary);color:#fff;font-weight:700}
.mpta-kpi{background:#f8fafc;border-radius:16px;padding:1rem;text-align:center}
.mpta-kpi-num{font-size:2rem;font-weight:800}
.mpta-kpi-label{color:#64748b;font-size:.85rem}
.mpta-cta{background:linear-gradient(90deg,#eef2ff,#f0f9ff,#f0fdf4)}
.mpta-center{text-align:center}
.mpta-footer{border-top:1px solid var(--line);background:#fff}
.mpta-footer-inner{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 0;color:#64748b}
.mpta-footer a{color:#475569;text-decoration:none}
.mpta-footer-links{display:flex;gap:1rem}
.mpta-list{margin:.75rem 0;color:#334155}
.mpta-form{display:grid;gap:.6rem;margin-top:.6rem}
.mpta-form label{display:grid;gap:.25rem;font-size:.9rem}
.mpta-form input,.mpta-form textarea,.mpta-form select{height:44px;border-radius:12px;border:1px solid var(--line);padding:.5rem .75rem;outline:none}
.mpta-form textarea{min-height:90px}
.mpta-hint{font-size:.8rem;color:#64748b}
/* ---------------------------------
* File: assets/app.js
* ---------------------------------
*/
/* global console */
(function(){
function handle(form, build){
if(!form) return; form.addEventListener('submit', function(e){
e.preventDefault();
const d = new FormData(form);
alert(build(d));
});
}
handle(document.querySelector('[data-testid="quick-form"]'), (fd)=>{
return "Thanks! We'll get back to you about: " + (fd.get('title')||'your request') +
"\nOutcomes: " + (fd.get('outcomes')||'-') +
"\nEmail: " + (fd.get('email')||'-');
});
handle(document.querySelector('[data-testid="request-form"]'), (fd)=>{
return [
'Request received!',
'Training: ' + (fd.get('title')||'-'),
'Outcomes: ' + (fd.get('outcomes')||'-'),
'Audience: ' + (fd.get('audience')||'-'),
'Size: ' + (fd.get('size')||'-'),
'Mode: ' + (fd.get('mode')||'-'),
'Preferred dates: ' + (fd.get('dates')||'-'),
'Contact: ' + (fd.get('contact')||'-'),
].join('\n');
});
handle(document.querySelector('[data-testid="volunteer-form"]'), (fd)=>{
return 'Thank you, ' + (fd.get('name')||'trainer') + '! We\'ll be in touch.';
});
// Dev-time smoke tests to mirror the React version
try {
console.assert(!!document.querySelector('.mpta-hero'), 'Hero should render');
['how','tracks','impact','volunteer','contact','request'].forEach(id => {
console.assert(!!document.getElementById(id) || !!document.querySelector('#'+id), '#' + id + ' should exist');
});
console.assert(!!document.querySelector('#request input[type="email"]'), 'Request form email required');
} catch (e) { console.warn('Smoke tests warning:', e); }
})();
*/
