From 9999dfb07af39612c045ea13780cbe5f699d7277 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 17 Dec 2024 10:46:59 -0600
Subject: [PATCH] add a hero for the index page with a wave at the bottom

needs a bit of work to ensure scrolling isn't annoying
---
 website/layouts/default.vue        | 27 +++++++++++++++------------
 website/pages/index.vue            | 21 +++++++++++++++++++++
 website/public/waveNounProject.svg |  4 ++++
 3 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 website/public/waveNounProject.svg

diff --git a/website/layouts/default.vue b/website/layouts/default.vue
index c1900c944..bebea6c0c 100644
--- a/website/layouts/default.vue
+++ b/website/layouts/default.vue
@@ -11,18 +11,21 @@ const hasRightSidebar = computed(() => {
 });
 </script>
 <template>
-    <div class="flex w-full">
-        <!-- Left sidebar -->
-        <div v-if="hasLeftSidebar" class="w-1/4 p-4 overflow-y-auto">
-            <slot name="leftSidebar"></slot>
-        </div>
-        <!-- Left side content -->
-        <div class="flex-1 p-4 overflow-y-auto">
-            <slot name="content"></slot>
-        </div>
-        <!-- Right sidebar -->
-        <div v-if="hasRightSidebar" class="w-1/4 p-4 overflow-y-auto">
-            <slot name="rightSidebar"></slot>
+    <div class="overflow-y-auto">
+        <slot name="hero"></slot>
+        <div class="flex w-full h-full">
+            <!-- Left sidebar -->
+            <div v-if="hasLeftSidebar" class="w-1/4 p-4 overflow-y-auto">
+                <slot name="leftSidebar"></slot>
+            </div>
+            <!-- Left side content -->
+            <div class="flex-1 p-4 overflow-y-auto">
+                <slot name="content"></slot>
+            </div>
+            <!-- Right sidebar -->
+            <div v-if="hasRightSidebar" class="w-1/4 p-4 overflow-y-auto">
+                <slot name="rightSidebar"></slot>
+            </div>
         </div>
     </div>
 </template>
diff --git a/website/pages/index.vue b/website/pages/index.vue
index 1daab578a..f3dcc718f 100644
--- a/website/pages/index.vue
+++ b/website/pages/index.vue
@@ -41,6 +41,27 @@ function selectWorkflow(workflow: Workflow) {
 
 <template>
     <NuxtLayout>
+        <template #hero>
+            <div class="container-fluid text-white text-center bg-ebony-clay p-8 space-y-6">
+                <h1 class="text-6xl mx-8" :style="{ 'font-weight': 700 }">
+                    Discover and run vetted analysis pipelines  on Galaxy
+                </h1>
+                <h3 class="text-xl mx-8" :style="{ 'font-weight': 600 }">
+                    Ready-to-use, open-source pipelines with sample data and training materials
+                    to make progress quickly and reliably.
+                </h3>
+            </div>
+            <div class="overflow-hidden p-0">
+                <svg
+                    viewBox="14 0 100 40"
+                    preserveAspectRatio="none"
+                    height="100"
+                    class="fill-ebony-clay w-full"
+                    :style="{ transform: 'rotate(180deg)' }">
+                    <use xlink:href="/waveNounProject.svg#path" />
+                </svg>
+            </div>
+        </template>
         <template #leftSidebar>
             <div class="sticky top-4 h-16">
                 <input
diff --git a/website/public/waveNounProject.svg b/website/public/waveNounProject.svg
new file mode 100644
index 000000000..dcaba2838
--- /dev/null
+++ b/website/public/waveNounProject.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128pt" height="128pt" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+ <path id="path" d="m101.95 19.387c-3.1953 3.1953-6.2109 6.2148-12.348 6.2148-6.1367 0-9.1523-3.0156-12.348-6.2109-3.2383-3.2422-6.5898-6.5898-13.254-6.5898-6.6641 0-10.012 3.3477-13.25 6.5859-3.1953 3.1953-6.2148 6.2148-12.348 6.2148-6.1328 0-9.1523-3.0156-12.348-6.2109-3.2383-3.2422-6.5859-6.5898-13.25-6.5898v102.4c6.6641 0 10.016-3.3477 13.254-6.5859 3.1953-3.1953 6.2109-6.2148 12.348-6.2148 6.1367 0 9.1523 3.0156 12.348 6.2109 3.2383 3.2422 6.5898 6.5898 13.254 6.5898 6.6641 0 10.012-3.3477 13.25-6.5859 3.1953-3.1953 6.2148-6.2148 12.348-6.2148 6.1328 0 9.1523 3.0156 12.348 6.2109 3.2383 3.2422 6.5859 6.5898 13.25 6.5898v-102.4c-6.6641 0-10.016 3.3477-13.254 6.5859z"/>
+</svg>