post live updates (#100)

# Description Post live updates: - [x] Change tagline to `Welcome to the People's Internet` (Also update the `og:description` header tag) - [x] Check anchor tags for padding (Mission is known broken) - [x] Consistent spacing in developer mobile sections (too much white space at bottom of first section and too little on top of second section) - [x] Image at top of developer portal is too small in mobile. Should be able to read text in the image. - [x] Post contact form thank you should clear the form, but still stay in the same location on the page - [x] Switching the Thank you png to svg/html - [x] "Growing into a better" zindex needs to be increased - [x] second pass at margins - [x] Ecosystem header doesn't underline on scroll - partially closes #99 --------- Co-authored-by: Claire Olmstead <[email protected]>
frequency-chain · Nov 19, 2024 · cb2c78f · cb2c78f
1 parent 9724c12
commit cb2c78f
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 55 deletions.
diff --git a/src/app.html b/src/app.html
@@ -12,10 +12,7 @@
 
     <meta property="og:title" content="Frequency" />
     <meta property="og:url" content="" />
-    <meta
-      property="og:description"
-      content="Frequency fuels the Social Web, putting control & data privacy in your hands."
-    />
+    <meta property="og:description" content="Welcome to the People's Internet." />
     <!-- The og:images must be absolute. The assets are in /static -->
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://www.frequency.xyz/og-preview.png" />

diff --git a/src/components/GetNotified/ContactThankYou.svelte b/src/components/GetNotified/ContactThankYou.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-  import ThankYouWaves from '$lib/assets/ThankYouWaves.png';
+  import ThankYouWaves from '$lib/assets/ThankYouWave.svg';
 
-  let { onClick = async () => {}, classes = '' } = $props();
+  let { onClick = async () => {} } = $props();
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="flex items-center justify-center" onclick={onClick}>
-  <img
-    class="px-auto mx-auto block {classes}"
-    width="400"
-    src={ThankYouWaves}
-    alt="Frequency waves with 'Thank you!' caption"
-  />
+<div class="flex cursor-pointer items-center justify-center" onclick={onClick}>
+  <img src={ThankYouWaves} alt="Frequency waves with 'Thank you!' caption" />
 </div>
diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
@@ -2,7 +2,6 @@
   import { Input, Textarea } from '@frequency-chain/style-guide';
   import { dev } from '$app/environment';
   import ContactThankYou from '$components/GetNotified/ContactThankYou.svelte';
-  import { goto } from '$app/navigation';
 
   const fieldMapping = {
     name: 'entry.464666765',
@@ -73,12 +72,16 @@
     }
   };
 
-  const goToTop = async (_e: Event) => {
+  const resetForm = async (_e: Event) => {
     formSuccess = false;
     hasSubmittedFormAtLeastOnce = false;
-    await goto('/');
-    const form = document.getElementsByTagName('form')[0] as HTMLFormElement;
-    form.reset();
+    name = '';
+    email = '';
+    isDeveloper = false;
+    isPartnership = false;
+    comment = '';
+    const form = document.getElementById('contact-form') as HTMLFormElement;
+    if (form) form.reset();
   };
 </script>
 
@@ -90,6 +93,7 @@
       novalidate
       class="mx-auto mt-f24 justify-center gap-f24"
       data-testid="contact-form"
+      id="contact-form"
     >
       <Input
         label="Name"
@@ -145,6 +149,6 @@
       </button>
     </form>
   {:else}
-    <ContactThankYou onClick={goToTop} />
+    <ContactThankYou onClick={resetForm} />
   {/if}
 </div>
diff --git a/src/components/HAccordion.svelte b/src/components/HAccordion.svelte
@@ -61,8 +61,8 @@
       {@render children()}
     </div>
     <div class={`flex flex-row ${contentAlignClasses}`}>
-      <Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
-        Learn <img src={Arrow} width="12px" height="12px" alt="" />
+      <Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url}>
+        Learn<img src={Arrow} alt="" class="h-[14px]" />
       </Button>
     </div>
   </div>

diff --git a/src/components/Sections/Ecosystem.svelte b/src/components/Sections/Ecosystem.svelte
@@ -20,9 +20,9 @@
       ></div>
     </div>
   </div>
-  <div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f120">
+  <div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f96">
     <section class="freq-container flex items-center md:px-52">
-      <div class="flex w-full flex-col gap-f24 lg:w-2/3">
+      <div class="z-10 flex w-full flex-col gap-f24 lg:w-2/3">
         <SlideIn>
           <h1 class="title-70 relative z-10 font-title text-white">
             Growing into a better <br class="hidden md:inline" />Future Together

diff --git a/src/components/Sections/Mission/Mission.svelte b/src/components/Sections/Mission/Mission.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <SectionWrapper id="mission">
-  <section class="freq-container mb-f64">
+  <section class="freq-container pb-f96 pt-f64">
     <MissionHeader />
     <MissionItems />
   </section>

