Add (Fork) at title

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: App Deployment
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]

.gitignore

@@ -30,4 +30,4 @@ tests-examples
 *.csv
 
 /editor/*
-!/editor/readonly-editor.tsx
+!/editor/readonly-editor.tsx

package.json

@@ -1,7 +1,7 @@
 {
   "name": "roadmap.sh",
   "type": "module",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "astro dev --port 3000",
@@ -22,48 +22,48 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.9",
-    "@astrojs/sitemap": "^3.0.5",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.2.1",
+    "@astrojs/react": "^3.0.3",
+    "@astrojs/sitemap": "^3.0.2",
+    "@astrojs/tailwind": "^5.0.2",
+    "@fingerprintjs/fingerprintjs": "^4.1.0",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "astro": "^4.2.1",
-    "astro-compress": "^2.2.8",
-    "clsx": "^2.1.0",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "astro": "^3.3.3",
+    "astro-compress": "^2.1.5",
+    "clsx": "^2.0.0",
     "dracula-prism": "^2.1.13",
-    "jose": "^5.2.0",
+    "jose": "^4.15.4",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.300.0",
-    "nanoid": "^5.0.4",
-    "nanostores": "^0.9.5",
-    "node-html-parser": "^6.1.12",
-    "npm-check-updates": "^16.14.12",
+    "lucide-react": "^0.288.0",
+    "nanoid": "^5.0.2",
+    "nanostores": "^0.9.4",
+    "node-html-parser": "^6.1.10",
+    "npm-check-updates": "^16.14.6",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
-    "reactflow": "^11.10.2",
+    "reactflow": "^11.9.4",
     "rehype-external-links": "^3.0.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
-    "zustand": "^4.5.0"
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3",
+    "zustand": "^4.4.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.1",
+    "@playwright/test": "^1.39.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/js-cookie": "^3.0.6",
-    "@types/prismjs": "^1.26.3",
+    "@types/js-cookie": "^3.0.5",
+    "@types/prismjs": "^1.26.2",
     "csv-parser": "^3.0.0",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^6.0.0",
     "js-yaml": "^4.1.0",
-    "markdown-it": "^14.0.0",
-    "openai": "^4.25.0",
-    "prettier": "^3.2.4",
-    "prettier-plugin-astro": "^0.12.3",
-    "prettier-plugin-tailwindcss": "^0.5.11"
+    "markdown-it": "^13.0.2",
+    "openai": "^4.13.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-tailwindcss": "^0.5.6"
   }
 }

public/images/hackernews.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
-    <path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
-</svg>

public/images/reddit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>

readme.md

@@ -39,7 +39,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Python Roadmap](https://roadmap.sh/python)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
-- [Game Developer Roadmap](https://roadmap.sh/game-developer) / [Server Side Game Developer](https://roadmap.sh/server-side-game-developer)
+- [Game Developer Roadmap](https://roadmap.sh/game-developer)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
 - [TypeScript Roadmap](https://roadmap.sh/typescript)
@@ -53,7 +53,6 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Android Roadmap](https://roadmap.sh/android)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
 - [Go Roadmap](https://roadmap.sh/golang)
-- [Rust Roadmap](https://roadmap.sh/rust)
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)
@@ -68,7 +67,6 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [UX Design Roadmap](https://roadmap.sh/ux-design)
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
-- [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
 
 There are also interactive best practices:
 

scripts/generate-renderer.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+-#!/usr/bin/env bash
 
 set -e
 

scripts/roadmap-content.cjs

@@ -59,9 +59,9 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);

src/components/Activity/EmptyActivity.tsx

@@ -1,11 +1,14 @@
-import { RoadmapIcon } from "../ReactIcons/RoadmapIcon";
+import RoadmapIcon from '../../icons/roadmap.svg';
 
 export function EmptyActivity() {
   return (
     <div className="rounded-md">
       <div className="flex flex-col items-center p-7 text-center">
-        <RoadmapIcon className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10" />
-
+        <img
+          alt="no roadmaps"
+          src={RoadmapIcon.src}
+          className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
+        />
         <h2 className="text-lg sm:text-xl font-bold">No Progress</h2>
         <p className="my-1 sm:my-2 max-w-[400px] text-gray-500 text-sm sm:text-base">
           Progress will appear here as you start tracking your{' '}

src/components/AppChecklist.tsx

@@ -1,15 +0,0 @@
-import { PartyPopper } from 'lucide-react';
-
-export function AppChecklist() {
-  return (
-    <div className="fixed bottom-6 right-3">
-      <a
-        href="/get-started"
-        className="flex items-center gap-2 rounded-full border border-slate-900 bg-white py-2 pl-3 pr-4 text-sm font-medium hover:bg-zinc-200"
-      >
-        <PartyPopper className="relative -top-[2px] h-[20px] w-[20px] text-purple-600" />
-        Welcome! Start here
-      </a>
-    </div>
-  );
-}

src/components/AuthenticationFlow/AuthenticationForm.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { GitHubButton } from './GitHubButton';
-import { GoogleButton } from './GoogleButton';
-import { LinkedInButton } from './LinkedInButton';
-import { EmailLoginForm } from './EmailLoginForm';
-import { EmailSignupForm } from './EmailSignupForm';
-
-type AuthenticationFormProps = {
-  type?: 'login' | 'signup';
-};
-
-export function AuthenticationForm(props: AuthenticationFormProps) {
-  const { type = 'login' } = props;
-
-  const [isDisabled, setIsDisabled] = useState(false);
-
-  return (
-    <>
-      <div className="flex w-full flex-col gap-2">
-        <GitHubButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-        <GoogleButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-        <LinkedInButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-      </div>
-
-      <div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
-        <div className="h-px w-full bg-slate-200" />
-        OR
-        <div className="h-px w-full bg-slate-200" />
-      </div>
-
-      {type === 'login' ? (
-        <EmailLoginForm isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-      ) : (
-        <EmailSignupForm
-          isDisabled={isDisabled}
-          setIsDisabled={setIsDisabled}
-        />
-      )}
-    </>
-  );
-}

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -4,14 +4,7 @@ import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-type EmailLoginFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailLoginForm(props: EmailLoginFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+export function EmailLoginForm() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
@@ -21,7 +14,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ token: string }>(
@@ -53,7 +45,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
     }
 
     setIsLoading(false);
-    setIsDisabled?.(false);
     setError(error?.message || 'Something went wrong. Please try again later.');
   };
 
@@ -101,7 +92,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -1,14 +1,7 @@
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
-type EmailSignupFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailSignupForm(props: EmailSignupFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+export function EmailSignupForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -20,7 +13,6 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
     e.preventDefault();
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
@@ -29,21 +21,20 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         email,
         password,
         name,
-      },
+      }
     );
 
     if (error || response?.status !== 'ok') {
       setIsLoading(false);
-      setIsDisabled?.(false);
       setError(
-        error?.message || 'Something went wrong. Please try again later.',
+        error?.message || 'Something went wrong. Please try again later.'
       );
 
       return;
     }
 
     window.location.href = `/verification-pending?email=${encodeURIComponent(
-      email,
+      email
     )}`;
   };
 
@@ -99,7 +90,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue to Verify Email'}

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState } from 'react';
-import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+import GitHubIcon from '../../icons/github.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
 
-type GitHubButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GitHubButtonProps = {};
 
 const GITHUB_REDIRECT_AT = 'githubRedirectAt';
 const GITHUB_LAST_PAGE = 'githubLastPage';
 
 export function GitHubButton(props: GitHubButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GitHubIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,18 +26,16 @@ export function GitHubButton(props: GitHubButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
         window.location.search
-      }`,
+      }`
     )
       .then(({ response, error }) => {
         if (!response?.token) {
           const errMessage = error?.message || 'Something went wrong.';
           setError(errMessage);
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -80,25 +74,22 @@ export function GitHubButton(props: GitHubButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = async () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
 
     const { response, error } = await httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`
     );
 
     if (error || !response?.loginUrl) {
       setError(
-        error?.message || 'Something went wrong. Please try again later.',
+        error?.message || 'Something went wrong. Please try again later.'
       );
 
       setIsLoading(false);
-      setIsDisabled?.(false);
       return;
     }
 
@@ -106,7 +97,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     // the user was on before they clicked the social login button
     if (!['/login', '/signup'].includes(window.location.pathname)) {
       const pagePath = ['/respond-invite', '/befriend'].includes(
-        window.location.pathname,
+        window.location.pathname
       )
         ? window.location.pathname + window.location.search
         : window.location.pathname;
@@ -122,14 +113,14 @@ export function GitHubButton(props: GitHubButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GitHubIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="GitHub"
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with GitHub
       </button>
       {error && (

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
+import GoogleIcon from '../../icons/google.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 
-type GoogleButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GoogleButtonProps = {};
 
 const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
 const GOOGLE_LAST_PAGE = 'googleLastPage';
 
 export function GoogleButton(props: GoogleButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GoogleIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,17 +26,15 @@ export function GoogleButton(props: GoogleButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
         window.location.search
-      }`,
+      }`
     )
       .then(({ response, error }) => {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -79,21 +73,18 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -102,7 +93,7 @@ export function GoogleButton(props: GoogleButtonProps) {
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
           const pagePath = ['/respond-invite', '/befriend'].includes(
-            window.location.pathname,
+            window.location.pathname
           )
             ? window.location.pathname + window.location.search
             : window.location.pathname;
@@ -116,7 +107,6 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,14 +114,14 @@ export function GoogleButton(props: GoogleButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GoogleIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="Google"
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with Google
       </button>
       {error && (

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
+import LinkedIn from '../../icons/linkedin.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 
-type LinkedInButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type LinkedInButtonProps = {};
 
 const LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';
 const LINKEDIN_LAST_PAGE = 'linkedInLastPage';
 
 export function LinkedInButton(props: LinkedInButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : LinkedIn;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,17 +26,15 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
         window.location.search
-      }`,
+      }`
     )
       .then(({ response, error }) => {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -79,21 +73,18 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -102,7 +93,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
           const pagePath = ['/respond-invite', '/befriend'].includes(
-            window.location.pathname,
+            window.location.pathname
           )
             ? window.location.pathname + window.location.search
             : window.location.pathname;
@@ -116,7 +107,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,14 +114,14 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     <>
       <button
         className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading || isDisabled}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <LinkedInIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="Google"
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with LinkedIn
       </button>
       {error && (

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,10 +1,14 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import { AuthenticationForm } from './AuthenticationForm';
+import { EmailLoginForm } from './EmailLoginForm';
+import Divider from './Divider.astro';
+import { GitHubButton } from './GitHubButton';
+import { GoogleButton } from './GoogleButton';
+import { LinkedInButton } from './LinkedInButton';
 ---
 
 <Popup id='login-popup' title='' subtitle=''>
-  <div class='mb-7 text-center'>
+  <div class='text-center'>
     <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
       Login to your account
     </p>
@@ -12,9 +16,19 @@ import { AuthenticationForm } from './AuthenticationForm';
       You must be logged in to perform this action.
     </p>
   </div>
-  <AuthenticationForm client:load />
+
+  <div class='mt-7 flex flex-col gap-2'>
+    <GitHubButton client:load />
+    <GoogleButton client:load />
+    <LinkedInButton client:load />
+  </div>
+
+  <Divider />
+
+  <EmailLoginForm client:load />
+
   <div class='mt-6 text-center text-sm text-slate-600'>
     Don't have an account?{' '}
-    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
+    <a href='/signup' class='font-medium text-[#4285f4]'>Sign up</a>
   </div>
 </Popup>

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { httpPost } from '../../lib/http';
+import ErrorIcon from '../../icons/error.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
-import { Spinner } from '../ReactIcons/Spinner';
-import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -16,7 +16,7 @@ export function TriggerVerifyAccount() {
       `${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,
       {
         code,
-      },
+      }
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -55,8 +55,20 @@ export function TriggerVerifyAccount() {
   return (
     <div className="mx-auto flex max-w-md flex-col items-center pt-0 sm:pt-12">
       <div className="mx-auto max-w-md text-center">
-        {isLoading && <Spinner className="mx-auto h-16 w-16" />}
-        {error && <ErrorIcon2 className="mx-auto h-16 w-16" />}
+        {isLoading && (
+          <img
+            alt={'Please wait.'}
+            src={SpinnerIcon.src}
+            className={'mx-auto h-16 w-16 animate-spin'}
+          />
+        )}
+        {error && (
+          <img
+            alt={'Please wait.'}
+            src={ErrorIcon.src}
+            className={'mx-auto h-16 w-16'}
+          />
+        )}
         <h2 className="mb-1 mt-4 text-center text-xl font-semibold sm:mb-3 sm:mt-4 sm:text-2xl">
           Verifying your account
         </h2>

src/components/AuthenticationFlow/VerificationEmailMessage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
+import VerifyLetterIcon from '../../icons/verify-letter.svg';
 import { httpPost } from '../../lib/http';
-import { VerifyLetterIcon } from '../ReactIcons/VerifyLetterIcon';
 
 export function VerificationEmailMessage() {
   const [email, setEmail] = useState('..');
@@ -37,7 +37,11 @@ export function VerificationEmailMessage() {
 
   return (
     <div className="mx-auto max-w-md text-center">
-      <VerifyLetterIcon className="mx-auto mb-4 h-20 w-40 sm:h-40" />
+      <img
+        alt="Verify Email"
+        src={VerifyLetterIcon.src}
+        className="mx-auto mb-4 h-20 w-40 sm:h-40"
+      />
       <h2 className="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
         Verify your email address
       </h2>

src/components/CommandMenu/CommandMenu.tsx

@@ -1,47 +1,35 @@
-import {
-  Fragment,
-  type ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import BestPracticesIcon from '../../icons/best-practices.svg';
+import ClipboardIcon from '../../icons/clipboard.svg';
+import GuideIcon from '../../icons/guide.svg';
+import HomeIcon from '../../icons/home.svg';
+import RoadmapIcon from '../../icons/roadmap.svg';
+import UserIcon from '../../icons/user.svg';
+import GroupIcon from '../../icons/group.svg';
+import VideoIcon from '../../icons/video.svg';
 import { httpGet } from '../../lib/http';
 import { isLoggedIn } from '../../lib/jwt';
-import { BestPracticesIcon } from '../ReactIcons/BestPracticesIcon.tsx';
-import { UserIcon } from '../ReactIcons/UserIcon.tsx';
-import { GroupIcon } from '../ReactIcons/GroupIcon.tsx';
-import { RoadmapIcon } from '../ReactIcons/RoadmapIcon.tsx';
-import { ClipboardIcon } from '../ReactIcons/ClipboardIcon.tsx';
-import { GuideIcon } from '../ReactIcons/GuideIcon.tsx';
-import { HomeIcon } from '../ReactIcons/HomeIcon.tsx';
-import { VideoIcon } from '../ReactIcons/VideoIcon.tsx';
 
 export type PageType = {
   id: string;
   url: string;
   title: string;
   group: string;
-  icon?: ReactElement;
+  icon?: string;
   isProtected?: boolean;
   metadata?: Record<string, any>;
 };
 
 const defaultPages: PageType[] = [
-  {
-    id: 'home',
-    url: '/',
-    title: 'Home',
-    group: 'Pages',
-    icon: <HomeIcon className="mr-2 h-4 w-4 stroke-2" />,
-  },
+  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon.src },
   {
     id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
-    icon: <UserIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: UserIcon.src,
     isProtected: true,
   },
   {
@@ -49,7 +37,7 @@ const defaultPages: PageType[] = [
     url: '/team',
     title: 'Teams',
     group: 'Pages',
-    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GroupIcon.src,
     isProtected: true,
   },
   {
@@ -57,7 +45,7 @@ const defaultPages: PageType[] = [
     url: '/account/friends',
     title: 'Friends',
     group: 'Pages',
-    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GroupIcon.src,
     isProtected: true,
   },
   {
@@ -65,14 +53,14 @@ const defaultPages: PageType[] = [
     url: '/roadmaps',
     title: 'Roadmaps',
     group: 'Pages',
-    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: RoadmapIcon.src,
   },
   {
     id: 'account-roadmaps',
     url: '/account/roadmaps',
     title: 'Custom Roadmaps',
     group: 'Pages',
-    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: RoadmapIcon.src,
     isProtected: true,
   },
   {
@@ -80,28 +68,28 @@ const defaultPages: PageType[] = [
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
-    icon: <BestPracticesIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: BestPracticesIcon.src,
   },
   {
     id: 'questions',
     url: '/questions',
     title: 'Questions',
     group: 'Pages',
-    icon: <ClipboardIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: ClipboardIcon.src,
   },
   {
     id: 'guides',
     url: '/guides',
     title: 'Guides',
     group: 'Pages',
-    icon: <GuideIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GuideIcon.src,
   },
   {
     id: 'videos',
     url: '/videos',
     title: 'Videos',
     group: 'Pages',
-    icon: <VideoIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: VideoIcon.src,
   },
 ];
 
@@ -211,7 +199,7 @@ export function CommandMenu() {
               } else if (e.key === 'ArrowUp') {
                 const canGoPrev = activeCounter > 0;
                 setActiveCounter(
-                  canGoPrev ? activeCounter - 1 : searchResults.length - 1,
+                  canGoPrev ? activeCounter - 1 : searchResults.length - 1
                 );
               } else if (e.key === 'Tab') {
                 e.preventDefault();
@@ -254,7 +242,13 @@ export function CommandMenu() {
                       {!page.icon && (
                         <span className="mr-2 text-gray-400">{page.group}</span>
                       )}
-                      {page.icon && page.icon}
+                      {page.icon && (
+                        <img
+                          alt={page.title}
+                          src={page.icon}
+                          className="mr-2 h-4 w-4"
+                        />
+                      )}
                       {page.title}
                     </a>
                   </Fragment>

src/components/CreateTeam/NotDropdown.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
+import ChevronDownIcon from '../../icons/chevron-down.svg';
 
 type NotDropdownProps = {
   onClick: () => void;
@@ -37,7 +37,11 @@ export function NotDropdown(props: NotDropdownProps) {
         </div>
       )}
 
-      <ChevronDownIcon className="relative top-[1px] h-[17px] w-[17px] opacity-40" />
+      <img
+        alt={singularName}
+        src={ChevronDownIcon.src}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
     </div>
   );
 }

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -3,8 +3,8 @@ import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
 import type { TeamResourceConfig } from './RoadmapSelector';
+import CloseIcon from '../../icons/close.svg';
 import { SelectRoadmapModalItem } from './SelectRoadmapModalItem';
-import { XIcon } from 'lucide-react';
 
 export type SelectRoadmapModalProps = {
   teamId: string;
@@ -60,11 +60,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     setSearchResults(searchResults);
   }, [searchText, allRoadmaps]);
 
-  const roleBasedRoadmaps = searchResults.filter(
-    (roadmap) => roadmap?.metadata?.tags?.includes('role-roadmap'),
+  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('role-roadmap')
   );
-  const skillBasedRoadmaps = searchResults.filter(
-    (roadmap) => roadmap?.metadata?.tags?.includes('skill-roadmap'),
+  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('skill-roadmap')
   );
 
   return (
@@ -79,7 +79,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900"
             onClick={onClose}
           >
-            <XIcon className="h-4 w-4" />
+            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
             <span className="sr-only">Close modal</span>
           </button>
           <input
@@ -101,7 +101,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
               <div className="mb-5 flex flex-wrap items-center gap-2">
                 {roleBasedRoadmaps.map((roadmap) => {
                   const isSelected = !!teamResourceConfig?.find(
-                    (r) => r.resourceId === roadmap.id,
+                    (r) => r.resourceId === roadmap.id
                   );
 
                   return (
@@ -127,7 +127,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             <div className="flex flex-wrap items-center gap-2">
               {skillBasedRoadmaps.map((roadmap) => {
                 const isSelected = !!teamResourceConfig.find(
-                  (r) => r.resourceId === roadmap.id,
+                  (r) => r.resourceId === roadmap.id
                 );
 
                 return (

src/components/CreateTeam/Step0.tsx

@@ -1,22 +1,22 @@
+import BuildingIcon from '../../icons/building.svg';
+import UsersIcon from '../../icons/users.svg';
 import type { TeamDocument } from './CreateTeamForm';
 import { httpPut } from '../../lib/http';
 import { useState } from 'react';
 import { NextButton } from './NextButton';
-import { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';
-import { UsersIcon } from '../ReactIcons/UsersIcon.tsx';
 
 export const validTeamTypes = [
   {
     value: 'company',
     label: 'Company',
-    icon: BuildingIcon,
+    icon: BuildingIcon.src,
     description:
       'Track the skills and learning progress of the tech team at your company',
   },
   {
     value: 'study_group',
     label: 'Study Group',
-    icon: UsersIcon,
+    icon: UsersIcon.src,
     description:
       'Invite your friends or course-mates and track your learning progress together',
   },
@@ -56,7 +56,7 @@ export function Step0(props: Step0Props) {
           teamSize: team.teamSize,
           linkedInUrl: team?.links?.linkedIn || undefined,
         }),
-      },
+      }
     );
 
     if (error || !response) {
@@ -76,20 +76,21 @@ export function Step0(props: Step0Props) {
         {validTeamTypes.map((validTeamType) => (
           <button
             key={validTeamType.value}
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
+            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pt-12 pb-10 ${
               validTeamType.value == selectedTeamType
                 ? 'border-gray-400 bg-gray-100'
                 : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
             }`}
             onClick={() => setSelectedTeamType(validTeamType.value)}
           >
-            {
-              <validTeamType.icon
-                className={`mb-3 h-12 w-12 opacity-10 ${
-                  validTeamType.value === selectedTeamType ? 'opacity-100' : ''
-                }`}
-              />
-            }
+            <img
+              key={validTeamType.value}
+              alt={validTeamType.label}
+              src={validTeamType.icon}
+              className={`mb-3 h-12 w-12 opacity-10 ${
+                validTeamType.value === selectedTeamType ? 'opacity-100' : ''
+              }`}
+            />
             <span className="mb-2 block text-2xl font-bold">
               {validTeamType.label}
             </span>

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -8,7 +8,6 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
-import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   teamId: string;
@@ -82,8 +81,7 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    replaceChildren(containerEl.current!, svg);
-    // containerEl.current?.replaceChildren(svg);
+    containerEl.current?.replaceChildren(svg);
 
     // Render team configuration
     removedItems.forEach((topicId: string) => {

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -53,20 +53,14 @@ export type GetRoadmapResponse = RoadmapDocument & {
 
 export function hideRoadmapLoader() {
   const loaderEl = document.querySelector(
-    '[data-roadmap-loader]',
+    '[data-roadmap-loader]'
   ) as HTMLElement;
   if (loaderEl) {
     loaderEl.remove();
   }
 }
 
-type CustomRoadmapProps = {
-  isEmbed?: boolean;
-};
-
-export function CustomRoadmap(props: CustomRoadmapProps) {
-  const { isEmbed = false } = props;
-
+export function CustomRoadmap() {
   const { id, secret } = getUrlParams() as { id: string; secret: string };
 
   const [isLoading, setIsLoading] = useState(true);
@@ -77,15 +71,14 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(true);
 
     const roadmapUrl = new URL(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`
     );
-
     if (secret) {
       roadmapUrl.searchParams.set('secret', secret);
     }
 
     const { response, error } = await httpGet<GetRoadmapResponse>(
-      roadmapUrl.toString(),
+      roadmapUrl.toString()
     );
 
     if (error || !response) {
@@ -101,10 +94,19 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(false);
   }
 
+  async function trackVisit() {
+    if (!isLoggedIn()) return;
+    await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+      resourceId: id,
+      resourceType: 'roadmap',
+    });
+  }
+
   useEffect(() => {
     getRoadmap().finally(() => {
       hideRoadmapLoader();
     });
+    trackVisit().then();
   }, []);
 
   if (isLoading) {
@@ -117,9 +119,9 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
 
   return (
     <>
-      {!isEmbed && <RoadmapHeader />}
-      <FlowRoadmapRenderer isEmbed={isEmbed} roadmap={roadmap!} />
-      <TopicDetail isEmbed={isEmbed} canSubmitContribution={false} />
+      <RoadmapHeader />
+      <FlowRoadmapRenderer roadmap={roadmap!} />
+      <TopicDetail canSubmitContribution={false} />
     </>
   );
 }

src/components/CustomRoadmap/EmbedRoadmapModal.tsx

@@ -1,81 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { Check, Copy } from 'lucide-react';
-
-import { Modal } from '../Modal';
-import { useToast } from '../../hooks/use-toast';
-import { useCopyText } from '../../hooks/use-copy-text';
-import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';
-import { cn } from '../../lib/classname.ts';
-
-type ShareRoadmapModalProps = {
-  onClose: () => void;
-};
-
-export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
-  const { onClose } = props;
-
-  const toast = useToast();
-  const $currentRoadmap = useStore(currentRoadmap);
-  const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);
-  const roadmapId = $currentRoadmap?._id!;
-
-  const { copyText, isCopied } = useCopyText();
-
-  const isDev = import.meta.env.DEV;
-  const baseUrl = isDev ? 'http://localhost:3000' : 'https://roadmap.sh';
-
-  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
-  return (
-    <Modal onClose={onClose} wrapperClassName={'max-w-[500px]'}>
-      <div className="p-4 pb-0">
-        <h1 className="text-xl font-semibold leading-5 text-gray-900">
-          Embed Roadmap
-        </h1>
-      </div>
-
-      <div className="px-4 pt-3">
-        <p className={'mb-2 text-sm text-gray-500'}>
-          Copy the following HTML code and paste it into your website.
-        </p>
-        <input
-          type="text"
-          value={embedHtml}
-          readOnly={true}
-          onClick={(e) => {
-            e.currentTarget.select();
-            copyText(embedHtml);
-          }}
-          className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
-        />
-      </div>
-
-      <div className="flex items-center justify-between px-4 pb-4 pt-2">
-        <button
-          className={cn(
-            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
-            {
-              'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
-              'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,
-            },
-          )}
-          onClick={() => {
-            copyText(embedHtml);
-          }}
-        >
-          {isCopied ? (
-            <>
-              <Check size={14} className="mr-2 stroke-[2.5]" />
-              Copied
-            </>
-          ) : (
-            <>
-              <Copy size={14} className="mr-2 stroke-[2.5]" />
-              Copy Link
-            </>
-          )}
-        </button>
-      </div>
-    </Modal>
-  );
-}

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -1,27 +1,25 @@
 import { ReadonlyEditor } from '../../../editor/readonly-editor';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import {
-  refreshProgressCounters,
   renderResourceProgress,
-  renderTopicProgress,
-  type ResourceProgressType,
   updateResourceProgress,
+  type ResourceProgressType,
+  renderTopicProgress,
+  refreshProgressCounters,
 } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
 import type { Node } from 'reactflow';
-import { type MouseEvent, useCallback, useRef, useState } from 'react';
+import { useCallback, type MouseEvent, useMemo, useState, useRef } from 'react';
 import { EmptyRoadmap } from './EmptyRoadmap';
 import { cn } from '../../lib/classname';
-import { totalRoadmapNodes } from '../../stores/roadmap.ts';
 
 type FlowRoadmapRendererProps = {
-  isEmbed?: boolean;
   roadmap: RoadmapDocument;
 };
 
 export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
-  const { roadmap, isEmbed = false } = props;
+  const { roadmap } = props;
   const roadmapId = String(roadmap._id!);
 
   const [hideRenderer, setHideRenderer] = useState(false);
@@ -33,10 +31,6 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
     topicId: string,
     newStatus: ResourceProgressType,
   ) {
-    if (isEmbed) {
-      return;
-    }
-
     pageProgressMessage.set('Updating progress');
     updateResourceProgress(
       {
@@ -144,12 +138,6 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
         )}
         onRendered={() => {
           renderResourceProgress('roadmap', roadmapId).then(() => {
-            totalRoadmapNodes.set(
-              roadmap?.nodes?.filter((node) => {
-                return ['topic', 'subtopic'].includes(node.type);
-              }).length || 0,
-            );
-
             if (roadmap?.nodes?.length === 0) {
               setHideRenderer(true);
               editorWrapperRef?.current?.classList.add('hidden');

src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx

@@ -1,7 +1,7 @@
+import MoreIcon from '../../icons/more-vertical.svg';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
-import { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';
 
 type PersonalRoadmapActionDropdownProps = {
   onDelete?: () => void;
@@ -9,9 +9,7 @@ type PersonalRoadmapActionDropdownProps = {
   onUpdateSharing?: () => void;
 };
 
-export function PersonalRoadmapActionDropdown(
-  props: PersonalRoadmapActionDropdownProps,
-) {
+export function PersonalRoadmapActionDropdown(props: PersonalRoadmapActionDropdownProps) {
   const { onDelete, onUpdateSharing, onCustomize } = props;
 
   const menuRef = useRef<HTMLDivElement>(null);
@@ -28,7 +26,7 @@ export function PersonalRoadmapActionDropdown(
         onClick={() => setIsOpen(!isOpen)}
         className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex"
       >
-        <MoreVerticalIcon className={'h-4 w-4'} />
+        <img alt="menu" src={MoreIcon.src} className="h-4 w-4" />
       </button>
 
       <button

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -14,11 +14,11 @@ import {
   type AllowedRoadmapVisibility,
   type RoadmapDocument,
 } from './CreateRoadmap/CreateRoadmapModal';
+import RoadmapIcon from '../../icons/roadmap.svg';
 import { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown';
 import type { GetRoadmapListResponse } from './RoadmapListPage';
 import { useState, type Dispatch, type SetStateAction } from 'react';
 import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
-import {RoadmapIcon} from "../ReactIcons/RoadmapIcon.tsx";
 
 type PersonalRoadmapListType = {
   roadmaps: GetRoadmapListResponse['personalRoadmaps'];
@@ -91,8 +91,11 @@ export function PersonalRoadmapList(props: PersonalRoadmapListType) {
   if (roadmapList.length === 0) {
     return (
       <div className="flex flex-col items-center p-4 py-20">
-        <RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
-
+        <img
+          alt="roadmap"
+          src={RoadmapIcon.src}
+          className="mb-4 h-24 w-24 opacity-10"
+        />
         <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
         <p className="text-base text-gray-500">
           Create a roadmap to get started

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -11,7 +11,6 @@ import { RoadmapActionButton } from './RoadmapActionButton';
 import { Lock, Shapes } from 'lucide-react';
 import { Modal } from '../Modal';
 import { ShareSuccess } from '../ShareOptions/ShareSuccess';
-import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -45,11 +44,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         {
           resourceId: roadmapId,
           resourceType: 'roadmap',
-        },
+        }
       ));
     } else {
       ({ error, response } = await httpDelete<TeamResourceConfig>(
-        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`,
+        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`
       ));
     }
 
@@ -120,7 +119,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="flex justify-stretch gap-1 sm:gap-2">
+          <div className="flex gap-1 sm:gap-2">
             <a
               href="/roadmaps"
               className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
@@ -129,12 +128,14 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
             </a>
 
-            <ShareRoadmapButton
-              roadmapId={roadmapId!}
-              description={description!}
-              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
-              allowEmbed={true}
-            />
+            <button
+              data-guest-required
+              data-popup="login-popup"
+              className="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              aria-label="Subscribe for Updates"
+            >
+              <span className="ml-2">Subscribe</span>
+            </button>
           </div>
           <div className="flex items-center gap-2">
             {$canManageCurrentRoadmap && (
@@ -161,9 +162,9 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 )}
 
                 <a
-                  href={`${
-                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }/${$currentRoadmap?._id}`}
+                  href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+                    $currentRoadmap?._id
+                  }`}
                   target="_blank"
                   className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
                 >
@@ -182,7 +183,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                 <RoadmapActionButton
                   onDelete={() => {
                     const confirmation = window.confirm(
-                      'Are you sure you want to delete this roadmap?',
+                      'Are you sure you want to delete this roadmap?'
                     );
 
                     if (!confirmation) {

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -12,10 +12,7 @@ export function SkeletonRoadmapHeader() {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className='flex gap-1 sm:gap-2'>
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
-          </div>
+          <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
           <div className="flex items-center gap-2">
             <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
             <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,7 +1,6 @@
 ---
 import Loader from '../Loader.astro';
 import './FrameRenderer.css';
-import { ProgressNudge } from "./ProgressNudge";
 
 export interface Props {
   resourceType: 'roadmap' | 'best-practice';
@@ -28,6 +27,4 @@ const { resourceId, resourceType, dimensions = null } = Astro.props;
   </div>
 </div>
 
-<ProgressNudge resourceId={resourceId} resourceType={resourceType} client:only="react" />
-
 <script src='./renderer.ts'></script>

src/components/FrameRenderer/ProgressNudge.tsx

@@ -1,65 +0,0 @@
-import { cn } from '../../lib/classname.ts';
-import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
-import { useStore } from '@nanostores/react';
-
-type ProgressNudgeProps = {
-  resourceType: 'roadmap' | 'best-practice';
-  resourceId: string;
-};
-
-export function ProgressNudge(props: ProgressNudgeProps) {
-  const $totalRoadmapNodes = useStore(totalRoadmapNodes);
-  const $roadmapProgress = useStore(roadmapProgress);
-
-  const done = $roadmapProgress?.done?.length || 0;
-
-  const hasProgress = done > 0;
-
-  if (!$totalRoadmapNodes) {
-    return null;
-  }
-
-  return (
-    <div
-      className={
-        'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all duration-300 sm:block'
-      }
-    >
-      <span
-        className={cn('block', {
-          hidden: hasProgress,
-        })}
-      >
-        <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
-          Tip
-        </span>
-        <span className="text-sm text-gray-200">
-          Right-click on a topic to mark it as done.{' '}
-          <button
-            data-popup="progress-help"
-            className="cursor-pointer font-semibold text-yellow-500 underline"
-          >
-            Learn more.
-          </button>
-        </span>
-      </span>
-      <span
-        className={cn('relative z-20 block text-sm', {
-          hidden: !hasProgress,
-        })}
-      >
-        <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
-          Progress
-        </span>
-        <span>{done}</span> of <span>{$totalRoadmapNodes}</span> Done
-      </span>
-
-      <span
-        className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
-        style={{
-          width: `${(done / $totalRoadmapNodes) * 100}%`,
-        }}
-      ></span>
-    </div>
-  );
-}

src/components/FrameRenderer/renderer.ts

@@ -7,13 +7,9 @@ import {
   renderTopicProgress,
   updateResourceProgress,
 } from '../../lib/resource-progress';
-import type {
-  ResourceProgressType,
-  ResourceType,
-} from '../../lib/resource-progress';
+import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { showLoginPopup } from '../../lib/popup';
-import { replaceChildren } from '../../lib/dom.ts';
 
 export class Renderer {
   resourceId: string;
@@ -92,13 +88,12 @@ export class Renderer {
         });
       })
       .then((svg) => {
-        replaceChildren(this.containerEl!, svg);
-        // this.containerEl?.replaceChildren(svg);
+        this.containerEl?.replaceChildren(svg);
       })
       .then(() => {
         return renderResourceProgress(
           this.resourceType as ResourceType,
-          this.resourceId,
+          this.resourceId
         );
       })
       .catch((error) => {
@@ -117,6 +112,19 @@ export class Renderer {
       });
   }
 
+  trackVisit() {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    window.setTimeout(() => {
+      httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+        resourceId: this.resourceId,
+        resourceType: this.resourceType,
+      }).then(() => null);
+    }, 0);
+  }
+
   onDOMLoaded() {
     if (!this.prepareConfig()) {
       return;
@@ -125,13 +133,15 @@ export class Renderer {
     const urlParams = new URLSearchParams(window.location.search);
     const roadmapType = urlParams.get('r');
 
+    this.trackVisit();
+
     if (roadmapType) {
       this.switchRoadmap(`/${roadmapType}.json`);
     } else {
       this.jsonToSvg(
         this.resourceType === 'roadmap'
           ? `/${this.resourceId}.json`
-          : `/best-practices/${this.resourceId}.json`,
+          : `/best-practices/${this.resourceId}.json`
       );
     }
   }
@@ -171,7 +181,7 @@ export class Renderer {
         resourceType: this.resourceType as ResourceType,
         topicId,
       },
-      newStatus,
+      newStatus
     )
       .then(() => {
         renderTopicProgress(topicId, newStatus);
@@ -203,14 +213,9 @@ export class Renderer {
 
     const isCurrentStatusDone = targetGroup.classList.contains('done');
     const normalizedGroupId = groupId.replace(/^\d+-/, '');
-
-    if (normalizedGroupId.startsWith('ext_link:')) {
-      return;
-    }
-
     this.updateTopicStatus(
       normalizedGroupId,
-      !isCurrentStatusDone ? 'done' : 'pending',
+      !isCurrentStatusDone ? 'done' : 'pending'
     );
   }
 
@@ -236,12 +241,9 @@ export class Renderer {
           action: `${this.resourceType} / ${this.resourceId}`,
           label: externalLink,
         });
-
-        window.open(`https://${externalLink}`);
-      } else {
-        window.location.href = `https://${externalLink}`;
       }
 
+      window.open(`https://${externalLink}`);
       return;
     }
 
@@ -261,7 +263,7 @@ export class Renderer {
             resourceType: this.resourceType,
             resourceId: this.resourceId,
           },
-        }),
+        })
       );
       return;
     }
@@ -276,7 +278,7 @@ export class Renderer {
       e.preventDefault();
       this.updateTopicStatus(
         normalizedGroupId,
-        !isCurrentStatusLearning ? 'learning' : 'pending',
+        !isCurrentStatusLearning ? 'learning' : 'pending'
       );
       return;
     }
@@ -285,7 +287,7 @@ export class Renderer {
       e.preventDefault();
       this.updateTopicStatus(
         normalizedGroupId,
-        !isCurrentStatusSkipped ? 'skipped' : 'pending',
+        !isCurrentStatusSkipped ? 'skipped' : 'pending'
       );
 
       return;
@@ -298,7 +300,7 @@ export class Renderer {
           resourceId: this.resourceId,
           resourceType: this.resourceType,
         },
-      }),
+      })
     );
   }
 

src/components/Friends/EmptyFriends.tsx

@@ -1,5 +1,6 @@
+import UserPlusIcon from '../../icons/user-plus.svg';
+import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
-import { CopyIcon, UserPlus2 } from 'lucide-react';
 
 type EmptyFriendsProps = {
   befriendUrl: string;
@@ -12,12 +13,14 @@ export function EmptyFriends(props: EmptyFriendsProps) {
   return (
     <div className="rounded-md">
       <div className="mx-auto flex flex-col items-center p-7 text-center">
-        <UserPlus2 className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" />
-
+        <img
+          alt="no friends"
+          src={UserPlusIcon.src}
+          className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
+        />
         <h2 className="text-lg font-bold sm:text-xl">Invite your Friends</h2>
         <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
-          Share the unique link below with your friends to track their skills
-          and progress.
+          Share the unique link below with your friends to track their skills and progress.
         </p>
 
         <div className="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
@@ -41,8 +44,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
               copyText(befriendUrl);
             }}
           >
-            <CopyIcon className="mr-1 h-4 w-4" />
-
+            <img src={CopyIcon.src} className="h-4 w-4" alt="Invite Friends" />
             {isCopied ? 'Copied' : 'Copy'}
           </button>
         </div>

src/components/Friends/FriendsPage.tsx

@@ -7,10 +7,10 @@ import type { FriendshipStatus } from '../Befriend';
 import { useToast } from '../../hooks/use-toast';
 import { EmptyFriends } from './EmptyFriends';
 import { FriendProgressItem } from './FriendProgressItem';
+import UserIcon from '../../icons/user.svg';
 import { UserProgressModal } from '../UserProgress/UserProgressModal';
 import { InviteFriendPopup } from './InviteFriendPopup';
 import { UserCustomProgressModal } from '../UserProgress/UserCustomProgressModal';
-import { UserIcon } from 'lucide-react';
 
 type FriendResourceProgress = {
   updatedAt: string;
@@ -64,7 +64,7 @@ export function FriendsPage() {
 
   async function loadFriends() {
     const { response, error } = await httpGet<ListFriendsResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-list-friends`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-friends`
     );
 
     if (error || !response) {
@@ -89,15 +89,15 @@ export function FriendsPage() {
   const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
 
   const selectedGroupingType = groupingTypes.find(
-    (grouping) => grouping.value === selectedGrouping,
+    (grouping) => grouping.value === selectedGrouping
   );
 
-  const filteredFriends = friends.filter(
-    (friend) => selectedGroupingType?.statuses.includes(friend.status),
+  const filteredFriends = friends.filter((friend) =>
+    selectedGroupingType?.statuses.includes(friend.status)
   );
 
   const receivedRequests = friends.filter(
-    (friend) => friend.status === 'received',
+    (friend) => friend.status === 'received'
   );
 
   if (isLoading) {
@@ -203,8 +203,11 @@ export function FriendsPage() {
 
       {filteredFriends.length === 0 && (
         <div className="flex flex-col items-center justify-center py-12">
-          <UserIcon size={'60px'} className="mb-3 w-12 opacity-20" />
-
+          <img
+            src={UserIcon.src}
+            alt="Empty Friends"
+            className="mb-3 w-12 opacity-20"
+          />
           <h2 className="text-lg font-semibold">
             {selectedGrouping === 'active' && 'No friends yet'}
             {selectedGrouping === 'sent' && 'No requests sent'}

src/components/Friends/InviteFriendPopup.tsx

@@ -1,8 +1,8 @@
 import type { MouseEvent } from 'react';
 import { useRef } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
-import { CopyIcon } from 'lucide-react';
 
 type InviteFriendPopupProps = {
   befriendUrl: string;
@@ -54,7 +54,11 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
                 copyText(befriendUrl);
               }}
             >
-              <CopyIcon className="mr-1 h-4 w-4" />
+              <img
+                src={CopyIcon.src}
+                className="h-4 w-4"
+                alt="Invite Friends"
+              />
               {isCopied ? 'Copied' : 'Copy URL'}
             </button>
           </div>

src/components/GetStarted/RoadmapCard.tsx

@@ -1,78 +0,0 @@
-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 (
-      <div className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
-        <div className="mb-2 sm:mb-5 flex flex-row items-center">
-          <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
-            <Icon className="h-3 sm:h-5" />
-          </div>
-          {Icon2 && (
-              <>
-                <span className="mx-2 text-gray-400">+</span>
-                <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
-                  <Icon2 className="h-3 sm:h-5" />
-                </div>
-              </>
-          )}
-        </div>
-        <span className="mb-0.5 block text-lg sm:text-xl font-semibold sm:mb-2">
-          {title}
-        </span>
-        <span className="text-sm text-gray-500">{description}</span>
-
-        <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100/70">
-          <span className="text-sm bg-black rounded-lg text-white font-semibold py-1 px-2 -rotate-45 transform">
-            Coming soon
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <a
-      href={link}
-      target={'_blank'}
-      className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50
-       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-sm"
-    >
-      <div className="mb-2 sm:mb-5 flex flex-row items-center">
-        <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
-          <Icon className="h-4 sm:h-5" />
-        </div>
-        {Icon2 && (
-          <>
-            <span className="mx-2 text-gray-400">+</span>
-            <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
-              <Icon2 className="h-4 sm:h-5" />
-            </div>
-          </>
-        )}
-      </div>
-      <ExternalLink className="lucide lucide-external-link absolute right-2 top-2 h-4 text-gray-300 transition group-hover:text-gray-700" />
-      <span className="mb-0 block text-lg sm:text-xl font-semibold sm:mb-2">
-        {title}
-      </span>
-      <span className="text-sm text-gray-500">{description}</span>
-    </a>
-  );
-}

src/components/GetStarted/RoadmapMultiCard.tsx

@@ -1,63 +0,0 @@
-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 (
-    <div
-      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100
-       to-gray-50 ease-in-out"
-    >
-      <div className="flex flex-col divide-y">
-        {roadmaps.map((roadmap, index) => (
-          <a
-            target={'_blank'}
-            key={index}
-            href={roadmap.link}
-            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
-          >
-            {roadmap.title}
-            <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
-          </a>
-        ))}
-      </div>
-
-      <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
-        {description}
-      </p>
-
-      {secondaryRoadmaps && (
-        <div className="flex flex-col divide-y">
-          {secondaryRoadmaps.map((roadmap, index) => (
-            <a
-              target={'_blank'}
-              key={index}
-              href={roadmap.link}
-              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
-            >
-              {roadmap.title}
-              <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
-            </a>
-          ))}
-        </div>
-      )}
-
-      {secondaryDescription && (
-        <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
-          {secondaryDescription}
-        </p>
-      )}
-    </div>
-  );
-}

src/components/GetStarted/RoleRoadmaps.tsx

@@ -1,29 +0,0 @@
-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 (
-    <div className="bg-gradient-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
-      <div className="container">
-        <div className="text-left">
-          <SectionBadge title={badge} />
-        </div>
-        <div className="my-4 sm:my-7 text-left">
-          <h2 className="mb-1 text-xl sm:text-3xl font-semibold">{title}</h2>
-          <p className="text-sm sm:text-base text-gray-500">{description}</p>
-
-          <div className="mt-4 sm:mt-7 grid sm:grid-cols-2 md:grid-cols-3 gap-3">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/GetStarted/SectionBadge.tsx

@@ -1,12 +0,0 @@
-type SectionBadgeProps = {
-  title: string;
-};
-export function SectionBadge(props: SectionBadgeProps) {
-  const { title } = props;
-
-  return (
-    <span className="rounded-full bg-black px-3 py-1 text-sm text-white">
-      {title}
-    </span>
-  );
-}

src/components/GetStarted/TipItem.tsx

@@ -1,31 +0,0 @@
-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 (
-    <div className="flex flex-col">
-      {!isToggled && (
-        <div
-          onClick={() => setIsToggled(true)}
-          className="cursor-pointer rounded-lg sm:rounded-xl bg-black px-3 py-2 text-sm sm:text-base text-white"
-        >
-          {title}
-        </div>
-      )}
-      {isToggled && (
-        <p
-          className="rounded-lg sm:rounded-xl bg-gray-200 px-3 py-2 text-black text-sm sm:text-base"
-        >
-          {description}
-        </p>
-      )}
-    </div>
-  );
-}

src/components/GuideListItem.astro

@@ -13,7 +13,7 @@ const { frontmatter, id } = guide;
   class:list={[
     "block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b",
   ]}
-  href={frontmatter.excludedBySlug ? frontmatter.excludedBySlug : `/guides/${id}`}
+  href={`/guides/${id}`}
 >
   <span class="group-hover:translate-x-2 transition-transform">
     {frontmatter.title}

src/components/HeroSection/HeroRoadmaps.tsx

@@ -121,7 +121,7 @@ export function HeroRoadmaps(props: ProgressListProps) {
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
         {progress.map((resource) => (
           <HeroRoadmap
-            key={`${resource.resourceType}-${resource.resourceId}`}
+            key={resource.resourceId}
             resourceId={resource.resourceId}
             resourceType={resource.resourceType}
             resourceTitle={resource.resourceTitle}

src/components/MarkdownFile.astro

@@ -1,5 +1,5 @@
 <div
-  class='prose-xl prose-blockquote:font-normal prose container prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-10 prose-h2:mb-3 prose-h5:font-medium prose-h3:mt-2 prose-img:mt-1'
+  class='prose-xl prose-blockquote:font-normal prose container prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-10 prose-h2:mb-3 prose-h3:mt-2 prose-img:mt-1'
 >
   <slot />
 </div>

src/components/Navigation/Navigation.astro

@@ -1,38 +1,61 @@
 ---
-import { Menu } from 'lucide-react';
 import Icon from '../AstroIcon.astro';
-import { NavigationDropdown } from '../NavigationDropdown';
 import { AccountDropdown } from './AccountDropdown';
 ---
-
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
-    <div class='flex items-center gap-5'>
-      <a
-        class='flex items-center text-lg font-medium text-white'
-        href='/'
-        aria-label='roadmap.sh'
-      >
-        <Icon icon='logo' />
-      </a>
+    <a
+      class='flex items-center text-lg font-medium text-white'
+      href='/'
+      aria-label='roadmap.sh'
+    >
+      <Icon icon='logo' />
+    </a>
 
-      <!-- Desktop navigation items -->
-      <div class='hidden space-x-5 sm:flex sm:items-center'>
-        <NavigationDropdown client:load />
-        <a href='/get-started' class='text-gray-400 hover:text-white'>
-          Start Here
-        </a>
-        <a href='/teams' class='text-gray-400 hover:text-white'> Teams</a>
-        <button
-          data-command-menu
-          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+    <!-- Desktop navigation items -->
+    <ul class='hidden space-x-5 sm:flex sm:items-center'>
+      <li>
+        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
+      </li>
+      <li>
+        <a href='/best-practices' class='text-gray-400 hover:text-white'
+          >Best Practices</a
         >
-          <Icon icon='search' class='h-3 w-3' />
-          <span class='ml-2'>Search</span>
-        </button>
-      </div>
-    </div>
+      </li>
+      <li class='hidden lg:inline'>
+        <a href='/questions' class='text-gray-400 hover:text-white'>Questions</a
+        >
+      </li>
+      <li>
+        <a href='/teams' class='group relative text-blue-300 hover:text-white'>
+          Teams
+          <span
+            class='ml-0.5 hidden rounded-sm border-black bg-blue-300 px-1 py-0.5 text-xs font-semibold uppercase text-black group-hover:bg-white md:inline'
+          >
+            New
+          </span>
 
+          <span class='inline md:hidden absolute -right-[11px] top-0'>
+            <span class='relative flex h-2 w-2'>
+              <span
+                class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
+              ></span>
+              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
+              ></span>
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <kbd
+          data-command-menu
+          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+        >
+          <Icon icon='search' class='mr-2 h-3 w-3' />
+          <kbd class='mr-1 font-sans'>⌘</kbd><kbd class='font-sans'>K</kbd>
+        </kbd>
+      </li>
+    </ul>
     <ul class='hidden h-8 w-[172px] items-center justify-end gap-5 sm:flex'>
       <li data-guest-required class='hidden'>
         <a href='/login' class='text-gray-400 hover:text-white'>Login</a>

src/components/NavigationDropdown.tsx

@@ -1,105 +0,0 @@
-import {
-  BookOpen,
-  BookOpenText,
-  CheckSquare,
-  FileQuestion,
-  Menu,
-  Shirt,
-  Video,
-  Waypoints,
-} from 'lucide-react';
-import { useRef, useState } from 'react';
-import { cn } from '../lib/classname.ts';
-import { useOutsideClick } from '../hooks/use-outside-click.ts';
-
-const links = [
-  {
-    link: '/roadmaps',
-    label: 'Roadmaps',
-    description: 'Step by step learning paths',
-    Icon: Waypoints,
-  },
-  {
-    link: '/best-practices',
-    label: 'Best Practices',
-    description: "Do's and don'ts",
-    Icon: CheckSquare,
-  },
-  {
-    link: '/questions',
-    label: 'Questions',
-    description: 'Test and Practice your knowledge',
-    Icon: FileQuestion,
-  },
-  {
-    link: '/guides',
-    label: 'Guides',
-    description: 'In-depth articles and tutorials',
-    Icon: BookOpenText,
-  },
-  {
-    link: 'https://youtube.com/@roadmapsh',
-    label: 'Videos',
-    description: 'Animated and interactive content',
-    Icon: Video,
-    isExternal: true,
-  },
-  {
-    link: 'https://cottonbureau.com/people/roadmapsh',
-    label: 'Shop',
-    description: 'Get some cool swag',
-    Icon: Shirt,
-    isExternal: true,
-  },
-];
-
-export function NavigationDropdown() {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-
-  useOutsideClick(dropdownRef, () => {
-    setIsOpen(false);
-  });
-
-  return (
-    <div className="relative flex items-center" ref={dropdownRef}>
-      <button
-        className={cn('text-gray-400 hover:text-white', {
-          'text-white': isOpen,
-        })}
-        onClick={() => setIsOpen(true)}
-        onMouseOver={() => setIsOpen(true)}
-      >
-        <Menu className="h-5 w-5" />
-      </button>
-      <div
-        className={cn(
-          'absolute pointer-events-none left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
-          {
-            'pointer-events-auto translate-y-2.5 opacity-100': isOpen,
-          },
-        )}
-      >
-        {links.map((link) => (
-          <a
-            href={link.link}
-            target={link.isExternal ? '_blank' : undefined}
-            rel={link.isExternal ? 'noopener noreferrer' : undefined}
-            key={link.link}
-            className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
-          >
-            <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
-              <link.Icon className="inline-block h-5 w-5" />
-            </span>
-            <span className="flex flex-col">
-              <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
-                {link.label}
-              </span>
-              <span className="text-sm">{link.description}</span>
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}

src/components/Notification/NotificationPage.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { httpGet, httpPatch } from '../../lib/http';
+import { httpGet, httpPatch, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import type { TeamMemberDocument } from '../TeamMembers/TeamMembersPage';
+import XIcon from '../../icons/close-dark.svg';
+import AcceptIcon from '../../icons/accept.svg';
 import { useToast } from '../../hooks/use-toast';
-import { AcceptIcon } from '../ReactIcons/AcceptIcon.tsx';
-import { XIcon } from 'lucide-react';
 
 interface NotificationList extends TeamMemberDocument {
   name: string;
@@ -18,7 +18,7 @@ export function NotificationPage() {
 
   const lostNotifications = async () => {
     const { error, response } = await httpGet<NotificationList[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation-list`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation-list`
     );
     if (error || !response) {
       toast.error(error?.message || 'Something went wrong');
@@ -28,37 +28,28 @@ export function NotificationPage() {
     setNotifications(response);
   };
 
-  async function respondInvitation(
-    status: 'accept' | 'reject',
-    inviteId: string,
-  ) {
+  async function respondInvitation(status: 'accept' | 'reject', inviteId: string) {
     setIsLoading(true);
     setError('');
     const { response, error } = await httpPatch<{ teamId: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`,
-      {
-        status,
-      },
-    );
+      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`, {
+      status
+    });
     if (error || !response) {
-      setError(error?.message || 'Something went wrong');
-      setIsLoading(false);
+      setError(error?.message || 'Something went wrong')
+      setIsLoading(false)
       return;
     }
 
     if (status === 'accept') {
       window.location.href = `/team/progress?t=${response.teamId}`;
     } else {
-      window.dispatchEvent(
-        new CustomEvent('refresh-notification', {
-          detail: {
-            count: notifications.length - 1,
-          },
-        }),
-      );
-      setNotifications(
-        notifications.filter((notification) => notification._id !== inviteId),
-      );
+      window.dispatchEvent(new CustomEvent('refresh-notification', {
+        detail: {
+          count: notifications.length - 1
+        }
+      }));
+      setNotifications(notifications.filter((notification) => notification._id !== inviteId));
       setIsLoading(false);
     }
   }
@@ -75,20 +66,15 @@ export function NotificationPage() {
         <h2 className="text-3xl font-bold sm:text-4xl">Notification</h2>
         <p className="mt-2 text-gray-400">Manage your notifications</p>
       </div>
-      {notifications.length === 0 && (
-        <div className="mt-6 flex items-center justify-center">
-          <p className="text-gray-400">
-            No notifications, you can{' '}
-            <a
-              href="/team/new"
-              className="text-blue-500 underline hover:no-underline"
-            >
-              create a team
-            </a>{' '}
-            and invite your friends to join.
-          </p>
-        </div>
-      )}
+      {
+        notifications.length === 0 && (
+          <div className="flex items-center justify-center mt-6">
+            <p className="text-gray-400">
+              No notifications, you can <a href="/team/new" className="text-blue-500 underline hover:no-underline">create a team</a> and invite your friends to join.
+            </p>
+          </div>
+        )
+      }
       <div className="space-y-4">
         {notifications.map((notification) => (
           <div className="flex items-center justify-between rounded-md border p-2">
@@ -100,21 +86,19 @@ export function NotificationPage() {
               </div>
             </div>
             <div className="flex items-center space-x-2">
-              <button
-                type="button"
+              <button type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('accept', notification?._id!)}
               >
-                <AcceptIcon className="h-4 w-4" />
+                <img src={AcceptIcon.src} className="h-4 w-4" />
               </button>
-              <button
-                type="button"
+              <button type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('reject', notification?._id!)}
               >
-                <XIcon className="h-4 w-4" />
+                <img alt={'Close'} src={XIcon.src} className="h-4 w-4" />
               </button>
             </div>
           </div>

src/components/PageProgress.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
+import SpinnerIcon from '../icons/spinner.svg';
 import { pageProgressMessage } from '../stores/page';
 import { useEffect, useState } from 'react';
-import { Spinner } from './ReactIcons/Spinner';
 
 export interface Props {
   initialMessage: string;
@@ -30,10 +30,10 @@ export function PageProgress(props: Props) {
       {/* Tailwind based spinner for full page */}
       <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
         <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
