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/15 03:14:44 UTC
[incubator-devlake-website] 06/25: feat: use case
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 da3de95d146a29a40a822392b0147c6402d9f379
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Mon Sep 12 00:16:48 2022 +0800
feat: use case
---
src/components/Sections/UseCases.tsx | 71 +++++++++++++++++++++++++++++++++
src/components/Sections/WhyDevlake.tsx | 2 +-
src/css/custom.css | 4 ++
src/pages/index.js | 2 +
static/img/Homepage/UC-bg.svg | 3 ++
static/img/Homepage/UC1.png | Bin 0 -> 23351 bytes
static/img/Homepage/UC2.png | Bin 0 -> 19341 bytes
static/img/Homepage/UC3.png | Bin 0 -> 24204 bytes
static/img/Homepage/UC4.png | Bin 0 -> 19829 bytes
tailwind.config.js | 4 +-
10 files changed, 84 insertions(+), 2 deletions(-)
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
new file mode 100644
index 000000000..c108d6f5d
--- /dev/null
+++ b/src/components/Sections/UseCases.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import BG from '@site/static/img/Homepage/UC-bg.svg';
+import UC1 from '@site/static/img/Homepage/UC1.png';
+import UC2 from '@site/static/img/Homepage/UC2.png';
+import UC3 from '@site/static/img/Homepage/UC3.png';
+import UC4 from '@site/static/img/Homepage/UC4.png';
+
+function UCCard({ lead, title, desc, children }: {
+ lead: string,
+ title: string,
+ desc: string,
+ children: React.ReactNode,
+}) {
+ return (<div className='use-case-card relative shadow-card overflow-hidden
+ w-[460px] h-[468px] rounded-[16px]
+ '>
+ <div className="flex items-center h-[228px] justify-center">
+ {children}
+ </div>
+ <div className="bg-white px-4 py-2 h-[240px]">
+ <div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1">{lead}</div>
+ <div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1">{title}</div>
+ <div className="font-inter text-neutral-500 text-label18 font-normal pr-1">{desc}</div>
+ </div>
+ </div>)
+}
+
+const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className="
+ w-[240px] h-[180px]
+ " />
+
+export function UseCases() {
+ return (<div className="flex flex-col relative bg-white items-center
+ h-[1206px] ">
+ <BG className='absolute z-0' />
+ <span
+ className="section-title text-center mt-7"
+ >Use Cases</span>
+ <div className="grid grid-cols-2 gap-x-[72px] gap-y-6">
+ <UCCard
+ lead="Open-source Software Maintainers"
+ title="Contribution Analysis for Community Growth"
+ desc="Grow your community strategically by learning how developers participate, contribute and collaborate."
+ >
+ <UCIcon src={UC1} />
+ </UCCard>
+ <UCCard
+ lead="Open-source Software Maintainers"
+ title="Contribution Analysis for Community Growth"
+ desc="Grow your community strategically by learning how developers participate, contribute and collaborate."
+ >
+ <UCIcon src={UC1} />
+ </UCCard>
+ <UCCard
+ lead="Open-source Software Maintainers"
+ title="Contribution Analysis for Community Growth"
+ desc="Grow your community strategically by learning how developers participate, contribute and collaborate."
+ >
+ <UCIcon src={UC1} />
+ </UCCard>
+ <UCCard
+ lead="Open-source Software Maintainers"
+ title="Contribution Analysis for Community Growth"
+ desc="Grow your community strategically by learning how developers participate, contribute and collaborate."
+ >
+ <UCIcon src={UC1} />
+ </UCCard>
+ </div>
+ </div>)
+}
\ No newline at end of file
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 6873c33f4..953e36c86 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -25,7 +25,7 @@ function Feature({ children }: { children: React.ReactNode }) {
function Supports() {
return (
<div className=" flex flex-col items-center
- mt-[48px]
+ mt-[48px] mb-[72px]
">
<C.H3Title>Supported Data Sources</C.H3Title>
<div className="grid grid-cols-5 gap-x-[24px] gap-y-[16px]">
diff --git a/src/css/custom.css b/src/css/custom.css
index 6afad5e80..20b071b41 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -57,4 +57,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.floating-link:hover .floating-link-icon {
@apply transform translate-x-1;
}
+
+ .use-case-card {
+ background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%);
+ }
}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 0f186bd12..e6d06fef0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,6 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
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';
export default function Home() {
const { siteConfig } = useDocusaurusContext();
@@ -16,6 +17,7 @@ export default function Home() {
<HomepageHeader />
<main>
<WhyDevlake />
+ <UseCases />
</main>
</div>
</div>
diff --git a/static/img/Homepage/UC-bg.svg b/static/img/Homepage/UC-bg.svg
new file mode 100644
index 000000000..6c9113409
--- /dev/null
+++ b/static/img/Homepage/UC-bg.svg
@@ -0,0 +1,3 @@
+<svg width="1280" height="1206" viewBox="0 0 1280 1206" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M635.5 166.5C418.59 322.155 95.669 366.888 0 357.05V1179C0 1179 250 1223.5 451 1197.5C652 1171.5 794 1054 962.5 1009.5C1131 965 1280 970 1280 970V0.999998C1138.42 1.00015 894 -19 635.5 166.5Z" fill="#F3F7FF"/>
+</svg>
diff --git a/static/img/Homepage/UC1.png b/static/img/Homepage/UC1.png
new file mode 100644
index 000000000..f918ba92a
Binary files /dev/null and b/static/img/Homepage/UC1.png differ
diff --git a/static/img/Homepage/UC2.png b/static/img/Homepage/UC2.png
new file mode 100644
index 000000000..8ec184b8d
Binary files /dev/null and b/static/img/Homepage/UC2.png differ
diff --git a/static/img/Homepage/UC3.png b/static/img/Homepage/UC3.png
new file mode 100644
index 000000000..0d4453e75
Binary files /dev/null and b/static/img/Homepage/UC3.png differ
diff --git a/static/img/Homepage/UC4.png b/static/img/Homepage/UC4.png
new file mode 100644
index 000000000..c993190ec
Binary files /dev/null and b/static/img/Homepage/UC4.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 8102ec317..ee338ca80 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
'primary-800': '#3C5088',
neutral: {
invert: '#FFFFFF',
+ 300: '#94959F',
400: '#70727F',
500: '#4D4E5F',
600: '#292B3F',
@@ -62,7 +63,8 @@ module.exports = {
sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)',
lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)',
lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)',
- high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)'
+ high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)',
+ card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)',
},
},
},