import { useMemo, useState } from "react"; const templateData = { slides: [ { kicker: "B2B marketing", title: "Build relationship-led growth that sales can trust.", subtitle: "A reusable executive deck for turning strategic B2B marketing work into a clear narrative: market, message, channels, proof, and next moves.", label: "Cover", number: "01", accent: "#f97316", visual: "hero", stats: ["Strategic relationships", "Pipeline influence", "Credible proof"], }, { kicker: "Introduction", title: "Set the business context before showing activity.", subtitle: "Use the opening slide to anchor the audience around the buyer, the commercial goal, and why marketing focus matters now.", label: "Intro", number: "02", accent: "#1d4ed8", visual: "brief", stats: ["Audience", "Objective", "Decision"], }, { kicker: "Definition", title: "Define B2B marketing as a system, not a campaign list.", subtitle: "Position the plan across relationship building, authority creation, demand capture, and sales enablement.", label: "Definition", number: "03", accent: "#f97316", visual: "pillars", stats: ["Relationships", "Authority", "Conversion"], }, { kicker: "Key differences", title: "Make the B2B buying journey visible.", subtitle: "Contrast decision process, stakeholder complexity, and relationship depth so teams understand why the motion needs patience and precision.", label: "Differences", number: "04", accent: "#0f3b78", visual: "compare", stats: ["Longer cycles", "More stakeholders", "Higher trust bar"], }, { kicker: "Relationship building", title: "Track trust as deliberately as traffic.", subtitle: "Show how content, events, referrals, and partner activity compound into warmer conversations and better-qualified opportunities.", label: "Relationships", number: "05", accent: "#f97316", visual: "metrics", stats: ["82% relevance", "69% readiness", "4 touchpoints"], }, { kicker: "Trust and credibility", title: "Turn proof into a repeatable sales asset.", subtitle: "Use customer stories, expert points of view, and market education to reduce perceived risk before a prospect enters a sales call.", label: "Credibility", number: "06", accent: "#1d4ed8", visual: "proof", stats: ["Cases", "Signals", "Objections"], }, { kicker: "Target market", title: "Choose the segment where the message can win fastest.", subtitle: "Frame the ideal customer profile, buying committee, geographic focus, and urgency triggers in a way leadership can debate.", label: "Market", number: "07", accent: "#f97316", visual: "map", stats: ["ICP", "Region", "Trigger"], }, { kicker: "Value proposition", title: "Stack the offer around pains, outcomes, and proof.", subtitle: "Clarify what the market gets, why it matters, and which evidence makes the claim believable.", label: "Value", number: "08", accent: "#0f3b78", visual: "pyramid", stats: ["Pain", "Outcome", "Evidence"], }, { kicker: "Marketing strategies", title: "Connect channels into one operating rhythm.", subtitle: "Show how thought leadership, account-based plays, webinars, nurture, and sales content reinforce each other.", label: "Strategy", number: "09", accent: "#f97316", visual: "orbit", stats: ["ABM", "Webinars", "Enablement"], }, { kicker: "Conclusion", title: "Close with the decisions needed to move forward.", subtitle: "End the deck with priority segments, message bets, channel focus, ownership, and the next decision milestone.", label: "Close", number: "10", accent: "#1d4ed8", visual: "decision", stats: ["Priorities", "Owners", "Next review"], }, ] }; function Thumb({ slide, active, onClick, index }) { return ( ); } function HeroVisual({ color }) { return ( ); } function Pillars({ color }) { return ; } function Compare({ color }) { return ; } function Metrics({ color }) { return ; } function Proof({ color }) { return ; } function MarketMap({ color }) { return ; } function Pyramid({ color }) { return ; } function Orbit({ color }) { return ; } function Decision({ color }) { return ; } function Visual({ type, color }) { if (type === "hero") return ; if (type === "pillars" || type === "brief") return ; if (type === "compare") return ; if (type === "metrics") return ; if (type === "proof") return ; if (type === "map") return ; if (type === "pyramid") return ; if (type === "orbit") return ; return ; } export default function B2BMarketingDeck() { const [active, setActive] = useState(0); const slide = templateData.slides[active]; const progress = useMemo(() => Math.round(((active + 1) / templateData.slides.length) * 100), [active]); const goPrev = () => setActive((value) => Math.max(0, value - 1)); const goNext = () => setActive((value) => Math.min(templateData.slides.length - 1, value + 1)); return (

{slide.kicker}

{slide.title}

{slide.subtitle}

{slide.stats.map((stat) => {stat})}

{templateData.slides.map((item, index) => setActive(index)} />)}

); }

B2B Marketing Deck Slides