<!--
African Hemp Org — Landing Page (Drop-in HTML for a WordPress “Custom HTML” block)
- Mobile-first, lightweight CSS, no external libraries
- Anchor navigation (<=7 items)
- Replace placeholder images/links as noted
- Forms: swap the placeholder form with your plugin shortcode (Contact Form 7 / WPForms)
-->
<style>
:root{
--bg:#0E0F12; /* charcoal */
--card:#151821; /* deep slate */
--ink:#EAF1F1; /* near-white */
--muted:#B9C4C4; /* soft gray */
--accent:#55C27B; /* hemp green */
--accent-2:#91D1A7; /* light green */
--maxw:1100px;
--radius:16px;
--shadow:0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px}
.container{max-width:var(--maxw);margin:0 auto;padding:clamp(16px,4vw,28px)}
.stack{display:grid;gap:clamp(16px,2.5vw,24px)}
.grid{display:grid;gap:clamp(16px,2.5vw,24px)}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
@media(min-width:860px){
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.pill{display:inline-block;padding:.5rem .9rem;border-radius:999px;background:#0a0b0f;border:1px solid #242733;color:var(--muted);font-size:.85rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.1rem;border-radius:12px;border:1px solid #2a2f3f;background:#121420;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b160f;border:none}
.btn.ghost{background:transparent;border:1px solid #2a2f3f}
.card{background:var(--card);border:1px solid #202535;border-radius:var(--radius);padding:clamp(16px,2.8vw,22px);box-shadow:var(--shadow)}
.tag{display:inline-block;font-size:.78rem;padding:.3rem .6rem;border-radius:8px;background:#0c1016;border:1px solid #2a2f3f;color:var(--muted)}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem 0}
h1{font-size:clamp(1.8rem,3.6vw,3rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-top:.2rem}
p{margin:.4rem 0 .4rem}
/* Sticky top nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,12,18,.8);backdrop-filter:blur(10px);border-bottom:1px solid #1f2330}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;border-radius:8px;background:radial-gradient(circle at 30% 30%,var(--accent) 0%,#1a402c 40%,#0d1318 75%)}
.brand strong{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu a{padding:.6rem .8rem;border-radius:10px;color:var(--muted)}
.menu a.active,.menu a:hover{background:#121420;color:var(--ink)}
/* Hero */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1600490036275-35f8b22eb3d3?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;opacity:.28;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 10%,rgba(85,194,123,.22),transparent 60%),linear-gradient(180deg,transparent,rgba(8,10,14,.8) 85%);z-index:-1}
.hero .wrap{padding:clamp(40px,8vw,96px) 0}
.hero h1{margin-bottom:.4rem}
.kpis{display:flex;gap:18px;flex-wrap:wrap}
.kpis .kpi{background:#0d1118;border:1px solid #1f2430;border-radius:12px;padding:.7rem .9rem;color:var(--muted)}
/* Sections */
section{scroll-margin-top:86px}
.section-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-h h2{margin:0}
.mute{color:var(--muted)}
.list{display:grid;gap:10px}
.list li{list-style:none;padding-left:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:.4rem .6rem;border:1px solid #2a2f3f;border-radius:999px;color:var(--muted);font-size:.8rem}
/* Contact */
form input, form select, form textarea{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid #2a2f3f;background:#0f131c;color:var(--ink)}
form .row{display:grid;gap:12px}
@media(min-width:720px){form .row{grid-template-columns:1fr 1fr}}
form button{margin-top:8px}
/* Footer */
footer{border-top:1px solid #1f2330;background:#0c0e13;color:var(--muted)}
</style>
<!-- NAVIGATION -->
<nav class="nav">
<div class="container nav-inner">
<div class="brand">
<div class="logo" aria-hidden="true"></div>
<strong>African Hemp Org</strong>
</div>
<div class="menu" role="navigation" aria-label="Primary">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#news">News & Events</a>
<a href="#products">Products</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<a href="#foundation">Foundation</a>
</div>
</div>
</nav>
<!-- HERO -->
<header id="home" class="hero">
<div class="container wrap">
<span class="pill">Africa • Hemp • Future</span>
<h1>The African Hemp Renaissance</h1>
<p class="mute" style="max-width:56ch">Africa is emerging as the global leader in industrial and medicinal hemp. We unite cultivators, innovators, and investors to shape the continent’s green future.</p>
<div class="btns" style="margin-top:14px">
<a class="btn primary" href="#contact">Join the Movement</a>
<a class="btn ghost" href="#services">Explore Opportunities</a>
</div>
<div class="kpis" style="margin-top:18px">
<div class="kpi">Offices: Accra • Monrovia</div>
<div class="kpi">Focus: Cultivation • Manufacturing • Trade</div>
<div class="kpi">Impact: Jobs • GDP • Sustainability</div>
</div>
</div>
</header>
<!-- ABOUT -->
<section id="about" class="container stack">
<div class="section-h"><h2>Our Vision & Mission</h2></div>
<div class="grid cols-2">
<div class="card">
<h3>Vision</h3>
<p>Promote the cultivation, processing, and responsible use of industrial hemp across Africa through research, collaboration, and sustainable development.</p>
<ul class="list mute">
<li>Pan-African R&D and knowledge exchange</li>
<li>Policy dialogue and compliance support</li>
<li>Market-building with ethical standards</li>
</ul>
</div>
<div class="card">
<h3>Mission</h3>
<p>Create jobs, ensure fair wealth distribution, and grow national GDPs via hemp cultivation and manufacturing.</p>
<p>25% of profits support the <a href="#foundation">African Hemp Foundation</a> focusing on education, sports, health, orphan care, sustainability, sanitation, and wildlife conservation.</p>
<div class="chips" aria-label="Partner Countries">
<span class="chip">Ghana</span><span class="chip">Rwanda</span><span class="chip">Zambia</span><span class="chip">Zimbabwe</span><span class="chip">South Africa</span><span class="chip">Lesotho</span><span class="chip">Malawi</span><span class="chip">Uganda (pilot)</span><span class="chip">Morocco</span>
</div>
</div>
</div>
</section>
<!-- NEWS & EVENTS -->
<section id="news" class="container stack">
<div class="section-h">
<h2>News & Events</h2>
<a class="mute" href="/news">View all →</a>
</div>
<div class="grid cols-3">
<article class="card">
<span class="tag">Update</span>
<h3 style="margin-top:.3rem">Offices Opened: Accra & Monrovia</h3>
<p class="mute">Our West Africa hubs are live, supporting cultivation, processing, and cross-border trade.</p>
</article>
<article class="card">
<span class="tag">Insight</span>
<h3 style="margin-top:.3rem">Africa’s Hemp Potential</h3>
<p class="mute">Add your New Frontier Data visual here:</p>
<img src="https://newfrontierdata.com/wp-content/uploads/2019/08/8-7-19-Hemp-in-Africa-cultivation.jpg" alt="Map showing African hemp cultivation potential">
</article>
<article class="card">
<span class="tag">Video</span>
<h3 style="margin-top:.3rem">Partner Spotlights</h3>
<p class="mute">Embed short videos from partners (Ghana, Lesotho, South Africa…).</p>
</article>
</div>
</section>
<!-- PRODUCTS PREVIEW -->
<section id="products" class="container stack">
<div class="section-h"><h2>Products</h2><a class="mute" href="/products">Full catalog →</a></div>
<div class="grid cols-3">
<div class="card">
<h3>Hemp Construction</h3>
<p class="mute">Hemp Shiv • Hemp Fibre • Hempcrete Blocks</p>
<p><a href="/products#construction">Learn more</a></p>
</div>
<div class="card">
<h3>Cultivation & Energy</h3>
<p class="mute">Seeds • Fertilizer • Greenhouses • Solar Irrigation</p>
<p><a href="/products#cultivation">Learn more</a></p>
</div>
<div class="card">
<h3>Extracts & Equipment</h3>
<p class="mute">Hemp Seed Oil • CBD Oil (≤0.3% THC) • CO₂ Extractors</p>
<p class="mute">Suppliers: <a href="https://ocolabs.com/product-category/extractor/" target="_blank" rel="noopener">OCO Labs</a>, <a href="https://www.coreseparations.com/core-extraction/" target="_blank" rel="noopener">Core Separations</a></p>
<p><a href="/products#extracts">Learn more</a></p>
</div>
</div>
<div class="card">
<strong>Also available:</strong>
<p class="mute">Fertilizer • Feminized Seeds • Gardening Equipment • Solar Panels • Batteries • Gas • Irrigation Systems • Measurement (pH, Microscope, etc.)</p>
</div>
</section>
<!-- SERVICES -->
<section id="services" class="container stack">
<div class="section-h"><h2>Services</h2></div>
<div class="grid cols-3">
<div class="card">
<h3>Consultancy</h3>
<p class="mute">Seed-to-market feasibility, licensing guidance, SOPs, and compliance.</p>
</div>
<div class="card">
<h3>Machinery & Workforce</h3>
<p class="mute">Industrial setup, procurement, and skilled teams for processing.</p>
</div>
<div class="card">
<h3>Workshops & Online Courses</h3>
<p class="mute">On-site trainings and digital modules to scale capacity.</p>
</div>
<div class="card">
<h3>CO₂ Compensation Certificates</h3>
<p class="mute">Hemp-based carbon projects for sustainable offsets.</p>
</div>
<div class="card">
<h3>Marketing & Websites</h3>
<p class="mute">Go-to-market content, brand, and basic site builds.</p>
</div>
</div>
</section>
<!-- FOUNDATION / IMPACT -->
<section id="foundation" class="container stack">
<div class="section-h"><h2>African Hemp Foundation</h2></div>
<div class="grid cols-2">
<div class="card">
<p>We allocate <strong>25% of profits</strong> to community impact across: education, sports, health (mental/physical), orphan care, sustainability, sanitation, and wildlife conservation.</p>
<p><a href="/foundation">Discover programs →</a></p>
</div>
<div class="card">
<ul class="list">
<li>Scholarships & agri-innovation labs</li>
<li>Youth sports initiatives</li>
<li>Mobile clinics & mental health support</li>
<li>Reforestation & biodiversity projects</li>
</ul>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="container stack">
<div class="section-h"><h2>Get in Touch</h2></div>
<div class="grid cols-2">
<div class="card">
<h3>Partner with Us</h3>
<p class="mute">Tell us your country, role (farmer, manufacturer, investor, policymaker), and what you’d like to build.</p>
<!-- Replace the form below with your plugin shortcode, e.g.:
[contact-form-7 id="123" title="AHO Contact"] or [wpforms id="456"]
-->
<form onsubmit="event.preventDefault(); alert('Thanks! Replace this with your form plugin shortcode.');">
<div class="row">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
</div>
<select name="interest" aria-label="Interest">
<option value="" disabled selected>I'm interested in…</option>
<option>Consultancy</option>
<option>Machinery & Workforce</option>
<option>CO₂ Certificates</option>
<option>Workshops / Courses</option>
<option>Products / Supply</option>
</select>
<textarea name="message" rows="5" placeholder="Message"></textarea>
<label style="display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--muted)">
<input type="checkbox"> Subscribe to newsletter
</label>
<button class="btn primary" type="submit">Send</button>
</form>
</div>
<div class="card">
<h3>Offices</h3>
<p class="mute">Accra, Ghana • Monrovia, Liberia</p>
<h3 style="margin-top:10px">Quick Links</h3>
<ul class="list">
<li><a href="/faqs">FAQs</a></li>
<li><a href="/news">News & Events</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
</ul>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container" style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0">
<div>© <span id="year">2025</span> African Hemp Org</div>
<div class="mute" style="display:flex;gap:12px;flex-wrap:wrap">
<a href="/faqs">FAQs</a>
<a href="/privacy">Privacy</a>
<a href="#contact">Contact</a>
</div>
</div>
</footer>
<script>
// Auto-year for footer
document.getElementById('year').textContent = new Date().getFullYear();
// Simple active link highlight on scroll
const sections = ['home','about','news','products','services','contact','foundation'];
const links = [...document.querySelectorAll('.menu a')];
const byId = id => document.getElementById(id);
const onScroll = () => {
let pos = window.scrollY + 120;
let current = 'home';
sections.forEach(id => {const el = byId(id); if(el && el.offsetTop <= pos) current = id;});
links.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + current));
};
document.addEventListener('scroll', onScroll, {passive:true});
onScroll();
</script>