(this.heroElement = ref)}>\n \n \n \n \n {primary.hero_title.html}\n \n\n \n {primary.hero_description.html}\n \n \n \n \n \n \n\n {primary.hero_image.dimensions &&\n (sizes && (\n
\n );\n }\n}\n\nexport { Hero, HeroProps };\n","import { FluidGatsbyImageFieldType, PrismicRichTextFieldType } from '../types';\n\nexport enum ImageTypes {\n fullscreen = 'Full screen',\n boxed = 'Boxed',\n two_images = 'Two images',\n}\n\nexport type VisualImageType = {\n visual_image: FluidGatsbyImageFieldType;\n visual_image_atl: PrismicRichTextFieldType;\n};\n\nexport type VisualProps = {\n slice: {\n slice_type: 'visual';\n primary: {\n visual_image_type: ImageTypes;\n };\n items: VisualImageType[];\n };\n};\n","import * as React from 'react';\n\nimport './LogoList.scss';\nimport { Container, PrismicHTMLParser } from '../../';\nimport { Grid, GridRow, GridCol } from '../../UI/Grid';\nimport { Heading } from '../../LANDR/Heading/';\nimport { PrismicTitleFieldType, PrismicRichTextFieldType } from '../types';\nimport './LogoList.scss';\n\ntype LogoListProps = {\n slice: {\n slice_type: 'logo_list';\n primary: {\n logo_list_title: PrismicTitleFieldType;\n logo_list_more_text: PrismicRichTextFieldType;\n };\n items: Array<{\n logo_list_image: {\n url: string | null;\n dimensions: {\n width: number;\n height: number;\n } | null;\n };\n logo_list_image_alt: PrismicRichTextFieldType;\n }>;\n };\n};\n\nclass LogoList extends React.Component\n \n \n {primary.hero_cta_link &&\n primary.hero_cta_link.url && (\n \n \n {primary.hero_cta_label}\n \n \n )}\n \n \n {primary.hero_cta_link_secondary &&\n primary.hero_cta_link_secondary.url && (\n \n
\n \n \n \n {primary.hero_cta_label_secondary}\n \n \n
\n )}\n \n \n {primary.hero_show_arrow === 'Yes' && (\n \n {/* TODO: Use Gatsby Image */}\n {logo.logo_list_image.dimensions && (\n
\n \n \n {item.press_list_content.html}\n \n {/*TODO Remove this once we have actual icons*/}\n
\n \n ))}\n \n {item.press_list_image.url && (\n
\n \n {item.press_list_title}\n
\n \n \n {item.text_grid_description.html}\n \n
\n \n );\n};\n\nconst TextGrid = ({ slice }: TextGridProps) => {\n const nbrCol = slice.primary.text_grid_number_of_columns;\n const gridTitle = slice.primary.grid_title && slice.primary.grid_title.raw;\n const colSize = String(getColSize(nbrCol, gridTitle));\n return (\n \n {item.text_grid_logo.dimensions && (\n {item.text_grid_title.html} \n
\n \n ![]()
\n
\n );\n\nexport default FullScreen;\n","import { colSize_t, offsetSize_t, tabletColSize_t } from '../../UI/Grid';\nimport {\n PrismicTitleFieldType,\n PrismicRichTextFieldType,\n FluidGatsbyImageFieldType,\n PrismicLinkFieldType,\n SliceContext,\n} from '../types';\n\nexport enum Positions {\n Left = 'Left',\n Right = 'Right',\n Center = 'Center',\n}\n\nexport type PositionsStyles = {\n flexDirection: string;\n leftColSize: colSize_t;\n leftColOffset: offsetSize_t;\n rightColSize: colSize_t;\n rightColOffset: offsetSize_t;\n r_tabletColSize: tabletColSize_t;\n};\n\nexport type FeatureProps = {\n slice: {\n slice_type: string;\n primary: {\n feature_title: PrismicTitleFieldType;\n feature_position: Positions;\n feature_description: PrismicRichTextFieldType;\n feature_cta_label: PrismicTitleFieldType;\n feature_cta_link: PrismicLinkFieldType;\n feature_image: FluidGatsbyImageFieldType;\n };\n };\n sliceContext: SliceContext;\n};\n","import * as React from 'react';\nimport { Container } from '../../UI/Container/Container';\nimport { VisualImageType } from './types';\nimport { Grid, GridRow, GridCol } from '../../UI/Grid';\n\nconst Boxed = ({ images }: { images: VisualImageType[] }) =>\n images[0].visual_image.url &&\n images[0].visual_image_atl.text && (\n \n {quote.quotes_text.html} \n
\n);\n\nconst Quotes = ({ slice }: QuotesProps) => {\n const { items } = slice;\n return (\n \n {get(['quotes_image', 'localFile', 'childImageSharp', 'sizes'], quote) && (\n
\n \n {quote.quotes_author}\n {quote.quotes_description}\n
\n \n
\n
\n
\n \n \n );\n }\n}\n\nexport { PlayButton };\n","import * as React from 'react';\nimport { classNames } from 'react-extras';\n\ntype WistiaVideoProps = {\n videoId: string;\n className?: string;\n autoplay?: boolean;\n};\n\nclass WistiaVideo extends React.Component\n {!isPlaying && }\n {isPlaying && }\n
\n \n \n \n \n \n \n \n \n \n ![{''}]()
\n {this.state.displayVideo && (\n \n (this.videoContainer = ref)}\n >\n (this.wistiaVideoNode = ref)}\n >\n (this.wistiaVideo = ref)}\n videoId={wistiaVideoId}\n autoplay={true}\n />\n
\n \n \n )}\n \n )\n );\n }\n}\n\nexport { QuotesVideo, QuotesVideoProps };\n","import * as React from 'react';\nimport { PrismicTitleFieldType, PrismicLinkFieldType, SliceContext } from '../types';\nimport Arrow from '../../LANDR/icons/Arrow';\nimport './Feature.scss';\nimport { PrismicLink } from '../../PrismicLink';\n\nexport type FeatureCTAProps = {\n ctaLabel: PrismicTitleFieldType;\n ctaLink: PrismicLinkFieldType;\n sliceContext: SliceContext;\n};\n\nconst FeatureCTA = ({ ctaLabel, ctaLink, sliceContext }: FeatureCTAProps) => {\n if (!ctaLink || !ctaLabel || !ctaLabel.raw) {\n return null;\n }\n\n return (\n {quoteText}
\n\n {authorName}\n {authorRole}\n
\n\n (this.playButton = ref)}\n />\n
\n {playButtonText}
\n\n
\n \n {/*TODO: Make this a key text field in Prismic instead of rich text*/}\n {ctaLabel.raw[0].text}\n \n
\n {get(\n ['mastering_demos_image', 'localFile', 'childImageSharp', 'sizes'],\n style\n ) &&\n get(['mastering_demos_image', 'alt'], style) && (\n
\n \n );\n }\n}\n\nexport { StyleImage };\n","import * as React from 'react';\nimport { classNames } from 'react-extras';\nimport { Versions } from './types';\n\nconst BtnVersion = ({\n changeVersionToOriginal,\n changeVersionToMastered,\n selectedVersion,\n masteredButtonCopy,\n originalButtonCopy,\n SelectedBackgroundBtn,\n BtnOriginal,\n BtnMastered,\n}: {\n changeVersionToOriginal: any;\n changeVersionToMastered: any;\n selectedVersion: Versions;\n masteredButtonCopy: string;\n originalButtonCopy: string;\n SelectedBackgroundBtn: any;\n BtnOriginal: any;\n BtnMastered: any;\n}) => (\n \n \n \n {originalButtonCopy}\n \n \n \n \n {masteredButtonCopy}\n \n \n \n
\n);\n\nexport { BtnVersion };\n","import * as React from 'react';\nimport { Item } from './types';\nimport { PrismicHTMLParser } from '../../PrismicHTMLParser/PrismicHTMLParser';\nimport ArrowBig from '../../LANDR/icons/ArrowBig';\n\nconst Style = ({\n style,\n setSelectedStyle,\n isSelectedStyle,\n}: {\n style: Item;\n setSelectedStyle: any;\n isSelectedStyle: boolean;\n}) => (\n \n \n {style.mastering_demos_track_title.html}\n \n
\n \n);\n\nexport { Style };\n","import * as React from 'react';\nimport './MasteringDemos.scss';\nimport {\n ABPlayersSources,\n Item,\n MasteringDemosProps,\n MasteringDemosState,\n Versions,\n} from './types';\nimport { Heading } from '../../LANDR/Heading';\nimport { ABPlayers } from './ABPlayers/ABPlayers';\nimport { StyleImage } from './StyleImage';\nimport { BtnVersion } from './BtnVersion';\nimport { Style } from './Style';\nimport { PlayButton } from 'components/UI/PlayButton';\nimport { componentDidMountAnimation, moveToggle, backgroundResize } from './Animations';\nimport { Grid, GridRow, GridCol } from '../../UI/Grid';\n\nconst createABPlayersSources = (items: Item[]): ABPlayersSources[] =>\n items.reduce(\n (accumulator, style) => [\n ...accumulator,\n {\n [Versions.original]: style.mastering_demos_original.url,\n [Versions.mastered]: style.mastering_demos_mastered.url,\n },\n ],\n []\n );\n\nclass MasteringDemos extends React.PureComponent\n \n \n \n \n {raw[0].text}\n \n {styles.map((style, i) => (\n \n this.switchPlayerState()}\n className=\"MasteringDemos-playButton\"\n />\n \n \n \n this.setSelectedVersion(Versions.original)\n }\n changeVersionToMastered={() =>\n this.setSelectedVersion(Versions.mastered)\n }\n selectedVersion={this.state.selectedVersion}\n masteredButtonCopy={masteredButtonCopy}\n originalButtonCopy={originalButtonCopy}\n SelectedBackgroundBtn={this.SelectedBackgroundBtn}\n BtnOriginal={this.BtnOriginal}\n BtnMastered={this.BtnMastered}\n />\n \n \n \n \n {styles.map((style, i) => (\n
\n );\n }\n}\n\nexport { MasteringDemos };\n","import * as React from 'react';\nimport AnimateHeight from 'react-animate-height';\nimport { Heading } from 'components/LANDR/Heading';\nimport { classNames } from 'react-extras';\nimport './Faq.scss';\nimport { Container } from 'components';\nimport { PrismicHTMLParser } from 'components/PrismicHTMLParser/PrismicHTMLParser';\nimport { Grid, GridRow, GridCol } from '../../UI/Grid';\nimport {\n BooleanOptionType,\n PrismicRichTextFieldType,\n PrismicTitleFieldType,\n ThemeOptionType,\n} from '../types';\n\ntype Item = {\n faq_question: PrismicRichTextFieldType;\n faq_answer: PrismicRichTextFieldType;\n};\n\ntype FaqProps = {\n slice: {\n slice_type: string;\n primary: {\n faq_title: PrismicTitleFieldType;\n faq_note: PrismicRichTextFieldType;\n faq_theme: ThemeOptionType;\n faq_multiple_open_items: BooleanOptionType;\n };\n items: Item[];\n };\n};\n\ntype FaqState = {\n openItems: string[];\n};\n\nconst AccordionSection = (section: {\n isOpen: boolean;\n onClick: (event: any) => void;\n theme: string;\n label: string;\n item: Item;\n}) => {\n const { faq_question: question, faq_answer: answer } = section.item;\n return (\n \n this.setSelectedStyle(i)}\n isSelectedStyle={i === this.state.selectedStyle}\n />\n
\n ))}\n \n \n {title.raw && (\n \n \n \n \n {title.raw[0].text}\n \n {this.renderItems()}\n {note && (\n \n {note.html}\n \n )}\n \n \n \n )}\n \n
\n );\n }\n}\n\nexport { Faq, FaqProps };\n","/* tslint:disable */\nimport * as React from 'react';\n// TODO: Make an icon system and move this to it!\n\nconst Arrow = ({ className = '' }) => (\n \n \n {this.props.slice.primary.blog_link_text.text}\n
\n );\n } else {\n return null;\n }\n };\n\n renderBlogPosts = () => {\n const post = (item: BlogType, index: number) =>\n item.blog_post_link &&\n item.blog_post_image.url &&\n item.blog_post_image.localFile &&\n item.blog_post_date &&\n item.blog_post_title.raw &&\n item.blog_post_title.raw[0].text &&\n item.blog_post_description.html && (\n \n {item.blog_post_category.text && (\n \n {item.blog_post_category.text}\n \n )}\n {item.blog_post_date && (\n \n )}\n {item.blog_post_title.raw &&\n item.blog_post_title.raw[0].text && (\n \n {item.blog_post_title.raw[0].text}\n \n )}\n {item.blog_post_description.html && (\n \n {item.blog_post_description.html}\n \n )}\n
\n \n );\n\n const posts = (view: 'mobile' | 'desktop') => {\n return this.props.slice.items.map((item, index) => {\n if (view === 'desktop') {\n return (\n {posts('desktop')}
\n \n );\n }\n };\n\n render() {\n return (\n \n \n \n \n \n {this.renderBlogTitle()}\n \n \n {this.renderBlogLink()}\n \n \n \n {this.renderBlogPosts()}\n \n \n \n
\n );\n }\n}\n\nexport { Blog, BlogProps };\n","import { pick } from './fp';\n\nimport queryString from 'query-string';\n\ntype QueryParams = { [key: string]: string };\n\nconst REGISTRATION_FORM_PARAMS = [\n 'locale',\n 'homePage',\n 'callToActionChoiceFacebook',\n 'callToActionChoiceEmail',\n 'callToActionEmailSubmit',\n 'couponCode',\n 'referralCode',\n 'utm_source',\n 'utm_campaign',\n 'utm_medium',\n 'utm_content',\n 'utm_term',\n 'token',\n];\n\n/**\n * Returns the registration form iframe url with query params\n * @param lang language to display the form\n * @param params additional params to pass to registration form\n * @param route Registration form page to display (defaults to /)\n */\nexport function getRegistrationFormUrl(\n lang: string,\n params: QueryParams = {},\n route?: string\n): string {\n route = route ? `#!${route}` : '';\n\n params = {\n locale: lang,\n mode: 'loginAndSignup',\n theme: 'dark',\n ...pick(params, REGISTRATION_FORM_PARAMS),\n };\n\n const result = `${\n process.env.GATSBY_LANDR_CDN_URL\n }/apps/RegistrationForm.v3/index.html${route}?${queryString.stringify(\n params\n )}`;\n\n return result;\n}\n","export enum PlanFrequencyEnum {\n Monthly = 'Monthly',\n Yearly = 'Yearly',\n}\n","import * as React from 'react';\nimport './ResetPassword.scss';\nimport { LrLogo, Container } from '../..';\nimport { PrismicHTMLParser } from '../..';\nimport { getRegistrationFormUrl } from '../../../helpers/registrationForm';\nimport queryString from 'query-string';\n\ntype ResetPasswordProps = {\n location: Location;\n pageContext: {\n lang: string;\n };\n slice: {\n slice_type: 'reset_password';\n primary: {\n reset_password_title: { html: string };\n reset_password_content: { html: string };\n };\n };\n};\n\nclass ResetPassword extends React.Component\n {msg.html} \n
\n ) : null;\nclass Signup extends React.Component\n \n {plan.pricing_description.html}\n \n\n
\n );\n }\n}\n","import { Hero } from './Hero';\nimport { LogoList } from './LogoList';\nimport { CallToAction } from './CallToAction';\nimport { PressList } from './PressList';\nimport { TextGrid } from './TextGrid';\nimport { TextBlock } from './TextBlock';\nimport { Visual } from './Visual';\nimport { Quotes } from './Quotes';\nimport { QuotesVideo } from './QuotesVideo';\nimport { FeaturedArtists } from './FeaturedArtists';\nimport { Feature } from './Feature';\nimport { MasteringDemos } from './MasteringDemos';\nimport { Faq } from './Faq';\nimport { VideoPlayerWistia } from './VideoPlayerWistia';\nimport { Blog } from './Blog';\nimport { ResetPassword } from './ResetPassword';\nimport { SignupOrRedirectToApp } from './Signup';\nimport { Pricing } from './Pricing';\n\nexport enum SupportedPrismicSlicesEnum {\n blog = 'blog',\n cta = 'cta',\n faq = 'faq',\n feature = 'feature',\n featured_artists = 'featured_artists',\n hero = 'hero',\n logoList = 'logo_list',\n mastering_demos = 'mastering_demos',\n pressList = 'press_list',\n pricing = 'pricing',\n quotes = 'quotes',\n quotes_video = 'quotes_-_video',\n reset_password = 'reset_password',\n signup = 'signup',\n textBlock = 'text_block',\n text_grid = 'text_grid',\n videoplayer_wistia = 'videoplayer_wistia',\n visual = 'visual',\n}\n\n// TODO: find a good way to use id in supportedPrismicSlices\ntype SlicesTypesMapping = { [index: string]: any };\n\nexport const slicesTypesMapping: SlicesTypesMapping = {\n [SupportedPrismicSlicesEnum.blog]: Blog,\n [SupportedPrismicSlicesEnum.cta]: CallToAction,\n [SupportedPrismicSlicesEnum.faq]: Faq,\n [SupportedPrismicSlicesEnum.feature]: Feature,\n [SupportedPrismicSlicesEnum.feature]: Feature,\n [SupportedPrismicSlicesEnum.featured_artists]: FeaturedArtists,\n [SupportedPrismicSlicesEnum.hero]: Hero,\n [SupportedPrismicSlicesEnum.logoList]: LogoList,\n [SupportedPrismicSlicesEnum.mastering_demos]: MasteringDemos,\n [SupportedPrismicSlicesEnum.pressList]: PressList,\n [SupportedPrismicSlicesEnum.pricing]: Pricing,\n [SupportedPrismicSlicesEnum.quotes]: Quotes,\n [SupportedPrismicSlicesEnum.quotes_video]: QuotesVideo,\n [SupportedPrismicSlicesEnum.reset_password]: ResetPassword,\n [SupportedPrismicSlicesEnum.signup]: SignupOrRedirectToApp,\n [SupportedPrismicSlicesEnum.textBlock]: TextBlock,\n [SupportedPrismicSlicesEnum.text_grid]: TextGrid,\n [SupportedPrismicSlicesEnum.text_grid]: TextGrid,\n [SupportedPrismicSlicesEnum.videoplayer_wistia]: VideoPlayerWistia,\n [SupportedPrismicSlicesEnum.visual]: Visual,\n};\n","import * as React from 'react';\nimport '../Pricing.scss';\nimport { PricingPlan, PricingPlanDocument } from './PricingPlan';\nimport { PlanFrequencyEnum } from '../../../../enum/frequency';\nimport { CommonPricingTranslations } from '../types';\nimport { Grid, GridCol, GridRow } from '../../../UI/Grid';\nimport { SliceContext } from '../../types';\n\nexport type PricingTabDocument = {\n uid: string;\n\n data: {\n name: string;\n plans: Array<{\n plan: {\n document: PricingPlanDocument[];\n };\n }>;\n };\n};\n\nexport type PricingTabProps = {\n path: string;\n tab: PricingTabDocument;\n frequency: PlanFrequencyEnum;\n currency: string;\n commonTranslations: CommonPricingTranslations;\n sliceContext: SliceContext;\n};\n\nclass PricingTab extends React.Component{plan.name}
\n\n \n \n {monthlyPrice.currencySymbol}\n \n {monthlyAmount}\n \n {commonTranslations.per_month}\n \n
\n\n \n {!showYearly && commonTranslations.yearly_upsell}\n {showYearly && (\n <>\n {yearlyPrice.currencySymbol}\n {yearlyPrice.amount}\n \n {commonTranslations.billed_yearly}\n \n )}\n {yearlyPrice.yearlyDiscountPercent && (\n \n {commonTranslations.save} {yearlyPrice.yearlyDiscountPercent * 100}%\n \n )}\n
\n \n \n \n {plan.pricing_cta}\n \n \n
\n {plan.products.length > 0 && (\n - \n {plan.products.map((item, index) => (\n
\n {tabs.map((item, index) => (\n \n \n \n \n {item.tab.document[0].data.name}\n \n \n \n \n ))}\n
\n );\n\n const frequencyToggle = (\n \n
\n );\n\n return (\n \n \n \n \n {tabToggle}\n {frequencyToggle}\n \n \n \n\n \n \n
\n );\n }\n}\n","import * as React from 'react';\nimport './Pricing.scss';\nimport { Container } from '../../';\nimport { PricingTable, PricingTableDocument } from './PricingTable/PricingTable';\nimport { Heading } from '../../LANDR/Heading';\nimport { Grid, GridCol, GridRow } from '../../UI/Grid';\nimport { Router } from '@reach/router';\nimport { getTwoLetterLanguageCode } from '../../../helpers';\nimport { SliceContext } from '../types';\n\nexport type PricingSliceProps = {\n pageContext: {\n id: string;\n lang: string;\n type: string;\n uid: string;\n };\n sliceContext: SliceContext;\n slice: {\n slice_type: 'pricing';\n primary: {\n pricing_table: {\n document: PricingTableDocument[];\n };\n pricing_title: string;\n };\n };\n};\n\nclass Pricing extends React.Component\n \n \n \n {(primary.call_to_action_title.raw ||\n primary.call_to_action_description.html) && (\n \n \n {primary.call_to_action_label}\n \n \n )}\n \n \n \n {primary.call_to_action_background_image.dimensions && (\n
\n );\n};\n\nexport { CallToAction, CallToActionProps };\n","import * as React from 'react';\nimport { Container, PrismicHTMLParser } from '../../';\nimport { Grid, GridRow, GridCol } from '../../UI/Grid';\nimport './TextBlock.scss';\n\ntype TextBlockProps = {\n slice: {\n slice_type: 'text_block';\n primary: {\n text_block_content: {\n html: string | null;\n };\n };\n };\n};\n\nconst TextBlock = ({ slice }: TextBlockProps) => (\n \n {primary.call_to_action_title.raw && (\n \n {primary.call_to_action_title.raw[0].text}\n \n )}\n {primary.call_to_action_description.html && (\n \n {primary.call_to_action_description.html}\n \n )}\n
\n )}\n {primary.call_to_action_link && (\n