Merge pull request #8606 from sagemathinc/latex-landing-page-20251003

Refresh Latex Landing Page

Author: williamstein

src/packages/frontend/account/dark-mode.ts

@@ -10,9 +10,6 @@ import { AccountStore } from "./store";
 
 export const DARK_MODE_KEYS = ["brightness", "contrast", "sepia"] as const;
 
-// Icon unicode character for dark mode toggle (◑ - circle with right half black)
-export const DARK_MODE_ICON = 0x25d1;
-
 type Config = Record<(typeof DARK_MODE_KEYS)[number], number>;
 
 export const DARK_MODE_MINS: Config = {

src/packages/frontend/account/other-settings.tsx

@@ -4,10 +4,10 @@
  */
 
 import { Button, Card, Slider } from "antd";
-import { debounce } from "lodash";
 import { Map } from "immutable";
+import { debounce } from "lodash";
 import { useMemo } from "react";
-import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, defineMessages, useIntl } from "react-intl";
 
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -41,15 +41,15 @@ import {
 import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import {
-  DARK_MODE_ICON,
   DARK_MODE_KEYS,
   DARK_MODE_MINS,
   get_dark_mode_config,
 } from "./dark-mode";
-import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import Messages from "./messages";
 import Tours from "./tours";

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -10,7 +10,6 @@ import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
 import { defineMessage, IntlShape, useIntl } from "react-intl";
 
-import { DARK_MODE_ICON } from "@cocalc/frontend/account/dark-mode";
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
@@ -30,6 +29,7 @@ import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai
 import { AI_GENERATE_DOC_TAG } from "@cocalc/frontend/project/page/home-page/ai-generate-utils";
 import openSupportTab from "@cocalc/frontend/support/open";
 import userTracking from "@cocalc/frontend/user-tracking";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 import { filename_extension } from "@cocalc/util/misc";
 import { addCommands } from "./commands";
 import { SEARCH_COMMANDS } from "./const";

src/packages/frontend/frame-editors/latex-editor/output-control-build.tsx

@@ -12,9 +12,8 @@ import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
 import { useIntl } from "react-intl";
 
-import { Button as BSButton } from "@cocalc/frontend/antd-bootstrap";
-import { DARK_MODE_ICON } from "@cocalc/frontend/account/dark-mode";
 import { set_account_table } from "@cocalc/frontend/account/util";
+import { Button as BSButton } from "@cocalc/frontend/antd-bootstrap";
 import { useRedux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import { COMMANDS } from "@cocalc/frontend/frame-editors/frame-tree/commands";
@@ -24,6 +23,7 @@ import {
   BUILD_ON_SAVE_LABEL,
 } from "@cocalc/frontend/frame-editors/frame-tree/commands/generic-commands";
 import { editor, IntlMessage } from "@cocalc/frontend/i18n";
+import { DARK_MODE_ICON } from "@cocalc/util/consts/ui";
 
 import { Actions } from "./actions";
 

src/packages/next/components/landing/collaboration.tsx

@@ -10,38 +10,49 @@ import Info from "./info";
 
 interface Props {
   image: StaticImageData;
+  alt?: string;
+  children?: React.ReactNode;
 }
 
 export default function Collaboration(props: Props) {
-  const { image } = props;
+  const {
+    image,
+    alt = "Editing a document in two browser windows",
+    children,
+  } = props;
   return (
     <Info
       anchor="a-realtimesync"
       icon="users"
       title="Collaborative editing without limits"
       image={image}
-      alt="Editing a document in two browser windows"
+      alt={alt}
     >
-      <Paragraph>
-        Privately share your project with{" "}
-        <A href="https://doc.cocalc.com/project-settings.html#about-collaborators">
-          <strong>an unlimited number of collaborators</strong>
-        </A>
-        . Simultaneous modifications of your document are{" "}
-        <strong>synchronized in real time</strong>. You see the cursors of
-        others while they edit the document and also see the presence of
-        watching collaborators.
-      </Paragraph>
+      {children ?? (
+        <>
+          <Paragraph>
+            Privately share your project with{" "}
+            <A href="https://doc.cocalc.com/project-settings.html#about-collaborators">
+              <strong>an unlimited number of collaborators</strong>
+            </A>
+            . Simultaneous modifications of your document are{" "}
+            <strong>synchronized in real time</strong>. You see the cursors of
+            others while they edit the document and also see the presence of
+            watching collaborators.
+          </Paragraph>
 
-      <Paragraph>
-        Additionally, any compilation status and output is synchronized between
-        everyone, because everything runs online and is fully managed by CoCalc.
-      </Paragraph>
+          <Paragraph>
+            Additionally, any compilation status and output is synchronized
+            between everyone, because everything runs online and is fully
+            managed by CoCalc.
+          </Paragraph>
 
-      <Paragraph>
-        This ensures that everyone involved experiences editing the document in
-        exactly the same way.
-      </Paragraph>
+          <Paragraph>
+            This ensures that everyone involved experiences editing the document
+            in exactly the same way.
+          </Paragraph>
+        </>
+      )}
     </Info>
   );
 }

src/packages/next/components/landing/compare.json

@@ -312,6 +312,21 @@
         "authorea": true,
         "papeeria": false
       },
+      {
+        "feature": "AI Formula Assistant",
+        "cocalc": {
+          "type": true,
+          "note": "Generate LaTeX formulas from natural language descriptions using AI",
+          "link": "https://cocalc.com/features/latex-editor#a-ai-formula"
+        },
+        "overleaf": {
+          "type": true,
+          "note": "AI Assist add-on generates equations from prompts or images (paid feature with limited free uses)",
+          "link": "https://www.overleaf.com/learn/how-to/AI_Assist"
+        },
+        "authorea": false,
+        "papeeria": false
+      },
       {
         "feature": "Bibliography",
         "cocalc": {

src/packages/next/components/landing/content.tsx

@@ -188,7 +188,8 @@ export default function Content(props: Props) {
       <Row
         gutter={[20, 30]}
         style={{
-          paddingTop: "12px",
+          paddingTop: "50px",
+          paddingBottom: "50px",
           maxWidth: MAX_WIDTH_LANDING,
           marginTop: "0",
           marginBottom: "0",

src/packages/next/components/landing/info.tsx

@@ -23,7 +23,7 @@ interface Props {
   belowWide?: boolean;
   caption?: ReactNode;
   children: ReactNode;
-  icon?: IconName;
+  icon?: IconName | JSX.Element;
   image?: string | StaticImageData;
   imageComponent?: ReactNode; // if set, this replaces the image!
   level?: TitleProps["level"];
@@ -130,9 +130,9 @@ export default function Info({
         ...textStyle,
       }}
     >
-      {icon && (
+      {icon != null && (
         <span style={{ fontSize: "24pt", marginRight: "5px" }}>
-          <Icon name={icon} />{" "}
+          {typeof icon === "string" ? <Icon name={icon} /> : icon}{" "}
         </span>
       )}
       {title}
@@ -310,10 +310,20 @@ interface HeadingProps {
   style?: CSSProperties;
   textStyle?: CSSProperties;
   level?: TitleProps["level"];
+  anchor?: string;
+  icon?: IconName | JSX.Element;
 }
 
 Info.Heading = (props: HeadingProps) => {
-  const { level = 1, children, description, style, textStyle } = props;
+  const {
+    level = 1,
+    children,
+    description,
+    style,
+    textStyle,
+    anchor,
+    icon,
+  } = props;
   return (
     <div
       style={{
@@ -327,13 +337,19 @@ Info.Heading = (props: HeadingProps) => {
     >
       <Title
         level={level}
+        id={anchor}
         style={{
           color: COLORS.GRAY_D,
           maxWidth: MAX_WIDTH_LANDING,
-          margin: "0 auto",
+          margin: "0 auto 20px auto",
           ...textStyle,
         }}
       >
+        {icon != null && (
+          <span style={{ fontSize: "24pt", marginRight: "5px" }}>
+            {typeof icon === "string" ? <Icon name={icon} /> : icon}{" "}
+          </span>
+        )}
         {children}
       </Title>
       {description && (

src/packages/next/components/landing/pitch.tsx

@@ -36,6 +36,7 @@ export default function Pitch(props: Props) {
       <Row
         gutter={20}
         style={{ maxWidth: MAX_WIDTH_LANDING, margin: "0 auto" }}
+        align="top"
       >
         <Col lg={12}>{col1}</Col>
         <Col lg={12}>{col2}</Col>

src/packages/next/pages/features/index.tsx

@@ -22,7 +22,7 @@ import apiScreenshot from "/public/features/api-screenshot.png";
 import ChatGptInChatroom from "/public/features/chatgpt-fix-code.png";
 import teachingScreenshot from "/public/features/cocalc-course-assignments-2019.png";
 import JupyterTF from "/public/features/cocalc-jupyter2-20170508.png";
-import LatexEditorImage from "/public/features/cocalc-latex-editor-2019.png";
+import LatexEditorImage from "public/features/latex-editor-main-20251003.png";
 import octaveJupyter from "/public/features/cocalc-octave-jupyter-20200511.png";
 import RJupyter from "/public/features/cocalc-r-jupyter.png";
 import linuxShellScript from "/public/features/cocalc-shell-script-run.png";