diff --git a/src/components/AppChecklist.tsx b/src/components/AppChecklist.tsx new file mode 100644 index 000000000..ed7aece68 --- /dev/null +++ b/src/components/AppChecklist.tsx @@ -0,0 +1,15 @@ +import { PartyPopper } from 'lucide-react'; + +export function AppChecklist() { + return ( +
+ + + Welcome! Start here + +
+ ); +} diff --git a/src/components/GetStarted/RoadmapCard.tsx b/src/components/GetStarted/RoadmapCard.tsx new file mode 100644 index 000000000..7fa6b44da --- /dev/null +++ b/src/components/GetStarted/RoadmapCard.tsx @@ -0,0 +1,78 @@ +import { ExternalLink, Globe2, type LucideIcon } from 'lucide-react'; + +type RoadmapCardProps = { + title: string; + description: string; + icon: LucideIcon; + icon2?: LucideIcon; + link: string; + isUpcoming?: boolean; +}; +export function RoadmapCard(props: RoadmapCardProps) { + const { + isUpcoming, + link, + title, + description, + icon: Icon, + icon2: Icon2, + } = props; + + if (isUpcoming) { + return ( +
+
+
+ +
+ {Icon2 && ( + <> + + +
+ +
+ + )} +
+ + {title} + + {description} + +
+ + Coming soon + +
+
+ ); + } + + return ( + +
+
+ +
+ {Icon2 && ( + <> + + +
+ +
+ + )} +
+ + + {title} + + {description} + + ); +} diff --git a/src/components/GetStarted/RoadmapMultiCard.tsx b/src/components/GetStarted/RoadmapMultiCard.tsx new file mode 100644 index 000000000..974d33b11 --- /dev/null +++ b/src/components/GetStarted/RoadmapMultiCard.tsx @@ -0,0 +1,63 @@ +import { ExternalLink } from 'lucide-react'; + +type RoadmapMultiCardProps = { + roadmaps: { + title: string; + link: string; + }[]; + description: string; + secondaryRoadmaps?: { + title: string; + link: string; + }[]; + secondaryDescription?: string; +}; +export function RoadmapMultiCard(props: RoadmapMultiCardProps) { + const { roadmaps, description, secondaryRoadmaps, secondaryDescription } = props; + return ( +
+
+ {roadmaps.map((roadmap, index) => ( + + {roadmap.title} + + + ))} +
+ +

+ {description} +

+ + {secondaryRoadmaps && ( +
+ {secondaryRoadmaps.map((roadmap, index) => ( + + {roadmap.title} + + + ))} +
+ )} + + {secondaryDescription && ( +

+ {secondaryDescription} +

+ )} +
+ ); +} diff --git a/src/components/GetStarted/RoleRoadmaps.tsx b/src/components/GetStarted/RoleRoadmaps.tsx new file mode 100644 index 000000000..c299e3d12 --- /dev/null +++ b/src/components/GetStarted/RoleRoadmaps.tsx @@ -0,0 +1,29 @@ +import { type ReactNode } from 'react'; +import { SectionBadge } from './SectionBadge.tsx'; + +type RoleRoadmapsProps = { + badge: string; + title: string; + description: string; + children: ReactNode; +}; + +export function RoleRoadmaps(props: RoleRoadmapsProps) { + const { badge, title, description, children } = props; + + return ( +
+
+
+ +
+
+

{title}

+

{description}

+ +
{children}
+
+
+
+ ); +} diff --git a/src/components/GetStarted/SectionBadge.tsx b/src/components/GetStarted/SectionBadge.tsx new file mode 100644 index 000000000..38ced6982 --- /dev/null +++ b/src/components/GetStarted/SectionBadge.tsx @@ -0,0 +1,12 @@ +type SectionBadgeProps = { + title: string; +}; +export function SectionBadge(props: SectionBadgeProps) { + const { title } = props; + + return ( + + {title} + + ); +} diff --git a/src/components/GetStarted/TipItem.tsx b/src/components/GetStarted/TipItem.tsx new file mode 100644 index 000000000..56b80ccfd --- /dev/null +++ b/src/components/GetStarted/TipItem.tsx @@ -0,0 +1,31 @@ +import { useState } from 'react'; + +type TipItemProps = { + title: string; + description: string; +}; +export function TipItem(props: TipItemProps) { + const { title, description } = props; + + const [isToggled, setIsToggled] = useState(false); + + return ( +
+ {!isToggled && ( +
setIsToggled(true)} + className="cursor-pointer rounded-lg sm:rounded-xl bg-black px-3 py-2 text-sm sm:text-base text-white" + > + {title} +
+ )} + {isToggled && ( +

+ {description} +

+ )} +
+ ); +} diff --git a/src/components/TeamMarketing/TeamTools.tsx b/src/components/TeamMarketing/TeamTools.tsx index f43064ce4..847f16ead 100644 --- a/src/components/TeamMarketing/TeamTools.tsx +++ b/src/components/TeamMarketing/TeamTools.tsx @@ -1,31 +1,33 @@ +import {AlertTriangle, Barcode, BookOpenIcon, PieChart, Shrub, SquareIcon, UserRoundPlus} from "lucide-react"; + const toolsList = [ { - imageUrl: '/images/team-promo/growth-plans.png', + icon: Shrub, title: 'Growth plans', description: 'Prepare shared or individual growth plans for members.', }, { - imageUrl: '/images/team-promo/progress-tracking.png', + icon: Barcode, title: 'Progress tracking', description: 'Track and compare the progress of team members.', }, { - imageUrl: '/images/team-promo/onboarding.png', + icon: UserRoundPlus, title: 'Onboarding', description: 'Prepare onboarding plans for new team members.', }, { - imageUrl: '/images/team-promo/team-insights.png', + icon: PieChart, title: 'Team insights', description: 'Get insights about your team skills, progress and more.', }, { - imageUrl: '/images/team-promo/skill-gap.png', + icon: AlertTriangle, title: 'Skill gap analysis', description: 'Understand the skills of your team and identify gaps.', }, { - imageUrl: '/images/team-promo/documentation.png', + icon: BookOpenIcon, title: 'Documentation', description: 'Create and share visual team documentation.', }, @@ -44,11 +46,9 @@ export function TeamTools() { {toolsList.map((tool) => { return (
- {tool.title} +
+ {tool.icon ? : } +

{tool.title}

{tool.description}

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 5baa80f82..f12114f5a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -3,6 +3,7 @@ import Analytics from '../components/Analytics/Analytics.astro'; import LoginPopup from '../components/AuthenticationFlow/LoginPopup.astro'; import Authenticator from '../components/Authenticator/Authenticator.astro'; import { CommandMenu } from '../components/CommandMenu/CommandMenu'; +import { AppChecklist } from '../components/AppChecklist'; import Footer from '../components/Footer.astro'; import Navigation from '../components/Navigation/Navigation.astro'; import OpenSourceBanner from '../components/OpenSourceBanner.astro'; @@ -174,6 +175,8 @@ const gaPageIdentifier = Astro.url.pathname client:load /> + + diff --git a/src/pages/get-started.astro b/src/pages/get-started.astro new file mode 100644 index 000000000..4e66bf95c --- /dev/null +++ b/src/pages/get-started.astro @@ -0,0 +1,414 @@ +--- +import GridItem from '../components/GridItem.astro'; +import SimplePageHeader from '../components/SimplePageHeader.astro'; +import BaseLayout from '../layouts/BaseLayout.astro'; +import { RoadmapCard } from '../components/GetStarted/RoadmapCard'; +import { getRoadmapsByTag } from '../lib/roadmap'; +import { RoadmapMultiCard } from '../components/GetStarted/RoadmapMultiCard'; +import { RoleRoadmaps } from '../components/GetStarted/RoleRoadmaps'; +import { + Blocks, + Code, + ExternalLink, + Globe2, + GraduationCap, + MousePointerSquare, + ServerCog, + ServerCogIcon, + ArrowRight, + Server, + Cloud, + Smartphone, + Bot, + MessageCircleCode, + Shield, + ShieldHalf, + Workflow, + Gamepad2, + PenSquare, + Component, + Waypoints, + CheckSquare, +} from 'lucide-react'; +import { SectionBadge } from '../components/GetStarted/SectionBadge'; +import { TipItem } from '../components/GetStarted/TipItem'; +--- + + +
+
+
+ +
+
+

+ Are you an Absolute beginner? +

+

+ Here are some beginner friendly roadmaps you should start with. +

+
+ +
+ + + + +
+ +

+ There is also a beginner DevOps roadmap which requires you to have some backend knowledge and entails a lot of + operations work i.e. deploying, scaling, monitoring, and maintaining + applications. +

+ +
+

Tips for Beginners

+

+ Learning to code can be overwhelming, here are some tips to help you + get started: +

+ +
+ + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + +
+
+ + +
+ + +
+
+

There is more!

+

+ We have a lot more content for you to explore. +

+ +
+ + + Explore all Roadmaps + + + + Explore Best Practices + + + + Explore Questions + +
+

+ Or visit our guides and videos for long-form content.

+
+
+ + +