Improve newsletter signup UI on download page

httptoolkit · Sep 9, 2024 · f4cce41 · f4cce41
1 parent 58a2e69
commit f4cce41
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/app/download/[slug]/page.tsx b/src/app/download/[slug]/page.tsx
@@ -87,25 +87,26 @@ export default async function DownloadPage({ params }: DownloadPageProps) {
                 </Text>
               )}
 
-              <ContentCard
+              <StyledImageWrapper>
+                <ThemedImage
+                  withBorder
+                  alt="Get started with HTTP Toolkit"
+                  darkSrc="/images/product/explore-dark.png"
+                  lightSrc="/images/product/explore-light.png"
+                  loading="eager"
+                  width={662}
+                  height={450}
+                  sizes="(max-width: 600px) 50vw, 75vw"
+                />
+              </StyledImageWrapper>
+            </StyledColumnContent>
+
+            <ContentCard
                 title="Join the mailing list now, so you don't miss new features & releases"
                 text="There's a lot of new HTTP Toolkit features coming soon, like full scripting support, gRPC & GraphQL integration, and request diffing tools. Keep yourself up to date:"
                 $isNewsletter
                 action={NEWSLETTER_URLS.download}
               />
-            </StyledColumnContent>
-            <StyledImageWrapper>
-              <ThemedImage
-                withBorder
-                alt="Get started with HTTP Toolkit"
-                darkSrc="/images/product/explore-dark.png"
-                lightSrc="/images/product/explore-light.png"
-                loading="eager"
-                width={662}
-                height={450}
-                sizes="(max-width: 600px) 50vw, 75vw"
-              />
-            </StyledImageWrapper>
           </StyledDownloadaColumns>
         </Container>
       </StyledDownloadSection>

diff --git a/src/components/modules/content-card/content-card.styles.ts b/src/components/modules/content-card/content-card.styles.ts
@@ -42,6 +42,7 @@ export const StyledContentCardForm = styled.form`
 
   @media (min-width: ${({ theme }) => theme.screens['lg']}) {
     flex-direction: row;
+    align-items: center;
   }
 
   & button {

diff --git a/src/components/modules/content-card/form/index.tsx b/src/components/modules/content-card/form/index.tsx
@@ -26,7 +26,7 @@ export const ContentCardForm = ({ action }: Pick<ContentCardProps, 'action'>) =>
           <input type="text" id="extra-info" name="first-name" tab-index="-1" autoComplete="nope" />
         </div>
         <Input id="email" placeholder="Email address" type="email" required />
-        <Button as="button" type="submit" $variant="secondary" $small>
+        <Button as="button" type="submit" $variant="primary" $small>
           Sign up
         </Button>
       </StyledContentCardForm>