fix: mobile spacings

Author: michalsek

packages/audiodocs/src/components/Layout/Spacer/index.tsx

@@ -2,14 +2,15 @@ import React, { memo } from "react";
 
 interface SpacerProps {
   size?: number | string;
+  className?: string;
 }
 
-const H: React.FC<SpacerProps> = memo(({ size }) => (
-  <div style={size ? { width: size  } : { flex: 1 }} />
+const H: React.FC<SpacerProps> = memo(({ size, className }) => (
+  <div style={size ? { width: size  } : { flex: 1 }} className={className} />
 ));
 
-const V: React.FC<SpacerProps> = memo(({ size }) => (
-  <div style={size ? { height: size  } : { flex: 1 }} />
+const V: React.FC<SpacerProps> = memo(({ size, className }) => (
+  <div style={size ? { height: size  } : { flex: 1 }} className={className} />
 ))
 
 const Spacer = {

packages/audiodocs/src/pages/index.tsx

@@ -30,21 +30,24 @@ function Home() {
       <div className={styles.container}>
         <Hero />
       </div>
-      <Spacer.V size="120px" />
+      <Spacer.V size="120px" className={styles.hideOnMobile} />
       <div className={styles.container}>
         <LandingWidget />
       </div>
-      <Spacer.V size="120px" />
+      <Spacer.V size="120px" className={styles.hideOnMobile}  />
+      <Spacer.V size="56px" className={styles.visibleOnMobile}  />
       <div className={styles.container}>
         <LandingFeatures />
         <LandingBlog />
         {/* <LandingExamples /> */}
       </div>
-      <Spacer.V size="10rem" />
+      <Spacer.V size="10rem" className={styles.hideOnMobile}  />
+      <Spacer.V size="6rem" className={styles.visibleOnMobile}  />
       <div className={styles.container}>
         <Testimonials />
       </div>
-      <Spacer.V size="12rem" />
+      <Spacer.V size="12rem" className={styles.hideOnMobile}  />
+      <Spacer.V size="6rem" className={styles.visibleOnMobile}  />
       <div className={styles.container}>
         <HireUsSection
           href={

packages/audiodocs/src/pages/styles.module.css

@@ -4,13 +4,16 @@
   display: flex;
   flex-direction: column;
   gap: 3rem;
-  /* position: relative; */
 }
 
 .waveContainer {
   position: relative;
 }
 
+.visibleOnMobile {
+  display: none;
+}
+
 @media (max-width: 1440px) {
   .container {
     width: 75%;
@@ -23,3 +26,13 @@
     gap: 3.5rem;
   }
 }
+
+@media (max-width: 768px) {
+  .hideOnMobile {
+    display: none;
+  }
+
+  .visibleOnMobile {
+    display: block;
+  }
+}