You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by yu...@apache.org on 2022/09/13 03:24:19 UTC
[incubator-devlake-website] 07/14: feat: user flow
This is an automated email from the ASF dual-hosted git repository.
yumeng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
commit f58bcd582f130d70a70c725bb7615a8db3a5effe
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Mon Sep 12 00:54:58 2022 +0800
feat: user flow
---
src/components/Sections/Components.tsx | 2 +-
src/components/Sections/UserFlow.tsx | 64 ++++++++++++++++++++++++++++++++++
src/pages/index.js | 2 ++
static/img/Homepage/BarChart.svg | 5 +++
static/img/Homepage/Grid.svg | 6 ++++
static/img/Homepage/Report.svg | 5 +++
static/img/Homepage/Setting.svg | 10 ++++++
static/img/Homepage/blue-arrow.svg | 3 ++
tailwind.config.js | 2 +-
9 files changed, 97 insertions(+), 2 deletions(-)
diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index dfc9f5e52..375a6ccf1 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -46,7 +46,7 @@ export const SectionImg = ({ src }: { src: string }) => <img src={src} alt="" cl
" />
export const InlineLink = ({ link, children }: { link: string, children: React.ReactNode }) =>
- <a className="text-label16 text-primary-500 mt-[16px]"
+ <a className="text-primary-500 mt-[16px]"
href={link}>{children}
</a>
diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx
new file mode 100644
index 000000000..98cd70cae
--- /dev/null
+++ b/src/components/Sections/UserFlow.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import UF1 from '@site/static/img/Homepage/Setting.svg';
+import UF2 from '@site/static/img/Homepage/Grid.svg';
+import UF3 from '@site/static/img/Homepage/Report.svg';
+import UF4 from '@site/static/img/Homepage/BarChart.svg';
+import BlueArrow from '@site/static/img/Homepage/blue-arrow.svg';
+import { InlineLink } from "./Components";
+
+const Card = ({ icon, text, children }: {
+ icon: React.ReactNode,
+ text: String,
+ children: React.ReactNode,
+}) => (<div className="w-[220px]">
+ <div className="flex flex-col items-center
+ bg-primary-100 w-[220px] h-[140px] rounded-[6px]
+ border-primary-500 border-[1px] border-solid
+ ">
+ <div className="mt-[40px]">{icon}</div>
+ <div className="mt-[10px] text-heading4 font-inter font-semibold text-primary-800">{text}</div>
+ </div>
+ <div className="mt-5 text-label18 font-inter pr-3">{children}</div>
+</div>)
+
+const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow /></div>
+
+export function UserFlow() {
+ return (
+ <div className="flex flex-col relative bg-white items-center">
+ <span
+ className="section-title text-center mt-[72px] mb-6"
+ >User Flow</span>
+ <div className="flex mb-[72px]">
+ <Card
+ icon={<UF1 width={40} height={40} />}
+ text="Set up DevLake"
+ >
+ <InlineLink link="https://devlake.apache.org/docs/QuickStart/DockerComposeSetup">Install DevLake</InlineLink> via Docker Compose, Kubernetes, Helm or Temporal.
+ </Card>
+ <Arrow />
+ <Card
+ icon={<UF2 width={40} height={40} />}
+ text="Collect Data"
+ >
+ Select, transform and set up a schedule for the data you wish to sync from your prefered data sources in the <InlineLink link="https://devlake.apache.org/docs/UserManuals/ConfigUI/Tutorial">Config UI</InlineLink>.
+ </Card>
+ <Arrow />
+ <Card
+ icon={<UF3 width={40} height={40} />}
+ text="View Dashboards"
+ >
+ <InlineLink link="https://devlake.apache.org/docs/LiveDemo">View dashboards</InlineLink> pre-built for a variety of use cases and learn engineering insights from the <InlineLink link="https://devlake.apache.org/docs/category/Metrics">metrics</InlineLink>.
+ </Card>
+ <Arrow />
+ <Card
+ icon={<UF4 width={40} height={40} />}
+ text="Customize Metrics"
+ >
+ <InlineLink link="https://devlake.apache.org/docs/UserManuals/Dashboards/GrafanaUserGuide#customizing-a-dashboard">Customize</InlineLink> your own metrics or dashboards with SQL to extend your usage of DevLake.
+ </Card>
+ </div>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index e6d06fef0..f25940f13 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import styles from './index.module.css';
import { HomepageHeader } from '@site/src/components/Sections/HomepageHeader';
import { WhyDevlake } from '../components/Sections/WhyDevlake';
import { UseCases } from '../components/Sections/UseCases';
+import { UserFlow } from '../components/Sections/UserFlow';
export default function Home() {
const { siteConfig } = useDocusaurusContext();
@@ -18,6 +19,7 @@ export default function Home() {
<main>
<WhyDevlake />
<UseCases />
+ <UserFlow />
</main>
</div>
</div>
diff --git a/static/img/Homepage/BarChart.svg b/static/img/Homepage/BarChart.svg
new file mode 100644
index 000000000..6828e9213
--- /dev/null
+++ b/static/img/Homepage/BarChart.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.55555 6.34705C6.47603 6.34705 7.22222 7.09324 7.22222 8.01371V33.5693H34.4444C35.3649 33.5693 36.1111 34.3155 36.1111 35.2359C36.1111 36.1564 35.3649 36.9026 34.4444 36.9026H7.22222C5.38127 36.9026 3.88889 35.4102 3.88889 33.5693V8.01371C3.88889 7.09324 4.63508 6.34705 5.55555 6.34705Z" fill="#FF8B8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5556 21.9026C10.5556 20.3685 11.7992 19.1248 13.3333 19.1248H17.7778C19.3119 19.1248 20.5556 20.3685 20.5556 21.9026V27.4582C20.5556 28.9923 19.3119 30.2359 17.7778 30.2359H13.3333C11.7992 30.2359 10.5556 28.9923 10.5556 27.4582V21.9026Z" fill="#FF8B8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6667 11.347C25.1325 11.347 23.8889 12.5907 23.8889 14.1248V27.4582C23.8889 28.9923 25.1325 30.2359 26.6667 30.2359H32.2222C33.7563 30.2359 35 28.9923 35 27.4582V14.1248C35 12.5907 33.7563 11.347 32.2222 11.347H26.6667Z" fill="#FF8B8B"/>
+</svg>
diff --git a/static/img/Homepage/Grid.svg b/static/img/Homepage/Grid.svg
new file mode 100644
index 000000000..9f179dbc2
--- /dev/null
+++ b/static/img/Homepage/Grid.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99998 4.12488C4.07951 4.12488 3.33331 4.87107 3.33331 5.79154V17.4582C3.33331 18.3787 4.07951 19.1249 4.99998 19.1249H16.6666C17.5871 19.1249 18.3333 18.3787 18.3333 17.4582V5.79154C18.3333 4.87107 17.5871 4.12488 16.6666 4.12488H4.99998ZM6.66665 15.7915V7.45821H15V15.7915H6.66665Z" fill="#FF8B8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3333 4.12488C22.4128 4.12488 21.6666 4.87107 21.6666 5.79154V17.4582C21.6666 18.3787 22.4128 19.1249 23.3333 19.1249H35C35.9205 19.1249 36.6666 18.3787 36.6666 17.4582V5.79154C36.6666 4.87107 35.9205 4.12488 35 4.12488H23.3333ZM25 15.7915V7.45821H33.3333V15.7915H25Z" fill="#FF8B8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6666 24.1249C21.6666 23.2044 22.4128 22.4582 23.3333 22.4582H35C35.9205 22.4582 36.6666 23.2044 36.6666 24.1249V35.7915C36.6666 36.712 35.9205 37.4582 35 37.4582H23.3333C22.4128 37.4582 21.6666 36.712 21.6666 35.7915V24.1249ZM25 25.7915V34.1249H33.3333V25.7915H25Z" fill="#FF8B8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99998 22.4582C4.07951 22.4582 3.33331 23.2044 3.33331 24.1249V35.7915C3.33331 36.712 4.07951 37.4582 4.99998 37.4582H16.6666C17.5871 37.4582 18.3333 36.712 18.3333 35.7915V24.1249C18.3333 23.2044 17.5871 22.4582 16.6666 22.4582H4.99998ZM6.66665 34.1249V25.7915H15V34.1249H6.66665Z" fill="#FF8B8B"/>
+</svg>
diff --git a/static/img/Homepage/Report.svg b/static/img/Homepage/Report.svg
new file mode 100644
index 000000000..b557f65b1
--- /dev/null
+++ b/static/img/Homepage/Report.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5209 14.9137L21.8761 13.3301C21.2304 12.7083 21.5489 11.6171 22.4278 11.4404L28.7146 10.1762C29.4752 10.0232 30.1545 10.6772 30.0304 11.4431L29.0052 17.7733C28.8618 18.6582 27.7835 19.0178 27.1377 18.396L25.9225 17.2261L21.7341 21.4145C21.0832 22.0654 20.0279 22.0654 19.3771 21.4145L16.6667 18.7041L11.1785 24.1923C10.5276 24.8432 9.47237 24.8432 8.8215 24.1923C8.17063 23.5414 8.17063 22.4861 8.8215 21.8353L15.4882 15.1686C16.139 14.5177 17.1943 14.5177 17.8452 15.1686L20.555 [...]
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33334 4.12488C5.90718 4.12488 3.33334 5.78429 3.33334 8.50759V27.5199C3.33334 30.2432 5.90718 31.9027 8.33334 31.9027H31.6667C34.0928 31.9027 36.6667 30.2432 36.6667 27.5199V8.50759C36.6667 5.78429 34.0928 4.12488 31.6667 4.12488H8.33334ZM6.66668 8.50759C6.66668 8.34216 6.7446 8.11093 7.02911 7.87912C7.31699 7.64454 7.77262 7.45821 8.33334 7.45821H31.6667C32.2274 7.45821 32.683 7.64454 32.9709 7.87912C33.2554 8.11093 33.3333 8.34216 33. [...]
+<path d="M7.22223 36.3471C7.22223 35.4266 7.96842 34.6804 8.8889 34.6804H31.1111C32.0316 34.6804 32.7778 35.4266 32.7778 36.3471C32.7778 37.2676 32.0316 38.0138 31.1111 38.0138H8.8889C7.96842 38.0138 7.22223 37.2676 7.22223 36.3471Z" fill="#FF8B8B"/>
+</svg>
diff --git a/static/img/Homepage/Setting.svg b/static/img/Homepage/Setting.svg
new file mode 100644
index 000000000..23e38d464
--- /dev/null
+++ b/static/img/Homepage/Setting.svg
@@ -0,0 +1,10 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1186_1544)">
+<path d="M38.4281 25.8739L35.504 23.3738C35.6424 22.5256 35.7138 21.6596 35.7138 20.7935C35.7138 19.9274 35.6424 19.0613 35.504 18.2131L38.4281 15.7131C38.6486 15.5243 38.8065 15.2728 38.8807 14.9921C38.9548 14.7114 38.9418 14.4148 38.8433 14.1417L38.8031 14.0256C37.9981 11.7758 36.7927 9.69008 35.2451 7.86938L35.1647 7.77563C34.977 7.55488 34.7267 7.3962 34.447 7.32049C34.1673 7.24478 33.8712 7.2556 33.5977 7.35153L29.9683 8.64171C28.629 7.54349 27.1334 6.67742 25.5174 6.07028L24.8165 2 [...]
+</g>
+<defs>
+<clipPath id="clip0_1186_1544">
+<rect width="40" height="40" fill="white" transform="translate(0 0.791504)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/Homepage/blue-arrow.svg b/static/img/Homepage/blue-arrow.svg
new file mode 100644
index 000000000..3913f5edb
--- /dev/null
+++ b/static/img/Homepage/blue-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="37" height="16" viewBox="0 0 37 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.7071 8.49861C37.0976 8.10809 37.0976 7.47492 36.7071 7.0844L30.3431 0.720436C29.9526 0.329912 29.3195 0.329912 28.9289 0.720436C28.5384 1.11096 28.5384 1.74413 28.9289 2.13465L34.5858 7.7915L28.9289 13.4484C28.5384 13.8389 28.5384 14.472 28.9289 14.8626C29.3195 15.2531 29.9526 15.2531 30.3431 14.8626L36.7071 8.49861ZM0 8.7915L36 8.7915V6.7915L0 6.7915L0 8.7915Z" fill="#7497F7"/>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index ee338ca80..41c225dff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,7 +47,7 @@ module.exports = {
heading1: ['32px', { lineHeight: '40px' }],
heading2: ['24px', { lineHeight: '30px' }],
heading3: ['20px', { lineHeight: '25px' }],
- heading4: ['16px', { lineHeight: 1.25 }],
+ heading4: ['16px', { lineHeight: '20px' }],
label14: ['14px', { lineHeight: 1.43 }],
label16: ['16px', { lineHeight: '24px' }],
label18: ['18px', { lineHeight: '24px' }],