Cleanup Margins (#95)

# Description

Standardize and cleanup margins

- Closes #78

src/components/Sections/DeveloperStepsMobile.svelte

@@ -10,7 +10,7 @@
   const sectionParagraphClasses = 'body mt-f12 leading-[20px]';
   const stepTitleClasses = 'title-h3 text-primary';
   const circleWidth = '60';
-  const sectionClasses = 'flex flex-col';
+  const sectionClasses = 'mx-auto flex flex-col max-w-[550px] ';
   const stepClasses = 'py-[4px] flex flex-col';
 </script>
 

src/components/Sections/Developers.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <!-- Graphic and Header -->
-<SectionWrapper id="developers" class="pt-[30px] md:pt-[38px] lg:pt-[34px]">
+<SectionWrapper id="developers" class="pb-f32 pt-[30px] md:pb-f56 md:pt-[38px] lg:pt-[34px]">
   <section class="mx-auto flex max-w-screen-xl flex-col lg:flex-row">
     <DeveloperAnimation class="mx-auto max-h-[260px] md:max-h-[300px] md:max-w-[800px] lg:max-h-none" />
     <div class="freq-container-padding lg:mt-[36px]">
@@ -23,16 +23,16 @@
       </SlideIn>
     </div>
   </section>
-  <div class="freq-container mt-[22px]">
+  <div class="freq-container mb-f24 mt-[22px] md:mb-f56">
     <DeveloperStepsMobile />
     <DeveloperStepsTablet />
     <DeveloperSteps />
   </div>
-  <section class="freq-container-padding my-f56 flex justify-center">
+  <section class="freq-container-padding flex justify-center">
     <Button href="{base}/docs" size="lg" class="h6 max-w-[90vw] p-f16 lg:hidden">
       {DeveloperStepsText.button.title}
     </Button>
-    <Button href="{base}/docs" size="lg" class="mt-[56px] hidden lg:block">
+    <Button href="{base}/docs" size="lg" class="hidden lg:block">
       {DeveloperStepsText.button.text_html}
     </Button>
   </section>

src/components/Sections/Ecosystem.svelte

@@ -13,32 +13,35 @@
   <div class="w-full overflow-hidden">
     <div class="h-[36px] bg-white lg:h-[61px]"></div>
     <div class="relative mb-[-36px] bg-navy lg:mb-[-61px]">
-      <img class="relative top-[-36px] z-10 max-w-none lg:top-[-61px] lg:w-full" alt="" src={WavesTwo} />
+      <div
+        class="background relative top-[-36px] z-10 h-[240px] min-w-[1000px] max-w-none bg-contain bg-top bg-repeat-x md:h-[260px] lg:top-[-61px] lg:h-[300px] lg:w-full xl:h-[360px]"
+        style="background-image: url('{WavesTwo}')"
+      ></div>
     </div>
   </div>
   <div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f120">
     <section class="freq-container flex items-center md:px-52">
-      <div class="flex w-full flex-col lg:w-2/3">
+      <div class="flex w-full flex-col gap-f24 lg:w-2/3">
         <h1 class="title-70 relative z-10 font-title text-white">
           Growing into a better <br class="hidden md:inline" />Future Together
         </h1>
-        <p class="body my-6 text-white md:pr-20">
+        <p class="body text-white md:mb-f32 md:pr-20">
           Frequency is leading a new era of social networking, empowering businesses and apps to help users unlock the
           value of their data and connections. Chosen as the core infrastructure for Project Liberty’s “People’s Bid” to
           acquire TikTok US, Frequency fosters a collaborative, decentralizing environment where communities can thrive
           around shared values, driving social impact, creativity, and growth.
         </p>
         <TikTokTag class="my-6 max-w-[300px] self-center md:self-start lg:hidden" />
-        <div class="my-6 self-center md:self-start">
-          <Button size="full" class="max-w-[400px]" href="https://thepeoplesbid.com/"
-            >Learn About the People's Bid</Button
-          >
+        <div class="self-center md:self-start">
+          <Button size="full" class="max-w-[400px]" href="https://thepeoplesbid.com/">
+            Learn About the People's Bid
+          </Button>
         </div>
       </div>
       <TikTokTag class="hidden w-full lg:flex lg:w-1/3" />
     </section>
   </div>
-  <section class="freq-container py-10">
+  <section class="freq-container py-f56">
     <h1 class="title-70 mb-6 text-center font-title text-primary">Companies in the Frequency Ecosystem</h1>
     <div class="flex w-full flex-wrap justify-around p-2 md:p-6">
       <img class={logoClasses} alt="MeWe" src={MeWeLogo} />

src/components/Sections/Mission/MissionItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 </script>
 
-<div class="flex max-w-[450px]">
+<div class="mx-auto flex max-w-[550px]">
   <!--    left column-->
   <div class="relative flex w-f48 flex-col">
     <!--        icon-->

src/components/Sections/Top/Top.svelte

@@ -9,23 +9,41 @@
 </script>
 
 <SectionWrapper class="freq-container flex flex-col pb-f64 md:flex-row md:items-center md:justify-center">
-  <div class="mb:h-[500px] relative mb-5 flex h-[300px] w-full self-stretch sm:h-[380px] md:mb-0 md:w-1/2 lg:h-[700px]">
+  <div
+    class="mb:h-[500px] relative mb-f56 flex h-[300px] w-full self-stretch sm:h-[380px] md:mb-0 md:w-1/2 lg:h-[700px]"
+  >
     <HomeAnimation />
     <div
-      class="math absolute left-[20px] top-[25%] sm:left-[24%] md:left-[23%] md:top-[calc(85px-((100vw-1300px)*0.075))] lg:top-[calc(250px-((100vw-1300px)*0.075))] xl:top-[220px]"
+      class="math absolute left-[20px] top-[25%] sm:left-[18%] md:left-[23%] md:top-[calc(85px-((100vw-1300px)*0.075))] lg:top-[calc(250px-((100vw-1300px)*0.075))] xl:top-[220px]"
     >
       <SlideIn>
         <MsaCounter />
       </SlideIn>
     </div>
   </div>
-  <div class="w-full sm:max-w-[260px] sm:pl-f32 md:w-1/2 md:max-w-[300px] md:pl-0 lg:max-w-[380px]">
+  <div class="mx-auto w-full sm:max-w-[360px] md:w-1/2 md:max-w-[300px] md:pl-0 lg:max-w-[380px]">
     <SlideIn>
-      <div class="title-70 w-full text-primary sm:text-left">Bringing</div>
-      <div class="title-70 relative w-full text-primary sm:text-right">Humanity</div>
-      <div class="w-full italic text-teal sm:text-[28px] lg:text-[32px]">to the</div>
-      <div class="title-70 w-full text-primary sm:text-left">People's</div>
-      <div class="title-70 w-full text-primary sm:text-right">Internet</div>
+      <div
+        class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-left sm:text-[55px] md:text-[55px] lg:text-[70px]"
+      >
+        Bringing
+      </div>
+      <div
+        class="relative font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-right sm:text-[55px] md:text-[55px] lg:text-[70px]"
+      >
+        Humanity
+      </div>
+      <div class="italic text-teal sm:text-[28px] lg:text-[32px]">to the</div>
+      <div
+        class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-left sm:text-[55px] md:text-[55px] lg:text-[70px]"
+      >
+        People's
+      </div>
+      <div
+        class="font-title text-[44px] leading-[1] tracking-wide text-primary sm:text-right sm:text-[55px] md:text-[55px] lg:text-[70px]"
+      >
+        Internet
+      </div>
     </SlideIn>
   </div>
 </SectionWrapper>

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
   <div class="w-full">
     {@render content()}
   </div>
-  <div class="w-full bg-navy px-[5%] lg:px-[20%]">
+  <div class="freq-container-padding w-full bg-navy">
     <Footer type="dark" class="w-full border-grayBorder vertical-lg:w-[100%]" />
   </div>
 {/snippet}

src/style/app.css

@@ -32,7 +32,7 @@
   }
 
   .title-h3 {
-    @apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px];
+    @apply font-title text-[30px] leading-[1] tracking-wider sm:text-[36px] md:text-[40px] lg:text-[44px];
   }
 
   .title-h5 {