Comparison session recordings (#3343)

* Update session-recording.mdx

* Update session-recording.mdx

* Create new Array CTA for blog

* Update session-recording.mdx

* Update session-recording.mdx

* styled session recording table, evened out global table padding

Co-authored-by: Cory Watilo <corywatilo@gmail.com>

contents/product/session-recording.mdx

@@ -35,6 +35,145 @@ documentation: /docs/user-guides/recordings
 
 <TutorialsSlider topic="session recordings" />
 
+### How does PostHog compare?
+
+<p className="sm:hidden text-sm">Swipe right to compare.</p>
+
+<div className="overflow-x-auto -mx-5 px-5">
+<table className="w-full mt-4" style="min-width: 600px;">
+    <thead>
+        <tr>
+            <td className="w-3/12"></td>
+            <td className="w-2/12 text-center">Hotjar</td>
+            <td className="w-2/12 text-center">Logrocket</td>
+            <td className="w-2/12 text-center">Matomo</td>
+            <td className="w-3/12 text-center bg-gray-accent bg-opacity-50"><strong>PostHog</strong></td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><strong>Platform</strong></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td className="bg-gray-accent bg-opacity-50">&nbsp;</td>
+        </tr>
+        <tr>
+            <td>Free plan</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Open source</td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Self-hostable</td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Cloud hosting</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Product analytics suite</td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td><strong>Session Recording</strong></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td className="bg-gray-accent bg-opacity-50">&nbsp;</td>
+        </tr>
+        <tr>
+            <td>Single-page app support</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Mobile app recordings</td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-red text-lg">✖</span></td>
+        </tr>
+        <tr>
+            <td>Identity detection</td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Target recordings by URL</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Target by sample size</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Filter recordings by user or event</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Rage-click detection</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Privacy masking for sensitive content</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-green text-lg">✔</span></td>
+        </tr>
+        <tr>
+            <td>Export recordings</td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="text-center"><span className="text-red text-lg">✖</span></td>
+            <td className="text-center"><span className="text-green text-lg">✔</span></td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><span className="text-red text-lg">✖</span></td>
+        </tr>
+        <tr>
+            <td>Retention policy for recordings</td>
+            <td className="text-center">1 year</td>
+            <td className="text-center">1 month</td>
+            <td className="text-center">24 months</td>
+            <td className="bg-gray-accent bg-opacity-50 text-center"><strong>PostHog Cloud:</strong> 3 weeks<br /><strong>Self-hosted:</strong> No limit</td>
+        </tr>
+    </tbody>
+</table>
+</div>
+
 <Section divider={false}>
     <Quote
         imageSource="/images/customers/mishra.jpeg"

safelist.txt

@@ -28,6 +28,8 @@ w-full
 w-56
 w-64
 w-72
+w-2/12
+w-4/12
 opacity-40
 opacity-1
 grid-rows-1
@@ -68,3 +70,5 @@ space-x-reverse
 lg:ml-6
 text-primary
 text-primary-dark
+text-green
+sm:hidden

src/components/ArrayCTA/index.tsx

@@ -3,6 +3,7 @@ import { CallToAction } from 'components/CallToAction'
 
 export const ArrayCTA = () => (
     <>
+        <br />
         <p className="px-4 font-bold text-center z-10 relative mb-0 text-sm md:text-base">Ready to find out more?</p>
         <div className="flex flex-col md:flex-row justify-center items-center gap-2 xl:gap-4">
             <CallToAction width="56" to="/signup">
@@ -12,5 +13,6 @@ export const ArrayCTA = () => (
                 Schedule a demo
             </CallToAction>
         </div>
+        <br />
     </>
 )

src/components/Layout/Layout.scss

@@ -600,8 +600,6 @@ th {
     -moz-font-feature-settings: 'tnum';
     -ms-font-feature-settings: 'tnum';
     -webkit-font-feature-settings: 'tnum';
-    padding-left: 0.96667rem;
-    padding-right: 0.96667rem;
     padding-top: 0.5rem;
     padding-bottom: calc(0.5rem - 1px);
 }

tailwind.config.js

@@ -31,6 +31,8 @@ module.exports = {
                 'max-w-4xl',
                 'max-w-5xl',
                 'w-full',
+                'w-2/12',
+                'w-4/12',
                 'w-56',
                 'w-64',
                 'w-72',
@@ -42,6 +44,7 @@ module.exports = {
                 'opacity-100',
                 'border-opacity-75',
                 'border-opacity-100',
+                'text-green',
             ],
         },
     },
@@ -54,6 +57,7 @@ module.exports = {
             blue: '#1D4AFF',
             yellow: '#F7A501',
             red: '#F54E00',
+            green: '#6AA84F',
             primary: '#151515',
             'gray-accent': '#D0D1C9',
             'gray-accent-dark': '#2C2C2C',
@@ -173,6 +177,7 @@ module.exports = {
                 'dashed-line-dark': '#4b4b4b',
                 'dashed-line-light': '#D0D1C9',
                 blue: '#1D4AFF',
+                green: '#6AA84F',
             },
             minHeight: {
                 780: '780px',