Explore Our Packages

import { useState, useEffect } from "react";

// ─── COLOR TOKENS ────────────────────────────────────────────────

const C = {

bg: "#FFFFFF",

bgSoft: "#F4F6FA",

bgCard: "#FFFFFF",

navy: "#0B1F4B",

navyLight: "#1A3366",

navyBorder: "#0B1F4B22",

black: "#0A0A0A",

charcoal: "#1C1C2E",

muted: "#6B7A99",

mutedLight: "#A8B4C8",

rule: "#D8DDE8",

text: "#0A0A0A",

textSoft: "#3A4460",

};

const questions = [

{ id: 1, chapter: 1, area: "Goal Identity", text: "I can clearly articulate my top 3 life goals without hesitation.", icon: "🎯" },

{ id: 2, chapter: 1, area: "Goal Identity", text: "My goals align with my core values and who I am becoming.", icon: "🎯" },

{ id: 3, chapter: 2, area: "Goal Architecture", text: "I set goals with specific numbers, deadlines, and measurable outcomes.", icon: "📐" },

{ id: 4, chapter: 2, area: "Goal Architecture", text: "I use systems and tools (digital or physical) to organize my goals.", icon: "📐" },

{ id: 5, chapter: 3, area: "Discipline", text: "I track how I actually spend my time — not just how I think I do.", icon: "⏱️" },

{ id: 6, chapter: 3, area: "Discipline", text: "I consistently follow through even when motivation is low.", icon: "⏱️" },

{ id: 7, chapter: 4, area: "Self-Awareness", text: "I know the specific patterns and cycles that have held me back.", icon: "🔍" },

{ id: 8, chapter: 4, area: "Self-Awareness", text: "When I fail to reach a goal, I dig into the root cause — not just the surface reason.", icon: "🔍" },

{ id: 9, chapter: 5, area: "Accountability", text: "I have at least one person in my life who holds me to my goals.", icon: "🤝" },

{ id: 10, chapter: 5, area: "Accountability", text: "I show up consistently for the people who rely on me for accountability too.", icon: "🤝" },

{ id: 11, chapter: 6, area: "Daily Execution", text: "I have a morning ritual that sets the tone for winning the day.", icon: "🌅" },

{ id: 12, chapter: 7, area: "Weekly Planning", text: "I do a weekly brain dump and plan before the week begins.", icon: "📅" },

{ id: 13, chapter: 8, area: "Monthly Review", text: "I review my progress at the end of every month with honest data.", icon: "📊" },

{ id: 14, chapter: 9, area: "Quarterly Strategy", text: "I operate in 90-day sprints with clear milestones and checkpoints.", icon: "🗓️" },

{ id: 15, chapter: 9, area: "Quarterly Strategy", text: "I adjust my plan when I hit obstacles rather than abandoning the goal.", icon: "🗓️" },

{ id: 16, chapter: 10, area: "Time Maximization", text: "I use weekends intentionally to recover, create, or advance my goals.", icon: "⚡" },

{ id: 17, chapter: 11, area: "Time Maximization", text: "My mornings are protected and purposeful — not reactive.", icon: "⚡" },

{ id: 18, chapter: 12, area: "Time Maximization", text: "My evenings include wind-down rituals that set up tomorrow's success.", icon: "⚡" },

{ id: 19, chapter: 13, area: "Vision & Annual Planning",text: "I have a clear written vision for where I want to be 12 months from now.", icon: "🔭" },

{ id: 20, chapter: 13, area: "Vision & Annual Planning",text: "My calendar reflects my priorities — time is blocked for what matters most.", icon: "🔭" },

{ id: 21, chapter: 14, area: "Financial Winning", text: "I follow a spending plan that aligns with my income and goals.", icon: "💰" },

{ id: 22, chapter: 14, area: "Financial Winning", text: "I review my finances monthly and know my exact numbers.", icon: "💰" },

];

