From 5b816c61daad586e9840be00c175913e0f61adf8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 22 Jan 2024 15:02:42 -0500
Subject: [PATCH 1/5] Bump vite from 5.0.10 to 5.0.12 (#1)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 289f43ef..553131fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "tailwindcss": "3.3.6",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
-        "vite": "^5.0.3",
+        "vite": "^5.0.12",
         "vite-plugin-tailwind-purgecss": "0.2.0",
         "vitest": "^1.0.0"
       }
diff --git a/package.json b/package.json
index 4c071fde..76ac6367 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "tailwindcss": "3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.3",
+    "vite": "^5.0.12",
     "vite-plugin-tailwind-purgecss": "0.2.0",
     "vitest": "^1.0.0"
   },

From 6286b9bb1d3ae56df6ed5c9db1b99458885d6b7b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:31:32 -0500
Subject: [PATCH 2/5] Bump @sveltejs/kit from 2.0.2 to 2.4.3 (#3)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 553131fe..566e1b78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@skeletonlabs/tw-plugin": "0.3.0",
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/adapter-node": "^2.0.0",
-        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/kit": "^2.4.3",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@tailwindcss/forms": "0.5.7",
         "@tailwindcss/typography": "0.5.10",
diff --git a/package.json b/package.json
index 76ac6367..1c6c22b1 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@skeletonlabs/tw-plugin": "0.3.0",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^2.0.0",
-    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/kit": "^2.4.3",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.10",

From 9bdb301cf18e96de55e1fd2e5136d38cd931fd62 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:32:49 -0500
Subject: [PATCH 3/5] Bump @sveltejs/adapter-node from 2.0.0 to 2.1.2 (#2)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 566e1b78..48816c1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@skeletonlabs/skeleton": "2.6.0",
         "@skeletonlabs/tw-plugin": "0.3.0",
         "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/adapter-node": "^2.0.0",
+        "@sveltejs/adapter-node": "^2.1.2",
         "@sveltejs/kit": "^2.4.3",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@tailwindcss/forms": "0.5.7",
diff --git a/package.json b/package.json
index 1c6c22b1..c28fa6d6 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@skeletonlabs/skeleton": "2.6.0",
     "@skeletonlabs/tw-plugin": "0.3.0",
     "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/adapter-node": "^2.0.0",
+    "@sveltejs/adapter-node": "^2.1.2",
     "@sveltejs/kit": "^2.4.3",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tailwindcss/forms": "0.5.7",

From 34d834e089c096d49ef514fb58c7fb64f89849a6 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.r.piatt@gmail.com>
Date: Thu, 8 Feb 2024 15:18:52 -0500
Subject: [PATCH 4/5] [ALS-5794] Add navigation and layout elements (#4)

- Change formatting rule to replace tabs with spaces
- Add fort awesome for icon support
---
 src/lib/content.svelte    | 10 ++++++++++
 src/lib/navigation.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 tests/test.ts             | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/lib/content.svelte
 create mode 100644 src/lib/navigation.svelte
 create mode 100644 tests/test.ts

diff --git a/src/lib/content.svelte b/src/lib/content.svelte
new file mode 100644
index 00000000..884b9314
--- /dev/null
+++ b/src/lib/content.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let title = 'Unknown page title';
+</script>
+
+<section class="main-content">
+  <h1 class="h1 mb-4">
+    {title}
+  </h1>
+  <slot />
+</section>
diff --git a/src/lib/navigation.svelte b/src/lib/navigation.svelte
new file mode 100644
index 00000000..a80d64a2
--- /dev/null
+++ b/src/lib/navigation.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { AppBar } from '@skeletonlabs/skeleton';
+  import logo from '$lib/assets/app-logo.png';
+
+  const routes = [
+    { path: '/', id: 'home', text: 'Home' },
+    { path: '/explorer', text: 'Query Builder' },
+    { path: '/users', text: 'Users' },
+    { path: '/api', text: 'API' },
+    { path: '/dataset', text: 'Dataset Management' },
+    { path: '/help', text: 'Help' },
+    { path: '/admin', text: 'Admin' },
+    { path: '/admin/super', text: 'Super Admin' },
+    { path: '/#', id: 'logout', text: 'Logout' }
+  ];
+
+  function getId({ path, id }: { path: string; id?: string; text: string }) {
+    return `nav-link` + (id ? `-` + id : path.replaceAll('/', '-'));
+  }
+</script>
+
+<AppBar padding="p-0">
+  <svelte:fragment slot="lead">
+    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
+  </svelte:fragment>
+  <svelte:fragment slot="trail">
+    <nav id="page-navigation">
+      {#each routes as route}
+        <a
+          id={getId(route)}
+          href={route.path}
+          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
+        >
+      {/each}
+    </nav>
+  </svelte:fragment>
+</AppBar>
diff --git a/tests/test.ts b/tests/test.ts
new file mode 100644
index 00000000..47dc5729
--- /dev/null
+++ b/tests/test.ts
@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+const routes = [
+  { path: '/', id: 'nav-link-home', headerText: 'Home' },
+  { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
+  { path: '/users', id: 'nav-link-users', headerText: 'Users' },
+  { path: '/api', id: 'nav-link-api', headerText: 'API' },
+  { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
+  { path: '/help', id: 'nav-link-help', headerText: 'Help' },
+  { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
+  { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
+];
+
+test.describe('Navigation', () => {
+  routes.forEach((route) => {
+    test(`${route.path} page has expected heading`, async ({ page }) => {
+      await page.goto('/');
+      const navItem = page.locator('#' + route.id);
+      await navItem.click();
+      await expect(page.locator('.main-content>h1')).toHaveText(route.headerText);
+    });
+    test(`${route.path} navigation bar has correct active element`, async ({ page }) => {
+      await page.goto(route.path);
+
+      // Check that this element is active
+      const navItem = page.locator('#' + route.id);
+      await expect(navItem).toHaveAttribute('aria-current', 'page');
+
+      // Check that other elements aren't active
+      const inactive = routes
+        .filter((altRoute) => altRoute.path !== route.path)
+        .map((altRoute) => {
+          const navItem = page.locator('#' + altRoute.id);
+          return expect(navItem).not.toHaveAttribute('aria-current');
+        });
+      await Promise.all(inactive);
+    });
+  });
+});

From 914354a4f94d4c5def24df0141dccd10286dafec Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 20 Feb 2024 10:01:26 -0500
Subject: [PATCH 5/5] [ALS-5909] Landing Page in New UI

---
 .eslintrc.cjs                          |  14 +-
 .prettierrc                            |   2 +-
 package-lock.json                      |  27 ++--
 package.json                           |   5 +-
 pic-sure-theme.ts                      |   4 +-
 playwright.config.ts                   |   4 +-
 postcss.config.cjs                     |   4 +-
 src/lib/component/navigation.svelte    |  12 +-
 src/lib/configuration.ts               |  44 +++++++
 src/lib/models/value.ts                |   5 +
 src/lib/navigation.svelte              |  38 ------
 src/routes/+page.svelte                | 176 ++++++++++++++++++++++++-
 svelte.config.js                       |   6 +-
 tailwind.config.ts                     |  12 +-
 tests/lib/component/navigation/test.ts |  13 +-
 tests/routes/landing/test.ts           |  80 +++++++++++
 tests/test.ts                          |  39 ------
 vite.config.ts                         |   2 +-
 18 files changed, 360 insertions(+), 127 deletions(-)
 create mode 100644 src/lib/models/value.ts
 delete mode 100644 src/lib/navigation.svelte
 create mode 100644 tests/routes/landing/test.ts
 delete mode 100644 tests/test.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7f32e64b..e5111869 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -5,27 +5,27 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:svelte/recommended',
-    'prettier'
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
-    extraFileExtensions: ['.svelte']
+    extraFileExtensions: ['.svelte'],
   },
   env: {
     browser: true,
     es2017: true,
-    node: true
+    node: true,
   },
   overrides: [
     {
       files: ['*.svelte'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
-  ]
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
 };
diff --git a/.prettierrc b/.prettierrc
index 0580f3e9..b4cde23e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
   "useTabs": false,
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
diff --git a/package-lock.json b/package-lock.json
index 48816c1b..28c9e347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "dotenv": "^16.3.1"
       },
       "devDependencies": {
-        "@playwright/test": "^1.28.1",
+        "@playwright/test": "^1.42.0",
         "@skeletonlabs/skeleton": "2.6.0",
         "@skeletonlabs/tw-plugin": "0.3.0",
         "@sveltejs/adapter-auto": "^3.0.0",
@@ -35,9 +35,10 @@
         "prettier-plugin-svelte": "^3.1.2",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
+        "svelte-eslint-parser": "^0.33.1",
         "tailwindcss": "3.3.6",
         "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
+        "typescript": "^5.3.3",
         "vite": "^5.0.12",
         "vite-plugin-tailwind-purgecss": "0.2.0",
         "vitest": "^1.0.0"
@@ -639,12 +640,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz",
-      "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.0.tgz",
+      "integrity": "sha512-2k1HzC28Fs+HiwbJOQDUwrWMttqSLUVdjCqitBOjdCD0svWOMQUVqrXX6iFD7POps6xXAojsX/dGBpKnjZctLA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.40.1"
+        "playwright": "1.42.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3496,12 +3497,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz",
-      "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.0.tgz",
+      "integrity": "sha512-Ko7YRUgj5xBHbntrgt4EIw/nE//XBHOKVKnBjO1KuZkmkhlbgyggTe5s9hjqQ1LpN+Xg+kHsQyt5Pa0Bw5XpvQ==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.40.1"
+        "playwright-core": "1.42.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3514,9 +3515,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.40.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz",
-      "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==",
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.0.tgz",
+      "integrity": "sha512-0HD9y8qEVlcbsAjdpBaFjmaTHf+1FeIddy8VJLeiqwhcNqGCBe4Wp2e8knpqiYbzxtxarxiXyNDw2cG8sCaNMQ==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
diff --git a/package.json b/package.json
index c28fa6d6..0ddef68c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "playwright": "playwright test --ui"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.42.0",
     "@skeletonlabs/skeleton": "2.6.0",
     "@skeletonlabs/tw-plugin": "0.3.0",
     "@sveltejs/adapter-auto": "^3.0.0",
@@ -37,9 +37,10 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "svelte-eslint-parser": "^0.33.1",
     "tailwindcss": "3.3.6",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-tailwind-purgecss": "0.2.0",
     "vitest": "^1.0.0"
diff --git a/pic-sure-theme.ts b/pic-sure-theme.ts
index 621222b9..c32a3174 100644
--- a/pic-sure-theme.ts
+++ b/pic-sure-theme.ts
@@ -96,6 +96,6 @@ export const picSureTheme: CustomThemeConfig = {
     '--color-surface-600': '167 167 167', // #a7a7a7
     '--color-surface-700': '140 140 140', // #8c8c8c
     '--color-surface-800': '112 112 112', // #707070
-    '--color-surface-900': '91 91 91' // #5b5b5b
-  }
+    '--color-surface-900': '91 91 91', // #5b5b5b
+  },
 };
diff --git a/playwright.config.ts b/playwright.config.ts
index a458c6af..49812fed 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -3,11 +3,11 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   webServer: {
     command: 'npm run build && npm run preview',
-    port: 4173
+    port: 4173,
   },
   testDir: 'tests',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-  reporter: [['list'], ['html']]
+  reporter: [['list'], ['html']],
 };
 
 export default config;
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 5cbc2c7d..12a703d9 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };
diff --git a/src/lib/component/navigation.svelte b/src/lib/component/navigation.svelte
index a6d8ae3e..80650dfe 100644
--- a/src/lib/component/navigation.svelte
+++ b/src/lib/component/navigation.svelte
@@ -4,14 +4,14 @@
   import logo from '$lib/assets/app-logo.png';
 
   const routes = [
-    { path: '/', id: 'home', text: 'Home' },
     { path: '/explorer', text: 'Query Builder' },
     { path: '/users', text: 'Users' },
     { path: '/api', text: 'API' },
     { path: '/dataset', text: 'Dataset Management' },
     { path: '/help', text: 'Help' },
     { path: '/admin', text: 'Admin' },
-    { path: '/#', id: 'logout', text: 'Logout' }
+    { path: '/admin/super', text: 'Super Admin' },
+    { path: '/#', id: 'logout', text: 'Logout' },
   ];
 
   function getId({ path, id }: { path: string; id?: string; text: string }) {
@@ -21,7 +21,9 @@
 
 <AppBar padding="p-0">
   <svelte:fragment slot="lead">
-    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
+    <a href="/" aria-current="page"
+      ><img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" /></a
+    >
   </svelte:fragment>
   <svelte:fragment slot="trail">
     <nav id="page-navigation">
@@ -29,10 +31,8 @@
         <a
           id={getId(route)}
           href={route.path}
-          aria-current={$page.url.pathname === route.path ? 'page' : undefined}
+          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
         >
-          {route.text}
-        </a>
       {/each}
     </nav>
   </svelte:fragment>
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index 5f354cd7..db8dbdc8 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -1,4 +1,48 @@
 export const branding = {
+  landing: {
+    searchPlaceholder: 'Search terms or variables of interest…',
+    description:
+      'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.',
+    actions: [
+      {
+        description: 'Explore data, apply filters, and build cohorts',
+        icon: 'fa-solid fa-magnifying-glass fa-5x',
+        url: '/explorer',
+      },
+      {
+        description: 'Manage Previously Saved Datasets',
+        icon: 'fa-solid fa-table-list fa-5x',
+        url: '/dataset',
+      },
+      {
+        description: 'Take a tour of the PIC-SURE API',
+        icon: 'fa-solid fa-route fa-5x',
+        url: '/explorer?tour=true',
+      },
+      {
+        description: 'Learn more about PIC‑SURE',
+        icon: 'fa-solid fa-circle-question fa-5x',
+        url: 'https://pic-sure.org/about',
+      },
+    ],
+    stats: [
+      {
+        title: 'Data Sources',
+        value: '10',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Variables',
+        value: '1,000,000',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Participants with Genomic Data',
+        value: '1,000',
+        valueSrc: undefined,
+      },
+    ],
+  },
   help: {
     links: [
       {
diff --git a/src/lib/models/value.ts b/src/lib/models/value.ts
new file mode 100644
index 00000000..3a0ea9db
--- /dev/null
+++ b/src/lib/models/value.ts
@@ -0,0 +1,5 @@
+export interface Value {
+  title: string;
+  value?: string;
+  valueSrc?: string;
+}
diff --git a/src/lib/navigation.svelte b/src/lib/navigation.svelte
deleted file mode 100644
index a80d64a2..00000000
--- a/src/lib/navigation.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import { AppBar } from '@skeletonlabs/skeleton';
-  import logo from '$lib/assets/app-logo.png';
-
-  const routes = [
-    { path: '/', id: 'home', text: 'Home' },
-    { path: '/explorer', text: 'Query Builder' },
-    { path: '/users', text: 'Users' },
-    { path: '/api', text: 'API' },
-    { path: '/dataset', text: 'Dataset Management' },
-    { path: '/help', text: 'Help' },
-    { path: '/admin', text: 'Admin' },
-    { path: '/admin/super', text: 'Super Admin' },
-    { path: '/#', id: 'logout', text: 'Logout' }
-  ];
-
-  function getId({ path, id }: { path: string; id?: string; text: string }) {
-    return `nav-link` + (id ? `-` + id : path.replaceAll('/', '-'));
-  }
-</script>
-
-<AppBar padding="p-0">
-  <svelte:fragment slot="lead">
-    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
-  </svelte:fragment>
-  <svelte:fragment slot="trail">
-    <nav id="page-navigation">
-      {#each routes as route}
-        <a
-          id={getId(route)}
-          href={route.path}
-          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
-        >
-      {/each}
-    </nav>
-  </svelte:fragment>
-</AppBar>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 309a0e67..f505af32 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,175 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import { branding } from '$lib/configuration';
+  import { ProgressRadial } from '@skeletonlabs/skeleton';
+  import type { Value } from '$lib/models/value';
+  import * as api from '$lib/api';
+  import { goto } from '$app/navigation';
+
+  let values: Value[];
+  let searchTerm = '';
+
+  let getValues = async function () {
+    values = await Promise.all(
+      branding.landing.stats.map(async (stat) => {
+        try {
+          if (!stat.valueSrc) {
+            return { value: stat.value, title: stat.title };
+          }
+          const value = await api.get(stat.valueSrc); //TODO: create endpoints
+          return { value, title: stat.title } as Value;
+        } catch (e) {
+          console.error(e);
+          return { value: 'N/A', title: stat.title };
+        }
+      }),
+    );
+  };
+
+  function search() {
+    goto(`/explorer?search=${searchTerm}`);
+  }
 </script>
 
-<Content title="Home">
-  <p>Sample page data for the home page.</p>
-</Content>
+<div id="landing" class="landing">
+  <section id="search-section" class="flex flex-col text-center items-center search-section">
+    <div class="flex w-full">
+      <input
+        id="search-box"
+        type="search"
+        autocomplete="off"
+        class="search-box"
+        aria-label="Type search terms here, use enter or the search button to submit search"
+        title="Type search terms here, use enter or the search button to submit search"
+        placeholder={branding.landing.searchPlaceholder || 'Search...'}
+        bind:value={searchTerm}
+        on:keydown={(e) => e.key === 'Enter' && search()}
+        required
+      />
+      <button
+        id="search-button"
+        class="btn variant-filled-primary search-button"
+        aria-label="Search"
+        title="Search"
+        disabled={!searchTerm}
+        on:click={search}>Search</button
+      >
+    </div>
+    <p>
+      {branding.landing.description ||
+        'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.'}
+    </p>
+  </section>
+  <section class="actions">
+    {#each branding.landing.actions as link}
+      <a href={link.url} target={link.url.startsWith('/') ? undefined : '_blank'} tabindex="0">
+        <i class={link.icon} />
+        <div>{link.description}</div>
+      </a>
+    {/each}
+  </section>
+  <section class="stats">
+    {#await getValues()}
+      {#each branding.landing.stats as stat}
+        <div id="value-{stat.title}" class="flex flex-col justify-center items-center">
+          <ProgressRadial width="w-10" value={undefined} />
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {:then}
+      {#each values as stat}
+        <div class="flex flex-col">
+          <div id="value-{stat.title}" class="flex flex-col justify-center items-center">
+            {stat.value}
+          </div>
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {:catch}
+      {#each branding.landing.stats as stat}
+        <div class="flex flex-col">
+          <div id="value-{stat.title}" class="flex flex-col justify-center items-center">N/A</div>
+          <p>{stat.title}</p>
+        </div>
+      {/each}
+    {/await}
+  </section>
+</div>
+
+<style>
+  #landing {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  #landing input[type='search'] {
+    width: 100%;
+    box-sizing: border-box;
+    margin-right: 0.5rem;
+    @apply input;
+  }
+
+  #landing .stats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 70%;
+    margin: 2rem 0;
+    padding: 2rem;
+    @apply card variant-filled-primary;
+  }
+
+  #landing #search-section p {
+    max-width: 50rem;
+    margin: 1rem 0;
+    color: grey;
+  }
+
+  #landing section#search-section {
+    width: 70%;
+  }
+
+  #landing .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin: 2rem 0;
+  }
+
+  #landing .actions a {
+    color: rgb(var(--text-secondary-500));
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    max-width: 12.5rem;
+    padding: 1rem 0.5rem;
+    margin: 0.3rem;
+  }
+
+  #landing .actions a i {
+    color: rgb(var(--color-primary-500));
+  }
+
+  #landing .actions a:hover,
+  #landing .actions a:active {
+    transform: scale(1.05);
+  }
+  #landing .stats .stat {
+    max-width: 10rem;
+  }
+
+  #landing .stats div {
+    font-size: 1.5rem;
+  }
+
+  #landing .stats p {
+    font-size: 1rem;
+  }
+</style>
diff --git a/svelte.config.js b/svelte.config.js
index cb51dadb..a76efce3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,13 +9,13 @@ const config = {
   preprocess: [vitePreprocess()],
 
   vitePlugin: {
-    inspector: true
+    inspector: true,
   },
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter()
-  }
+    adapter: adapter(),
+  },
 };
 export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6a78f92e..608a53cc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,18 +9,18 @@ export default {
   darkMode: 'class',
   content: [
     './src/**/*.{html,js,svelte,ts}',
-    join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+    join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}'),
   ],
   theme: {
-    extend: {}
+    extend: {},
   },
   plugins: [
     forms,
     typography,
     skeleton({
       themes: {
-        custom: [picSureTheme]
-      }
-    })
-  ]
+        custom: [picSureTheme],
+      },
+    }),
+  ],
 } satisfies Config;
