Update mobile styles

Author: wkirby

src/components/Cta.tsx

@@ -19,7 +19,7 @@ export const Cta: React.FC<CtaProps> = ({ title, subtitle, button }) => {
       </header>
 
       <div className={styles.cta__actions}>
-        <Button href="mailto:contact@apsis.io?subject=Apsis Project Inquiry" size="lg" EndIcon={ChevronRight}>{button}</Button>
+        <Button href="/hire" size="lg" EndIcon={ChevronRight}>{button}</Button>
       </div>
     </div>
   );

src/components/Footer.tsx

@@ -36,8 +36,8 @@ export const Footer = () => (
               </Link>
             </li>
             <li>
-              <Link className="link" href="mailto:contact@apsis.io">
-                contact@apsis.io
+              <Link className="link" href="/hire">
+                Hire us
               </Link>
             </li>
           </ul>

src/components/Hero.tsx

@@ -90,7 +90,7 @@ export const Hero = () => {
 
           <div className={styles.hero__actions}>
             <Button
-              href="mailto:contact@apsis.io?subject=Apsis Project Inquiry"
+              href="/hire"
               EndIcon={ChevronRight}
             >
               Let's get to work

src/components/SiteLayout.tsx

@@ -30,7 +30,7 @@ export const SiteLayout: React.FC<
           actions={
             !showTagline && (
               <Button
-                href="mailto:contact@apsis.io?subject=Apsis Project Inquiry"
+                href="/hire"
                 EndIcon={ChevronRight}
               >
                 Work with us

src/components/forms/ContactForm.tsx

@@ -118,6 +118,7 @@ export const ContactForm = () => {
           required
           data-lpignore="true"
           data-1p-ignore
+          autoComplete="name"
           {...register("name", {
             required: "A name is required",
           })}
@@ -131,6 +132,7 @@ export const ContactForm = () => {
           required
           data-lpignore="true"
           data-1p-ignore
+          autoComplete="organization"
           {...register("company", {
             required: "Please provide a company or project name",
           })}
@@ -143,6 +145,7 @@ export const ContactForm = () => {
           error={errors.email}
           required
           type="email"
+          autoComplete="email"
           data-lpignore="true"
           data-1p-ignore
           {...register("email", {
@@ -197,6 +200,7 @@ export const ContactForm = () => {
             className={clsx("input", errors.projectDetail && "error")}
             rows={3}
             id="project_detail"
+            autoComplete="off"
             {...register("projectDetail")}
           ></textarea>
         </FieldWrapper>

src/pages/index.tsx

@@ -120,7 +120,7 @@ export const IndexPage: NextPage<{ projects: any[]; cta: CtaProps }> = ({
 
             <footer>
               <Button
-                href="mailto:contact@apsis.io?subject=Apsis Project Inquiry"
+                href="/hire"
                 EndIcon={ChevronRight}
               >
                 Drop us a line

src/styles/_global.scss

@@ -62,6 +62,7 @@
 }
 
 .input {
+  border-radius: 0;
   padding: var(--spacing_xs) var(--spacing_sm);
   background-color: var(--section_background);
   color: var(--text_color);