-          <Spinner
-            className="h-4 w-4 sm:h-4 sm:w-4"
-            outerFill="#e5e7eb"
-            innerFill="#2563eb"
+          <img
+            src={SpinnerIcon.src}
+            alt="Loading"
+            className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-4 sm:w-4"
           />
           <h1 className="ml-2">
             {message}

src/components/PageSponsor.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
+import CloseIcon from '../icons/close.svg';
 import { httpGet } from '../lib/http';
 import { sponsorHidden } from '../stores/page';
 import { useStore } from '@nanostores/react';
-import { X } from 'lucide-react';
 
 export type PageSponsorType = {
   company: string;
@@ -46,7 +46,7 @@ export function PageSponsor(props: PageSponsorProps) {
       `${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`,
       {
         href: window.location.pathname,
-      },
+      }
     );
 
     if (error) {
@@ -101,7 +101,7 @@ export function PageSponsor(props: PageSponsorProps) {
           sponsorHidden.set(true);
         }}
       >
-        <X className="h-4 w-4" />
+        <img alt="Close" className="h-4 w-4" src={CloseIcon.src} />
       </span>
       <img
         src={imageUrl}

src/components/PageVisit/PageVisit.tsx

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { isLoggedIn } from '../../lib/jwt';
-import { httpPost } from '../../lib/http';
-import type { ResourceType } from '../../lib/resource-progress';
-
-type PageVisitProps = {
-  resourceId?: string;
-  resourceType?: ResourceType;
-};
-
-export function PageVisit(props: PageVisitProps) {
-  const { resourceId, resourceType } = props;
-
-  useEffect(() => {
-    if (!isLoggedIn()) {
-      return;
-    }
-
-    httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
-      ...(resourceType && { resourceType, resourceId }),
-    }).finally(() => {});
-  }, []);
-
-  return null;
-}

