Merge pull request #552 from coqui-ai/studio-to-license

Studio to license
coqui-ai · Dec 11, 2023 · 6aa9c29 · 6aa9c29
2 parents 9e038fe + 0b4d68f
commit 6aa9c29
Show file tree

Hide file tree

Showing 11 changed files with 288 additions and 34 deletions.
diff --git a/src/data/images/pricing/creator.jpg b/src/data/images/pricing/creator.jpg
diff --git a/src/data/images/pricing/enterprise.jpg b/src/data/images/pricing/enterprise.jpg
diff --git a/src/data/images/pricing/pro.jpg b/src/data/images/pricing/pro.jpg
diff --git a/src/data/videos/homepage/coqui_license_explainer.mp4 b/src/data/videos/homepage/coqui_license_explainer.mp4
diff --git a/src/data/videos/homepage/coqui_license_explainer.webm b/src/data/videos/homepage/coqui_license_explainer.webm
diff --git a/src/layouts/Home/components/Hero.tsx b/src/layouts/Home/components/Hero.tsx
@@ -7,6 +7,7 @@
 
 import { mediaQuery } from '@zendeskgarden/react-theming';
 import React from 'react';
+import { Link } from 'gatsby';
 import { css } from 'styled-components';
 import ClientSide from 'utils/ClientSide';
 import { PrimaryButton, SecondaryButton } from './Buttons';
