Add teams banner

src/components/HeroSection/EmptyProgress.tsx

@@ -1,23 +1,30 @@
 import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { TeamAnnouncement } from '../TeamAnnouncement';
 
 type EmptyProgressProps = {
-    title?: string;
-    message?: string;
+  title?: string;
+  message?: string;
 };
 
 export function EmptyProgress(props: EmptyProgressProps) {
-    const {
-        title = 'Start learning ..',
-        message = 'Your progress and favorite roadmaps will show up here.',
-    } = props;
+  const {
+    title = 'Start learning ..',
+    message = 'Your progress and favorite roadmaps will show up here.',
+  } = props;
 
-    return (
-        <div className="relative flex min-h-full flex-col items-start sm:items-center justify-center py-6">
-            <h2 className={'mb-1 flex items-center text-lg sm:text-2xl text-gray-200'}>
-                <CheckIcon additionalClasses='mr-2 top-[0.5px] w-[16px] h-[16px] sm:w-[20px] sm:h-[20px]' />
-                Start learning ..
-            </h2>
-            <p className={'text-gray-400 text-sm sm:text-base'}>{message}</p>
-        </div>
-    );
+  return (
+    <div className="relative flex min-h-full flex-col items-start justify-center py-6 sm:items-center">
+      <h2
+        className={'mb-1.5 flex items-center text-lg text-gray-200 sm:text-2xl'}
+      >
+        <CheckIcon additionalClasses="mr-2 top-[0.5px] w-[16px] h-[16px] sm:w-[20px] sm:h-[20px]" />
+        {title}
+      </h2>
+      <p className={'text-sm text-gray-400 sm:text-base'}>{message}</p>
+
+      <p className="mt-5">
+        <TeamAnnouncement />
+      </p>
+    </div>
+  );
 }

src/components/HeroSection/FavoriteRoadmaps.tsx

