tweak landing page a little; add "desc of cocalc" banner to share server pages

Author: williamstein

src/packages/next/components/landing/compute-servers.tsx

@@ -30,7 +30,7 @@ export default function ComputeServers() {
       level={LANDING_HEADER_LEVEL}
       title={
         <>
-          Powerful Compute Servers with Optional GPU Support
+          Powerful Compute Servers with GPU Options
           <ComputeServerTemplates
             getPopupContainer={() => ref.current}
             style={{ maxWidth: "900px" }}
@@ -52,8 +52,8 @@ export default function ComputeServers() {
     >
       <Paragraph>
         Extend your {siteName} projects with powerful{" "}
-        <Text strong>compute servers</Text>. They give you much more power,
-        optional GPU support, and flexibility for your computations.
+        <Text strong>compute servers</Text>. They give you much more power, GPU
+        options, and flexibility for your computations.
       </Paragraph>
       <Paragraph>
         From within your {siteName} project, spin up and connect to a powerful
@@ -67,17 +67,17 @@ export default function ComputeServers() {
         project.
       </Paragraph>
       <Paragraph>
-        These machines optionally come with{" "}
-        <Text strong>extensive GPU support</Text>, from a single NVIDIA T4 to
-        eight H100's, with many options in between, including L4 and L40,
-        RTX-A4/5/6000, and A100 with 40GB and 80GB. The finely configured
-        software images include SageMath, Anaconda,{" "}
-        <A href="https://youtu.be/kcxyShH3wYE">Google Colab</A>, Julia,{" "}
-        <A href="https://youtu.be/JG6jm6yv_KE">PyTorch</A>, Tensorflow and{" "}
-        <A href="https://youtu.be/OMN1af0LUcA">Open WebUI</A>, accommodating a
-        versatile range of uses. The pre-configured software environments make
-        it very easy to make use of them, right out of the box. You can also run
-        any command as{" "}
+        These servers optionally come with{" "}
+        <Text strong>very competitively priced GPU support</Text>, from a single
+        NVIDIA T4 to eight H100's, with many options in between, including L4
+        and L40, RTX-A4/5/6000, and A100 with 40GB and 80GB. The finely
+        configured software images include{" "}
+        <A href="https://youtu.be/kcxyShH3wYE">Google Colab</A>, SageMath,
+        Anaconda, Julia, <A href="https://youtu.be/JG6jm6yv_KE">PyTorch</A>,
+        Tensorflow and <A href="https://youtu.be/OMN1af0LUcA">Open WebUI</A>,
+        accommodating a versatile range of uses. The pre-configured software
+        environments make it very easy to make use of them, right out of the
+        box. You can also run any command as{" "}
         <A href="https://doc.cocalc.com/compute_server.html#becoming-root-and-port-forwarding">
           root
         </A>
@@ -88,8 +88,8 @@ export default function ComputeServers() {
         <A href="https://doc.cocalc.com/compute_server.html#compute-server-filesystem">
           <Text strong>files are synchronized</Text>
         </A>
-        . Therefore, you can seamlessly switch between local and remote
-        computing. You also have much more disk storage on the remote machine.
+        . Therefore, you can seamlessly switch between different servers. You
+        also have much more disk storage on the remote machine.
       </Paragraph>
       <Paragraph>
         Usage of these machines is <Text strong>billed by the second</Text>. The

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

@@ -10,40 +10,42 @@ import A from "components/misc/A";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
 
 const A_STYLE: CSS = {
-  color: "white",
+  color: "#ddd",
   backgroundColor: "transparent",
 } as const;
 
-export function Tagline({ value }: { value?: string }) {
+export function Tagline({ value, style }: { value?: string; style? }) {
   function renderContent() {
     if (value) {
       return <SanitizedMarkdown value={value} anchorStyle={A_STYLE} />;
     } else {
       return (
         <>
-          Realtime collaborative{" "}
+          CoCalc Runs Your{" "}
           <A href="/features/jupyter-notebook" style={A_STYLE}>
-            Jupyter notebooks
+            Jupyter Notebooks
+          </A>{" "}
+          and{" "}
+          <A href="/features/terminal" style={A_STYLE}>
+            Linux Terminals
+          </A>{" "}
+          using Powerful{" "}
+          <A href="/features/compute-server" style={A_STYLE}>
+            CPUs and GPUs
           </A>
-          ,{" "}
-          <A href="/features/latex-editor" style={A_STYLE}>
-            LaTeX
-          </A>
-          , Markdown, and Linux with GPUs
+          !
         </>
       );
     }
   }
 
   return (
     <Info.Heading
-      level={2}
+      level={3}
       textStyle={{ color: "white" }}
       style={{
         backgroundColor: COLORS.BLUE_D,
-        paddingBottom: "30px",
-        marginTop: "30px",
-        paddingTop: "30px",
+        ...style,
       }}
     >
       {renderContent()}

src/packages/next/components/path/path.tsx

@@ -38,10 +38,9 @@ import type { PathContents as PathContentsType } from "lib/share/get-contents";
 import Avatar from "components/share/proxy/avatar";
 import A from "components/misc/A";
 import { join } from "path";
+import { Tagline } from "components/landing/tagline";
 
-import {
-  SocialMediaShareLinks
-} from "components/landing/social-media-share-links";
+import { SocialMediaShareLinks } from "components/landing/social-media-share-links";
 
 export interface PublicPathProps {
   id: string;
@@ -71,8 +70,8 @@ export interface PublicPathProps {
   // doesn't use the names. See https://github.com/sagemathinc/cocalc/issues/6115
   redirect?: string;
   jupyter_api: boolean;
-  created: string|null; // ISO 8601 string
-  last_edited: string|null; // ISO 8601 string
+  created: string | null; // ISO 8601 string
+  last_edited: string | null; // ISO 8601 string
   ogUrl?: string; // Open Graph URL for social media sharing
   ogImage?: string; // Open Graph image for social media sharing
 }
@@ -344,12 +343,12 @@ export default function PublicPath({
             <AntdAvatar
               shape="square"
               size={160}
-              icon={(
+              icon={
                 <img
                   src={projectAvatarImage}
                   alt={`Avatar for ${projectTitle}.`}
                 />
-              )}
+              }
               style={{ float: "left", margin: "20px" }}
             />
           ) : undefined
@@ -363,6 +362,10 @@ export default function PublicPath({
           />
         )}
         <div>
+          <Tagline
+            value={customize.indexTagline}
+            style={{ marginTop: "-15px", padding: "5px" }}
+          />
           {invalidRedirect && (
             <Alert
               type="warning"

src/packages/next/pages/index.tsx

@@ -171,7 +171,7 @@ export default function Home(props: Props) {
               onCoCalcCom ? <Videos videos={YOUTUBE_IDS} /> : indexInfo
             }
           />
-          <Tagline value={indexTagline} />
+          <Tagline value={indexTagline} style={{ padding: "5px" }} />
           {renderCoCalcComFeatures()}
           <Footer />
         </Layout.Content>