Open up for signups

Signed-off-by: Marko Anastasov <[email protected]>

Author: markoa

.dev.vars.example

@@ -8,4 +8,6 @@ PUBLIC_LINKEDIN_URL="https://www.linkedin.com/company/92810497/"
 PUBLIC_X_URL="https://x.com/operately"
 PUBLIC_YOUTUBE_URL="https://www.youtube.com/@operately"
 PUBLIC_CLOUD_WAITLIST_URL="https://docs.google.com/forms/d/e/1FAIpQLSebV6j1nIvyjvyLptZ95mHXoj42XrnBmd5znVnUzU_6ATAJgw/viewform"
-PUBLIC_BOOK_A_DEMO_URL=""
+PUBLIC_BOOK_A_DEMO_URL=""
+SIGN_UP_URL="https://app.operately.com/sign_up"
+LOG_IN_URL="https://app.operately.com/log_in"

.env

@@ -7,3 +7,5 @@ PUBLIC_X_URL="https://x.com/operately"
 PUBLIC_YOUTUBE_URL="https://www.youtube.com/@operately"
 PUBLIC_CLOUD_WAITLIST_URL="https://docs.google.com/forms/d/e/1FAIpQLSebV6j1nIvyjvyLptZ95mHXoj42XrnBmd5znVnUzU_6ATAJgw/viewform"
 PUBLIC_BOOK_A_DEMO_URL="https://calendar.app.google/TG8G5urd1HEG6SZV6 "
+SIGN_UP_URL="https://app.operately.com/sign_up"
+LOG_IN_URL="https://app.operately.com/log_in"

src/components/Footer.astro

@@ -12,11 +12,12 @@ const githubUrl = import.meta.env.PUBLIC_GITHUB_URL;
 const linkedinUrl = import.meta.env.PUBLIC_LINKEDIN_URL;
 const xUrl = import.meta.env.PUBLIC_X_URL;
 const youtubeUrl = import.meta.env.PUBLIC_YOUTUBE_URL;
