Landing page

src/routes/docs/+layout.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
-  import Header from '../../components/Header/Header.svelte';
   import { Footer } from '@frequency-chain/style-guide';
-
-  const logoHex = '#5E69FF';
-  const navColor = 'navy';
 </script>
 
-<div class="relative lg:max-w-[100vw] xl:max-w-page">
-  <Header {logoHex} {navColor} />
-  <div class="mt-4 p-3">
-    <slot />
-  </div>
+<div>
+  <slot />
   <Footer />
 </div>

src/routes/docs/+page.svelte

@@ -1 +1,30 @@
-<div class="mx-auto flex-grow justify-center px-4 sm:px-6 lg:px-8"></div>
+<script lang="ts">
+  import DocsBody from './components/DocsBody.svelte';
+  import Header from '../../components/Header/Header.svelte';
+  $: section = 1;
+  const brightBlue = '#5E69FF';
+  const cream = '#FEFAF3';
+
+  const logoMap = new Map([
+    [1, { logo: brightBlue, nav: 'navy' }],
+    [2, { logo: cream, nav: 'cream' }],
+    [3, { logo: brightBlue, nav: 'cream' }],
+    [4, { logo: brightBlue, nav: 'navy' }],
+    [5, { logo: cream, nav: 'cream' }],
+  ]);
+
+  // Section navigation titles for Aria
+
+  $: logoHex = logoMap.get(section)?.logo;
+  $: navColor = logoMap.get(section)?.nav;
+  // $: baseUrl = $page.url.protocol + '//' + $page.url.host;
+</script>
+
+<div class="min-h-[calc(100vh-100px)]">
+  <div class="relative lg:max-w-[100vw] xl:max-w-page">
+    <div class="absolute top-0 z-50 w-full"><Header {logoHex} {navColor} bind:section /></div>
+    <div class={`relative w-[100vw] min-w-full sm:pt-[80px] lg:pt-[140px] vertical-lg:w-[100%]`}>
+      <DocsBody />
+    </div>
+  </div>
+</div>

src/routes/docs/components/DocsBody.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import SlideIn from '../../../components/SlideIn.svelte';
+  import Placeholder from './Placeholder.svelte';
+</script>
+
+<div
+  class="flex sm:justify-start sm:px-[30px] md:px-[50px] lg:justify-end lg:px-0 vertical-lg:justify-start vertical-lg:px-[30px]"
+>
+  <section class="flex h-full w-full flex-col gap-6 lg:w-[60%] lg:pl-6">
+    <SlideIn>
+      <h2 class="title-75 paragraph-spacing-left text-navy sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+        Build with Frequency
+      </h2>
+    </SlideIn>
+    <SlideIn>
+      <p class="title-50 paragraph-spacing-left text-orange sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+        Better with You
+      </p>
+    </SlideIn>
+    <p class="body paragraph-spacing-left sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+      Everything here is open source. Our development roadmap is focussed on our mission of reclaiming the social graph
+      for the common good and is guided by our principles. Infrastructure for the Next Generation Decentralized Social
+      Internet.
+    </p>
+    <p class="body paragraph-spacing-left sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]">
+      If this is your first visit, the DSNP whitepape is a good place to start. Where you go after depends on your
+      goals: the nagivation panel gives some useful entry points.
+    </p>
+  </section>
+</div>
+<div>
+  <Placeholder />
+</div>

src/routes/docs/components/Placeholder.svelte

@@ -0,0 +1,7 @@
+<!-- Desktop -->
+<div
+  class="relative z-10 h-full w-full bg-[url(/src/lib/assets/placeholder-portal.svg)] bg-right-bottom bg-no-repeat sm:hidden lg:block vertical-lg:hidden"
+></div>
+<div
+  class="relative z-0 -mt-[350px] h-[400px] w-full bg-[url(/src/lib/assets/placeholder-portal.svg)] bg-left-top bg-no-repeat sm:hidden lg:block vertical-lg:hidden"
+></div>