51 mission section

src/components/GetNotified/GetNotified.svelte

@@ -107,7 +107,7 @@
     </form>
   {:else}
     <div class="px-8 py-12">
-      <h2 class="title-75 text-center">Thank You!</h2>
+      <h2 class="title-70 text-center">Thank You!</h2>
     </div>
   {/if}
 

src/components/Sections/Mission/Mission.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import SectionWrapper from '../SectionWrapper.svelte';
+  import MissionItems from '$components/Sections/Mission/MissionItems.svelte';
+  import MissionStatement from '$components/Sections/Mission/MissionStatement.svelte';
+  import MissionHeader from '$components/Sections/Mission/MissionHeader.svelte';
+</script>
+
+<SectionWrapper id="mission" classes="py-f64">
+  <section class="freq-container mb-f64">
+    <MissionHeader />
+    <MissionItems />
+  </section>
+
+  <MissionStatement />
+</SectionWrapper>

src/components/Sections/Mission/MissionHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import SlideIn from '$components/SlideIn.svelte';
+</script>
+
+<div class="pl-f32 lg:pl-f48">
+  <SlideIn>
+    <h2 class="title-70 pb-f24 text-navy">Frequency’s Mission</h2>
+  </SlideIn>
+  <SlideIn>
+    <h5
+      class="pb-f64 text-h6 font-bold sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:text-h5 lg:leading-[32px]"
+    >
+      Frequency's Mission is to provide the infrastructure to empower people by:
+    </h5>
+  </SlideIn>
+</div>

src/components/Sections/Mission/MissionItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+</script>
+
+<div class="flex max-w-[450px]">
+  <!--    left column-->
+  <div class="relative flex w-f48 flex-col">
+    <!--        icon-->
+    <div class="absolute right-f4 top-0 h-f24 w-f24">
+      <slot name="icon" />
+    </div>
+    <!--        horizontal border-->
+    <span class="absolute left-0 top-f24 w-f160 border-b-2 border-gray3"></span>
+  </div>
+  <!--    right column-->
+  <div class="relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48 text-sm">
+    <!--        vertical border-->
+    <span class="absolute left-0 top-f12 h-f120 border-l-2 border-gray3"></span>
+    <!--        body-->
+    <slot name="body" />
+  </div>
+</div>

src/components/Sections/Mission/MissionItems.svelte

@@ -0,0 +1,57 @@
+<script>
+  import MissionItem from '$components/Sections/Mission/MissionItem.svelte';
+  import App from '$lib/assets/MissionIcons/App.svg';
+  import Box from '$lib/assets/MissionIcons/Box.svg';
+  import Fingerprint from '$lib/assets/MissionIcons/Fingerprint.svg';
+  import Network from '$lib/assets/MissionIcons/Network.svg';
+  import Universe from '$lib/assets/MissionIcons/Universe.svg';
+  import Users from '$lib/assets/MissionIcons/Users.svg';
+
+  const missionItems = [
+    {
+      iconAlt: 'Fingerprint',
+      icon: Fingerprint,
+      body: `Offering everyone a self-sovereign <span class="font-bold text-teal">digital social iconAltentity</span> that they may use
+      to sign in and share data across the applications they choose.`,
+    },
+    {
+      iconAlt: 'App',
+      icon: App,
+      body: `Allowing people to <span class="font-bold text-teal">freely move among applications</span> and proviconAlters rather than
+      being forced to accept application changes that worsen their experience.`,
+    },
+    {
+      iconAlt: 'Network',
+      icon: Network,
+      body: `Offering application proviconAlters practical <span class="font-bold text-teal">economics</span> that make blockchain usage
+      feasible and desirable.`,
+    },
+    {
+      iconAlt: 'Users',
+      icon: Users,
+      body: `Securely storing each <span class="font-bold text-teal">person's relationships</span> (social graph) so they are not
+      controlled by any application or company, and can only be accessed with user permission.`,
+    },
+    {
+      iconAlt: 'Box',
+      icon: Box,
+      body: `Creating an <span class="font-bold text-teal">interoperable</span> social media public commons where everyone can participate
+      in the conversation.`,
+    },
+    {
+      iconAlt: 'Universe',
+      icon: Universe,
+      body: `Creating a shared and <span class="font-bold text-teal">decentralized</span> economy where everyone can participate
+      in the shared value they have created on the internet.`,
+    },
+  ];
+</script>
+
+<div class="grid gap-f64 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  {#each missionItems as item}
+    <MissionItem>
+      <span slot="icon"><img src={item.icon} alt={item.iconAlt} /></span>
+      <p slot="body" bind:innerHTML={item.body} contenteditable="true"></p>
+    </MissionItem>
+  {/each}
+</div>

src/components/Sections/Mission/MissionStatement.svelte

@@ -0,0 +1,10 @@
+<div class="bg-navy py-f24 text-white">
+  <div class="freq-container flex items-center justify-center gap-f24">
+    <h2 class="title-70 sm:text-h1 md:text-[70px]">Your:</h2>
+    <div class="flex flex-col">
+      <span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
+      <span class="font-thin sm:text-[50px] md:text-[70px]">Network</span>
+      <span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
+    </div>
+  </div>
+</div>

src/components/Sections/Users.svelte

@@ -9,7 +9,7 @@
   <section class="freq-container">
     <div class="">
       <SlideIn>
-        <h2 class="title-75">User Advantages</h2>
+        <h2 class="title-70">User Advantages</h2>
       </SlideIn>
     </div>
     <div>