-const bookaDemoUrl = import.meta.env.PUBLIC_BOOK_A_DEMO_URL;
+const signUpUrl = import.meta.env.SIGN_UP_URL;
+const logInUrl = import.meta.env.LOG_IN_URL;
 
 const navigation = {
   product: [
-    { name: "Book a demo", href: bookaDemoUrl },
+    { name: "Features", href: "/features" },
     { name: "Releases", href: "/releases" },
     { name: "Roadmap", href: "/roadmap" },
     { name: "Status", href: "https://status.operately.com" },
@@ -37,10 +38,10 @@ const navigation = {
     },
     { name: "Jobs", href: "/jobs" },
   ],
-  legal: [
-    { name: "Terms of service", href: "/legal/terms" },
-    { name: "Privacy policy", href: "/legal/privacy-policy" },
-    { name: "Security policy", href: "/legal/security-policy" },
+  getStarted: [
+    { name: "Sign up", href: signUpUrl },
+    { name: "Log in", href: logInUrl },
+    { name: "Self-host", href: "/install" },
   ],
   social: [
     {
@@ -69,6 +70,11 @@ const navigation = {
       icon: (props) => YouTubeIcon(props),
     },
   ],
+  legal: [
+    { name: "Terms of service", href: "/legal/terms" },
+    { name: "Privacy policy", href: "/legal/privacy-policy" },
+    { name: "Security policy", href: "/legal/security-policy" },
+  ],
 };
 ---
 
@@ -155,10 +161,10 @@ const navigation = {
             </ul>
           </div>
           <div class="mt-10 md:mt-0">
-            <h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
+            <h3 class="text-sm/6 font-semibold text-gray-900">Get Started</h3>
             <ul role="list" class="mt-6 space-y-4">
               {
-                navigation.legal.map((item) => (
+                navigation.getStarted.map((item) => (
                   <li>
                     <a
                       href={item.href}
@@ -175,13 +181,27 @@ const navigation = {
       </div>
     </div>
     <div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
-      <p class="text-sm/6 text-gray-600">
-        &copy; {new Date().getFullYear()} Operately doo · All rights reserved ·
-        <a
-          href="https://github.com/operately/website"
-          class="hover:text-operately-blue">Source</a
-        >
-      </p>
+      <div class="flex items-center justify-between">
+        <p class="text-sm/6 text-gray-600">
+          &copy; {new Date().getFullYear()} Operately doo · All rights reserved ·
+          <a
+            href="https://github.com/operately/website"
+            class="hover:text-operately-blue">Source</a
+          >
+        </p>
+        <div class="flex gap-x-8">
+          {
+            navigation.legal.map((item) => (
+              <a
+                href={item.href}
+                class="text-sm/6 text-gray-600 hover:text-operately-blue"
+              >
+                {item.name}
+              </a>
+            ))
+          }
+        </div>
+      </div>
     </div>
   </div>
 </footer>

src/components/Navigation.jsx

@@ -1,6 +1,7 @@
 "use client";
 
-const cloudWaitlistUrl = import.meta.env.PUBLIC_CLOUD_WAITLIST_URL;
+const signUpUrl = import.meta.env.SIGN_UP_URL;
+const logInUrl = import.meta.env.LOG_IN_URL;
 const bookaDemoUrl = import.meta.env.PUBLIC_BOOK_A_DEMO_URL;
 const discordUrl = import.meta.env.PUBLIC_DISCORD_URL;
 const blogUrl = import.meta.env.PUBLIC_BLOG_URL;
@@ -23,13 +24,11 @@ import {
 } from "@headlessui/react";
 
 import {
-  ArrowUp,
   ChevronDown,
   Layout,
   PackageCheck,
   Binoculars,
   CalendarDays,
-  Mail,
   Menu,
   X,
 } from "lucide-react";
@@ -101,7 +100,7 @@ export default function Navigation() {
             <Menu aria-hidden="true" className="size-6" />
           </button>
         </div>
-        <PopoverGroup className="hidden lg:flex lg:gap-x-12">
+        <PopoverGroup className="hidden lg:flex lg:gap-x-8">
           {/* Product menu */}
           <Popover className="relative">
             <PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900">
@@ -176,21 +175,28 @@ export default function Navigation() {
         </PopoverGroup>
 
         {/* CTAs */}
-        <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-6">
+        <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-4">
           <a
             href={bookaDemoUrl}
             rel="nofollow"
-            className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className="text-sm font-semibold text-gray-900 hover:text-edgy-blue whitespace-nowrap"
           >
             Book a demo
           </a>
+          <div className="h-6 w-px bg-gray-200" aria-hidden="true" />
           <a
-            href={cloudWaitlistUrl}
+            href={logInUrl}
             rel="nofollow"
-            className="inline-flex items-center gap-x-1.5 rounded-md bg-edgy-blue px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-operately-blue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-edgy-blue"
+            className="text-sm font-semibold text-gray-900 hover:text-edgy-blue whitespace-nowrap"
           >
-            Join cloud waitlist
-            <Mail aria-hidden="true" className="size-5 -mr-0.5" />
+            Log in
+          </a>
+          <a
+            href={signUpUrl}
+            rel="nofollow"
+            className="inline-flex items-center gap-x-1.5 rounded-md bg-edgy-blue px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-operately-blue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-edgy-blue whitespace-nowrap"
+          >
+            Get Operately free
           </a>
         </div>
       </nav>
@@ -279,15 +285,24 @@ export default function Navigation() {
               <div className="py-6">
                 <a
                   href={bookaDemoUrl}
+                  rel="nofollow"
                   className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                 >
                   Book a demo
                 </a>
                 <a
-                  href={cloudWaitlistUrl}
+                  href={logInUrl}
+                  rel="nofollow"
                   className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                 >
-                  Join cloud waitlist
+                  Log in
+                </a>
+                <a
+                  href={signUpUrl}
+                  rel="nofollow"
+                  className="mt-4 block rounded-md bg-edgy-blue px-3 py-2 text-center text-base/7 font-semibold text-white shadow-sm hover:bg-operately-blue"
+                >
+                  Get Operately free
                 </a>
               </div>
             </div>

src/pages/_features/CTA.astro

@@ -1,5 +1,5 @@
 ---
-const waitlistUrl = import.meta.env.PUBLIC_CLOUD_WAITLIST_URL;
+const signUpUrl = import.meta.env.SIGN_UP_URL;
 ---
 
 <div class="bg-white">
@@ -17,9 +17,9 @@ const waitlistUrl = import.meta.env.PUBLIC_CLOUD_WAITLIST_URL;
       </p>
       <div class="mt-10 flex items-center justify-center gap-x-6">
         <a
-          href={waitlistUrl}
+          href={signUpUrl}
           class="rounded-md bg-operately-blue px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-operately-dark-blue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:bg-operately-dark-blue"
-          >Join cloud waitlist</a
+          >Get Operately free</a
         >
         <a href="/install" class="text-sm font-semibold leading-6 text-gray-900"
           >Self-host today <span aria-hidden="true">→</span></a

src/pages/_index/Hero.astro

@@ -10,6 +10,7 @@ interface Props {
 }
 
 const { latestRelease } = Astro.props;
+const signUpUrl = import.meta.env.SIGN_UP_URL;
 ---
 
 <div class="bg-white">
@@ -63,10 +64,10 @@ const { latestRelease } = Astro.props;
           class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-y-4 sm:gap-y-0 gap-x-6"
         >
           <a
-            href="https://docs.google.com/forms/d/e/1FAIpQLSebV6j1nIvyjvyLptZ95mHXoj42XrnBmd5znVnUzU_6ATAJgw/viewform"
+            href={signUpUrl}
             class="rounded-md bg-edgy-blue px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-operately-blue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-edgy-blue w-auto inline-block"
           >
-            Join cloud waitlist
+            Get Operately free
           </a>
           <a
             href="/install"