diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx index f23f1066f..28b9288b9 100644 --- a/src/app/components/AppBar/index.tsx +++ b/src/app/components/AppBar/index.tsx @@ -18,7 +18,7 @@ const NavList = (props: { setIsNavExpanded?: React.Dispatch>; }) => { const list = [ - { name: "Explore", path: "/", cy: "nav-explore", class: "" }, + { name: "Library", path: "/", cy: "nav-explore", class: "" }, { name: "Why Dataxplorer", path: "/why-dataxplorer", diff --git a/src/app/components/Dialogs/deleteDatasetDialog.tsx b/src/app/components/Dialogs/deleteDatasetDialog.tsx index da8c0acfc..721aafca9 100644 --- a/src/app/components/Dialogs/deleteDatasetDialog.tsx +++ b/src/app/components/Dialogs/deleteDatasetDialog.tsx @@ -66,7 +66,7 @@ export default function DeleteDatasetDialog(props: Props) { aria-describedby="simple-modal-description" > {loading ? ( -
+
) : ( diff --git a/src/app/modules/home-module/assets/add-icon.svg b/src/app/modules/home-module/assets/add-icon.svg new file mode 100644 index 000000000..00ca8169e --- /dev/null +++ b/src/app/modules/home-module/assets/add-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/modules/home-module/assets/budget-chart.png b/src/app/modules/home-module/assets/budget-chart.png new file mode 100644 index 000000000..66733e7d3 Binary files /dev/null and b/src/app/modules/home-module/assets/budget-chart.png differ diff --git a/src/app/modules/home-module/assets/budget-data.png b/src/app/modules/home-module/assets/budget-data.png new file mode 100644 index 000000000..3c647886c Binary files /dev/null and b/src/app/modules/home-module/assets/budget-data.png differ diff --git a/src/app/modules/home-module/assets/build-reports-illustration.svg b/src/app/modules/home-module/assets/build-reports-illustration.svg new file mode 100644 index 000000000..96112223d --- /dev/null +++ b/src/app/modules/home-module/assets/build-reports-illustration.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/chunk-eye.svg b/src/app/modules/home-module/assets/chunk-eye.svg new file mode 100644 index 000000000..24102d8dd --- /dev/null +++ b/src/app/modules/home-module/assets/chunk-eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/modules/home-module/assets/climate-report.png b/src/app/modules/home-module/assets/climate-report.png new file mode 100644 index 000000000..5b74885bd Binary files /dev/null and b/src/app/modules/home-module/assets/climate-report.png differ diff --git a/src/app/modules/home-module/assets/collaborate-illustration.svg b/src/app/modules/home-module/assets/collaborate-illustration.svg new file mode 100644 index 000000000..117c02bbc --- /dev/null +++ b/src/app/modules/home-module/assets/collaborate-illustration.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/connect-seamlessly-illustration.svg b/src/app/modules/home-module/assets/connect-seamlessly-illustration.svg new file mode 100644 index 000000000..9475c783e --- /dev/null +++ b/src/app/modules/home-module/assets/connect-seamlessly-illustration.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/creat-report-illustration.svg b/src/app/modules/home-module/assets/creat-report-illustration.svg new file mode 100644 index 000000000..56567813b --- /dev/null +++ b/src/app/modules/home-module/assets/creat-report-illustration.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/create-charts-illustration.svg b/src/app/modules/home-module/assets/create-charts-illustration.svg new file mode 100644 index 000000000..658477210 --- /dev/null +++ b/src/app/modules/home-module/assets/create-charts-illustration.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/gender-report.png b/src/app/modules/home-module/assets/gender-report.png new file mode 100644 index 000000000..4e8b81d9b Binary files /dev/null and b/src/app/modules/home-module/assets/gender-report.png differ diff --git a/src/app/modules/home-module/assets/google-icon-flat.svg b/src/app/modules/home-module/assets/google-icon-flat.svg new file mode 100644 index 000000000..a3a72f23b --- /dev/null +++ b/src/app/modules/home-module/assets/google-icon-flat.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/modules/home-module/assets/hero-ellipses.svg b/src/app/modules/home-module/assets/hero-ellipses.svg index c301ca935..83ed73ec2 100644 --- a/src/app/modules/home-module/assets/hero-ellipses.svg +++ b/src/app/modules/home-module/assets/hero-ellipses.svg @@ -1,74 +1,116 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/iati-country-chart.png b/src/app/modules/home-module/assets/iati-country-chart.png new file mode 100644 index 000000000..28cc99b3b Binary files /dev/null and b/src/app/modules/home-module/assets/iati-country-chart.png differ diff --git a/src/app/modules/home-module/assets/linkedIn-icon-flat.svg b/src/app/modules/home-module/assets/linkedIn-icon-flat.svg new file mode 100644 index 000000000..c30f31bd7 --- /dev/null +++ b/src/app/modules/home-module/assets/linkedIn-icon-flat.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/malaria-report.png b/src/app/modules/home-module/assets/malaria-report.png new file mode 100644 index 000000000..b907e87c7 Binary files /dev/null and b/src/app/modules/home-module/assets/malaria-report.png differ diff --git a/src/app/modules/home-module/assets/microsoft-icon-flat.svg b/src/app/modules/home-module/assets/microsoft-icon-flat.svg new file mode 100644 index 000000000..4a1d167a4 --- /dev/null +++ b/src/app/modules/home-module/assets/microsoft-icon-flat.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/modules/home-module/assets/open-lock-icon.svg b/src/app/modules/home-module/assets/open-lock-icon.svg new file mode 100644 index 000000000..4ab13db08 --- /dev/null +++ b/src/app/modules/home-module/assets/open-lock-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/modules/home-module/assets/report-illustration.svg b/src/app/modules/home-module/assets/report-illustration.svg new file mode 100644 index 000000000..56567813b --- /dev/null +++ b/src/app/modules/home-module/assets/report-illustration.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/saveTime-illustration.svg b/src/app/modules/home-module/assets/saveTime-illustration.svg new file mode 100644 index 000000000..147aacb3b --- /dev/null +++ b/src/app/modules/home-module/assets/saveTime-illustration.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/share-insights-illustration.svg b/src/app/modules/home-module/assets/share-insights-illustration.svg new file mode 100644 index 000000000..7de50b445 --- /dev/null +++ b/src/app/modules/home-module/assets/share-insights-illustration.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/modules/home-module/assets/upload-data-illustration.svg b/src/app/modules/home-module/assets/upload-data-illustration.svg new file mode 100644 index 000000000..83d2cad49 --- /dev/null +++ b/src/app/modules/home-module/assets/upload-data-illustration.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/assets/visualise-illustration.svg b/src/app/modules/home-module/assets/visualise-illustration.svg new file mode 100644 index 000000000..5eadabb91 --- /dev/null +++ b/src/app/modules/home-module/assets/visualise-illustration.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/modules/home-module/components/hero/index.tsx b/src/app/modules/home-module/components/hero/index.tsx new file mode 100644 index 000000000..53951d04f --- /dev/null +++ b/src/app/modules/home-module/components/hero/index.tsx @@ -0,0 +1,114 @@ +import React from "react"; +import { ReactComponent as GoogleIcon } from "app/modules/home-module/assets/google-icon-flat.svg"; +import { ReactComponent as LinkedInIcon } from "app/modules/home-module/assets/linkedIn-icon-flat.svg"; +import { ReactComponent as MicrosoftIcon } from "app/modules/home-module/assets/microsoft-icon-flat.svg"; +import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.svg"; +import { socialAuth } from "app/utils/socialAuth"; +import { Box, Container } from "@material-ui/core"; + +export default function Hero() { + return ( +
h1 { + color: #231d2c; + text-align: center; + font-family: "GothamNarrow-Bold", sans-serif; + font-size: 96px; + text-transform: capitalize; + line-height: normal; + margin: 0px; + b { + background: linear-gradient(90deg, #a2a8ff, #b8b2ff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + > h3 { + color: #231d2c; + font-family: "GothamNarrow-Book", sans-serif; + font-size: 32px; + font-weight: 325; + text-align: center; + margin-top: 32px; + margin-bottom: 40px; + } + + > p { + color: #231d2c; + font-family: "GothamNarrow-Book", sans-serif; + font-size: 18px; + font-style: normal; + text-align: center; + margin: 0; + margin-bottom: 10px; + } + } + button { + display: flex; + width: 203px; + height: 35px; + padding: 8px 18px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 30px; + background: #13183f; + border: none; + outline: none; + color: #ffffff; + font-weight: bold; + font-family: "Inter", sans-serif; + font-size: 14px; + cursor: pointer; + } + `} + > + +
+

+ Create high impact data driven stories +

+

+ Dataxplorer simplifies and empowers visual data reporting for all +

+ +

Sign in for free to unlock data visualisation tools with

+ + + + + + +
+ + +
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/assetsList.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/assetsList.tsx new file mode 100644 index 000000000..d4a2a82cb --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/assetsList.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import ClimateReportImg from "app/modules/home-module/assets/climate-report.png"; +import IATICountryImg from "app/modules/home-module/assets/iati-country-chart.png"; +import BudgetChartImg from "app/modules/home-module/assets/budget-chart.png"; +import MalariaReportImg from "app/modules/home-module/assets/malaria-report.png"; +import GenderReportImg from "app/modules/home-module/assets/gender-report.png"; +import BudgetDataImg from "app/modules/home-module/assets/budget-data.png"; +import InfoCard from "./infoCard"; +import { style } from "./style"; + +export default function AssetsList() { + return ( +
+
+ + Climate Report +

Climate data report

+

Report

+ + + IATI Country Chart +

IATI Country Incoming Funds 2024

+

Chart

+ +
+
+ + Budget Chart +

Budget Flow

+

Chart

+ +
+ +
+ + + Malaria Report +

+ Malaria Eradication by 2030: A Challenge that Requires Urgent Action +

+

Report

+ +
+
+ + gender Report +

Gender based violence

+

Report

+ + + Budget Data +

Budget 2011

+

Data

+ +
+
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/coreFeaturesCard.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/coreFeaturesCard.tsx new file mode 100644 index 000000000..3c726ee81 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/coreFeaturesCard.tsx @@ -0,0 +1,102 @@ +import React from "react"; +import Box from "@material-ui/core/Box"; +import { ReactComponent as UploadDataImg } from "app/modules/home-module/assets/upload-data-illustration.svg"; +import { ReactComponent as CreateChartImg } from "app/modules/home-module/assets/create-charts-illustration.svg"; +import { ReactComponent as BuildReportImg } from "app/modules/home-module/assets/build-reports-illustration.svg"; +import { ReactComponent as ShareInsightsImg } from "app/modules/home-module/assets/share-insights-illustration.svg"; + +export default function CoreFeaturesCard(props: { handleClose: () => void }) { + const data = [ + { + title: "Upload or Search Data", + description: "Quickly upload datasets or \n search from the library.", + img: , + }, + { + title: "Create Charts", + description: "Visualize your data in customizable formats.", + img: , + }, + { + title: "Build Reports", + description: "Integrate visuals into shareable reports.", + img: , + }, + { + title: "Share Insights", + description: "Publish and share your findings with ease.", + img: , + }, + ]; + return ( +
+ + {data.map((item, index) => ( + + {item.img} + +

+ {item.title} +

+

+ {item.description} +

+ + + ))} + +
+ +
+
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/extraFeaturesCard.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/extraFeaturesCard.tsx new file mode 100644 index 000000000..9d5c22f50 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/extraFeaturesCard.tsx @@ -0,0 +1,118 @@ +import React from "react"; +import Box from "@material-ui/core/Box"; +import { ReactComponent as ConnectImg } from "app/modules/home-module/assets/connect-seamlessly-illustration.svg"; +import { ReactComponent as VisualiseImg } from "app/modules/home-module/assets/visualise-illustration.svg"; +import { ReactComponent as CreateReportImg } from "app/modules/home-module/assets/creat-report-illustration.svg"; +import { ReactComponent as CollaborateImg } from "app/modules/home-module/assets/collaborate-illustration.svg"; +import { ReactComponent as SaveTimeImg } from "app/modules/home-module/assets/saveTime-illustration.svg"; + +export default function ExtraFeaturesCard(props: { handleClose: () => void }) { + const data = [ + { + title: "Connect Seamlessly", + description: + "Upload or search datasets in seconds. Save time with integrations from trusted sources like X, Y, and Z.", + img: , + }, + { + title: "Visualize with Ease", + description: + "Transform raw data into stunning, interactive charts and graphs—no technical skills required.", + img: , + }, + { + title: "Create Impactful Reports", + description: + "Effortlessly combine visuals into ready-to-share reports, perfect for decision-making and storytelling.", + img: , + }, + { + title: "Collaborate Better", + description: + "Work with your team in real-time, and ensure everyone’s on the same page with centralized data reporting", + img: , + }, + { + title: "Save Time, Drive Insights", + description: + "Our streamlined workflow helps you focus on what matters—actionable insights and results.", + img: , + }, + ]; + return ( +
+ + {data.map((item, index) => ( + + {item.img} + +

+ {item.title} +

+

+ {item.description} +

+ + + ))} + +
+ +
+
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/index.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/index.tsx new file mode 100644 index 000000000..f7bd901b8 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/index.tsx @@ -0,0 +1,117 @@ +import React from "react"; +import Box from "@material-ui/core/Box"; +import Container from "@material-ui/core/Container"; +import { ReactComponent as AddIcon } from "app/modules/home-module/assets/add-icon.svg"; +import Panel from "./panel"; +import CoreFeaturesCard from "./coreFeaturesCard"; +import ExtraFeaturesCard from "./extraFeaturesCard"; +import AssetsList from "./assetsList"; +import SignupDialog from "./signupDialog"; + +export default function NonAuthUserLibrary() { + const [openedPanel, setOpenedPanel] = React.useState< + "coreFeaturesPanel" | "extraFeaturesPanel" | null + >(null); + + const [modalOpen, setModalOpen] = React.useState(false); + const handleCardCollapse = () => { + setOpenedPanel(null); + }; + + const handleModal = () => { + setModalOpen(!modalOpen); + }; + + const panelCard = React.useMemo(() => { + if (openedPanel === "coreFeaturesPanel") { + return ; + } else if (openedPanel === "extraFeaturesPanel") { + return ; + } else { + return null; + } + }, [openedPanel]); + + return ( + +
+ div :nth-of-type(1) { + > p { + color: #2b3674; + font-family: "GothamNarrow-Bold", sans-serif; + font-size: 40px; + line-height: 110%; /* 44px */ + margin: 0px; + } + > button { + border-radius: 25px; + background: #231d2c; + display: flex; + height: 40px; + padding: 0px 24px; + justify-content: center; + align-items: center; + gap: 10px; + color: #fff; + text-align: center; + border: none; + cursor: pointer; + font-family: "GothamNarrow-Bold", sans-serif; + font-size: 14px; + } + } + `} + > + +

Discover Impactful Library Assets

+ + + + + + + + {panelCard} + + + + +
+ + + ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/infoCard.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/infoCard.tsx new file mode 100644 index 000000000..f3a431e56 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/infoCard.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import { ReactComponent as EyeIcon } from "app/modules/home-module/assets/chunk-eye.svg"; +import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; +import { ReactComponent as GoogleIcon } from "app/modules/home-module/assets/google-icon-flat.svg"; +import { ReactComponent as LinkedInIcon } from "app/modules/home-module/assets/linkedIn-icon-flat.svg"; +import { ReactComponent as MicrosoftIcon } from "app/modules/home-module/assets/microsoft-icon-flat.svg"; +import { socialAuth } from "app/utils/socialAuth"; + +export default function InfoCard() { + const [displayButtons, setDisplayButtons] = React.useState(false); + const toggleDisplayButtons = () => { + setDisplayButtons(!displayButtons); + }; + return ( +
+

+ + You’re Viewing Default DX Assets +

+

+ The items displayed here are default assets from DX. Sign in to create, + customize, and personalize your own assets to match your needs. +

+

+ Sign In to Our Free Plan {" "} +

+ {displayButtons ? ( +
+ + + +
+ ) : null} +
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/panel.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/panel.tsx new file mode 100644 index 000000000..9ad967641 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/panel.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import Box from "@material-ui/core/Box"; +import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; +import { Tooltip } from "react-tooltip"; + +export default function Panel(props: { + isOpen: boolean; + setIsOpen: ( + isOpen: "coreFeaturesPanel" | "extraFeaturesPanel" | null + ) => void; + type: "coreFeaturesPanel" | "extraFeaturesPanel"; + title: string; + description: string; + tooltip: string; +}) { + const togglePanel = () => { + props.setIsOpen(props.isOpen ? null : props.type); + }; + + return ( +
div { + p:nth-of-type(1) { + color: #fff; + font-family: "GothamNarrow-Bold", sans-serif; + font-size: 18px; + margin: 0px; + } + p:nth-of-type(2) { + color: #fff; + font-family: "GothamNarrow-Book", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 325; + line-height: 20px; + margin: 0px; + } + button { + border: none; + background: none; + width: max-content; + height: max-content; + cursor: pointer; + color: #fff; + } + } + `} + > + + +

{props.title}

+

{props.description}

+ + {props.isOpen ? ( + + ) : ( + + )} + + + {props.tooltip} + + +
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/signupDialog.tsx b/src/app/modules/home-module/components/nonAuthUserLibrary/signupDialog.tsx new file mode 100644 index 000000000..f7b06f5e8 --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/signupDialog.tsx @@ -0,0 +1,155 @@ +import { IconButton, Modal, createStyles, makeStyles } from "@material-ui/core"; +import { CloseOutlined } from "@material-ui/icons"; +import { ReactComponent as OpenLockIcon } from "app/modules/home-module/assets/open-lock-icon.svg"; +import { ReactComponent as GoogleIcon } from "app/modules/home-module/assets/google-icon-flat.svg"; +import { ReactComponent as LinkedInIcon } from "app/modules/home-module/assets/linkedIn-icon-flat.svg"; +import { ReactComponent as MicrosoftIcon } from "app/modules/home-module/assets/microsoft-icon-flat.svg"; +import { socialAuth } from "app/utils/socialAuth"; +import React from "react"; + +interface Props { + modalDisplay: boolean; + setModalDisplay: (value: boolean) => void; +} + +const useStyles = makeStyles(() => + createStyles({ + modal: { + display: "flex", + alignItems: "center", + justifyContent: "center", + width: "100%", + height: "100%", + }, + paper: { + outline: 0, + width: 540, + borderRadius: "10px", + position: "relative", + display: "flex", + flexDirection: "column", + gap: "20px", + justifyContent: "center", + padding: "40px 20px", + backgroundColor: "#fff", + boxShadow: + "0px 14.8787px 22.318px rgba(0, 0, 0, 0.05), 0px 4.4636px 7.43933px rgba(0, 0, 0, 0.05), 0px 0.743933px 7.43933px rgba(0, 0, 0, 0.05)", + "@media (max-width: 650px)": { + width: "80%", + }, + }, + }) +); + +export default function SignupDialog(props: Props) { + const classes = useStyles(); + + return ( +
+ props.setModalDisplay(false)} + className={classes.modal} + aria-labelledby="simple-modal-title" + aria-describedby="simple-modal-description" + > +
+ props.setModalDisplay(false)} + css={` + position: absolute; + right: 12px; + top: 10px; + padding: 0; + &:hover { + background: transparent; + } + `} + > + + +
+

+ + Sign in to Create and Manage Assets +

+

+ To enable editing and creation, DX needs to link your account. + Once signed up, you’ll find all your assets saved in your library. +

+
+

+ Sign in for free to unlock data visualisation tools with +

+ +
+ + + +
+
+ +
+ ); +} diff --git a/src/app/modules/home-module/components/nonAuthUserLibrary/style.ts b/src/app/modules/home-module/components/nonAuthUserLibrary/style.ts new file mode 100644 index 000000000..db927b6ea --- /dev/null +++ b/src/app/modules/home-module/components/nonAuthUserLibrary/style.ts @@ -0,0 +1,32 @@ +import { css } from "styled-components"; + +export const style = { + assetCard: css` + text-decoration: none; + > p:nth-of-type(1) { + color: #231d2c; + font-family: "GothamNarrow-Bold", sans-serif; + font-size: 24px; + margin: 0px; + } + > p:nth-of-type(2) { + color: #231d2c; + font-family: "GothamNarrow-Book", sans-serif; + margin: 0px; + } + > img { + border-radius: 16px; + border: 8px solid var(--Secondary-Grey-Grey-7, #dfe3e5); + background: #fff; + } + &:hover { + cursor: pointer; + > p:nth-of-type(1) { + text-decoration: underline; + } + > img { + border-color: #231d2c; + } + } + `, +}; diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx index 0569dae03..95940b7ae 100644 --- a/src/app/modules/home-module/index.tsx +++ b/src/app/modules/home-module/index.tsx @@ -1,41 +1,20 @@ /* third-party */ import React from "react"; -import { Link } from "react-router-dom"; import { useAuth0 } from "@auth0/auth0-react"; import useTitle from "react-use/lib/useTitle"; -import { socialAuth } from "app/utils/socialAuth"; -import { useRecoilState } from "recoil"; -import { Box, Grid, Container } from "@material-ui/core"; /* project */ import HomeFooter from "app/modules/home-module/components/Footer"; -import DatasetDetailImage from "app/modules/home-module/assets/dataset-detail.png"; -import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg"; -import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg"; -import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg"; -import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.svg"; -import { homeDisplayAtom } from "app/state/recoil/atoms"; -import { - datsetDetailImgcss, - rowFlexCss, - turnsDataCss, -} from "app/modules/home-module/style"; import AssetsCollection from "./components/AssetCollection"; +import Hero from "./components/hero"; +import NonAuthUserLibrary from "./components/nonAuthUserLibrary"; +import { Box } from "@material-ui/core"; export default function HomeModule() { useTitle("DX Dataxplorer"); const { isAuthenticated, user } = useAuth0(); - const [display, setDisplay] = useRecoilState(homeDisplayAtom); - - const exploreViewRef = React.useRef(null); - - const exploreReportClick = () => { - setDisplay("reports"); - exploreViewRef.current?.scrollIntoView({ behavior: "smooth" }); - }; - return (
- {!isAuthenticated ? ( -
- - - -
-

Turn data into impact with Dataxplorer

- -

- - Dataxplorer simplifies and empowers visual data reporting - for all. - -

- - {isAuthenticated && ( -
- - CREATE REPORT - - -
- )} - {!isAuthenticated && ( -
button { - gap: 10px; - color: #fff; - display: flex; - height: 41px; - width: 100%; - background: #a1a2ff; - align-items: center; - justify-content: center; - text-transform: uppercase; + {!isAuthenticated ? : } - > svg { - transform: scale(0.8); - } - @media (max-width: 400px) { - font-size: 12px; - padding: 8px 16px; - } - } - @media (max-width: 655px) { - flex-direction: column; - justify-content: center; - align-items: center; - button { - width: 70%; - @media (max-width: 428px) { - width: 85%; - } - } - } - `} - > - - - -
- )} -
- - - dataset-detail-img - - - - -
- ) : ( - <> - )} - - + {!isAuthenticated ? : }