const chapterMap = {

1: { title: "Goal Identity", chapter: "Chapter 1" },

2: { title: "Goal Architecture", chapter: "Chapter 2" },

3: { title: "Discipline", chapter: "Chapter 3" },

4: { title: "Self-Awareness", chapter: "Chapter 4" },

5: { title: "Accountability", chapter: "Chapter 5" },

6: { title: "Daily Execution", chapter: "Chapter 6" },

7: { title: "Weekly Planning", chapter: "Chapter 7" },

8: { title: "Monthly Review", chapter: "Chapter 8" },

9: { title: "Quarterly Strategy", chapter: "Chapter 9" },

10: { title: "Time Maximization", chapter: "Chapters 10–12" },

13: { title: "Vision & Annual Planning", chapter: "Chapter 13" },

14: { title: "Financial Winning", chapter: "Chapter 14" },

};

const getScoreLabel = (pct) => {

if (pct >= 85) return { label: "Goldmine Status", bar: C.navy, desc: "You're operating at peak Winnergy. This is a genuine strength — refine and mentor others here." };

if (pct >= 65) return { label: "Rising Winner", bar: C.navyLight, desc: "Strong foundation with room to compound. Small upgrades here create big momentum." };

if (pct >= 40) return { label: "In the Mine", bar: "#4A5568", desc: "You have raw material to work with. Focus here to unlock significant growth." };

return { label: "Untapped Gold", bar: C.black, desc: "This is your highest-leverage opportunity. The breakthrough is waiting right here." };

};

const FLOW = ["F","L","O","W"];

const FlowBadge = ({ size = 44, fs = 17 }) => (

{FLOW.map((l, i) => (

<div key={i} style={{

width: size, height: size,

background: i % 2 === 0 ? C.navy : C.black,

display: "flex", alignItems: "center", justifyContent: "center",

fontSize: fs, fontWeight: "900", color: "#fff",

}}>{l}</div>

))}

</div>

);

const Chip = ({ label, bg = C.navy }) => (

<span style={{

display: "inline-block", padding: "4px 14px",

background: bg, color: "#fff",

fontSize: "10px", fontWeight: "700",

letterSpacing: "2.5px", textTransform: "uppercase",

}}>{label}</span>

);

const Divider = ({ label }) => (

<span style={{ fontSize: "10px", letterSpacing: "3px", color: C.muted, textTransform: "uppercase", whiteSpace: "nowrap" }}>{label}</span>

</div>

);

// ─── SHELL WRAPPER ───────────────────────────────────────────────

const Shell = ({ children, centered = true }) => (

<div style={{

maxWidth: "660px", margin: "0 auto", padding: "48px 24px 80px",

display: "flex", flexDirection: "column",

alignItems: "center", justifyContent: centered ? "center" : "flex-start",

minHeight: "calc(100vh - 5px)",

}}>

{children}

</div>

<style>{`

@keyframes fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

@keyframes spin { to { transform:rotate(360deg); } }

@keyframes blink { from { opacity:.4; } to { opacity:1; } }

input::placeholder { color:${C.mutedLight}; }

`}</style>

</div>

);

// ═════════════════════════════════════════════════════════════════

export default function WinneryDiagnostic() {

const [screen, setScreen] = useState("intro");

const [current, setCurrent] = useState(0);

const [answers, setAnswers] = useState({});

const [animOut, setAnimOut] = useState(false);

const [revealed, setRevealed] = useState(false);

const [capVis, setCapVis] = useState(false);

const [firstName, setFirstName] = useState("");

const [email, setEmail] = useState("");

const [formErr, setFormErr] = useState("");

const [loading, setLoading] = useState(false);

useEffect(() => {

if (screen === "results") setTimeout(() => setRevealed(true), 200);

if (screen === "capture") setTimeout(() => setCapVis(true), 100);

}, [screen]);

const answer = (val) => {

if (animOut) return;

setAnimOut(true);

setAnswers(p => ({ ...p, [questions[current].id]: val }));

setTimeout(() => {

if (current < questions.length - 1) setCurrent(c => c + 1);

else setScreen("capture");

setAnimOut(false);

}, 300);

};

const submit = (e) => {

e && e.preventDefault();

if (!firstName.trim()) { setFormErr("Please enter your first name."); return; }

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setFormErr("Please enter a valid email address."); return; }

setFormErr(""); setLoading(true);

// ↓ Replace with your email platform POST (Mailchimp, ConvertKit, MailerLite, etc.)

setTimeout(() => { setLoading(false); setScreen("results"); }, 1200);

};

