Merge pull request #2156 from mito-ds/prominent-social-proof

aarondr77 · web-flow · commit 528cca3d2ff9 · 2026-01-23T13:00:30.000-05:00
Prominent social proof
diff --git a/trymito.io/components/Buttons/TranslucentButton/TranslucentButton.tsx b/trymito.io/components/Buttons/TranslucentButton/TranslucentButton.tsx
@@ -33,7 +33,10 @@ const TranslucentButton = (props: {
         if (props.variant === 'downloads') {
             return (
                 <Link href={href}>
-                    <a className={classNames(props.className, translucentButtonStyles.translucent_button)}>
+                    <a 
+                        className={classNames(props.className, translucentButtonStyles.translucent_button)}
+                        onClick={props.onClick}
+                    >
                         {props.children}
                     </a>
                 </Link>
diff --git a/trymito.io/components/Header/Header.tsx b/trymito.io/components/Header/Header.tsx
@@ -13,6 +13,7 @@ import TranslucentButton from "../Buttons/TranslucentButton/TranslucentButton"
 import { classNames } from "../../utils/classNames"
 import { PLAUSIBLE_INSTALL_DOCS_CTA_LOCATION_HEADER } from "../../utils/plausible"
 import GithubButton, { MITO_GITHUB_LINK } from "../Buttons/GithubButton/GithubButton"
+import { getABTestVariant } from "../../utils/abTestUtils"
 
 export const MITO_INSTALLATION_DOCS_LINK = 'https://docs.trymito.io/getting-started/installing-mito'
 export const JOBS_BOARD_LINK = 'https://www.ycombinator.com/companies/mito/jobs'
@@ -71,6 +72,17 @@ const Header = (): JSX.Element => {
 
     const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
 
+    const handleDownloadCTAClick = () => {
+      // Track Download CTA click with A/B test variant
+      if (typeof window !== 'undefined' && window.analytics) {
+        window.analytics.track('Download CTA Clicked', {
+          location: 'header',
+          abTestVariant: getABTestVariant(),
+          timestamp: new Date().toISOString(),
+        });
+      }
+    };
+
     return (
       <header className={headerStyles.header}>
         <div className={headerStyles.navbar}>
@@ -175,6 +187,7 @@ const Header = (): JSX.Element => {
               <TranslucentButton
                 className={PLAUSIBLE_INSTALL_DOCS_CTA_LOCATION_HEADER}
                 variant='downloads'
+                onClick={handleDownloadCTAClick}
               >
                 <>
                   Download
diff --git a/trymito.io/components/SocialProofCarousel/SocialProofCarousel.module.css b/trymito.io/components/SocialProofCarousel/SocialProofCarousel.module.css
@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+.container {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 4rem;
+  padding-right: 2rem;
+  position: relative;
+  gap: 2rem;
+}
+
+.tagline {
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  opacity: 0.7;
+  text-align: left;
+  z-index: 2;
+  position: relative;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.carouselWrapper {
+  position: relative !important;
+  flex: 1 !important;
+  overflow: hidden !important;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+}
+
+/* Fade effect on the left side (where text is) - only fade when very close to text */
+.carouselWrapper::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 150px;
+  background: linear-gradient(to right, var(--color-light-background) 0%, transparent 100%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Style the marquee container and children */
+.carouselWrapper :global(.marquee_container) {
+  align-items: center;
+}
+
+.carouselWrapper :global(.marquee) {
+  display: flex;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  flex-shrink: 0;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+  margin: 0 1.5rem;
+}
+
+.logoContainer:hover {
+  opacity: 1;
+}
+
+.logo {
+  object-fit: contain;
+  filter: grayscale(100%);
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  width: 56px;
+  height: 28px;
+}
+
+.logoContainer:hover .logo {
+  opacity: 1;
+  filter: grayscale(0%);
+}
+
+/* Ensure logos are visible above the fade overlay */
+.carouselWrapper :global(.marquee) > * {
+  position: relative;
+  z-index: 2;
+}
+
+@media only screen and (min-width: 75em) {
+  .tagline {
+    font-size: 1.1rem;
+  }
+  
+  .container {
+    gap: 2.5rem;
+    margin-left: 0;
+    padding-right: 3rem;
+    margin-top: 2rem;
+  }
+  
+  .carouselWrapper::before {
+    width: 180px;
+  }
+  
+  .logoContainer {
+    height: 40px;
+    margin: 0 2.5rem;
+  }
+  
+  .logo {
+    width: 80px;
+    height: 40px;
+  }
+}
diff --git a/trymito.io/components/SocialProofCarousel/SocialProofCarousel.tsx b/trymito.io/components/SocialProofCarousel/SocialProofCarousel.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Marquee from '../Marquee/Marquee';
+import styles from './SocialProofCarousel.module.css';
+
+// Company logos
+const COMPANY_LOGOS = [
+  { src: '/customers/accenture.png', alt: 'Accenture' },
+  { src: '/customers/amazon.png', alt: 'Amazon' },
+  { src: '/customers/cisco.png', alt: 'Cisco' },
+  { src: '/customers/deloitte.png', alt: 'Deloitte' },
+  { src: '/customers/ericsson.png', alt: 'Ericsson' },
+  { src: '/customers/kpmg.png', alt: 'KPMG' },
+  { src: '/customers/pwc.png', alt: 'PWC' },
+  { src: '/customers/wayfair.png', alt: 'Wayfair' },
+  { src: '/customers/sap.png', alt: 'SAP' },
+  { src: '/customers/cytiva.png', alt: 'Cytiva' },
+  { src: '/customers/ibm.png', alt: 'IBM' },
+  { src: '/customers/wells-fargo-bank.png', alt: 'Wells Fargo' },
+];
+
+const SocialProofCarousel = (): JSX.Element => {
+  return (
+    <div className={styles.container}>
+      <p className={styles.tagline}>Trusted by Fortune 500 companies</p>
+      <div className={styles.carouselWrapper}>
+        <Marquee direction="left" speed={30}>
+          {COMPANY_LOGOS.map((logo, index) => (
+            <div key={`${logo.alt}-${index}`} className={styles.logoContainer}>
+              <Image
+                src={logo.src}
+                alt={logo.alt}
+                width={56}
+                height={28}
+                className={styles.logo}
+                unoptimized
+              />
+            </div>
+          ))}
+        </Marquee>
+      </div>
+    </div>
+  );
+};
+
+export default SocialProofCarousel;
diff --git a/trymito.io/components/WaitlistSignup/WaitlistSignup.tsx b/trymito.io/components/WaitlistSignup/WaitlistSignup.tsx
@@ -6,6 +6,7 @@
 import { useState, FormEvent, KeyboardEvent } from 'react';
 import waitlistStyles from './WaitlistSignup.module.css';
 import { classNames } from '../../utils/classNames';
+import { getABTestVariant } from '../../utils/abTestUtils';
 
 declare global {
   interface Window {
@@ -50,6 +51,7 @@ const WaitlistSignup = (): JSX.Element => {
           location: 'homepage_hero',
           email: email,
           timestamp: new Date().toISOString(),
+          abTestVariant: getABTestVariant(),
         });
       }
 
@@ -94,6 +96,7 @@ const WaitlistSignup = (): JSX.Element => {
           lastName: lastName,
           company: company,
           timestamp: new Date().toISOString(),
+          abTestVariant: getABTestVariant(),
         });
       }
 
diff --git a/trymito.io/next-env.d.ts b/trymito.io/next-env.d.ts
@@ -1,8 +1,3 @@
-/*
- * Copyright (c) Saga Inc.
- * Distributed under the terms of the GNU Affero General Public License v3.0 License.
- */
-
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 
diff --git a/trymito.io/pages/index.tsx b/trymito.io/pages/index.tsx
@@ -24,8 +24,11 @@ import FeatureSquares from '../components/FeatureSquares/FeatureSquares';
 import MadeWithMito from '../components/MadeWithMito/MadeWithMito';
 import DemoVideo from '../components/DemoVideo/DemoVideo';
 import WaitlistSignup from '../components/WaitlistSignup/WaitlistSignup';
+import SocialProofCarousel from '../components/SocialProofCarousel/SocialProofCarousel';
+import { useABTest } from '../utils/useABTest';
 
 const Home: NextPage = () => {
+  const abTestVariant = useABTest();
 
   useEffect(() => {
     Prism.highlightAll();
@@ -72,11 +75,12 @@ const Home: NextPage = () => {
               </div>
             </div>
 
+            {abTestVariant === 'carousel' && <SocialProofCarousel />}
+
             {/* <AIInputField autoLaunchJupyterLab={true} /> */}
           </section>
 
-          <LogoSection></LogoSection>
-
+          {abTestVariant === 'logo' && <LogoSection />}
           <section>
             <MadeWithMito />
           </section>
diff --git a/trymito.io/public/customers/apple.png b/trymito.io/public/customers/apple.png
diff --git a/trymito.io/public/customers/asset_manager.png b/trymito.io/public/customers/asset_manager.png
diff --git a/trymito.io/public/customers/ibm.png b/trymito.io/public/customers/ibm.png
diff --git a/trymito.io/public/customers/wells-fargo-bank.png b/trymito.io/public/customers/wells-fargo-bank.png
diff --git a/trymito.io/styles/Home.module.css b/trymito.io/styles/Home.module.css
@@ -8,7 +8,6 @@
   flex-direction: column;
   align-items: center;
   gap: 2rem;
-  margin: 2rem;
 }
 
 .hero_text_container {
diff --git a/trymito.io/styles/globals.css b/trymito.io/styles/globals.css
@@ -33,6 +33,9 @@
   --jupyter-orange: #F37726;
   --streamlit-red: #FF4B4B;
 
+  /* Hero content left margin - shared between hero_content_container and carousel */
+  --hero-content-left-margin: 2rem;
+
   /* 
     We can't currently use css variables in media queries unforuntetly! 
     See here: https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
diff --git a/trymito.io/utils/abTestUtils.ts b/trymito.io/utils/abTestUtils.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+const AB_TEST_VARIANT_KEY = 'ab_test_social_proof_variant';
+
+export type ABTestVariant = 'carousel' | 'logo';
+
+/**
+ * Gets the A/B test variant from localStorage
+ * @returns The variant ('carousel' | 'logo') or null if not yet assigned
+ */
+export const getABTestVariant = (): ABTestVariant | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const variant = localStorage.getItem(AB_TEST_VARIANT_KEY);
+  if (variant === 'carousel' || variant === 'logo') {
+    return variant;
+  }
+  return null;
+};
+
+/**
+ * Sets the A/B test variant in localStorage
+ * @param variant The variant to store ('carousel' | 'logo')
+ */
+export const setABTestVariant = (variant: ABTestVariant): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  localStorage.setItem(AB_TEST_VARIANT_KEY, variant);
+};
+
+/**
+ * Generates and stores a new variant assignment (50/50 split)
+ * @returns The assigned variant ('carousel' | 'logo')
+ */
+export const assignABTestVariant = (): ABTestVariant => {
+  // 50/50 random split
+  const variant: ABTestVariant = Math.random() < 0.5 ? 'carousel' : 'logo';
+  setABTestVariant(variant);
+  return variant;
+};
diff --git a/trymito.io/utils/useABTest.ts b/trymito.io/utils/useABTest.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+import { useState, useEffect } from 'react';
+import { getABTestVariant, assignABTestVariant, ABTestVariant } from './abTestUtils';
+
+/**
+ * React hook for A/B test variant assignment
+ * Generates a random variant assignment (50/50 split) for new visitors
+ * and ensures the same user always sees the same variant on subsequent visits
+ * @returns The variant ('carousel' | 'logo')
+ */
+export const useABTest = (): ABTestVariant => {
+  const [variant, setVariant] = useState<ABTestVariant>(() => {
+    // Check if variant already exists in localStorage
+    const existingVariant = getABTestVariant();
+    if (existingVariant) {
+      return existingVariant;
+    }
+    // Assign a new variant if none exists
+    return assignABTestVariant();
+  });
+
+  useEffect(() => {
+    // Ensure variant is stored in localStorage
+    const existingVariant = getABTestVariant();
+    if (!existingVariant) {
+      const newVariant = assignABTestVariant();
+      setVariant(newVariant);
+    }
+  }, []);
+
+  return variant;
+};