src/components/Popup/Popup.astro

@@ -15,7 +15,7 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
     <div class='relative bg-white rounded-lg shadow popup-body'>

src/components/ReactIcons/AcceptIcon.tsx

@@ -1,24 +0,0 @@
-type AcceptIconProps = {
-  className?: string;
-};
-
-export function AcceptIcon(props: AcceptIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="#000"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M4.5 12.75l6 6 9-13.5"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/BestPracticesIcon.tsx

@@ -1,28 +0,0 @@
-type BestPracticesIconProps = {
-  className?: string;
-};
-export function BestPracticesIcon(props: BestPracticesIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <line x1="10" x2="21" y1="6" y2="6"></line>
-      <line x1="10" x2="21" y1="12" y2="12"></line>
-      <line x1="10" x2="21" y1="18" y2="18"></line>
-      <polyline points="3 6 4 7 6 5"></polyline>
-      <polyline points="3 12 4 13 6 11"></polyline>
-      <polyline points="3 18 4 19 6 17"></polyline>
-    </svg>
-  );
-}

src/components/ReactIcons/BuildingIcon.tsx

@@ -1,29 +0,0 @@
-type BuildingIconProps = {
-  className?: string;
-};
-export function BuildingIcon(props: BuildingIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
-      <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path>
-      <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path>
-      <path d="M10 6h4"></path>
-      <path d="M10 10h4"></path>
-      <path d="M10 14h4"></path>
-      <path d="M10 18h4"></path>
-    </svg>
-  );
-}

