Add team page

src/components/Navigation/Navigation.astro

@@ -27,9 +27,9 @@ import { AccountDropdown } from './AccountDropdown';
         <a href='/questions' class='text-gray-400 hover:text-white'>Questions</a
         >
       </li>
-      <li class='hidden lg:inline'>
+      <lif>
-        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
+        <a href='/teams' class='text-gray-400 hover:text-white'>Teams</a>
-      </li>
+      </lif>
       <li>
         <kbd
           data-command-menu

src/components/TeamMarketing/TeamPricing.tsx

@@ -1,22 +1,28 @@
 import { Check, CheckCircle, Copy, Sparkles } from 'lucide-react';
 import { useCopyText } from '../../hooks/use-copy-text.ts';
 import { cn } from '../../lib/classname.ts';
+import { isLoggedIn } from '../../lib/jwt.ts';
 
 export function TeamPricing() {
   const { isCopied, copyText } = useCopyText();
   const teamEmail = 'teams@roadmap.sh';
 
+  const isAuthenticated = isLoggedIn();
+
   return (
-      <div className="py-4 sm:py-8 md:py-12 border-t">
+    <div className="border-t py-4 sm:py-8 md:py-12">
       <div className="container">
-        <h2 className="mb-1 sm:mb-1.5 md:mb-2 text-xl sm:text-2xl md:text-3xl font-bold">Beta Pricing</h2>
+        <h2 className="mb-1 text-xl font-bold sm:mb-1.5 sm:text-2xl md:mb-2 md:text-3xl">
-        <p className="mb-4 sm:mb-8 text-base sm:text-lg text-gray-600">
+          Beta Pricing
-          We are currently in public beta and are offering free access to all features.
+        </h2>
+        <p className="mb-4 text-base text-gray-600 sm:mb-8 sm:text-lg">
+          We are currently in public beta and are offering free access to all
+          features.
         </p>
 
-        <div className="flex flex-col sm:flex-row gap-6 sm:gap-4">
+        <div className="flex flex-col gap-6 sm:flex-row sm:gap-4">
           <div className="relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border border-purple-500">
-            <div className="px-8 pb-2 pt-5 sm:pt-4 text-center">
+            <div className="px-8 pb-2 pt-5 text-center sm:pt-4">
               <h3 className="mb-1 text-2xl font-bold">Free</h3>
               <p className="text-sm text-gray-500">No credit card required</p>
               <p className="flex items-start justify-center gap-1 py-6 text-3xl">
@@ -25,14 +31,21 @@ export function TeamPricing() {
               </p>
 
               <a
-                href="/signup"
+                onClick={() => {
+                  if (isAuthenticated) {
+                    return;
+                  }
+
+                  localStorage.setItem('redirect', '/team/new');
+                }}
+                href={isAuthenticated ? '/team/new' : '/signup'}
                 className="block rounded-md bg-purple-600 px-6 py-2 text-center text-sm font-medium leading-6 text-white shadow transition hover:bg-gray-700 hover:shadow-lg focus:outline-none"
               >
-                Sign up for free
+                {isAuthenticated ? 'Create your Team' : 'Sign up for free'}
               </a>
             </div>
-            <div className="flex w-full flex-col gap-1 border-t px-8 py-5 sm:py-3 text-center">
+            <div className="flex w-full flex-col gap-1 border-t px-8 py-5 text-center sm:py-3">
-              <p className="text-black font-semibold">All the features</p>
+              <p className="font-semibold text-black">All the features</p>
               <p className="text-gray-600">Roles and Permissions</p>
               <p className="text-gray-600">Custom Roadmaps</p>
               <p className="text-gray-600">Sharing Options</p>
@@ -41,8 +54,12 @@ export function TeamPricing() {
               <p className="text-gray-600">Onboarding support</p>
             </div>
           </div>
-          <div className="flex py-8 flex-grow flex-col items-center justify-center rounded-md border border-gray-300">
+          <div className="flex flex-grow flex-col items-center justify-center rounded-md border border-gray-300 py-8">
-            <img alt={'waving hand'} src={'/images/team-promo/contact.png'} className="mb-3 h-40" />
+            <img
+              alt={'waving hand'}
+              src={'/images/team-promo/contact.png'}
+              className="mb-3 h-40"
+            />
             <p className="mb-2 font-medium text-gray-500">
               Questions? We are here to help!
             </p>