diff --git a/components/BoardTemplates.tsx b/components/BoardTemplates.tsx new file mode 100644 index 0000000000..1e2b4587b3 --- /dev/null +++ b/components/BoardTemplates.tsx @@ -0,0 +1,250 @@ +'use client'; +import React from 'react'; +import Image from 'next/image'; + +/** + * Card data shape passed from MDX. + * - title: Main title for the board template + * - description: Supporting text explaining the template + * - img: Preview image src (314x160 pixels recommended) + * - previewUrl: Destination for the new tab preview + * - bg: Optional custom background color (hex or rgba) + */ +type TemplateCard = { + title: string; + description: string; + img: string; + previewUrl: string; + bg?: string; +}; + +interface Props { + templates: TemplateCard[]; +} + +/* ---- Constants / design tokens (keep in sync with MDX usage) ---- */ +const MP_PURPLE = 'rgb(139 92 246)'; +const BORDER_RADIUS = 14; +const CARD_W = 296; +const CARD_H = 319; +/** Fixed image height for consistent alignment */ +const IMAGE_H = 160; +/** Adjusted to 280 to ensure flush bleed to right edge (296 - 16 = 280) */ +const IMAGE_W = 280; + +const styles = { + grid: { + display: 'grid', + gap: 20, + gridTemplateColumns: 'repeat(auto-fit, minmax(296px, 1fr))', + justifyContent: 'center', + marginTop: 32, + } as React.CSSProperties, + + card: { + position: 'relative', + width: CARD_W, + height: CARD_H, + borderRadius: BORDER_RADIUS, + overflow: 'hidden', + border: `2px solid var(--sgt-border)`, + boxShadow: '0 10px 30px var(--sgt-shadow)', + transition: 'transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease', + } as React.CSSProperties, + + dogEar: { + position: 'absolute', + right: 10, + top: 10, + width: 22, + height: 22, + background: 'var(--sgt-dogear)', + clipPath: 'polygon(0 0, 100% 0, 100% 100%)', + boxShadow: '0 0 0 2px rgba(0,0,0,.15) inset', + zIndex: 5, + pointerEvents: 'none', + } as React.CSSProperties, + + mediaWrap: { + position: 'absolute', + top: 18, + height: IMAGE_H, + width: IMAGE_W, + marginLeft: 16, + marginRight: -16, + borderTopLeftRadius: 8, + borderBottomLeftRadius: 8, + overflow: 'hidden', + background: 'var(--sgt-media-bg)', + zIndex: 1, + } as React.CSSProperties, + + mediaImg: { + width: '100%', + height: '100%', + objectFit: 'cover', + objectPosition: 'left top', + display: 'block', + } as React.CSSProperties, + + bottom: { + position: 'absolute' as const, + top: IMAGE_H + 22, + left: 0, + right: 0, + bottom: 0, + padding: '12px 18px 22px', + zIndex: 3, + }, + + title: { + fontSize: 21, + fontWeight: 700, + lineHeight: 1.1, + margin: 0, + color: 'var(--sgt-title)', + } as React.CSSProperties, + + blurb: { + marginTop: 4, + fontSize: 14, + lineHeight: 1.3, + color: 'var(--sgt-blurb)', + opacity: 0.85, + } as React.CSSProperties, + + clickable: { + display: 'block', + width: '100%', + height: '100%', + background: 'transparent', + border: 0, + padding: 0, + cursor: 'pointer', + textAlign: 'inherit', + } as React.CSSProperties, +}; + +function CardView({ t }: { t: TemplateCard }) { + const handleOpen = () => { + window.open(t.previewUrl, '_blank', 'noopener,noreferrer'); + }; + + /** + * If a background color is provided: + * 1. Set background to custom color + * 2. Invert text to white for legibility + */ + const customBgStyle = t.bg ? { + background: t.bg, + '--sgt-title': '#ffffff', + '--sgt-blurb': 'rgba(255,255,255,0.9)', + '--sgt-dogear': MP_PURPLE + } as React.CSSProperties : {}; + + return ( +
+ +
+ ); +} + +export default function BoardTemplates({ templates }: Props) { + return ( + <> +
+ {templates.map((t, i) => ( + + ))} +
+ + + + ); +} diff --git a/pages/guides/_meta.tsx b/pages/guides/_meta.tsx index 884174ff04..0438a1cd64 100644 --- a/pages/guides/_meta.tsx +++ b/pages/guides/_meta.tsx @@ -38,6 +38,7 @@ export default { ), }, "benchmarks": "Benchmarks", + "board-templates": "Template Gallery", "strategic-playbooks": "Strategic Playbooks", "glossary": "Glossary" } diff --git a/pages/guides/board-templates.mdx b/pages/guides/board-templates.mdx new file mode 100644 index 0000000000..812421ff0a --- /dev/null +++ b/pages/guides/board-templates.mdx @@ -0,0 +1,192 @@ +import BoardTemplates from '../../components/BoardTemplates' + +export const COLORS = { + indigo: '#15003F', + teal: '#003229', + maroon: '#33001F', + brown: '#3F1A0D', +} + +# Board Templates + +Explore curated Board templates designed to solve common product questions. Click any card below to launch a live, interactive demo in a new tab. + +{/* Section CTA — content lives in MDX so it's easy to change or A/B test */} +
+ + Ready to build? Create a Board + → + +
+ + + +
+ Templates are pre-built dashboards designed around a specific use case or industry. + Instead of starting from a blank canvas, you start with a proven framework + built on industry best practices that you can adapt to your needs. +
+ +{/* + Cards API (examples): + { + title: 'Company KPIs', // Main title for the template card + description: "Measure health", // Supporting text (matches "blurb" in tours) + img: '/templates/kpi.webp', // Image src (314x160 pixels recommended) + previewUrl: 'https://...', // Link to the live Mixpanel board + bg: COLORS.purple // Optional: Background color constant + } +*/} + +

