Add teams introduction page

src/components/TeamMarketing/TeamDemo.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { cn } from '../../lib/classname.ts';
+
+const demoItems = [
+  {
+    title: 'Roadmap Editor',
+    description:
+      '<span class="font-semibold">Powerful editor</span> to create custom roadmaps and other trackable documents',
+    image: '/images/team-promo/roadmap-editor.png',
+  },
+  {
+    title: 'Invite Members',
+    description:
+      'Invite your <span class="font-semibold">team members and assign roles</span>',
+    image: '/images/team-promo/invite-members.png',
+  },
+  {
+    title: 'Track Progress',
+    description:
+      'You and your team can <span class="font-semibold">track progress</span> on the roadmaps',
+    image: '/images/team-promo/update-progress.png',
+  },
+  {
+    title: 'Team Dashboard',
+    description:
+      'Keep an eye on the team progress through <span class="font-semibold">team dashboard</span>',
+    image: '/images/team-promo/team-dashboard.png',
+  },
+  {
+    title: 'Roadmaps and Documents',
+    description:
+      'Create as many <span class="font-semibold">roadmaps or trackable documents</span> as you want',
+    image: '/images/team-promo/many-roadmaps.png',
+  },
+  {
+    title: 'Community Roadmaps',
+    description:
+      'Create custom roadmaps or customize <span class="font-semibold">community roadmaps</span> to fit your needs',
+    image: '/images/team-promo/our-roadmaps.png',
+  },
+  {
+    title: 'Sharing Settings',
+    description:
+      'Share a roadmap or trackable document with <span class="font-semibold">everyone or specific people</span>',
+    image: '/images/team-promo/sharing-settings.png',
+  },
+  {
+    title: 'More Coming Soon!',
+    description:
+      '<span class="font-semibold">We have a lot more coming soon!</span>',
+  },
+];
+
+export function TeamDemo() {
+  const [hasViewed, setHasViewed] = useState<number[]>([0]);
+  const [activeItem, setActiveItem] = useState(demoItems[0]);
+
+  return (
+    <div className="border-t py-12 hidden sm:block">
+      <div className="container">
+        <h2 className="mb-2 text-3xl font-bold">See how it works</h2>
+        <p>Here is a sneak peek of what you can do today (more coming soon!)</p>
+
+        <div className="relative mt-7 flex flex-row items-center gap-2.5">
+          {demoItems.map((item, counter) => {
+            const isActive = item === activeItem;
+            const hasAlreadyViewed = hasViewed.includes(counter);
+
+            if (!isActive) {
+              return (
+                <span key={item.title} className="relative flex items-center">
+                  <span
+                    onClick={() => {
+                      setHasViewed([
+                          ...hasViewed,
+                          counter
+                      ])
+                      setActiveItem(item);
+                    }}
+                    className={cn('z-50 cursor-pointer rounded-full p-[6px]', {
+                      'bg-black': item === activeItem,
+                      'bg-gray-300 hover:bg-gray-400': item !== activeItem,
+                    })}
+                  />
+                  {!hasAlreadyViewed && <span className="pointer-events-none absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-400 opacity-75"></span> }
+                </span>
+              );
+            }
+
+            return (
+              <span key={item.title} className=" rounded-full bg-black px-3 py-0.5 text-sm text-white">
+                {activeItem.title}
+              </span>
+            );
+          })}
+        </div>
+        <div className="mt-4 overflow-hidden rounded-xl border border-gray-300">
+          <div className="p-3">
+            <p
+              className="text-base text-black"
+              dangerouslySetInnerHTML={{ __html: activeItem.description }}
+            />
+          </div>
+          {activeItem.image && (
+            <img
+              className="rounded-b-xl border-t"
+              src={activeItem.image}
+              alt=""
+            />
+          )}
+          {!activeItem.image && (
+            <div className="bg-gray-50 py-4 pl-3">
+              <p className="mb-3">
+                Register your team now and help us shape the future of teams in
+                roadmap.sh!
+              </p>
+              <div className="flex flex-row items-center gap-2">
+                <a
+                  href="/signup"
+                  className="inline-flex items-center justify-center rounded-lg border border-transparent bg-purple-600 px-5 py-2 text-base font-medium text-white hover:bg-purple-700"
+                >
+                  Create your Team
+                </a>
+                <span className="ml-1 text-base">
+                  or &nbsp;
+                  <a
+                    href="/login"
+                    className="text-purple-600 underline  hover:text-purple-700"
+                  >
+                    Login to your account
+                  </a>
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamMarketing/TeamHeroBanner.tsx

@@ -0,0 +1,65 @@
+import { CheckCircle, CheckCircle2, CheckIcon } from 'lucide-react';
+
+const featureList = [
+  'Invite your team members',
+  'Create custom roadmaps for your teams',
+  "Plan, track and document your team's skills and growth",
+  "Get insights on your team's skills and growth",
+];
+
+export function TeamHeroBanner() {
+  return (
+    <div className="bg-white py-8 lg:py-12">
+      <div className="container">
+        <div className="flex flex-row items-center justify-start text-left lg:justify-between">
+          <div className="flex flex-grow flex-col">
+            <h1 className="mb-0.5 sm:mb-2.5 text-2xl sm:text-4xl font-bold lg:mb-4 lg:text-5xl">
+              Roadmaps for Teams
+            </h1>
+            <p className="mb-4 text-base leading-normal text-gray-600 sm:mb-0 sm:leading-none lg:text-lg">
+              Train, plan and track your team's skills and career growth.
+            </p>
+
+            <ul className="mb-4 mt-0 hidden text-sm leading-7 sm:mb-4 sm:mt-4 sm:flex sm:flex-col lg:mb-6 lg:mt-6 lg:text-base lg:leading-8">
+              {featureList.map((feature, index) => (
+                <li key={feature}>
+                  <CheckCircle className="hidden h-6 w-6 text-green-500 sm:inline-block" />
+                  <span className="ml-0 sm:ml-2">{feature}</span>
+                </li>
+              ))}
+            </ul>
+
+            <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+              <a
+                href="/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"
+              >
+                Create your Team
+              </a>
+              <span className="ml-1 hidden text-base sm:inline">
+                or &nbsp;
+                <a
+                  href="/login"
+                  className="text-purple-600 underline  hover:text-purple-700"
+                >
+                  Login to your account
+                </a>
+              </span>
+              <a
+                href="/login"
+                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"
+              >
+                Login to your account
+              </a>
+            </div>
+          </div>
+          <img
+            alt={'team roadmaps'}
+            className="hidden h-64 md:block lg:h-80"
+            src="/images/team-promo/hero.png"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamMarketing/TeamPricing.tsx

@@ -0,0 +1,80 @@
+import { Check, CheckCircle, Copy, Sparkles } from 'lucide-react';
+import { useCopyText } from '../../hooks/use-copy-text.ts';
+import { cn } from '../../lib/classname.ts';
+
+export function TeamPricing() {
+  const { isCopied, copyText } = useCopyText();
+  const teamEmail = 'teams@roadmap.sh';
+
+  return (
+      <div className="py-4 sm:py-8 md:py-12 border-t">
+      <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>
+        <p className="mb-4 sm:mb-8 text-base sm:text-lg text-gray-600">
+          We are currently in 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="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">
+              <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">
+                <span className="text-base text-gray-600">$</span>
+                <span className="text-5xl font-bold">0</span>
+              </p>
+
+              <a
+                href="/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
+              </a>
+            </div>
+            <div className="flex w-full flex-col gap-1 border-t px-8 py-5 sm:py-3 text-center">
+              <p className="text-gray-600">Roles and Permissions</p>
+              <p className="text-gray-600">Custom Roadmaps</p>
+              <p className="text-gray-600">Progress Tracking</p>
+              <p className="text-gray-600">Team Insights</p>
+              <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">
+            <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>
+            <p className="text-gray-600">
+              <button
+                onClick={() => {
+                  copyText(teamEmail);
+                }}
+                className={cn(
+                  'relative flex items-center justify-between gap-3 overflow-hidden rounded-md border border-black bg-white px-4 py-2 text-black hover:bg-gray-100'
+                )}
+              >
+                {teamEmail}
+                <Copy
+                  className="relative top-[1px] ml-2 inline-block text-black transition-opacity"
+                  size={16}
+                />
+
+                <span
+                  className={cn(
+                    'absolute bottom-0 left-0 right-0 flex items-center justify-center bg-black text-white transition-all',
+                    {
+                      'top-full': !isCopied,
+                      'top-0': isCopied,
+                    }
+                  )}
+                >
+                  Email copied!
+                </span>
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamMarketing/TeamTools.tsx

@@ -0,0 +1,62 @@
+const toolsList = [
+  {
+    imageUrl: '/images/team-promo/skill-gap.png',
+    title: 'Skill gap analysis',
+    description: 'Understand the skills of your team and identify gaps.',
+  },
+  {
+    imageUrl: '/images/team-promo/growth-plans.png',
+    title: 'Growth plans',
+    description: 'Prepare shared or individual growth plans for members.',
+  },
+  {
+    imageUrl: '/images/team-promo/progress-tracking.png',
+    title: 'Progress tracking',
+    description: 'Track the and compare the progress of team members.',
+  },
+  {
+    imageUrl: '/images/team-promo/team-insights.png',
+    title: 'Team insights',
+    description: 'Get insights about your team skills, progress and more.',
+  },
+  {
+    imageUrl: '/images/team-promo/onboarding.png',
+    title: 'Onboarding',
+    description: 'Prepare onboarding plans for new team members.',
+  },
+  {
+    imageUrl: '/images/team-promo/documentation.png',
+    title: 'Documentation',
+    description: 'Create and share visual team documentations.',
+  },
+];
+
+export function TeamTools() {
+  return (
+    <div className="py-4 sm:py-8 md:py-12 border-t">
+      <div className="container">
+        <h2 className="mb-1 sm:mb-1.5 md:mb-2 text-xl sm:text-2xl md:text-3xl font-bold">Tools to help you excel</h2>
+        <p className='text-sm md:text-base'>
+          Skill gap analysis, growth plans, progress tracking, team insights and
+          more.
+        </p>
+
+        <div className="mt-3 sm:mt-5 md:mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4">
+          {toolsList.map((tool) => {
+            return (
+              <div className="rounded-md sm:rounded-xl border p-2 sm:p-5 text-left sm:text-center md:text-left">
+                <img
+                  alt={tool.title}
+                  src={tool.imageUrl}
+                  className="mb-5 h-48 hidden sm:block mx-auto md:mx-0"
+                />
+                <h3 className="mb-0.5 sm:mb-2 text-lg sm:text-2xl font-bold">{tool.title}</h3>
+                <p className='text-sm sm:text-base'>{tool.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/teams.astro

@@ -0,0 +1,14 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { TeamHeroBanner } from '../components/TeamMarketing/TeamHeroBanner';
+import { TeamTools } from '../components/TeamMarketing/TeamTools';
+import { TeamDemo } from '../components/TeamMarketing/TeamDemo';
+import { TeamPricing } from '../components/TeamMarketing/TeamPricing';
+---
+
+<BaseLayout title='Roadmaps for teams' permalink={'/teams'}>
+  <TeamHeroBanner />
+  <TeamTools />
+  <TeamDemo client:load />
+  <TeamPricing client:load />
+</BaseLayout>