{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"education-first-price","type":"registry:block","title":"education-first price","description":"\"DAF cards use 142\" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.","author":"Motion Menu","categories":["role-pricing","daf"],"dependencies":["gsap"],"registryDependencies":[],"meta":{"number":"142","slug":"education-first-price","framework":"react","docs":"https://motion-menu-two.vercel.app/p/education-first-price.md"},"files":[{"path":"motion-menu/education-first-price.html","type":"registry:file","target":"motion-menu/education-first-price.html","content":"
\n
142

Education-first price

DAFcanon
React ↗
\n
\n
\n
Sit-stand desk 140 · walnut
\n
$984
\n why this price ▾\n
supplier list $820
+ 20% dealer margin, shown openly — it covers sourcing, QC and warranty handling
→ learn: how dealer pricing works
\n
\n
\n

Say: \"DAF cards use 142\" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.

\n
"},{"path":"motion-menu/education-first-price.css","type":"registry:file","target":"motion-menu/education-first-price.css","content":".sec-toggleable.open .chev { transform: rotate(180deg); }\n\n.sec-toggleable.open .sec-hint .when-closed, .sec-toggleable:not(.open) .sec-hint .when-open { display: none; }\n\n.card {\n border: 1px solid var(--line); border-radius: 14px; background: var(--card);\n overflow: hidden; display: flex; flex-direction: column;\n }\n\n.card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }\n\n.card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }\n\n.card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }\n\n.tags { display: flex; gap: .35rem; }\n\n.tags i {\n font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);\n border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;\n }\n\n.demo {\n min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;\n background: var(--bg2); overflow: hidden; flex: 1;\n }\n\n.order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }\n\n.order b { color: var(--txt); font-weight: 500; }\n\n.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }\n\n.burger.open span:nth-child(2) { opacity: 0; }\n\n.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }\n\n.prov-badge.open .pb-detail { display: block; }\n\n/* ---------- Section W · DAF pack ---------- */\n .daf-card { width: 84%; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; font: 400 .7rem var(--mono); color: var(--txt); }\n\n.daf-card .dc-name { font: 600 .95rem var(--sans); }\n\n.daf-card .dc-price { font: 700 1.3rem var(--sans); margin: .3rem 0; }\n\n.daf-card .dc-why { color: var(--acc); cursor: pointer; }\n\n.daf-card .dc-break { display: none; border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; color: var(--dim); line-height: 1.9; }\n\n.daf-card.open .dc-break { display: block; }\n\n.daf-card .dc-learn { display: inline-block; margin-top: .4rem; font-size: .62rem; border: 1px solid rgba(183,255,46,.4); color: var(--acc); border-radius: 99px; padding: .35em .9em; }\n\n.think-block.open .think-body { display: block; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/education-first-price.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// education-first price — Motion Menu\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
142

Education-first price

DAFcanon
React \\u2197
\\n
\\n
\\n
Sit-stand desk 140 \\u00b7 walnut
\\n
$984
\\n why this price \\u25be\\n
supplier list $820
+ 20% dealer margin, shown openly \\u2014 it covers sourcing, QC and warranty handling
\\u2192 learn: how dealer pricing works
\\n
\\n
\\n

Say: \\\"DAF cards use 142\\\" \\u2014 every price opens its own explanation and links to a lesson. Transparency as the differentiator.

\\n
\";\n\nexport function EducationFirstPrice() {\n const hostRef = useRef(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const $ = (s: string) => host.querySelector(s) as HTMLElement | null;\n let disposed = false;\n const cleanup: Array<() => void> = [];\n\n (async () => {\n if (disposed) return;\n try {\n /* ---- 142 · education-first price ---- */\n document.querySelector('#daf-edu .dc-why').addEventListener('click', () => {\n const card = document.getElementById('daf-edu');\n card.classList.toggle('open');\n if (card.classList.contains('open')) gsap.from('#daf-edu .dc-break', { opacity: 0, y: -6, duration: 0.35 });\n });\n } catch (err: any) {\n console.warn(\"[motion-menu] education-first-price failed to start:\", err);\n }\n })();\n\n return () => {\n disposed = true;\n cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n };\n }, []);\n\n return
;\n}\n\nexport default EducationFirstPrice;\n"}]}