info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-01-17 06:08:36 +01:00
Code Issues Releases Wiki Activity

Add teams banner

Browse Source
This commit is contained in:
Kamran Ahmed 2023-10-04 20:32:28 +01:00
parent 90f3ffe270
commit e5e0a7c8c5
10 changed files with 97 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/team-promo/hero-img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 33 KiB

37
src/components/HeroSection/EmptyProgress.tsx
View File

@ -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>
);
}

29
src/components/HeroSection/FavoriteRoadmaps.tsx
View File

@ -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>
);

4
src/components/HeroSection/HeroRoadmaps.tsx
View File

@ -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)} />
)}

14
src/components/HeroSection/HeroSection.astro
View File

@ -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

1
src/components/Navigation/Navigation.astro
View File

@ -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

16
src/components/TeamAnnouncement.tsx Normal file
View File

@ -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>
);
}

11
src/components/TeamMarketing/TeamDemo.tsx
View File

@ -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"

24
src/components/TeamMarketing/TeamHeroBanner.tsx
View File

@ -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"

9
src/components/TeamMarketing/TeamPricing.tsx
View File

@ -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;
}