64 final formatting fixes (#66)

closes #64

---------

Co-authored-by: Claire Olmstead <[email protected]>

Author: claireclark1

src/components/JoinSocials.svelte

@@ -4,7 +4,7 @@
   import IconBtn from './IconBtn.svelte';
 </script>
 
-<div class="w-full max-w-[425px] pb-[80px] sm:pt-[80px] lg:pt-0">
+<div class="w-full max-w-[425px] pb-[80px] sm:pt-[80px] lg:pl-[140px] lg:pt-6">
   <h3 class="text-base font-semibold">Join the Digital Revolution</h3>
   <p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
   <div class="mt-4 flex gap-4" aria-label="Social Links">

src/components/SectionParagraph.svelte

@@ -2,6 +2,6 @@
   export let classes = '';
 </script>
 
-<p class={`body sm:max-w-[800px] lg:max-w-[450px] ${classes}`}>
+<p class={`body sm:max-w-[600px] md:max-w-[700px] lg:max-w-[450px] ${classes}`}>
   <slot />
 </p>

src/components/Sections/Section1.svelte

@@ -5,25 +5,20 @@
   import SectionNumber from '../SectionNumber.svelte';
 </script>
 
-<SectionWrapper
-  id="section1"
-  classes="flex sm:flex-col-reverse md:flex-col-reverse lg:flex-row sm:justify-center md:justify-center lg:px-0 vertical-lg:min-h-[450px]"
->
-  <div
-    class="relative sm:-mb-[8px] sm:h-full sm:min-h-[175px] sm:w-full md:-mb-[10px] md:h-[220px] lg:mb-0 lg:h-full lg:min-h-[250px] lg:w-[40%]"
-  >
-    <Section1Wave />
-  </div>
-
-  <div class="border-navy sm:border-0 sm:px-[30px] md:px-[40px] lg:w-[60%] lg:px-0 horizontal:border-b-[10px]">
-    <section class="paragraph-spacing-left flex h-full max-w-[680px] flex-col gap-6 lg:pl-6 lg:pr-0">
+<SectionWrapper id="section1" classes="lg:px-0 vertical-lg:min-h-[450px]">
+  <div class="flex sm:justify-start sm:px-[30px] md:px-[40px] lg:justify-end lg:px-0">
+    <section class="flex h-full w-full flex-col gap-6 lg:w-[60%] lg:pl-6">
       <SlideIn>
-        <h2 class="title-75 text-teal">Build at a higher Frequency</h2>
+        <h2 class="title-75 paragraph-spacing-left text-teal sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+          Build at a higher Frequency
+        </h2>
       </SlideIn>
       <SlideIn>
-        <p class="subtitle">Frequency Empowers the Social Web, Putting Control and Data Privacy in Your Hands</p>
+        <p class="subtitle paragraph-spacing-left sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+          Frequency Empowers the Social Web, Putting Control and Data Privacy in Your Hands
+        </p>
       </SlideIn>
-      <p class="body">
+      <p class="body paragraph-spacing-left sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
         Frequency contributes to the mission of creating a better web and world. It empowers individuals to ensure the
         portability of their content and safeguard their privacy. The protocol enables ownership of digital identity and
         control over online presence. In a world where technology can have both positive and negative effects,
@@ -32,5 +27,9 @@
     </section>
   </div>
 
-  <SectionNumber classes="sm:text-teal sm:right-0 sm:bottom-[140px] md:bottom-0 z-10 lg:bottom-3">.01</SectionNumber>
+  <SectionNumber classes="sm:text-teal sm:right-0 sm:bottom-[140px] z-10 lg:bottom-4">.01</SectionNumber>
+
+  <div class="w-full sm:-mb-[9px] sm:h-[190px] md:-mb-[10px] md:h-[220px] lg:mb-0 lg:h-full">
+    <Section1Wave />
+  </div>
 </SectionWrapper>

src/components/Sections/Section1Wave.svelte

@@ -1,3 +1,10 @@
 <div
-  class={`absolute bottom-0 h-full w-full overflow-x-hidden bg-[url(/src/lib/assets/section1waves.svg)] bg-no-repeat sm:right-[10%] sm:bg-right-bottom lg:left-0 lg:bg-bottom`}
-/>
+  class={`absolute bottom-0 w-full bg-no-repeat sm:right-[10%] sm:h-[180px] sm:bg-[url(/src/lib/assets/section1waves.svg)] sm:bg-right-bottom md:h-[200px] lg:left-0 lg:h-full lg:bg-none`}
+>
+  <div
+    class="z-1 relative h-full w-full bg-[url(/src/lib/assets/section1waves-top.svg)] bg-left-bottom bg-no-repeat sm:hidden md:hidden lg:block"
+  />
+  <div
+    class="-mt-[10px] h-full w-full bg-[url(/src/lib/assets/section1waves-bottom.svg)] bg-left-top bg-no-repeat sm:hidden md:hidden lg:block"
+  />
+</div>

src/components/Sections/Section2.svelte

@@ -24,7 +24,7 @@
     </div>
 
     <SectionParagraph
-      classes="text-left paragraph-spacing-right lg:pl-0 sm:pb-[100px] lg:pb-0 md:max-w-[615px] sm:max-w-auto lg:max-w-auto"
+      classes="text-left paragraph-spacing-right lg:pl-0 sm:pb-[100px] lg:pb-0 sm:max-w-[515px] lg:max-w-auto"
     >
       With Frequency, you will have a choice in how your favorite applications and websites utilize your data. Obtain
       control over your privacy and how your data is shared.

src/components/Sections/Section2Wave.svelte

@@ -1,8 +1,8 @@
 <div class={`absolute left-0 h-full w-full bg-left-bottom bg-no-repeat lg:bg-[url(/src/lib/assets/section2waves.svg)]`}>
   <div
-    class="h-full w-full bg-left-bottom bg-no-repeat sm:bg-[url(/src/lib/assets/section2mobile-top.svg)] lg:hidden"
+    class="h-full w-full bg-left-bottom bg-no-repeat sm:w-[170%] sm:max-w-[900px] sm:bg-[url(/src/lib/assets/section2mobile-top.svg)] md:w-[110%] md:max-w-full lg:hidden"
   />
   <div
-    class="h-full w-full bg-left-top bg-no-repeat sm:bg-[url(/src/lib/assets/section2mobile-bottom.svg)] lg:hidden"
+    class="h-full w-full bg-left-top bg-no-repeat sm:w-[170%] sm:max-w-[900px] sm:bg-[url(/src/lib/assets/section2mobile-bottom.svg)] md:w-[110%] md:max-w-full lg:hidden"
   />
 </div>

src/components/Sections/Section4.svelte

@@ -25,9 +25,7 @@
       </SectionParagraph>
     </section>
   </div>
-  <SectionNumber
-    isLeft={true}
-    classes="text-yellow lg:bottom-[120px] md:bottom-8 sm:bottom-[100px] lg:text-200 lg:-right-[80px]"
+  <SectionNumber isLeft={true} classes="text-yellow sm:bottom-[100px] md:bottom-[120px] lg:text-200 lg:-right-[80px]"
     >.04</SectionNumber
   >
 

src/components/Sections/Section4Wave.svelte

@@ -1,3 +1,3 @@
 <div
-  class={`absolute h-full w-full bg-[url(/src/lib/assets/section4waves.svg)] bg-bottom bg-no-repeat sm:-bottom-[6px] md:bottom-0 md:left-auto md:right-0`}
+  class={`md:max-h-auto absolute h-full bg-[url(/src/lib/assets/section4waves.svg)] bg-bottom sm:-bottom-[6px] sm:right-[10%] sm:max-h-[100px] sm:w-[800px] sm:bg-no-repeat md:right-[50%] lg:bottom-0 lg:left-auto lg:right-0 lg:max-h-[150px] lg:w-full lg:bg-repeat-x`}
 />

src/components/Sections/Section5.svelte

@@ -12,29 +12,29 @@
   classes="relative bg-indigo flex sm:flex-col lg:flex-row sm:pt-[50px] lg:pt-0 vertical-lg:min-h-[450px]"
 >
   <!-- Image -->
-  <div class="absolute bottom-0 left-0 flex h-full w-full sm:hidden lg:block">
+  <div class="absolute bottom-0 left-0 flex h-full w-full overflow-hidden sm:hidden lg:block">
     <Section5Wave />
-    <span class="absolute bottom-0 right-0 w-[70%] border-b-4 border-darkIndigo" />
+    <span class="absolute bottom-0 right-0 w-full border-b-4 border-darkIndigo" />
   </div>
 
   <!-- Content -->
   <div
     class="freq-container right-0 top-0 flex h-full sm:w-full sm:flex-col sm:gap-12 lg:absolute lg:w-[70%] lg:flex-row lg:items-end lg:justify-around lg:gap-0 lg:px-6"
   >
-    <section
-      class="sm:paragraph-spacing-left relative flex flex-col gap-6 sm:max-w-[800px] lg:max-w-[640px] lg:pb-[80px] lg:pr-[80px]"
-    >
+    <section class="relative flex flex-col gap-6 sm:max-w-[800px] lg:max-w-[640px] lg:pb-[80px] lg:pr-[80px]">
       <SlideIn>
         <h2 class="title-75 text-yellow lg:max-w-[600px]">The Core of Our Technology</h2>
       </SlideIn>
-      <SectionParagraph classes="text-cream">
+      <SectionParagraph classes="md:pr-[140px] lg:px-0 text-cream">
         The creators of Frequency are at the forefront of innovation. They've created the Decentralized Social
         Networking Protocol (DSNP), an open-source solution that establishes a shared social graph independent of
         specific applications or centralized platforms.
       </SectionParagraph>
-      <button
-        class="max-w-[200px] border-2 border-cream px-10 py-3 text-xs font-semibold text-cream transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
-        >Learn More</button
+      <a href="https://docs.frequency.xyz/" target="_blank"
+        ><button
+          class="max-w-[200px] border-2 border-cream px-10 py-3 text-xs font-semibold text-cream transition-colors duration-500 hover:bg-cream hover:bg-opacity-30"
+          >Learn More</button
+        ></a
       >
       <SectionNumber classes="text-cream sm:hidden lg:block mr-[70px] bottom-4 right-0">.05</SectionNumber>
     </section>

src/components/Sections/Section5Wave.svelte

@@ -1,16 +1,21 @@
-<script lang="ts">
-  let startWave = 'wave';
-</script>
-
-<div class={`absolute bottom-0 left-0 h-full w-full`}>
-  <div class={startWave} />
-</div>
+<div class={`wave absolute bottom-0 left-0 z-10 h-full w-full`}></div>
 
 <style>
+  @keyframes wave {
+    0%,
+    100% {
+      margin-left: 20;
+    }
+    50% {
+      margin-left: -20px;
+    }
+  }
+
   .wave {
-    background: url(/src/lib/assets/section5waves.svg) no-repeat bottom;
+    background: url(/src/lib/assets/section5waves.svg) repeat-x bottom;
     width: 30%;
     height: 100%;
     margin-right: 70%;
+    /* animation: wave 5s infinite; */
   }
 </style>