|
| 1 | +export default function ComingOutOfRestModePage() { |
| 2 | + return ( |
| 3 | + <main className="min-h-screen pt-20 bg-gradient-to-br from-brand-green-dark via-brand-purple-dark to-brand-green-dark"> |
| 4 | + <div className="max-w-4xl mx-auto px-4 py-12"> |
| 5 | + <div className="prose prose-lg max-w-none"> |
| 6 | + |
| 7 | + {/* Hero */} |
| 8 | + <section className="mb-6 mt-0 text-center"> |
| 9 | + <h1 className="font-display text-4xl md:text-5xl text-white mb-2 mt-0"> |
| 10 | + Coming Out of Rest Mode |
| 11 | + </h1> |
| 12 | + <p className="text-xl md:text-2xl text-brand-cream font-light tracking-wide mb-4 mt-0"> |
| 13 | + Sustainable Tech for the Long Game |
| 14 | + </p> |
| 15 | + <p className="text-lg md:text-xl max-w-2xl mx-auto text-white font-light leading-relaxed mb-6"> |
| 16 | + Build digital systems that survive real life — not just your most motivated weeks. |
| 17 | + </p> |
| 18 | + </section> |
| 19 | + |
| 20 | + {/* Who this is for */} |
| 21 | + <section className="mb-6 mt-0 bg-white/90 border border-brand-green-accent rounded-2xl p-6 shadow-xl"> |
| 22 | + <h2 className="text-2xl font-display mb-4 text-brand-green-dark mt-0">Who this is for</h2> |
| 23 | + <ul className="list-disc list-inside text-brand-green-dark space-y-2 mb-0"> |
| 24 | + <li>You've been in rest mode for weeks (or months) and reopening your systems feels heavy.</li> |
| 25 | + <li>Your task backlog has grown past the point where you know where to start.</li> |
| 26 | + <li>You have notes, tasks, or ideas scattered across too many places to trust any of them.</li> |
| 27 | + <li>You feel resistance to opening apps or systems you paused — not because they're broken, but because they feel like proof you fell behind.</li> |
| 28 | + <li>You want systems that hold up on low-energy days, not just the days when everything clicks.</li> |
| 29 | + <li>You're done waiting for the “right time” to restart and ready to move with what you have.</li> |
| 30 | + </ul> |
| 31 | + </section> |
| 32 | + |
| 33 | + {/* Event replay */} |
| 34 | + <section className="mb-6 mt-0 bg-white/90 border border-brand-green-accent rounded-2xl p-6 shadow-xl"> |
| 35 | + <h2 className="text-2xl font-display mb-2 text-brand-green-dark text-center mt-0"> |
| 36 | + Watch the event replay |
| 37 | + </h2> |
| 38 | + <p className="text-brand-green-dark text-center mb-4"> |
| 39 | + Coming Out of Rest Mode: Sustainable Tech for the Long Game — March 29, 2026 |
| 40 | + </p> |
| 41 | + <div className="w-full mt-0"> |
| 42 | + <iframe |
| 43 | + width="100%" |
| 44 | + height="315" |
| 45 | + src="https://www.youtube.com/embed/eHrZ_XruMBs" |
| 46 | + title="Coming Out of Rest Mode: Sustainable Tech for the Long Game" |
| 47 | + frameBorder="0" |
| 48 | + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| 49 | + referrerPolicy="strict-origin-when-cross-origin" |
| 50 | + allowFullScreen |
| 51 | + style={{ borderRadius: '12px' }} |
| 52 | + /> |
| 53 | + </div> |
| 54 | + </section> |
| 55 | + |
| 56 | + {/* How to use in 15 minutes */} |
| 57 | + <section className="mb-6 mt-0 bg-white/90 border border-brand-green-accent rounded-2xl p-6 shadow-xl"> |
| 58 | + <h2 className="text-2xl font-display mb-4 text-brand-green-dark mt-0">How to use this in 15 minutes</h2> |
| 59 | + <ol className="list-decimal list-inside text-brand-green-dark space-y-3 mb-0"> |
| 60 | + <li> |
| 61 | + <span className="font-semibold">Skim the key concepts below</span> — 50% framing and |
| 62 | + Keep / Drain / Carry. Pick the one that feels most relevant right now. |
| 63 | + </li> |
| 64 | + <li> |
| 65 | + <span className="font-semibold">Pick one thing to audit.</span> Not your whole stack — one |
| 66 | + system or one area. Ask: is this a KEEP, a DRAIN, or something I'm carrying into active season? |
| 67 | + </li> |
| 68 | + <li> |
| 69 | + <span className="font-semibold">Make the 50% move.</span> Not the perfect move. The move |
| 70 | + you can make today with what you have. |
| 71 | + </li> |
| 72 | + <li> |
| 73 | + <span className="font-semibold">Write down one thing to carry forward.</span> What worked |
| 74 | + during rest mode that you want to keep? |
| 75 | + </li> |
| 76 | + </ol> |
| 77 | + </section> |
| 78 | + |
| 79 | + {/* Key concepts */} |
| 80 | + <section className="mb-6 mt-0 bg-white/95 border-2 border-brand-green-accent rounded-3xl p-6 md:p-8 shadow-2xl"> |
| 81 | + <h2 className="text-3xl font-display mb-6 text-brand-green-dark text-center mt-0">Key concepts from March</h2> |
| 82 | + |
| 83 | + {/* 50% framing */} |
| 84 | + <div className="mb-8"> |
| 85 | + <h3 className="text-xl font-display mb-3 text-brand-green-dark">50% framing</h3> |
| 86 | + <p className="text-brand-green-dark mb-3"> |
| 87 | + <strong>50% is a directional signal, not a grade.</strong> |
| 88 | + </p> |
| 89 | + <p className="text-brand-green-dark mb-3"> |
| 90 | + The right direction at 50% beats the wrong system at 100%. Sustainable tech is often choosing |
| 91 | + to work with what you have and settling on a compromise you can live with — instead of holding |
| 92 | + out for the full vision you never launch. |
| 93 | + </p> |
| 94 | + <p className="text-brand-green-dark mb-3"> |
| 95 | + A real example: migrating to a new deployment platform instead of rebuilding the whole site |
| 96 | + from scratch. Values addressed, rest preserved, actual progress made. That's the 50% move. |
| 97 | + </p> |
| 98 | + <div className="bg-brand-green-dark/10 border-l-4 border-brand-green-accent rounded p-4"> |
| 99 | + <p className="text-brand-green-dark font-semibold mb-0"> |
| 100 | + The question to ask: What compromise would get me moving without burning the whole plan? |
| 101 | + </p> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + |
| 105 | + <hr className="border-brand-green-accent/30 my-6" /> |
| 106 | + |
| 107 | + {/* Keep / Drain / Carry */} |
| 108 | + <div> |
| 109 | + <h3 className="text-xl font-display mb-3 text-brand-green-dark">Keep / Drain / Carry audit</h3> |
| 110 | + <p className="text-brand-green-dark mb-4"> |
| 111 | + A sustainable stack is not the best stack. It's the stack you can actually live inside. |
| 112 | + </p> |
| 113 | + <p className="text-brand-green-dark mb-4">Run an honest inventory of your current systems:</p> |
| 114 | + |
| 115 | + <div className="overflow-x-auto mb-4"> |
| 116 | + <table className="w-full text-sm text-left border-collapse"> |
| 117 | + <thead> |
| 118 | + <tr className="bg-brand-green-dark text-white"> |
| 119 | + <th className="px-4 py-3 rounded-tl-lg font-semibold">Category</th> |
| 120 | + <th className="px-4 py-3 font-semibold">Meaning</th> |
| 121 | + <th className="px-4 py-3 rounded-tr-lg font-semibold">What to ask</th> |
| 122 | + </tr> |
| 123 | + </thead> |
| 124 | + <tbody> |
| 125 | + <tr className="bg-white border-b border-brand-green-accent/20"> |
| 126 | + <td className="px-4 py-3 font-semibold text-brand-green-dark">KEEP</td> |
| 127 | + <td className="px-4 py-3 text-brand-green-dark">Still working, worth maintaining</td> |
| 128 | + <td className="px-4 py-3 text-brand-green-dark">Does this support me on a slow week?</td> |
| 129 | + </tr> |
| 130 | + <tr className="bg-brand-green-accent/5 border-b border-brand-green-accent/20"> |
| 131 | + <td className="px-4 py-3 font-semibold text-brand-green-dark">DRAIN</td> |
| 132 | + <td className="px-4 py-3 text-brand-green-dark">More friction than value</td> |
| 133 | + <td className="px-4 py-3 text-brand-green-dark">Am I maintaining this out of obligation?</td> |
| 134 | + </tr> |
| 135 | + <tr className="bg-white"> |
| 136 | + <td className="px-4 py-3 font-semibold text-brand-green-dark rounded-bl-lg">CARRY</td> |
| 137 | + <td className="px-4 py-3 text-brand-green-dark">The 50% move that consolidates enough</td> |
| 138 | + <td className="px-4 py-3 text-brand-green-dark rounded-br-lg">What compromise can I live with right now?</td> |
| 139 | + </tr> |
| 140 | + </tbody> |
| 141 | + </table> |
| 142 | + </div> |
| 143 | + |
| 144 | + <p className="text-brand-green-dark mb-4"> |
| 145 | + The DRAIN column is not a failure list. It's information. Troubleshooting will always |
| 146 | + happen — the goal is to know which systems you're comfortable troubleshooting. |
| 147 | + </p> |
| 148 | + |
| 149 | + <div className="bg-brand-purple-dark/10 border-l-4 border-brand-purple-dark rounded p-4"> |
| 150 | + <p className="text-brand-green-dark font-semibold mb-0"> |
| 151 | + Reflection: What are you maintaining out of obligation, not because it works for your brain |
| 152 | + anymore? Name your KEEP, your DRAIN, and your CARRY. |
| 153 | + </p> |
| 154 | + </div> |
| 155 | + </div> |
| 156 | + </section> |
| 157 | + |
| 158 | + {/* Low-capacity fallback */} |
| 159 | + <section className="mb-6 mt-0 bg-brand-green-dark border-l-4 border-brand-green-accent rounded-lg p-6 shadow-sm"> |
| 160 | + <h2 className="text-2xl font-display mb-4 text-white mt-0">Low-capacity fallback</h2> |
| 161 | + <p className="text-white mb-4"> |
| 162 | + When energy is genuinely low, skip the audit. Skip the rebuild. Do one of these: |
| 163 | + </p> |
| 164 | + <ul className="list-disc list-inside text-brand-cream space-y-2 mb-4"> |
| 165 | + <li>Name your DRAIN. You don't have to fix it today. Just name it.</li> |
| 166 | + <li>Open one thing. One tab, one file, one task. Done.</li> |
| 167 | + <li>Let 50% be the goal. Returning at 50% is not falling short. It's the move that keeps you in the game.</li> |
| 168 | + </ul> |
| 169 | + <p className="text-brand-green-accent text-sm"> |
| 170 | + <strong>What does not belong on a low-capacity day:</strong> rebuilding your system, |
| 171 | + evaluating every area at once, deciding on new approaches. |
| 172 | + </p> |
| 173 | + </section> |
| 174 | + |
| 175 | + {/* What to do today */} |
| 176 | + <section className="mb-6 mt-0 bg-white/90 border border-brand-green-accent rounded-2xl p-6 shadow-xl text-center"> |
| 177 | + <h2 className="text-2xl font-display mb-3 text-brand-green-dark mt-0">What to do today</h2> |
| 178 | + <p className="text-brand-green-dark text-sm mb-3 italic">Under 10 minutes</p> |
| 179 | + <p className="text-brand-green-dark text-lg"> |
| 180 | + Pick one area of your current stack and label it: <strong>KEEP</strong>, <strong>DRAIN</strong>, |
| 181 | + or <strong>CARRY</strong>. Write it down somewhere you'll see it. |
| 182 | + That one label is a complete 50% move. |
| 183 | + </p> |
| 184 | + </section> |
| 185 | + |
| 186 | + {/* CTA */} |
| 187 | + <section className="mb-6 mt-0 bg-white/90 border border-brand-green-accent rounded-2xl p-6 md:p-8 shadow-xl"> |
| 188 | + <h2 className="text-2xl font-display mb-4 text-brand-green-dark text-center mt-0">Start here</h2> |
| 189 | + <div className="space-y-4 text-brand-green-dark"> |
| 190 | + <p> |
| 191 | + <strong>Subscribe to the Pythoness Perspective</strong> — weekly brain-friendly tech for |
| 192 | + neurodivergent creatives and small businesses:{' '} |
| 193 | + <a |
| 194 | + href="https://newsletter.pythonessprogrammer.com" |
| 195 | + target="_blank" |
| 196 | + rel="noopener noreferrer" |
| 197 | + className="underline hover:text-brand-purple-dark" |
| 198 | + > |
| 199 | + newsletter.pythonessprogrammer.com |
| 200 | + </a> |
| 201 | + </p> |
| 202 | + <p> |
| 203 | + <strong>Watch the event replay</strong> — Coming Out of Rest Mode: Sustainable Tech for the |
| 204 | + Long Game:{' '} |
| 205 | + <a |
| 206 | + href="https://youtube.com/live/eHrZ_XruMBs" |
| 207 | + target="_blank" |
| 208 | + rel="noopener noreferrer" |
| 209 | + className="underline hover:text-brand-purple-dark" |
| 210 | + > |
| 211 | + Watch on YouTube |
| 212 | + </a> |
| 213 | + </p> |
| 214 | + <p> |
| 215 | + <strong>Work with me</strong> — coaching, systems, and strategy for building tech that works |
| 216 | + with your brain:{' '} |
| 217 | + <a |
| 218 | + href="https://pythonessprogrammer.com/services" |
| 219 | + className="underline hover:text-brand-purple-dark" |
| 220 | + > |
| 221 | + pythonessprogrammer.com/services |
| 222 | + </a> |
| 223 | + </p> |
| 224 | + </div> |
| 225 | + </section> |
| 226 | + |
| 227 | + {/* Footer note */} |
| 228 | + <div className="mt-12 bg-brand-green-accent/20 text-white text-center py-2 px-4 rounded-lg" role="status"> |
| 229 | + <p className="text-sm">March 2026 — Pythoness Programmer</p> |
| 230 | + </div> |
| 231 | + |
| 232 | + </div> |
| 233 | + </div> |
| 234 | + </main> |
| 235 | + ); |
| 236 | +} |
0 commit comments