@@ -82,11 +83,19 @@ export const Hero = () => {
           <p
             css={css`
               font-size: 18px;
-              line-height: 32.4px;
+              line-height: 9px;
             `}
           >
-            XTTS: realistic, emotive <span css="white-space: nowrap;">text-to-speech</span> through
-            generative AI.
+            <Link to="blog/tts/open_xtts">XTTS</Link>: local, on-premise, realistic, emotive{' '}
+            <span css="white-space: nowrap;">text-to-speech</span> through generative AI.
+          </p>
+          <p
+            css={css`
+              font-size: 18px;
+              line-height: 9px;
+            `}
+          >
+            Interested in a commercial license? Read the <Link to="faq">FAQ</Link>.
           </p>
           <div
             css={css`
@@ -103,6 +112,39 @@ export const Hero = () => {
                 path="https://huggingface.co/spaces/coqui/xtts"
               />
             </ClientSide>
+            <SecondaryButton text="Purchase a commercial license" path="https://t.co/F2OsCp00iI" />
+            <SecondaryButton
+              text="Install locally"
+              path="https://tts.readthedocs.io/en/latest/installation.html"
+            />
+          </div>
+        </div>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+            min-width: 350px;
+          `}
+        >
+          <div
+            css={css`
+              width: 100%;
+              height: 100%;
+            `}
+          >
+            <div
+              css={css`
+                position: relative;
+                overflow: hidden;
+                width: 100%;
+                padding-top: 56.25%;
+              `}
+            >
+              <VideoFrame />
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/layouts/Home/components/VideoFrame.tsx b/src/layouts/Home/components/VideoFrame.tsx
@@ -10,8 +10,8 @@ import { ReactComponent as MutedIcon } from '@zendeskgarden/svg-icons/src/16/vol
 import { ReactComponent as SpeakerIcon } from '@zendeskgarden/svg-icons/src/16/volume-unmuted-stroke.svg';
 import React, { ReactNode, useState } from 'react';
 import { css } from 'styled-components';
-import CoquiExplainerMp4 from '../../../data/videos/homepage/coqui_explainer.mp4';
-import CoquiExplainerWebM from '../../../data/videos/homepage/coqui_explainer.webm';
+import CoquiExplainerMp4 from '../../../data/videos/homepage/coqui_license_explainer.mp4';
+import CoquiExplainerWebM from '../../../data/videos/homepage/coqui_license_explainer.webm';
 import { StyledButton } from './StyledButtons';
 
 const VolumeIcon = ({ muted, children, ...rest }: { muted: boolean; children: ReactNode }) => {

diff --git a/src/layouts/Home/components/Voices.tsx b/src/layouts/Home/components/Voices.tsx
@@ -16,7 +16,6 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { PlayCircle, StopCircle } from 'iconsax-react';
 import React, { useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { TryNowButton } from './Buttons';
 import { headerStyling } from './Styles';
 
 const VoiceCard = styled.div`
@@ -222,10 +221,9 @@ export const Voices = () => {
             text-align: center;
           `}
         >
-          Clone your voice in seconds or choose from our available AI voices, with more being added
-          with every release
+          Clone your voice using seconds of audio, fine-tune with minutes, or choose from our
+          available AI voices.
         </LG>
-        <TryNowButton css="margin-top: 20px; overflow: visible;" />
         <div
           css={css`
             display: flex;
@@ -301,9 +299,9 @@ export const Voices = () => {
               `}
             />
             <p css="margin-top: 16px; text-align: center; margin-bottom: 23px;">
-              To get more voices, you can instantly clone any voice with just 3 seconds of audio
+              To get more voices, you can instantly clone any voice with seconds of audio or
+              fine-tune with minutes.
             </p>
-            <TryNowButton />
           </AddVoiceCard>
         </div>
       </div>

diff --git a/src/layouts/Home/index.tsx b/src/layouts/Home/index.tsx
@@ -6,19 +6,14 @@
  */
 
 import React from 'react';
-import { Features } from './components/Features';
-import { GetStartedCtA } from './components/GetStartedCta';
 import { Hero } from './components/Hero';
 import { Voices } from './components/Voices';
-import { WhyCoqui } from './components/WhyCoqui';
 
 export const HomeLayout = () => {
   return (
     <>
       <Hero />
       <Voices />
-      <Features />
-      <GetStartedCtA />
     </>
   );
 };

diff --git a/src/layouts/Root/components/Header.tsx b/src/layouts/Root/components/Header.tsx
@@ -13,7 +13,6 @@ import { ReactComponent as OverflowVerticalStroke } from '@zendeskgarden/svg-ico
 import { ReactComponent as CloseStroke } from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 import { graphql, Link, useStaticQuery } from 'gatsby';
 import Img from 'gatsby-image';
-import { TryNowButton } from 'layouts/Home/components/Buttons';
 import queryString from 'query-string';
 import React, { HTMLAttributes, useEffect, useState } from 'react';
 import styled, { css, DefaultTheme } from 'styled-components';
@@ -198,6 +197,9 @@ const MobileNav = ({
         padding: ${p => p.theme.space.lg} ${p => p.theme.space.xxl};
       `}
     >
+      <StyledMobileNavItem>
+        <StyledMobileNavLink to="/faq">FAQ</StyledMobileNavLink>
+      </StyledMobileNavItem>
       <Dropdown
         onSelect={item => {
           window.location.href = item;
@@ -220,9 +222,6 @@ const MobileNav = ({
           <Item value="/dubbing">Dubbing</Item>
         </Menu>
       </Dropdown>
-      <StyledMobileNavItem>
-        <TryNowButton />
-      </StyledMobileNavItem>
     </nav>
   );
 };
@@ -255,6 +254,7 @@ const Header = ({}) => {
             }
           `}
         >
+          <a href="/faq">FAQ</a>
           <Dropdown
             onSelect={item => {
               window.location.href = item;
@@ -279,20 +279,6 @@ const Header = ({}) => {
             </Menu>
           </Dropdown>
         </nav>
-        <div
-          css={css`
-            display: flex;
-            justify-content: end;
-            align-items: center;
-            gap: 30px;
-
-            ${p => mediaQuery('down', 'sm', p.theme)} {
-              display: none;
-            }
-          `}
-        >
-          <TryNowButton />
-        </div>
         <MobileNavButton
           icon={<OverflowVerticalStroke />}
           label="Global navigation"