12 horizontal scroll for all sections (#23)

closes #12

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

src/components/Header/Header.svelte

@@ -7,7 +7,7 @@
   let isNavOpen = false;
 </script>
 
-<div class="freq-container fixed top-0 flex items-center justify-between pt-[12px]">
+<div class="freq-container fixed top-0 z-50 flex items-center justify-between bg-cream pt-[12px]">
   <img src={Logo} alt="Logo" class="mr-3 sm:w-[140px] md:w-[180px] lg:w-[210px]" />
 
   <!-- For Desktop -->

src/components/Sections/Section1.svelte

@@ -0,0 +1,7 @@
+<script>
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section1">
+  <h2>Build at a higher Frequency</h2>
+</SectionWrapper>

src/components/Sections/Section2.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section2" classes="bg-yellow">
+  <h2>Taking Back Control</h2>
+</SectionWrapper>

src/components/Sections/Section3.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section3" classes="bg-teal">
+  <h2>Take Your Content & Relationships With You</h2>
+</SectionWrapper>

src/components/Sections/Section4.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section4" classes="bg-purple">
+  <h2>Publicly Vote for Your Preferred Apps</h2>
+</SectionWrapper>

src/components/Sections/Section5.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section5" classes="bg-orange">
+  <h2>The Core of Our Technology</h2>
+</SectionWrapper>

src/components/Sections/SectionNavigation.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let section: number;
+</script>
+
+<div class="freq-container absolute right-0 w-[50vw] justify-between pl-0 pt-[32px] sm:hidden md:hidden lg:flex">
+  {#each { length: 5 } as _, i}
+    <button
+      on:click={() => (section = i + 1)}
+      class={`text-lg transition-opacity duration-700	 ${section === i + 1 ? 'opacity-100' : 'opacity-25'}`}
+      >.0{i + 1}</button
+    >
+  {/each}
+</div>

src/components/Sections/SectionWrapper.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let id = '';
+  export let classes = '';
+</script>
+
+<div {id} class={`w-[100vw] min-w-[100vw] ${classes}`}>
+  <slot />
+</div>

src/components/Sections/Sections.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let scrollPosition: number;
+  export let isLastSection: boolean;
+
+  const handleWheel = (event: WheelEvent) => {
+    if (!isLastSection || event.deltaY < 0) event.preventDefault();
+    scrollPosition = event.deltaY;
+  };
+</script>
+
+<!-- For Mobile and Short -->
+<div class="sm:block md:block lg:hidden short:block">
+  <slot />
+</div>
+
+<!-- For Desktop -->
+<div
+  id="scroll-container"
+  class="h-[500px] flex-nowrap overflow-hidden sm:hidden md:hidden lg:flex short:hidden"
+  on:wheel={handleWheel}
+>
+  <slot />
+</div>

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div>
-  <div class="max-w-page mt-[27px] min-h-[calc(100vh-50px)] w-[100vw]">
+  <div class="max-w-page my-[30px] min-h-[calc(100vh-145px)] w-[100vw]">
     <Header />
     <slot />
   </div>

src/routes/+page.svelte

@@ -1,7 +1,63 @@
-<script>
-  import { add } from '$lib';
-  const _x = add(1, 2);
+<script lang="ts">
+  import SectionNavigation from '../components/Sections/SectionNavigation.svelte';
+  import Sections from '../components/Sections/Sections.svelte';
+  import Section1 from '../components/Sections/Section1.svelte';
+  import Section2 from '../components/Sections/Section2.svelte';
+  import Section3 from '../components/Sections/Section3.svelte';
+  import Section4 from '../components/Sections/Section4.svelte';
+  import Section5 from '../components/Sections/Section5.svelte';
+
+  let SECTION_COUNT = 5;
+
+  let section = 1;
+  let prevSection = 1;
+  let scrollPosition = 0;
+
+  $: {
+    // TODO: Fix bug when resizing the window.
+    const scrollContainer = document.getElementById('scroll-container');
+    const spaceBetween = section - prevSection;
+    scrollContainer?.scrollBy({
+      left: window.innerWidth * spaceBetween,
+      behavior: 'smooth',
+    });
+    prevSection = section;
+  }
+
+  let timeoutId: number | null = null;
+  const throttle = (v: () => void) => {
+    if (timeoutId === null) {
+      timeoutId = setTimeout(() => {
+        timeoutId = null;
+      }, 100) as unknown as number;
+      v();
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+    }, 100) as unknown as number;
+  };
+
+  $: {
+    throttle(() => {
+      if (scrollPosition > 0 && section < SECTION_COUNT) {
+        section++;
+      } else if (scrollPosition < 0 && section > 1) {
+        section--;
+      }
+      scrollPosition = 0;
+    });
+  }
 </script>
 
-<h1 class="text-xl">Welcome</h1>
-<p>Coming soon...</p>
+<div class="relative">
+  <Sections bind:scrollPosition isLastSection={section === SECTION_COUNT}>
+    <Section1 />
+    <Section2 />
+    <Section3 />
+    <Section4 />
+    <Section5 />
+  </Sections>
+  <SectionNavigation bind:section />
+</div>

src/style/app.css

@@ -43,7 +43,7 @@
 
 @layer base {
   body {
-    @apply my-[40px] flex flex-col items-center bg-cream text-base text-black;
+    @apply mt-[67px] flex flex-col items-center scroll-smooth bg-cream text-base text-black;
   }
 
   button {

tailwind.config.js

@@ -43,6 +43,7 @@ export default {
       sm: '0px',
       md: '900px',
       lg: '1300px',
+      short: { raw: '(max-height: 700px)' },
     },
   },
 };

tests/test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('index page has expected content', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
+  await expect(page.getByText('Build at a higher Frequency')).toBeDefined();
 });