const computeResults = () => {

const m = {};

questions.forEach(q => {

if (!m[q.area]) m[q.area] = { total: 0, count: 0, chapter: q.chapter };

m[q.area].total += (answers[q.id] || 0);

m[q.area].count += 1;

});

return Object.entries(m).map(([area, d]) => ({

area, chapter: d.chapter,

pct: Math.round((d.total / (d.count * 4)) * 100),

})).sort((a, b) => a.pct - b.pct);

};

const totalPct = () => {

const v = Object.values(answers);

return v.length ? Math.round((v.reduce((a, b) => a + b, 0) / (v.length * 4)) * 100) : 0;

};

const reset = () => {

setScreen("intro"); setCurrent(0); setAnswers({});

setRevealed(false); setCapVis(false);

setFirstName(""); setEmail(""); setFormErr("");

};

const fadeIn = (delay = 0) => ({

opacity: revealed ? 1 : 0,

transform: revealed ? "translateY(0)" : "translateY(14px)",

transition: `opacity .6s ${delay}s, transform .6s ${delay}s`,

});

// ────────────────────────────────────────────

// INTRO

// ────────────────────────────────────────────

if (screen === "intro") return (

<Shell>

Focus · Lean In · Own It · Win

</div>

WINNERGY

</h1>

DIAGNOSTIC

</div>

You can't mine gold you haven't mapped.

</p>

This 22-question diagnostic reveals exactly where your Winnergy is locked — and which chapters to prioritize first.

Built on Six Sigma methodology, translated for your life.

</p>

{[["22","Questions"],["10","Life Dimensions"],["~5","Minutes"]].map(([n, l]) => (

</div>

))}

</div>

<button onClick={() => setScreen("quiz")} style={{

background: C.navy, color: "#fff", border: "none",

padding: "18px 60px", fontSize: "13px", fontWeight: "700",

letterSpacing: "3px", textTransform: "uppercase",

cursor: "pointer", fontFamily: "inherit",

boxShadow: `0 8px 32px ${C.navy}40`, transition: "all .2s",

}}

onMouseEnter={e => { e.target.style.background = C.black; e.target.style.boxShadow = `0 12px 40px ${C.black}50`; }}

onMouseLeave={e => { e.target.style.background = C.navy; e.target.style.boxShadow = `0 8px 32px ${C.navy}40`; }}

>

Tap Into Your Goldmine →

</button>

Tricia J. · Ask TPJ — The Purpose Doula

</div>

</Shell>

);

// ────────────────────────────────────────────

// QUIZ

// ────────────────────────────────────────────

if (screen === "quiz") {

const q = questions[current];

const progress = Math.round((current / questions.length) * 100);

return (

{/* Progress */}

<span style={{ fontSize: "10px", color: C.mutedLight }}>{current + 1} / {questions.length}</span>

</div>

</div>

{/* Question card */}

<div style={{

width: "100%", maxWidth: "580px",

border: `1.5px solid ${C.navyBorder}`,

borderTop: `4px solid ${C.navy}`,

padding: "40px 36px 36px", marginBottom: "36px",

background: C.bgCard, boxShadow: `0 4px 24px ${C.navy}0D`,

opacity: animOut ? 0 : 1,

transform: animOut ? "translateY(8px)" : "translateY(0)",

transition: "opacity .28s, transform .28s",

}}>

</div>

{/* Scale labels */}

<span style={{ fontSize: "10px", color: C.mutedLight, letterSpacing: "1.5px", textTransform: "uppercase" }}>Absolutely</span>

</div>

{/* Answer buttons */}

{[{v:0,d:"Never"},{v:1,d:"Rarely"},{v:2,d:"Sometimes"},{v:3,d:"Usually"},{v:4,d:"Always"}].map(o => (

<button key={o.v} onClick={() => answer(o.v)} style={{

flex: 1, padding: "18px 6px",

background: C.bgSoft, border: `1.5px solid ${C.rule}`,

color: C.navy, cursor: "pointer", fontFamily: "inherit",

fontSize: "22px", fontWeight: "900",

display: "flex", flexDirection: "column", alignItems: "center", gap: "7px",

transition: "all .15s",

}}

onMouseEnter={e => { const t = e.currentTarget; t.style.background = C.navy; t.style.borderColor = C.navy; t.style.color = "#fff"; t.style.transform = "translateY(-3px)"; t.style.boxShadow = `0 6px 20px ${C.navy}30`; }}

onMouseLeave={e => { const t = e.currentTarget; t.style.background = C.bgSoft; t.style.borderColor = C.rule; t.style.color = C.navy; t.style.transform = "translateY(0)"; t.style.boxShadow = "none"; }}

>

{o.v}

</button>

))}

</div>

{chapterMap[q.chapter]?.chapter} · {chapterMap[q.chapter]?.title}

</div>

</Shell>

);

}

