Misc. website improvements

trymito.io/components/AIThesis/AIThesis.module.css

@@ -1,5 +1,4 @@
 .ai_thesis_container {
-    margin-top: 8rem;
     display: flex;
     flex-direction: column;
     align-content: center;

trymito.io/components/AIThesis/AIThesis.tsx

@@ -2,6 +2,7 @@ import pageStyles from '../../styles/Page.module.css'
 import aiThesisStyles from './AIThesis.module.css'
 import { useState } from 'react'
 import ExpandableCard from '../ExpandableCard/ExpandableCard'
+import { classNames } from '../../utils/classNames'
 
 
 const AIThesis = (): JSX.Element => {
@@ -10,12 +11,12 @@ const AIThesis = (): JSX.Element => {
 
     return (
 
-        <div className={pageStyles.background_card + ' ' + aiThesisStyles.ai_thesis_container}>
-            <h2 className='margin-left-2rem'>
-                Built for AI automation
-            </h2>
-            <div className={pageStyles.subsection + ' ' + pageStyles.subsection_narrow_space_betweeen}>
+        <div className={aiThesisStyles.ai_thesis_container}>
+            <div className={classNames(pageStyles.subsection, pageStyles.subsection_narrow_space_betweeen)}>
                 <div>
+                    <h2 className={classNames('margin-left-2rem', 'margin-bottom-1rem')}>
+                        Built for AI automation
+                    </h2>
                     <ExpandableCard 
                         title={'Sometimes chatbots, sometimes spreadsheets'}
                         shortTitle={'Choose the right tool'} 

trymito.io/components/CaseStudyCard/CaseStudies.module.css

@@ -0,0 +1,15 @@
+.case_study_mobile_container {
+    display: 'flex';
+    flex-direction: column;
+}
+
+.case_study_mobile_container > * {
+    margin-top: 2rem;
+}
+
+
+.case_studies_table {
+    width: min(95rem, 100%);
+    -webkit-border-horizontal-spacing: 30px;
+    -webkit-border-vertical-spacing: 30px;
+}

trymito.io/components/CaseStudyCard/CaseStudies.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import caseStudiesStyles from './CaseStudies.module.css'
+import CaseStudyCard from './CaseStudyCard';
+import caseStudyCardStyle from './CaseStudyCard.module.css'
+import { classNames } from '../../utils/classNames';
+
+const CaseStudies = (props: {}): JSX.Element => {
+
+    return (
+        <>
+            <table className={classNames(caseStudiesStyles.case_studies_table, 'only-on-desktop')}>
+                <tbody>
+                    <tr>
+                        <td>
+                            <CaseStudyCard 
+                                imageSrc='/case-studies/Wealth Management Case Study.png'
+                                link="blog/wealth-management-analyst-automates-critical-monthly-deliverable"  
+                                height={504}
+                                width={1030} 
+                                className={caseStudyCardStyle.scale_small_on_hover} 
+                            />
+                        </td>
+                        <td>
+                            <CaseStudyCard 
+                                imageSrc='/case-studies/special events.png'
+                                link="/blog/special-events-team-at-large-asset-manager-saves-7-hours-week-using-mito"  
+                                height={230}
+                                width={500}   
+                                className={caseStudyCardStyle.scale_normal_on_hover}  
+                            />
+                            <CaseStudyCard 
+                                imageSrc='/case-studies/recon.png'
+                                link="blog/medicare-agency-cuts-recon-process-from-19-to-2-days-using-mito"   
+                                height={230}
+                                width={500} 
+                                className={classNames(caseStudyCardStyle.scale_normal_on_hover, 'margin-top-35px')}
+                            />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div className='flex-row'>
+                                <CaseStudyCard 
+                                    imageSrc='/case-studies/python training.png'
+                                    link="blog/automating-spreadsheets-with-python-101"   
+                                    height={230}
+                                    width={500} 
+                                    className={caseStudyCardStyle.scale_normal_on_hover}  
+                                />
+                                <CaseStudyCard 
+                                    imageSrc='/case-studies/common mistakes.png'
+                                    link="blog/10-mistakes-to-look-out-for-when-transitioning-from-excel-to-python"   
+                                    height={230}
+                                    width={500} 
+                                    className={classNames(caseStudyCardStyle.scale_normal_on_hover, 'margin-left-30px')}
+
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <CaseStudyCard 
+                                imageSrc='/case-studies/enigma.png'
+                                link="blog/enigma-case-study"   
+                                height={230}
+                                width={500} 
+                                className={caseStudyCardStyle.scale_normal_on_hover}  
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div className={classNames(caseStudiesStyles.case_study_mobile_container, 'only-on-mobile')}>
+                <CaseStudyCard 
+                    imageSrc='/case-studies/Wealth Management Case Study.png'
+                    link="blog/wealth-management-analyst-automates-critical-monthly-deliverable"
+                    height={230}
+                    width={500} 
+                />
+                <CaseStudyCard 
+                    imageSrc='/case-studies/special events.png'
+                    link="/blog/special-events-team-at-large-asset-manager-saves-7-hours-week-using-mito"  
+                    height={230}
+                    width={500}  
+                />
+                <CaseStudyCard 
+                    imageSrc='/case-studies/recon.png'
+                    link="blog/medicare-agency-cuts-recon-process-from-19-to-2-days-using-mito"   
+                    height={230}
+                    width={500} 
+                />
+            </div>
+        </>
+    )
+}
+
+export default CaseStudies;

trymito.io/components/CaseStudyCard/CaseStudyCard.module.css

@@ -0,0 +1,13 @@
+.case_study_card_container {
+    transition: transform .25s ease-in-out; /* Adjust duration as needed */
+    cursor: pointer;
+
+}
+
+.scale_small_on_hover:hover {
+    transform: scale(1.05);
+}
+
+.scale_normal_on_hover:hover {
+    transform: scale(1.1);
+}

trymito.io/components/CaseStudyCard/CaseStudyCard.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+
+import pageStyles from '../../styles/Page.module.css'
+import { classNames } from '../../utils/classNames'
+import caseStudyCard from './CaseStudyCard.module.css' 
+
+const CaseStudyCard = (props: {
+    imageSrc: string,
+    link: string,
+    height: number,
+    width: number,
+    className?: string
+}): JSX.Element => {
+
+    return (
+        <div 
+            className={classNames(caseStudyCard.case_study_card_container, props.className)}
+            onClick={props.link !== undefined ? () => window.open(props.link, '_blank'): undefined}
+        >
+            <Image src={props.imageSrc} alt={props.imageSrc} height={props.height} width={props.width} />
+        </div>
+    )   
+}
+
+export default CaseStudyCard; 

trymito.io/components/ExpandableCard/ExpandableCard.module.css

@@ -14,19 +14,14 @@
 }
 
 .expandable_card_container:hover {
-    background-color: var(--color-light-purple);
+    background-color: var(--color-light-background-accent);
 }
 
 .expandable_card_container_selected {
-    background-color: var(--color-light-purple);
+    background-color: var(--color-light-background-accent);
     padding-bottom: 2rem;
 }
 
-.expandable_card_container_selected p, .expandable_card_container:hover p {
-    color: var(--color-background);
-}
-
-
 .header {
     display: flex;
     flex-direction: row;

trymito.io/components/ExpandableCard/ExpandableCard.tsx

@@ -5,6 +5,7 @@ import expandableCardStyles from './ExpandableCard.module.css'
 
 import OpenIconLight from '../../public/OpenIconLight.png'
 import CloseIconLight from '../../public/CloseIconLight.png'
+import { classNames } from '../../utils/classNames'
 
 const ExpandableCard = (props: {
     title: string, 
@@ -24,12 +25,12 @@ const imageSrc = props.isOpen ? CloseIconLight : OpenIconLight
 
     return (
         <div 
-            className={
-                pageStyles.background_card + ' ' + 
-                expandableCardStyles.expandable_card_container + ' ' +
-                selectedBackgroundColorClass + ' ' +
+            className={classNames(
+                pageStyles.background_card, 
+                expandableCardStyles.expandable_card_container,
+                selectedBackgroundColorClass,
                 className
-            }
+            )}
             id={props.title}
             onClick={() => props.onClick()}
         >

trymito.io/components/FAQCard/FAQCard.module.css

@@ -1,4 +1,5 @@
 .faq_card_container {
+
     /* 
         Reduce the padding so we can increase the size of the header to 
         make it easily clickable w/o making it look rediculous
@@ -46,9 +47,7 @@
         margin-left: 2rem;
     }
 
-    .header {
-        height: 70px;
+    .faq_card_header_text {
+        font-size: 1.25rem;
     }
-
-
 }

trymito.io/components/Footer/Footer.tsx

@@ -99,9 +99,6 @@ const Footer = (): JSX.Element => {
                     <ol>
                         Company
                     </ol>
-                    <li className={classNames(footerStyle.nav_item)}>
-                        <Link href='/customers'>Customers</Link>
-                    </li>
                     <li className={classNames(footerStyle.nav_item)}>
                         <a href={JOBS_BOARD_LINK} target="_blank" rel="noreferrer">Jobs</a>
                     </li>

trymito.io/components/Header/Header.module.css

@@ -4,7 +4,7 @@
     align-items: center;
 
     padding: 2rem 4rem;
-    background-color: rgba(45, 45, 45, .98);
+    background-color: var(--color-background);
 
     position: fixed; /* Set the navbar to fixed position */
     top: 0; /* Position the navbar at the top of the page */

trymito.io/components/Header/Header.tsx

@@ -139,12 +139,6 @@ const Header = (): JSX.Element => {
 
                 {/* About Dropdown */}
                 <HeaderDropdown dropdownButtonTitle="About">
-                  <HeaderDropdownItem
-                    title='Customers'
-                    href='/customers'
-                    iconSrc='/customers.svg'
-                    altText="Customers"
-                  />
                   <HeaderDropdownItem
                     title='Blog'
                     href='/blog'
@@ -233,12 +227,6 @@ const Header = (): JSX.Element => {
                 <li className='highlight-on-hover'>
                   <Link href='/plans'>Plans</Link>
                 </li>
-                <li className='highlight-on-hover'>
-                  <Link href='/customers'>Customers</Link>
-                </li>
-                <li className='highlight-on-hover'>
-                  <Link href='/security'>Security</Link>
-                </li>
                 <li className='highlight-on-hover'>
                   <Link href='/blog'>Blog</Link>
                 </li>
@@ -251,9 +239,6 @@ const Header = (): JSX.Element => {
                 <li className='highlight-on-hover'>
                   <a href={MITO_GITHUB_LINK} target="_blank" rel="noreferrer">GitHub</a>
                 </li>
-                <li className='highlight-on-hover'>
-                  <a href={JOBS_BOARD_LINK} target="_blank" rel="noreferrer">We&apos;re hiring!</a>
-                </li>
               </ul>
             </nav>
           </div>