src/components/ReactIcons/ClipboardIcon.tsx

@@ -1,28 +0,0 @@
-type ClipboardIconProps = {
-  className?: string;
-};
-export function ClipboardIcon(props: ClipboardIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
-      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
-      <path d="M12 11h4" />
-      <path d="M12 16h4" />
-      <path d="M8 11h.01" />
-      <path d="M8 16h.01" />
-    </svg>
-  );
-}

src/components/ReactIcons/CogIcon.tsx

@@ -1,28 +0,0 @@
-type CogIconProps = {
-  className?: string;
-};
-export function CogIcon(props: CogIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
-      />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/DropdownIcon.tsx

@@ -1,26 +0,0 @@
-import { cn } from '../../lib/classname';
-
-type DropdownIconProps = {
-  className?: string;
-};
-
-export function DropdownIcon(props: DropdownIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      className={cn('h-5 w-5', className)}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/ErrorIcon2.tsx

@@ -1,48 +0,0 @@
-type ErrorIcon2Props = {
-  className?: string;
-};
-
-export function ErrorIcon2(props: ErrorIcon2Props) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 48 48"
-      className={className}
-    >
-      <linearGradient
-        id="wRKXFJsqHCxLE9yyOYHkza"
-        x1="9.858"
-        x2="38.142"
-        y1="9.858"
-        y2="38.142"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0" stopColor="#f44f5a" />
-        <stop offset=".443" stopColor="#ee3d4a" />
-        <stop offset="1" stopColor="#e52030" />
-      </linearGradient>
-      <path
-        fill="url(#wRKXFJsqHCxLE9yyOYHkza)"
-        d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
-      />
-      <path
-        d="M33.192,28.95L28.243,24l4.95-4.95c0.781-0.781,0.781-2.047,0-2.828l-1.414-1.414	c-0.781-0.781-2.047-0.781-2.828,0L24,19.757l-4.95-4.95c-0.781-0.781-2.047-0.781-2.828,0l-1.414,1.414	c-0.781,0.781-0.781,2.047,0,2.828l4.95,4.95l-4.95,4.95c-0.781,0.781-0.781,2.047,0,2.828l1.414,1.414	c0.781,0.781,2.047,0.781,2.828,0l4.95-4.95l4.95,4.95c0.781,0.781,2.047,0.781,2.828,0l1.414-1.414	C33.973,30.997,33.973,29.731,33.192,28.95z"
-        opacity=".05"
-      />
-      <path
-        d="M32.839,29.303L27.536,24l5.303-5.303c0.586-0.586,0.586-1.536,0-2.121l-1.414-1.414	c-0.586-0.586-1.536-0.586-2.121,0L24,20.464l-5.303-5.303c-0.586-0.586-1.536-0.586-2.121,0l-1.414,1.414	c-0.586,0.586-0.586,1.536,0,2.121L20.464,24l-5.303,5.303c-0.586,0.586-0.586,1.536,0,2.121l1.414,1.414	c0.586,0.586,1.536,0.586,2.121,0L24,27.536l5.303,5.303c0.586,0.586,1.536,0.586,2.121,0l1.414-1.414	C33.425,30.839,33.425,29.889,32.839,29.303z"
-        opacity=".07"
-      />
-      <path
-        fill="#fff"
-        d="M31.071,15.515l1.414,1.414c0.391,0.391,0.391,1.024,0,1.414L18.343,32.485	c-0.391,0.391-1.024,0.391-1.414,0l-1.414-1.414c-0.391-0.391-0.391-1.024,0-1.414l14.142-14.142	C30.047,15.124,30.681,15.124,31.071,15.515z"
-      />
-      <path
-        fill="#fff"
-        d="M32.485,31.071l-1.414,1.414c-0.391,0.391-1.024,0.391-1.414,0L15.515,18.343	c-0.391-0.391-0.391-1.024,0-1.414l1.414-1.414c0.391-0.391,1.024-0.391,1.414,0l14.142,14.142	C32.876,30.047,32.876,30.681,32.485,31.071z"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/GitHubIcon.tsx

@@ -1,20 +0,0 @@
-type GitHubIconProps = {
-  className?: string;
-};
-export function GitHubIcon(props: GitHubIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      className={className || ''}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 98 96"
-    >
-      <path
-        fillRule="evenodd"
-        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362l-.08-9.127c-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126l-.08 13.526c0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-        fill={ className?.indexOf('text-') !== -1 ? 'currentColor' : '#24292f' }
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/GoogleIcon.tsx

@@ -1,32 +0,0 @@
-type GoogleIconProps = {
-  className?: string;
-};
-export function GoogleIcon(props: GoogleIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 90 92"
-      fill="none"
-      className={className}
-    >
-      <path
-        d="M90 47.1c0-3.1-.3-6.3-.8-9.3H45.9v17.7h24.8c-1 5.7-4.3 10.7-9.2 13.9l14.8 11.5C85 72.8 90 61 90 47.1z"
-        fill="#4280ef"
-      />
-      <path
-        d="M45.9 91.9c12.4 0 22.8-4.1 30.4-11.1L61.5 69.4c-4.1 2.8-9.4 4.4-15.6 4.4-12 0-22.1-8.1-25.8-18.9L4.9 66.6c7.8 15.5 23.6 25.3 41 25.3z"
-        fill="#34a353"
-      />
-      <path
-        d="M20.1 54.8c-1.9-5.7-1.9-11.9 0-17.6L4.9 25.4c-6.5 13-6.5 28.3 0 41.2l15.2-11.8z"
-        fill="#f6b704"
-      />
-      <path
-        d="M45.9 18.3c6.5-.1 12.9 2.4 17.6 6.9L76.6 12C68.3 4.2 57.3 0 45.9.1c-17.4 0-33.2 9.8-41 25.3l15.2 11.8c3.7-10.9 13.8-18.9 25.8-18.9z"
-        fill="#e54335"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/GroupIcon.tsx

@@ -1,26 +0,0 @@
-type GroupIconProps = {
-  className?: string;
-};
-export function GroupIcon(props: GroupIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-      <circle cx="9" cy="7" r="4" />
-      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
-      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-    </svg>
-  );
-}

src/components/ReactIcons/GuideIcon.tsx

@@ -1,23 +0,0 @@
-type GuideIconProps = {
-  className?: string;
-};
-export function GuideIcon(props: GuideIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/HomeIcon.tsx

@@ -1,23 +0,0 @@
-type HomeIconProps = {
-  className?: string;
-};
-export function HomeIcon(props: HomeIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/LinkedInIcon.tsx

@@ -1,49 +0,0 @@
-type LinkedInIconProps = {
-  className?: string;
-};
-
-export function LinkedInIcon(props: LinkedInIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      x="0px"
-      y="0px"
-      width="100"
-      height="100"
-      viewBox="0,0,256,256"
-    >
-      <g transform="translate(-26.66667,-26.66667) scale(1.20833,1.20833)">
-        <g
-          fill="none"
-          fillRule="nonzero"
-          stroke="none"
-          strokeWidth="1"
-          strokeLinecap="butt"
-          strokeLinejoin="miter"
-          strokeMiterlimit="10"
-          strokeDasharray=""
-          strokeDashoffset="0"
-          fontFamily="none"
-          fontWeight="none"
-          fontSize="none"
-          textAnchor="none"
-          style={{ mixBlendMode: 'normal' }}
-        >
-          <g transform="scale(5.33333,5.33333)">
-            <path
-              d="M42,37c0,2.762 -2.238,5 -5,5h-26c-2.761,0 -5,-2.238 -5,-5v-26c0,-2.762 2.239,-5 5,-5h26c2.762,0 5,2.238 5,5z"
-              fill="#0288d1"
-            ></path>
-            <path
-              d="M12,19h5v17h-5zM14.485,17h-0.028c-1.492,0 -2.457,-1.112 -2.457,-2.501c0,-1.419 0.995,-2.499 2.514,-2.499c1.521,0 2.458,1.08 2.486,2.499c0,1.388 -0.965,2.501 -2.515,2.501zM36,36h-5v-9.099c0,-2.198 -1.225,-3.698 -3.192,-3.698c-1.501,0 -2.313,1.012 -2.707,1.99c-0.144,0.35 -0.101,1.318 -0.101,1.807v9h-5v-17h5v2.616c0.721,-1.116 1.85,-2.616 4.738,-2.616c3.578,0 6.261,2.25 6.261,7.274l0.001,9.726z"
-              fill="#ffffff"
-            ></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}

src/components/ReactIcons/MoreVerticalIcon.tsx

@@ -1,21 +0,0 @@
-type MoreVerticalIconProps = {
-  className?: string;
-};
-
-export function MoreVerticalIcon(props: MoreVerticalIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      clipRule="evenodd"
-      fillRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path d="m12 16.495c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25z" />
-    </svg>
-  );
-}

src/components/ReactIcons/RoadmapIcon.tsx

@@ -1,25 +0,0 @@
-type RoadmapIconProps = {
-  className?: string;
-};
-export function RoadmapIcon(props: RoadmapIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z"></path>
-      <path d="M12 13v8"></path>
-      <path d="M12 3v3"></path>
-    </svg>
-  );
-}

src/components/ReactIcons/TeamProgressIcon.tsx

@@ -1,24 +0,0 @@
-type TeamProgressIconProps = {
-  className?: string;
-};
-export function TeamProgressIcon(props: TeamProgressIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M3 3v18h18" />
-      <path d="m19 9-5 5-4-4-3 3" />
-    </svg>
-  );
-}

src/components/ReactIcons/TwitterIcon.tsx

@@ -1,23 +0,0 @@
-type TwitterIconProps = {
-  className?: string;
-};
-
-export function TwitterIcon(props: TwitterIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 0 15 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M8.9285 6.35221L14.5135 0H13.1905L8.339 5.5144L4.467 0H0L5.8565 8.33955L0 15H1.323L6.443 9.17535L10.533 15H15M1.8005 0.976187H3.833L13.1895 14.0718H11.1565"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}

src/components/ReactIcons/UserIcon.tsx

@@ -1,21 +0,0 @@
-type UserIconProps = {
-  className?: string;
-};
-export function UserIcon(props: UserIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 1024 1024"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path>
-    </svg>
-  );
-}

src/components/ReactIcons/UsersIcon.tsx

@@ -1,26 +0,0 @@
-type UsersIconProps = {
-  className?: string;
-};
-export function UsersIcon(props: UsersIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
-      <circle cx="9" cy="7" r="4"></circle>
-      <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
-      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-    </svg>
-  );
-}

src/components/ReactIcons/VerifyLetterIcon.tsx

@@ -1,78 +0,0 @@
-type VerifyLetterIconProps = {
-  className?: string;
-};
-
-export function VerifyLetterIcon(props: VerifyLetterIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      className={className}
-    >
-      <path
-        fill="#f79219"
-        d="M222.58,114.782c0-8.69-3.979-16.901-10.8-22.286l-69.526-54.889c-8.357-6.598-20.15-6.598-28.508,0 L44.22,92.496c-6.82,5.385-10.8,13.596-10.8,22.286v12.732H222.58V114.782z"
-      />
-      <path
-        fill="#ffa91a"
-        d="M213.336,223.341H42.664c-5.105,0-9.244-4.138-9.244-9.244V113.116c0-5.105,4.138-9.244,9.244-9.244 h170.672c5.105,0,9.244,4.139,9.244,9.244v100.981C222.58,219.203,218.441,223.341,213.336,223.341z"
-      />
-      <path
-        fill="#f79219"
-        d="M213.336,103.872h-0.756v100.225c0,5.105-4.138,9.244-9.244,9.244H33.42v0.756 c0,5.105,4.138,9.244,9.244,9.244h170.672c5.105,0,9.244-4.138,9.244-9.244V113.116 C222.58,108.011,218.441,103.872,213.336,103.872z"
-      />
-      <path
-        fill="#ef7816"
-        d="M213.336,103.872H42.664c-4.488,0-8.229,3.199-9.067,7.441l79.417,62.697 c8.787,6.937,21.186,6.937,29.973,0l79.417-62.698C221.564,107.071,217.824,103.872,213.336,103.872z"
-      />
-      <path
-        fill="#f1f2f2"
-        d="M203.33,73.49v52.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0l-60.34-47.64V73.49 c0-4.418,3.582-8,8-8h134.66C199.748,65.49,203.33,69.072,203.33,73.49z"
-      />
-      <g>
-        <path
-          fill="#fff"
-          d="M58.67,125.46c-1.101,0-2-0.9-2-2V73.49c0-2.2,1.8-4,4-4h106.89c1.101,0,1.99,0.9,1.99,2s-0.89,2-1.99,2 H60.67v49.97C60.67,124.56,59.77,125.46,58.67,125.46z M175.55,73.49c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.11,0,2,0.9,2,2 S176.66,73.49,175.55,73.49z"
-        />
-      </g>
-      <g>
-        <path
-          fill="#e6e7e8"
-          d="M195.33,65.49h-2v50.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0l-50.34-39.745v2.105l60.34,47.64 c8.789,6.939,21.191,6.939,29.98,0l60.34-47.64V73.49C203.33,69.072,199.748,65.49,195.33,65.49z"
-        />
-      </g>
-      <g>
-        <path
-          fill="#d1d3d4"
-          d="M197.9,65.92c0.274,0.808,0.43,1.67,0.43,2.57v52.88l-60.34,47.64c-8.789,6.939-21.191,6.939-29.98,0 l-55.34-43.692v1.052l60.34,47.64c8.789,6.939,21.191,6.939,29.98,0l60.34-47.64V73.49 C203.33,69.972,201.056,66.991,197.9,65.92z"
-        />
-      </g>
-      <g>
-        <path
-          fill="#d1d3d4"
-          d="M109.036,99.997H80.422c-1.431,0-2.591-1.16-2.591-2.591v0c0-1.431,1.16-2.591,2.591-2.591h28.614 c1.431,0,2.591,1.16,2.591,2.591v0C111.627,98.836,110.467,99.997,109.036,99.997z"
-        />
-        <path
-          fill="#d1d3d4"
-          d="M175.578,124.03H80.422c-1.431,0-2.591-1.16-2.591-2.591v0c0-1.431,1.16-2.591,2.591-2.591h95.156 c1.431,0,2.591,1.16,2.591,2.591v0C178.169,122.87,177.009,124.03,175.578,124.03z"
-        />
-        <path
-          fill="#d1d3d4"
-          d="M175.578,138.881H80.422c-1.431,0-2.591-1.16-2.591-2.591l0,0c0-1.431,1.16-2.591,2.591-2.591h95.156 c1.431,0,2.591,1.16,2.591,2.591l0,0C178.169,137.721,177.009,138.881,175.578,138.881z"
-        />
-        <polygon
-          fill="#d1d3d4"
-          points="156.425,163.403 99.575,163.403 106.139,168.585 149.861,168.585"
-        />
-      </g>
-      <g>
-        <polygon
-          fill="#d1d3d4"
-          points="175.236,148.551 80.764,148.551 87.328,153.733 168.672,153.733"
-        />
-      </g>
-    </svg>
-  );
-}