diff --git a/tests/lib/component/navigation/test.ts b/tests/lib/component/navigation/test.ts
index 3d3156f1..6c3f82e0 100644
--- a/tests/lib/component/navigation/test.ts
+++ b/tests/lib/component/navigation/test.ts
@@ -6,7 +6,6 @@ import { datasets as mockData } from '../../../mock-data';
 
 test.describe('navigation', () => {
   const routes = [
-    { path: '/', id: 'nav-link-home', headerText: 'Home' },
     { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
     { path: '/users', id: 'nav-link-users', headerText: 'Users' },
     { path: '/api', id: 'nav-link-api', headerText: 'API' },
@@ -43,6 +42,18 @@ test.describe('navigation', () => {
       await Promise.all(inactive);
     });
   });
+  test('Clicking the logo navigates to the landing page', async ({ page }) => {
+    // Given
+    await page.goto('/help');
+
+    // When
+    const logo = page.locator('#nav-logo');
+    await logo.click();
+
+    // Then
+    await expect(page).toHaveURL('/');
+    await expect(page.locator('#search-box')).toBeVisible();
+  });
   test('Print page hides navigation links', async ({ page }) => {
     // Given
     await page.goto('/');
diff --git a/tests/routes/landing/test.ts b/tests/routes/landing/test.ts
new file mode 100644
index 00000000..fb95192d
--- /dev/null
+++ b/tests/routes/landing/test.ts
@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import { test } from '../../custom-context';
+import { branding } from '../../../src/lib/configuration';
+
+test.describe('Landing page', () => {
+  test('Has expected search to go to explorer', async ({ page }) => {
+    // Given
+    await page.goto('/');
+    // When
+    await page.fill('input', 'test');
+    await page.keyboard.press('Enter');
+    // Then
+    await expect(page).toHaveURL('/explorer?search=test');
+  });
+  test('Has expected search to go to explorer with spaces', async ({ page }) => {
+    // Given
+    await page.goto('/');
+    // When
+    await page.fill('input', 'test with spaces');
+    await page.keyboard.press('Enter');
+    // Then
+    await expect(page).toHaveURL('/explorer?search=test%20with%20spaces');
+  });
+  branding.landing.stats.forEach(({ title, value, valueSrc }) => {
+    test(`Has expected stat of title: ${title}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      await expect(page.getByText(title, { exact: true })).toBeVisible();
+    });
+    test(`Has expected stat of value: ${value}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      //TODO: update to a better test when
+      if (!valueSrc) {
+        await expect(page.getByText(value, { exact: true })).toBeVisible();
+      }
+    });
+  });
+  branding.landing.actions.forEach(({ description, icon, url }) => {
+    test(`Has expected action of description: ${description}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      await expect(page.getByText(description, { exact: true })).toBeVisible();
+    });
+    test(`Has expected icon of: ${icon}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+      // Then
+      const iconElement = page.locator(`.${icon.replaceAll(' ', '.')}`);
+      const pattern = new RegExp(`^${icon}.*`);
+      await expect(iconElement).toBeVisible();
+      await expect(iconElement).toHaveClass(pattern);
+    });
+    test(`Card "${description}"'s click leads to ${url}`, async ({ page }) => {
+      // Given
+      await page.goto('/');
+
+      // When
+      const action = page.getByText(description, { exact: true }).locator('..');
+      await action.isVisible();
+
+      // Then
+      if ((await action.getAttribute('target')) !== '_blank') {
+        await action.click();
+        await expect(page).toHaveURL(`${url}`);
+      } else {
+        //check if new tab opened
+        const newTabPromise = page.waitForEvent('popup');
+        await action.click();
+        const newPage = await newTabPromise;
+        await newPage.waitForLoadState();
+        await expect(newPage).not.toBeNull();
+        await expect(newPage).toHaveURL(`${url}`);
+      }
+    });
+  });
+});
diff --git a/tests/test.ts b/tests/test.ts
deleted file mode 100644
index 47dc5729..00000000
--- a/tests/test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-const routes = [
-  { path: '/', id: 'nav-link-home', headerText: 'Home' },
-  { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
-  { path: '/users', id: 'nav-link-users', headerText: 'Users' },
-  { path: '/api', id: 'nav-link-api', headerText: 'API' },
-  { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
-  { path: '/help', id: 'nav-link-help', headerText: 'Help' },
-  { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
-  { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
-];
-
-test.describe('Navigation', () => {
-  routes.forEach((route) => {
-    test(`${route.path} page has expected heading`, async ({ page }) => {
-      await page.goto('/');
-      const navItem = page.locator('#' + route.id);
-      await navItem.click();
-      await expect(page.locator('.main-content>h1')).toHaveText(route.headerText);
-    });
-    test(`${route.path} navigation bar has correct active element`, async ({ page }) => {
-      await page.goto(route.path);
-
-      // Check that this element is active
-      const navItem = page.locator('#' + route.id);
-      await expect(navItem).toHaveAttribute('aria-current', 'page');
-
-      // Check that other elements aren't active
-      const inactive = routes
-        .filter((altRoute) => altRoute.path !== route.path)
-        .map((altRoute) => {
-          const navItem = page.locator('#' + altRoute.id);
-          return expect(navItem).not.toHaveAttribute('aria-current');
-        });
-      await Promise.all(inactive);
-    });
-  });
-});
diff --git a/vite.config.ts b/vite.config.ts
index 79292926..029003f0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,5 +3,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit(), purgeCss()]
+  plugins: [sveltekit(), purgeCss()],
 });