Add ONLC human-centered growth presentation
This commit is contained in:
Fabio
@@ -0,0 +1,17 @@
|
|||||||
|
*{box-sizing:border-box} :root{--paper:#f3f1e9;--ink:#20251f;--soft:#5d655b;--line:#c9cec0;--accent:#d6ec7a;--green:#526c36} html{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;scroll-behavior:smooth} body{margin:0} button,a{-webkit-tap-highlight-color:transparent} button{font:inherit;color:inherit;cursor:pointer} a{color:inherit;text-underline-offset:4px} button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #749925;outline-offset:5px} button{background:none;border:0} [hidden]{display:none!important} .skip{position:fixed;top:-80px;left:20px;background:var(--accent);padding:14px;z-index:50}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
|
||||||
|
.topbar{height:76px;display:flex;align-items:center;gap:36px;padding:0 4vw;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:3}.wordmark{text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-1px;white-space:nowrap}.wordmark span{font-weight:400;color:var(--soft)}.project{font-size:12px;letter-spacing:.03em}.divider{padding:0 10px;color:#919787}.topbar nav{margin-left:auto;display:flex;gap:8px}.topbar button{font-size:12px;padding:10px 12px;border-radius:3px}.topbar button:hover{background:#e3e7d7}.topbar #reading-button{border:1px solid var(--ink)}
|
||||||
|
main{max-width:1800px;margin:auto}.slide{padding:42px 6vw 32px;min-height:calc(100svh - 138px);position:relative;display:flex;flex-direction:column;scroll-margin-top:20px}.slide h2{font-size:clamp(36px,4.25vw,70px);line-height:1.07;letter-spacing:-.045em;font-weight:500;margin:20px 0 38px;max-width:1200px}.slide em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em;color:var(--green)}p{margin:0 0 18px;line-height:1.5}h3{margin:0 0 10px;line-height:1.2} .overline,.small-label,.eyebrow,.cover-bottom,.source,.loop-return,.endline{font-size:12px;letter-spacing:.045em}.overline{text-transform:uppercase;color:var(--soft);margin:0;font-weight:600}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.large-copy{font-size:clamp(21px,2vw,28px);line-height:1.5;max-width:560px}.large-copy p+p{color:var(--soft)}.lined-list>div{border-top:1px solid var(--line);padding:17px 0}.lined-list h3{font-size:19px;font-weight:600}.lined-list p{font-size:17px;color:var(--soft);margin:0}.source{margin-top:auto;padding-top:26px;color:var(--soft);line-height:1.6;font-size:11px;letter-spacing:0;max-width:1100px}.statement{font-size:clamp(22px,2.4vw,34px);line-height:1.36;letter-spacing:-.02em;max-width:600px}.muted{color:var(--soft);font-size:14px;max-width:500px}.closing-line{border-top:1px solid var(--line);padding-top:20px;margin:26px 0 0;font-size:20px;max-width:1150px}.section-lede{font-size:18px;color:var(--soft);margin-top:-20px}.small-label{display:block;color:var(--green);text-transform:uppercase;font-weight:600;margin-bottom:20px}
|
||||||
|
.dark{background:var(--ink);color:var(--paper);--line:#58604f;--soft:#bdc3b2;--green:var(--accent)}.dark em{color:var(--accent)}.eyebrow{display:flex;justify-content:space-between;color:var(--soft)}.cover{padding-top:30px;min-height:calc(100svh - 138px)}.cover-body{position:relative;padding:44px 0 30px}.cover h1{font-size:clamp(55px,6.8vw,110px);font-weight:500;letter-spacing:-.055em;line-height:.99;margin:18px 0 24px;max-width:900px}.cover-lede{position:absolute;right:0;bottom:38px;width:27%;font-size:clamp(20px,2vw,28px);color:var(--soft);line-height:1.45}.cover-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:20px;margin-top:auto;color:var(--soft)}.thesis h2{font-size:clamp(46px,6.7vw,105px);margin:9vh 0 35px;line-height:1.07}.thesis-text{font-size:clamp(21px,2.2vw,30px);color:var(--soft);max-width:800px}.thesis-bottom{display:flex;gap:7vw;margin-top:35px;font-size:19px}.thesis-bottom p{line-height:1.6}
|
||||||
|
.audiences{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.audiences article{border-top:1px solid var(--line);padding-top:20px}.audiences h3{font-family:Georgia,serif;font-size:clamp(29px,3.3vw,48px);font-weight:400;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px}.audiences p{font-size:18px;color:var(--soft);max-width:520px}.audiences .action-line{font-size:15px;border-top:1px solid var(--line);padding-top:15px;margin-top:26px}.example-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-top:14px}.example-tabs button{font-size:15px;padding:12px 0;border-bottom:3px solid transparent}.example-tabs button[aria-selected=true]{border-bottom-color:var(--green);font-weight:bold}.example-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;padding:28px 0 0}.sample-hero{background:#e6eccf;padding:28px 30px}.sample-hero h3{font-family:Georgia,serif;font-size:clamp(29px,3.5vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.08;margin:0 0 20px}.sample-hero p{font-size:17px;margin:0;color:#4f5848}.script-list{list-style:none;margin:0;padding:0}.script-list li{font-size:18px;line-height:1.45;border-top:1px solid var(--line);padding:13px 0}.script-list li span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--soft);margin-bottom:5px}.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:35px}.cycle>div{border-top:1px solid var(--line);padding-top:18px}.cycle span{font-family:Georgia,serif;font-size:52px;color:var(--accent)}.cycle h3{font-size:22px;margin:28px 0 15px}.cycle p{font-size:17px;color:var(--soft)}.loop-return{border-bottom:1px solid var(--line);padding:25px 0;margin:12px 0 0;font-size:18px;color:var(--accent);letter-spacing:0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:18px;line-height:1.4}th,td{padding:17px 18px 17px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);border-bottom:2px solid var(--ink)}tbody th{font-weight:600;width:23%}td{width:38%;color:var(--soft)}.rhythm-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw}.session{border-top:1px solid var(--line);padding-top:18px}.big-number{font-family:Georgia,serif;font-size:125px;line-height:1;margin:0 0 18px;color:var(--green)}.session h3{font-size:22px}.session p:not(.big-number){color:var(--soft);font-size:17px}.measurement{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:10px}.measurement>div{border-top:1px solid var(--line);padding-top:22px}.measurement h3{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-.02em;min-height:75px}.measurement p{font-size:18px;color:var(--soft);min-height:95px}.decision{font-size:14px;color:var(--green)}.proposal{border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 3fr;gap:28px;margin-top:28px;padding-top:20px}.proposal span{font-size:12px;text-transform:uppercase;letter-spacing:.05em}.proposal p{font-size:21px;margin:0}.sources-slide h2{margin-bottom:38px}.sources-list{list-style:none;padding:0;margin:16px 0}.sources-list li{font-size:17px;margin-bottom:19px;line-height:1.3}.sources-list span{display:block;font-size:14px;color:var(--soft);margin-top:5px}.endline{margin-top:auto;padding-top:30px;border-bottom:1px solid var(--line);padding-bottom:15px;color:var(--green)}
|
||||||
|
.controls{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:var(--paper);position:relative;border-top:1px solid var(--line);z-index:4}.chapter-name,.key-hint{font-size:12px;color:var(--soft);width:30%}.key-hint{text-align:right}.pager{display:flex;align-items:center;gap:24px}.pager button{font-size:26px;width:38px;height:40px}.pager button:hover{background:#e3e7d7}.pager button:disabled{opacity:.25;cursor:default}#slide-count{font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums}.progress{position:absolute;bottom:0;height:3px;left:0;width:100%;background:#e1e3d8}#progress-fill{height:3px;background:var(--green);display:block;transition:width .2s}.reading .slide{border-bottom:1px solid var(--line);min-height:760px;padding-bottom:55px}.reading .controls{position:sticky;bottom:0}.reading .key-hint{visibility:hidden}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:30px;width:min(600px,92vw);max-height:85vh}dialog::backdrop{background:#20251fa8;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:29px;font-weight:500;margin:0}.dialog-top button{font-size:34px}.dialog-top+ol{list-style:none;padding:0;margin:25px 0 0}dialog li{border-top:1px solid var(--line)}dialog li button{width:100%;display:flex;gap:22px;text-align:left;padding:12px 8px;font-size:16px}dialog li span{color:var(--green);font-size:12px;width:22px}dialog li button:hover,dialog li button[aria-current=step]{background:#e3e7d7}
|
||||||
|
@media(min-width:1500px){.slide{padding-left:100px;padding-right:100px}.cover h1{font-size:110px}.slide h2{font-size:70px}.thesis h2{font-size:100px}}
|
||||||
|
@media(max-width:1000px){.topbar{gap:18px}.project{display:none}.slide{padding:35px 5vw}.slide h2{font-size:43px}.cover h1{font-size:72px}.cover-lede{font-size:21px;width:30%}.cycle{gap:18px}.cycle h3{font-size:19px}.cycle p{font-size:16px}.two-col{gap:5vw}.lined-list p{font-size:16px}.measurement{gap:22px}.measurement h3{font-size:27px}.measurement p{font-size:17px}}
|
||||||
|
@media(max-width:760px){.topbar{height:auto;min-height:66px;padding:12px 20px;gap:8px}.wordmark{font-size:17px}.topbar nav{gap:0}.topbar button{font-size:11px;padding:9px 8px}.topbar #print-button{display:none}.slide,.reading .slide{padding:32px 24px 36px;min-height:auto}.slide h2{font-size:38px;margin:20px 0 30px}.cover,.reading .cover{min-height:calc(100svh - 125px)}.eyebrow{font-size:10px;gap:15px}.eyebrow span{white-space:nowrap}.cover-body{padding:35px 0 20px}.cover h1{font-size:clamp(48px,10vw,75px)}.cover-lede{position:static;width:100%;font-size:20px;max-width:420px}.cover-bottom{font-size:10px;gap:15px;line-height:1.5}.two-col,.audiences,.example-panel,.rhythm-layout{grid-template-columns:1fr;gap:24px}.large-copy{font-size:22px}.statement{font-size:25px}.lined-list h3{font-size:19px}.lined-list p{font-size:17px}.source{font-size:11px;margin-top:15px}.thesis h2{font-size:43px;margin-top:45px}.thesis-text{font-size:22px}.thesis-bottom{display:block;font-size:18px;margin-top:20px}.audiences{gap:32px}.audiences h3{font-size:34px}.audiences .action-line{margin-top:18px}.closing-line{font-size:18px}.example-tabs{gap:20px}.example-tabs button{font-size:12px}.section-lede{font-size:17px;margin-top:-10px}.sample-hero{padding:24px}.sample-hero h3{font-size:36px}.script-list li{font-size:17px}.cycle{grid-template-columns:1fr;margin-top:10px;gap:0}.cycle>div{display:grid;grid-template-columns:44px 1fr;gap:0 20px;padding:18px 0}.cycle span{grid-row:span 2;font-size:34px}.cycle h3{margin:0 0 7px;font-size:22px}.cycle p{margin:0;font-size:17px}.loop-return{font-size:17px;padding-top:10px}.table-wrap{overflow:visible}table,tbody,tr,th,td{display:block;width:100%!important}thead{display:none}tr{border-top:1px solid var(--line);padding:12px 0}th,td{border:0;padding:5px 0;font-size:17px}td:before{content:'AI support: ';font-size:12px;font-weight:bold;color:var(--green)}td+td:before{content:'People: '}.big-number{font-size:88px}.measurement{grid-template-columns:1fr;gap:28px}.measurement h3,.measurement p{min-height:0}.measurement h3{font-size:31px}.measurement p{margin-bottom:12px}.proposal{grid-template-columns:1fr;gap:12px}.proposal p{font-size:20px}.controls{padding:0 20px;height:60px}.chapter-name{font-size:10px;width:42%}.key-hint{display:none}.pager{gap:12px}.sources-list li{font-size:16px}.sources-slide .two-col{gap:14px}dialog{padding:22px}dialog li button{padding:11px 0;font-size:15px}}
|
||||||
|
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
|
||||||
|
@media print{@page{size:A4 landscape;margin:12mm}html,body{background:white;color:black}.topbar,.controls,dialog,.example-tabs,.skip{display:none!important}.slide,.slide[hidden],.reading .slide{display:flex!important;page-break-after:always;break-after:page;min-height:170mm;padding:10mm 8mm;background:white!important;color:#171d16!important;border:0!important}.slide:last-child{break-after:auto}.slide h2{font-size:32pt;margin:8mm 0}.slide h1{font-size:48pt}.slide em,.dark em{color:#526c36}.slide p,.lined-list p,.dark p{color:#30382c}.cover-body{padding:5mm 0}.cover-lede{position:static;width:75%;font-size:18pt}.cover-bottom{color:#444}.slide .overline,.small-label,.eyebrow{font-size:9pt}.two-col{gap:10mm}.source{font-size:8pt}.example-panel[hidden]{display:grid!important}.example-panel{padding:5mm 0;gap:8mm;break-inside:avoid}.sample-hero{padding:5mm}.sample-hero h3{font-size:22pt}.sample-hero p,.script-list li{font-size:11pt}.script-list li{padding:2mm 0}.slide:has(.example-panel){break-inside:auto}.cycle p{color:#333}.cycle span{color:#526c36}.cycle{gap:6mm}.cycle h3{font-size:15pt}.thesis h2{font-size:45pt}.source a{color:#30382c}.measurement p{min-height:0}.sources-list li{font-size:12pt}.sources-list span{font-size:10pt}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
|
||||||
|
|
||||||
|
.solutions{display:grid;grid-template-columns:1fr 1fr;gap:32px 5vw}.solutions article{display:flex;gap:22px;border-top:1px solid var(--line);padding-top:20px}.solution-number{font-family:Georgia,serif;font-size:34px;color:var(--green)}.solutions h3{font-size:23px;letter-spacing:-.02em}.solutions p{font-size:17px;color:var(--soft);margin-bottom:14px}.solution-purpose{font-size:13px;color:var(--green)}@media(max-width:760px){.solutions{grid-template-columns:1fr;gap:26px}.solutions h3{font-size:22px}}
|
||||||
|
|
||||||
|
body{padding-bottom:62px}.controls,.reading .controls{position:fixed;bottom:0;left:0;right:0}.reading #presentation{padding-bottom:0}@media(min-width:761px) and (max-height:800px){.topbar{height:64px}.slide{padding-top:26px;padding-bottom:25px;min-height:calc(100svh - 126px)}.slide h2{font-size:44px;margin:15px 0 27px}.lined-list>div{padding:12px 0}.lined-list h3{font-size:18px}.lined-list p{font-size:16px}.large-copy{font-size:23px}.statement{font-size:27px}.source{padding-top:18px}.cover-body{padding:28px 0 24px}.cover h1{font-size:76px}.cover-lede{font-size:24px;bottom:25px}.cover-bottom{padding-top:16px}.thesis h2{font-size:70px;margin-top:52px}.cycle{margin-top:20px}.cycle h3{margin:20px 0 10px}.solutions{gap:24px 5vw}.solutions article{padding-top:15px}.solutions h3{font-size:21px}.solutions p{font-size:16px}.example-panel{padding-top:20px}.sample-hero{padding:23px}.sample-hero h3{font-size:36px}.script-list li{font-size:16px;padding:11px 0}.big-number{font-size:100px}th,td{padding-top:13px;padding-bottom:13px;font-size:16px}.measurement h3{font-size:28px;min-height:66px}.measurement p{font-size:17px;min-height:75px}.closing-line{font-size:18px}.sources-list li{margin-bottom:14px}}@media print{body{padding-bottom:0}}
|
||||||
|
|
||||||
|
@media screen and (min-width:761px) and (max-height:800px){#starting-point .statement{font-size:25px;line-height:1.32}#starting-point .lined-list>div{padding:9px 0}#starting-point .proposal{margin-top:16px;padding-top:14px}#starting-point .proposal p{font-size:18px;line-height:1.4}}
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
---
|
||||||
|
const chapters = ['The problem & opportunity', 'Our understanding', 'The content gap', 'The people', 'The direction', 'Four connected solutions', 'Content in practice', 'The learning loop', 'AI and people', 'The operating rhythm', 'What we measure', 'The starting point', 'Evidence & assumptions'];
|
||||||
|
---
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="description" content="A content and growth proposal for Hector Salazar: building ONLC's connection with individual learners through human expertise and an ongoing learning process." />
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<meta name="theme-color" content="#f3f1e9" />
|
||||||
|
<link rel="icon" href="/favicon.svg" />
|
||||||
|
<title>ONLC — Human connection, continuous improvement</title>
|
||||||
|
<style is:global>
|
||||||
|
@import url('/onlc/presentation.css');
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a class="skip" href="#presentation">Skip to presentation</a>
|
||||||
|
<header class="topbar">
|
||||||
|
<a class="wordmark" href="/">influence<span>.tools</span></a>
|
||||||
|
<span class="project">ONLC <span class="divider">/</span> Growth & content</span>
|
||||||
|
<nav aria-label="Presentation tools">
|
||||||
|
<button id="contents-button" aria-haspopup="dialog">Contents</button>
|
||||||
|
<button id="reading-button" aria-pressed="true">Present</button>
|
||||||
|
<button id="print-button">Print / PDF</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main id="presentation" tabindex="-1">
|
||||||
|
<section class="slide cover dark" id="opportunity" aria-labelledby="title-1">
|
||||||
|
<div class="eyebrow">A proposal for Hector Salazar <span>September 2026</span></div>
|
||||||
|
<div class="cover-body">
|
||||||
|
<p class="overline">ONLC / The next chapter</p>
|
||||||
|
<h1 id="title-1">Human<br /><em>connection.</em><br />Continuous<br />improvement.</h1>
|
||||||
|
<p class="cover-lede">Our understanding of ONLC’s marketing challenge and four connected solutions for reaching individual learners.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cover-bottom"><span>Human expertise at the center</span><span>AI supporting the work</span><span>Results shaping what comes next</span></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="understanding" aria-labelledby="title-2">
|
||||||
|
<p class="overline">01 / Our understanding</p>
|
||||||
|
<h2 id="title-2">The expertise is<br /><em>already there.</em></h2>
|
||||||
|
<div class="two-col">
|
||||||
|
<div class="large-copy"><p>ONLC has spent more than four decades helping people learn technology.</p><p>The opportunity is to make the value of that experience easier to see, feel, and choose.</p></div>
|
||||||
|
<div class="lined-list">
|
||||||
|
<div><h3>An established training business</h3><p>Live online instruction, local learning centers, self-study, and group training.</p></div>
|
||||||
|
<div><h3>A foundation in B2B</h3><p>Advisor support, organizational purchasing paths, and corporate training offers.</p></div>
|
||||||
|
<div><h3>A growth question</h3><p>How can ONLC build stronger demand among individual learners, including employees whose companies pay?</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="source">Company context: <a href="https://www.onlc.com/aboutus.htm" target="_blank" rel="noopener">ONLC overview</a> and <a href="https://www.onlc.com/register.htm" target="_blank" rel="noopener">training formats</a>. Growth opportunity is our working assessment.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="content-gap" aria-labelledby="title-3">
|
||||||
|
<p class="overline">02 / Initial public review</p>
|
||||||
|
<h2 id="title-3">Course promotion leaves<br /><em>personal value underexplained.</em></h2>
|
||||||
|
<div class="two-col gap-assessment">
|
||||||
|
<div><p class="statement">The recent social sample tells people what ONLC offers. It gives them less help answering: “Why is this right for me, and why should I choose these people?”</p><p class="muted">Our working diagnosis from a limited Instagram and LinkedIn review on September 28, 2026. The effect on sales still needs measurement.</p></div>
|
||||||
|
<div class="lined-list">
|
||||||
|
<div><h3>What we saw</h3><p>Text-heavy promotional graphics, webinar reminders, and course descriptions.</p></div>
|
||||||
|
<div><h3>What we would strengthen</h3><p>Instructors demonstrating expertise, learners asking real questions, and stories about applying a skill at work.</p></div>
|
||||||
|
<div><h3>A useful starting point</h3><p>ONLC’s story about Andy teaching a nonprofit group already connects a real audience with a practical need.</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="source"><a href="https://www.instagram.com/onlc.training/" target="_blank" rel="noopener">Instagram</a> · <a href="https://www.linkedin.com/company/onlc/" target="_blank" rel="noopener">LinkedIn</a> · <a href="https://www.linkedin.com/feed/update/urn:li:activity:7506807485966761986/" target="_blank" rel="noopener">Community teaching example</a></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="people" aria-labelledby="title-4">
|
||||||
|
<p class="overline">03 / The people we need to reach</p>
|
||||||
|
<h2 id="title-4">One learner.<br /><em>Different buying situations.</em></h2>
|
||||||
|
<div class="audiences">
|
||||||
|
<article><span class="small-label">Pays for their own training</span><h3>“Will this be<br />worth it for me?”</h3><p>Needs a clear use case, honest expectations, and a reason to choose live guidance over cheaper self-study.</p><p class="action-line">Content path: useful lesson, instructor introduction, course-fit conversation.</p></article>
|
||||||
|
<article><span class="small-label">Seeks employer funding</span><h3>“How do I make<br />the case?”</h3><p>Needs a connection between the skill, a workplace problem, and the time or resources the employer will invest.</p><p class="action-line">Content path: workplace example, manager brief, advisor conversation.</p></article>
|
||||||
|
</div>
|
||||||
|
<p class="closing-line">Direct relationships with learners can create both consumer demand and employer-funded opportunities.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide dark thesis" id="direction" aria-labelledby="title-5">
|
||||||
|
<p class="overline">04 / Proposed creative direction</p>
|
||||||
|
<h2 id="title-5">People who help you<br /><em>put knowledge to work.</em></h2>
|
||||||
|
<p class="thesis-text">Let prospective learners experience ONLC’s guidance before they enroll.</p>
|
||||||
|
<div class="thesis-bottom"><p>Real instructors explaining.<br />Real questions getting answered.</p><p>Clear expectations about the class.<br />Useful skills connected to everyday work.</p></div>
|
||||||
|
<p class="source">A proposed positioning direction for discussion. Learner stories require permission and supported outcomes.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="solutions" aria-labelledby="title-solutions">
|
||||||
|
<p class="overline">05 / Four connected solutions</p>
|
||||||
|
<h2 id="title-solutions">Several ways to close<br /><em>the connection gap.</em></h2>
|
||||||
|
<div class="solutions">
|
||||||
|
<article><span class="solution-number">01</span><div><h3>Make expertise tangible</h3><p>Instructor demonstrations, short lessons, and live Q&A. Let people experience the quality of the teaching.</p><span class="solution-purpose">Addresses: “Why pay for expert guidance?”</span></div></article>
|
||||||
|
<article><span class="solution-number">02</span><div><h3>Make the learner recognizable</h3><p>Permissioned learner stories and workplace examples. Connect training to a problem the audience already has.</p><span class="solution-purpose">Addresses: “Is this relevant to someone like me?”</span></div></article>
|
||||||
|
<article><span class="solution-number">03</span><div><h3>Make change easier to navigate</h3><p>Curated updates with instructor interpretation. Explain what matters, what to try, and when training can help.</p><span class="solution-purpose">Addresses: “What should I learn next?”</span></div></article>
|
||||||
|
<article><span class="solution-number">04</span><div><h3>Make the next step clear</h3><p>Relevant landing pages, advisor handoffs, and manager-ready training briefs. Connect attention to a useful action.</p><span class="solution-purpose">Addresses: “How do I get started or secure approval?”</span></div></article>
|
||||||
|
</div>
|
||||||
|
<p class="source">Proposed solutions. Hector can prioritize or combine them according to ONLC’s goals, resources, and audience evidence.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="examples" aria-labelledby="title-6">
|
||||||
|
<p class="overline">06 / Content in practice</p>
|
||||||
|
<h2 id="title-6">Useful first.<br /><em>Recognizably ONLC.</em></h2>
|
||||||
|
<p class="section-lede">Original concepts to show the approach. Select a format to explore it.</p>
|
||||||
|
<div class="example-tabs" role="tablist" aria-label="Content concepts">
|
||||||
|
<button role="tab" aria-selected="true" aria-controls="sample-video" id="tab-video" data-sample="video">Instructor video</button>
|
||||||
|
<button role="tab" aria-selected="false" aria-controls="sample-carousel" id="tab-carousel" data-sample="carousel" tabindex="-1">Learner carousel</button>
|
||||||
|
<button role="tab" aria-selected="false" aria-controls="sample-curation" id="tab-curation" data-sample="curation" tabindex="-1">Curated guidance</button>
|
||||||
|
</div>
|
||||||
|
<div class="example-panel" role="tabpanel" id="sample-video" aria-labelledby="tab-video">
|
||||||
|
<div class="sample-hero"><span class="small-label">30–45 second video concept</span><h3>“Before you trust<br />that total…”</h3><p>An ONLC instructor checks a spreadsheet total by asking three simple questions.</p></div>
|
||||||
|
<ol class="script-list"><li><span>Opening</span>“Does this total include the rows you actually meant to count?”</li><li><span>Demonstration</span>Check the formula range, filters, and any numbers stored as text. Show one mistake and the correction.</li><li><span>Invitation</span>“What spreadsheet task slows you down every week?” Invite a question and offer a relevant class link.</li></ol>
|
||||||
|
</div>
|
||||||
|
<div class="example-panel" role="tabpanel" id="sample-carousel" aria-labelledby="tab-carousel" hidden>
|
||||||
|
<div class="sample-hero"><span class="small-label">Five-frame carousel concept</span><h3>“Start with the<br />task you repeat.”</h3><p>A practical route into Excel training, organized around a learner’s work.</p></div>
|
||||||
|
<ol class="script-list"><li><span>Frames 1–2</span>“What do you rebuild every Friday?” Name a recurring report, cleanup task, or calculation.</li><li><span>Frames 3–4</span>Show the relevant skill and what an instructor helps you practice. Explain how live online learning works.</li><li><span>Frame 5</span>“Tell an advisor what you need to do. Find a course that fits.”</li></ol>
|
||||||
|
</div>
|
||||||
|
<div class="example-panel" role="tabpanel" id="sample-curation" aria-labelledby="tab-curation" hidden>
|
||||||
|
<div class="sample-hero"><span class="small-label">Recurring editorial format</span><h3>“What changed.<br />What it means<br />for your work.”</h3></div>
|
||||||
|
<ol class="script-list"><li><span>Source</span>Select one relevant vendor update. Link to the original and verify its date and availability.</li><li><span>Interpretation</span>Have an instructor explain who it affects and demonstrate one practical use.</li><li><span>Next step</span>Suggest a small task to try. Connect readers to guidance or training when it fits their need.</li></ol>
|
||||||
|
</div>
|
||||||
|
<p class="source">Illustrative concepts, not published ONLC campaigns or evidence of measured results.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide dark" id="learning-loop" aria-labelledby="title-7">
|
||||||
|
<p class="overline">07 / The continuous learning loop</p>
|
||||||
|
<h2 id="title-7">Every cycle informs<br /><em>the next one.</em></h2>
|
||||||
|
<div class="cycle" aria-label="Recurring marketing process">
|
||||||
|
<div><span>01</span><h3>Listen</h3><p>Questions, objections, sales conversations, and audience behavior.</p></div>
|
||||||
|
<div><span>02</span><h3>Create & curate</h3><p>Choose a useful idea. Develop it with an instructor or advisor.</p></div>
|
||||||
|
<div><span>03</span><h3>Publish</h3><p>Adapt for the channel and give each piece a clear next step.</p></div>
|
||||||
|
<div><span>04</span><h3>Measure</h3><p>Connect content response to inquiries, course fit, and enrollment.</p></div>
|
||||||
|
<div><span>05</span><h3>Improve</h3><p>Keep what helps. Change what underperforms. Record why.</p></div>
|
||||||
|
</div>
|
||||||
|
<p class="loop-return">The next brief begins with what the last cycle taught us.</p>
|
||||||
|
<p class="source">Proposed operating model. Human review guides decisions as the program evolves.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="roles" aria-labelledby="title-8">
|
||||||
|
<p class="overline">08 / AI and people</p>
|
||||||
|
<h2 id="title-8">AI supports the operation.<br /><em>People give it direction.</em></h2>
|
||||||
|
<div class="table-wrap"><table><caption class="sr-only">Responsibilities in the proposed content program</caption><thead><tr><th scope="col">Work</th><th scope="col">AI support</th><th scope="col">Human responsibility</th></tr></thead><tbody>
|
||||||
|
<tr><th scope="row">Audience research</th><td>Group questions and surface patterns.</td><td>Hector selects the audience and business priority.</td></tr>
|
||||||
|
<tr><th scope="row">Content production</th><td>Draft, transcribe, caption, and adapt formats.</td><td>Creators shape the story. Experts verify the teaching.</td></tr>
|
||||||
|
<tr><th scope="row">Campaign operations</th><td>Prepare schedules, check links, and flag exceptions.</td><td>The team approves publishing and campaign changes.</td></tr>
|
||||||
|
<tr><th scope="row">Performance learning</th><td>Summarize results and propose the next test.</td><td>Hector interprets outcomes and directs investment.</td></tr>
|
||||||
|
</tbody></table></div>
|
||||||
|
<p class="closing-line">The system evolves through evidence and accountable decisions.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="rhythm" aria-labelledby="title-9">
|
||||||
|
<p class="overline">09 / A proposed operating rhythm</p>
|
||||||
|
<h2 id="title-9">One human conversation.<br /><em>A connected content series.</em></h2>
|
||||||
|
<div class="rhythm-layout">
|
||||||
|
<div class="session"><span class="small-label">Illustrative production cycle</span><p class="big-number">1</p><h3>Instructor recording session</h3><p>Capture a useful lesson, a common mistake, and the question learners ask most often.</p></div>
|
||||||
|
<div class="lined-list"><div><h3>During the week</h3><p>Develop a short video, a visual explanation, and a useful follow-up. Adapt to channel behavior rather than posting identical copies everywhere.</p></div><div><h3>At the weekly review</h3><p>Read responses, ask advisors about lead quality, and choose the next topic or creative test.</p></div><div><h3>At the monthly review</h3><p>Review conversion and effort by content theme. Adjust the editorial plan, distribution, and production capacity.</p></div></div>
|
||||||
|
</div>
|
||||||
|
<p class="source">Cadence and volume are proposals. Agree them with Hector and ONLC against available people, budget, and response capacity.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="measurement" aria-labelledby="title-10">
|
||||||
|
<p class="overline">10 / Measurement that changes decisions</p>
|
||||||
|
<h2 id="title-10">Attention matters.<br /><em>What follows matters too.</em></h2>
|
||||||
|
<div class="measurement">
|
||||||
|
<div><span class="small-label">Resonance</span><h3>Did it help?</h3><p>Watch time, saves, meaningful questions, and useful replies.</p><span class="decision">Guides the next creative brief.</span></div>
|
||||||
|
<div><span class="small-label">Consideration</span><h3>Did it create interest?</h3><p>Relevant visits, webinar attendance, and advisor inquiries.</p><span class="decision">Guides the offer and next step.</span></div>
|
||||||
|
<div><span class="small-label">Business outcome</span><h3>Did it lead to training?</h3><p>Qualified inquiries, enrollments, revenue, and repeat demand.</p><span class="decision">Guides where to invest.</span></div>
|
||||||
|
</div>
|
||||||
|
<p class="closing-line">Set a baseline. Track self-paid and employer-funded learners separately. Compare results against the full cost of the program.</p>
|
||||||
|
<p class="source">Targets follow baseline measurement. No conversion lift or return on investment is assumed.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide" id="starting-point" aria-labelledby="title-11">
|
||||||
|
<p class="overline">11 / The starting point with Hector</p>
|
||||||
|
<h2 id="title-11">A focused beginning.<br /><em>An ongoing program.</em></h2>
|
||||||
|
<div class="two-col"><p class="statement">Start with one audience and one course family. Build the operating rhythm, then expand where the evidence supports it.</p><div class="lined-list"><div><h3>Align the business need</h3><p>Identify what has weakened: demand, enrollment, purchase size, retention, or profitability.</p></div><div><h3>Choose a first content series</h3><p>Match a real learner problem with an available ONLC expert and a relevant training offer.</p></div><div><h3>Connect publication to feedback</h3><p>Establish attribution, lead follow-up, and access to the results needed for each review.</p></div></div></div>
|
||||||
|
<div class="proposal"><span>Proposed partnership</span><p>Hector leads strategy. Our team creates, curates, and operates the content program. ONLC supplies expertise and customer feedback.</p></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="slide sources-slide" id="evidence" aria-labelledby="title-12">
|
||||||
|
<p class="overline">Reference / Evidence & assumptions</p>
|
||||||
|
<h2 id="title-12">A grounded starting point</h2>
|
||||||
|
<div class="two-col"><div><h3>Public evidence</h3><ul class="sources-list"><li><a href="https://www.onlc.com/aboutus.htm" target="_blank" rel="noopener">ONLC company overview</a><span>History and delivery model.</span></li><li><a href="https://www.onlc.com/register.htm" target="_blank" rel="noopener">Registration and policies</a><span>Delivery formats, retakes, and conditional Ready to Run status.</span></li><li><a href="https://www.onlc.com/certification-computer-training.htm" target="_blank" rel="noopener">Training and Learning Credits</a><span>Certification and organizational purchasing offers.</span></li><li><a href="https://www.instagram.com/onlc.training/" target="_blank" rel="noopener">ONLC Instagram</a> and <a href="https://www.linkedin.com/company/onlc/" target="_blank" rel="noopener">LinkedIn</a><span>Limited public content sample reviewed September 28, 2026.</span></li><li><a href="https://www.linkedin.com/feed/update/urn:li:activity:7506807485966761986/" target="_blank" rel="noopener">Community teaching story</a><span>An existing example of human, contextual storytelling.</span></li></ul></div><div class="lined-list"><div><h3>Working assessment</h3><p>ONLC can make its human expertise more visible and develop stronger relationships with individual learners.</p></div><div><h3>Still to establish</h3><p>The scale and causes of the performance change, historical channel contribution, recent social results, and viable audience economics.</p></div><div><h3>Proposal status</h3><p>Prepared for Hector Salazar. Creative concepts and operating choices invite discussion. This presentation reports no private analytics or proven campaign returns.</p></div></div></div>
|
||||||
|
<p class="endline">ONLC / Human connection. Continuous improvement.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="controls" aria-label="Slide navigation">
|
||||||
|
<span class="chapter-name" id="chapter-name">The problem & opportunity</span>
|
||||||
|
<div class="pager"><button id="previous" aria-label="Previous slide">←</button><span id="slide-count" aria-live="polite" aria-atomic="true">01 / 13</span><button id="next" aria-label="Next slide">→</button></div>
|
||||||
|
<span class="key-hint">Use ← → keys</span>
|
||||||
|
<div class="progress" aria-hidden="true"><span id="progress-fill"></span></div>
|
||||||
|
</footer>
|
||||||
|
<dialog id="contents-dialog" aria-labelledby="contents-title"><div class="dialog-top"><h2 id="contents-title">Contents</h2><button id="close-contents" aria-label="Close contents">×</button></div><ol>{chapters.map((chapter, i) => <li><button data-go={i}><span>{String(i + 1).padStart(2, '0')}</span>{chapter}</button></li>)}</ol></dialog>
|
||||||
|
<script>
|
||||||
|
const slides = [...document.querySelectorAll<HTMLElement>('.slide')];
|
||||||
|
const body = document.body;
|
||||||
|
const count = document.getElementById('slide-count')!;
|
||||||
|
const chapter = document.getElementById('chapter-name')!;
|
||||||
|
const progress = document.getElementById('progress-fill')!;
|
||||||
|
const previous = document.getElementById('previous') as HTMLButtonElement;
|
||||||
|
const next = document.getElementById('next') as HTMLButtonElement;
|
||||||
|
const readingButton = document.getElementById('reading-button') as HTMLButtonElement;
|
||||||
|
const dialog = document.getElementById('contents-dialog') as HTMLDialogElement;
|
||||||
|
const links = [...document.querySelectorAll<HTMLButtonElement>('[data-go]')];
|
||||||
|
let index = Math.max(0, slides.findIndex(s => s.id === location.hash.slice(1)));
|
||||||
|
let reading = matchMedia('(max-width: 760px)').matches;
|
||||||
|
function render(updateHash = true) {
|
||||||
|
slides.forEach((s, i) => { s.hidden = !reading && i !== index; s.classList.toggle('active', i === index); });
|
||||||
|
body.classList.toggle('presenting', !reading);
|
||||||
|
body.classList.toggle('reading', reading);
|
||||||
|
count.textContent = `${String(index + 1).padStart(2, '0')} / ${slides.length}`;
|
||||||
|
chapter.textContent = links[index].textContent!.replace(/^\d+/, '').trim();
|
||||||
|
progress.style.width = `${(index + 1) / slides.length * 100}%`;
|
||||||
|
previous.disabled = index === 0; next.disabled = index === slides.length - 1;
|
||||||
|
readingButton.textContent = reading ? 'Present' : 'Read all';
|
||||||
|
readingButton.setAttribute('aria-pressed', String(reading));
|
||||||
|
links.forEach((b,i) => b.setAttribute('aria-current', i === index ? 'step' : 'false'));
|
||||||
|
if (updateHash) history.replaceState(null, '', `#${slides[index].id}`);
|
||||||
|
}
|
||||||
|
function go(i: number) { index = Math.max(0, Math.min(slides.length-1,i)); render(); if(reading) slides[index].scrollIntoView({behavior: 'smooth', block:'start'}); else window.scrollTo(0,0); }
|
||||||
|
previous.addEventListener('click',()=>go(index-1)); next.addEventListener('click',()=>go(index+1));
|
||||||
|
readingButton.addEventListener('click',()=>{reading=!reading;render();if(reading)slides[index].scrollIntoView({block:'start'});else window.scrollTo(0,0)});
|
||||||
|
document.getElementById('print-button')!.addEventListener('click',()=>window.print());
|
||||||
|
document.getElementById('contents-button')!.addEventListener('click',()=>dialog.showModal());
|
||||||
|
document.getElementById('close-contents')!.addEventListener('click',()=>dialog.close());
|
||||||
|
links.forEach(b=>b.addEventListener('click',()=>{dialog.close();go(Number(b.dataset.go))}));
|
||||||
|
dialog.addEventListener('click',e=>{if(e.target===dialog){const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close()}});
|
||||||
|
document.addEventListener('keydown',e=>{ if(reading||dialog.open||(e.target as HTMLElement).closest('input,textarea,select,[role="tab"]'))return; if(['ArrowRight','PageDown',' '].includes(e.key)){e.preventDefault();go(index+1)} if(['ArrowLeft','PageUp'].includes(e.key)){e.preventDefault();go(index-1)} if(e.key==='Home'){e.preventDefault();go(0)} if(e.key==='End'){e.preventDefault();go(slides.length-1)} });
|
||||||
|
window.addEventListener('hashchange',()=>{const found=slides.findIndex(s=>s.id===location.hash.slice(1));if(found>=0){index=found;render(false)}});
|
||||||
|
const tabs=[...document.querySelectorAll<HTMLButtonElement>('[data-sample]')];
|
||||||
|
function selectTab(t: HTMLButtonElement){tabs.forEach(b=>{const on=b===t;b.setAttribute('aria-selected',String(on));b.tabIndex=on?0:-1;document.getElementById(b.getAttribute('aria-controls')!)!.hidden=!on})}
|
||||||
|
tabs.forEach((t,i)=>{t.addEventListener('click',()=>selectTab(t));t.addEventListener('keydown',e=>{if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();const n=tabs[(i+(e.key==='ArrowRight'?1:tabs.length-1))%tabs.length];selectTab(n);n.focus()}})});
|
||||||
|
render(false);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user