src/components/ReactIcons/VideoIcon.tsx

@@ -1,23 +0,0 @@
-type VideoIconProps = {
-  className: string;
-};
-
-export function VideoIcon(props: VideoIconProps) {
-  const { className } = props;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      className={className}
-    >
-      <path
-        strokeLinecap="round"
-        d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
-      />
-    </svg>
-  );
-}

src/components/RespondInviteForm.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { httpGet, httpPatch } from '../lib/http';
+import BuildingIcon from '../icons/building.svg';
+import ErrorIcon from '../icons/error.svg';
 import { pageProgressMessage } from '../stores/page';
 import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import type { AllowedRoles } from './CreateTeam/RoleDropdown';
@@ -7,8 +9,6 @@ import type { AllowedMemberStatus } from './TeamDropdown/TeamDropdown';
 import { isLoggedIn } from '../lib/jwt';
 import { showLoginPopup } from '../lib/popup';
 import { getUrlParams } from '../lib/browser';
-import { ErrorIcon2 } from './ReactIcons/ErrorIcon2';
-import { BuildingIcon } from './ReactIcons/BuildingIcon';
 
 type InvitationResponse = {
   team: TeamDocument;
@@ -85,7 +85,11 @@ export function RespondInviteForm() {
   if (!invite) {
     return (
       <div className="container text-center">
-        <ErrorIcon2 className="mx-auto mb-4 mt-24 w-20 opacity-20" />
+        <img
+          alt={'error'}
+          src={ErrorIcon.src}
+          className="mx-auto mb-4 mt-24 w-20 opacity-20"
+        />
 
         <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
         <p className="mb-4 text-base leading-6 text-gray-600">
@@ -106,7 +110,11 @@ export function RespondInviteForm() {
 
   return (
     <div className="container text-center">
-      <BuildingIcon className="mx-auto mb-4 mt-24 w-20 opacity-20" />
+      <img
+        alt={'join team'}
+        src={BuildingIcon.src}
+        className="mx-auto mb-4 mt-24 w-20 opacity-20"
+      />
 
       <h2 className={'mb-1 text-2xl font-bold'}>Join Team</h2>
       <p className="mb-3 text-base leading-6 text-gray-600">

src/components/RoadCard/Editor.tsx

@@ -1,5 +1,5 @@
 import { useCopyText } from '../../hooks/use-copy-text';
-import { CopyIcon } from 'lucide-react';
+import CopyIcon from '../../icons/copy.svg';
 
 type EditorProps = {
   title: string;
@@ -20,11 +20,11 @@ export function Editor(props: EditorProps) {
         <button className="flex items-center" onClick={() => copyText(text)}>
           {isCopied && (
             <span className="mr-1 text-xs leading-none text-gray-700">
-              Copied!&nbsp;
+              Copied!
             </span>
           )}
 
-          <CopyIcon className="inline-block h-4 w-4" />
+          <img src={CopyIcon.src} alt="Copy" className="inline-block h-4 w-4" />
         </button>
       </div>
       <textarea