// ────────────────────────────────────────────

// CAPTURE GATE

// ────────────────────────────────────────────

if (screen === "capture") {

const teaser = totalPct();

const tStatus = getScoreLabel(teaser);

const vis = { opacity: capVis ? 1 : 0, transform: capVis ? "translateY(0)" : "translateY(20px)", transition: "opacity .55s, transform .55s" };

return (

<Shell>

{/* Blurred score */}

{teaser}<span style={{ fontSize: "36px" }}>%</span>

</div>

{tStatus.label} Detected

</div>

You've assessed <strong style={{ color: C.navy }}>10 dimensions</strong> of your life.<br />

Enter your info below to unlock your full Goldmine Report.

</p>

{/* Form card */}

<div style={{

background: C.bgSoft, border: `1.5px solid ${C.navyBorder}`,

borderTop: `4px solid ${C.navy}`, padding: "36px 32px",

textAlign: "left", boxShadow: `0 4px 24px ${C.navy}0D`,

}}>

<div style={{ fontSize: "10px", letterSpacing: "3px", color: C.muted, textTransform: "uppercase", marginBottom: "6px" }}>Unlock Your Full Report</div>

Get your personalized Goldmine Map, reading path, and breakthrough insights — instantly. Plus join the{" "}

<strong style={{ color: C.navy }}>Mindset Monday Newsletter</strong>.

</p>

{[

{ label: "First Name", type: "text", val: firstName, set: setFirstName, ph: "Enter your first name" },

{ label: "Email", type: "email", val: email, set: setEmail, ph: "Enter your email" },

].map(({ label, type, val, set, ph }) => (

<label style={{ display: "block", fontSize: "10px", letterSpacing: "2px", color: C.muted, textTransform: "uppercase", marginBottom: "7px" }}>{label}</label>

<input

type={type} value={val} onChange={e => set(e.target.value)} placeholder={ph}

style={{

width: "100%", boxSizing: "border-box",

background: "#fff", border: `1.5px solid ${val ? C.navy : C.rule}`,

color: C.black, padding: "13px 15px", fontSize: "15px",

fontFamily: "inherit", outline: "none", transition: "border-color .2s",

}}

onFocus={e => e.target.style.borderColor = C.navy}

onBlur={e => e.target.style.borderColor = val ? C.navy : C.rule}

onKeyDown={e => e.key === "Enter" && submit(e)}

/>

</div>

))}

{formErr && <div style={{ fontSize: "12px", color: "#B91C1C", marginBottom: "14px", fontStyle: "italic" }}>⚠ {formErr}</div>}

<button onClick={submit} disabled={loading} style={{

width: "100%", background: loading ? C.muted : C.navy, color: "#fff", border: "none",

padding: "16px", fontSize: "13px", fontWeight: "700",

letterSpacing: "3px", textTransform: "uppercase",

cursor: loading ? "not-allowed" : "pointer", fontFamily: "inherit",

boxShadow: loading ? "none" : `0 6px 24px ${C.navy}35`,

transition: "background .2s", display: "flex", alignItems: "center", justifyContent: "center", gap: "10px",

}}>

{loading

? <><div style={{ width: "15px", height: "15px", border: "2px solid rgba(255,255,255,.4)", borderTopColor: "#fff", borderRadius: "50%", animation: "spin .7s linear infinite" }} />Unlocking Your Goldmine...</>

: "Reveal My Full Report →"

}

</button>

No spam. Ever. Unsubscribe anytime. Your results are private.

</p>

</div>

{/* Unlock items */}

{[["📊","Goldmine Map","All 10 dimensions"],["📖","Reading Path","Your chapter order"],["✉️","Mindset Monday","Weekly winner fuel"]].map(([ic, lb, sb]) => (

</div>

))}

</div>

</Shell>

);

}

