https://systemiz.com/components-v3/02b-outcome.jsx

1/* Systemiz site — Outcome / Cognitive Freedom section */
2
3function OutcomeSection({ onBook, ctaCopy = "Join Systemizers" }) {
4  const pillars = [
5  { ic: "brain-cog", title: "Out of your head", desc: "The business runs on systems you trust, not on memory, calendar tetris, or constant context-switching. Your mental energy stops getting eaten by operations and starts going into growth." },
6  { ic: "banknote", title: "Reliable revenue", desc: "Processes execute the same way every time, numbers update themselves, and follow-ups happen automatically. Revenue keeps growing whether you're working or not." },
7  { ic: "compass", title: "Strategic by design", desc: "80% of your time is spent on the work that only you can do, and the revenue compounds over time because it's strategic, creative, and relationship-based." }];
8
9
10  return (
11    <section className="section section-outcome" id="outcome" data-screen-label="03 The Outcome" style={{ paddingTop: "0" }}>
12      <div className="shell">
13        <div className="section-head reveal">
14          <span className="eyebrow">The Outcome</span>
15          <h2>An <span>AI OS</span> gives you <span className="accent">Cognitive Freedom</span>.</h2>
16          <p className="lede">After helping dozens of founders build <strong className="lede-em">AI Operating Systems</strong>, we've found that the outcome that matters most is not another tool, increased productivity or even more time, it's <strong className="lede-em">cognitive freedom</strong>.
17
18          </p>
19        </div>
20
21        <div className="outcome-stage reveal">
22          <div className="outcome-quote">
23            <p>
24              <strong>Cognitive Freedom</strong> is the ability to stop holding the business in your head, because you have an <strong>efficient and reliable system you trust,</strong> so you spend 80% of your time on the <strong>strategic, creative and revenue-generating work only you can do.</strong>
25            </p>
26            <div className="outcome-signature">Aka, not waking up at 3am anymore because<br />of something you had forgotten about.</div>
27          </div>
28
29          <div className="outcome-split" aria-hidden="true">
30            <div className="osplit-row">
31              <div className="osplit-label">
32                <span className="osplit-tag">Before</span>
33                <span className="osplit-headline">Working <span className="caps-accent">IN</span> the business</span>
34              </div>
35              <div className="osplit-bar today">
36                <div className="osplit-fill osplit-in" style={{ width: '80%' }}>
37                  <span className="osplit-pct">80%</span>
38                  <span className="osplit-cap">Reactive · operational · routing decisions</span>
39                </div>
40                <div className="osplit-fill osplit-on" style={{ width: '20%' }}>
41                  <span className="osplit-pct">20%</span>
42                </div>
43              </div>
44            </div>
45            <div className="osplit-row">
46              <div className="osplit-label">
47                <span className="osplit-tag tag-after">After</span>
48                <span className="osplit-headline">Working <span className="caps-accent">ON</span> the business</span>
49              </div>
50              <div className="osplit-bar after">
51                <div className="osplit-fill osplit-on flip" style={{ width: '80%' }}>
52                  <span className="osplit-pct">80%</span>
53                  <span className="osplit-cap">STRATEGIC · CREATIVE · REVENUE</span>
54                </div>
55                <div className="osplit-fill osplit-in flip" style={{ width: '20%' }}>
56                  <span className="osplit-pct">20%</span>
57                </div>
58              </div>
59            </div>
60          </div>
61        </div>
62
63        <div className="outcome-pillars reveal">
64          {pillars.map((p, i) => <div className="opillar" key={i}>
65              <span className="opillar-ico"><i data-lucide={p.ic}></i></span>
66              <div className="opillar-title">{p.title}</div>
67              <div className="opillar-desc">{p.desc}</div>
68            </div>
69          )}
70        </div>
71
72        <CTAPanel
73          eyebrow="Get cognitive freedom"
74          title={"Get the AIOS that gives\nyou your freedom back"}
75          sub={"Join Systemizers and get the Notion + Claude AI system setup for your business, with courses, community & coaching c

75alls for support."}
76          ctaCopy={ctaCopy}
77          onBook={onBook} />
78
79      </div>
80    </section>);
81
82}
83
84/* Reusable section CTA panel — the engaging boxed CTA used under
85   Outcome, Testimonials and Fit. onBook opens the booking modal. */
86function CTAPanel({ eyebrow, title, sub, ctaCopy = "Join Systemizers", onBook, book = false, showBook = false }) {
87  const handleClick = book ?
88  () => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'cta_panel', event_label: 'book_strategy_call' }); if (window.openSystemizStrategyCall) window.openSystemizStrategyCall(); else if (onBook) onBook(); } :
89  () => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'cta_panel', event_label: 'join_systemizers' }); if (onBook) onBook(); };
90  const openBookCall = () => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'cta_panel', event_label: 'book_strategy_call' }); if (window.openSystemizStrategyCall) window.openSystemizStrategyCall(); else if (onBook) onBook(); };
91  return (
92    <div className="cta-panel reveal">
93      <div className="cta-panel-copy">
94        {eyebrow && <div className="cta-panel-eyebrow">{eyebrow}</div>}
95        <h3 className="cta-panel-title">{title}</h3>
96        {sub && <p className="cta-panel-sub">{sub}</p>}
97      </div>
98      <div className="cta-panel-actions">
99        <button className={"cta-panel-btn" + (book ? " cta-panel-btn-book" : "")} onClick={handleClick}>
100          <span>{ctaCopy}</span>
101          <i data-lucide={book ? "calendar" : "mouse-pointer-click"}></i>
102        </button>
103        {showBook && !book &&
104        <button className="cta-panel-btn cta-panel-btn-book" onClick={openBookCall}>
105          <span>Book a strategy call</span>
106          <i data-lucide="calendar"></i>
107        </button>}
108      </div>
109    </div>);
110
111}
112
113Object.assign(window, { OutcomeSection, CTAPanel });