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 <[email protected]> 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)', }, }, },
