feat: include a navigation bar and login button

cloudproud · Oct 4, 2023 · 51092be · 51092be
1 parent ae99791
commit 51092be
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 7 deletions.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -24,6 +24,10 @@ concurrency:
   group: "pages"
   cancel-in-progress: false
 
+env:
+  VITE_SLACK_INVITE_URI: ${{ vars.VITE_SLACK_INVITE_URI }}
+  VITE_SIGN_UP_URI: ${{ vars.VITE_SIGN_UP_URI }}
+
 jobs:
   # Build job
   build:

diff --git a/components/Feature.vue b/components/Feature.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white py-24 sm:py-32">
+  <div class="bg-white py-24 sm:py-32" id="feature">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="mx-auto max-w-2xl lg:text-center">
         <h2 class="text-base font-semibold leading-7 text-indigo-600">Deploy faster</h2>

diff --git a/components/Footer.vue b/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-gray-900" aria-labelledby="footer-heading">
+  <footer class="bg-gray-900" aria-labelledby="footer-heading" id="footer">
     <h2 id="footer-heading" class="sr-only">Footer</h2>
     <div class="mx-auto max-w-7xl px-6 pb-8">
       <div class="pt-8 md:flex md:items-center md:justify-between">

diff --git a/components/Hero.vue b/components/Hero.vue
@@ -14,11 +14,28 @@
     <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]" aria-hidden="true">
       <div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)" />
     </div>
-    <div class="mx-auto max-w-7xl px-6 pt-10 lg:flex lg:px-8 lg:pt-40">
+    <div class="relative mx-auto max-w-7xl px-6 pt-10 lg:flex lg:px-8 lg:pt-40">
+      <div class="absolute w-full top-0 py-6 flex">
+        <div class="flex-1">
+          <div class="flex space-x-4">
+            <a v-for="item in navigation" :key="item.name" :href="item.href" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
+          </div>
+        </div>
+        <a :href="signUp">
+          <button type="button" class="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">
+            Login
+          </button>
+        </a>
+      </div>
+
       <div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl">
         <img class="h-11" src="@/assets/images/cloudproud-icon-dark.svg" alt="Cloud Proud" />
-        <h1 class="mt-10 text-4xl font-bold tracking-tight text-white sm:text-6xl">A single access point for all your data</h1>
-        <p class="mt-6 text-lg leading-8 text-gray-300">Interact with all your data as a virtual database. Simply connect your data sources and get started without having to build ETL pipelines or centralized data stores.</p>
+        <h1 class="mt-10 text-4xl font-bold tracking-tight text-white sm:text-6xl">
+          A single access point for all your data
+        </h1>
+        <p class="mt-6 text-lg leading-8 text-gray-300">
+          No copies, no ETL pipelines simply connect and query your data!
+        </p>
         <div class="mt-10 flex items-center gap-x-6">
           <a :href="signUp" class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Sign-up</a>
           <a :href="slack" class="text-sm font-semibold leading-6 text-white">Join our Slack! <span aria-hidden="true">→</span></a>
@@ -42,5 +59,10 @@
 
 <script setup>
 const slack = import.meta.env.VITE_SLACK_INVITE_URI
-const signUp = 'https://cloudproud.dev/sign-up'
+const signUp = import.meta.env.VITE_SIGN_UP_URI
+
+const navigation = [
+  { name: 'The Product', href: '#feature' },
+  { name: 'Contact', href: '#footer' },
+]
 </script>
diff --git a/components/Navigation.vue b/components/Navigation.vue
diff --git a/env.template b/env.template
@@ -1 +1,2 @@
-VITE_SLACK_INVITE_URI="<Insert API endpoint here>"
+VITE_SLACK_INVITE_URI="<Insert Slack invite URI here>"
+VITE_SIGN_UP_URI="<Insert Kit sign-up URI here>"