Skip to content

Commit 25a8a0e

Browse files
myronkaifungkurbycchuaamymadden-bit
authored
Myronkaifung guides v1 (#2194)
* update Mixpanel Introduction page without change pathing * edit Mixpanel Introduction file name * rename driving product innovation pages keeping same path * create structures within guides by use case * create directory for guide by use case * create Guides by Workflow and move data quality and strategy pages * more structures + redirects * add rest of structure and placeholder pages * add continuous innovation * move continuous innovation image * add benchmark content * add content for ship features * add grow revenue content * update revenue formatting * add content for see replay * add content for rollout * train users * add drive adoption page * consistent do this next format * spellcheck * Add files via upload * Update middleware.ts * Add files via upload added self-guided-tours.mdx which is the Navattic cards page for Self-Guided Product Tours * Update cspell.json added "cmfkxwfa" and "navattic" intro words exclusion * Update _meta.ts added sub menu for Self-Guided Tours * Create launch-an-experiment.png * Add files via upload * add icons * move revenue analytics to Docs * add redirects * Update _meta.tsx * Update mixpanel-introduction.mdx Fixed per Amy's request 1. Can we update the 'Open in YouTube' link here to open in a new tab? 2. Can we update the 'Go deeper on the OADA Loop' link here to point to this page? Mixpanel and the Continuous Innovation Loop 3. Can we remove the Mixpanel University row from the table here? * Update guides-by-use-case.mdx Fixed per Amy's request Guides by Use Case On the page, the heading is ‘Guides by Use cases’ -> can we update that to Guides by Use Case (singular to match the left nav, and capitalize the ‘C’ in ‘Case’) The first subheading is Engage Your users -> can we capitalize the ‘U’ in ’Users” (to become ‘Engage Your Users’) * Update ship-features.mdx fixed as per Amy's request Ship Features 1. Could we bold the text before the colons in this section? (i.e. Phased Rollout, Cohort-Based Targeting, etc.) 2. Can we bold Tools to Help in this section? * Update core-reports.mdx fixed per Amy's request Core Reports 1. Update text on final button from ‘Define Cohort’ to ‘Define Cohorts’ (add the ‘s’) 2. Also looks like the link on that button is broken – think the link is missing the ‘s’ as well * Update roll-out.mdx per Amy's requests Roll Out 1. In the ‘Do this next’ line in this section, there’s an extra space before the second dash (after the word ‘week’) 2. Thinking we can remove the ellipsis from the second bullet point under before launch in this section (I know I wrote that, but I’m rethinking it) - so that line just becomes Preview what teams will gain (“We’ll be able to answer questions like where users drop off in signup”). * Update drive-adoption.mdx Fixed per Amy's requrest Drive Adoption 1. Looks like the formatting didn’t take in this section. * Update drive-product-innovation.mdx Drive Product Innovation 1. There is a PR for an update to this page, but I’ve only pushed things to draft / am afraid to push things for review, essentially just adding the chunk where the video is. Can we update? 2. Can we include the Experiments video? Maybe under Why Experiment? * Update grow-revenue.mdx Grow Revenue For the formula here, could we either do spaces in between each word or go full pascal case? * Update see-replays.mdx Embedding Session Replay and Heatmaps video * Update drive-product-innovation.mdx removed Youtuvbe Tracking ID ?si= * Update mixpanel-introduction.mdx removed Youtuvbe Tracking ID ?si= * Update see-replays.mdx updated Session Replay video blurb * Update _meta.tsx For nicer formatting, I think it would be best to have single word titles for the separators for instead of multiple words. (ex: Discover Mixpanel, Solutions & Workflows, etc.). Multiple words is causing the icons to render abnormally and looks huge. Any ideas about what to rename the headers as? Maybe something like “Discover”, “Workflows”, and “Playbooks”? * Update self-guided-tours.mdx Add 6 Navattic Embeds * Add files via upload Navattic images * Delete public/navattic/launch-an-experiment.png * Update cspell.json added exclusions for navattic IDs pages/guides/self-guided-tours.mdx:35:22 Unknown word (cmdrk) pages/guides/self-guided-tours.mdx:43:22 Unknown word (cmeadee) pages/guides/self-guided-tours.mdx:51:22 Unknown word (cmer) pages/guides/self-guided-tours.mdx:59:22 Unknown word (cmbrui) pages/guides/self-guided-tours.mdx:67:22 Unknown word (cmapl) pages/guides/self-guided-tours.mdx:67:39 Unknown word (dzblbyp) pages/guides/self-guided-tours.mdx:75:22 Unknown word (cmfcjef) pages/guides/self-guided-tours.mdx:75:37 Unknown word (jjex) * Update cspell.json added exclusions for Navattic ID pages/guides/self-guided-tours.mdx:16:20 Unknown word (cmfkxwfa) * Update self-guided-tours.mdx corrected Navattic IDs * Update cspell.json Added exclusions for Navattic IDs pages/guides/self-guided-tours.mdx:67:22 Unknown word (cmapktdk) pages/guides/self-guided-tours.mdx:59:22 Unknown word (cmbrua) pages/guides/self-guided-tours.mdx:35:22 Unknown word (cmdrjulgv) pages/guides/self-guided-tours.mdx:43:22 Unknown word (cmead) pages/guides/self-guided-tours.mdx:75:22 Unknown word (cmfciul) pages/guides/self-guided-tours.mdx:43:43 Unknown word (hgwo) pages/guides/self-guided-tours.mdx:59:40 Unknown word (jkmbvpg) pages/guides/self-guided-tours.mdx:67:42 Unknown word (zabd) pages/guides/self-guided-tours.mdx:35:40 Unknown word (zwaeqor) * Update cspell.json exclusion for pages/guides/self-guided-tours.mdx:51:22 Unknown word (cmer) * Update cspell.json * Update self-guided-tours.mdx * Update grow-revenue.mdx Capitalized "Over Time" in the formula so all the words are capitalized * fix contractions * contrast for steps --------- Co-authored-by: kurbycchua <[email protected]> Co-authored-by: amymadden-bit <[email protected]>
1 parent 355c424 commit 25a8a0e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1965
-132
lines changed

‎components/SelfGuidedTours.tsx‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
'use client';
2+
import React from 'react';
3+
import Image from 'next/image';
4+
import Script from 'next/script';
5+
6+
/**
7+
* Card data shape passed from MDX.
8+
* - navatticOpen: the Navattic demo id (e.g., "cmfkxwfa5000004lc8408f5wi")
9+
* - navatticTitle: optional; title for the Navattic popup chrome
10+
* - img: optional; if omitted, a dark placeholder fills the media area
11+
*/
12+
type Card = {
13+
badge: string;
14+
title: string;
15+
blurb?: string;
16+
img?: string;
17+
href?: string;
18+
navatticOpen?: string;
19+
navatticTitle?: string;
20+
};
21+
22+
interface Props {
23+
cards: Card[];
24+
}
25+
26+
/* ---- Constants / design tokens (keep in sync with MDX usage) ---- */
27+
const MP_PURPLE = 'rgb(139 92 246)';
28+
const BORDER_RADIUS = 14;
29+
const CARD_W = 296;
30+
const CARD_H = 319;
31+
/** Image height is fixed for consistent badge anchoring */
32+
const IMAGE_H = 140;
33+
/** Image width is indented left and bleeds to the right edge */
34+
const IMAGE_W = 276;
35+
36+
/* ---- Inline “CSS-in-TS” styles (layout is pixel-exact to your spec) ---- */
37+
const styles = {
38+
grid: {
39+
display: 'grid',
40+
gap: 20,
41+
gridTemplateColumns: 'repeat(auto-fit, minmax(296px, 1fr))',
42+
justifyContent: 'center',
43+
marginTop: 32,
44+
} as React.CSSProperties,
45+
46+
card: {
47+
position: 'relative',
48+
width: CARD_W,
49+
height: CARD_H,
50+
borderRadius: BORDER_RADIUS,
51+
overflow: 'hidden',
52+
border: `2px solid ${MP_PURPLE}`,
53+
boxShadow: '0 10px 30px rgba(0,0,0,.25)',
54+
transition: 'transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease',
55+
} as React.CSSProperties,
56+
57+
dogEar: {
58+
position: 'absolute',
59+
right: 10,
60+
top: 10,
61+
width: 22,
62+
height: 22,
63+
background: 'var(--sgt-dogear)',
64+
clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
65+
boxShadow: '0 0 0 2px rgba(0,0,0,.15) inset',
66+
zIndex: 5,
67+
pointerEvents: 'none',
68+
} as React.CSSProperties,
69+
70+
mediaWrap: {
71+
position: 'absolute',
72+
top: 18, // aligns the image to the badge’s left indent
73+
height: IMAGE_H,
74+
width: IMAGE_W,
75+
marginLeft: 16, // left indent (aligns with badge)
76+
marginRight: -16, // bleed to right edge (no right indent)
77+
borderTopLeftRadius: 8,
78+
borderBottomLeftRadius: 8,
79+
overflow: 'hidden',
80+
background: 'var(--sgt-media-bg)', // placeholder color behind images
81+
zIndex: 1,
82+
} as React.CSSProperties,
83+
84+
mediaImg: {
85+
width: '100%',
86+
height: '100%',
87+
objectFit: 'cover',
88+
objectPosition: 'left top',
89+
display: 'block',
90+
} as React.CSSProperties,
91+
92+
placeholder: {
93+
width: '100%',
94+
height: '100%',
95+
background: 'var(--sgt-media-bg)',
96+
} as React.CSSProperties,
97+
98+
/**
99+
* Anchored text block:
100+
* - Badge top is locked to IMAGE_H + offset so all cards align visually
101+
* - Title and blurb naturally flow below the badge
102+
*/
103+
bottom: {
104+
position: 'absolute' as const,
105+
top: IMAGE_H + 22,
106+
left: 0,
107+
right: 0,
108+
bottom: 0,
109+
padding: '16px 18px 22px',
110+
zIndex: 3,
111+
},
112+
113+
/* Badge = stronger weight + tighter tracking for a pill look */
114+
badge: {
115+
display: 'inline-block',
116+
background: 'var(--sgt-badge-bg)',
117+
color: 'var(--sgt-badge-fg)',
118+
fontWeight: 800,
119+
letterSpacing: '.04em',
120+
fontSize: '11.5px',
121+
lineHeight: 1,
122+
borderRadius: 8,
123+
padding: '8px 10px',
124+
marginBottom: 10,
125+
} as React.CSSProperties,
126+
127+
title: {
128+
fontSize: 23,
129+
fontWeight: 700,
130+
lineHeight: 1.2,
131+
margin: 0,
132+
color: 'var(--sgt-title)',
133+
} as React.CSSProperties,
134+
135+
blurb: {
136+
marginTop: 8,
137+
fontSize: 15,
138+
color: 'var(--sgt-blurb)',
139+
opacity: 0.75,
140+
} as React.CSSProperties,
141+
142+
clickable: {
143+
display: 'block',
144+
width: '100%',
145+
height: '100%',
146+
background: 'transparent',
147+
border: 0,
148+
padding: 0,
149+
cursor: 'pointer',
150+
textAlign: 'inherit',
151+
} as React.CSSProperties,
152+
};
153+
154+
/* ---- One card view (supports Navattic popup or plain link) ---- */
155+
function CardView({ c }: { c: Card }) {
156+
const inside = (
157+
<>
158+
<div style={styles.dogEar} aria-hidden />
159+
<div style={styles.mediaWrap}>
160+
{c.img ? (
161+
<Image src={c.img} alt="" fill style={styles.mediaImg} priority={false} />
162+
) : (
163+
<div style={styles.placeholder} />
164+
)}
165+
</div>
166+
167+
<div style={styles.bottom}>
168+
<div style={styles.badge}>{c.badge}</div>
169+
<h3 style={styles.title}>{c.title}</h3>
170+
{c.blurb ? <div style={styles.blurb}>{c.blurb}</div> : null}
171+
</div>
172+
</>
173+
);
174+
175+
// Use Navattic popup if navatticOpen is provided
176+
if (c.navatticOpen) {
177+
const navatticUrl = c.navatticOpen.startsWith('http')
178+
? c.navatticOpen
179+
: `https://capture.navattic.com/${c.navatticOpen}`;
180+
181+
return (
182+
<div style={styles.card} className="sgt-card">
183+
<button
184+
type="button"
185+
style={styles.clickable}
186+
className="sgt-click"
187+
data-navattic-open={navatticUrl}
188+
data-navattic-title={c.navatticTitle || c.title}
189+
>
190+
{inside}
191+
</button>
192+
</div>
193+
);
194+
}
195+
196+
// Fallback to href links if needed
197+
if (c.href) {
198+
return (
199+
<div style={styles.card} className="sgt-card">
200+
<a href={c.href} style={styles.clickable} className="sgt-click">
201+
{inside}
202+
</a>
203+
</div>
204+
);
205+
}
206+
207+
// Static (non-clickable) card
208+
return (
209+
<div style={styles.card} className="sgt-card">
210+
{inside}
211+
</div>
212+
);
213+
}
214+
215+
/**
216+
* SelfGuidedTours
217+
* - Renders a responsive grid of product-tour cards
218+
* - Loads Navattic's embed script once (popup mode)
219+
* - Exposes a simple props API so MDX controls the content
220+
*/
221+
export default function SelfGuidedTours({ cards }: Props) {
222+
return (
223+
<>
224+
{/* Navattic embed loader (newer API) */}
225+
<Script src="https://js.navattic.com/embeds.js" strategy="afterInteractive" />
226+
227+
{/* Grid */}
228+
<div style={styles.grid}>
229+
{cards.map((c, i) => (
230+
<CardView key={i} c={c} />
231+
))}
232+
</div>
233+
234+
{/* Theme variables + interactions */}
235+
<style jsx global>{`
236+
/* ---- Dark defaults ---- */
237+
:root {
238+
--sgt-card-bg: #0a0a0b;
239+
--sgt-title: #ffffff;
240+
--sgt-blurb: rgba(255, 255, 255, 0.85);
241+
--sgt-border: ${MP_PURPLE};
242+
--sgt-media-bg: #111111;
243+
--sgt-dogear: ${MP_PURPLE};
244+
--sgt-badge-bg: ${MP_PURPLE};
245+
--sgt-badge-fg: #ffffff;
246+
}
247+
248+
/* ---- Prefer light scheme (also covered below by class/attr) ---- */
249+
@media (prefers-color-scheme: light) {
250+
:root,
251+
html.light,
252+
html[class*='light'],
253+
[data-theme='light'] {
254+
--sgt-card-bg: #ffffff;
255+
--sgt-title: #111111;
256+
--sgt-blurb: #333333;
257+
--sgt-border: ${MP_PURPLE};
258+
--sgt-media-bg: #e9e9ef;
259+
--sgt-dogear: ${MP_PURPLE};
260+
--sgt-badge-bg: ${MP_PURPLE};
261+
--sgt-badge-fg: #ffffff;
262+
}
263+
}
264+
265+
/* ---- Explicit site light mode (Mixpanel Docs sets html.light) ---- */
266+
html.light,
267+
html[class*='light'],
268+
[data-theme='light'] {
269+
--sgt-card-bg: #ffffff;
270+
--sgt-title: #111111;
271+
--sgt-blurb: #333333;
272+
--sgt-border: ${MP_PURPLE};
273+
--sgt-media-bg: #e9e9ef;
274+
--sgt-dogear: ${MP_PURPLE};
275+
--sgt-badge-bg: ${MP_PURPLE};
276+
--sgt-badge-fg: #ffffff;
277+
}
278+
279+
/* ---- Card base colors ---- */
280+
.sgt-card {
281+
background: var(--sgt-card-bg);
282+
color: var(--sgt-title);
283+
border-color: var(--sgt-border);
284+
}
285+
286+
/* ---- Micro-interactions ---- */
287+
.sgt-card:hover {
288+
transform: translateY(-2px);
289+
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
290+
}
291+
.sgt-card:focus-within {
292+
outline: 2px solid ${MP_PURPLE};
293+
outline-offset: 2px;
294+
}
295+
.sgt-click:focus-visible {
296+
outline: 2px solid ${MP_PURPLE};
297+
outline-offset: 3px;
298+
border-radius: 10px;
299+
}
300+
301+
/* ---- Responsive type bump on very wide screens ---- */
302+
@media (min-width: 1280px) {
303+
.sgt-card h3 { font-size: 24px; }
304+
.sgt-card p { font-size: 15px; }
305+
}
306+
`}</style>
307+
</>
308+
);
309+
}

‎components/svg/NavIcon.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,50 @@ function SupportIcon() {
7373
)
7474
}
7575

