Initial work on new layout (#58)

Just getting ready for all the subs of #48 - Removes the special treatment of the header - Removes all the special side scrolling stuff - Renames sections to their section header name - Removes many of the extra containers - Removes all the extra waves (although not assets yet)
frequency-chain · Nov 19, 2024 · 9f12f9b · 9f12f9b
1 parent 53daf6c
commit 9f12f9b
Show file tree

Hide file tree

Showing 38 changed files with 231 additions and 704 deletions.
diff --git a/src/components/FounderProfile.svelte b/src/components/FounderProfile.svelte
diff --git a/src/components/Founders.svelte b/src/components/Founders.svelte
diff --git a/src/components/GetNotified/GetNotified.svelte b/src/components/GetNotified/GetNotified.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import DiscordLogoWhite from '../../lib/assets/DiscordLogo-White.svg';
-  import Stars from './Stars.svelte';
-  import Wave from './Wave.svelte';
 
   const fieldMapping = {
     firstName: 'entry.447550433',
@@ -62,86 +60,66 @@
   $: inputClasses = hasSubmittedFormAtLeastOnce ? invalidInputClasses : validInputClasses;
 </script>
 
-<div class="flex flex-col items-start rounded-3xl bg-cream">
-  <div class="relative overflow-hidden rounded-t-3xl bg-navy">
-    <div class="top-lines rounded-t-3xl">
-      <div class="top-lines-fade rounded-t-3xl">
-        <div id="notified-stars" class="absolute w-[80%] overflow-hidden">
-          <div class="svg-100 w-[600px]"><Stars /></div>
-        </div>
-        <div id="notified-wave" class="absolute bottom-0 w-[100%]">
-          <div class="svg-100 w-[100%]"><Wave /></div>
-        </div>
-        <div class="top-gradient relative z-10 rounded-t-3xl px-4 pb-[50px] pt-[70px] text-white">
-          <h2 class="title-50 mx-2 mb-4 text-center leading-[1.1]">Interested in Frequency's ecosystem?</h2>
-          <p class="title-16 z-50 text-center">Get notified when more developer tools are available.</p>
-        </div>
+<div class="px-8 py-4">
+  {#if !formSuccess}
+    <form on:submit|preventDefault={submit} novalidate>
+      <div class="mb-4">
+        <label class="mb-2 block text-xs font-semibold" for="firstName"
+          >First Name <span class="text-red">*</span></label
+        >
+        <input required type="text" id="firstName" bind:value={firstName} class={inputClasses} placeholder="John" />
       </div>
-    </div>
-  </div>
-  <div class="px-8 py-4">
-    {#if !formSuccess}
-      <form on:submit|preventDefault={submit} novalidate>
-        <div class="mb-4">
-          <label class="mb-2 block text-xs font-semibold" for="firstName"
-            >First Name <span class="text-red">*</span></label
-          >
-          <input required type="text" id="firstName" bind:value={firstName} class={inputClasses} placeholder="John" />
-        </div>
-        <div class="mb-4">
-          <label class="mb-2 block text-xs font-semibold" for="lastName"
-            >Last Name <span class="text-red">*</span></label
-          >
-          <input required type="text" id="lastName" bind:value={lastName} class={inputClasses} placeholder="Doe" />
-        </div>
-        <div class="mb-4">
-          <label class="mb-2 block text-xs font-semibold" for="email">Email <span class="text-red">*</span></label>
+      <div class="mb-4">
+        <label class="mb-2 block text-xs font-semibold" for="lastName">Last Name <span class="text-red">*</span></label>
+        <input required type="text" id="lastName" bind:value={lastName} class={inputClasses} placeholder="Doe" />
+      </div>
+      <div class="mb-4">
+        <label class="mb-2 block text-xs font-semibold" for="email">Email <span class="text-red">*</span></label>
+        <input
+          required
+          type="email"
+          id="email"
+          bind:value={email}
+          class={inputClasses}
+          placeholder="Enter your email"
+        />
+      </div>
+      <div class="mb-4">
+        <label class="inline-flex items-center hover:cursor-pointer">
           <input
-            required
-            type="email"
-            id="email"
-            bind:value={email}
-            class={inputClasses}
-            placeholder="Enter your email"
+            type="checkbox"
+            bind:checked={isDeveloper}
+            class="form-checkbox text-white accent-tealBright hover:cursor-pointer"
           />
-        </div>
-        <div class="mb-4">
-          <label class="inline-flex items-center hover:cursor-pointer">
-            <input
-              type="checkbox"
-              bind:checked={isDeveloper}
-              class="form-checkbox text-white accent-tealBright hover:cursor-pointer"
-            />
-            <span class="ml-2 text-xs font-semibold"
-              >Are you a developer interested in building something on Frequency?</span
-            >
-          </label>
-        </div>
-        <div class="m-5">
-          <button
-            type="submit"
-            class="radius w-full rounded-full bg-teal py-4 font-medium text-white shadow-lg transition duration-300 ease-in-out hover:shadow-none"
+          <span class="ml-2 text-xs font-semibold"
+            >Are you a developer interested in building something on Frequency?</span
           >
-            Get Notified
-          </button>
-        </div>
-      </form>
-    {:else}
-      <div class="px-8 py-12">
-        <h2 class="title-75 text-center">Thank You!</h2>
+        </label>
       </div>
-    {/if}
-
-    <a class="m-2 flex p-4" href="https://discord.com/invite/JchmHX5afV">
-      <div class="h-[70px] w-[70px] flex-shrink-0 rounded-lg bg-black p-2 hover:bg-teal">
-        <img class="w-[70px]" src={DiscordLogoWhite} alt="" />
+      <div class="m-5">
+        <button
+          type="submit"
+          class="radius w-full rounded-full bg-teal py-4 font-medium text-white shadow-lg transition duration-300 ease-in-out hover:shadow-none"
+        >
+          Get Notified
+        </button>
       </div>
-      <div class="px-4">
-        <h3 class="mb-1 font-semibold leading-none">Join our Discord</h3>
-        <p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
-      </div>
-    </a>
-  </div>
+    </form>
+  {:else}
+    <div class="px-8 py-12">
+      <h2 class="title-75 text-center">Thank You!</h2>
+    </div>
+  {/if}
+
+  <a class="m-2 flex p-4" href="https://discord.com/invite/JchmHX5afV">
+    <div class="h-[70px] w-[70px] flex-shrink-0 rounded-lg bg-black p-2 hover:bg-teal">
+      <img class="w-[70px]" src={DiscordLogoWhite} alt="" />
+    </div>
+    <div class="px-4">
+      <h3 class="mb-1 font-semibold leading-none">Join our Discord</h3>
+      <p class="text-sm">Become a part of shaping the future of the digital landscape with Frequency.</p>
+    </div>
+  </a>
 </div>
 
 <style>

diff --git a/src/components/GetNotified/Stars.svelte b/src/components/GetNotified/Stars.svelte
diff --git a/src/components/GetNotified/Wave.svelte b/src/components/GetNotified/Wave.svelte
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
   import { Header } from '@frequency-chain/style-guide';
 
-  export let logoHex: string = '';
-  export let navColor: string = '';
-  export let section: number;
-
-  $: textColor = `text-${navColor}`;
+  const logoHex = '#5E69FF';
+  const navColor = 'navy';
+  const textColor = `text-${navColor}`;
 
   const menuItems = [
     { label: 'About', href: '/' },
@@ -15,6 +13,6 @@
   ];
 </script>
 
-<div class="md:freq-container absolute top-0 z-50 w-full max-w-page md:pt-[30px]">
-  <Header logoType="primary" {logoHex} class={textColor} {menuItems} bind:section />
+<div class="sticky top-0 z-50 bg-white md:pt-[30px]">
+  <Header logoType="primary" {logoHex} class={textColor} {menuItems} />
 </div>
diff --git a/src/components/SectionContent.svelte b/src/components/SectionContent.svelte
@@ -2,6 +2,6 @@
   export let classes: string = '';
 </script>
 
-<section class={`sm:freq-container md:freq-container body relative h-full ${classes}`}>
+<section class={`${classes}`}>
   <slot />
 </section>
diff --git a/src/components/SectionNumber.svelte b/src/components/SectionNumber.svelte
diff --git a/src/components/Sections/About.svelte b/src/components/Sections/About.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+  import SlideIn from '../SlideIn.svelte';
+  import SectionParagraph from '../SectionParagraph.svelte';
+  import SectionContent from '../SectionContent.svelte';
+</script>
+
+<SectionWrapper id="about">
+  <div class="freq-container">
+    <SectionContent classes="">
+      <div class="">
+        <SlideIn>
+          <h2 class="title-100">What is Frequency?</h2>
+        </SlideIn>
+      </div>
+
+      <SectionParagraph classes="">
+        Frequency is a blockchain designed to support decentralized social networks to give people control over their
+        online presence. With Frequency, users can freely choose and connect on social apps while retaining ownership of
+        their data. Built on the Decentralized Social Networking Protocol (DSNP), Frequency offers scalable tools for
+        message discovery, flexible storage for social and identity data, and a unique cost-sharing model that allows
+        apps to deliver smooth, secure experiences that put users in charge."
+      </SectionParagraph>
+    </SectionContent>
+  </div>
+  <div>[Image]</div>
+</SectionWrapper>
diff --git a/src/components/Sections/Contact.svelte b/src/components/Sections/Contact.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+  import SectionParagraph from '../SectionParagraph.svelte';
+  import SectionContent from '../SectionContent.svelte';
+  import GetNotified from '../GetNotified/GetNotified.svelte';
+</script>
+
+<SectionWrapper id="about" classes="text-white bg-navy">
+  <SectionContent classes="freq-container">
+    <SectionParagraph classes="">Image</SectionParagraph>
+
+    <GetNotified />
+  </SectionContent>
+</SectionWrapper>
diff --git a/src/components/Sections/Developers.svelte b/src/components/Sections/Developers.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import SectionParagraph from '../SectionParagraph.svelte';
+  import SlideIn from '../SlideIn.svelte';
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="developers" classes="freq-container">
+  <section class="">
+    <SlideIn>
+      <h2 class="title-75">Developer Advantages:</h2>
+    </SlideIn>
+
+    <SectionParagraph classes="">Getting started building on Frequency is simple and easy.</SectionParagraph>
+
+    <a href="/docs"> Developer Portal </a>
+  </section>
+</SectionWrapper>
diff --git a/src/components/Sections/Mission.svelte b/src/components/Sections/Mission.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+  import SlideIn from '../SlideIn.svelte';
+</script>
+
+<SectionWrapper id="mission" classes="">
+  <section class="freq-container">
+    <SlideIn>
+      <h2 class="title-75">Frequency’s Mission</h2>
+    </SlideIn>
+    <SlideIn>
+      <p class="">
+        Frequency’s Mission is to provide critical infrastructure to help people take back control over their digital
+        lives by:
+      </p>
+    </SlideIn>
+  </section>
+  <div class="bg-navy">
+    <div class="freq-container">
+      <h2>Your Network</h2>
+    </div>
+  </div>
+</SectionWrapper>
diff --git a/src/components/Sections/Partners.svelte b/src/components/Sections/Partners.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import SectionParagraph from '../SectionParagraph.svelte';
+  import SlideIn from '../SlideIn.svelte';
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="partners" classes="freq-container">
+  <section class="">
+    <SlideIn>
+      <h2 class="title-75">Our Partners</h2>
+    </SlideIn>
+    <SectionParagraph classes="">A, B, C</SectionParagraph>
+  </section>
+</SectionWrapper>