// ────────────────────────────────────────────

// RESULTS

// ────────────────────────────────────────────

const results = computeResults();

const total = totalPct();

const overall = getScoreLabel(total);

const topStrengths = results.slice(-3).reverse();

const topOpps = results.slice(0, 3);

return (

{/* Header */}

{firstName ? `${firstName}'s` : "Your"} Winnergy Report

</div>

{total}<span style={{ fontSize: "40px", letterSpacing: "-1px" }}>%</span>

</div>

{overall.desc}

</p>

</div>

{/* Goldmine Map */}

{results.map((r, i) => {

const st = getScoreLabel(r.pct);

return (

</div>

<div style={{

height: "100%", width: revealed ? `${r.pct}%` : "0%",

background: st.bar, borderRadius: "3px",

transition: `width 1s ${0.25 + i * 0.07}s ease-out`,

}} />

</div>

{chapterMap[r.chapter]?.chapter} · {st.label}

</div>

);

})}

</div>

{/* Two columns */}

<div style={{ fontSize: "10px", letterSpacing: "2.5px", color: C.navy, textTransform: "uppercase", marginBottom: "16px", fontWeight: "700" }}>✦ Your Goldmines</div>

{topStrengths.map(r => (

<div style={{ fontSize: "10px", color: C.muted, marginTop: "2px" }}>{r.pct}% · {chapterMap[r.chapter]?.chapter}</div>

</div>

))}

</div>

<div style={{ fontSize: "10px", letterSpacing: "2.5px", color: C.black, textTransform: "uppercase", marginBottom: "16px", fontWeight: "700" }}>◈ Start Here First</div>

{topOpps.map(r => (

<div style={{ fontSize: "10px", color: C.muted, marginTop: "2px" }}>{r.pct}% · {chapterMap[r.chapter]?.chapter}</div>

</div>

))}

</div>

{/* Reading path — navy block */}

Your Winnergy Reading Path

</div>

Begin with <strong style={{ color: "#fff" }}>{topOpps[0]?.area}</strong> ({chapterMap[topOpps[0]?.chapter]?.chapter}) — your highest-leverage breakthrough.

Then advance to <strong style={{ color: "#fff" }}>{topOpps[1]?.area}</strong> and <strong style={{ color: "#fff" }}>{topOpps[2]?.area}</strong>.

Your strength in <strong style={{ color: "#fff" }}>{topStrengths[0]?.area}</strong> gives you the foundation to build from.

</p>

"You don't have a goal problem. You have a system problem." — Tricia J.

</div>

{/* Footer */}

Focus · Lean In · Own It · Win

</div>

<button onClick={reset} style={{

background: "transparent", border: `1.5px solid ${C.navyBorder}`, color: C.navy,

padding: "11px 32px", fontSize: "11px", letterSpacing: "2px", textTransform: "uppercase",

cursor: "pointer", fontFamily: "inherit", transition: "all .2s",

}}

onMouseEnter={e => { e.target.style.background = C.navy; e.target.style.color = "#fff"; e.target.style.borderColor = C.navy; }}

onMouseLeave={e => { e.target.style.background = "transparent"; e.target.style.color = C.navy; e.target.style.borderColor = C.navyBorder; }}

>

Retake Diagnostic

</button>

Ask TPJ · The Purpose Doula · admin@asktpj.com

</div>

</Shell>

);

}

Popular

2025

New York

The Atlast Project →

“Communication was top-notch and the final outcome was even better than we imagined. A great experience all around.”

Former Customer

Get In Touch

If you're interested in working with us, complete the form with a few details about your project. We'll review your message and get back to you within 48 hours.