Update landing page (#599)

Author: pavithraes

docs/src/pages/index.jsx

@@ -6,33 +6,27 @@ import LeavesCircleSvg from "@site/static/img/home/leaves-circle.svg";
 import JarPlantSvg from "@site/static/img/home/jar-plant.svg";
 import RootsPlantSvg from "@site/static/img/home/roots-plant.svg";
 import TwoPlantsSvg from "@site/static/img/home/two-plants.svg";
-import ThreeFramesSvg from "@site/static/img/home/three-frames.svg";
 import ScissorStringSvg from "@site/static/img/home/scissor-string.svg";
 import AwsSvg from "@site/static/img/home/aws.svg";
 import AzureSvg from "@site/static/img/home/azure.svg";
 import GcloudSvg from "@site/static/img/home/gcloud.svg";
-import CondaStoreSvg from "@site/static/img/home/conda-store.svg";
-import VSCodeSvg from "@site/static/img/home/vscode.svg";
-import JitsiSvg from "@site/static/img/home/jitsi.svg";
-import ArgoSvg from "@site/static/img/home/argo.svg";
-import JupyterSvg from "@site/static/img/home/jupyter.svg";
 import styles from "./index.module.css";
 
 export default function HomePage() {
   return (
     <Layout
       title="Nebari Homepage"
-      description="Your open source data science platform. Built for scale, designed for collaboration."
+      description="TODO"
     >
       <main className={styles.main}>
         <section className={styles.heroSection}>
           <div className={styles.sectionContent}>
             <NebariLogoSvg width="158px" role="img" aria-label="Nebari logo" />
             <p className={styles.tagline1}>
-              Your open source data science platform.
+              An open source stack for your AI.
             </p>
             <p className={styles.tagline2}>
-              Built for scale, designed for collaboration.
+              Core infrastructure, curated frameworks and apps, and everything in between.
             </p>
             <p>
               <a
@@ -48,65 +42,80 @@ export default function HomePage() {
 
         <section className={styles.pitchSection}>
           <div className={styles.sectionContent}>
-            <h2 className={styles.sectionHeading}>Why choose Nebari?</h2>
+            <h2 className={styles.sectionHeading}>Ecosystem of tools</h2>
             <ol className={styles.pitchList}>
               <li className={styles.pitchItem}>
                 <LeavesCircleSvg aria-hidden="true" height="150px" />
-                <span className={styles.pitchItemHeading}>GitOps approach</span>
+                <span className={styles.pitchItemHeading}>
+                  <a href="https://github.com/nebari-dev/nebari">Nebari classic</a>
+                </span>
                 <p>
-                  Integrated DevOps and security best practices for a robust
-                  deployment and better infrastructure management.
+                  Cloud-agnostic data science platform with environment management, role-based-access control,
+                  and curated app integrations for application deployment, scalability, monitoring, and more.
                 </p>
               </li>
               <li className={styles.pitchItem}>
                 <JarPlantSvg aria-hidden="true" height="150px" />
-                <span className={styles.pitchItemHeading}>Opinionated</span>
+                <span className={styles.pitchItemHeading}>
+                  <a href="https://github.com/nebari-dev/nebari-infrastructure-core">Nebari core (early access)</a>
+                </span>
                 <p>
-                  Designed with integrations and configurations selected from
-                  real-world experience, so that you can use it out-of-the-box
-                  for a variety of data science workloads.
+                  New robust core infrastructure layer for platform deployment on popular cloud providers.
+                  Security, authentication, role-based access, and observability built-in by design.
                 </p>
               </li>
               <li className={styles.pitchItem}>
-                <RootsPlantSvg aria-hidden="true" height="150px" />
+                <JarPlantSvg aria-hidden="true" height="150px" />
                 <span className={styles.pitchItemHeading}>
-                  Rooted in open source
+                  <a href="https://github.com/nebari-dev/nebi">Nebi (early access)</a>
                 </span>
                 <p>
-                  Developed with community in mind and under a BSD-3 license, we
-                  strive to contribute back to the upstream OSS projects
-                  wherever possible.
+                  Tools to manage, share, and collaborate on AI software lifecycle across your team.
+                  Includes future plans for SBoM generation and compliance checking.
+                </p>
+              </li>
+              <li className={styles.pitchItem}>
+                <RootsPlantSvg aria-hidden="true" height="150px" />
+                <span className={styles.pitchItemHeading}>Usage-specific UIs (coming soon)</span>
+                <p>
+                  Multiple UI options available:
+                  Jupyter/VSCode for developers, chat & dashboard interfaces for AI users, and more.
                 </p>
               </li>
               <li className={styles.pitchItem}>
                 <TwoPlantsSvg aria-hidden="true" height="150px" />
-                <span className={styles.pitchItemHeading}>
-                  Collaboration-first
-                </span>
+                <span className={styles.pitchItemHeading}>AI model serving pack (coming soon)</span>
+                <p>
+                  Serve and monitor different AI models for your development workflow or production applications.
+                </p>
+              </li>
+              <li className={styles.pitchItem}>
+                <TwoPlantsSvg aria-hidden="true" height="150px" />
+                <span className={styles.pitchItemHeading}>Agentic AI pack (coming soon)</span>
                 <p>
-                  Large teams can share work and iterate quickly with
-                  reproducible environments. Administrators can manage team
-                  resources effectively, all from the same platform.
+                  Frameworks for building, deploying, evaluating, and monitoring AI agent-based workflows.
                 </p>
               </li>
               <li className={styles.pitchItem}>
-                <ThreeFramesSvg aria-hidden="true" height="150px" />
-                <span className={styles.pitchItemHeading}>Dask powered</span>
+                <TwoPlantsSvg aria-hidden="true" height="150px" />
+                <span className={styles.pitchItemHeading}>Data orchestration pack (coming soon)</span>
                 <p>
-                  Nebari ships with Dask so you can scale your work to terabytes
-                  of data, leverage cloud instances with GPUs, and take
-                  advantage of adaptive scaling for managing costs.
+                  Tools for building data engineering pipelines, and governance and provenance of data & AI assets.
                 </p>
               </li>
               <li className={styles.pitchItem}>
                 <ScissorStringSvg aria-hidden="true" height="150px" />
-                <span className={styles.pitchItemHeading}>
-                  Your favorite tools
-                </span>
+                <span className={styles.pitchItemHeading}>Custom integrations</span>
                 <p>
-                  Built with open source infrastructure and tools to give you
-                  complete flexibility over your deployment and fit your
-                  team&apos;s specific needs.
+                  All Nebari projects are developed on an open and extensible architecture,
+                  that allows for quick integration of any libraries you need.
+                </p>
+              </li>
+              <li className={styles.pitchItem}>
+                <ScissorStringSvg aria-hidden="true" height="150px" />
+                <span className={styles.pitchItemHeading}>Community hub (coming soon)</span>
+                <p>
+                  A space for community members to share their custom packs.
                 </p>
               </li>
             </ol>
@@ -131,12 +140,12 @@ export default function HomePage() {
                   Deploy anywhere
                 </h2>
                 <p>
-                  Try Nebari on your local machine or deploy it on your cloud of
-                  choice. Nebari is designed to be flexible, extensible, and
+                  Try Nebari classic on your local machine or deploy it on your cloud of
+                  choice. It is designed to be flexible, extensible, and
                   vendor-agnostic.
                 </p>
                 <p>
-                  Nebari can be seamlessly deployed to the major public cloud
+                  Nebari classic and new Nebari projects can be seamlessly deployed to the major public cloud
                   providers, including AWS, Azure, and GCP.
                 </p>
               </div>
@@ -159,59 +168,54 @@ export default function HomePage() {
 
         <section className={styles.getStartedSection}>
           <div className={styles.sectionContent}>
-            <h2 className={styles.sectionHeading}>Get started with Nebari</h2>
+            <h2 className={styles.sectionHeading}>Quick look at Nebari classic</h2>
             <p>
               <a
                 href="/docs/get-started"
                 className={styles.getStartedLink2}
               >
-                Learn how to deploy a Nebari instance&nbsp;&nbsp;
+                Deploy a Nebari classic instance&nbsp;&nbsp;
                 <RightArrowSvg aria-hidden="true" />
               </a>
             </p>
-            <div>
-              <img
-                src="/img/home/nebari-deploy.gif"
-                alt="Deploy Nebari from a YAML file, generated using the Guided Init"
-                width="80%"
+            <div className={styles.videoContainer}>
+              <iframe
+                width="885"
+                height="500"
+                src="https://www.youtube.com/embed/sQTQ_fg2avA?si=cWwUp0pv_zM6jYP9"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin"
+                allowfullscreen
               />
             </div>
           </div>
         </section>
 
-        <section className={styles.integrationsSection}>
+        <section className={styles.pitchSection}>
           <div className={styles.sectionContent}>
-            <h2 className={styles.sectionHeading}>Integrations</h2>
-            <p className={styles.integrationsSubheading}>
-              Nebari comes with out-of-the-box integrations to multiple tools in
-              the data science ecosystem.
-            </p>
-            <ul className={styles.integrationsList}>
-              <li className={styles.integrationsItem}>
-                <CondaStoreSvg aria-hidden="true" />
-                conda-store
-              </li>
-              <li className={styles.integrationsItem}>
-                <VSCodeSvg aria-hidden="true" />
-                VSCode
-              </li>
-              <li className={styles.integrationsItem}>
-                <img alt="" src="/img/home/grafana.svg" />
-                Grafana
-              </li>
-              <li className={styles.integrationsItem}>
-                <JitsiSvg aria-hidden="true" />
-                Jitsi
+            <h2 className={styles.sectionHeading}>Development principles</h2>
+            <ol className={styles.pitchList}>
+              <li className={styles.pitchItem}>
+                <span className={styles.pitchItemHeading}>Open source</span>
+                <p>
+                  All projects are developed under an open source license, and built using open source software.
+                </p>
               </li>
-              <li className={styles.integrationsItem}>
-                <ArgoSvg aria-hidden="true" />
-                Argo
+              <li className={styles.pitchItem}>
+                <span className={styles.pitchItemHeading}>Community-oriented</span>
+                <p>
+                  All projects welcome community contributions and engagement on various project spaces and community meetings.
+                </p>
               </li>
-              <li className={styles.integrationsItem}>
-                <JupyterSvg aria-hidden="true" />
-                Jupyter
+              <li className={styles.pitchItem}>
+                <span className={styles.pitchItemHeading}>Composable architecture</span>
+                <p>
+                  All projects have a modular design and integrate with each other, while also allowing for independent use and extensibility.
+                </p>
               </li>
-            </ul>
+            </ol>
           </div>
         </section>
       </main>

docs/src/pages/index.module.css

@@ -24,6 +24,13 @@ because it mixes dark and light sections.
   color: inherit;
 }
 
+.sectionSubheading {
+  text-align: center;
+  font-size: 21px;
+  font-weight: bold;
+  color: inherit;
+}
+
 /*
   Hero
 */
@@ -246,73 +253,3 @@ height as the column of logos to the right */
 .getStartedLink2:hover [stroke="#fff"] {
   stroke: var(--nebari-magenta-7);
 }
-
-
-/*
-  Integrations
-*/
-
-.integrationsSection {
-  background:
-    url(/img/home/abstract-foliage-light.svg) top right no-repeat,
-    var(--ifm-color-white);
-  color: var(--ifm-color-black);
-  padding: 82px;
-}
-
-.integrationsSubheading {
-  text-align: center;
-  max-width: 540px;
-  margin: auto;
-  font-size: 21px;
-  line-height: 36px;
-}
-
-.integrationsList {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  margin: 76px auto;
-  padding: 0;
-  list-style-type: none;
-  justify-items: center;
-}
-
-.integrationsItem {
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 36px;
-
-  background-color: #fff;
-  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
-  border-radius: 25px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  padding: 10px;
-  width: 125px;
-  height: 125px;
-}
-
-.integrationsItem:nth-child(2n) {
-  position: relative;
-  top: 143px;
-  margin-bottom: 90px;
-}
-
-@media screen and (max-width: 996px) {
-  .integrationsList {
-    width: auto;
-    grid-template-columns: 150px 150px;
-    grid-template-rows: auto auto;
-    row-gap: 1em;
-    justify-content: center;
-  }
-
-  .integrationsItem:nth-child(2n) {
-    top: 0;
-    margin-bottom: 0;
-  }
-}