import React, { useMemo, useState } from "react"; const templateData = { categories: [ { id: "launch", name: "Launch Plan", accent: "#F9E47B", tasks: [ { title: "Finalize positioning", notes: ["Choose primary promise", "Tighten one-line description", "Map launch objections"] }, { title: "Publish assets", notes: ["Landing page", "Founder post", "Product screenshots"] }, { title: "Outreach sprint", notes: ["Warm leads", "Partner intros", "Community posts"] }, { title: "Measure response", notes: ["Activation", "Replies", "Demo requests"] } ] }, { id: "product", name: "Product", accent: "#BDEBF1", tasks: [ { title: "Onboarding polish", notes: ["Reduce first step", "Add empty-state help", "Check mobile edge cases"] }, { title: "Feedback review", notes: ["Group similar asks", "Pick two quick wins", "Log deeper bets"] }, { title: "QA pass", notes: ["Auth", "Sharing", "Saved views", "Responsive screens"] }, { title: "Release notes", notes: ["What changed", "Why it matters", "Known limits"] } ] }, { id: "marketing", name: "Marketing", accent: "#FFD3D2", tasks: [ { title: "Content queue", notes: ["Customer pain post", "Before/after demo", "Founder lesson"] }, { title: "Email tests", notes: ["Subject line", "CTA", "Send window"] }, { title: "Social clips", notes: ["Hook", "Screen capture", "Caption variants"] }, { title: "Landing review", notes: ["Hero clarity", "Proof", "Objection handling"] } ] }, { id: "sales", name: "Sales", accent: "#FFD2A6", tasks: [ { title: "Pipeline cleanup", notes: ["Update stages", "Archive stale deals", "Flag next actions"] }, { title: "Demo prep", notes: ["Use-case story", "Discovery questions", "Close path"] }, { title: "Follow-ups", notes: ["Same-day recap", "Decision criteria", "Next meeting"] }, { title: "Objection bank", notes: ["Price", "Timing", "Security", "Migration"] } ] }, { id: "ops", name: "Operations", accent: "#D8D8DA", tasks: [ { title: "Weekly rhythm", notes: ["Priorities", "Owners", "Risks"] }, { title: "Vendor check", notes: ["Renewals", "Access", "Invoices"] }, { title: "Process notes", notes: ["What changed", "Where documented", "Who owns it"] }, { title: "Backlog trim", notes: ["Delete duplicates", "Merge small tasks", "Escalate blockers"] } ] }, { id: "finance", name: "Finance", accent: "#D9EAC3", tasks: [ { title: "Monthly close", notes: ["Reconcile", "Review spend", "Export reports"] }, { title: "Runway check", notes: ["Cash", "Burn", "Committed costs"] }, { title: "Invoice queue", notes: ["Drafts", "Sent", "Overdue"] }, { title: "Budget notes", notes: ["Keep", "Cut", "Renegotiate"] } ] } ] }; function StickyCard({ task, accent, index }) { const rotation = ["-1.2deg", "0.7deg", "-0.4deg", "1deg", "-0.8deg", "0.5deg"][index % 6]; return (

); } export default function StickyTaskWall() { const [activeId, setActiveId] = useState(templateData.categories[0].id); const activeCategory = useMemo( () => templateData.categories.find((category) => category.id === activeId) || templateData.categories[0], [activeId] ); return (

{activeCategory.name}

{activeCategory.tasks.map((task, index) => ( ))}

); }

Sticky Task Wall