B2B Marketing Deck Slides

Template prompt

You are helping me create a saved.md page from a published saved.md template. Go to https://www.saved.md/create and create a new page using this selected template as the canonical reference: https://www.saved.md/TQKSh3UOwRGdIhcAcPdAoQoaWMzbK5zX Generate the final saved.md content in the required format: JSX. Rules: - Use only the content I provide between the triple quotes. - Treat the published saved.md template page as the canonical template, not loose inspiration. - Preserve the layout, visual system, hierarchy, responsive behavior, and interaction model from the template page. - Replace only the business copy, names, metrics, links, labels, and section content needed to reflect my supplied data. - Do not simplify, redesign, or recreate the template from scratch unless my data explicitly requires removing an unsupported section. - Keep the final source under 100KB. - Make the page responsive on mobile, tablet, and desktop. - All external links must open in a new tab/window: use target="_blank" with rel="noopener noreferrer" on every outbound <a> link, including tel: and mailto: links. - If the format is HTML, keep it static and avoid scripts, forms, iframes, event handlers, and javascript: URLs. - If the format is JSX, use only saved.md-compatible React source and avoid external packages unless saved.md supports them. - If my data is incomplete, keep the template structure and omit only sections that cannot be supported by the provided content. User content: """ Paste your company, notes, numbers, links, copy, and other source material here. """ Template: B2B Marketing Deck Slides Template summary: A reusable saved.md JSX template package for B2B marketing strategy presentations. Template description: Reusable saved.md JSX slide-deck template for B2B marketing strategy presentations, with deck navigation and executive-ready structure. Template instructions: Create a saved.md JSX page using the B2B Marketing Deck Slides template. Artifact type: slide-deck. Delivery mode: carousel. README guidance: # B2B Marketing Deck Slides A reusable saved.md JSX template package for B2B marketing strategy presentations. ## Purpose Use this template when a user needs a deck-like marketing artifact that explains B2B growth strategy, relationship-building, target market focus, value proposition, credibility, and next decisions. ## Output - Format: JSX - saved.md content type: `jsx` - Interaction: slide carousel with desktop bottom tabs and mobile side rail - Location: `~/savedmd-documents/b2b-marketing-deck-slides/` ## Files - `template.jsx` — canonical saved.md source - `template.yml` — classification and generation metadata - `source-notes.md` — design interpretation and generation notes - `validation.md` — validation record - `preview/` — local Vite preview harness ## Preview locally ```bash cd ~/savedmd-documents/b2b-marketing-deck-slides/preview pnpm install pnpm dev --host 127.0.0.1 ``` ## Usage guidance Replace the generic slide copy with client or company-specific strategy only when the user provides real facts. Omit unsupported claims. Keep the navy/orange corporate system unless the user gives brand colors. Source notes: # Source Notes ## User request Create a new saved.md template for marketing, type deck-slides, based on the provided B2B Marketing slide reference image. ## Image interpretation The reference image shows a polished corporate B2B marketing presentation: - Large navy cover slide with orange accent title. - Grid of smaller slide thumbnails below. - White content slides with navy/orange blocks. - B2B topics: introduction, definition, key differences, relationship building, trust and credibility, target market, value proposition, strategies, social media, industry expertise, webinars/events, conclusion. - Visual motifs: business meeting photography, KPI callouts, cards, funnel/pyramid, circular strategy diagrams, small maps, section blocks. ## Creative direction This template is inspired by the image, not a literal clone. It avoids using the source photo and instead creates abstract corporate visuals that are safe, generic, and reusable. ## saved.md decisions - `deck-slides` is implemented as saved.md-compatible JSX carousel. - No legacy saved.md `slides` content type is used. - The template uses direct-on-page layout, not an outer stage/card wrapper. - Cards are used only as semantic diagram/content blocks inside slides. - Copy is generic and non-client-specific. ## Responsive behavior - Desktop: large slide composition with bottom thumbnail tabs. - Mobile portrait: single-column content with left-side slide rail to preserve vertical space. - Mobile landscape / short height: compact typography, reduced gaps, and bottom controls. Validation expectations: # Validation Status: passed ## Required checks - [x] `template.yml` parses as YAML. - [x] `template.jsx` exists. - [x] Source is under 100 KB. Current size: ~18 KB. - [x] No unintentional unresolved placeholders. Validator warning is expected because JSX uses `{}` expressions. - [x] Responsive behavior is implemented across width and height. - [x] JSX default export exists. - [x] Imports are saved.md-compatible: `react` only in canonical source. - [x] Direct-on-page layout with no universal outer card wrapper. - [x] Semantic internal cards/blocks are used only for diagrams, metrics, and slide visuals. - [x] Desktop uses bottom slide tabs. - [x] Mobile portrait uses compact side tabs. - [x] Mobile landscape/short-height compacts vertically and keeps controls usable. - [x] Copy is generic. - [x] Design is inspired by the image, not a 1:1 clone. - [x] Vite preview build passes. - [x] Browser desktop visual check passes. - [x] Browser desktop numeric overflow check passes after height tightening. - [x] Browser mobile portrait visual/numeric check passes: no horizontal/vertical overflow. - [x] Browser mobile landscape visual/numeric check passes: no horizontal/vertical overflow. - [x] Slide tab interaction checked on desktop and short landscape. - [x] Console has no runtime errors. - [x] Hidden saved.md keyboard navigation controls exist: `nav[aria-label="Presentation controls"]`, `#savedmd-slide-prev`, `#savedmd-slide-next`. - [x] Hidden navigation controls include stable `id`, `name`, `data-savedmd-nav`, `data-savedmd-direction`, and `data-savedmd-key` attributes. - [x] Hidden next button changes slides when clicked programmatically. ## Commands run ```bash python3 ~/.hermes/skills/productivity/savedmd-template-factory/scripts/validate_savedmd_template.py ~/savedmd-documents/b2b-marketing-deck-slides cd ~/savedmd-documents/b2b-marketing-deck-slides/preview && pnpm install && pnpm build pnpm dev --host 127.0.0.1 ``` ## Visual verification screenshots - Desktop layout: `/Users/anothermeai/.hermes/cache/screenshots/browser_screenshot_8eaf6e7c29de4a788d73d09c95c9cdca.png` - Mobile portrait: `/tmp/b2b_marketing_mobile_portrait.png` - Mobile landscape / short height: `/tmp/b2b_marketing_mobile_landscape.png` ## Live repost verification — 2026-05-21 - Published as new separate page: https://saved.md/87d5mk3_xWm0kymX16DgBq1uUvqXOEBO - HTTP GET returned 200. - Live saved.md iframe rendered real JSX content. - ArrowRight changed from slide 01 Cover to slide 02 Intro. - Browser console errors: 0. ## Live contrast fix verification — 2026-05-21 - Fixed active bottom slide tab contrast on live page `g3_r0FYb51rUp7zbEgRdlhkbQFS2rSkF`. - Root cause: `.thumb span` kept `color: var(--accent)` while `.thumb.active` used dark blue background. - Fix: `.thumb.active span` and `.thumb.active strong` now use explicit white, including hover/focus states. - Updated saved.md page in place via authenticated MCP: version 2. - Live verification: slide 08 Value active Important template notes: Use for B2B marketing strategy decks. Preserve the slide carousel interaction, navy/orange presentation system, section progression, and responsive tab behavior. Replace only user-specific company, market, KPI, and strategy content supplied in the prompt. Now create the saved.md page content and publish it on saved.md.