Skip to content

Commit

Permalink
fix: Revamp features page (#8839)
Browse files Browse the repository at this point in the history
  • Loading branch information
yoonhyejin committed Nov 22, 2023
1 parent 15e68bb commit fd129c7
Show file tree
Hide file tree
Showing 9 changed files with 324 additions and 102 deletions.
@@ -0,0 +1,38 @@
.feature {
flex-direction: row;
padding: 1.75rem;
color: var(--ifm-hero-text-color);
margin: 0rem 2rem 1rem 0rem;
min-height: 14rem;
max-height: 15rem;
overflow: hidden;
text-decoration: none !important;

img {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
strong,
span {
display: block;
margin-bottom: 0.75rem;
}
strong {
font-weight: 600;
font-size: 1.1rem;
}

span {
font-size: 1rem;
line-height: 1.25em;
}
&:hover {
border-color: var(--ifm-color-primary);
}
}
21 changes: 21 additions & 0 deletions docs-website/src/pages/docs/_components/FeatureCard/index.jsx
@@ -0,0 +1,21 @@
import React from "react";
import clsx from "clsx";
import styles from "./featurecard.module.scss";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Link from "@docusaurus/Link";

const FeatureCard = ({icon, title, description, to}) => {
return (
<div className="col col--4">
<Link to={useBaseUrl(to)} className={clsx("card", styles.feature)}>
<div>
{icon}
<strong>{title}&nbsp;→</strong>
<span>{description}</span>
</div>
</Link>
</div>
);
};

export default FeatureCard;
@@ -0,0 +1,36 @@


.feature {
flex-direction: row;
padding: 0.675rem;
color: var(--ifm-text-color);
margin: 0.5rem;
min-height: calc(100% - 1rem);
text-decoration: none !important;
img {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
strong,
span {
display: block;
margin-bottom: 0.25rem;
}
strong {
font-weight: 600;
}

span {
font-size: 0.875rem;
line-height: 1.25em;
}
&:hover {
border-color: var(--ifm-color-primary);
}
}
@@ -0,0 +1,65 @@
import React from "react";
import FeatureCard from '../FeatureCard'
import {
EyeTwoTone,
HeartTwoTone,
ApiTwoTone,
AlertTwoTone,
CompassTwoTone,
ProfileTwoTone,
} from "@ant-design/icons";

const featureCardContent = [
{
title: "Data Discovery",
description: "Search your entire data ecosystem, including dashboards, datasets, ML models, and raw files.",
to: "docs/how/search",
icon: <EyeTwoTone />
},
{
title: "Data Governance",
description: "Define ownership and track PII.",
to: "https://www.acryldata.io/blog/the-3-must-haves-of-metadata-management-part-2?utm_source=datahub&utm_medium=referral&utm_content=blog",
icon: <CompassTwoTone />
},
{
title: "Data Quality Control",
description: "Improve data quality through metadata tests, assertions, data freshness checks, and data contracts.",
to: "https://www.acryldata.io/blog/data-contracts-in-datahub-combining-verifiability-with-holistic-data-management?utm_source=datahub&utm_medium=referral&utm_content=blog",
icon: <AlertTwoTone />
},
{
title: "UI-based Ingestion",
description: "Easily set up integrations in minutes using DataHub's intuitive UI-based ingestion feature.",
to: "docs/ui-ingestion",
icon: <ProfileTwoTone />
},
{
title: "APIs and SDKs",
description: "For users who prefer programmatic control, DataHub offers a comprehensive set of APIs and SDKs.",
to: "docs/api/datahub-apis",
icon: <ApiTwoTone />
},
{
title: "Vibrant Community",
description: "Our community provides support through office hours, workshops, and a Slack channel.",
to: "docs/slack",
icon: <HeartTwoTone />
}
]

const FeatureCards = () => {
return (
<div style={{ padding: "2vh 0" }}>
<div className="container" style={{ padding: "0"}}>
<div className="row row--no-gutters">
{featureCardContent.map((props, idx) => (
<FeatureCard key={idx} {...props} />
))}
</div>
</div>
</div>
);
};

export default FeatureCards;
22 changes: 22 additions & 0 deletions docs-website/src/pages/docs/_components/QuickstartCard/index.jsx
@@ -0,0 +1,22 @@
import React from "react";
import clsx from "clsx";
import styles from "./quickstartcard.module.scss";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";


const QuickstartCard = ({ icon, title, to, color, fontColor }) => {
return (
<div className="col col--6">
<Link to={to} className={clsx("card", styles.feature)} style={{ background: color, color: fontColor}}>
<img src={useBaseUrl(`/img/${icon}.svg`)} />
<div style={{ margin: "auto 0"}}>
<strong>{title}&nbsp;→</strong>
</div>
</Link>
</div>
);
};


export default QuickstartCard;
@@ -0,0 +1,48 @@
.feature {
flex-direction: row;
height: 10rem;
flex-shrink: 0;
padding: 3rem;
color: var(--ifm-text-color);
margin: 0rem 2rem 1rem 0rem;
min-height: calc(100% - 1rem);
text-decoration: none !important;


img {
width: 3rem;
height: 3rem;
margin: auto 1rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
strong,
span {
display: block;
margin-bottom: 0.25rem;
}
strong {
font-weight: 600;
padding: auto 0;
}

span {
font-size: 0.875rem;
line-height: 1.25em;
}
&:hover {
border-color: var(--ifm-color-primary);
}

.quickstart-text {
margin: auto 0;
}

}

.quickstart-text {
margin: auto 0;
}
35 changes: 35 additions & 0 deletions docs-website/src/pages/docs/_components/QuickstartCards/index.jsx
@@ -0,0 +1,35 @@
import React from "react";
import QuickstartCard from '../QuickstartCard'

const quickstartContent = [
{
title: "Quickstart with DataHub",
icon: "datahub-logo-color-mark",
to: "quickstart",
color: '#FFF',
fontColor: '#091013',
},
{
title: "Learn about Managed DataHub",
icon: "acryl-logo-transparent-mark",
to: "managed-datahub/managed-datahub-overview",
color: '#091013',
fontColor: '#FFF',
}
]

const QuickstartCards = () => {
return (
<div style={{ padding: "2vh 0" }}>
<div className="container" style={{ padding: "0"}}>
<div className="row row--no-gutters">
{quickstartContent.map((props, idx) => (
<QuickstartCard key={idx} {...props} />
))}
</div>
</div>
</div>
);
};

export default QuickstartCards;
@@ -0,0 +1,34 @@
.feature {
flex-direction: row;
padding: 0.675rem;
color: var(--ifm-text-color);
margin: 0.5rem;
min-height: calc(100% - 1rem);
text-decoration: none !important;
img {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.75rem;
}
strong,
span {
display: block;
margin-bottom: 0.25rem;
}
strong {
font-weight: 600;
}

span {
font-size: 0.875rem;
line-height: 1.25em;
}
&:hover {
border-color: var(--ifm-color-primary);
}
}

0 comments on commit fd129c7

Please sign in to comment.