feat: landing page launch build (#3512)

Author: andre-code

client/index.html

@@ -4,16 +4,16 @@
     <meta charset="UTF-8" />
     <meta
       name="description"
-      content="An open-source platform for reproducible and collaborative data science. Share code, data and computational environments whilst tracking provenance and lineage of research objects."
+      content="An open-source platform for connecting data, code, and compute and empowering collaborative data science."
     />
 
     <meta
       property="og:title"
-      content="Reproducible Data Science | Open Research | Renku"
+      content="Renku | Collaborative Data Science | Open Research"
     />
     <meta
       property="og:description"
-      content="Work together on data science projects reproducibly. Share code, data and computational environments whilst accessing free computing resources."
+      content="An open-source platform for connecting data, code, and compute and empowering collaborative data science."
     />
 
     <meta

client/src/App.jsx

@@ -41,8 +41,11 @@ import { Unavailable } from "./features/maintenance/Maintenance";
 import LazyRootV1 from "./features/rootV1/LazyRootV1";
 import LazyRootV2 from "./features/rootV2/LazyRootV2";
 import { useGetUserQuery } from "./features/usersV2/api/users.api";
-import LazyAnonymousHome from "./landing/LazyAnonymousHome";
-import { FooterNavbar, RenkuNavBar } from "./landing/NavBar";
+import LazyAnonymousHome from "./features/landing/LazyAnonymousHome";
+import {
+  FooterNavbar,
+  RenkuNavBar,
+} from "./features/landing/components/NavBar/NavBar";
 import LazyNotFound from "./not-found/LazyNotFound";
 import NotificationsManager from "./notifications/NotificationsManager";
 import Cookie from "./privacy/Cookie";

client/src/components/navbar/AnonymousNavBar.tsx

@@ -23,7 +23,7 @@ import { Link } from "react-router";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
 
 import StatusBanner from "../../features/platform/components/StatusBanner";
-import { NavBarWarnings } from "../../landing/NavBarWarnings";
+import { NavBarWarnings } from "../../features/landing/components/NavBar/NavBarWarnings";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import AppContext from "../../utils/context/appContext";
 import { Url } from "../../utils/helpers/url";

client/src/components/navbar/LoggedInNavBar.tsx

@@ -22,7 +22,7 @@ import { List, Search } from "react-bootstrap-icons";
 import { Link } from "react-router";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
 import StatusBanner from "../../features/platform/components/StatusBanner";
-import { NavBarWarnings } from "../../landing/NavBarWarnings";
+import { NavBarWarnings } from "../../features/landing/components/NavBar/NavBarWarnings";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import AppContext from "../../utils/context/appContext";
 import RenkuNavLinkV2 from "../RenkuNavLinkV2";

client/src/components/navbar/NavBarItems.tsx

@@ -33,7 +33,7 @@ import {
 
 import { LoginHelper } from "../../authentication";
 import { useLoginUrl } from "../../authentication/useLoginUrl.hook";
-import AdminDropdownItem from "../../landing/AdminDropdownItem";
+import AdminDropdownItem from "../../features/landing/components/AdminDropdownItem.tsx";
 import { User } from "../../model/renkuModels.types";
 import NotificationsMenu from "../../notifications/NotificationsMenu";
 import { Docs, Links, RenkuPythonDocs } from "../../utils/constants/Docs";

client/src/features/dashboardV2/DashboardV2.module.scss

@@ -30,11 +30,14 @@
 }
 
 .FooterCard {
-  a svg {
+  a svg,
+  a img {
     transition: all 0.3s linear;
   }
   a:hover svg,
-  a:focus svg {
+  a:focus svg,
+  a:hover img,
+  a:focus img {
     transform: scale(1.3);
   }
 }

client/src/features/dashboardV2/DashboardV2.tsx

@@ -158,16 +158,22 @@ function FooterDashboard() {
 }
 
 interface FooterDashboardCardProps {
+  className?: string;
   children: ReactNode;
   url: string;
 }
-function FooterDashboardCard({ children, url }: FooterDashboardCardProps) {
+export function FooterDashboardCard({
+  className,
+  children,
+  url,
+}: FooterDashboardCardProps) {
   return (
-    <Card className={cx(DashboardStyles.DashboardCard, "border-0")}>
+    <Card className={cx(DashboardStyles.DashboardCard, "border-0", "h-100")}>
       <CardBody className={DashboardStyles.FooterCard}>
         <a
           target="_blank"
           className={cx(
+            className,
             "text-primary",
             "d-flex",
             "flex-column",

client/src/landing/AnonymousHome.tsx renamed to client/src/features/landing/AnonymousHome.tsx

@@ -25,36 +25,38 @@
 
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Fragment, useContext, useRef } from "react";
+import { Fragment, useContext } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { Col, Row } from "reactstrap";
 
-import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown";
-import { stateToSearchString } from "../features/kgSearch";
-import AppContext from "../utils/context/appContext";
-import { DEFAULT_APP_PARAMS } from "../utils/context/appParams.constants";
-import { Url } from "../utils/helpers/url";
+import LazyRenkuMarkdown from "../../components/markdown/LazyRenkuMarkdown";
+import { stateToSearchString } from "../kgSearch";
+import AppContext from "../../utils/context/appContext";
+import { DEFAULT_APP_PARAMS } from "../../utils/context/appParams.constants";
+import { Url } from "../../utils/helpers/url";
+import { RenkuBenefits } from "./components/Benefits/Benefits";
+import { Introduction } from "./components/Introduction/Introduction";
 
-import { NavBarWarnings } from "./NavBarWarnings";
+import { NavBarWarnings } from "./components/NavBar/NavBarWarnings";
 
-import VisualHead from "./Graphics/Visual_Head.svg";
+import VisualHead from "./assets/Visual_Head.svg";
 
-import DividerLandingPage from "./Dividier/Divider";
-import GetStarted from "./GetSarted/GetStarted";
-import HeroLanding from "./HeroLanding/HeroLanding";
-import SectionShowcase, { validatedShowcaseConfig } from "./SectionShowcase";
-import Teaching from "./Teaching/Teaching";
-import WhatIsRenku from "./WhatIsRenku/WhatIsRenku";
-import WhoWeAre from "./WhoWeAre/WhoWeAre";
+import DividerLandingPage from "./components/Dividier/Divider";
+import HeroLanding from "./components/HeroLanding/HeroLanding";
+import { ResourcesAndSupport } from "./components/ResourcesSupport/ResourcesAndSupport";
+import WhatIsRenku from "./components/WhatIsRenku/WhatIsRenku";
+import WhoWeAre from "./components/WhoWeAre/WhoWeAre";
 import type { AnonymousHomeConfig } from "./anonymousHome.types";
-import { BottomNav, TopNav } from "./anonymousHomeNav";
+import { BottomNav, TopNav } from "./components/anonymousHomeNav";
 
 // ? react-autosuggest styles are defined there q_q
 // ? also, the order of import matters here q_q
-import "../project/new/Project.style.css";
+import "../../project/new/Project.style.css";
 // ? the "quick-nav" class is used in this file
-import "../components/quicknav/QuickNav.style.css";
+import "../../components/quicknav/QuickNav.style.css";
+import { GetStarted } from "./components/GetStarted/GetStarted.tsx";
+import { RenkuUsers } from "./components/RenkuUsers/RenkuUsers.tsx";
 
 export default function AnonymousHome() {
   const { client, model, params } = useContext(AppContext);
@@ -130,31 +132,18 @@ export function SearchInput() {
   );
 }
 function StandardHome(props: AnonymousHomeConfig) {
-  const sectionRef = useRef<HTMLDivElement | null>(null);
-
-  const scrollToGetStarted = () => {
-    sectionRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
   return (
     <>
-      <HeroLanding {...props} scrollToGetStarted={scrollToGetStarted} />
-      <GetStarted {...props} sectionRef={sectionRef} />
-      <DividerLandingPage />
-      <WhatIsRenku
-        projectPath={props.homeCustomized.projectPath}
-        datasetSlug={props.homeCustomized.datasetSlug}
-      />
-      <DividerLandingPage />
-      <SectionShowcase
-        {...validatedShowcaseConfig(props.homeCustomized.showcase)}
-      />
-      {props.homeCustomized.showcase.enabled ? (
-        <DividerLandingPage />
-      ) : undefined}
-      <Teaching />
+      <HeroLanding {...props} />
+      <Introduction />
+      <WhatIsRenku />
+      <GetStarted />
+      <RenkuUsers />
       <DividerLandingPage />
+      <RenkuBenefits />
+      <ResourcesAndSupport />
       <WhoWeAre />
-      <BottomNav {...props} />
+      <BottomNav />
     </>
   );
 }

client/src/landing/LazyAnonymousHome.tsx renamed to client/src/features/landing/LazyAnonymousHome.tsx

@@ -18,7 +18,7 @@
 
 import { Suspense, lazy } from "react";
 
-import PageLoader from "../components/PageLoader";
+import PageLoader from "../../components/PageLoader";
 
 const AnonymousHome = lazy(() => import("./AnonymousHome"));
 

client/src/landing/anonymousHome.types.ts renamed to client/src/features/landing/anonymousHome.types.ts

@@ -38,18 +38,6 @@ export interface HomepageParams {
       contentMd: string;
     };
   };
-  datasetSlug: string;
   projectPath: string;
-  showcase: {
-    enabled: boolean;
-    title: string;
-    description: string;
-    projects: {
-      identifier: string;
-      overrideDescription?: string;
-      overrideImageUrl?: string;
-      overrideTitle?: string;
-    }[];
-  };
   tutorialLink: string;
 }