Improve mobile and tablet responsiveness on frontpage and contribute page

Author: Rikthepixel

src/components/pages/contribute/FeedbackSection.tsx

@@ -78,7 +78,7 @@ const FeedbackSection = () => {
           />
         </div>
         <Error className="w-full px-2 text-start" state={formState} name="text" />
-        <Button type="submit" color="secondary" loading={loading} className="px-5 py-3 text-lg md:text-xl w-fit">
+        <Button type="submit" color="secondary" loading={loading} className="px-5 py-3 text-lg w-full md:text-xl sm:w-fit">
           Submit Feedback
         </Button>
       </Form>

src/components/pages/front/Mission.tsx

@@ -7,7 +7,7 @@ export interface MissionProps extends IMission {
 
 const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
   return (
-    <li className="flex flex-col items-center flex-1 gap-4 p-8 border-2 rounded-lg border-secondary">
+    <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-lg border-secondary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 lg:border-2 xl:p-8">
       <Heading.H3 className="text-primary lg:h-[5ex] motion-safe:transition-all">
         {title}
       </Heading.H3>

src/components/pages/front/SignupSection.tsx

@@ -90,7 +90,12 @@ const SignupSection = () => {
           />
           <Error className="w-full px-2 text-start" state={formState} name="email" />
         </div>
-        <Button type="submit" loading={loading} color="secondary" className="relative px-5 py-3 text-lg md:text-xl w-fit">
+        <Button
+          className="relative px-5 py-3 text-lg w-full sm:w-fit md:text-xl"
+          type="submit"
+          color="secondary"
+          loading={loading}
+        >
           Keep me up-to-date!
         </Button>
         <p role="note">

src/pages/index.tsx

@@ -52,7 +52,7 @@ const FrontPage: Page = ({ }) => {
               Experience Git in a modern and fast way with Commit Rocket, the open-source, lightweight and cross-platform Git client.
             </p>
             <LinkButton
-              className="px-5 py-3 text-xl"
+              className="px-5 py-3 text-xl w-full sm:w-fit"
               onClick={sendCTAEvent("Learn More")}
               href="#introduction"
               color="secondary"
@@ -73,14 +73,14 @@ const FrontPage: Page = ({ }) => {
             />
           </div>
         </section>
-        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg text-center border-2 rounded-lg xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
+        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-lg xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
           <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-lg text-fill-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
             <span className="text-2xl">
               Introducing...
             </span>
-            <span className="flex flex-col items-center gap-4 p-4 text-4xl font-bold break-normal text-primary-contrast md:text-6xl md:flex-row md:w-max">
+            <span className="flex flex-col items-center gap-4 p-4 text-3xl sm:text-4xl font-bold break-normal text-primary-contrast md:text-6xl md:flex-row md:w-max">
               <img
-                className="h-[1.5em] w-[1.5em]"
+                className="w-16 h-16 md:w-[1.5em] md:h-[1.5em]"
                 alt="A Small Rocket"
                 src={LogoSmall.src}
                 width={LogoSmall.width}
@@ -123,7 +123,7 @@ const FrontPage: Page = ({ }) => {
             Our main goal with Commit Rocket is to drive innovation and provide a modern and fast alternative to existing Git clients.
             We want to improve the user experience for developers by creating an open-source and cross-platform tool that is both feature-rich and beginner-friendly.
           </p>
-          <ul className="flex flex-col flex-wrap justify-between w-full gap-12 lg:flex-row">
+          <ul className="flex flex-col flex-wrap justify-between w-full gap-16 lg:gap-4 lg:flex-row">
             {missions.map((mission, i) => (
               <Mission key={i} {...mission} />
             ))}