Myronkaifung guides v1

components/SelfGuidedTours.tsx

@@ -0,0 +1,309 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import Script from 'next/script';
+
+/**
+ * Card data shape passed from MDX.
+ * - navatticOpen: the Navattic demo id (e.g., "cmfkxwfa5000004lc8408f5wi")
+ * - navatticTitle: optional; title for the Navattic popup chrome
+ * - img: optional; if omitted, a dark placeholder fills the media area
+ */
+type Card = {
+  badge: string;
+  title: string;
+  blurb?: string;
+  img?: string;
+  href?: string;
+  navatticOpen?: string;
+  navatticTitle?: string;
+};
+
+interface Props {
+  cards: Card[];
+}
+
+/* ---- 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;
+/** Image height is fixed for consistent badge anchoring */
+const IMAGE_H = 140;
+/** Image width is indented left and bleeds to the right edge */
+const IMAGE_W = 276;
+
+/* ---- Inline “CSS-in-TS” styles (layout is pixel-exact to your spec) ---- */
+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 ${MP_PURPLE}`,
+    boxShadow: '0 10px 30px rgba(0,0,0,.25)',
+    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,              // aligns the image to the badge’s left indent
+    height: IMAGE_H,
+    width: IMAGE_W,
+    marginLeft: 16,       // left indent (aligns with badge)
+    marginRight: -16,     // bleed to right edge (no right indent)
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    overflow: 'hidden',
+    background: 'var(--sgt-media-bg)', // placeholder color behind images
+    zIndex: 1,
+  } as React.CSSProperties,
+
+  mediaImg: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    objectPosition: 'left top',
+    display: 'block',
+  } as React.CSSProperties,
+
+  placeholder: {
+    width: '100%',
+    height: '100%',
+    background: 'var(--sgt-media-bg)',
+  } as React.CSSProperties,
+
+  /**
+   * Anchored text block:
+   * - Badge top is locked to IMAGE_H + offset so all cards align visually
+   * - Title and blurb naturally flow below the badge
+   */
+  bottom: {
+    position: 'absolute' as const,
+    top: IMAGE_H + 22,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: '16px 18px 22px',
+    zIndex: 3,
+  },
+
+  /* Badge = stronger weight + tighter tracking for a pill look */
+  badge: {
+    display: 'inline-block',
+    background: 'var(--sgt-badge-bg)',
+    color: 'var(--sgt-badge-fg)',
+    fontWeight: 800,
+    letterSpacing: '.04em',
+    fontSize: '11.5px',
+    lineHeight: 1,
+    borderRadius: 8,
+    padding: '8px 10px',
+    marginBottom: 10,
+  } as React.CSSProperties,
+
+  title: {
+    fontSize: 23,
+    fontWeight: 700,
+    lineHeight: 1.2,
+    margin: 0,
+    color: 'var(--sgt-title)',
+  } as React.CSSProperties,
+
+  blurb: {
+    marginTop: 8,
+    fontSize: 15,
+    color: 'var(--sgt-blurb)',
+    opacity: 0.75,
+  } as React.CSSProperties,
+
+  clickable: {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    background: 'transparent',
+    border: 0,
+    padding: 0,
+    cursor: 'pointer',
+    textAlign: 'inherit',
+  } as React.CSSProperties,
+};
+
+/* ---- One card view (supports Navattic popup or plain link) ---- */
+function CardView({ c }: { c: Card }) {
+  const inside = (
+    <>
+      <div style={styles.dogEar} aria-hidden />
+      <div style={styles.mediaWrap}>
+        {c.img ? (
+          <Image src={c.img} alt="" fill style={styles.mediaImg} priority={false} />
+        ) : (
+          <div style={styles.placeholder} />
+        )}
+      </div>
+
+      <div style={styles.bottom}>
+        <div style={styles.badge}>{c.badge}</div>
+        <h3 style={styles.title}>{c.title}</h3>
+        {c.blurb ? <div style={styles.blurb}>{c.blurb}</div> : null}
+      </div>
+    </>
+  );
+
+  // Use Navattic popup if navatticOpen is provided
+  if (c.navatticOpen) {
+      const navatticUrl = c.navatticOpen.startsWith('http')
+        ? c.navatticOpen
+        : `https://capture.navattic.com/${c.navatticOpen}`;
+
+      return (
+        <div style={styles.card} className="sgt-card">
+          <button
+            type="button"
+            style={styles.clickable}
+            className="sgt-click"
+            data-navattic-open={navatticUrl}
+            data-navattic-title={c.navatticTitle || c.title}
+          >
+            {inside}
+          </button>
+        </div>
+      );
+    }
+
+  // Fallback to href links if needed
+  if (c.href) {
+    return (
+      <div style={styles.card} className="sgt-card">
+        <a href={c.href} style={styles.clickable} className="sgt-click">
+          {inside}
+        </a>
+      </div>
+    );
+  }
+
+  // Static (non-clickable) card
+  return (
+    <div style={styles.card} className="sgt-card">
+      {inside}
+    </div>
+  );
+}
+
+/**
+ * SelfGuidedTours
+ * - Renders a responsive grid of product-tour cards
+ * - Loads Navattic's embed script once (popup mode)
+ * - Exposes a simple props API so MDX controls the content
+ */
+export default function SelfGuidedTours({ cards }: Props) {
+  return (
+    <>
+      {/* Navattic embed loader (newer API) */}
+      <Script src="https://js.navattic.com/embeds.js" strategy="afterInteractive" />
+
+      {/* Grid */}
+      <div style={styles.grid}>
+        {cards.map((c, i) => (
+          <CardView key={i} c={c} />
+        ))}
+      </div>
+
+      {/* Theme variables + interactions */}
+      <style jsx global>{`
+        /* ---- Dark defaults ---- */
+        :root {
+          --sgt-card-bg: #0a0a0b;
+          --sgt-title: #ffffff;
+          --sgt-blurb: rgba(255, 255, 255, 0.85);
+          --sgt-border: ${MP_PURPLE};
+          --sgt-media-bg: #111111;
+          --sgt-dogear: ${MP_PURPLE};
+          --sgt-badge-bg: ${MP_PURPLE};
+          --sgt-badge-fg: #ffffff;
+        }
+
+        /* ---- Prefer light scheme (also covered below by class/attr) ---- */
+        @media (prefers-color-scheme: light) {
+          :root,
+          html.light,
+          html[class*='light'],
+          [data-theme='light'] {
+            --sgt-card-bg: #ffffff;
+            --sgt-title: #111111;
+            --sgt-blurb: #333333;
+            --sgt-border: ${MP_PURPLE};
+            --sgt-media-bg: #e9e9ef;
+            --sgt-dogear: ${MP_PURPLE};
+            --sgt-badge-bg: ${MP_PURPLE};
+            --sgt-badge-fg: #ffffff;
+          }
+        }
+
+        /* ---- Explicit site light mode (Mixpanel Docs sets html.light) ---- */
+        html.light,
+        html[class*='light'],
+        [data-theme='light'] {
+          --sgt-card-bg: #ffffff;
+          --sgt-title: #111111;
+          --sgt-blurb: #333333;
+          --sgt-border: ${MP_PURPLE};
+          --sgt-media-bg: #e9e9ef;
+          --sgt-dogear: ${MP_PURPLE};
+          --sgt-badge-bg: ${MP_PURPLE};
+          --sgt-badge-fg: #ffffff;
+        }
+
+        /* ---- Card base colors ---- */
+        .sgt-card {
+          background: var(--sgt-card-bg);
+          color: var(--sgt-title);
+          border-color: var(--sgt-border);
+        }
+
+        /* ---- Micro-interactions ---- */
+        .sgt-card:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
+        }
+        .sgt-card:focus-within {
+          outline: 2px solid ${MP_PURPLE};
+          outline-offset: 2px;
+        }
+        .sgt-click:focus-visible {
+          outline: 2px solid ${MP_PURPLE};
+          outline-offset: 3px;
+          border-radius: 10px;
+        }
+
+        /* ---- Responsive type bump on very wide screens ---- */
+        @media (min-width: 1280px) {
+          .sgt-card h3 { font-size: 24px; }
+          .sgt-card p { font-size: 15px; }
+        }
+      `}</style>
+    </>
+  );
+}

components/svg/NavIcon.tsx

@@ -73,11 +73,50 @@ function SupportIcon() {
     )
 }
 
+function SolutionsIcon() {
+    return (
+        <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3.29968" y="14.3158" width="8.13757" height="1.68421" rx="0.842105" fill="#7856FF"/>
+            <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"/>
+            <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"/>
+            <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"/>
+            <circle cx="7.36836" cy="8.42106" r="2.52632" fill="#7856FF"/>
+            <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"/>
+        </svg>
+    )
+}
+
+function PlaybooksIcon() {
+    return (
+        <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <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"/>
+            <path d="M5.33332 12H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M5.33332 8H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7.99999 4H2.66666" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
+            <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"/>
+        </svg>
+    )
+}
+
+function DiscoverIcon() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <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"/>
+            <path d="M6.66669 5.33334V6.66668" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9.33331 5.33334V6.66668" stroke="#7856FF" stroke-linecap="round" stroke-linejoin="round"/>
+            <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"/>
+        </svg>
+    )
+}
+
 export {
     IntroIcon,
     DataInIcon,
     AnalysisIcon,
     AdminIcon,
     DataOutIcon,
     SupportIcon,
+    SolutionsIcon,
+    PlaybooksIcon,
+    DiscoverIcon
 };