Merge pull request #554 from coqui-ai/fix-responsiveness

Fixed responsiveness of homepage
coqui-ai · Dec 13, 2023 · c100d66 · c100d66
2 parents 36ad66a + 05785ae
commit c100d66
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/src/layouts/Home/components/Buttons.tsx b/src/layouts/Home/components/Buttons.tsx
@@ -11,6 +11,7 @@ import React, { FC } from 'react';
 import { css } from 'styled-components';
 import ClientSide from 'utils/ClientSide';
 import { StyledNavigationLink } from './StyledNavigationLink';
+import { mediaQuery } from '@zendeskgarden/react-theming';
 
 export const TryNowButton = ({ ...rest }) => {
   return (
@@ -56,6 +57,9 @@ export const PrimaryButton: FC<ButtonType> = ({ text, path, fullWidth, iconSrc }
             color: white;
             opacity: 0.7;
           }
+          ${p => mediaQuery('down', 'sm', p.theme)} {
+            font-size: 14px;
+          }
         `}
       >
         {text}{' '}
@@ -92,6 +96,9 @@ export const SecondaryButton: FC<ButtonType> = ({ text, textColor, path, fullWid
           font-weight: 400;
           padding: 18px 24px;
           width: ${fullWidth ? '100%' : ''};
+          ${p => mediaQuery('down', 'sm', p.theme)} {
+            font-size: 14px;
+          }
         `}
       >
         {text}
@@ -117,6 +124,9 @@ export const TertiaryButton: FC<ButtonType> = ({ text, path, fullWidth }) => {
           font-weight: 400;
           padding: 18px 24px;
           width: ${fullWidth ? '100%' : ''};
+          ${p => mediaQuery('down', 'sm', p.theme)} {
+            font-size: 14px;
+          }
         `}
       >
         {text}

diff --git a/src/layouts/Home/components/Hero.tsx b/src/layouts/Home/components/Hero.tsx
@@ -22,12 +22,10 @@ export const Hero = () => {
         position: relative;
         background: linear-gradient(207.81deg, #f5faff 54.98%, #fefffe 92.7%);
         padding: 5rem 10rem;
-        height: calc(100vh - 77px);
         ${p => mediaQuery('down', 'md', p.theme)} {
           padding: 5rem 4rem;
         }
         ${p => mediaQuery('down', 'sm', p.theme)} {
-          height: calc(100vh - 60px);
         }
       `}
     >
@@ -63,6 +61,10 @@ export const Hero = () => {
                 font-size: 40px;
                 line-height: 48px;
               }
+              ${p => mediaQuery('down', 'xs', p.theme)} {
+                font-size: 20px;
+                line-height: 28px;
+              }
               display: flex;
               flex-direction: column;
             `}
@@ -83,34 +85,42 @@ export const Hero = () => {
           <p
             css={css`
               font-size: 18px;
-              line-height: 9px;
+              ${p => mediaQuery('down', 'sm', p.theme)} {
+                font-size: 14px;
+              }
             `}
           >
             <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.
+            <span css="white-space: nowrap;">TTS through generative AI.</span>
           </p>
           <p
             css={css`
               font-size: 18px;
-              line-height: 9px;
+              ${p => mediaQuery('down', 'sm', p.theme)} {
+                font-size: 14px;
+              }
             `}
           >
             Interested in a commercial license?
           </p>
           <p
             css={css`
               font-size: 18px;
-              line-height: 9px;
               font-weight: bold;
               font-style: italic;
+              ${p => mediaQuery('down', 'sm', p.theme)} {
+                font-size: 14px;
+              }
             `}
           >
             Pricing starts at $1 per day.
           </p>
           <p
             css={css`
               font-size: 18px;
-              line-height: 9px;
+              ${p => mediaQuery('down', 'sm', p.theme)} {
+                font-size: 14px;
+              }
             `}
           >
             Read the <Link to="faq">FAQ</Link>.
@@ -119,9 +129,14 @@ export const Hero = () => {
             css={css`
               display: flex;
               flex-direction: row;
-              gap: 16px;
               align-items: center;
+              max-width: 925px;
+              gap: 20px;
               padding-top: 20px;
+              ${p => mediaQuery('down', 'xs', p.theme)} {
+                flex-wrap: wrap;
+                justify-content: center;
+              }
             `}
           >
             <ClientSide>
@@ -151,13 +166,18 @@ export const Hero = () => {
             css={css`
               width: 100%;
               height: 100%;
+              ${p => mediaQuery('down', 'md', p.theme)} {
+                width: 90%;
+              }
+              ${p => mediaQuery('down', 'sm', p.theme)} {
+                width: 80%;
+              }
             `}
           >
             <div
               css={css`
                 position: relative;
                 overflow: hidden;
-                width: 100%;
                 padding-top: 56.25%;
               `}
             >