diff --git a/src/components/Sections/Top/Top.svelte b/src/components/Sections/Top/Top.svelte
@@ -8,42 +8,33 @@
   // That's to be able to responsively handle the movement of the animation
 </script>
 
-<SectionWrapper class="freq-container flex flex-col pb-f64 md:flex-row md:items-center md:justify-center">
+<SectionWrapper class="freq-container flex flex-col md:flex-row md:items-center md:justify-center">
   <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]"
+    class="mb:h-[500px] relative mb-f56 flex h-[300px] w-full self-stretch xs:h-[380px] md:-ml-f24 md:mb-0 md:w-1/2 lg:h-[700px]"
   >
     <HomeAnimation />
     <div
-      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]"
+      class="math absolute left-[20px] top-[25%] xs: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="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="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 class="mx-auto w-auto xs:max-w-[400px] md:w-1/2 md:max-w-[400px] md:pl-0 lg:w-full lg:max-w-[500px]">
+    <SlideIn class="md:-ml-f16">
+      <div class="top-title pl-f24 xs:text-left">Welcome</div>
+      <div class="flex flex-wrap items-center gap-f16">
+        <div class="whitespace-nowrap italic text-teal xs:text-normal sm:text-lg lg:text-[32px]">to the</div>
+        <div class="top-title xs:text-left">People's</div>
       </div>
+      <div class="top-title pl-f48">Internet</div>
     </SlideIn>
   </div>
 </SectionWrapper>
+
+<style>
+  .top-title {
+    @apply font-title leading-[1] tracking-wide text-primary xs:text-[50px] sm:text-[60px] md:text-[75px] lg:text-[90px];
+  }
+</style>
diff --git a/src/components/Sections/Users/Users.svelte b/src/components/Sections/Users/Users.svelte
@@ -5,7 +5,7 @@
   import UsersHeader from './UsersHeader.svelte';
 </script>
 
-<SectionWrapper id="users" class="relative bg-navy pb-f128 pt-0 text-white lg:py-f128">
+<SectionWrapper id="users" class="relative bg-navy pb-f96 pt-0 text-white lg:py-f128">
   <SectionContent class="flex flex-col gap-f56">
     <UsersHeader />
     <div class="freq-container">

diff --git a/src/lib/assets/ThankYouWave.svg b/src/lib/assets/ThankYouWave.svg
diff --git a/src/lib/assets/ThankYouWaves.png b/src/lib/assets/ThankYouWaves.png
diff --git a/src/routes/docs/components/DocsMain.svelte b/src/routes/docs/components/DocsMain.svelte
@@ -3,8 +3,10 @@
   import SlideIn from '$components/SlideIn.svelte';
 </script>
 
-<section class="freq-container flex flex-col lg:flex-row lg:items-center lg:justify-center">
-  <div class="flex max-h-[500px] w-full self-center lg:h-[700px] lg:w-1/2">
+<section
+  class="freq-container flex flex-col xs:pb-f56 md:pb-f96 lg:flex-row lg:items-center lg:justify-center lg:pb-f24"
+>
+  <div class="flex h-[100vw] w-full self-center xs:max-h-[500px] lg:h-[700px] lg:w-1/2">
     <DevPortalAnimation />
   </div>
   <div class="flex flex-col gap-6 lg:w-1/2">

diff --git a/src/routes/docs/components/Explore.svelte b/src/routes/docs/components/Explore.svelte
@@ -27,14 +27,14 @@
 
 <div
   id="explore_section"
-  class="freq-container mt-f96 flex w-full flex-col gap-f12 pb-f96 pt-f20 lg:flex-row lg:gap-0 lg:py-f96"
+  class="freq-container flex w-full flex-col gap-f12 pb-f96 pt-f56 lg:flex-row lg:gap-0 lg:py-f96"
 >
-  <div id="explore_description" class="relative flex w-full flex-row px-f32 text-teal lg:w-1/2 lg:pt-f96">
+  <div id="explore_description" class="relative flex w-full flex-row text-teal md:px-f32 lg:w-1/2 lg:pt-f96">
     <div class="flex flex-col gap-f32">
       <SlideIn>
         <span class="title-h2 mt-f8 text-clip text-wrap">Explore &amp; Build</span>
       </SlideIn>
-      <div class="body pb-f64 text-white md:pb-f80">
+      <div class="body pb-f64 text-white xs:pb-f32 md:pb-f80">
         Frequency offers simple blockchain integration for your applications&mdash;bridging the gap between your app and
         the decentralized web. Frequency Developer Gateway offers a suite of self-hosted tools and services that make it
         easy to connect your applications to Frequency. This allows your developer team to focus on building outstanding