76+
function SolutionsIcon() {
77+
return (
78+
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
79+
<rect x="3.29968" y="14.3158" width="8.13757" height="1.68421" rx="0.842105" fill="#7856FF"/>
80+
<path d="M0.0896984 13.3204C0.562919 10.7428 2.77594 9.27982 3.52632 8.8421H4.42105V14.3158H1C0.447715 14.3158 -0.0100294 13.8636 0.0896984 13.3204Z" fill="#7856FF"/>
81+
<path d="M14.6471 13.3204C14.1739 10.7428 11.9609 9.27982 11.2105 8.8421H10.3158V14.3158H13.7368C14.2891 14.3158 14.7468 13.8636 14.6471 13.3204Z" fill="#7856FF"/>
82+
<path d="M4.42107 14.3158L3.60288 12.4976C1.83768 8.57492 2.84346 3.95936 6.08071 1.12676C6.81799 0.481635 7.91887 0.481635 8.65616 1.12676C11.8934 3.95936 12.8992 8.57492 11.134 12.4976L10.3158 14.3158H4.42107Z" fill="#B094FF"/>
83+
<circle cx="7.36836" cy="8.42106" r="2.52632" fill="#7856FF"/>
84+
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2042 4.63158H3.53271C4.09604 3.3167 4.95298 2.11354 6.08073 1.12676C6.81802 0.481633 7.9189 0.481632 8.65618 1.12676C9.78393 2.11354 10.6409 3.3167 11.2042 4.63158Z" fill="#7856FF"/>
85+
</svg>
86+
)
87+
}
88+
89+
function PlaybooksIcon() {
90+
return (
91+
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
92+
<path d="M2 0H11.3333C12.4379 0 13.3333 0.895431 13.3333 2V14C13.3333 15.1046 12.4379 16 11.3333 16H2C0.895431 16 0 15.1046 0 14V2C0 0.895431 0.895428 0 2 0Z" fill="#B094FF"/>
93+
<path d="M5.33332 12H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
94+
<path d="M5.33332 8H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
95+
<path d="M7.99999 4H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
96+
<path d="M8 7.99999V12H12L15.3333 8.66666C16.4379 7.56209 16.4379 5.77123 15.3333 4.66666C14.2288 3.56209 12.4379 3.56209 11.3333 4.66666L8 7.99999Z" fill="#B094FF" stroke="#7856FF" stroke-linejoin="round"/>
97+
</svg>
98+
)
99+
}
100+
101+
function DiscoverIcon() {
102+
return (
103+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
104+
<path d="M14.2857 6.85714H13.7143C13.0831 6.85714 12.5714 7.36882 12.5714 8C12.5714 8.63118 13.0831 9.14286 13.7143 9.14286H14.2857C15.2325 9.14286 16 9.91037 16 10.8571V14C16 15.1046 15.1046 16 14 16H10.8571C9.91037 16 9.14286 15.2325 9.14286 14.2857V13.7143C9.14286 13.0831 8.63118 12.5714 8 12.5714C7.36882 12.5714 6.85714 13.0831 6.85714 13.7143V14.2857C6.85714 15.2325 6.08963 16 5.14286 16H2C0.895431 16 0 15.1046 0 14V10.8571C0 9.91037 0.767511 9.14286 1.71429 9.14286H2.28571C2.9169 9.14286 3.42857 8.63118 3.42857 8C3.42857 7.36882 2.9169 6.85714 2.28572 6.85714H1.71429C0.767512 6.85714 0 6.08963 0 5.14286V2C0 0.895431 0.89543 0 2 0H5.14286C6.08963 0 6.85714 0.767511 6.85714 1.71429V2.28571C6.85714 2.9169 7.36882 3.42857 8 3.42857C8.63118 3.42857 9.14286 2.9169 9.14286 2.28572V1.71429C9.14286 0.767512 9.91037 0 10.8571 0H14C15.1046 0 16 0.89543 16 2V5.14286C16 6.08963 15.2325 6.85714 14.2857 6.85714Z" fill="#B094FF"/>
105+
<path d="M6.66669 5.33334V6.66668" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
106+
<path d="M9.33331 5.33334V6.66668" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
107+
<path d="M5.33331 8C5.55554 8.44444 6.39998 9.33333 7.99998 9.33333C9.59998 9.33333 10.4444 8.44444 10.6666 8" stroke="#7856FF" stroke-linecap="round"/>
108+
</svg>
109+
)
110+
}
111+
76112
export {
77113
IntroIcon,
78114
DataInIcon,
79115
AnalysisIcon,
80116
AdminIcon,
81117
DataOutIcon,
82118
SupportIcon,
119+
SolutionsIcon,
120+
PlaybooksIcon,
121+
DiscoverIcon
83122
};

0 commit comments

Comments
 (0)