@@ -119,20 +119,23 @@ export function FavoriteRoadmaps() {
 
   return (
     <div
-      className={`flex min-h-[192px] bg-gradient-to-b transition-opacity duration-500 sm:min-h-[280px] opacity-${containerOpacity} ${
-        hasProgress && `border-t border-t-[#1e293c]`
-      }`}
+      className={`transition-opacity duration-500  opacity-${containerOpacity}`}
     >
-      <div className="container min-h-full">
-        {!isLoading && progress?.length == 0 && <EmptyProgress />}
-        {hasProgress && (
-          <HeroRoadmaps
-            showCustomRoadmaps={true}
-            customRoadmaps={customRoadmaps}
-            progress={defaultRoadmaps}
-            isLoading={isLoading}
-          />
-        )}
+      <div
+        className={`flex min-h-[192px] bg-gradient-to-b sm:min-h-[280px] ${
+          hasProgress && `border-t border-t-[#1e293c]`
+        }`}
+      >
+        <div className="container min-h-full">
+          {!isLoading && progress?.length == 0 && <EmptyProgress />}
+          {hasProgress && (
+            <HeroRoadmaps
+              customRoadmaps={customRoadmaps}
+              progress={defaultRoadmaps}
+              isLoading={isLoading}
+            />
+          )}
+        </div>
       </div>
     </div>
   );

src/components/HeroSection/HeroRoadmaps.tsx

@@ -7,6 +7,7 @@ import { MapIcon } from 'lucide-react';
 import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
 import { useState } from 'react';
+import { TeamAnnouncement } from '../TeamAnnouncement';
 
 type ProgressRoadmapProps = {
   url: string;
@@ -87,6 +88,9 @@ export function HeroRoadmaps(props: ProgressListProps) {
 
   return (
     <div className="relative pb-12 pt-4 sm:pt-7">
+      <p className="mb-7 text-sm mt-2">
+        <TeamAnnouncement />
+      </p>
       {isCreatingRoadmap && (
         <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
       )}

src/components/HeroSection/HeroSection.astro

@@ -1,23 +1,17 @@
 ---
 import { FavoriteRoadmaps } from './FavoriteRoadmaps';
+import {TeamAnnouncement} from "../TeamAnnouncement";
 ---
 
 <div
-  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] sm:min-h-[281px]'
+  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] sm:min-h-[281px] transition-all'
 >
   <div
     class='container px-5 py-6 pb-14 text-left transition-opacity duration-300 sm:px-0 sm:py-20 sm:text-center'
     id='hero-text'
   >
-    <p class='-mt-4 sm:-mt-10 mb-4 text-gray-300'>
-      <a href='/teams' class="hover:text-white">
-        <span
-          class='mr-1 rounded-sm border-black bg-white px-1 py-0.5 text-center text-xs font-semibold uppercase text-black group-hover:bg-white'
-          >New</span
-        >
-        <span class="hidden sm:inline ml-1">Announcing roadmaps for teams.</span>
-        <span class="inline-block sm:hidden ml-1">Roadmaps for teams.</span>
-      </a>
+    <p class='-mt-4 sm:-mt-10 mb-7'>
+      <TeamAnnouncement />
     </p>
 
     <h1

src/components/Navigation/Navigation.astro

@@ -2,7 +2,6 @@
 import Icon from '../AstroIcon.astro';
 import { AccountDropdown } from './AccountDropdown';
 ---
-
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
     <a

src/components/TeamAnnouncement.tsx

@@ -0,0 +1,16 @@
+type TeamAnnouncementProps = {};
+
+export function TeamAnnouncement(props: TeamAnnouncementProps) {
+  return (
+    <a
+      className="rounded-md border border-dashed border-purple-700 px-3 py-1.5 text-purple-400 transition-colors hover:border-gray-700 hover:text-white"
+      href="/teams"
+    >
+      <span className="relative -top-[0.5px] mr-1 text-xs font-semibold uppercase text-white">
+        New
+      </span>{' '}
+      <span className={'hidden sm:inline'}>Announcing roadmaps for teams. <span className='font-semibold'>Learn more!</span></span>
+      <span className={'inline sm:hidden'}>Announcing roadmaps for teams!</span>
+    </a>
+  );
+}

src/components/TeamMarketing/TeamDemo.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { cn } from '../../lib/classname.ts';
 import { isLoggedIn } from '../../lib/jwt.ts';
+import { fireTeamCreationClick } from './TeamHeroBanner.tsx';
 
 const demoItems = [
   {
@@ -56,7 +57,11 @@ export function TeamDemo() {
   const [hasViewed, setHasViewed] = useState<number[]>([0]);
   const [activeItem, setActiveItem] = useState(demoItems[0]);
 
-  const isAuthenticated = isLoggedIn();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
+
+  useEffect(() => {
+    setIsAuthenticated(isLoggedIn());
+  }, []);
 
   return (
     <div className="hidden border-t py-12 sm:block">
@@ -122,6 +127,7 @@ export function TeamDemo() {
               <div className="flex flex-row items-center gap-2">
                 <a
                   onClick={() => {
+                    fireTeamCreationClick();
                     if (isAuthenticated) {
                       return;
                     }
@@ -138,6 +144,7 @@ export function TeamDemo() {
                     or &nbsp;
                     <a
                       onClick={() => {
+                        fireTeamCreationClick();
                         localStorage.setItem('authRedirect', '/team/new');
                       }}
                       href="/login"

src/components/TeamMarketing/TeamHeroBanner.tsx

@@ -1,5 +1,6 @@
 import { CheckCircle, CheckCircle2, CheckIcon } from 'lucide-react';
 import { isLoggedIn } from '../../lib/jwt.ts';
+import { useEffect, useState } from 'react';
 
 const featureList = [
   'Create custom roadmaps for your team',
@@ -8,8 +9,21 @@ const featureList = [
   "Get insights on your team's skills and growth",
 ];
 
+export function fireTeamCreationClick() {
+  window.fireEvent({
+    category: 'FeatureClick',
+    action: `Pages / Teams`,
+    label: 'Create your Team',
+  });
+}
+
 export function TeamHeroBanner() {
-  const isAuthenticated = isLoggedIn();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
+
+  useEffect(() => {
+    setIsAuthenticated(isLoggedIn());
+  }, []);
+
   return (
     <div className="bg-white py-8 lg:py-12">
       <div className="container">
@@ -34,11 +48,7 @@ export function TeamHeroBanner() {
             <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
               <a
                 onClick={() => {
-                  if (isAuthenticated) {
-                    return;
-                  }
-
-                  localStorage.setItem('authRedirect', '/team/new');
+                  fireTeamCreationClick();
                 }}
                 href={isAuthenticated ? '/team/new' : '/signup'}
                 className="flex w-full items-center justify-center rounded-lg border border-transparent bg-purple-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 sm:w-auto sm:text-base"
@@ -52,6 +62,7 @@ export function TeamHeroBanner() {
                     <a
                       href="/login"
                       onClick={() => {
+                        fireTeamCreationClick();
                         localStorage.setItem('authRedirect', '/team/new');
                       }}
                       className="text-purple-600 underline  hover:text-purple-700"
@@ -62,6 +73,7 @@ export function TeamHeroBanner() {
                   <a
                     href="/login"
                     onClick={() => {
+                      fireTeamCreationClick();
                       localStorage.setItem('authRedirect', '/team/new');
                     }}
                     className="flex w-full items-center justify-center rounded-lg border border-purple-600 px-5 py-2 text-base text-sm font-medium text-purple-600 hover:bg-blue-700 sm:hidden sm:text-base"

src/components/TeamMarketing/TeamPricing.tsx

@@ -2,12 +2,18 @@ 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';
+import { fireTeamCreationClick } from './TeamHeroBanner.tsx';
+import { useEffect, useState } from 'react';
 
 export function TeamPricing() {
   const { isCopied, copyText } = useCopyText();
   const teamEmail = 'teams@roadmap.sh';
 
-  const isAuthenticated = isLoggedIn();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
+
+  useEffect(() => {
+    setIsAuthenticated(isLoggedIn());
+  }, []);
 
   return (
     <div className="border-t py-4 sm:py-8 md:py-12">
@@ -32,6 +38,7 @@ export function TeamPricing() {
 
               <a
                 onClick={() => {
+                  fireTeamCreationClick();
                   if (isAuthenticated) {
                     return;
                   }