galaxyproject · frano-m · Nov 18, 2025 · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025
diff --git a/app/components/common/Card/components/SectionContentCard/constants.ts b/app/components/common/Card/components/SectionContentCard/constants.ts
@@ -0,0 +1,24 @@
+import { CardProps, StackProps, SvgIconProps } from "@mui/material";
+import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/components/RoundedPaper/roundedPaper";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/svgIcon";
+
+export const CARD_PROPS: CardProps = {
+  component: RoundedPaper,
+};
+
+export const STACK_PROPS: StackProps = {
+  gap: 1,
+  useFlexGap: true,
+};
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  color: MUI_SVG_ICON_PROPS.COLOR.PRIMARY,
+  fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+  sx: { gridColumn: 2, gridRow: 1, p: 2.5 },
+};
+
+export const TYPOGRAPHY_PROPS = {
+  color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES,
+};
diff --git a/app/components/common/Card/components/SectionContentCard/sectionContentCard.styles.ts b/app/components/common/Card/components/SectionContentCard/sectionContentCard.styles.ts
@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import { Card, Stack } from "@mui/material";
+
+export const StyledCard = styled(Card)`
+  &.MuiPaper-root {
+    align-items: stretch;
+    display: flex;
+  }
+
+  .MuiButtonBase-root {
+    align-content: flex-start;
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr;
+    padding: 16px;
+
+    .MuiSvgIcon-root {
+      box-sizing: content-box;
+    }
+
+    img {
+      margin: 0;
+    }
+  }
+` as typeof Card;
+
+export const StyledStack = styled(Stack)`
+  grid-column: 1 / -1;
+`;
diff --git a/app/components/common/Card/components/SectionContentCard/sectionContentCard.tsx b/app/components/common/Card/components/SectionContentCard/sectionContentCard.tsx
@@ -0,0 +1,43 @@
+import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";
+import { BaseComponentProps } from "@databiosphere/findable-ui/lib/components/types";
+import { CardActionArea } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardActionArea/cardActionArea";
+import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
+import { ForwardArrowIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/ForwardArrowIcon/forwardArrowIcon";
+import { StyledStack, StyledCard } from "./sectionContentCard.styles";
+import { Typography } from "@mui/material";
+import { Props } from "./types";
+import {
+  CARD_PROPS,
+  STACK_PROPS,
+  SVG_ICON_PROPS,
+  TYPOGRAPHY_PROPS,
+} from "./constants";
+import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+
+export const SectionContentCard = ({
+  cardUrl,
+  className,
+  EndIcon = ForwardArrowIcon,
+  image,
+  secondaryText,
+  StartIcon,
+  title,
+}: BaseComponentProps &
+  Pick<CardProps, "cardUrl" | "secondaryText" | "title"> &
+  Props): JSX.Element => {
+  return (
+    <StyledCard {...CARD_PROPS} className={className}>
+      <CardActionArea cardUrl={cardUrl}>
+        {StartIcon && <StartIcon sx={{ fontSize: 48 }} />}
+        {image && <StaticImage {...image} />}
+        <EndIcon {...SVG_ICON_PROPS} />
+        <StyledStack {...STACK_PROPS}>
+          <CardTitle component="span">{title}</CardTitle>
+          {secondaryText && (
+            <Typography {...TYPOGRAPHY_PROPS}>{secondaryText}</Typography>
+          )}
+        </StyledStack>
+      </CardActionArea>
+    </StyledCard>
+  );
+};
diff --git a/app/components/common/Card/components/SectionContentCard/types.ts b/app/components/common/Card/components/SectionContentCard/types.ts
@@ -0,0 +1,8 @@
+import { ComponentProps, ElementType } from "react";
+import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+
+export interface Props {
+  EndIcon?: ElementType;
+  image?: ComponentProps<typeof StaticImage>;
+  StartIcon?: ElementType;
+}
diff --git a/app/docs/learn/faqs.mdx b/app/docs/learn/faqs.mdx
@@ -0,0 +1,10 @@
+---
+breadcrumbs:
+  - path: "/learn"
+    text: "Learn"
+  - path: ""
+    text: "FAQs"
+description: ""
+enableOutline: true
+title: "FAQs"
+---
diff --git a/app/docs/learn/featured-analyses.mdx b/app/docs/learn/featured-analyses.mdx
@@ -1,6 +1,6 @@
 ---
 breadcrumbs:
-  - path: ""
+  - path: "/learn"
     text: "Learn"
   - path: ""
     text: "Featured Analyses"

diff --git a/...learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx b/...learn/featured-analyses/evolutionary-dynamics-of-coding-overlaps-in-measles.mdx
@@ -1,6 +1,6 @@
 ---
 breadcrumbs:
-  - path: ""
+  - path: "/learn"
     text: "Learn"
   - path: "/learn/featured-analyses"
     text: "Featured Analyses"

diff --git a/app/docs/learn/getting-started.mdx b/app/docs/learn/getting-started.mdx
@@ -0,0 +1,10 @@
+---
+breadcrumbs:
+  - path: "/learn"
+    text: "Learn"
+  - path: ""
+    text: "Getting Started"
+description: ""
+enableOutline: true
+title: "Getting Started"
+---
diff --git a/app/docs/learn/using-galaxy.mdx b/app/docs/learn/using-galaxy.mdx
@@ -0,0 +1,10 @@
+---
+breadcrumbs:
+  - path: "/learn"
+    text: "Learn"
+  - path: ""
+    text: "Using Galaxy"
+description: ""
+enableOutline: true
+title: "Using Galaxy"
+---
diff --git a/app/views/LearnView/components/icon/BookmarkStarIcon/bookmarkStarIcon.tsx b/app/views/LearnView/components/icon/BookmarkStarIcon/bookmarkStarIcon.tsx
@@ -0,0 +1,17 @@
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export const BookmarkStarIcon = ({
+  fontSize = "large",
+  viewBox = "0 0 48 48",
+  ...props
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M20.9665 26.6667L23.9998 24.8333L27.0332 26.6667L26.2332 23.2L28.8998 20.9L25.3998 20.6L23.9998 17.3333L22.5998 20.6L19.0998 20.9L21.7665 23.2L20.9665 26.6667ZM14.6665 36V14.111C14.6665 13.511 14.8868 12.9907 15.3275 12.55C15.7684 12.1093 16.2888 11.889 16.8888 11.889H31.1108C31.7108 11.889 32.2313 12.1093 32.6722 12.55C33.1128 12.9907 33.3332 13.511 33.3332 14.111V36L23.9998 32L14.6665 36Z"
+        fill={PALETTE.PRIMARY_MAIN}
+      />
+    </SvgIcon>
+  );
+};
diff --git a/app/views/LearnView/components/icon/GalaxyIcon/galaxyIcon.tsx b/app/views/LearnView/components/icon/GalaxyIcon/galaxyIcon.tsx
@@ -0,0 +1,38 @@
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export const GalaxyIcon = ({
+  fontSize = "large",
+  viewBox = "0 0 48 48",
+  ...props
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M32.3567 17.5948H6.26356C5.91733 17.5948 5.66553 17.3115 5.66553 16.9967V10.198C5.66553 9.8518 5.94881 9.6 6.26356 9.6H32.3567C32.7029 9.6 32.9547 9.88328 32.9547 10.198V16.9023C32.9547 17.2485 32.7344 17.5948 32.3567 17.5948Z"
+        fill={PALETTE.PRIMARY_MAIN}
+      />
+      <path
+        d="M25.3691 28.0761H6.32651C5.98028 28.0761 5.66553 27.7928 5.66553 27.4151V20.7423C5.66553 20.3961 5.94881 20.0813 6.32651 20.0813H25.3691C25.7154 20.0813 26.0301 20.3646 26.0301 20.7423V27.4151C26.0301 27.7928 25.7468 28.0761 25.3691 28.0761Z"
+        fill={PALETTE.PRIMARY_MAIN}
+      />
+      <path
+        d="M41.7365 38.4H15.6434C15.2972 38.4 14.9824 38.1167 14.9824 37.739V31.0662C14.9824 30.72 15.2657 30.4052 15.6434 30.4052H41.6736C42.0198 30.4052 42.3346 30.6885 42.3346 31.0662V37.739C42.3346 38.1167 42.0513 38.4 41.7365 38.4Z"
+        fill="url(#paint0_linear_3275_4418)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_3275_4418"
+          x1="15.0107"
+          y1="34.4082"
+          x2="42.3767"
+          y2="34.4082"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.1656" stopColor={PALETTE.PRIMARY_MAIN} />
+          <stop offset="1" stopColor={PALETTE.PRIMARY_MAIN} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </SvgIcon>
+  );
+};
diff --git a/app/views/LearnView/components/icon/LiveHelpIcon/liveHelpIcon.tsx b/app/views/LearnView/components/icon/LiveHelpIcon/liveHelpIcon.tsx
@@ -0,0 +1,17 @@
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export const LiveHelpIcon = ({
+  fontSize = "large",
+  viewBox = "0 0 48 48",
+  ...props
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M20 34.6667H14.6667C13.9333 34.6667 13.3056 34.4056 12.7833 33.8833C12.2611 33.3611 12 32.7333 12 32V13.3333C12 12.6 12.2611 11.9722 12.7833 11.45C13.3056 10.9278 13.9333 10.6667 14.6667 10.6667H33.3333C34.0667 10.6667 34.6944 10.9278 35.2167 11.45C35.7389 11.9722 36 12.6 36 13.3333V32C36 32.7333 35.7389 33.3611 35.2167 33.8833C34.6944 34.4056 34.0667 34.6667 33.3333 34.6667H28L24.9333 37.7333C24.6667 38 24.3556 38.1333 24 38.1333C23.6444 38.1333 23.3333 38 23.0667 37.7333L20 34.6667ZM23.8667 30.6667C24.3333 30.6667 24.7278 30.5056 25.05 30.1833C25.3722 29.8611 25.5333 29.4667 25.5333 29C25.5333 28.5333 25.3722 28.1389 25.05 27.8167C24.7278 27.4944 24.3333 27.3333 23.8667 27.3333C23.4 27.3333 23.0056 27.4944 22.6833 27.8167C22.3611 28.1389 22.2 28.5333 22.2 29C22.2 29.4667 22.3611 29.8611 22.6833 30.1833C23.0056 30.5056 23.4 30.6667 23.8667 30.6667ZM26.2 18.6667C26.2 19.0444 26.0778 19.45 25.8333 19.8833C25.5889 20.3167 25.1778 20.7889 24.6 21.3C24.2222 21.6333 23.9167 21.95 23.6833 22.25C23.45 22.55 23.2556 22.8556 23.1 23.1667C23.0111 23.3444 22.9444 23.5222 22.9 23.7C22.8556 23.8778 22.8111 24.0778 22.7667 24.3C22.7222 24.6333 22.8111 24.9222 23.0333 25.1667C23.2556 25.4111 23.5444 25.5333 23.9 25.5333C24.2111 25.5333 24.4889 25.4222 24.7333 25.2C24.9778 24.9778 25.1444 24.6778 25.2333 24.3C25.3 23.9889 25.4278 23.7 25.6167 23.4333C25.8056 23.1667 26.1111 22.8222 26.5333 22.4C27.3111 21.6222 27.8611 20.9667 28.1833 20.4333C28.5056 19.9 28.6667 19.3111 28.6667 18.6667C28.6667 17.4667 28.2611 16.5 27.45 15.7667C26.6389 15.0333 25.5333 14.6667 24.1333 14.6667C23.1333 14.6667 22.2667 14.8778 21.5333 15.3C20.8 15.7222 20.2111 16.3111 19.7667 17.0667C19.6111 17.3333 19.6056 17.6111 19.75 17.9C19.8944 18.1889 20.1222 18.3889 20.4333 18.5C20.7222 18.6111 21.0111 18.6111 21.3 18.5C21.5889 18.3889 21.8222 18.2111 22 17.9667C22.2444 17.6556 22.5444 17.4056 22.9 17.2167C23.2556 17.0278 23.6667 16.9333 24.1333 16.9333C24.7111 16.9333 25.2 17.0944 25.6 17.4167C26 17.7389 26.2 18.1556 26.2 18.6667Z"
+        fill={PALETTE.PRIMARY_MAIN}
+      />
+    </SvgIcon>
+  );
+};
diff --git a/app/views/LearnView/components/icon/RocketLaunchIcon/rocketLaunchIcon.tsx b/app/views/LearnView/components/icon/RocketLaunchIcon/rocketLaunchIcon.tsx
@@ -0,0 +1,17 @@
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export const RocketLaunchIcon = ({
+  fontSize = "large",
+  viewBox = "0 0 48 48",
+  ...props
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M16.1666 24.2C16.7443 22.7333 17.4388 21.3222 18.2499 19.9667C19.061 18.6111 19.9777 17.3333 20.9999 16.1333L19.2666 15.7667C18.8221 15.6778 18.3888 15.7 17.9666 15.8333C17.5443 15.9667 17.1777 16.1889 16.8666 16.5L12.6666 20.7C12.3332 21.0333 12.2055 21.4333 12.2832 21.9C12.361 22.3667 12.6221 22.6889 13.0666 22.8667L16.1666 24.2ZM35.7666 11.2C33.411 11.0889 31.1721 11.5444 29.0499 12.5667C26.9277 13.5889 25.0332 14.9333 23.3666 16.6C22.2999 17.6667 21.361 18.8222 20.5499 20.0667C19.7388 21.3111 19.0332 22.6222 18.4332 24C18.3221 24.2889 18.2666 24.5833 18.2666 24.8833C18.2666 25.1833 18.3777 25.4444 18.5999 25.6667L22.7666 29.8333C22.9888 30.0555 23.2499 30.1667 23.5499 30.1667C23.8499 30.1667 24.1443 30.1111 24.4332 30C25.811 29.4 27.1221 28.6944 28.3666 27.8833C29.611 27.0722 30.7666 26.1333 31.8332 25.0667C33.4999 23.4 34.8443 21.5056 35.8666 19.3833C36.8888 17.2611 37.3443 15.0222 37.2332 12.6667C37.2332 12.4889 37.1888 12.3111 37.0999 12.1333C37.011 11.9556 36.8999 11.8 36.7666 11.6667C36.6332 11.5333 36.4777 11.4222 36.2999 11.3333C36.1221 11.2444 35.9443 11.2 35.7666 11.2ZM27.2999 21.1333C26.7888 20.6222 26.5332 19.9944 26.5332 19.25C26.5332 18.5055 26.7888 17.8778 27.2999 17.3667C27.811 16.8556 28.4388 16.6 29.1832 16.6C29.9277 16.6 30.5555 16.8556 31.0666 17.3667C31.5777 17.8778 31.8332 18.5055 31.8332 19.25C31.8332 19.9944 31.5777 20.6222 31.0666 21.1333C30.5555 21.6444 29.9277 21.9 29.1832 21.9C28.4388 21.9 27.811 21.6444 27.2999 21.1333ZM24.2332 32.2667L25.5666 35.3667C25.7443 35.8111 26.0666 36.0778 26.5332 36.1667C26.9999 36.2556 27.3999 36.1333 27.7332 35.8L31.9332 31.6C32.2443 31.2889 32.4666 30.9167 32.5999 30.4833C32.7332 30.05 32.7555 29.6111 32.6666 29.1667L32.3332 27.4333C31.111 28.4556 29.8277 29.3722 28.4832 30.1833C27.1388 30.9944 25.7221 31.6889 24.2332 32.2667ZM13.3999 29.4C14.1777 28.6222 15.1221 28.2278 16.2332 28.2167C17.3443 28.2056 18.2888 28.5889 19.0666 29.3667C19.8443 30.1444 20.2332 31.0889 20.2332 32.2C20.2332 33.3111 19.8443 34.2556 19.0666 35.0333C17.9999 36.1 16.7388 36.7333 15.2832 36.9333C13.8277 37.1333 12.3666 37.3333 10.8999 37.5333C11.0999 36.0667 11.3055 34.6056 11.5166 33.15C11.7277 31.6944 12.3555 30.4444 13.3999 29.4Z"
+        fill={PALETTE.PRIMARY_MAIN}
+      />
+    </SvgIcon>
+  );
+};
diff --git a/app/views/LearnView/constants.ts b/app/views/LearnView/constants.ts
@@ -0,0 +1,33 @@
+import { SectionContentCard } from "../../components/common/Card/components/SectionContentCard/sectionContentCard";
+import { ComponentProps } from "react";
+import { RocketLaunchIcon } from "./components/icon/RocketLaunchIcon/rocketLaunchIcon";
+import { BookmarkStarIcon } from "./components/icon/BookmarkStarIcon/bookmarkStarIcon";
+import { LiveHelpIcon } from "./components/icon/LiveHelpIcon/liveHelpIcon";
+import { GalaxyIcon } from "./components/icon/GalaxyIcon/galaxyIcon";
+
+export const CARDS: ComponentProps<typeof SectionContentCard>[] = [
+  {
+    StartIcon: RocketLaunchIcon,
+    cardUrl: "/learn/getting-started",
+    secondaryText: "",
+    title: "Get Started",
+  },
+  {
+    StartIcon: GalaxyIcon,
+    cardUrl: "/learn/using-galaxy",
+    secondaryText: "",
+    title: "Using Galaxy",
+  },
+  {
+    StartIcon: BookmarkStarIcon,
+    cardUrl: "/learn/featured-analyses",
+    secondaryText: "",
+    title: "Featured Analyses",
+  },
+  {
+    StartIcon: LiveHelpIcon,
+    cardUrl: "/learn/faqs",
+    secondaryText: "",
+    title: "FAQs",
+  },
+];
diff --git a/app/views/LearnView/learnView.styles.ts b/app/views/LearnView/learnView.styles.ts
@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { bpDownSm } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import { Stack } from "@mui/material";
+
+export const StyledStack = styled(Stack)`
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
+
+  ${bpDownSm} {
+    grid-template-columns: 1fr;
+  }
+`;
diff --git a/app/views/LearnView/learnView.tsx b/app/views/LearnView/learnView.tsx
@@ -0,0 +1,33 @@
+import { Fragment } from "react";
+import { StyledStack } from "./learnView.styles";
+import { SectionContentCard } from "../../components/common/Card/components/SectionContentCard/sectionContentCard";
+import { CARDS } from "./constants";
+import { StyledSectionHero } from "../../components/Docs/components/SectionHero/sectionHero.styles";
+import { SectionContent } from "../../components/Docs/components/SectionContent/sectionContent";
+
+export const LearnView = (): JSX.Element => {
+  return (
+    <Fragment>
+      <StyledSectionHero
+        breadcrumbs={[
+          { path: "/", text: "Home" },
+          { path: "", text: "Learn About BRC Analytics" },
+        ]}
+        head="Learn About BRC Analytics"
+        subHead={null}
+      />
+      <SectionContent
+        content={
+          <StyledStack>
+            {CARDS.map((card, index) => (
+              <SectionContentCard key={index} {...card} />
+            ))}
+          </StyledStack>
+        }
+        frontmatter={null}
+        pageTitle="Learn About BRC Analytics"
+        slug={[]}
+      />
+    </Fragment>
+  );
+};
diff --git a/pages/learn/index.tsx b/pages/learn/index.tsx
@@ -0,0 +1,18 @@
+import { LearnView } from "../../app/views/LearnView/learnView";
+import { GetStaticProps } from "next";
+import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles";
+import { StaticProps } from "../../app/docs/common/staticGeneration/types";
+
+const Page = (): JSX.Element => {
+  return <LearnView />;
+};
+
+export const getStaticProps: GetStaticProps<
+  Pick<StaticProps, "pageTitle">
+> = async () => {
+  return { props: { pageTitle: "Learn About BRC Analytics" } };
+};
+
+export default Page;
+
+Page.Main = StyledPagesMain;
diff --git a/routes/constants.ts b/routes/constants.ts
@@ -4,7 +4,7 @@ export const ROUTES = {
   CONFIGURE_WORKFLOW: "/data/assemblies/{entityId}/{trsId}",
   GENOME: "/data/assemblies/{entityId}",
   GENOMES: "/data/assemblies",
-  LEARN: "/learn/featured-analyses",
+  LEARN: "/learn",
   ORGANISMS: "/data/organisms",
   PRIORITY_PATHOGEN: "/data/[entityListType]/[entityId]",
   PRIORITY_PATHOGENS: "/data/priority-pathogens",