\n
\n );\n}\n","import * as React from 'react';\n\nexport default function NavDrawer({\n open,\n onClose = () => {},\n children,\n style,\n enableOverlay = true,\n overlayColor = '#000',\n overlayOpacity = 0.4,\n zIndex = 100,\n duration = 300,\n className,\n}) {\n const idSuffix = (Math.random() + 1).toString(36).substring(7);\n\n const overlayStyles = {\n backgroundColor: `${overlayColor}`,\n opacity: `${overlayOpacity}`,\n zIndex: zIndex,\n };\n\n const drawerStyles = {\n zIndex: zIndex + 1,\n transitionDuration: `${duration}ms`,\n top: 0,\n right: 0,\n transform: 'translate3d(100%, 0, 0)',\n ...style,\n };\n\n return (\n \n {title}\n
\n {children}
\n \n \n {children}\n \n {enableOverlay && (\n
\n );\n}\n","import React, { useState, useEffect, useRef, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport Link from 'components/Link';\nimport ReductLogo from 'assets/images/reduct-logo.svg';\nimport ReductLogoWithoutText from 'assets/images/logos/reduct-white-logo-nav.svg';\n\nimport mobileBarBlue from 'assets/images/mobile-bar-blue.svg';\nimport mobileBarWhite from 'assets/images/mobile-bar-white.svg';\nimport CloseBlue from 'assets/images/close-blue.svg';\nimport DownCaret from 'assets/images/down-caret.svg';\n\nimport { NAV_ITEMS } from 'constants/navigation/navItems';\n\nimport NavAccordion from '../NavAccordion';\nimport NavDrawer from '../NavDrawer';\nimport ReductVideoSignUpButton from '../ReductVideoSignUpButton';\n\nimport { CalendlyPopup } from '../../utils/CalendarlyPopup';\nimport { FlagsContext } from '../../context/FlagsContext';\n\nconst signInHandler = (e) => {\n const host = window.location.hostname;\n if (host.endsWith('.distill.video')) {\n e.target.href = `https://dev.distill.video`;\n }\n};\n\nconst SubNavItems = ({ subItems }) => {\n return (\n \n
\n );\n};\n\nSubNavItems.propTypes = {\n subItems: PropTypes.arrayOf(\n PropTypes.shape({\n link: PropTypes.string,\n badge: PropTypes.string,\n })\n ),\n};\n\nconst NavBar = ({ pageName = '' }) => {\n const headerRef = useRef(null);\n const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n const [hasScrolled, setHasScrolled] = useState(false);\n const [isTranscriptionBenchmarkPage, setIsTranscriptionBenchmarkPage] =\n useState(false);\n\n const { isFreeTrialCtaDisabled } = useContext(FlagsContext);\n\n const scrollFunction = () => {\n if (!headerRef.current) return;\n\n const header = headerRef.current;\n const headerHeight = header.offsetHeight;\n\n if (document.documentElement.scrollTop <= headerHeight) {\n setHasScrolled(false);\n }\n\n if (document.documentElement.scrollTop > headerHeight) {\n if (!hasScrolled) setHasScrolled(true);\n }\n };\n\n useEffect(() => {\n const transcriptionBenchmarkPage = pageName.includes('benchmark');\n\n setIsTranscriptionBenchmarkPage(transcriptionBenchmarkPage);\n\n window.addEventListener('scroll', scrollFunction);\n return () => {\n window.removeEventListener('scroll', scrollFunction);\n };\n }, [pageName]);\n\n return (\n <>\n - \n {subItems.map((subItem, i) => {\n return (\n
- \n \n {subItem.title}\n {subItem.badge && (\n {subItem.badge}\n )}\n \n \n );\n })}\n
\n \n \n setIsMobileMenuOpen(false)}\n className=\"block lg:hidden\"\n >\n
\n \n \n );\n};\n\nfunction BookDemoButton() {\n return (\n \n );\n}\n\nBookDemoButton.propTypes = {};\n\nfunction SignUpButton({ small }) {\n return (\n - \n
- \n {NAV_ITEMS.map((item, i) => {\n const hasSubNavs =\n item.subNavItems && item.subNavItems.length > 0;\n\n return (\n \n {item.link ? (\n\n );\n })}\n
\n )}\n \n\n - \n
- \n
- \n
\n {!isFreeTrialCtaDisabled && (\n
\n \n
\n \n \n setIsMobileMenuOpen(false)}\n >\n 
\n \n
\n \n
\n \n {NAV_ITEMS.map((item, i) => {\n const hasSubNavs =\n item.subNavItems && item.subNavItems.length > 0;\n\n return (\n
\n \n {item.link ? (\n \n {item.title}\n \n ) : (\n \n {item.title}{' '}\n
\n );\n })}\n \n {item.subNavItems.map((subItem, i) => {\n return (\n
\n \n )}\n \n \n {subItem.title}\n {subItem.badge && (\n \n {subItem.badge}\n \n )}\n \n
\n );\n })}\n \n \n Log in\n \n
\n \n
\n );\n};\n\nCountdownTimer.propTypes = {\n date: PropTypes.string.isRequired,\n time: PropTypes.string.isRequired,\n timeZoneOffset: PropTypes.string,\n};\n\nexport default CountdownTimer;\n","/* eslint-disable react/no-danger */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport close from 'assets/images/close-outline.svg';\nimport handPointer from 'assets/images/hand-pointer.svg';\n\nimport Timer, { convertAndCalcTimeDiff } from './Timer';\n\nconst DEFAULT_TIMEZOME = 'UTC';\n\nconst getCurrentDate = (timeZone) => {\n const [fullDate, time] = new Date()\n .toLocaleString('en-US', { timeZone: timeZone || DEFAULT_TIMEZOME })\n .split(',');\n\n const [month, date, year] = fullDate.split('/');\n const [hours24, minutes] = time.split(':');\n const isPM = time.includes('PM');\n let hours = hours24;\n\n if (Number(hours) === 12) hours = '00';\n if (isPM) hours = Number(hours) + 12;\n\n return {\n currentDate: `${year}/${month.padStart(2, 0)}/${date.padStart(2, 0)}`,\n currentTime: `${hours}:${minutes}`,\n };\n};\n\nconst getDisplayEvent = (events) => {\n const displayEvent = events.find((event) => {\n const { endDate, endTime } = event.node;\n const { currentDate, currentTime } = getCurrentDate(event.node.timeZone);\n\n if (endDate === currentDate) {\n return endTime > currentTime;\n }\n\n if (endDate < currentDate) {\n return false;\n }\n\n return true;\n });\n\n return displayEvent || {};\n};\n\nconst getEventStartDateTime = (dateStr, time) => {\n const [, month, date] = dateStr.split('/');\n const [hour, min] = time.split(':');\n const isBeforeNoon = Number(hour) <= 12;\n\n const hourValue = isBeforeNoon ? hour : Number(hour) - 12;\n const minValue = Number(min) ? `:${min}` : '';\n const meridiem = isBeforeNoon && Number(hour) !== 12 ? 'am' : 'pm';\n\n const timeStr = `${hourValue}${minValue}${meridiem}`;\n\n return `${month}/${date} ${timeStr}`;\n};\n\nconst EventTime = ({ highlightTime = false, children = null }) => {\n return (\n Starts in
\n{convertMilisecondsToHour(timerCount)}
\n\n {}}\n >\n 
\n \n
\n );\n}\n\nBannerDescription.propTypes = {\n onClose: PropTypes.func,\n event: PropTypes.shape({\n description: PropTypes.string,\n startDate: PropTypes.string,\n startTime: PropTypes.string,\n highlightTime: PropTypes.bool,\n hideTime: PropTypes.bool,\n }),\n};\n\nconst Banner = ({ onClose }) => {\n const {\n allEventsYaml: { edges: events },\n } = useStaticQuery(graphql`\n query MyQuery {\n allEventsYaml(sort: { endDate: ASC }) {\n edges {\n node {\n id\n startDate\n startTime\n endDate\n endTime\n ctaLink\n timeZone\n hideTime\n timezoneOffset\n highlightTime\n description\n }\n }\n }\n }\n `);\n\n const eventData = useMemo(() => getDisplayEvent(events), []);\n const event = eventData.node || {};\n const [timeDiff, setTimeDiff] = useState(\n convertAndCalcTimeDiff(event.endDate, event.endTime)\n );\n\n useEffect(() => {\n let interval = null;\n\n if (event.endDate) {\n interval = setInterval(() => {\n const diff = convertAndCalcTimeDiff(\n event.endDate,\n event.endTime,\n event.timezoneOffset\n );\n\n setTimeDiff(diff);\n\n if (diff <= 0) clearInterval(interval);\n }, 1000);\n }\n\n return () => clearInterval(interval);\n }, []);\n\n if (!event.startDate || timeDiff <= 0) return null;\n\n return (\n \n
\n \n {!event.hideTime && (\n \n
\n
\n );\n};\n\nBanner.propTypes = {\n onClose: PropTypes.func,\n};\n\nexport default Banner;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nconst OpenGraph = ({\n url,\n name,\n type,\n title,\n description,\n image,\n width = '1200px',\n height = '630px',\n locale,\n}) => (\n \n
\n \n
\n\n \n \n Save your spot\n \n {}}\n >\n \n \n
\n