From c747b8ce3359f184431c1ce82201de3b9816fc0b Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@projectliberty.io>
Date: Mon, 18 Nov 2024 15:53:06 -0500
Subject: [PATCH] Cleanup Margins (#95)

# Description

Standardize and cleanup margins

- Closes #78
---
 .../Sections/DeveloperStepsMobile.svelte      |  2 +-
 src/components/Sections/Developers.svelte     |  8 ++---
 src/components/Sections/Ecosystem.svelte      | 19 ++++++-----
 .../Sections/Mission/MissionItem.svelte       |  2 +-
 src/components/Sections/Top/Top.svelte        | 34 ++++++++++++++-----
 src/lib/assets/waves-two.svg                  |  2 +-
 src/routes/+layout.svelte                     |  2 +-
 src/style/app.css                             |  2 +-
 8 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/Sections/DeveloperStepsMobile.svelte b/src/components/Sections/DeveloperStepsMobile.svelte
index 51657ffa..b3db69ba 100644
--- a/src/components/Sections/DeveloperStepsMobile.svelte
+++ b/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>
 
diff --git a/src/components/Sections/Developers.svelte b/src/components/Sections/Developers.svelte
index dc163b92..aca2a6a6 100644
--- a/src/components/Sections/Developers.svelte
+++ b/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>
diff --git a/src/components/Sections/Ecosystem.svelte b/src/components/Sections/Ecosystem.svelte
index b4d0e2bf..cdf4a5a1 100644
--- a/src/components/Sections/Ecosystem.svelte
+++ b/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} />
diff --git a/src/components/Sections/Mission/MissionItem.svelte b/src/components/Sections/Mission/MissionItem.svelte
index 98cc54c6..5232c9e8 100644
--- a/src/components/Sections/Mission/MissionItem.svelte
+++ b/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-->
diff --git a/src/components/Sections/Top/Top.svelte b/src/components/Sections/Top/Top.svelte
index 3db17a97..e69c281c 100644
--- a/src/components/Sections/Top/Top.svelte
+++ b/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>
diff --git a/src/lib/assets/waves-two.svg b/src/lib/assets/waves-two.svg
index e2591bd9..935827f3 100644
--- a/src/lib/assets/waves-two.svg
+++ b/src/lib/assets/waves-two.svg
@@ -1 +1 @@
-<svg fill="none" height="284.5" viewBox="0 0 1436 284.5" width="1436" xmlns="http://www.w3.org/2000/svg"><g stroke-miterlimit="10"><path d="m0 36c11.9909 0 23.2279.57598 33.3878 1.70294 9.0112 1.00173 17.3402 2.42921 25.5256 4.3826 15.1143 3.60626 27.3565 8.48976 39.2397 13.19796 23.5149 9.3662 47.8199 19.0329 94.5629 19.0329 46.707 0 71.048-9.6667 94.563-19.0329 11.847-4.7082 24.125-9.5917 39.24-13.19796 8.185-1.95339 16.55-3.38087 25.525-4.3826 10.196-1.12696 21.433-1.70294 33.388-1.70294 14.863 0 28.757 1.82815 41.394 5.45945 11.165 3.20556 21.504 7.78855 31.628 14.02435 18.705 11.52 33.891 27.1221 48.61 42.1982 29.152 29.9019 59.273 60.831 117.109 60.831 57.872 0 87.993-30.9291 117.109-60.831 14.683-15.0761 29.869-30.6782 48.61-42.1982 10.124-6.2358 20.463-10.84383 31.628-14.02435 12.171-3.50608 25.598-5.33423 39.85-5.45945h.575.933c17.304.22539 33.532 3.88177 48.287 10.919 13.427 6.4111 25.884 15.602 38.055 28.0737 22.51 23.0399 40.819 54.219 58.48 84.3713 35.08 59.804 71.34 121.636 140.99 121.636 69.64 0 105.9-61.832 140.98-121.636 17.7-30.1523 35.97-61.3314 58.48-84.3713 12.21-12.4717 24.66-21.6626 38.06-28.0737 15.18-7.23757 31.95-10.919 49.79-10.919" stroke="#f77c47" stroke-width="2"/><path d="m1436 206.5c-11.99 0-23.23-.48-33.39-1.418-9.01-.834-17.34-2.023-25.52-3.649-15.12-3.003-27.36-7.069-39.24-10.989-23.52-7.799-47.82-15.848-94.56-15.848s-71.05 8.049-94.56 15.848c-11.85 3.92-24.13 7.986-39.24 10.989-8.19 1.626-16.55 2.815-25.53 3.649-10.19.938-21.43 1.418-33.38 1.418-14.86 0-28.76-1.522-41.4-4.546-11.16-2.669-21.499-6.485-31.623-11.677-18.704-9.592-33.89-22.584-48.609-35.137-29.15-24.898-59.271-50.65-117.105-50.65-57.871 0-87.991 25.752-117.106 50.65-14.683 12.553-29.869 25.545-48.609 35.137-10.124 5.192-20.463 9.029-31.628 11.677-12.17 2.92-25.596 4.442-39.849 4.546-.179 0-.395 0-.574 0-.323 0-.646 0-.934 0-17.303-.188-33.53-3.232-48.285-9.092-13.427-5.338-25.884-12.991-38.054-23.375-22.509-19.185-40.818-45.146-58.481-70.252-35.074-49.7962-71.333-101.281-140.979-101.281s-105.905 51.4848-140.98 101.281c-17.698 25.106-35.972 51.067-58.4808 70.252-12.206 10.384-24.6633 18.037-38.054 23.375-15.2216 6.027-31.951 9.092-49.8292 9.092" stroke="#5e69ff" stroke-width="5"/></g></svg>
\ No newline at end of file
+<svg fill="none" viewBox="0 0 1436 284.5" xmlns="http://www.w3.org/2000/svg"><g stroke-miterlimit="10"><path d="m0 36c11.9909 0 23.2279.57598 33.3878 1.70294 9.0112 1.00173 17.3402 2.42921 25.5256 4.3826 15.1143 3.60626 27.3565 8.48976 39.2397 13.19796 23.5149 9.3662 47.8199 19.0329 94.5629 19.0329 46.707 0 71.048-9.6667 94.563-19.0329 11.847-4.7082 24.125-9.5917 39.24-13.19796 8.185-1.95339 16.55-3.38087 25.525-4.3826 10.196-1.12696 21.433-1.70294 33.388-1.70294 14.863 0 28.757 1.82815 41.394 5.45945 11.165 3.20556 21.504 7.78855 31.628 14.02435 18.705 11.52 33.891 27.1221 48.61 42.1982 29.152 29.9019 59.273 60.831 117.109 60.831 57.872 0 87.993-30.9291 117.109-60.831 14.683-15.0761 29.869-30.6782 48.61-42.1982 10.124-6.2358 20.463-10.84383 31.628-14.02435 12.171-3.50608 25.598-5.33423 39.85-5.45945h.575.933c17.304.22539 33.532 3.88177 48.287 10.919 13.427 6.4111 25.884 15.602 38.055 28.0737 22.51 23.0399 40.819 54.219 58.48 84.3713 35.08 59.804 71.34 121.636 140.99 121.636 69.64 0 105.9-61.832 140.98-121.636 17.7-30.1523 35.97-61.3314 58.48-84.3713 12.21-12.4717 24.66-21.6626 38.06-28.0737 15.18-7.23757 31.95-10.919 49.79-10.919" stroke="#f77c47" stroke-width="2"/><path d="m1436 206.5c-11.99 0-23.23-.48-33.39-1.418-9.01-.834-17.34-2.023-25.52-3.649-15.12-3.003-27.36-7.069-39.24-10.989-23.52-7.799-47.82-15.848-94.56-15.848s-71.05 8.049-94.56 15.848c-11.85 3.92-24.13 7.986-39.24 10.989-8.19 1.626-16.55 2.815-25.53 3.649-10.19.938-21.43 1.418-33.38 1.418-14.86 0-28.76-1.522-41.4-4.546-11.16-2.669-21.499-6.485-31.623-11.677-18.704-9.592-33.89-22.584-48.609-35.137-29.15-24.898-59.271-50.65-117.105-50.65-57.871 0-87.991 25.752-117.106 50.65-14.683 12.553-29.869 25.545-48.609 35.137-10.124 5.192-20.463 9.029-31.628 11.677-12.17 2.92-25.596 4.442-39.849 4.546-.179 0-.395 0-.574 0-.323 0-.646 0-.934 0-17.303-.188-33.53-3.232-48.285-9.092-13.427-5.338-25.884-12.991-38.054-23.375-22.509-19.185-40.818-45.146-58.481-70.252-35.074-49.7962-71.333-101.281-140.979-101.281s-105.905 51.4848-140.98 101.281c-17.698 25.106-35.972 51.067-58.4808 70.252-12.206 10.384-24.6633 18.037-38.054 23.375-15.2216 6.027-31.951 9.092-49.8292 9.092" stroke="#5e69ff" stroke-width="5"/></g></svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6b6bc5bb..64cd22de 100644
--- a/src/routes/+layout.svelte
+++ b/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}
diff --git a/src/style/app.css b/src/style/app.css
index 1c30956d..caff124f 100644
--- a/src/style/app.css
+++ b/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 {