1/* Systemiz site â The Philosophy (Hustler vs Systemizer + 3 Systems of Record / Engagement / Intelligence) */ 2 3function PhilosophySection() { 4 // Trimmed list â focused on the contrasts that actually differ in behavior 5 const hustler = [ 6 "Runs the business like a to-do list", 7 "Do it themselves", 8 "When things break, they work harder", 9 "Builds a high-paying job they can't quit"]; 10 11 const systemizer = [ 12 "Runs the business like a machine", 13 "Delegate, automate or eliminate it", 14 "When things break, they fix the system", 15 "Builds a business that runs without them"]; 16 17 18 return ( 19 <section className="section philosophy" id="philosophy" data-screen-label="05 Philosophy"> 20 <div className="shell"> 21 <div className="section-head reveal"> 22 <span className="eyebrow">The Philosophy</span> 23 <h2>Hustlers are the system.<br /><span className="accent" style={{ color: "var(--brand)" }}>Systemizers build it.</span></h2> 24 <p className="lede">If you stopped working today, would your business make more money or less? If less, then <strong style={{ color: "var(--fg-1)", fontWeight: 600 }}>you don't have a business, you have a job you can't quit.</strong> No judgment tho, this is where most founders are and why they stay stuck. Becoming a Systemizer is where the real leverage lies. 25 26 </p> 27 </div> 28 29 <div className="philo-grid reveal"> 30 <div className="philo-col hustler"> 31 <div className="philo-head"> 32 <span className="philo-tag">Hustler</span> 33 <h3>You <em>are</em> the system.</h3> 34 </div> 35 <ul className="philo-list"> 36 {hustler.map((t, i) => 37 <li key={i}><span className="philo-mark"><i data-lucide="x"></i></span><span>{t}</span></li> 38 )} 39 </ul> 40 </div> 41 <div className="philo-divider" aria-hidden="true"> 42 <span className="philo-divider-line"></span> 43 <span className="philo-divider-arrow"><i data-lucide="arrow-right"></i></span> 44 <span className="philo-divider-line"></span> 45 </div> 46 <div className="philo-col systemizer"> 47 <div className="philo-head"> 48 <span className="philo-tag tag-after">Systemizer</span> 49 <h3>You <em>built</em> the system.</h3> 50 </div> 51 <ul className="philo-list"> 52 {systemizer.map((t, i) => 53 <li key={i}><span className="philo-mark on"><i data-lucide="check"></i></span><span>{t}</span></li> 54 )} 55 </ul> 56 </div> 57 </div> 58 59 <div className="philo-question reveal"> 60 <span className="philo-question-tag">The one question that changes everything</span> 61 <div className="philo-question-pair"> 62 <div className="philo-q-old"> 63 <span className="philo-q-label">Stop asking</span> 64 <span className="philo-q-text">"How can I do this <em>better?</em>"</span> 65 </div> 66 <span className="philo-q-arrow"><i data-lucide="arrow-right"></i></span> 67 <div className="philo-q-new"> 68 <span className="philo-q-label">Start asking</span> 69 <span className="philo-q-text">"What system will do this <em>for me?</em>"</span> 70 </div> 71 </div> 72 </div> 73 74 {/* ============== THE PARADOX â two stacked feedback bars, closed loop ============== */} 75 <div className="paradox"> 76 <div className="paradox-grid"> 77 <div className="paradox-head"> 78 <span className="eyebrow eyebrow-soft">The Paradox</span> 79 <h3>Those who need systems <span className="accent">most,</span> don't have time to build them.</h3> 80 <p className="paradox-lede">You're too busy because you don't have systems. And the reason you don't have systems is because you're too busy to build them. This is where founders stay stuck because the effect of systems compound over time, whether good or bad. 81 </p> 82 <blockquote className="paradox-quote">
83 <span className="paradox-quote-text">âYou don't rise to the level of your goals. You fall to the level of your systems.â <span className="paradox-quote-author">â James Clear</span></span> 84 </blockquote> 85 </div> 86 87 <div className="mobius" aria-hidden="true"> 88 <svg className="mobius-svg" viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet"> 89 <defs> 90 {/* Main ribbon gradient â deep crimson at the lobe tips, brand-red highlight at the twist. 91 No white anywhere, per spec. */} 92 <linearGradient id="mobius-stroke" x1="0" y1="0" x2="1" y2="0"> 93 <stop offset="0" stopColor="#2a0610" /> 94 <stop offset="0.18" stopColor="#5e1322" /> 95 <stop offset="0.5" stopColor="#ef3a4c" /> 96 <stop offset="0.82" stopColor="#5e1322" /> 97 <stop offset="1" stopColor="#2a0610" /> 98 </linearGradient> 99 100 {/* Vertical shading â top of the strip a hair brighter, bottom deeper. 101 Applied to the ribbon body as a translucent overlay stroke. */} 102 <linearGradient id="mobius-shade" x1="0" y1="0" x2="0" y2="1"> 103 <stop offset="0" stopColor="rgba(0,0,0,0)" /> 104 <stop offset="0.5" stopColor="rgba(0,0,0,0)" /> 105 <stop offset="1" stopColor="rgba(0,0,0,0.55)" /> 106 </linearGradient> 107 108 <filter id="mobius-glow" x="-20%" y="-50%" width="140%" height="200%"> 109 <feGaussianBlur stdDeviation="8" /> 110 </filter> 111 112 {/* Perfectly symmetric figure-8 / infinity outline. Control points mirror across both axes. 113 One closed path, so animateMotion loops forever â dot traces full edge continuously. */} 114 <path id="mobius-path" 115 d="M 80 160 116 C 80 60, 280 60, 400 160 117 C 520 260, 720 260, 720 160 118 C 720 60, 520 60, 400 160 119 C 280 260, 80 260, 80 160 Z" /> 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 </defs> 157 158 {/* v18 â soft dark drop-shadow removed; it was painting a 159 dirty black halo under the ribbon. */} 160 161 {/* Pitch-black core â gives the ribbon its weight */} 162 <use href="#mobius-path" 163 fill="none" 164 stroke="#0a0205" 165 strokeWidth="26" 166 strokeLinecap="round" 167 strokeLinejoin="round" /> 168 169 {/* Deep-crimson body */} 170 <use href="#mobius-path" 171 fill="none" 172 stroke="#3a0810" 173 strokeWidth="22" 174 strokeLinecap="round" 175 strokeLinejoin="round" /> 176 177 {/* Main red gradient surface */} 178 <use href="#mobius-path" 179 fill="none" 180 stroke="url(#mobius-stroke)" 181 strokeWidth="16" 182 strokeLinecap="round" 183 strokeLinejoin="round" /> 184 185 {/* Bottom-shading overlay â fakes the strip's underside */} 186 <use href="#mobius-path" 187 fill="none" 188 stroke="url(#mobius-shade)" 189 strokeWidth="16" 190 strokeLinecap="round" 191 strokeLinejoin="round" /> 192 193 {/* Travelling dot â brand red */} 194 <circle r="9" className="mobius-dot"> 195 <animateMotion dur="11s" repeatCount="indefinite" rotate="auto"> 196 <mpath href="#mobius-path" /> 197 </animateMotion> 198 </circle> 199 </svg> 200 201 <div className="mobius-label mobius-label-left">
202 <span className="mobius-label-title">No System</span> 203 <span className="mobius-label-sub">Everything requires your time</span> 204 </div> 205 <div className="mobius-label mobius-label-right"> 206 <span className="mobius-label-title">No Time</span> 207 <span className="mobius-label-sub">Too busy to build systems</span> 208 </div> 209 </div> 210 </div> 211 212 <div className="paradox-exits"> 213 <div className="paradox-exit-head"> 214 <span className="paradox-exit-rule"></span> 215 <span className="paradox-exit-tag">3 WAYS OUT</span> 216 <span className="paradox-exit-rule"></span> 217 </div> 218 <div className="paradox-exit-grid"> 219 <div className="pexit"> 220 <div className="pexit-ico"><i data-lucide="clock"></i></div> 221 <div className="pexit-num">01</div> 222 <div className="pexit-name">Do it yourself</div> 223 <p className="pexit-desc">Block 1h per day to build it from scratch. Realistic timeline: 6-12 months of trial and error, broken automations, and your team waiting for you to figure it out.</p> 224 </div> 225 <div className="pexit pexit-featured"> 226 <div className="pexit-ico"><i data-lucide="package"></i></div> 227 <div className="pexit-num">02</div> 228 <div className="pexit-name">Buy a finished system</div> 229 <p className="pexit-desc">You duplicate the same system we install for $7K+ agency clients, and we help you adapt it and automate it with AI. You stop wasting time and skip the trial & error.</p> 230 <a className="pexit-cta pexit-cta-primary" href="#founding" onClick={(e) => {e.preventDefault();if (window.goToFounding) window.goToFounding();}}> 231 Join Systemizers 232 <svg className="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg> 233 </a> 234 </div> 235 <div className="pexit pexit-featured"> 236 <div className="pexit-ico"><i data-lucide="user-plus"></i></div> 237 <div className="pexit-num">03</div> 238 <div className="pexit-name">Build a custom system</div> 239 <p className="pexit-desc">For founders who need custom systems beyond the core AIOS with fractional COO-level ongoing support, custom automations, 1:1 consulting access and training your team on the system we built.</p> 240 <a className="pexit-cta pexit-cta-book" href="https://cal.com/team/systemiz/aios-strategy" target="_blank" rel="noopener noreferrer" onClick={(e) => {if (window.openSystemizStrategyCall) {e.preventDefault();window.openSystemizStrategyCall();}}}> 241 Book a strategy call 242 <svg className="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg> 243 </a> 244 </div> 245 </div> 246 </div> 247 </div> 248 249 {/* 3-systems "Why Notion + Claude" block moved out into its own <WhyNotionClaude /> section 250 so it can sit right after the Outcome (Cognitive Freedom) section. */} 251 252 253 </div> 254 </section>);} 255 256// ============== WHY NOTION + CLAUDE â extracted from Philosophy ============== 257function WhyNotionClaude() { 258 return ( 259 <section className="section section-quiet" id="why-notion-claude" data-screen-label="07 Why Notion + Claude"> 260 <div className="shell"> 261 <div className="three-sys reveal"> 262 <div className="three-sys-head"> 263 <span className="eyebrow eyebrow-soft">Why Notion + Claude</span> 264 <h3>Every AIOS runs on <span className="accent">3 systems</span>.</h3> 265 <p className="three-sys-lede">To put AI inside your business, you need all three. 266 267 </p> 268 </div> 269 270 <div className="three-sys-grid"> 271 <div className="tsys-card"> 272 <div className="tsys-num">01</div> 273 <div className="tsys-name">System of Record</div> 274 <div className="tsys-tag">Where the truth lives</div> 275 <p className="tsys-desc">Your single source of truth where every project, contact, meeting, SOP, decision is organized in one place. This is the structured backend that makes your business visible.</p> 276 <div className="tsys-callout-slot"> 277 <div className="tsys-callout tsys-callout-notion"> 278 <img src="assets/notion-logo.png" alt="" className="tsys-callout-logo" />
279 <span className="tsys-callout-name">Notion</span> 280 </div> 281 </div> 282 </div> 283 <div className="tsys-card"> 284 <div className="tsys-num">02</div> 285 <div className="tsys-name">System of Engagement</div> 286 <div className="tsys-tag">Where humans work</div> 287 <p className="tsys-desc">The system you and your team use every day to run the business and get the work done. This is the dashboards, views, and pages built on top of the system of record.</p> 288 <div className="tsys-callout-slot"> 289 <div className="tsys-callout tsys-callout-notion"> 290 <img src="assets/notion-logo.png" alt="" className="tsys-callout-logo" /> 291 <span className="tsys-callout-name">Notion</span> 292 </div> 293 </div> 294 </div> 295 <div className="tsys-card tsys-card-claude"> 296 <div className="tsys-num">03</div> 297 <div className="tsys-name">System of Intelligence</div> 298 <div className="tsys-tag">Where AI automates</div> 299 <p className="tsys-desc">This is AI using the system of record for context, and operating inside the system of engagement to automate processes that makes you and your team move faster.</p> 300 <div className="tsys-callout-slot"> 301 <div className="tsys-callout tsys-callout-claude"> 302 <img src="assets/claude-logo.svg" alt="" className="tsys-callout-logo" /> 303 <span className="tsys-callout-name">Claude</span> 304 </div> 305 </div> 306 </div> 307 </div> 308 309 <div className="three-sys-insight"> 310 <p> 311 <strong>Notion is the system.</strong> Claude is the AI-employee you put on that system. 312 </p> 313 <div className="tsys-insight-line"></div> 314 </div> 315 </div> 316 </div> 317 </section>);} 318 319Object.assign(window, { PhilosophySection, WhyNotionClaude });
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.