+ +### Essential Boards +Foundational views to monitor product health, user retention, and core growth metrics at a glance. + + + +

+ +### Industry-Specific Boards +Custom-built frameworks optimized for E-commerce, SaaS, and Finance workflows. + + + +

+
+ +### Board Template FAQs + +
+ + How do I use these templates in my own project? + +
+ The tiles above are interactive previews designed for exploration. To use a template with your own data, navigate to your Mixpanel project and choose one of two paths: + +
    +
  • + The Template Selector: Click the Ready to build? Create a Board → button to launch the configuration wizard. +
    • +
  • + From a New Board: Create a new Board (via + Create New > Board) and select a framework from the Start from a Template section. +
    • +
+
+
+ +
+ + Can I customize a template after it's created? + +
+ Yes. Think of a template as a starting point, not a fixed structure. You can add reports, change conversion window settings, or adjust event properties to match your specific tracking schema. +
+
+ +
+ + Are templates free to use? + +
+ Yes. Every template is available to all Mixpanel users, including those on the Free plan. +
+
diff --git a/public/templates/AICompany_Preview.webp b/public/templates/AICompany_Preview.webp new file mode 100644 index 0000000000..0710f31fc3 Binary files /dev/null and b/public/templates/AICompany_Preview.webp differ diff --git a/public/templates/CompanyKPIs_Preview.webp b/public/templates/CompanyKPIs_Preview.webp new file mode 100644 index 0000000000..14eaa11f22 Binary files /dev/null and b/public/templates/CompanyKPIs_Preview.webp differ diff --git a/public/templates/Ecommerce_Preview.webp b/public/templates/Ecommerce_Preview.webp new file mode 100644 index 0000000000..419daf97cb Binary files /dev/null and b/public/templates/Ecommerce_Preview.webp differ diff --git a/public/templates/FeatureLaunch_Preview.webp b/public/templates/FeatureLaunch_Preview.webp new file mode 100644 index 0000000000..0b48e79a2a Binary files /dev/null and b/public/templates/FeatureLaunch_Preview.webp differ diff --git a/public/templates/LifecycleAnalysis_Preview.webp b/public/templates/LifecycleAnalysis_Preview.webp new file mode 100644 index 0000000000..ca037afc0e Binary files /dev/null and b/public/templates/LifecycleAnalysis_Preview.webp differ diff --git a/public/templates/MarketingKPIs_Preview.webp b/public/templates/MarketingKPIs_Preview.webp new file mode 100644 index 0000000000..3394c6251f Binary files /dev/null and b/public/templates/MarketingKPIs_Preview.webp differ diff --git a/public/templates/SaaSBusinessKPIs_Preview.webp b/public/templates/SaaSBusinessKPIs_Preview.webp new file mode 100644 index 0000000000..c5ce0290d3 Binary files /dev/null and b/public/templates/SaaSBusinessKPIs_Preview.webp differ diff --git a/public/templates/WebAnalytics_Preview.webp b/public/templates/WebAnalytics_Preview.webp new file mode 100644 index 0000000000..77f4719887 Binary files /dev/null and b/public/templates/WebAnalytics_Preview.webp differ