continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,53 @@
+"use client";
+
+import { JSX } from "react";
+
+import { useHeaderContext } from "@/components/shared/header/HeaderContext";
+import { cn } from "@/utils/cn";
+
+import ChevronDown from "./_svg/ChevronDown";
+
+export default function HeaderNavItem({
+  label,
+  href,
+  dropdown,
+}: {
+  label: string;
+  href: string;
+  dropdown?: JSX.Element;
+}) {
+  const { dropdownContent, setDropdownContent, clearDropdown } =
+    useHeaderContext();
+
+  const active = dropdownContent === dropdown;
+
+  return (
+    <a
+      className="p-6 relative flex h-32 group rounded-8 active:scale-[0.98] transition-all duration-[50ms] active:duration-[100ms]"
+      href={href}
+      onMouseEnter={() => {
+        if (dropdown) {
+          setDropdownContent(dropdown);
+        } else {
+          clearDropdown(true);
+        }
+      }}
+      onMouseLeave={() => {
+        if (!dropdown) return;
+
+        clearDropdown();
+      }}
+    >
+      <span
+        className={cn(
+          "overlay pointer-events-none group-hover:bg-black-alpha-4 transition-all scale-95 group-active:duration-[100ms] duration-[150ms] group-hover:scale-100 group-active:bg-black-alpha-7",
+          active && "!scale-100 !bg-black-alpha-4",
+        )}
+      />
+
+      <span className="px-4 text-label-medium text-accent-black">{label}</span>
+
+      {dropdown && <ChevronDown />}
+    </a>
+  );
+}
@@ -0,0 +1,20 @@
+export default function ChevronDown() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 18 20"
+      width="18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 9.5L9 12.5L12 9.5"
+        stroke="#262626"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeOpacity="0.56"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,319 @@
+import EndpointsCrawl from "@/components/app/(home)/sections/endpoints/EndpointsCrawl/EndpointsCrawl";
+import EndpointsScrape from "@/components/app/(home)/sections/endpoints/EndpointsScrape/EndpointsScrape";
+import EndpointsSearch from "@/components/app/(home)/sections/endpoints/EndpointsSearch/EndpointsSearch";
+import EndpointsExtract from "@/components/app/(home)/sections/endpoints/Extract/Extract";
+import EndpointsMcp from "@/components/app/(home)/sections/endpoints/Mcp/Mcp";
+import { RenderEndpointIcon } from "@/components/shared/header/Nav/RenderEndpointIcon";
+import HeaderDropdownContent from "@/components/shared/header/Dropdown/Content/Content";
+import HeaderDropdownGithub from "@/components/shared/header/Dropdown/Github/Github";
+import HeaderDropdownStories from "@/components/shared/header/Dropdown/Stories/Stories";
+
+import Affiliate from "./_svg/Affiliate";
+import Api from "./_svg/Api";
+import ArrowRight from "./_svg/ArrowRight";
+import Careers from "./_svg/Careers";
+import Changelog from "./_svg/Changelog";
+import Chats from "./_svg/Chats";
+import Lead from "./_svg/Lead";
+import Platforms from "./_svg/Platforms";
+import Research from "./_svg/Research";
+import Student from "./_svg/Student";
+import Templates from "./_svg/Templates";
+import HeaderNavItem from "./Item/Item";
+import MCPIcon from "./_svg/MCP";
+import Image from "@/components/shared/image/Image";
+import GithubFlame from "@/components/shared/header/Dropdown/Github/Flame/Flame";
+import EndpointsMap from "@/components/app/(home)/sections/endpoints/EndpointsMap/EndpointsMap";
+
+export default function HeaderNav() {
+  return (
+    <div className="flex gap-8 relative lg-max:hidden select-none">
+      {NAV_ITEMS.map((item) => (
+        <HeaderNavItem key={item.label} {...item} />
+      ))}
+    </div>
+  );
+}
+
+export const NAV_ITEMS = [
+  {
+    label: "Products",
+    href: "#",
+    dropdown: (
+      <HeaderDropdownContent
+        navigationItems={[
+          {
+            label: "Endpoints",
+            items: [
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsScrape}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "Scrape",
+                description: "Turn any url into clean data",
+                href: "https://docs.firecrawl.dev/features/scrape",
+                iconClassName: "-mt-1",
+              },
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsCrawl}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "Crawl",
+                description: "Crawl entire websites",
+                href: "https://docs.firecrawl.dev/features/crawl",
+                iconClassName: "-mt-1",
+              },
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsSearch}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "Search",
+                description: "Search and get page content",
+                href: "https://docs.firecrawl.dev/features/search",
+                iconClassName: "-mt-1",
+              },
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsMap}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "Map",
+                description: "Get all links from a website",
+                href: "https://docs.firecrawl.dev/features/map",
+                iconClassName: "-mt-1",
+              },
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsMcp}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "MCP",
+                description: "Connect Firecrawl to agents",
+                href: "https://docs.firecrawl.dev/features/mcp",
+                iconClassName: "-mt-1",
+              },
+
+              // Extract section in the same column, highlighted as a separate product
+              // {
+              //   icon: <RenderEndpointIcon icon={EndpointsExtract} alwaysHeat triggerOnHover />,
+              //   label: 'Extract',
+              //   description: 'Get structured data from single pages or entire websites with AI.',
+              //   href: '/extract',
+              //   big: true,
+              //   sectionLabel: 'Extract Product',
+              //   iconClassName: 'mt-4',
+              //   ctas: [
+              //     { label: 'View Extract', href: '/extract' },
+              //     { label: 'Try it now', href: '/playground?mode=extract' }
+              //   ]
+              // },
+            ],
+          },
+          {
+            label: "Use Cases",
+            items: [
+              {
+                icon: <Chats />,
+                label: "AI Platforms",
+                description: "Let customers build AI apps",
+                href: "https://docs.firecrawl.dev/use-cases/ai-platforms",
+                target: "_blank",
+              },
+              {
+                icon: <Lead />,
+                label: "Lead Enrichment",
+                description: "Enhance sales data",
+                href: "https://docs.firecrawl.dev/use-cases/lead-enrichment",
+                target: "_blank",
+              },
+              {
+                icon: <Platforms />,
+                label: "SEO Platforms",
+                description: "Power SEO/GEO tools",
+                href: "https://docs.firecrawl.dev/use-cases/seo-platforms",
+                target: "_blank",
+              },
+              {
+                icon: <Research />,
+                label: "Deep Research",
+                description: "Build research agents",
+                href: "https://docs.firecrawl.dev/use-cases/deep-research",
+                target: "_blank",
+              },
+              {
+                icon: <ArrowRight />,
+                label: "View more",
+                description: "Explore all use cases",
+                href: "https://docs.firecrawl.dev/use-cases/overview",
+                target: "_blank",
+              },
+            ],
+          },
+        ]}
+        sideContent={<HeaderDropdownStories />}
+        sideItem={{
+          icon: <ArrowRight />,
+          label: "Customer stories",
+          description: "Browse Firecrawl success stories",
+          href: "/blog/category/customer-stories",
+        }}
+        sideLabel="Customer Stories"
+      />
+    ),
+  },
+  {
+    label: "Playground",
+    href: "/playground",
+  },
+  {
+    label: "Docs",
+    href: "https://docs.firecrawl.dev",
+  },
+  {
+    label: "Pricing",
+    href: "/pricing",
+  },
+  {
+    label: "Blog",
+    href: "/blog",
+  },
+  {
+    label: "Extract",
+    href: "#",
+    dropdown: (
+      <HeaderDropdownContent
+        navigationItems={[
+          {
+            label: "Extract API",
+            items: [
+              // { icon: <Templates />, label: 'Templates', description: 'Jumpstart your web scraping', href: '/templates' },
+              {
+                icon: (
+                  <RenderEndpointIcon
+                    icon={EndpointsExtract}
+                    alwaysHeat
+                    triggerOnHover
+                  />
+                ),
+                label: "Extract",
+                description: "Get structured data from entire websites",
+                href: "/extract",
+              },
+              {
+                icon: (
+                  <div className="text-heat-100">
+                    <Platforms />
+                  </div>
+                ),
+                label: "Playground",
+                description: "Try it out in the /extract playground",
+                href: "/app/extract-playground",
+              },
+              // { icon: <ArrowRight/>, label: 'Docs', description: 'Read the docs.', href: 'https://docs.firecrawl.dev/features/extract', target: '_blank' },
+            ],
+          },
+        ]}
+        sideContent={
+          <div className="py-24 px-44 border-b border-border-faint relative overflow-clip">
+            {/* <div className="size-40 relative mb-17"> */}
+            {/*  */}
+            {/* </div> */}
+
+            <div className="text-label-large">
+              Get web data with a prompt. <br />
+              Collect structured data from any number of URLs or entire domains.
+            </div>
+
+            <GithubFlame />
+          </div>
+        }
+        sideItem={{
+          icon: <ArrowRight />,
+          label: "See Docs",
+          description: "Read the docs.",
+          href: "https://docs.firecrawl.dev/features/extract",
+        }}
+        sideLabel="/extract"
+      />
+    ),
+  },
+  {
+    label: "Resources",
+    href: "#",
+    dropdown: (
+      <HeaderDropdownContent
+        navigationItems={[
+          {
+            label: "Resources",
+            items: [
+              // { icon: <Templates />, label: 'Templates', description: 'Jumpstart your web scraping', href: '/templates' },
+              {
+                icon: <Changelog />,
+                label: "Changelog",
+                description: "Latest APl updates for Firecrawl",
+                href: "/changelog",
+              },
+              {
+                icon: <Api />,
+                label: "API Status",
+                description: "See maintenance, uptime and more",
+                href: "https://firecrawl.betteruptime.dev/",
+                target: "_blank",
+              },
+              {
+                icon: <Careers />,
+                label: "Careers",
+                description: "Join our team, we're hiring!",
+                href: "/careers",
+              },
+              {
+                icon: <Affiliate />,
+                label: "Creator & OSS Program",
+                description: "Earn rewards for referring customers",
+                href: "/creator-oss-program",
+              },
+              {
+                icon: <Student />,
+                label: "Student Program",
+                description: "Get free credits for your projects",
+                href: "/student-program",
+              },
+              {
+                icon: <MCPIcon />,
+                label: "MCP",
+                description: "Connect Firecrawl to agents",
+                href: "https://docs.firecrawl.dev/features/mcp",
+              },
+            ],
+          },
+        ]}
+        sideContent={<HeaderDropdownGithub />}
+        sideItem={{
+          icon: <ArrowRight />,
+          label: "See Github",
+          description: "View the repository",
+          href: "https://github.com/firecrawl/firecrawl",
+        }}
+        sideLabel="Open Source"
+      />
+    ),
+  },
+];
@@ -0,0 +1,16 @@
+"use client";
+
+import EndpointsScrape from "@/components/app/(home)/sections/endpoints/EndpointsScrape/EndpointsScrape";
+import { ComponentProps } from "react";
+import { useMediaQuery } from "usehooks-ts";
+
+export const RenderEndpointIcon = ({
+  icon: Icon,
+  ...props
+}: { icon: typeof EndpointsScrape } & ComponentProps<
+  typeof EndpointsScrape
+>) => {
+  const isMobile = useMediaQuery("(max-width: 996px)");
+
+  return <Icon {...props} size={isMobile ? 24 : 20} />;
+};
@@ -0,0 +1,35 @@
+export default function Affiliate() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.3332 6.6665L6.6665 13.3332M17.7082 9.99984C17.7082 14.257 14.257 17.7082 9.99984 17.7082C5.74265 17.7082 2.2915 14.257 2.2915 9.99984C2.2915 5.74265 5.74265 2.2915 9.99984 2.2915C14.257 2.2915 17.7082 5.74265 17.7082 9.99984Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M7.5 6.875C7.84517 6.875 8.125 7.15483 8.125 7.5C8.125 7.84517 7.84517 8.125 7.5 8.125C7.15483 8.125 6.875 7.84517 6.875 7.5C6.875 7.15483 7.15483 6.875 7.5 6.875Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M12.5 11.875C12.8452 11.875 13.125 12.1548 13.125 12.5C13.125 12.8452 12.8452 13.125 12.5 13.125C12.1548 13.125 11.875 12.8452 11.875 12.5C11.875 12.1548 12.1548 11.875 12.5 11.875Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export default function Api() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.125 4.79167C3.125 3.87119 3.87119 3.125 4.79167 3.125H15.2083C16.1288 3.125 16.875 3.87119 16.875 4.79167V15.2083C16.875 16.1288 16.1288 16.875 15.2083 16.875H4.79167C3.87119 16.875 3.125 16.1288 3.125 15.2083V4.79167Z"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M3.125 10.0002H6.45833L8.33333 13.5418L11.6667 6.4585L13.5417 10.0002H16.875"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,20 @@
+export default function ArrowRight() {
+  return (
+    <svg
+      className="text-black-alpha-48 group-hover:text-heat-100 transition-all"
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.6667 4.7915L16.875 9.99982M16.875 9.99982L11.6667 15.2082M16.875 9.99982H3.125"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,19 @@
+export default function Careers() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.4998 10.625H9.99984M9.99984 10.625H2.49984M9.99984 10.625L10.0017 12.7083M6.66834 6.45833V4.375C6.66834 3.68464 7.22798 3.125 7.91834 3.125H12.085C12.7753 3.125 13.335 3.68464 13.335 4.375V6.45833M16.0415 16.875H3.95817C3.0377 16.875 2.2915 16.1288 2.2915 15.2083V8.125C2.2915 7.20452 3.0377 6.45833 3.95817 6.45833H16.0415C16.962 6.45833 17.7082 7.20452 17.7082 8.125V15.2083C17.7082 16.1288 16.962 16.875 16.0415 16.875Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,19 @@
+export default function Changelog() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.2915 2.7085H5.20817C4.2877 2.7085 3.5415 3.45469 3.5415 4.37516V15.6252C3.5415 16.5457 4.2877 17.2918 5.20817 17.2918H7.2915M7.2915 2.7085H14.7915C15.712 2.7085 16.4582 3.45469 16.4582 4.37516V15.6252C16.4582 16.5457 15.712 17.2918 14.7915 17.2918H7.2915M7.2915 2.7085V17.2918M10.6248 6.4585H13.1248M10.6248 9.79183H13.1248"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,28 @@
+export default function Ai() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M1.45825 7.50016C5.65385 7.50016 7.49992 5.6541 7.49992 1.4585C7.49992 5.6541 9.34598 7.50016 13.5416 7.50016C9.34598 7.50016 7.49992 9.34623 7.49992 13.5418C7.49992 9.34623 5.65385 7.50016 1.45825 7.50016Z"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        clipRule="evenodd"
+        d="M10.6249 14.5835C13.3738 14.5835 14.5833 13.374 14.5833 10.6252C14.5833 13.374 15.7927 14.5835 18.5416 14.5835C15.7927 14.5835 14.5833 15.793 14.5833 18.5418C14.5833 15.793 13.3738 14.5835 10.6249 14.5835Z"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,18 @@
+export default function Lead() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.8333 16.0417H16.25C17.1705 16.0417 17.9167 15.2955 17.9167 14.375V7.29167C17.9167 6.37119 17.1705 5.625 16.25 5.625H11.1003C10.543 5.625 10.0227 5.3465 9.71355 4.88283L9.03644 3.86717C8.72733 3.4035 8.20695 3.125 7.64969 3.125H4.16666C3.24619 3.125 2.5 3.87119 2.5 4.79167V6.875M6.45833 10.4167C6.45833 11.2221 5.80541 11.875 5 11.875C4.19458 11.875 3.54166 11.2221 3.54166 10.4167C3.54166 9.61125 4.19458 8.95833 5 8.95833C5.80541 8.95833 6.45833 9.61125 6.45833 10.4167ZM1.93082 15.8928C2.5458 14.7359 3.69002 13.9583 5 13.9583C6.30997 13.9583 7.45419 14.7359 8.06918 15.8928C8.32136 16.3672 7.92297 16.875 7.38572 16.875H2.61427C2.07702 16.875 1.67864 16.3672 1.93082 15.8928Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,16 @@
+export default function MCPIcon() {
+  return (
+    <svg
+      fill="currentColor"
+      fill-rule="evenodd"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>ModelContextProtocol</title>
+      <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path>
+      <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path>
+    </svg>
+  );
+}
@@ -0,0 +1,37 @@
+export default function Platforms() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.41667 7.49984C5.18655 7.49984 5 7.31329 5 7.08317C5 6.85305 5.18655 6.6665 5.41667 6.6665C5.64679 6.6665 5.83333 6.85305 5.83333 7.08317C5.83333 7.31329 5.64679 7.49984 5.41667 7.49984Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.33333 7.49984C8.10321 7.49984 7.91667 7.31329 7.91667 7.08317C7.91667 6.85305 8.10321 6.6665 8.33333 6.6665C8.56345 6.6665 8.75 6.85305 8.75 7.08317C8.75 7.31329 8.56345 7.49984 8.33333 7.49984Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.25 7.49984C11.0199 7.49984 10.8333 7.31329 10.8333 7.08317C10.8333 6.85305 11.0199 6.6665 11.25 6.6665C11.4801 6.6665 11.6667 6.85305 11.6667 7.08317C11.6667 7.31329 11.4801 7.49984 11.25 7.49984Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.7084 10.2085V5.62516C17.7084 4.70469 16.9622 3.9585 16.0417 3.9585H3.95841C3.03794 3.9585 2.29175 4.70469 2.29175 5.62516V15.2085C2.29175 16.129 3.03794 16.8752 3.95841 16.8752H10.2084M18.3334 14.295L12.5001 12.5002L14.295 18.3335L15.6411 15.6412L18.3334 14.295Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,47 @@
+export default function Research() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.8956 8.9541L2.05646 9.98744C1.40773 10.2236 1.07325 10.9409 1.30937 11.5896L1.66563 12.5684C1.90175 13.2172 2.61906 13.5517 3.26778 13.3155L6.10693 12.2822"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M9.40608 6.36865L6.15568 7.55169C5.29072 7.86651 4.84474 8.82292 5.15956 9.68784L5.83647 11.5477C6.15129 12.4127 7.1077 12.8586 7.97266 12.5438L11.223 11.3608"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M11.062 4.82461L15.546 3.19257C15.9785 3.03516 16.4567 3.25815 16.6142 3.69063L18.4667 8.78066C18.6242 9.21316 18.4012 9.69132 17.9687 9.84874L13.4847 11.4807C12.4035 11.8743 11.208 11.3168 10.8144 10.2357L9.81691 7.49485C9.42332 6.41365 9.98082 5.21814 11.062 4.82461Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M8.95825 16.8748V12.2915"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M6.45825 16.875H11.4583"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,19 @@
+export default function Student() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.375 7.50417L10 11.8833L0.625 7.50417L10 3.125L19.375 7.50417ZM19.375 7.50417V12.7175M3.95835 9.14633V12.8756C3.95835 13.4922 4.29811 14.0585 4.84186 14.3482L9.21683 16.6793C9.70642 16.9403 10.2936 16.9403 10.7832 16.6793L15.1582 14.3482C15.7019 14.0585 16.0417 13.4922 16.0417 12.8756V9.14633"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,26 @@
+export default function Templates() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.95817 16.0417C3.0377 16.0417 2.2915 15.2955 2.2915 14.375V7.29167C2.2915 6.37119 3.0377 5.625 3.95817 5.625H16.0415C16.962 5.625 17.7082 6.37119 17.7082 7.29167V14.375C17.7082 15.2955 16.962 16.0417 16.0415 16.0417H3.95817Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M3.9585 3.125H16.0418"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}